Show Off Your Dashboards!

[birbeck]

Here is my first attempt at doing a whole home dashboard, it took a lot of work with a large grid (8x54), 95 tiles (a bunch overlapping), and a lot of custom CSS.

For each of the rooms, the header links to the full dashboard for that room and has a toggle for enable/disable motion lighting for the room, if motion is active in the room and if the room is occupied. The wireless phone chargers show my phones current battery percentage in the top left corner. The camera images show if motion is currently active, the snapshot from the last event and the timestamp of the last event.

Some of the biggest challenges were:

• Getting the AQI - I ended up modifying the driver to report AQI as carbon dioxide and using that tile with a custom unit
• Getting the camera images to use the full container and center the image
• Lining up the battery indicators and styling the full battery container and colors

I'm pretty happy with the result.

Here is the unstyled one for reference.

[amithalp]

@birbeck

• ry indicators and styling the full battery container and colors

I'm pretty happy with the result.

How did you get battery tile color to change according to its value?

[birbeck]

@birbeck

overlapping

@amithalp The tiles already change color by default if you are ok with the standard green, red and default tile color for 40-26%. But I wanted the 40-26% to be yellow and all of the colors I use are from the Material color pallete so I wanted the batteries to match. That part is easy

.battery-100, .battery-99, .battery-98, .battery-97, .battery-96, .battery-95, .battery-94, .battery-93, .battery-92, .battery-91, .battery-90, .battery-89, .battery-88, .battery-87, .battery-86, .battery-85, .battery-84, .battery-83, .battery-82, .battery-81, .battery-80, .battery-79, .battery-78, .battery-77, .battery-76, .battery-75, .battery-74, .battery-73, .battery-72, .battery-71, .battery-70, .battery-69, .battery-68, .battery-67, .battery-66, .battery-65, .battery-64, .battery-63, .battery-62, .battery-61, .battery-60, .battery-59, .battery-58, .battery-57, .battery-56, .battery-55, .battery-54, .battery-53, .battery-52, .battery-51, .battery-50 {
  background-color: #4CAF50;
}
.battery-49, .battery-48, .battery-47, .battery-46, .battery-45, .battery-44, .battery-43, .battery-42, .battery-41, .battery-40, .battery-39, .battery-38, .battery-37, .battery-36, .battery-35, .battery-34, .battery-33, .battery-32, .battery-31, .battery-30, .battery-29, .battery-28, .battery-27, .battery-26 {
  background-color: #FBC02D;
}
.battery-25, .battery-24, .battery-23, .battery-22, .battery-21, .battery-20, .battery-19, .battery-18, .battery-17, .battery-16, .battery-15, .battery-14, .battery-13, .battery-12, .battery-11, .battery-10, .battery-9, .battery-8, .battery-7, .battery-6, .battery-5, .battery-4, .battery-3, .battery-2, .battery-1 {
  background-color: #F44336;
}
.battery-0 {
  background-color: #7B1FA2;
}

But the width of .tile-content is calc(100%-8) and has a 4px padding, so the background doesn't cover the whole tile. For that I had to adjust .tile-contents and .tile-primary for all tiles (you can do it just for batteries with .tile.battery .tile-contents if you want) .

.tile-contents {
  width: 100%;
  height: 100%;
  padding: 0;
}
.tile-primary {
  width: 100%;
  height: 100%;
  padding: 4px 4px 12px 4px;
}

I stuck with the default battery percentages for now, but may adjust them later. I had to go with a dark yellow, almost orange, to make the white text readable, unfortunately there isn't a CSS parent selector or anything so it's not possible to change the title color for the battery tiles within a battery percentage range.

[sburke781]

@bezerkus

Thanks for this! My ultimate goal would be to have animated CSS much like this:

Hmmm... Probably an interesting discussion on either of the two links I provided earlier.... this is largely a "gallery" of cool things people have done with typically short and sharp conversation like this, but anything more should ideally be taken "offline" into another topic. Perhaps start by posting the question in the Noobs CSS thread first... And maybe I will look at including it in the long list of updates for my editor

[rlithgow1]

For animated tiles, you may look at @gslender 's hubivue as an option. www.hubivue.com . He's also good at taking requests if you are looking to try something specific

[gslender]

Here's a few dashboards using the online web version of hubiVue... (it also runs natively on mobile, tablets and desktop)

