Dashboard improvement suggestions | Mobile?

[chrislader]

Hi there,

A little 'stolen' from the Aurora theme; 2 improvement suggestions;

1. Option in settings to remove titles of device types on dashboard screen (in mockup: red)

2. Much more compact tiles on dashboard screen making it a little bit more of a real dashboard. In aurora theme the tiles can be made so compact that they are virtually 'lines'

[davidlb]

I can add an option to have a compact dashboard layout.

[landaisbenj]

First idea by @EdddieN was this:

Do Something like that was pretty good. Easy with flex or grid...

[chrislader]

Great. Looks like Apple Homekit devices overview.

How about this:

This way you would keep the dimmer options straight from dashboard.

[davidlb]

To get the compact dashboard, in Domoticz settings (not theme settings) set Dashboard mode to Compact.

[chrislader]

@davidlb Looks a million times better now, but I am not sure if you intentionally also made the tiles in the menus at switches, temps, utils etc smaller? I think they are better there as well. Looks slick now.

Can you make the titles on dashboard optional as well? like in my first screenshot: the red striped area.

[chrislader]

Camera preview going wrong in new setting, little bit too flat (when last row is applied).

[chrislader]

Really like where this is going to. Few suggestions (annotated in blue);

• text alignment of titel to left
• little bit more distance between dim slider and button
• categorie icon alignment as an acolade centered in the middle. But to be honest it is better to remove it; it really speaks for itself
• icon size can also be like 80%; same goes for flip switch?
• Utility values seem to be missing?

[EdddieN]

Just butting in, Should not the super-compact view be designed with mobile access in mind?

This is something it has been bugging me for a while, accessing Domoticz from a mobile device but feeling like an App. Is it worth looking into a property App theme design? Questions are:

• Can all be contained in one theme?
• Can the browser detect which part of the theme to load?
• The theme is getting a bit heavy (kb size), or at least I notice that it takes more a more to load to me, using a RPI
• Remote access, another conversation but worth talking about it.

Maybe we should open a new project/issue or whatever for this? Sorry I hijacked the thread a bit 😆

[chrislader]

@EdddieN I'm with you on this and solved it as follows;

I use a native app (so answering your 1st question: I think not; these are 2 things) on my iPhone AND iPad 'Pilot' to fully suit mobile needs. The problem with feature rich mobile websites is that simply they are not snappy enough compared to dedicated apps (eg. the dimslider). If you move into this direction you switch to Xamarin / Mendix / etc using webcode together with native mobile code.

Thus yes; you are pointing out an important difference; the compact view we are trying to get here is an overview / dashboard approach for desktop, not so much a mobile 'overview'. These are different things.

You could argue to get mobile browser detection on your dashboard website giving you a view that I mocked up in a earlier post... that might be a hybrid solution.

[chrislader]

Here is a mobile app view from Pilot, as you see complete different than the mobile view approach from ‘dashboard’

[EdddieN]

Yes I have paid version of all the Domoticz compatible ones (Pilot, Domoticz, Domotix, Imperihome...) yet I keep going back to Homekit as it find it the fastest and more intuitive.

I remember a while back someone did a web version of it for Domoticz, if I can find it I'll post the link, it was on the forum

[EdddieN]

Found it! https://www.domoticz.com/forum/viewtopic.php?f=8&t=12909&p=117564#p117564 https://github.com/andrewatwood/homeAppFrontend

I think it would be great if we could do something similar: https://streamable.com/iis1 More than happy to work on the design if viable

I forked here and contacting the original author: https://github.com/EdddieN/homeAppFrontend

[chrislader]

@EdddieN I think we need to keep 3 things seperated;

1. [Desktop] The Desktop dashboard (as intended by Gizmocuz). This is what we try to achieve above. Get a beautifull overview off all switches and sensors into 1 view.

2. [Hybrid mobile] When this dashboard gets opened on a mobile device you apply something fancy. I think we have 2 options here; a responsive version where tiles are sorted as lines as seen in mockup. Second option here is to switch to a homekit approach as demonstrated by andrewatwood. So here you need to push mobile_detection to active that widget (and it looks like it is mainly oriented at switches

3. [Native mobile] A snappy dedicated app using all the options from a mobile device, like push notifications, widget integration, smartwatch, geolocation, etc. Examples already given above.

[EdddieN]

I think option 1 and 2 are reasonable. Option 3 probably requires other skills beyond web coding, although with PhoneGap or something like that may be possible

Option 2) -> Do we go standard Dashboard or do we go something more like HomeKit?

[DewGew]

In the new dashboard. last seen is under the tiles. Compact view is ok.

[DewGew]

Found it! https://www.domoticz.com/forum/viewtopic.php?f=8&t=12909&p=117564#p117564 https://github.com/andrewatwood/homeAppFrontend

I think it would be great if we could do something similar: https://streamable.com/iis1 More than happy to work on the design if viable

I forked here and contacting the original author: https://github.com/EdddieN/homeAppFrontend

Looks promising.

[EdddieN]

yes it does indeed! Last time I tried was quite light on the phone

[mrrioes]

Did you guys had a look at Reacticz? https://github.com/domoticz/Reacticz I guess I´m the last one qhos using it but find it very respnsive and I like the fact that it is customizable. Unfortunately it seems not to get any support anymore.

[davidlb]

Yes, I know Reacticz, I worked on it, it's really cool for dashboard. But you cannot manage domoticz from it.

I'll look at bugs next week when I'll be back from vacations.

