Show Off Your Dashboards!

[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...

[MajorEvent]

Just finished my migration from SmartThings and Webcore started about a week ago. It wasn't an entirely smooth ride but I made it to the end and turned off the smartthings hub yesterday. I've been playing around with the dashboard tools and brushing off the CSS skills which aren't too great anyway and this is what I have so far,

For the PC/Tablet, a TabletView that shows all my meager smart devices:

For the Phone, I did 5 views:
Phoneview Top Page:

Living Room:

Media Room:

Mud Room:

Other Rooms:

It's a work in progress. I still need to add battery tracking and I need some weather data (Luminance for lighting control). Suggestions gratefully accepted. I also need better presence detection. Hubitat, I'm afraid isn't meeting expectations (for presence detection). There's no geofence on my wife's phone at all and my phone has a geofence and shows me in and out of it but it never seems to change anything, presence tile or Mode. I tried Alexa but that is ONLY detecting when I leave and never not once when I return. Weird. Any suggestions?

Updated 1/16/2023 Added a PowerPanel:

[sburke781]

With a modified version of @mbarone 's iFrameAdvanced driver, I was able to produce "tabs" at the top of a dashboard to switch between different dashboards on-screen. Not necessarily the dashboards I would choose for this effect, but they were there, so I used them to develop the idea. I would most likely put different rooms or different topics at the top, like Lighting, Climate, Power, etc.

[kewashi]

I've avoided dinking with the built in HE dashboards because I was pretty happy with my own HousePanel app. This weekend I took the dive and started playing with it thanks to the many great examples here and in the Noob's guide thread referenced here often. What I focused on what using the same icons I've come to love and expect from HousePanel and merging them into the HE platform using CSS. It was surprisingly easy and the end result looks quite nice I think. I will likely start using this now exclusively given the advantages of using the HE supported platform - such as avoiding cloud access when I'm in my home. If anyone is a user of HousePanel and wants to migrate using the CSS I created, let me know and I'll happily share. Here are two pages. Each page links back to the main page to simulate the HP multi-tab capability. Not quite as fast, but fast enough.

[FriedCheese2006]

Just commenting to say....nice range!