Dashboard ideas

[zsole2]

It was a long time ago when I set up a new system, and while creating/positioning the dashboard elements, I remember now how much time it could take to complete the task. Setting up several PID controls, Gauges, etc. requires entering again and again the width, height, font size, etc. repetitively, frequently saving in between.

Here are a few ideas to consider (sorry if any of these were already discussed):

1.) Would it be possible to implement a cloning feature/button for the elements? I.e. it would allow creating a duplicated element, than simply editing it and changing the PID/measurement it relates to, and voilá, you have another perfectly styled dashboard element.

2.) I noticed the 'spacer' type on the Function page. A similar item would be useful on the dashboard, too, allowing empty spaces wherever it is deemed useful to arrange the elements.

3.) Option to selectively hide/show parts of the widgets, i.e. the [number], name of control, timestamp. Speaking of the number, is the name of the widget necessary to be right-flushed?

4.) I really like the indicator widget. A multi-indicator could be nice, e.g. creating an element mirroring the status LEDs of a relay board.

[kizniche]

Since moving from Bootstrap 3 to Bootstrap 4, the grid system changed for the worse. You've probably noticed every widget on a row has to be the same height (matching the widget of the row with the largest height). I've attempted several times to implement a dashboard drag-and-drop grid system, but have run into issues each time. The features I've sought were drag and drop, click to resize, and mobile-friendly. I'm going to give it another shot, because I think the dashboard could be greatly improved with a more user-friendly grid system.

[kizniche]

Alright, this is good. I came back to gridstack.js and was able to get a dragable, resizable, mobile-friendly dashboard grid working. It looks a little rough, but I was trying to merely get the basic functionality working (~15 minutes of work). I'll update when I have something more substantial working.

[zsole2]

Looks promising... that would solve the spacer issue easily, as far as I understand from the
gridstack.js documentation.

[kizniche]

After much toiling, I was able to fix a pesky alignment issue and it's starting to look good. I just need to figure out how the grid will be saved/restored and how to add new items to the saved grid.

[kizniche]

I'm currently working on figuring out a positioning issue, and whether it's my code or gridstack.js (gridstack/gridstack.js#1054 (comment)).

[kizniche]

The position issue has been resolved and I'm very close to issuing a release. I just need to figure out a few more minor details (popup widget configuration, icon perhaps to indicate they're able to be dragged).

[kizniche]

New dashboard configuration method using Bootstrap 4 Modal dialog:

[zsole2]

Ahh, modal dialog for settings... that seems a great improvement over the previous version.

I see the height parameter still in pixels in the settings, however, after a cursory review of gridstack, I had the impression that items snap to the grid. I guess I'll have to wait and see how things work, though.

[kizniche]

There are a lot of things from the old system I need to remove. I missed removing the width/height options. The new system allows resizing by dragging a corner and moving by dragging the header. I'm waiting for gridstack 0.5.4 to be released that includes the fix for the positioning bug I found, before making a release.

[zsole2]

I couldn't wait for the release (mostly wanted to see the PID Control issue resolved), installed it and looks great!!!

[kizniche]

Thanks! I think it came out very nice and will make dashboard organization much more pleasant.

If you upgraded after commit eefbd49, your database is safe to upgrade to the release when I release it. However, if you happened to have upgraded before eefbd49, then you will need to restore a previous version and then upgrade to the 8.1.0 release. This is because at that commit I changed the database schema.

[kizniche]

v8.1.0 released!

[kizniche]

Oops. Didn't mean to close this issue.

[kizniche]

1.) Would it be possible to implement a cloning feature/button for the elements? I.e. it would allow creating a duplicated element, than simply editing it and changing the PID/measurement it relates to, and voilá, you have another perfectly styled dashboard element.

I don't quite see the usefulness of this. It seems like it would only possibly save a few minutes of work. Most widgets don't have that many options.

2.) I noticed the 'spacer' type on the Function page. A similar item would be useful on the dashboard, too, allowing empty spaces wherever it is deemed useful to arrange the elements.

