Dashboard design process question?

🛎️ Get Help Apps
1

RE: Dashboard design process question(s)?

How to use CSS to design Dashboard without Bricking HE?

For example, when installing CSS code (Advanced>CSS tab) does the CSS code replace the excising HE code in the right software spot?

Installed App devices picked from the Device list and Templates and are assigned a tile ID# when installed to the dashboard right?

When adding a Tile, does the Tile IDs label all of the device properties to be controlled from the selected Device and Template choices?

If so, then only need to know a Tile ID to modify via CSS any tile in the Dashboard?

Knowing the Tile ID can CSS code do these modifications?
Replace the Tile with a device (ICON) image? Y/N
Can the Tile ICON image be transparent? Y/N
Can the Tile ICON image auto size or be pre-sized? Y/N
Use different device Tile images (ICON) one for Inactive and one for Active? Y/N
If so, how to find the existing HE tile code to modify?

Do tile and background images need to be Scalable Vector Graphics (SVG)? Y/N
If images are SVG and used for Dashboard background, will they auto scale to fit the page? Y/N

Background for the above Qs:

New to HE and how to modify Dashboard.
Posted on the HE Community for help on how to HE Dashboard Design and how to use HPM.
HE community provided me with very helpful URL links and how to use HPM.
HE community turns out to have very technically experienced people.
Asking for help on HE is very refreshing and non-offensive.
Most automation community boards I’ve used first mention how uneducated you must be, then basically tell you to move on when asking questions!

This help ask is because I’m concerned, I might Brick the HE without a better understanding of the Dashboard CSS install, removal process and where to access HE code to modify.

Since I planned on using, HE for several installs, would like to know how to install the dashboard background images, and have device tiles that are transparent images on the dashboard background that can change when either active or inactive.
I’m retired Creston programmer and for years have said we can make our Crestron system talk to a nail. HE may have broken the code relative to cost in comparison and would be fun to say that about HE.

2

Thankfully you won't be able to brick HE, at least not that I am aware, you are simply adjusting the appearance of the dashboard and can always undo what you change.

Don't think of it so much as replacing the code, although you could think of it that way. CSS is simply applying HTML styling to elements on the screen. When you construct the dashboard the dashboard app on HE constructs the tiles with different elements such as the tile title, icons, readings for things like Battery Levels, etc, and applies it's own styling to these elements. When we introduce Custom CSS, we typically target these elements specifically and either override or add to the styling already applied. This can also include hiding elements or adding additional elements or content such as additional text or icons / images like you are asking about later on.

Corrent. If you have the "3-dots" option turned on (on by default when creating a dashboard), click the three dots on the tile to open a very similar dialog to the one used when creating the tile, look in the top left and you will see the tile ID displayed. You can also switch between tiles in that same spot on the dialog.

I think I get what you are asking and I think the answer is yes. You can apply CSS to all tiles or all elements of the same kind, so technically you don't need to use the Tile ID in all cases, but typically we do use the tile ID to target the specific tile and then call out the part of the tile we want to adjust and how we want to adjust it.

I'll take by best guess at each of these based on what I have been able to do:

Replace the Tile with a device (ICON) image? Y/N - Essentially yes, the tile will still exist, we can just style it to look like that is what has happened, hiding different elements and replacing one with an image.
Can the Tile ICON image be transparent? Y/N - Yes
Can the Tile ICON image auto size or be pre-sized? Y/N - I'm going to say Yes, would need to confirm these, but I know there are plenty of options to position and size elements in CSS.
Use different device Tile images (ICON) one for Inactive and one for Active? Y/N - Yes
If so, how to find the existing HE tile code to modify? - The Noobs Incomplete Guide to CSS thread is the best place to look at both a good opening set of posts at the top for plenty of general information, later posts for different CSS people have used, plus posting your own questions of how to achieve a particular outcome.

In addition, CSS is not something specific to HE, it is something that can be used in any web site development, so searching the web for different CSS options is also something you can do.

Do tile and background images need to be Scalable Vector Graphics (SVG)? Y/N - I believe you should be able to use any image type that is able to be used in any HTML page. In different places I have used SVGs, JPGs and PNGs, can't say for sure which one's I used where, but would expect they should all work.
If images are SVG and used for Dashboard background, will they auto scale to fit the page? Y/N - That I don't know, I believe Yes, but am not sure.

More for the benefit of others, as I suspect you want more fine-grained and specific control of your dashboards..... There are some tools that can help with Dashboard design, such as Smartly, the Android Dashboard App for dashboards on Android mobile devices, as well as a few others.

I am also trying to develop a pop-up editor that will remove the need to write the CSS by hand, or at least do this for some of the more common adjustments people want to make. Progress is slow, but still promising. I wouldn't hold back on any work in building up your dashboards waiting for me.... :slight_smile:

Glad to hear you have had such a good introduction to the HE Community. This is the first online forum I have participated in in any significant way, and have found it to be very welcoming and everyone very helpful and responsive.

Simon

2 Likes
3

Thank you!
Very refreshing knowing Its basically impossible to brick the HE!
HE could be a game changer for the big guys,
HTML is very well known by the many, especially for the GUI.
I was struggling with adding CSS code and how to delete it, didn't think about it being GUI.
Got to know some json on Vera systems we installed. Thats now history and moving to unix.
Time to roll up the sleeves and work on the HE GUI.
Once that's done will get up to speed on Rules Machine and HPM.
Great help here!

1 Like
4

That link sburke781 posted above for CSS is very helpful. Lots of great examples. Included it again just for visibility and future searches.

3 Likes