Dashboard Representation on App vs on Web Browser

A pleasant layout on a computer web browser is an illegible mess on the android app.

But making changes on the android app changes the dashboard layout on the web browser. So, it seems one must create and maintain .two different dashboard layouts, simply because the app does not seem to know that it is running on a phone, with a smaller screen.

How is one supposed to manage this proliferation of dashboards? I see from comments that there is a similar issue for people using tablets as "control panels", and I glance over at a stack of 3 Kindle Fire tablets, bought for exactly that purpose, and wonder if they will ever get used.

Is there at least some scripting somewhere to designate a default dashboard for each device? This is a absolutely crucial "Wife Acceptance Factor" - she needs a user front end that simply "appears" without her having to wade through menus and figure out which dashboard is which for which device.

My displays here are not unusual or uncommon - 2 Pixel 3 Android 10 phones, 3 Kindle Fire Tablets, and Chrome and Firefox browsers on PC and Mac.

1 Like

Check Smartly, a mod for the built-in Dashboard. It will make what you want to do achievable. It is also worth to mention that you can copy one Dashboard configuration to another so that you don't have to keep redoing everything.
@spelcheck - You know better how your auto-sizing works, I barely use that part.

4 Likes

I'm moving to Hubitat from Wink and also plan to use a few 7" wall mounted tablets.. I'm not exactly impressed with the web/app UI and am really hoping I can customize it to get back to where I was with Wink.

I used to be an Android developer at Wink and had created my own dashboard UI.. I really tried to push the company to make it available for all users - and maybe it will at some point now that they're going to start charge users.. the code's all there.

I'll post a few pictures here as a template for what I'd LOVE to figure out how to replicate with Hubitat.

For a start, check out @spelcheck's Smartly

[RELEASE] smartly v1.06 - custom icons, thermostat re-design, custom dashboard link label and icons

2 Likes

Same! I created smartly because my wife wouldn't accept the dashboard looking like it was from a 1970 soviet missile command bunker. :sweat_smile: honestly I think most of us are here working on this stuff for sign-off from the wife haha.

HE app remembers which dashboard you were viewing previously and will open directly to that dashboard on launch. You'll need to select a dashboard initially, but every time after that it'll be similar to ST where you are taken directly to your dash. This is only one piece of the puzzle though, moving on!

As @markus and @aaiyar mentioned, smartly might be able to help with some of this. It has the ability to 'calibrate' the dashboard to fit appropriately on any device. It will not change tile position from device to device, but simply arranging your tiles from left to right based on importance is enough to make it do the job well. A good example is the introduction banner of the release thread, showing the same dashboard of mobile vs tablet (essentially desktop viewport). Attached below.

Additionally, we've built in a 'padding fix' so that if you do scroll on a device, the tiles have equal spacing all around them. It makes scrolling look natural and app-like, instead of stock where the rightmost tiles are slammed against the edge of the screen. It's a little thing, but it makes a difference if you are using a single dashboard for many devices.

6 Likes

Yeah that looks good man! If you are only doing it for yourself and only for a particular device for a particular set of tiles, then it's totally do-able with CSS and wouldn't be too difficult. If you wanted to create a skin that people could use everywhere, then the colored icons would make it a large task as you'd have to create an SVG/image for every tile type, every state.

At smartly we have a skin in development that will allow us to completely design the tiles, including images as icons (among other things) but that is a little ways off for public use.

To get back to answering your question, yes it's possible. :slight_smile:

2 Likes

That's great! I hadn't seen smartly before and I'll play around with it once I've moved over a few devices from Wink.

For a few of the more advanced questions I'm wondering if any of this is possible given this is html:

  • use more of the screen for the dashboard? I posted a screenshot of my phone (not 7" tablet) in landscape as an example.. just a single device added for now but that title bar takes up quite a bit of precious vertical space.
  • touch/press effects? As a mobile developer I notice these things more I imagine.. but I like how a button press has a down 'selection' state which gives some immediate feedback where you're touching.. not a big deal but just something i didn't see in the Hubitat dashboard
  • keep the screen awake during the day? If not that's ok since I know there's Android apps like Tasker that can do this
  • remove the status bar.. there's an Android app to do that too so not necessary but just what I'm looking to create

1 Like

Search for "Fully Kiosk". I am pretty sure it can do most of what you want (except the dynamic button press) when opening dashboards in a browser instead of app.

Unfortunately, my ancient tablets can't use it so I am not 100% sure.

2 Likes

There's an Android app called "Wallpanel" that I use for all my wall tablets. Much cleaner than the browser... sort of "kiosk" like. Works with any browser based automation hub. Sleep, keep awake, camera, no title bar, etc.

We have that in the works. I'll see if there is some CSS I can come up with to help for now though. I'll post to the smartly release thread and will tag you :v:

Ability to remove or resize the dashboard banner · Issue #57 · ezeek/smartly · GitHub -

I thought this would be easy, but the more I read the more it looks like you'd need JavaScript and/or browser support would be limited.

2 Likes

FYI I have a set of 4 dashboards designed for my Fire HD 8 wall-mounted tablets (rooted, running Lineage OS 14 and Fully Kiosk Browser), and then I have a dashboard designed for my phone. All done with the built-in dashboard app. The phone dashboard allows control of lights and Hubitat Safety Monitor, and viewing of my security cameras, but none of the weather displays I put on my tablets.

The tablet dashboards have dashboard links among themselves, but the phone does not. They are separate use cases for me. I just got the link to the dashboard for my phone and put a shortcut to just that one on my home screen.

1 Like

That's the way to do it! The entire reason I bought an HD8, rooted and lineage'd it was because the version of webkit installed on fireos had artifacts when using FKB. I'm also spelcheck on xda :v: Kai@xkd just finished a new build of los16 the other week that has been working without issues for me. Pie on an HD8, it's a beautiful thing. :fist:

2 Likes

LOS16? Is it stable?

I really need to consider that. 14 is much better than FireOS, but I'd love to see LOS16. I do want it to be rock solid, though.

EDIT: BTW, gotta have old hardware to root an HD8 now :frowning:

It's been a struggle, but looks like he finally killed that file descriptor bug. I'm running a build from 3/5/20. It looks like he has newer nightlies though. Give it a try!

I'm surprised they haven't cracked the mustang. I love my karnak and my douglas!

Thanks for all the alternative product suggestions, but what I did not understand was why the CSS that handles the tiles does not also proportionally adjust the little icons and the text in the stock "Dashboard"code on all platforms. This would seem a fairly basic thing to do, or maybe I am being naive thinking that one would take the trouble to keep the implementation "clean CSS".

1 Like

I don't know about the mustang, but the new karnak hardware isn't rootable :sob:

I agree, that would be a great feature, and shouldn't be that hard to write.

It might even be possible to write that in the custom CSS to fix the error of their ways... :thinking:

If I am understanding what you want, try the following.

Dashboards
Select a dashboard
Gear Menu
Options tab

Change row width and column height to blank (no entry).

I am speaking of the reaction of a dashboard with that exact config change. It is a mess, hence the many suggestions to abandon that for 3rd party products, which are less of a hopeless mess.

I let it autosize width, but have a fixed height. That, and limiting to either 2 or 3 column width seems to fix most of my issues with things.

But yea, not optimal, and having settings per device would be nice.