I like this idea. I'll see if I can make a widget.

3.) Option to selectively hide/show parts of the widgets, i.e. the [number], name of control, timestamp. Speaking of the number, is the name of the widget necessary to be right-flushed?

I could add some more options for the display of widget components.

4.) I really like the indicator widget. A multi-indicator could be nice, e.g. creating an element mirroring the status LEDs of a relay board.

I'm not sure how this could be implemented.

[zsole2]

Upgrade was successful, fortunately. I'm now on v8.1.1.

I think the new design of the dashboard will really decrease the time needed for setting things up. Anyway, I now I replaced the gauges with indicators, and this simplifies things, too.

Just playing around, it appears that you can drag the widgets by the Name field. So the icon for dragging, although nice, might be omitted. For example an indicator with 1/12 width does not really allows for any length of a name and still looking nice, see:

vs.

So this could be a candidate for hiding, if possible.

[kizniche]

I added a few dashboard options. Give them a test if you have time and provide any feedback.

[zsole2]

I confirm that hiding the drag handle works as expected. The spacer too, a small issue to note that the title of the widget is 'Camera Widget Configuration'.

The whole dashboard works feels much better for me, I think that was a great improvement. There is a little experimenting involved to get used to the gravity feature (that what they call it at gridstack, when the widgets floats to the top if there is space above it, right?), and when you want to move something from the top row to the bottom, especially if the screen needs to be scrolled through.

I don't know if it would be even better if the spacer could be colored differently, hard to imagine, and may be not necessary.

---

Ideas are cheap (and I know, it is extra "toiling" for you), but I'd put forward a few more anyway:

1. I'm sure that in the past I mentioned it, but upgrading on the Pi Zero is big pain (this latest one took 22 minutes). Still, I consider it unnecessary, especially when someone uses FORCE_UPGRADE_MASTER only to test new features or iterative fixes, to carry out the full upgrade script, with checking apt, pip, translations, everything. These are probably up to date, anyway. Maybe another expert flag could be implemented, where these steps are omitted. Of course, upgrade to a new release should include everything.

2. Setting up the dashboard widgets is so convenient, with the modal dialog, that going back to the different Setup screens feels already strange, even after only a few days. I guess it would be a lot of work to implement it everywhere, but it would definitely be great. Even without being able to drag around the sensors, outputs, etc.

[kizniche]

I recently turned float on, which means there will be no gravity for grid items. I may make this an option to turn on/off in the configuration.

I thought about adding a color option for the spacer. I'll probably add this option soon.

As far as speeding up upgrades, this would not be an easy thing to do, as there can be any number of changes that require a specific part of the upgrade process to be conducted. I don't think there's a safe way to disable some parts and still ensure the upgrade finishes successfully.

[zsole2]

I remember you have said the same thing about the upgrade 2 years ago...Of course, then the process was less sophisticated if I remember correctly, now with the releases it is safer and more controlled. Granularity of the upgrade may be controlled by the versioning, e.g. if something minor is changed (simple fixes, signified e.g. by the last digit of the version number) you probably can be sure that the upgrade is not broken by not being up to date on apt and pip. If something major changed (db, dependencies, etc.), you can could step up the middle version number, and require a full upgrade.
Stop here, I guess it is too much extra work for minimal gains....

[kizniche]

I believe that was related to the install, which reduced the number of required packaged to install. A result of that is the current dependency system that installs any required packages at the time the device is added in Mycodo. As far as upgrades go, I've made it fairly efficient. What I can do is add a summary after the upgrade to show how long it took to perform each part, and we can focus on potentially improving those areas.

[SAM26K]

Is there any way to reduce the default size of the desktop widgets? Mine are starting with 1 control taking up 25% of a 1080p screen. A lot of work to resize all the controls. TIA.

[kizniche]

They should be created at the correct size. Can you take a screenshot to demonstrate what you mean?

[SAM26K]

