[RELEASE] Simple CSS Editor

Since installing this editor every time I open the dashboard I get that message.
I think I may have done something wrong in installing because when I open the CSS Editor tile and make changes, then click Save Settings, none of the settings change.

Are you accessing the dashboard locally? e.g. on a PC/laptop connected to the same LAN as your HE hub?

With the editor open, if you click on the settings file or css file links in the top-right corner, do these display as text files in your browser?

Yes

No, if I click on either of those I get "Error 404 The page requested could not be found"

Are you able to look at any console logs in the developer tools section of your browser? Wondering if there may have been an error in writing the files...

Which O/S and browser are you using?

You mean go to the Developer Tool section, click on logs, then Device Stats, and is the Virtual Simple CSS editor listed? Yes, it is.

Window 11, Chrome

I was meaning Developer tools in Chrome:
image

Then look at the console tab to see if there are any errors appear, either immediately after loading the dashboard or when clicking Save in the CSS Editor pop-up.

image

Wow. Ok I never knew that existed.
Went there and it was blank. Then tried to open the dashboard and I get three sets of this (the first one is setting'1', next is setting '5', last is setting '0':

TypeError: Cannot set properties of undefined (setting '1')
at rc (app.js?t=2.3.3:1:322658)
at v.SET_LAYOUT (app.js?t=2.3.3:1:304503)
at chunk-vendors.js?t=2.3.3:13:5727
at chunk-vendors.js?t=2.3.3:13:6761
at Array.forEach ()
at chunk-vendors.js?t=2.3.3:13:6740
at v._withCommit (chunk-vendors.js?t=2.3.3:13:8302)
at v.commit (chunk-vendors.js?t=2.3.3:13:6714)
at commit (chunk-vendors.js?t=2.3.3:13:3395)
at app.js?t=2.3.3:1:315446

This is way beyond my skillset here, so....

Hmmm... It's getting out of my comfort zone as well, or at least it looks like it's more likely coming from the dashboard. Do you see anything when you try to save the settings in the CSS editor?

Also, what platform version are you running?

I am not sure what you mean by "Save the settings in the CSS editor." The steps above are not numbered, but if you mean the 8th bullet point of "Click Save CSS and close the dialog" yes, I can go back there and see my what I inserted.
If you mean the pop up I get when I click the newly created tile, no, nothing I edit saves. I clicked on the "tile-1 Humidity" and checked the box for "Hide Title".
Then I click on "Save Settings & Export CSS"
I get a pop up that states "[my IP address] says Update Complete" with the only option being OK, so I click OK.
If I immediately open it back up, my changes are saved, but if I refresh the dashboard, then open it, the changes are gone.

I am running 2.3.6.146

EDIT TO ADD: The name of my dashboard was "Temp & Humid" Just now decided to see if it matters if I get rid of the ampersand, so changed it to "Temp and Humid" and miraculously the pop up every time I open the dashboard is now gone!!!

Still have not figured out how to actually edit any tile with this but the getting rid of the constant pop up is progress!

1 Like

Good point, I may look at making the instructions numbered, to make it easier to reference. I was also being a little loose in how I described what I wanted you to do. I did want you to click the Save CSS... button in my CSS editor pop-up, then look at whether anything showed up in the developer tools console you were looking at. Given you got this working, I don't think we need to worry about this now.

Thanks, I'll keep this in mind, but will try and rule out anything on my end first with the editor...

That is good to know, not sure I tested that. And great to hear you had success with making that change, saved me some time trying to figure it out :slight_smile:. It now makes sense that somewhere along the line an ampersand would cause issues. I will look at adding some comments in the instructions to warn people about this.

Probably worth confirming a few things following the name change:

  • Have the new settings and CSS files been created?
    • In the top-right of the Simple CSS Editor pop-up there are two links, one to the CSS file and one to the settings file. If you click on each of these, are text files opened in a new browser tab? Keep the CSS file tab open for the moment.
  • Has the import statement been adjusted?
    • On the dashboard, open the Settings for the dashboard by clicking on the cog icon in the top-right, select Advanced and CSS. Check that the import statement, if there is one, is pointing to the same CSS file from the link you opened in the tab earlier.

Once we know the answer to these, then we can start looking at making changes to the tiles.

Yes, text files are opened in a new browser tab for each.

Yes, I edited the name of the Dashboard to remove the ampersand and insert the word "and". All spaces have and _ and all caps/small letters match.

Ok, that's good.

If you now open the Simple CSS Editor on the dashboard and hide the title for a tile, click the save and export in the top left of the editor, then close the editor and refresh the dashboard by clicking the green tick, do you see the title disappear?

YES! It now works. User error.
I thought the list of tiles on the Simple CSS Editor was all the tile types, rather than the specific tiles I have, so I was editing the wrong one. Got it now!
Thank you for this!

1 Like

Excellent. Not entirely user error, I would like to address the ampersand issue at some point. Thanks for your patience in getting it working.

@sburke781 and anyone else who may know, I have a tile what uses an image, but the image has no labels on it. I was hoping I could add text to the tile to show what is being displayed. I have tried modifying the Title and the Primary text settings but none of the text shows up. Am I doing something wrong, or is this not possible? Sorry if this is a very simple question.

What tile template are you using for the image?

The simplest option will likely be to setup a text tile to sit over the image tile, or directly under it.

It is a good point though, I could probably do some work to only show the relevant text element for each template.

I am using the dashboard display for a valve in the Rachio Community app. If I use the Valve device in the dashboard I can put the image in the background, but it gets cut off at the top. The Image tile type scales the image correctly.

Overlaying a texttile is a good idea in principle, but unfortunately the text is placed squarely in the middle of the tile, covering up some essential image data underneath it. I was hoping with the CSS Editor I could set the position of the text at the bottom of the tile. Don't see any way to do that, however.

I should have explained that using the text tile does also rely on having the settings for tile height and width (in the dashboard settings, not the tile) set small enough that you get more fine-grained control and can produce a text tile that is only as high (or close to) the height of the text, if that makes sense.... (Getting ready for work, otherwise I would provide an example). Also note, if you change the dashboard settings, all other tiles will need to be resized, unfortunately.