[RELEASE] Simple CSS Editor

Interesting..
When I paste this:
@import url("http://192.168.0.47/local/simplecss.css")

/* ********* Dashboard Settings ********* */
.dashBack { display: none; }

/* ********* Tile Settings ********* */

/* tile-0 Settings */
#tile-0 { border-radius: 1px !important; }
#tile-0 { border-top: thick dotted rgba(236,24,24,1); }
#tile-0 .tile-title { visibility: hidden; }
#tile-0 .tile-title:after { visibility: visible !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; white-space: nowrap !important; content: "Pen Temp" !important; }
#tile-0 { background-color: rgb(225,65,65) !important; }

It works, but not from just changing it in the simple css editor

1 Like

Try opening the css url in a browser on its own, i.e. paste

http://192.168.0.47/local/simplecss.css

Into the address bar of your browser

I found the problem, the file you import has to have the same name as the one the editor exports!
is obvious but the instructions don't specify that exactly...

1 Like

It has to be the same name as the dashboard, that is what the editor exports as the settings file name and the css file name. Then the import needs to match that. I want to change that requirement eventually...

I'll take another look at the instructions are the weekend

FYI: Nothing I have tried on my smartly enabled dashboards works..

Great tool, thank you!

2 Likes

Before updating the CSS Editor, I would strongly recommend taking a backup of any json and css files produced by the editor.

I've released an update to the editor today, version 1.2.0. To apply, simple click refresh on the virtual device in HE.

The links to the CSS and Settings files will open the files in a new tab, allowing easy access to copy the CSS in particular, to then paste directly into the CSS section for the dashboard, for those wanting to access their dashboard outside of their local network.

Both the file links and the confirmation dialog are not as aesthetically pleasing as I would like, but they are functional. I will most likely refine these at some stage.

I am thinking I will introduce a set of preference settings for the css and json file names being produced. If I introduce that option, I expect a separate editor virtual device in HE would be needed for each dashboard.

Other changes I may look at next are background images and colours for the dashboard and background images for tiles. The scrolling text may also get in there.

Conditional settings would also be interesting.... :slight_smile:

image

3 Likes

Perhaps someone could share some images of their dashboard when polished up using this tool.

1 Like

Even I haven't used it solely to build a dashboard yet :slightly_smiling_face:. I'll be close when I finish my latest changes, but there's always more to do. I would also be interested to see how people have used it.

2 Likes

Hey @sburke781 , just wanted to give you credit for how fantastic your work on this app is. I honestly have not gotten into it much (just my own laziness in making various changes to my dashboards as they are fairly utilitarian compared to others here with incredible graphics etc) but your app has encouraged me to dip my toes into CSS editing without the fear of drowning, :rofl:. Anyway, thanks for the incredible work on this and look forward to see future continued developments.

2 Likes

Thanks @moh and @garyjmilne (and others...).., really appreciate the positive feedback.... Nice to see people appreciate what I am trying to do...

Ultimately I would like to see those with artistic and UX flair able to share their creations with other to enjoy. For those who have used this tool and read my ramblings above... hopefully you will get the impression I am aiming for the option to export and share a definition for styling a tile that can be applied across multiple dashboards or shared amongst HE users easily.

I also plan to release an App to centralise the setup of this editor with various settings, plus other features I have worked on in recent times that can help to improve the experience of setting up dashboards for users.

2 Likes

Thought I would try it out myself but I get the same "The CSS Settings JSON was not found" that others have reported. I don't have hub security enabled.

If I go to http://192.168.0.200/local I get a 404 so it seems like the instructions are referencing a bad path?

I also get a 404 error when I go to the equivalent "local" address. If you want to open the File Manager it is available from the Settings page in HE. I'll need to look at this in a bit more detail....

What platform version are you running?

I just left the house, gone until Tuesday. When i go into file manager i see your simple_css zip file but that file path was not the same.

I have not updated since before the last big update. Probably a month behind.

Thanks. I'll see what I can find out for you.

http://hubIp/hub/fileManager if you want to see what’s there.

http://hubIp/local/fileName.ext to display the file (if running it from inside an app or device use port 8080)

2 Likes

2.3.2.141

@garyjmilne - This may be something worth working through a little more when you are back. Could it be a case of what @thebearmay pointed out, that the general link to the file manager is not simply a shortened version of a direct file path? The references to the files themselves should still work, but the "local" link you posted is not valid, as I also noted earlier.

It may also be worth checking what link is produced for the references to the CSS file and JSON file in the top right of the editor pop-up, to see what file names are being looked for.

1 Like

Minor, but potentially important update for those looking to use this editor to update their dashboard. I had previously included a port reference in the URL's used when reading in and writing files. This appears to have not been necessary, but may have caused some issues for users, at least in recent times. I had removed this already in my local version, so had not noticed an issue.

IMPORTANT:
As always, before you start to use the updated editor, I would suggest backing up both the settings JSON file and CSS File for any dashboards you have, by downloading them from the File Manager page, accessible from the Settings section of the HE Web UI.

To update, you don't technically need to run the update via HPM, you simply need to click Save Preferences on the Simple CSS Editor device page, which will download the updated HTML pop-up that appear when you use the editor on a dashboard.

@2ac16mo and @garyjmilne - I would be interested to hear the outcome for you both from this update, I'm hoping it may have resolved your recent issues. But no pressure / urgency to get back to me....

@vitaliy_kh - I expect this will only partly resolve your issue, and I will hopefully get you another update shortly re your 302 errors.

1 Like

Depending on the context you may be able to treat a 302 as a 200…

Yeah not sure.... I see the Login page come through in the dev panel in Chrome, so it does seem like a genuine redirect, without writing the files.... Was about to tell @vitaliy_kh is may not a simple fix given I am calling the write from what is essentially an external page in the iFrame (hopefully not impossible to fix...), so can't call on the more secure recording of the username and password like your file driver uses...