Dashticz - Multiple dashboards

[robgeerts]

In latest beta it is possible to use multiple dashboards.
If you want to use a slightly different version of dashticz on another device, you can open index2.html on that device.
It uses the custom.css,custom.js and config.js from custom_2-folder (copy your config.js to this folder first).

Want to have a third one (for example your mobile device) ?
1.) Copy index.html to index3.html
2.) Copy folder custom to custom_3
3.) Edit index3.html and change the line var dashtype=1; to var dashtype=3;
4.) Open index3.html in your browser

[Jonb]

Nice !

[poudenes]

In latest beta it is possible to use multiple dashboards.
If you want to use a slightly different version of dashticz on another device, you can open index2.html on that device.
It uses the custom.css,custom.js and config.js from custom_2-folder (copy your config.js to this folder first).

Want to have a third one (for example your mobile device) ?
1.) Copy index.html to index3.html
2.) Copy folder custom to custom_3
3.) Edit index3.html and change the line var dashtype=1; to var dashtype=3;
4.) Open index3.html in your browser

NICE !!! Was done with designing... but now start over again to create a nice one for mobile

[HansieNL]

NICE !!! Was done with designing... but now start over again to create a nice one for mobile

Keeps you busy and off the streets

[htilburgs]

GB!

[niceandeasy]

The default Domoticz GUI works great on PC browsers, tablets and smartphones. It would just display less columns on smaller screens.
The default DashticsV2 GUI is not flexible at at all. Not all of the dashboard's devices are usable: some don't fit on the screen and zoom/scroll support is disabled. At the PC browser, it looks very usable after tweaking, at the phone, not so much.

So, I figure, it is a superior and very fancy customizable dash solution for a fixed touchscreen device that lets you control your home via Domoticz and aggregate data from other sources. Or, for a computer browser. But not both, because the design seems to be very much fixed to the screen size and dpi.

With the latest beta, I could create multiple dashboards for my laptop, my desktop, my diy-raspi-portable, my tablet, landscape and portrait and smartphone, landscape and portrait. That would be 7 dashboards to maintain.

So, does Dashticz support using it with different screen sizes, dpi values, orientations, probably by adding some CSS magic?
If yes, where can I find examples for that?
If no, will it be available in future versions? ...or would you confirm that Dashticz is created for being a fixed smart-home control panel?

[robgeerts]

First, its designed for tablets in the first case.
Second, I started Dashticz v2 for myself. I wanted a nicer dashboard on my tablet mounted on my wall with more modules than domoticz supports by default (like a bigger clock, weather forecast etc, mediaplayer, etc.) When I was satisfied for myself I shared the code on this forum but more and more features were requested and added by me. One of them was the slide-functionality so people could use the main slide for the most used switches and modules, and slide to a second slide for more, less important stuff. This is great for tablets mounted on a wall

I understand you want 1 config for all your screens.
I can fix that but image you have 3 columns.
If I make it fully responsive, it puts the 3 columns below each other on a smaller screen. No problem, but I can imagine you actually want to have the second column on top instead of the first. In that case, you still need to configure it multiple times.

[robgeerts]

The default Domoticz GUI works great on PC browsers, tablets and smartphones. It would just display less columns on smaller screens.
The default DashticsV2 GUI is not flexible at at all. Not all of the dashboard's devices are usable: some don't fit on the screen and zoom/scroll support is disabled. At the PC browser, it looks very usable after tweaking, at the phone, not so much.

Could you try latest beta and open it on your smartphone?

[niceandeasy]

Thank you for your answer. Indeed, for wall-mounted tablets, Dashticz is simply perfect. And I fully understand why you started this project

I'm currently using a tablet as primary screen for Domoticz. Dashticz is fully customizable, so I'll probably be able to fit the most used items in a square-shaped panel that will display correctly in both orientations, with an informative column on the right side only available in landscape. And if it will fit the tablet, it will also fit the laptop, the diy-raspilaptop (which has a re-purposed laptop display panel) and desktop.

I really need a customizable GUI, like you made. One that lets me integrate an RRGGBB colourpicker, for controlling diy RGB LED strips. (Domoticz is still failing miserably on that area, with its dummy 'rgb' switch that only outputs HSB without the S.) And integrate other gadgetry, such as mediaplayers, feeds, clocks, rain radar, etcetera.

So, I'll turn off the auto setting and I'll dive into it. If the colourpicker works, I'll put out a how-to, if no one else beats me to it.

For my phone, I'll just wait until full responsiveness will become available, preferably as a var-controlled option. I would create a copy of my config and css, for index2.html, enable responsiveness in that, and use that for the phone. I'm not using it that much on Domoticz. I'm not in a hurry.

?
wow...
(just seen your 23:50 post)
Well... Big thank you...
I'll try that tomorrow evening. I don't have git on my webserver and it's getting late. I'll let you know.

[niceandeasy]

Of course I couldn't wait. Downloaded the beta zip from github, deleted the master on my server, unzipped the beta, and took a peek. On first sight, it still looks the same, but not quite:
The phone lets me scroll while it is in normal portrait. It does not let me scroll while in landscape. At turning, Dashticz's view seems to update.
Tablet and laptop don't let me scroll.
I guess, now it is my turn to come up with my own multi-column design so I'll be a better tester.

