[RELEASE] Simple CSS Editor

sburke781 · February 26, 2022, 4:29am

The Simple CSS Editor is now released, allowing easy access to common Dashboard styling options without any CSS knowledge required. Find it on Hubitat Package Manager (HPM) under the convenience tag.

Why Would I Use Simple CSS Editor?
Many people, after having used HE's built-in dashboards, want to take the next step in polishing their new creation, making it a showpiece in their home. Three common barriers to this are:

Easy access to basic formatting options for dashboards and tiles
A lack of expertise in designing stylish and functional dashboard elements such as tiles and the knowledge required to take a design and translate it into a dashboard fit for daily use

The Simple CSS editor aims to solve these barriers by providing:

A simple interface for tweaking dashboard and tile settings without the need for hand-coding CSS
The (planned)* ability to share design templates for tiles between HE users, allowing others benefit from the design skills of others quickly and easily

- This feature is coming. At the moment formatting of tiles can be shared within the same dashboard on the same HE hub, but sharing between dashboard and between HE users will require further development.

What is the Simple CSS Editor?

After creating a virtual device and adding the Simple CSS Editor to any dashboard, this provides easy access to common styling options, including:

Hiding the tile title
Hiding the dashboard title and moving the control icons (refresh, add tile and settings cog)
Hiding sliders and icons on lighting tiles
Adjusting various text elements displayed on a tile
Modifying borders and background colours on each tile

Once you perfect the styling of one tile, apply the same consistent styling across multiple tiles in the same dashboard.

Installation and Setup

NOTE - Local File Storage - This editor will store files locally on your HE hub:
1 html file - the editor that pops-up on screen
2 files for each dashboard that uses the editor, one settings JSON file, and one CSS file

NOTE - Remote Dashboard Access - This solution has been built with local dashboard access in mind, and while some success has been proven with remote dashboard access, the best approach for achieving remote access is still a work in progress.

To install the Simple CSS Editor:

Install the Simple CSS Editor driver via HPM (search for the Convenience tag)
Add a virtual device on the HE hub, referencing the Simple CSS Editor driver
Add the newly created Virtual Device to the list of devices available to a Dashboard through the Built-In Hubitat Dashboard App, available from the Apps page in the HE Web UI

image1266×808 94.4 KB
Add a tile to the dashboard referencing the Simple CSS Editor Virtual Device, select the Attribute template and select the iFrameLauncher attribute, clicking Add Tile to complete the tile creation

image1406×728 116 KB
Ignore the warning that is displayed when first adding the tile, this file will eventually be created when the settings are first saved in the editor:
Back on the dashboard, open the Custom CSS section by clicking the Cog Icon, select Advanced, then CSS

image1680×454 93.2 KB
Import the CSS file that will be generated by the Simple CSS Editor by adding the following line of text:
@import url("http://<<HE-Hub-IP>>/local/<<Dashboard-Name>>.css");
replacing <<HE-Hub-IP>> with the IP Address of the HE Hub and replacing <<Dashboard-Name>> with the name of the dashboard as it appears in the top left of the dashboard or in the dashboard listing in the Hubitat Dashboards built-in app, replacing any spaces in the name with an underscore (_). So a dashboard called "Test Space Dash" and a Hub IP Address of 192.168.0.2 would require an import line of:
@import url("http://192.168.0.2/local/Test_Space_Dash.css");

NOTE - The name of the file in this import statement is case-sensitive. From the example above, test_space_dash.css would not work, the upper-case T, S and D are important. If you are unsure, once you open the editor, you can copy the CSS file URL from the top-right hand corner.
Click Save CSS and close the dialog
Click the Simple CSS Editor tile. The editor pop-up will appear, listing each tile and available settings (the settings shown below may vary as more are added over time)

image1070×792 135 KB
Adjust any settings you like and click Save Settings and Export CSS in the top left corner of the editor. This will save the Setting JSON file and CSS file to local storage on the HE hub.
Click the X in the top right of the editor to close it, and click the green tick icon to refresh the dashboard. The changes made in the editor should now take effect.

Notes on Using the Editor

Turning Styling Settings On and Off
Tick boxes across the editor determine whether a setting or group of settings will be applied to the dashboard, but the settings will still be kept so you can turn them back on in the future without needing to re-enter them. For example, if you wanted to turn off any adjustments made to a tile, simple uncheck the tick-box next to the tile in the list, and Save and Export the Settings and CSS files. To re-apply the settings, open the editor, tick the box and re-export the files.

Tile Styling Templates
To easily copy / apply the styling of one tile to another, on the target tile click the drop-down in the tile heading and select the source (template) tile to copy the styling from the target. Note, on the target tile, this will override any styling options selected for that tile. Any changes made on the source (template) tile in the editor will automatically be applied onto the target each time the settings are saved / exported. Settings changed on the source (template) tile through the Hubitat Dashboard app will not be applied to the target tile, only settings configured within the Simple CSS Editor will be applied to the target tile. Any custom CSS included in the Custom CSS setting for the template tile will be applied on the target tile, adjusting the tile id references to match the target tile id.

