[APP][Pro] Dashboard Studio - A completely free-form dashboard designer

[Satoer]

Okay, big update. I have added the “local” topic, an edit box widget, and updated the list widget with user interaction control. I also improved several other things.

@Martijn_C

Is it also possible to create some kind of input field for the dashboard user?

in my case I want personell to add broke equipment to a list.

It is a bit of an advanced update, but I think I managed to create this with zero advanced Homeyscript backend code.

The problem I faced was that a setup like this needs attached buttons to control things. A button to send an edit field. A button to select all or delete list items. But I do not want to add extra configurable buttons to every widget. So version 1.3.0 introduces “local topics”. When you add “local/” in front of your topic, the topic is handled locally and inside Dashboard Studio. This way it can send information directly to other widgets. This allows you to use normal widget buttons to interact with an edit box widget or a list box widget.

Edit box widget
This edit box sends text data. It can be configured for single line and multiline text. It features a new “Trigger topic”. When a topic is fired on this setting, the edit box widget sends its data to the output topic. So if you connect the output topic from a button to this trigger topic, the edit box sends its data. Remember you can use a local topic for this. Using local topics also prevents other browser windows with the same dashboard from sending their data.

List box widget
This widget is heavily modified to be interactive. Instead of only receiving data, it can now also send its content to save in a Homey variable. You can add interactive checkboxes in front of the items, and you can connect buttons to select or deselect all and delete selected items. It now also accepts line breaks in text.

If you connect the “output topic” of the edit box to the “Data (String/JSON)” input topic in the Content source section, the data is added to the list. But you can also store all the contents of this list in a Homey Variable:

Create a Homey text variable. In this case I created “testListbox”.

Enable this variable in the Dashboard Studio Configuration.

Connect this topic to the Data (String/JSON) topic in the List box widget.

Set the “Output mode” of the list box widget to “On any change” (this will send all list items directly to the output topic on any change).
Set the “Output format” of the list box widget to “JSON Array (Objects)” (this will send the full list).
Set the output topic of the list box widget to “ListboxData” (So this is a custom global topic, not a local topic!).

Set the output topic of the edit box widget to the same “ListboxData” topic.

Now create this flow:

This will copy the data inside the “testListbox” variable we created earlier.

So it is a bit of a mindfuck, but this is what is going to happen:

• The user types data in the edit box.
• The user presses the send button.
• The button triggers the edit box to send its text data to the ListboxData global topic.
• The Homey flow puts this text data in the “testListbox” Homey variable.
• The Listbox receives this Homey variable, sees only a single line of text and adds this to the list box.
• Because of this change it directly sends the full list in json format to “ListboxData”.
• Now it arrives again to the Homey flow and puts this full list in json format into the Homey variable “testlistbox” again.
• The listbox receives this full list data but compares it to what it already has, and ignores it completely (this prevents infinite loops).

The beauty: All the data is stored. When the page refreshes (and “State Caching” is enabled in the DS settings) it will directly load the latest list data.

Another option that the List widget has:
Trigger Topic: Select All
Trigger Topic: Deselect All
Trigger Topic: Delete Selected

When you connect a button to these topics it will execute these features. This way you can create a separate dashboard just for viewing the list, and a special management dashboard with the attached buttons that can manage this list.

Please check the demo over here
Please check the updated help file over here

@Rob_G

I think I found it. It happens when all values are 0 (zero).
The problem is the Auto MAx setting. When that is on, and all Y values are 0, then the widget crashes. Wen auto max is off, or there is at least one non-zero value, then it is ok.

Bug is fixed in 1.3.0 (TEST version)

Full list of improvements:

1. NEW! Edit Box Widget: A new interactive input field that allows users to type and send custom text values.
2. Added Topic Auto-Echo feature to automatically synchronize state changes across multiple open dashboard windows.
3. Introduced Local Topics: A new way to define and manage internal dashboard variables without broadcasting them externally.
4. Added multi-line text (linebreak) support to the List/Log widget.
5. Added various UI improvements and styling refinements to the dashboard templates.
6. Added a new ‘Vertical Alignment’ setting to the Label & Text widget.
7. Introduced visual Read/Write data access level tags, local tags and Flow tags across the configuration interface.
8. Updated the Arrow widget to automatically synchronize the arrowhead direction with the flow animation state.
9. Alphabetically sorted the widget selection dropdown for easier navigation.
10. Improved the Lightgrid UI with better visual consistency and an option to hide the white/color light indicators.
11. Added X/Y icon offset settings to the Switch/Button widget.
12. Fixed an issue where the Arrow widget bounded box blocked interaction with underlying widgets.
13. Fixed an issue where the Graph widget would crash the dashboard when receiving a flatline of identical values.