I just want to point out one more issue, that was also present in the master:
From my current Domoticz dashboard, Dashticz creates three columns of switches and under it, some dimmers in one column, which is as wide as the three columns of switches. The whole thing uses always approx. 40% of the screen's horizontal size, on my laptop, tablet and phone, also in portrait position. So, the horizontal size of the switches is way smaller on a phone, while the height and font size stays the same.
Two of these buttons are for blinds and have an up/down/stop at the right. On the phone, this up/down/stop-part covers the whole button and part of the button that is left of the blinds button.
I'd guess, if I would already have multiple columns and if they would appear under eachother, they would still not use the width of the phone's display.
(on my phone (Samsung Galaxy S5) I'm using Chrome fullscreen)

[robgeerts]

Currently, it lets you scroll if the screen width is lower then 600 pixels
Dive into this later...

[robgeerts]

Could you test latest beta?
I think it should work now in portrait mode AND landscape mode

[niceandeasy]

Test started by unzipping latest beta in empty web folder. Creating CONFIG.js from default file provided; changing language and domoticz IP.
Phone: scrollable in both orientations.
Tablet & laptop: not scrollable.
Dashticz is still using max. 40% of the width of the screen, of all tested devices, all orientations.

This evening, I'll create more columns and see what happens and probably other customizations.

[robgeerts]

Indeed, if you have for example 2 columns with a width of 5, you have space left... the total width has to be 12, either by adding a column or by setting the width of the existing columns higher..

[niceandeasy]

I tested.

Small issue: the beta's CONFIG_DEFAULT.js does not contain the examples as listed in the master. I just copied it, myself.

After setting auto-positioning to false and fiddling a bit with your example lines and my own Domoticz IDXs, I am very impressed. Everything fills out nicely. Works perfectly on the phone. All columns are stacked into one, and scrollable. And on the tablet and laptops it shows columns next to eachother, as defined in CONFIG.js. This is perfect. I'll continue customizing my dash.

Minor issue that does not really bother me: when changing the orientation of the phone or tablet, some kind of refresh gets triggered, right after the turning. This will cause the music to stop playing and makes the Radio or nu.nl frame disappear if that would be open. And it seems unneccesary. Just after turning the device but before this refresh happens, Dashticz's layout looks okay.

Indeed, if you have for example 2 columns with a width of 5, you have space left... the total width has to be 12, either by adding a column or by setting the width of the existing columns higher..

So your default Domoticz dash items autopositioning setting should use for example two columns of 6 each, to make the first look a bit more appealing to the new users.

[robgeerts]

Small issue: the beta's CONFIG_DEFAULT.js does not contain the examples as listed in the master. I just copied it, myself.

I only left the necessary variables to make things easier, sometimes people just did things without knowing what they did (if people want more, the need to take a look at the wiki so they can read were everything is for.)

Minor issue that does not really bother me: when changing the orientation of the phone or tablet, some kind of refresh gets triggered, right after the turning. This will cause the music to stop playing and makes the Radio or nu.nl frame disappear if that would be open. And it seems unneccesary. Just after turning the device but before this refresh happens, Dashticz's layout looks okay.

It refreshes because it could be, depending on device etc that the slider-function needs to be disabled/enabled.
I'm sure your not turning your device every minute

Indeed, if you have for example 2 columns with a width of 5, you have space left... the total width has to be 12, either by adding a column or by setting the width of the existing columns higher..

So your default Domoticz dash items autopositioning setting should use for example two columns of 6 each, to make the first look a bit more appealing to the new users.

True,will fix this

[niceandeasy]

I have been using this for a while on my tablet and I notice a weird bug.

A samsung tablet lets you do split-screen and have two apps using the screen at the same time, for example, Dashticz on the left, Youtube on the right. The split is moveable.
If the Dashticz half is wide enough, it shows all columns side by side, but it needs more space to display everything correctly. If the Dashticz half is small enough, it shows all columns in one long column.

So far, so good, but, on this way on the tablet, the long single column is not scrollable. No matter how small you make the screen.

When the tablet is in portrait orientation, this feature will divide the screen in an upper and lower section. In this case, the Dashticz section uses side-by-side columns. When I use this feature on my phone, Dashticz is in one-column and scrollable in all orientations and divisions, so, that's good.

I'm using the latest beta. (I just updated, just to see if this issue was still present in the newest beta)

[EdwinK]

... it is possible to use multiple dashboards.
If you want to use a slightly different version of dashticz on another device, you can open index2.html on that device.
It uses the custom.css,custom.js and config.js from custom_2-folder (copy your config.js to this folder first).

Now that I've finally got my Nexus7 working, it's time to work on a dashboard for that tablet. At the moment, it doesn't really look nice, as the screen is a bit too small to read everything.

[htilburgs]

Edwin, you can adjust the font size, so it fits a little bit nicer

[EdwinK]

Need to find out how then

btw. Already changed bit of the layout, with max. 2 columns on every screen, and setting almost all of the tiles to a width of 6