Resized first one, others are default after upgrading from 8.0.3 to 8.1.1:

[kizniche]

After an upgrade all currently-installed widgets will default to the same size and no x/y position, as the new grid system is incompatible with the old. All newly-created widgets will be the proper size.

[SAM26K]

That's too bad. I guess that means all the controls neeed to be recreated? Resizing all the widgets is too slow.

[kizniche]

I don't understand. It's much faster to merely resize the widgets by dragging the corner than to delete, recreate, then reconfigure every one.

[kizniche]

Also, click refresh to load the new javascript. I notice you have a "missing" throbber at the top-left of each widget.

[SAM26K]

How do I refresh? Was thinking wifi could have some lag handling the graphics resizing.

[kizniche]

Just click the refresh button on your browser. There should be very little lag resizing and moving widgets, as this is handled client-side in your browser. The server only receives the layout/sizes to save to the database upon a resize/reposition, but this shouldn't affect client-side performance at all.

[SAM26K]

Must be my win7 pc resources then. Trying with fewer tabs active and apps running.

[SAM26K]

Also I'm using USB 2,0 to 1080p video adapters on a Lenova laptop upgraded to i7 and 16GB ram. The video adapters are probably causing lag too. Seems to be working better now though.

[SAM26K]

Seems to be fastest with the monitor plugged into the vga port. Like the new dash but still a lot of work to upgrade an existing system with a lot of controls..

[zsole2]

What I can do is add a summary after the upgrade to show how long it took to perform each part, and we can focus on potentially improving those areas.

I like this idea, at least it can be compared across upgrades.

[kizniche]

I like this idea, at least it can be compared across upgrades.

I just pushed a commit that includes a summary after an upgrade. If you're curious to see what the breakdown is, you can upgrade to master. The summary will appear at the very end of the upgrade.

I also added the amount of time it takes to complete each stage, e.g. (Pi 3:):

...
[2019-12-01 18:35:09] #### Completed Upgrade Stage 1 of 3 in 7 seconds ####
...
[2019-12-01 18:36:06] #### Completed Upgrade Stage 2 of 3 in 56 seconds ####
...
[2019-12-01 18:38:59] Stage 3 execution time summary:
[2019-12-01 18:38:59] initialize:                   11 s
[2019-12-01 18:38:59] update-swap-size:             0 s
[2019-12-01 18:38:59] setup-virtualenv:             0 s
[2019-12-01 18:38:59] update-apt:                   7 s
[2019-12-01 18:38:59] update-packages:              16 s
[2019-12-01 18:38:59] web-server-update:            5 s
[2019-12-01 18:38:59] update-logrotate:             0 s
[2019-12-01 18:38:59] update-pip3:                  6 s
[2019-12-01 18:38:59] update-pip3-packages:         34 s
[2019-12-01 18:38:59] update-dependencies:          38 s
[2019-12-01 18:38:59] update-influxdb:              0 s
[2019-12-01 18:38:59] update-alembic:               4 s
[2019-12-01 18:38:59] update-alembic-post:          4 s
[2019-12-01 18:38:59] update-mycodo-startup-script: 2 s
[2019-12-01 18:38:59] compile-translations:         6 s
[2019-12-01 18:38:59] update-cron:                  1 s
[2019-12-01 18:38:59] update-permissions:           2 s
[2019-12-01 18:38:59] restart-daemon:               15 s
[2019-12-01 18:38:59] web-server_reload:            14 s
[2019-12-01 18:38:59] web-server-connect:           8 s
[2019-12-01 18:38:59] 
[2019-12-01 18:38:59] #### Completed Upgrade Stage 3 of 3 in 173 seconds ####
...

[SAM26K]

Is there any way you can restore the 're-order' list or at least 'show/hiide'' functionality?
Thanks!

[kizniche]

Is there any way you can restore the 're-order' list or at least 'show/hiide'' functionality?

Nope. The old grid system is incompatible with the new. It's now a relic of the past.

[kizniche]