The below pic is the web app running in "mobile emulation" showing me how the dashboard will look when on the native mobile phone.

Now the same web app, but showing me the "tablet emulation" of another related dashboard.

[birbeck]

Here is one I did today for just the lighting around the house. Each color bulb tile is made up of 4 overlapping tiles (2x color bulb, 1 attribute and one dimmer). I made the background color bulb fill the container and then overlayed the others on top.

Clicking any empty space in the tile toggles the light on/off, sliding the slider adjusts the light dimmer, and clicking the bulb opens the color/temperature/level dialog. If the light is off, my default tile background color shows, if the light is on the current light color is displayed for the full container background.

I haven't started adding scenes.

[LibraSun]

CHROMA KEYPAD - My latest pet project

I've been watching enviously as some of the Dashboard masters show off their "Security Keypad" and other fancy designs, and some of them are certainly works of art! Which got me to thinking...
"Wouldn't it be nice to create a less-secure keypad for kids that uses colors and shapes instead of numbers?!" "Could I animate such a thing using only device states?"

Here is what I came up with... [SCROLL DOWN FOR ANIMATED DEMO!]

THEORY

• Allow each child in the household to have their own "color" and/or "shape"
• Unlocking can either be "automatic" (after correct sequence) or require tap
• Basic 4-digit locks codes** used, but can be easily extended to N-digits
• Each code has family member name associated with it, displayed on Unlock

CHALLENGES

• Use only the available stock apps and utilities, including Hubitat Dashboard
• Keep custom CSS demands to a minimum, opting for Template edits instead
• Avoid Hub Variables and Connectors for simplicity and keeping the UI neat
• Animate the Tile grid in realtime, only using changes in Device attributes
• Rule Machine too limited, especially in Variable Math area, to produce results

DESIGN

• Color swatches are composed of "Fan Controller" devices with 7 speed states
• Each state of the "Fan" template is assigned its own custom color and icon
• Minimal custom CSS was used where necessary, such as hiding Tile titles
• The "Lock" device represents an actual Lock in Devices for maximum flexibility
• All 9 tiles are overlaid by invisible tiles linked to a 10-button "Button Controller"

OPERATION

• Single tap of any color swatch represents a "digit" in the keycode sequence
• Each tap causes all 7 swatches to scramble again without duplicating colors
• Tapping "Reset" also re-scrambles color swatches, plus initializes keycode
• Successful keycode sequence results in Unlock ("auto"), or Tap-to-Unlock
• All interactivity is managed in WebCoRE by a single, easy-to-modify Piston

LOCK CODES

• Initial colorset of {black, cyan, magenta, yellow, red, green, blue} can be changed
• Alternative shape icons can likewise be selected from Dashboard Templates page
• Each family member is given a color(s)-only, shape(s)-only or mixed keycode
• Color-based examples: "Red-Red-Red-Red" or "Green-Magenta-Black-Cyan"
• Shape-based examples: "Star-Star-Star-Star", "Star-Hourglass-Triangle-Square"
• Regardless, the target color or shape will continue shuffling around on each tap!

WEBCORE NOTES

• This exercise was expressly chosen to strengthen my WC knowledgebase
• As such, it uses a few advanced constructs like Lists, FOR Loops, SWITCH-CASE
• By design, no Hub Variables or Connectors are used throughout the project
• All interactivity is managed via 9-10 virtual devices, i.e. Fans, Buttons, Lock

Perhaps I'll manage to include a video of Chrome Keypad in operation, but for now I tried to make up for that with this detailed description. It was a fun 3-day process that paid off even better than I initially hoped! I certainly (re)learned a lot of WebCoRE theory and best practices, having run into practically every obstacle one could encounter along the way. (Hardest skill? Declaring, populating, and manipulating String List variables!!)

ANIMATED DEMO
Chroma Keypad Demo

Any questions? I'm just happy I could contribute this tiny bit of whimsy back to the Dashboard designer community, to whose ongoing work I routinely turn for inspiration.

• Libra
  *In memory of OP @patrick *

DETAILS (click to expand each section below, if interested)

Layout JSON

