Edit layout

In "Edit Layout", you can specify buttons layout and behavior for each page.

Edit pages

Press the "" in the lower right corner of the window to add a new button to this page. You can drag the buttons to any position within the specified range(refer to Grid rows/columns). Drag the handle at the bottom right of the button to resize it.

If you check the box at the upper left of the buttons, you can edit them all at once. Press the "" button to remove all checked buttons. You can also press "" to temporarily store the value of checked buttons and pressing "" to duplicate stored buttons. The stored buttons are shared within the browser, so you can copy and paste them between different pages. You can clear all the checks by "".

When you press the "" icon, an edit page shows on the left side of the window and you can change the value of buttons you've checked.

In "Page tab", you chan change the design of this page. This is true even if the button is unchecked. This will be reflected even if the button is not checked.
Page nameYou specify the name of this page. This name is used for the title bar and so on.
HostEnter the HTTP address to send POST to when a button is pressed. If empty, dictionary "{localhost}" is used.
Background colorChange the background color of this page.
Grid rowsSpecifies the maximum number of buttons that can be placed vertically.
Grid columnsSpecifies the maximum number of buttons that can be placed horizontally.
Grid marginChange the spacing between buttons.
Use for landscapeEnables this page when the screen is horizontal.
Use for portraitMakes this page available when the screen is vertical. You can't uncheck it along with "Use for landscape".
"Button tab" changes the appearance of checked buttons.
Display as labelA check acts as a label. A button has no background and doesn't respond when pressed.
Text colorSpecifies the color of the icon or text displayed on the button.
Button colorSpecifies the color of the button background.
Label typeChanges the type of image shown on buttons.
Icon nameWhen the label type is “Material Icon”, enter the name of the icon to be displayed. You can use the image displayed on this site for the icon.

Please quote the red line for the name. The CSS modifier “mdi-” is automatically added.
Label textSpecifies the text to display on the button when the label type is "Text". Excess text will be hidden.
Label imageSpecifies the image file to be displayed on the button when a label type is "Picture". Browsers that do not support IndexedDB have a limit on the size of images that can be stored (Approximately 5MB total).
Label sizeChange the label size.
Border roundnessRounds the corners of the button. When you open the bottom panel, you can resize the corners individually.
At "Actions tab", enter the POST request when a button is pressed.
HostIf there is an HTTP address that you want to specify only for this button, please enter it. If it is empty, the page setting or "{localhost}" is applied.
Ignore responseIf this is checked, a warning will not be shown on the screen even if server returns a code other than HTTP200(Success). However, a communication error is always shown regardless of whether it is checked.
ActionYou fill in the POST data. How the text works depends on the destination server.

Press the "" at the upper left corner of the screen to discard edits or the "" at the upper right corner to reflect edits on the page to return to operation mode.