I have been thinking about adding the ability to have multiple dashboards. I really like how Grafana has this feature.

[SAM26K]

Multiple dashboards would be awesome!

[SAM26K]

Briefly looked at Grafana, is this the local version or the cloud version?

[zsole2]

I upgraded, and here are the times for the Zero:

...
[2019-12-03 07:47:32] Removing /home/pi/mycodo-master.tar.gz...Done.
[2019-12-03 07:47:33] 
[2019-12-03 07:47:33] #### Beginning Upgrade Stage 2 of 3 ####
...
[2019-12-03 07:51:17] #### Completed Upgrade Stage 2 of 3 in 224 seconds ####
[2019-12-03 07:51:17] 
[2019-12-03 07:51:17] #### Beginning Upgrade Stage 3 of 3 ####
...
[2019-12-03 08:14:46] Stage 3 execution time summary:
[2019-12-03 08:14:46] initialize:                   70 s
[2019-12-03 08:14:46] update-swap-size:             2 s
[2019-12-03 08:14:46] setup-virtualenv:             2 s
[2019-12-03 08:14:46] update-apt:                   141 s
[2019-12-03 08:14:46] update-packages:              87 s
[2019-12-03 08:14:46] web-server-update:            45 s
[2019-12-03 08:14:46] update-logrotate:             4 s
[2019-12-03 08:14:46] update-pip3:                  70 s
[2019-12-03 08:14:46] update-pip3-packages:         409 s
[2019-12-03 08:14:46] update-dependencies:          187 s
[2019-12-03 08:14:46] update-influxdb:              3 s
[2019-12-03 08:14:46] update-alembic:               45 s
[2019-12-03 08:14:46] update-alembic-post:          31 s
[2019-12-03 08:14:46] update-mycodo-startup-script: 12 s
[2019-12-03 08:14:46] compile-translations:         91 s
[2019-12-03 08:14:46] update-cron:                  2 s
[2019-12-03 08:14:46] update-permissions:           8 s
[2019-12-03 08:14:46] restart-daemon:               95 s
[2019-12-03 08:14:46] web-server_reload:            11 s
[2019-12-03 08:14:46] web-server-connect:           94 s
[2019-12-03 08:14:46] 
[2019-12-03 08:14:46] #### Completed Upgrade Stage 3 of 3 in 1409 seconds ####
...

Stage 1 time is missing from the log, though... It took 45 secs.

[kizniche]

I just finished adding multi-deshboard functionality. Commit coming soon for anyone who wants to test.

[kizniche]

Briefly looked at Grafana, is this the local version or the cloud version?

Are you referring to Grafana in the new Mycodo Docker feature? This would be local in the grafana container on your SD card.

[SAM26K]

You mentioned it above "I have been thinking about adding the ability to have multiple dashboards. I really like how Grafana has this feature.".

Trying out new master with multiple desktops :).

[BobDDole]

zsole2 commented 19 days ago

3.) Option to selectively hide/show parts of the widgets, i.e. the [number], name of control, timestamp.

This ^^

Would love to disable channel info and timestamps from certain widgets like sensor info.
I already labeled the sensor so the rest of the info for me just clutters up the widget.

Also would be nice for the output widget as I don't need the 'feedback' (I currently use a indicator widget for that) nor do I need the 'seconds on', just dedicated ON and OFF buttons.
Or possibly a Toggle button that is incorporated with the indicator widget (a on/off toggle with the indicator widget dot as the button)

As always you guys rock, thanks for the amazing software!

[kizniche]

I just added a bunch of display options for Measurement, Indicator, Output, and PID Widgets. Upgrade to master if you would like to try them out and provide feedback.

[BobDDole]

Had a chance to upgrade, works great!

Only one request, being able to disable the "seconds on" option in the output widget via a tick box

[SAM26K]

"Show Timestamp" doesn't appear in options after most desktop widgets are created. Can that be added? Thanks.

[kizniche]

Going through and closing old issues. I don't think there's anything unresolved here.