Noob Findings while Learning CSS for HE Dashboard

I was going to add this to the GOAT thread on CSS for noobs, but that has gotten so long with so much info that I thought this is worthy enough of a separate thread because it's a bit different topic , and with a link back.

Not going to say I am any sort of fan of CSS.
However I wanted to learn it a bit so I could make better decisions on needs of installing additional apps/hubs/etc.

Attached is my JSON, CSS and a video of the dashboard in action.
It's only my beta fun dashboard for now. Future I'm hoping is much more Scifi in nature.

By no means is this the best way to accomplish what I did.
This is just the result of me stumbling through, and upon, a couple cool tricks for a noob.

First what I did here in general was to create multiple tiles for the same device , but alter how they act when the device changes state.
I have 1 tile which remains the switch tile for turning a set of lights on/off.
I then have 1+ switch tiles for the same device that I alter the behavior of .
In my instance a set of lightbulbs which are not seen at all when the device switch is off.
But then are shown when the device switch is on.
I left all the tiles so they still act as switches since that makes it even easier to use.

In the CSS you'll see a lot of things which are mentioned in the Noobs In Complete Guide, I will not talk on those points as it'd be redundant - but feel free to look at what I did there for reference of course.

What I did find helpful/cool was the ability to use the same ID for a set of tiles.
In this fashion the tiles can be placed in separate locations on the dashboard, yet be altered in CSS as a single tile.
This didn't not appear to cause any issue with the existing dashboard designer where you edit tiles and change between them.

The Steps I would take to do this fairly quickly are as follows.

  1. Create a Switch tile for the set of lights I wanted to control and display, place it on the dashboard where you want the light switch to be <-- (Yes I know...obvious)
  2. Go to the Dashboard Options -> Advanced - layout tab. (I suggest backing up and/or editing in another editor - just in case)
  3. Scroll to the bottom , the last tile you just made should be the last one.
  4. Assign a meaningful number to it. Not technically necessary , but once I started doing this it made things easier. For this example lets say we will use tile id numbers in the range of 50-59 for this set of lights.
  5. Original Switch Tile set to ID 40.
  6. Copy/paste That Switch Tile JSON section directly below.
  7. Make sure to have the comma between them
  8. Now change the new Switch Tile ID to 41
  9. Change the row/col of this new tile about where you think you want a light bulb to be.
  10. Copy paste Switch Tile 41 for each 'light bulb' you want to show up on your dashboard, altering the row/col a bit.
  11. Make sure to have the no comma after the last one.
  12. Hit Save JSON.

Looks kinds like this.

},
{
   "rowSpan":6,
   "template":"switches",
   "col":60,
   "colSpan":13,
   "id":40,
   "row":44,
   "device":"129"
},
{
   "rowSpan":6,
   "template":"switches",
   "col":55,
   "colSpan":8,
   "id":41,
   "row":40,
   "device":"129"
},
{
   "rowSpan":6,
   "template":"switches",
   "col":45,
   "colSpan":8,
   "id":41,
   "row":40,
   "device":"129"
},
{
   "rowSpan":6,
   "template":"switches",
   "col":65,
   "colSpan":8,
   "id":41,
   "row":40,
   "device":"129"
},
{
   "rowSpan":6,
   "template":"switches",
   "col":75,
   "colSpan":8,
   "id":41,
   "row":40,
   "device":"129"
}

You should see each of the tiles you created on your dashboard now. use the 3 Dots to open them up and place them where you want.

Now go back into the advanced dashboard and go to the CSS section.

I'm not going to go into much depth on the actual CSS other than to say all the pieces of it I cobbled together from the advice I found in the other thread.

What you will see is that this made it very easy to coordinate those tiles through a couplie lines in the CSS code since when you reference Tile Id 41 - you are referencing all of those tiles.
Kinda like this..

/****************************************************************************************************/
/* LIVING ROOM LIGHTS - START
/****************************************************************************************************/
/***************************************/
/* LIVING ROOM LIGHTS  - TILE - 40 - SWITCH
/***************************************/
/***************************************/
/* LIVING ROOM LIGHTS  - TILEs 41 - IMAGE
/***************************************/
#tile-41 .tile-title {visibility: hidden; display: none;}
#tile-41 .tile-primary.off i.material-icons:before{visibility: hidden; display: none;}
#tile-41 .tile-primary.on i.material-icons:before{
  content: "";  height: 50px;   width: 50px;
  background-image:url("http://1xxx.xxx.xxx.xxx/local/LB-ON-1.png");
  background-size: 100% 100%; display: inline-block;
}
/****************************************************************************************************/
/* LIVING ROOM LIGHTS - END
/****************************************************************************************************/

Also you see in the attached files that I didn't start out with my numbering scheme.
It's easy to see how it helped once I did.
In the end I could knock out adding a switch with 8 light bulbs in about 10-15 minutes and then just work on positioning them.

This link should open a folder with my full example JSON, CSS and a video of the dashboard in action.

4 Likes

Dammit wrong video - lol . fixing it.

Correct video uploading.