{
"localization": "English",
"roundedCorners": 20,
"dateFormat": "MM/DD/YYYY",
"hideLabels": true,
"customColors": [
{
"template": "fan",
"bgColor": "rgb(0,0,0)",
"iconColor": "rgb(71,71,71)",
"state": "off",
"customIcon": "he-star-full"
},
{
"template": "fan",
"bgColor": "rgb(255,255,255)",
"iconColor": "rgb(185,185,185)",
"state": "on",
"customIcon": "he-star-full"
},
{
"template": "fan",
"bgColor": "rgb(0,255,0)",
"iconColor": "rgb(71,185,71)",
"state": "auto",
"customIcon": "group_work"
},
{
"template": "fan",
"bgColor": "rgb(255,0,255)",
"iconColor": "rgb(185,71,185)",
"state": "low",
"customIcon": "hourglass_empty"
},
{
"template": "fan",
"bgColor": "rgb(0,255,255)",
"iconColor": "rgb(71,185,185)",
"state": "medium-low",
"customIcon": "change_history"
},
{
"template": "fan",
"bgColor": "rgb(255,255,0)",
"iconColor": "rgb(185,185,71)",
"state": "medium",
"customIcon": "he-sun"
},
{
"template": "fan",
"bgColor": "rgb(0,0,255)",
"iconColor": "rgb(71,71,185)",
"state": "medium-high",
"customIcon": "all_inclusive"
},
{
"template": "fan",
"bgColor": "rgb(255,0,0)",
"iconColor": "rgb(185,71,71)",
"state": "high",
"customIcon": "he-checkbox-unchecked"
},
{
"template": "buttons",
"bgColor": "rgba(0,0,0,0)",
"iconColor": "rgba(0,0,0,0)",
"state": "default"
},
{
"template": "lock",
"bgColor": "rgb(64,64,64)",
"iconColor": "",
"customIcon": "",
"state": "locked"
},
{
"template": "lock",
"bgColor": "rgb(192,192,192)",
"iconColor": "",
"customIcon": "",
"state": "unlocked"
},
{
"template": "variable-string",
"bgColor": "rgb(164,164,164)",
"iconColor": "",
"customIcon": "",
"state": "default"
},
{
"template": "texttile",
"bgColor": "rgb(64,64,64)",
"iconColor": "",
"customIcon": "",
"state": "default"
}
],
"colWidth": 160,
"cloudRefresh": 5,
"hsmPin": "",
"hide3dot": false,
"gridGap": 5,
"clockMode": true,
"tiles": [
{
"rowSpan": 1,
"template": "fan",
"col": 1,
"colSpan": 1,
"id": 1,
"row": 1,
"device": "513"
},
{
"rowSpan": 1,
"template": "fan",
"col": 2,
"colSpan": 1,
"id": 2,
"row": 1,
"device": "512"
},
{
"rowSpan": 1,
"template": "fan",
"col": 3,
"colSpan": 1,
"id": 3,
"row": 1,
"device": "514"
},
{
"rowSpan": 1,
"template": "fan",
"col": 1,
"colSpan": 1,
"id": 4,
"row": 2,
"device": "517"
},
{
"rowSpan": 1,
"template": "fan",
"col": 2,
"colSpan": 1,
"id": 5,
"row": 2,
"device": "518"
},
{
"rowSpan": 1,
"template": "fan",
"col": 3,
"colSpan": 1,
"id": 6,
"row": 2,
"device": "519"
},
{
"rowSpan": 1,
"template": "fan",
"col": 2,
"colSpan": 1,
"id": 7,
"row": 3,
"device": "520",
"templateExtra": null
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"buttonCommand": "push",
"colSpan": 1,
"id": 8,
"row": 1,
"device": "515",
"templateExtra": "1"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"buttonCommand": "push",
"colSpan": 1,
"id": 9,
"row": 1,
"device": "515",
"templateExtra": "2"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"buttonCommand": "push",
"colSpan": 1,
"id": 10,
"row": 1,
"device": "515",
"templateExtra": "3"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 1,
"buttonCommand": "push",
"colSpan": 1,
"id": 11,
"row": 2,
"device": "515",
"templateExtra": "4"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"buttonCommand": "push",
"colSpan": 1,
"id": 12,
"row": 2,
"device": "515",
"templateExtra": "5"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"buttonCommand": "push",
"colSpan": 1,
"id": 13,
"row": 2,
"device": "515",
"templateExtra": "6"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 2,
"colSpan": 1,
"id": 14,
"row": 3,
"device": "515",
"templateExtra": "7",
"buttonCommand": "push"
},
{
"rowSpan": 1,
"template": "lock",
"col": 1,
"colSpan": 1,
"id": 15,
"row": 3,
"device": "516"
},
{
"rowSpan": 1,
"template": "texttile",
"col": 3,
"z-index": -1,
"colSpan": 1,
"id": 16,
"row": 3,
"templateExtra": "RESET"
},
{
"rowSpan": 1,
"template": "buttons",
"col": 3,
"z-index": 1,
"buttonCommand": "push",
"colSpan": 1,
"id": 17,
"row": 3,
"device": "515",
"templateExtra": "9"
}
],
"goBack": true,
"modePin": "",
"bgColor": "saddlebrown",
"lanRefresh": 2,
"iconSize": "60",
"cols": 3,
"rowHeight": 160,
"customCSS": ".fan .tile-title {\n visibility: hidden;\n}\n.lock .tile-title {\n visibility: hidden;\n}\n",
"hideEvents": false,
"tempScale": "F",
"noColors": false,
"readOnly": null,
"rows": 4,
"hideIconText": true,
"hideTextShadow": true,
"name": "Chroma Keypad",
"fontSize": 20
}