[chrislader]

@davidlb great! give me an @ when youre working on it. Can test quite fast and with lots of different sensors and devices (250+ here in the system)

Besides the remarkes from above, some extra thoughts;

• When using devices with multiple labeled custom buttons; this will almost never fit (in compact mode); I suggest just showing the active one. Example (below is not in compact mode):

[chrislader]

@davidlb

I can confirm the fixed camera tile when last in row (in normal mode)

For the compact mode: I attached the screenshot below. Again great to see the improvements coming, great work.

• Space between slider + switch is still a bit too tight I think. Also it looks like they only show when lights are RGBWW and not WW (then there is only a slider, no switch). Suggestion: remove the seperate switch -> this is best done by the icon -> now there are 2 switches practically.
• Utility doesnt show current values; I suggest removing the extended info and replace by just the actual value (as now done for temperatures)
• I would make the categorie icons on the left side optional through the settings menu or leave em out; I think they are not aligned with the simplistic style. Maybe it's just taste, but I personally would remove them including the suble edge around the category
• The current option with text label buttons is not shown. When I mouseover I do see the options through which I can actually scroll; I like your solution here

Edit: With last seen on:

Edit2: With "switch instead of text turned off"

[chrislader]

@davidlb TOP job!

• There is a small subtle white line surrounding the categories; I would remove it
• Utility shows extra info; I think this should be removed as well

[davidlb]

@chrislader it should be ok now, keep me informed if you find other bugs :)

[chrislader]

Not sure what happened, but I can not update beta anymore?

[davidlb]

DId you make any change in your repo? Try:

git fetch
git reset --hard origin/beta

[DewGew]

I have issue as chrislader. No change done

[davidlb]

Damn, I cannot reproduce it, I have been able to update an old repo and tried from a fresh clone. I think it's after my git rebase to remove a bad commit message but I cannot find any useful articles to help you

[chrislader]

@davidlb I can pull again after applying your pieces of code

[chrislader]

Looking sharp David! I will bughunt the coming days ahead. But first impression is very good.

Desktop/laptop:

[DewGew]

Damn, I cannot reproduce it, I have been able to update an old repo and tried from a fresh clone. I think it's after my git rebase to remove a bad commit message but I cannot find any useful articles to help you

I know whats wrong.. I uploaded some images. That's way I got error. Maybe create a "custom" folder and put user changed files there and change the paths in js files and add this folder to ignore list.

[chrislader]

@davidlb I tested a lot of combinations.

Suggestions:

• The distance between the switch and the text. If you are able to put it down a few pixels then it would be perfect I think.

• Other thing: the lettertype size of the titels of the text items of dashboard is bigger than the one on the other tabs. Edit found it: it's 13.33 px (tabs) vs 14 px (dashboard). In screenshot 1 I have made the titles smaller. I think it looks better. Screenshot 2 has the current sizes.

• Same goes for the labels of the tabs; I have made them the same size as titles. I think this looks better. So text could be a size smaller.

[chrislader]

Bug: Dashboard in columns goes wrong (when option is ticked in theme settings).

But even if the width here was correct, there is actually no use for this option if the tiles are just put beneath eachother. It would be better if the tiles where added next to eachother in columns to fit the page. So for switches it would be 3 columns in my case. Same for temps etc.

[chrislader]

I think mobile for webbased approach looks great now. Considering this is web only.

Suggestion:

• Ive noticed that there is an yellow sun icon here for sunset / sunrise time. On dashboard this is a black one. I think a black one is more subtle and tight.
• Also there is some room on the right and left side of the mobile view; maybe you can expand it to fit a little more of the available width of the mobile device? Don't know how that will look though.

[davidlb]

Thanks @chrislader for your comments! I'll fix them.

[EdddieN]

WoW this is really nice, I had been very busy at work so took me a while to test all the new features. Great work!

Here is thought, the same way that we have a mobile view for the dashboard, can it be used for the rest of the tabs? Is there space for mini icons?

[chrislader]

@EdddieN

Have you already seen the new Pilot app (released yesterday)? Complete overhaul. Redesign based upon homekit tiles, exactly how you described. Your prayers have been answered ;)

[chrislader]

@davidlb Just tested your fixes for the mobile webpage.

• The width is now perfect

• The sun icon is now removed (my suggestion was to replace it by the black icon one, see below)

• I noticed that when showing "dummy" devices it uses a different icon instead of a blue arrow before the device

Let me know when you found the time for the other desktop fixes :)

[EdddieN]

@chrislader

Brilliant! Can't wait to see the update on mine, for whatever reason it hasn't appeared on the my Appstore... patience I guess.

[chrislader]

@davidlb Just did a full retest of everything. Like the new sharp icons; they look great!

My remarks are:

• text size of titels in compact mode on dashboard is slightly larger than in normal mode and on the other tabs. If you could match it it would be great.
• in compact mode: vertical colums still has a visual bug; the first column is smaller
• I love to see the full time + black sun icon return in web mobile mode. But thats just taste I think ;)

All above is ofcourse nice to have. The dashboard looks really nice! Keep up the good work

[davidlb]

Thanks @chrislader for all relevant comments! Last commit shoud fix them all :)

[chrislader]

@davidlb

Thanks for all the last fixes, you did an absolute brilliant job in bringing a real desktop dashboard back to Machinon/Domoticz. My compliments (and probably all of the other users as well)!!!

I ll close this topic now. Other bugs/ideas/findings etc, we ll do in a new issue.