What styling options are included?

Dashboard
- Hide Back Icon (Hubitat Logo in top left of the dashboard)
- Hide Dashboard Title (next to the Hubitat Logo)
- Positioning / Formatting of controls (Refresh Green tick, Add Tile Plus and Settings Cog)
Tile
- Export CSS Toggle - choose whether to export the tile settings to the CSS file
- Hide Tile Title
- Z-Index - allows layering of tiles on top of one another, the higher the number, the closer to the "front" the tile will appear
- Background
  - Colour and Transparency
- Borders
  - Rounding of Tile corners
  - Separate settings for each border positions - All, Top, Bottom, Left and Right
    - Thickness (border-width: medium, thin, thick or pixel value)
    - Style (none, dotted, dashed, solid, double)
    - Colour
- Text - Adjust settings for different text elements on the tile (Title, primary, secondary and tertiary)
  - Contents:
    - Default (No change)
    - Hidden / Invisible
    - Replace - Replace default text completely
    - Add Text Before and/or After the default contents
  - Font Family - Arial, Verdana, etc
  - Font Style - Bold, Underline, Italics, etc
  - Font Size
  - Color
  - Alignment - Left, Center, Right
- Tile Details
  - Groups - only used to group CSS into logical sections
  - Name - documentary only
  - Notes - documentary only
- Icons and Controls
  - Hide Slider (Dimmer)
  - Hide Main Icon - Switch, Battery, Fan
- Custom CSS - Hand-write CSS code for styling not currently supported through options available in the Simple CSS Editor. This keeps your CSS styling together in the same place and allows for re-use of Custom CSS across tiles
- Style tiles consistently by copying style options from one tile to one or more tiles

Enjoy!!

Thankyou

A big thanks to:
@rocketwiz and all those on the CSS thread who I have plagiarised
@thebearmay for his help getting the downloading of the html file working
@mbarone for his work on the iFrameAdvanced driver

sburke781 · February 26, 2022, 4:29am

2022-10-10: 1.2.1 - Removal of port 8080 from URL links used when reading / writing files
2022-07-23: 1.2.0 - Tile Box Shadow, Dashboard Custom CSS, Hide All Titles, CSS/JSON File Links, Confirmation of saving settings and CSS
2022-03-04: 1.1.1 - Minor adjustments to Editor display (Custom CSS and padding at end of settings)
2022-02-27: 1.1.0 - Tile Custom CSS added
2022-02-27: 1.0.1 - Replaced all spaces in dashboard name with an underscore
2022-02-26: 1.0.0 - Initial Release

TechMedX · February 26, 2022, 4:32am

just cause I @sburke781 and need to keep tabs on this.

sburke781 · February 26, 2022, 4:33am

You shouldn't have to wait long And it's not like I'm trying to compete with another fine release today....

TechMedX · February 26, 2022, 4:34am

lol, nah anything that makes editing CSS easier, I'm game for!! Let see it..

LosinIt · February 26, 2022, 5:20am

FTFY

sburke781 · February 26, 2022, 6:15am

Some of the stuff I want to work on next, if not today :

Hide All Tile Titles checkbox in Dashboard section as a quick way to hide current and future tile titles
Custom CSS TextBox Tiles and Dashboard
- The idea here is:
  - Allow for more complex CSS that is not worth the effort to bring into the editor as selectable settings
  - Keep the CSS for the tile together, rather than spread across the CSS file and the Custom CSS section
  - I already do a string replace on the Tile Id for existing settings when copying between tiles, so the same could be applied to this custom CSS text
Lists of colours, fonts and other css imports in the dashboard section
- I have included a list of web-safe font's to select, but would like to include the ability to identify URLs for fonts to import, so that they can then appear in drop-down lists for font settings in each tile
- Similarly for colours, I would like to call out maybe a main colour, accent, etc, or whatever the user wants to label them as, then have these easily selectable where a colour can be set, rather than having to use the picker each time
- I'm thinking there may be some common CSS files people want to import, such as the EcoWitt one. I could manage a list in the html file for known ones, and allow users to enter their own.

Then there are plenty of other CSS options I want to include, such as thermostat specific styling, background images, tile shadows, scrolling notification tiles, etc.

All of this is heading towards the possibility of people fine-tuning the formatting of tiles on their own dashboard, then being able to make the settings json available in some way for others to download and apply quickly and easily to their own dashboard.

Pantheon · February 26, 2022, 11:25am

Each time I click the green tick icon I keep getting the popup..

"the CSS settings JSON file was not found"

sburke781 · February 26, 2022, 11:39am

I meant to mention, don't include spaces in the dash name, could that be the issue? I will be fixing this sometime soon...

Actually, that should already be fixed.... Hmmm.... Well, put it this way, this was always an early release And I experienced a similar experience myself..... So I would suggest removing any spaces from the dashboard name... For now...

And glad you are an early adopter

thebearmay · February 26, 2022, 11:53am

May need to urlEncode the uri…

   import java.net.URLEncoder 
   uri = URLEncoder.encode(uri, "UTF-8")