Grid Options

Custom CSS

.fan .tile-title {
visibility: hidden;
}
.lock .tile-title {
visibility: hidden;
}

Piston Code (not latest)

**Lock Codes (example)

[LibraSun]

Here's my rendition of the classic game "LIGHTS OUT!" (included on vintage platforms like Merlin™) as a Hubitat Dashboard, being controlled in the background by WebCoRE...

It's pretty simple. The 3x3 playing field comprises 9 virtual (or real? LOL) switches, overlaid by 9 (invisible) buttons, plus a single Text "device" at the center of the grid to display "You Won!" and "Play Again?"
All WebCoRE does is wait for a tap, toggle the corresponding set of switches, and check whether they are all "Off" (if so, display "You Won!" and flash switch #5).

Tapping the middle "Play Again?" tile will, of course, randomize the "lights" once more in hopes that you can solve the next puzzle. Hours of fun for kids!!

[kewashi]

Here is the main post on the forum:

HousePanel 2 Node Version

Hi Everybody! It has been more than two years since I've given any serious attention to HousePanel, so this is a major update. This update replaces the old hmoptions.cfg file with a database. I initially required an install of mysql but then discovered the joys of sqlite, so now this uses sqlite and no complicated installs of a database are required. You do have to have an installation of sqlite working on your server, but this comes with most Linux installations. The db file will be created fo…

For full doc go to:

HousePanel - HousePanel

[kewashi]

dude - this is super cool

[ymerj]

Cold weather is coming, time for a new dashboard:

[sburke781]

No matter what the weather... Everyone can benefit from a new dashboard....

[garyjmilne]

Very cool. What system are you using to generate this?

[ymerj]

It's a stock Hubitat dashboard with manualy modified CSS (144 tiles, with 96 lines of CSS on 100x60 grid)

[Navat604]

@ymerj

It's a stock Hubitat dashboard with manualy modified CSS (144 tiles, with 96 lines of CSS on 100x60 grid)

That's a sweet looking dashboard. I can't imagine the amount of time doing it.

[garyjmilne]

Well you have done a great job both technically and aesthetically. Those 96 lines probably took quite a long time unless you are a CSS pro.

[syepes]

@ymerj

96 lines of CSS on 100x60 grid)

definitely the look is simple but very effective, will yor be sharing rhe code and layout?

[ymerj]

96 lines: many are repeating the same things for different tiles and I found them all on this thread:

The Noob's (in)complete guide to CSS for Hubitat

DISCLAIMER: I'm no web designer and my knowledge of and interest in CSS is pretty low. Everything I've put together in this post is through searching, inferring and experimenting and if there are omissions, mistakes or things that can be done better (which there will be plenty of I'm sure) I'd be happy to be corrected. Everything here is basic 101 stuff for people versed in html/CSS but probably might as well be Greek to everyone else. I won't have time to put everything down initially so will…

As for sharing, I wish there was a possibility of templates with hubitat dashboards but the beast is often a pain to work with and due to the number of workaround needed to achieve something presentable, it does not let itself adapted easily.

[sburke781]

@ymerj

As for sharing, I wish there was a possibility of templates with hubitat dashboards

You can at least repeat a "template" across tiles in a dashboard with my CSS editor tool. I am working towards sharing between dashboards or even users here, but finding the time to progress it can be hard sometimes...