I have created a layout in MainUI (OH3) which works well for a browser under a windows PC but it doesn’t work that nicely e.g. with Android phones because my Overview page has 2-3 columns. I’m wondering whether it would be possible to create another layout under MainUI for a phone. I have looked at the documentation for HABpanel but if I wanted to use it I would need to make separate pages for my Android tablet and phones so I think this is not the way to go. Sitemaps would require quite lot of coding so I’m not that willing to start making sitemaps. So, what would be the best option for smart phones?
MainUI is built to be adaptive based on screen size. But often the default settings are not what you need.
Edit the config for the Column Options and you can set what percentage the column takes up on the given screen sizes.
In the above example, the widget takes up a third of the screen on large screens and 100% on others. So my layout has 1 column of widgets for small screens and three for larger.
Thanks Rich, I know how to adjust the widths of the column. I’ll show my Overview page which works pretty well on a PC but not on a phone (Samsung S21).
I know the Overview page is just too busy and it won’t work on a phone. I would like to make a simple Overview page for my phone but I’m not sure if this is possible.
I’m coming from Homeseer world but gradually setting up OH3 (which already works really nicely). Homeseer has developed a graphical software for making nice interfaces for phones. Below is an example of my first HSTouch page with clickable buttons. Each button (when clicked) opens a new page. I didn’t include all the functions in my HSTouch pages but I could control most of the functions at our house.
I guess somewhat similar could be done in HABpanel/sitemaps but at least in case of sitemaps you would need to do lot of coding which I’m not that eager to do. Iin case of HABpanel I would need to create the interface for my phone and Samsung tablet.
The widget expression system has a device object that gives you information about the system currently displaying the UI. In this case you can use device.desktop to identify whether or not the UI is being displayed on a desktop browser.
I suggest you just identify all of the components on the Overview page that you don’t need when you are viewing it through a phone and add the following to each of them:
visible: =device.desktop
visible only renders the item if it has a true value, so that line will mean that a component only gets rendered at all if viewed from a browser that is not a mobile system.
You can even apply the visible property at the level of an entire oh-block or oh-grid-row or oh-grid-col if you have an entire section you’d like to leave out.
Edit:
I don’t think the visible property is an option in any of the page editing dialogs, you have to switch over to the code tab and add it manually.
1 Like
I’m not sure why you say that. You can create a sitemap in the UI and it’s going to just be one line per element. That’s hardly a lot of coding even if you used .sitemap files. In general, sitemaps take the least amount of work to create compared to all the other alternatives, including MainUI widgets (unless you are not using custom widgets).
But @JustinG has the right approach. If you have stuff you don’t want to show at all on the phone, you can just hide them based on visibility. Or you can create a wholly separate Page for use on the phones, but the Overview page you have now will be the default first page you see even on the phone.
Looking at your screenshot I also think a lot could be done to consolidate a lot of those elements into one widget which will help a whole lot. For example, in the screen shot above, all my lights are in that one lights widget which uses an oh-repeater card to render. So all the light controls stay together and the whole widget gets treated as a unit. That con go a long way towards addressing this.
Also, looking at the screen shot from the phone, you are not using the column properties. The whole point of those properties is to tell the page how many columns to render for small screens. On your phone, there should only be one column. You still have three to four columns per row. That’s why it’s all smooshed together. For anything but the largest screens, each column should take up 100% which will force each to be rendered on a separate row.
Thanks a lot guys. I think I got the message. I need to look at the documentation for the sitemaps again. Perhaps they are not as difficult to implement as I thought.
It seems that I hadn’t setup the column properties for the Overview page at all. I adjusted the widths for each screen size and now my Overview page on the phone looks much better. I’ll need to look at the oh-repeater card. I have used oh-list card in most of my pages.
I can say that most of my time has gone to setting up my Modbus based hardware and haven’t had yet time to improve my pages.
@ rlkoshak. Somehow I had ignored the Column Options in my pages (of course I knew these settings) and now when I adjusted them according to my needs the pages look fine so there is no need to create new pages for my phone. What a simple solution, many thanks for your help.