Pantheon · February 26, 2022, 12:08pm

Oh, I'm all in on this one. I see this as a great benefit to dashboard users, especially those not that familiar with CSS.

I did suspect the space in the dashboard name and changed "Kitchen Volume" to "Kitchen_Volume". Do I need to change the name of the dashboard as well?

You may have to help me a little more with that one

thebearmay · February 26, 2022, 12:10pm

More a note to @sburke781 as a way to handle behind the scenes, but a space for instance becomes %20

sburke781 · February 26, 2022, 12:12pm

Yeah, URL encoding is in my court.... Working through it now... Slowly....

sburke781 · February 27, 2022, 12:19am

It doesn't seem to like saving file names that have been URL encoded. So I will have to string replacements from what I can see. I had one in there, but it only replaced the first instance of a space, which I have now fixed but not released. I'll try and release an update shortly.

sburke781 · February 27, 2022, 12:59am

@Pantheon,

I have released an update to make sure all spaces are replaced with an underscore, but I'm not sure that would have been an issue for you if you only had one space in the dashboard name..... Anyway, if you have some time to test my most recent change, then we can work out if I need to make any more....

I forgot to include notes on how to receive updates to the editor html file. When you are ready to test can you please:

Open the Simple CSS Editor virtual device
Click the Refresh command button at the top of the page
Wait about 30 seconds

To review the updates:

(Close and re-)Open a dashboard that uses the CSS Editor
Click on the Simple CSS Editor tile

On a side note....
I do intend to put a few more indications of things happening, like the fact that the HTML file has been downloaded and that the CSS and JSON files have been written. I would also like to automate the downloading of the html file in some way, either by detecting an update has been applied via HPM, or just a basic polling mechanism like others have included in their drivers / apps, basically to remove the need for manually running the refresh.

sburke781 · February 27, 2022, 7:36am

I have added a Custom CSS Text Box for each tile. Dashboard Custom CSS will come soon....

There are two main benefits for including this Custom CSS option in the Simple CSS Editor:

There is a small benefit to keeping the CSS for a tile together, whether that be when displaying it inside the Simple CSS Editor, or viewing the CSS file produced
The more important benefit is that the Custom CSS text will be used when choosing to style one tile the same as another. In the screenshot below, Tile 36 is using Tile 35's settings, which will include the hiding of Tile 36's title as a result of the Custom CSS defined for Tile 35.

CSS file:

/* *********  Dashboard Settings  ********* */


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


/* tile-35 Settings */
	#tile-35 .tile-title { visibility: hidden; }



/* tile-36 Settings */
	#tile-36 .tile-title { visibility: hidden; }

Obviously there is no need to use Custom CSS for the hiding a tile title, there is a perfectly good checkbox for that now . I expect, from my own experience, the more likely use cases will be more complicated layout changes for positioning icons and alike, where it would be hard to make an intuitive interface to provide all the options. At least I expect it would be hard....

Simon

Pantheon · February 27, 2022, 9:50am

All seems to be working well to this point. I was having the same "JSON file not found" error and could not seem to figure it out. My main browser is Firefox... I prefer an older, stable version, and it does not work with your app. I switched to Chrome and everything works perfectly. This is going to be a great addition to my dashboard repertoire!

amithalp · February 27, 2022, 8:49pm

Hi @sburke781 ,
I would like to contribute to your project but I am probably good for testing only
I have downloaded the sriver using HPM and went to look for it in the drivers list but could not find it. Had to Reboot in order for it to show up.
Might be a local issue for me but thought I will mention this.
I then added the device to the dashboard and started testing.
First impresion is very nice.
I am using Microsoft Edge and am not able to drag the CSS editor frame while it is open. Is this normal?
Amit

sburke781 · February 27, 2022, 9:31pm

Thanks Amit.

At this stage I'm going to agree and hope it is just a hiccup with something unrelated to the driver or HPM. Thanks for mentioning it, we can keep an eye out for anyone else that may experience this with this driver or any others.

Yes. It's not an Edge thing, the same is true in all browsers, well at least it is for me in Chrome. I have thought about making this like some of the built-in dialogs used for adjusting dashboard settings, where you can drag them around. My only hesitation, apart from other features I want to implement before this, is I am also considering introducing another pane to the right of the current settings area, allowing for information to be displayed about different settings or other useful information. If I expand the width of the pop-up to this extent then moving it around would become less useful.

The layout and styling is still something I am not completely set on. It does still feel a little bloated, even with the expand / contract options I introduced before releasing it, but I didn't want to hold it back longer than I already had. Happy for any feedback.

One thing I do want to try and fix with the ability to expand / contract sections of the tile settings is that ticking the checkbox for a tile can contract an already expanded tile. The same can be true in a couple of other areas. Some minor UI things that I want to improve over time....

Simon

amithalp · February 28, 2022, 6:43pm

If I understand corrently, css code is stored locally on the hub and not imported to the CSS editor on the dashboard. This means that whenever accessing the dashboard remotly, you will not get the same dashboard as you have it in your local network.
Am I right?