EDIT - This is now released, but I chose to setup a separate thread to start with a clean slate, i.e. no need to include my thought bubbles along the way listed here
I've been playing around with the idea of having a "button" on my dashboards where I can make some of the more common CSS styling options available more easily, such as hiding tile titles, adjusting text, placement and size of the refresh config icons, etc.
Using a HTML file with some JavaScript, an IFrame virtual device on my dashboard and importing a locally stored CSS file, I have been able to do two key things:
Get a listing of tiles from the dashboard
Write back to the css file on the HE hub
So if I can list each tile and provide options for turning settings on / off or adjusting values, I can then write those back to the CSS file imported into the dashboard. I am expecting I will need to write a driver to store some of the styling settings to make it easier to read them back out again to provide the correct starting point for making changes....
Plenty more things to think about and hurdles to jump over.... But an interesting project....
This could be an interesting project.
One other project that would be interesting is to have a github repository with examples of CSS setups, this could help others get started
This is something I have also considered. Default tile styling is something I would like to look at, but maybe it will be separate to being able to store CSS settings.
I did make some progress at the weekend, mostly on the very crude UI, including some stuff not shown in the screenshots. But I was able to make use of the work I had done to read in the tiles from the dashboard, list out some common CSS styling settings and write the results to a locally stored CSS file on the HE hub.
Apart from expanding the list of settings available for editing, I also need to be able to read the current settings back in. Rather than interpreting the CSS I produce, I am thinking I will save the settings out to a separate json file.
I've made some progress with this pop-up CSS editor, so thought I would share. This is still very much a prototype, so not something I would expect people to be using, more just "having a look".
BTW, don't criticise the presentation / styling, I'm not a huge fan of the colours, I do intend to change them, probably the whole look if I am honest... Also the installation process is not perfect, but not a major focus atm.
Alright, caveats out of the way...
I can now adjust the following settings for each tile in a dashboard:
Hide the Tile Title
Adjust the Background Colour and Transparency
Adjust the tile Z-Index (allows for layering of tiles)
How does it work?
An iFrame pop-up device on a dashboard renders a local HTML file
The HTML file interrogates the dashboard for the list of tiles, their template and the dashboard name
The settings for each tile are displayed in the iFrame and are able to be adjusted and then saved (note - this does not read any styling information from the Custom CSS section of the dashboard, only from the details configured using this editor)
Settings are saved both as a json file and a css file, using the dashboard name for each file
The the CSS file is imported into the dashboard and applies the styling configured in the iFrame
The iFrame device does not need to stay on the dashboard all the time, just when editing. The same device can also be used for any dashboard, no need to create one for each dashboard.
How do I set up and use the Simple CSS Editor?
Installing the Pop-Up Editor HTML Page
Download the editor HTML file from my GitHub repository to your local PC (copy and paste the text into notepad and save as SimpleCSSEditor.html)
Upload the HTML file to your HE hub via the File Manager under Settings in the HE Web UI
If not already installed, install the iFrame Advanced driver
Create a virtual device for the iFrame using the iFrame Advanced driver
Configure the iFrame virtual device to point to http:// < HE Hub IP > /local/SimpleCSSEditor.html, as well as any other settings as required (I turned on the on demand iFrame loading, you may also want to play with the styling)
Add Simple CSS Editor to a Dashboard
Add the iFrame virtual device to the devices list for the dashboard to be edited
Add a tile on the dashboard using the iFrame virtual device and the Attribute template, selecting the iFrame Launcher attribute
Open the Custom CSS for the dashboard - click the Cog icon, select Advanced, select CSS
Below any previous third-party CSS, such as smartly CSS or the importing of EcoWitt css styesheet, but before any custom CSS you have introduced, add the following line: @import url("http:// < HE Hub IP > /local/ < Dashboard Name >.css");
Where any spaces in the Dashboard Name are replaced with underscores, e.g. a dashboard called "Zone Control" would have it's styling stored in Zone_Control.css.
Using the Simple CSS Editor
Click the tile for the Simple CSS Editor on the dashboard
Until the settings have been saved, a warning will appear about the setting file not existing, this can be ignored
A section for each tile should appear in the pop-up iFrame
The Name, Group and Notes are all just documentary at this point
The Export CSS checkbox will toggle the exporting of the settings to the CSS file, whilst still keeping the settings recorded, should they need to be re-instated
Hide Title does what you would expect....
Order (Z-Index) - Adjust between 0 and 1000, the higher the more "on-top" the tile will be
Background and Transparency - will fix the background colour, regardless of state settings in the template
Once the settings have been adjusted, click the Update CSS File button at the top of the screen to export the CSS settings
Click Close (or whatever you configured for this button in the iFrame device) and refresh the dashboard, typically using the Green tick
I plan on expanding the options available, including dashboard title hiding, plus other options I have personally used. My aim is to use this editor when I look to re-develop my dashboards on a new hub.
I want / need to work much more on the layout and styling of the pop-up.
Some more (slow) progress over the last day or so.... mostly around dashboard level tweaks and tile borders. Plus a slightly more acceptable colour scheme....
I have continued to work on this, though progress is slower than I would like. I have focused more on the UX when using the tool rather than expanding the features available, though am confident that may shift sometime soon. Here's a quick video that may illustrate some of what I have been working on, such as expanding groups of settings.... I haven't uploaded the html file as I am almost sure it won't consistently store, read in and apply the new CSS settings around text changes. Once these a more accurate I will post the changes.
I think I've covered the basics to text adjustments, at least that I have made myself. Next is icons and controls like sliders, then the fun stuff of being able to apply these settings easily across multiple tiles or even dashboards. I also want to look at including a listing of imports for the dashboard, like CSS imports and fonts, just not sure if you can import inside an import...
Not sure about when I might release it fully, plenty I would still like to do. You are welcome to download the html file and try out what is there already. I gave some installation instructions back on this post that should still work:
@sburke781 You have made great progress on a feature many non-html/javascript experienced users would benefit from. I hope you can release a 0.8 or 1.0 version soon. Based on the community conversations I have seen, what you have now would address most members needs.
