Main UI - Page Building Questions

Setup, Configuration and Use Widgets
, , ,
1

I’m still working through building pages for my home automation system in main-ui. I am trying to sort a few things out that I can’t get a grasp on.

  1. On the page builder, how do I change the size of the “work area”? Currently in the grey background of it it says “Layout Size: 1280 x 720 (Current Screen: 1920 x 1080)”. How can I change the Layout size so I can make pages that fit perfectly on different size tablets. (Lets say 1280 x 800 which I think is the size of my Kindle HD8. (Note, I’m working on my laptop which has some ridiculous resolution but I believe it reduces to 1920 x 1080, so that part makes sense, I think).
  2. How do I properly size the actual full page to a certain tablet? What I’ve done is on the code tab of the page I’m designing I change the height to the desired amount (in this case 800), as it seems that the width defaults to 1280. Like this ?:
config:
  fixedType: canvas
  gridEnable: true
  h: 800
  hideNavbar: true
  label: Home Overview
  layoutType: fixed
  scaling: true
  sidebar: true
  style:
    background: dimgray

I think that’s all of my questions for now. Thank you for the help!

2

  1. When you add masonry, rows, and columns to the Layout page, each widget you place will have a “Row options” in the configuration menu. Here you can define what percentage of the row that widget consumes based on the width of the page. So you can’t have three widgets per row on wide screens, only two for medium width screens and narrow screens like phone displays only one widget per row, for example. I don’t know about other page types.

    But one of the main reasons that MainUI was developed was to make it adaptive. Outside of specifying this row property, you shouldn’t need to worry about the size of the screen. The underlying frameworks upon which MainUI is built will resize and reflow your widgets to deal with the extra width or lack of width automatically.

  2. You don’t. You work with percentages with each widget as discussed above and let the frameworks do the rest. Unlike HAPanel, MainUI is designed and built to let you define one Page that works across all screen widths.

3

Rich, thanks for the reply. Ok, I follow what you’re saying. I think I’ve gone the other direction with my pages and I’m using the fixed canvas option for my tablet pages (for now). It’s definitely still a work in progress. To do this on the “Pages” page I click “+” in the lower right to add a page, then “Create Layout”, and once I’m on “Create Layout Page” I click on “Switch to a Fixed Canvas” and then I’m currently using a fixed grid to give me references, much like “Snap to Grid” in powerpoint.

I’m sure there are some strong opinions between using the Fixed Layout Canvas where you just add widgets, and the non-Fixed version where you add Blocks and Masonry.

However, in researching these options you helped me find the option to change the ScreenHeight and ScreenWidth, which are on the right hand side of the screen on the Create Layout Page, a small icon with three varied size boxes. If you click on that and then select “Configure Canvas Layout” it gives you the option to customize the size of the page.

The code looks like this:

config:
  fixedType: canvas
  gridEnable: true
  hideNavbar: true
  label: Home Overview
  layoutType: fixed
  scaling: true
  sidebar: true
  style:
    background: dimgray
  screenHeight: 800
  activeIdx: 0
  screenWidth: 1280
blocks: []
masonry: []
grid: []

Thank you again for the response and for all your years of support for this community!