Show Off Your Dashboards!

user1632 · February 23, 2025, 2:09pm

Sure! I used this site a lot: https://www.thelcars.com/

Lots of work specific to my configuration, my css is below

/*
.image > .tile-edit{
display:none;
}

.attribute > .tile-edit {
		display:none;
}


.tile-edit{ display:none;}

*/


    
/* latin-ext */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/antonio/v11/gNMEW3NwSYq_9WD3yHoiFbez.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/antonio/v11/gNMEW3NwSYq_9WD3yHQiFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.style{
	row-gap: 1vh !important;
	column-gap: 1vw !important;
	font-size: 1rem !important;
}



.garage-control {
  border-radius: 0;
  background-color: #7788ff;
  grid-column-gap: 0;
  margin-right: -7px;
  overflow: hidden;
  position: relative;
  top: 0;
  right: 0;
  vertical-align: top;
}
/*
.garage-control > div {
  overflow: hidden;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 3vw;
  line-height: normal;
 
}*/


.flex-grow {
  text-align: center;
}

.temperature {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
}

.temp-undefined {
  font-size: 100%;
  overflow: visible;
}

.temp-undefined > span {
  display: none;
}
.he-garage_closed{display: none;}

.clock {
  border-radius: 0;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  margin: 0 1vw 0 0;
  padding: 0;
  text-align: right;
  vertical-align: bottom;
  position:relative
    
}

.weather{
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  	    text-transform: uppercase !important;

}

.clock > div > div {
  border-radius: 0;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  margin: 0;
  padding-top: 0em;
  padding-bottom: 0em;
  
  padding-right: 5%;
  font-size: 1rem !important;
  text-align: right;
  vertical-align: bottom;
  position: absolute;
  bottom: -0.6em;
  right: 0;
 }

.date-clock {
  border-radius: 0;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  margin: 0 1vw 0 0;
  padding: 0;
  text-align: right;
  vertical-align: bottom;
  position:relative
  
  vertical-align: bottom;
  position: relative;

}


.date-clock > div > div {
  border-radius: 0;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  margin: 0;
  padding-top: 0em;
  padding-bottom: 0em;
  
  padding-right: 5%;
  font-size: 0.75rem !important;
  text-align: right;
  
  position: absolute;
  top: 0em;
  right: 0;
  
  vertical-align: top;
}

.temperature > tile-title {
  display: none;
}

.attribute{
	background-color: #000000;
	font-size: 100%;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;	
  color: #8cf;
  overflow: visible !important;
  margin: 1px;
}
.attribute > .tile-title {
		display:none;
}



.attribute > div > div{
  border-radius: 0;
  font-size: 100% !important;
}


.link {
  border-radius: 0;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  font-size: 1.5rem;
  text-align: right;
  background-color: #F55;
  vertical-align: bottom;
  text-transform: uppercase;
  color: black;
  margin: -1px 0 0 0;
  padding: 10 0 0 0;
}

.switch {
  border-radius: 20vh !important;
   font-size: 1rem !important;

}

.button {
  border-radius: 20vh !important;
   font-size: 1rem !important;

}

.tile.dashboard {
  border-radius: 20px;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  font-size: 1.5rem;
  text-align: right;
  background-color: #F55;
  vertical-align: bottom;
  text-transform: uppercase;
  color: black;
  margin: -1px 0 0 0;
  padding: 10 0 0 0;
}

.tile.mode {
  border-radius: 20vh !important;
  border-radius: 20px;
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  font-size: 1.5rem;
  text-align: right;
  vertical-align: bottom;
  text-transform: uppercase;
  color: black;
  margin: -1px 0 0 0;
  padding: 10 0 0 0;
  background-color: rgba(255,255,255,0.85) !important;
}


.variable-string {
  background-color: rgba(0, 0, 0, 0);
}

.flex-grow-0 {
  /*display:none*/;
}

/*.flex-grow{
	text-align:left;
	vertical-align:top;
}*/

.flex-grow{  
background-color: rgba(0,0,0,0) !important;
}

tile-contents{
  padding: 0;
} 
.vue-slider-ltr{
  padding: 0 0;
  margin: 0 0;
}
.vue-slider-rail {
  border-radius: 0;
  background-color: rgba(255,255,255,0.85) !important;
}
.vue-slider-dot-handle{
  padding: 0 0 0 0 !important;
  margin: 0rem 0em 0rem 0rem !important;
  vertical-align: top !important;
}
.dimmer div>div{
  font-size: .5rem !important;
}

.he-tap{display: none;}
.he-switch_2_flipped{display: none;}
.he-switch_2{display: none;}

.overflow-hidden{
            position: absolute;
            bottom: 0;
            right: 0;
  text-align: right;
  vertical-align: bottom;
}


.tile-title{
  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  text-align: right !important;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  position: absolute;
  bottom: 0;
  right: 1rem;
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  vertical-align: bottom;  
  font-size: 1.5rem;
}

.image{
  margin: 0x 0 0 0 !important;  
  padding: 0rem 0em 0rem 0rem !important;
}

.thermostat{
	  font-family: 'Antonio', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
	  border-radius: 20vh !important;

}

.thermostat > div > div > .my-1 {
	display:none;
	
}
/* Tile Specific Modifications */
/* Navigation Tiles */

/*Main Viewing Port*/
#tile-3{
	/*z-index: 1;*/
	align: right !important;
	background-color: #000000;
	/*overflow: visible;*/
 background-size: contain !important;
  position: absolute;
  right: 0 !important;
  top: 0;

overflow: hidden !important;

  width: 100%;
  height: 100%;
  object-fit: fill !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGBg+A8AAQQBAHAgZQsAAAAASUVORK5CYII=) center repeat, black;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;  
	text-align: left;
    grid-gap: 0;
    border-top-right-radius: 0 !important;
}

.image[data-v-4784b085]{
	object-fit: fill !important;
}
/*Deck 2*/
#tile-7 > div>div>div{
	font-size: 1em !important; 
}
#tile-7{
	vertical-align: top;
	background-color: #dd4444;
    overflow:hidden !important;
	z-index: -1;
    /*margin-right: -7px !important; */
	border-top-left-radius:80px !important;

}


/* Shuttle Bay 1 */


#tile-8  > div {
position: absolute;
right: 0.5rem;
bottom: 0;
vertical-align: bottom;
}

/* Shuttle Bay 2 */


#tile-28 > div {
position: absolute;
right: 0.5rem;
top: 0;
}

/*Main Power*/
#tile-11{
	vertical-align: bottom;
	background-color: #ffaa90 !important;
	overflow:hidden !important;
	z-index: -1;
     /*   margin-left: 3px !important; */
}



/*Clock*/
#tile-12{
	vertical-align: top;
	background-color: #dd4444;
     overflow:hidden !important;
	z-index: -1;	
}

/*Life Support*/
#tile-10{
	vertical-align: bottom;
	background-color: #ff9966;
    overflow:hidden !important;
	z-index: -1;	
	
}
#tile-10 > div>div>div{
	font-size: 1rem !important; 
}

#tile-15{
	z-index:1;
}
#tile-15 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

/*Lower Curve*/
#tile-16{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  border-top-left-radius:20vw !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
  margin: -1px 0 0 0 !important;

  /*margin-top:100 !important;*/
    overflow:hidden !important;
	z-index: -2;
	float: right !important;
	background-size: cover !important;
}

/*Upper Curve*/
#tile-17{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  border-bottom-left-radius:80px !important;
  border-bottom-right-radius:0 !important;
   border-top-right-radius:0 !important;
   border-top-left-radius:0 !important;

 /* margin: -1px 0 0 0 !important;*/
  margin-right: -7px !important;
  
  /*margin-top:100 !important;*/
    overflow:hidden !important;
	z-index: -1;
	background-color: #7788ff !important;

}

/*Data Display Background*/
#tile-18{
	background-color: #000000;
	overflow: visible;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGBg+A8AAQQBAHAgZQsAAAAASUVORK5CYII=) center repeat, black;
    border-top-left-radius: 0;
    border-bottom-left-radius: 20;  
	text-align: left;
	z-index: 0;
}


#tile-19{
	background-color: #000000;
	overflow: visible;
  position: absolute;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGBg+A8AAQQBAHAgZQsAAAAASUVORK5CYII=) center repeat, black;
 border-top-left-radius:40px !important;
  border-bottom-right-radius:0 !important;
    border-top-right-radius:0 !important;
    border-bottom-left-radius:0 !important;

	text-align: left;

}

/*Upper Right Bar */
#tile-20{
	vertical-align: bottom;
	background-color: #ff7700 !important;
	overflow:hidden !important;
	z-index: -1;
     /*   margin-left: 3px !important; */
}



#tile-21{
	border-top-left-radius:0vw !important;
	border-top-right-radius:0 !important;
	border-bottom-left-radius:20px!important;
	border-bottom-right-radius:0 !important;
	overflow:hidden !important;

}
#tile-21 > div > div >div{
overflow:hidden !important;
text-overflow: clip;}
#tile-21 > div>div>div{
	font-size: 0.75rem !important; 
overflow:hidden !important;
text-overflow: clip;
}
table{
	font-size: 1.25rem !important;
overflow:hidden !important;
text-overflow: clip;}


/*Home Shutdown Button*/

#tile-22 {
  border-radius: 0px !important;
  background-color: #7788ff;
  grid-column-gap: 0;
  margin-right: -7px;
  overflow: hidden;
  position: relative;
  top: 0;
  right: 0;
  vertical-align: bottom;
  z-index: -1;
}


#tile-22 > div{
  overflow: hidden;
  padding-top: 0;
  padding-right: 5px;
  padding-bottom: 0;
  padding-left: 0;
  line-height: normal;
}


#tile-23{
position: absolute; left: 35.5vw; top: 1.5vh; width: 10.0vw; height: 12.7vh;
	border-radius:0vw !important;
 }

#tile-25{
z-index:1;
  background-color:rgba(0, 0, 0, 0) !important;

}

/*Camera Feeds*/
#tile-30{
	padding: 15px;
	border: 5px solid #8cf;
}
#tile-31{
	padding: 15px;
	border: 5px solid #8cf;
}
#tile-32{
	padding: 15px;
	border: 5px solid #8cf;
}
#tile-33{
	padding: 15px;
	border: 5px solid #8cf;
}

#tile-34{
	padding: 15px;
	border: 5px solid #8cf;
}
#tile-37{
    border-radius: 0 !important;
  background-color:rgba(0, 0, 0, 0) !important;

}
#tile-37 > div >div{
   background-color:rgb(0,0,0) !important;
}

#tile-38{
    border-radius: 0 !important;
  background-color:rgba(0, 0, 0, 0) !important;

}
#tile-39{
 background-color:rgb(0, 0, 0) !important;
}
#tile-41{
    border-radius: 0 !important;
  background-color:#cc88ff !important;
z-index:-2;
}

#tile-42{
    border-radius: 0 !important;
    background-color:#cc88ff !important;
    z-index:-2;
}

#tile-43{
    border-radius: 0 !important;
    background-color:rgb(204, 136, 255) !important;
    z-index:-2;
}

#tile-45{
	background-color: #dd4444 !important;
    z-index:-2;
}

#tile-49 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-50 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-51 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-59 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-61 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-62 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-63 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-64 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-68 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}


#tile-70 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

#tile-72 > .tile-title{
	padding-right: 1.5vw;
	padding-bottom: 1vh;

	font-size: 1.25rem !important;
}

garyjmilne · May 4, 2025, 4:49pm

A couple of examples Dashboard tables made with SmartGrid 4.0.

They can work on local or cloud endpoints.

You can find more information here if it looks interesting.

rlithgow1 · May 15, 2025, 4:42pm

2 posts were split to a new topic: Cameras, which ones?

sburke781 · September 24, 2025, 12:03pm

Feels a shame this hasn't got as many responses as it used to.... Surely there have been more masterpieces created recently.

chrisbvt · September 24, 2025, 12:59pm

Here's a few. I made a Yard dashboard this summer, using the SweetHome 3D rendering software that I have been using for my indoor dashboards. Looks a bit more "cartoony" than my indoor dashboards, but I like visual layouts.

The yard is actually bigger, but I had to condense the major areas together to fit it all in. It brings in my three gardens that are auto irrigated, The pool stuff (filter and pool temp) and my automated solar pool heater on top of the shed, my automated greenhouse, as well as the autofill deck fountain. The greenhouse and the pool have their own more detailed dashboards as well, linked from the Yard dashboard.

sburke781 · September 24, 2025, 1:02pm

That's more like it,....

sburke781 · September 24, 2025, 1:14pm

I'd add, for me, I don't care too much where the dashboard originates from....

chrisbvt · November 20, 2025, 3:59pm

I just made a fun dashboard for my LG Washer and Dryer. I took the images of the actual washer and dryer from the Lowe's site, and used them as background images. I overlayed all the current state attributes, putting them over the control panel screen. Settings are displayed on the left top of the machines. The power button is a working button, using a green power icon when the switch is on.

Off State:

Running State:

I cut out the drums from each, and I used a fan template to animate them, so they spin according to the current run state. I just added a speed attribute to the drivers for the washer and dryer, which is set when the run state changes, to low, medium or high.

Animated: (much smoother than the gif shows)
WasherDryerAnimated

The Speak buttons enable Alexa to speak the run state when it changes, and also speak the time remaining.

This is what I used for CSS to animate the drums, and center the drum image exactly where I wanted it.

Summary

#tile-45:has(.tile-primary) {
    position: relative;
    top: -8px !important;
    left: 0px !important;
}

/* Elastic Spin the Washer Drum Low */
#tile-45:has(.tile-primary.low) {content: "\e93c"}
#tile-45:has(.tile-primary.low) {transform-origin: center; animation: elastic-spin 1s infinite ease; animation-duration: 12000ms;}
 @keyframes elastic-spin {from {transform: rotate(0deg); } to { transform: rotate(720deg); }}

 /* Elastic Spin the Washer Drum icon medium */
 #tile-45:has(.tile-primary.medium) {content: "\e93c"}
#tile-45:has(.tile-primary.medium) {transform-origin: center; animation: elastic-spin 1s infinite ease; animation-duration: 12000ms;}
 @keyframes elastic-spin {from {transform: rotate(0deg); } to { transform: rotate(2160deg); }}

/* Spin the Washer Drum icon high */
#tile-45:has(.tile-primary.high) {content: "\e93c"}
#tile-45:has(.tile-primary.high) {transform-origin: center; animation-name: spin; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear;}
 @keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(720deg);}}

#tile-0:has(.tile-primary) {
    position: relative;
    top: -8px !important;
    left: 0px !important;
}

 /* Spin the Dryer Drum low*/
#tile-0:has(.tile-primary.low) {content: "\e93c"}
#tile-0:has(.tile-primary.low) {transform-origin: center; animation-name: spin; animation-duration: 2400ms; animation-iteration-count: infinite; animation-timing-function: linear;}
 @keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(720deg);}}

/* Spin the Dryer Drum icon medium*/
#tile-0:has(.tile-primary.medium) {content: "\e93c"}
#tile-0:has(.tile-primary.medium) {transform-origin: center; animation-name: spin; animation-duration: 1400ms; animation-iteration-count: infinite; animation-timing-function: linear;}
 @keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(720deg);}}

/* Spin the Dryer Drum icon high */
#tile-0:has(.tile-primary.high) {content: "\e93c"}
#tile-0:has(.tile-primary.high) {transform-origin: center; animation-name: spin; animation-duration: 800ms; animation-iteration-count: infinite; animation-timing-function: linear;}
 @keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(720deg);}}

djh_wolf · November 20, 2025, 8:31pm

beautiful!

oldcomputerwiz · November 20, 2025, 11:56pm

Very cool!

wagnerm1 · November 24, 2025, 7:45pm

Switched over to HD+ from Actiontiles.

chrisbvt · November 25, 2025, 6:53pm

Looks nice. I would be so confused by all those lamp icons, though. I make my icons look like the lamps they control with svg images in Legacy Dashboards.

Pantheon · November 25, 2025, 7:43pm

I design my own icons as well.

johnwill1 · November 25, 2025, 8:55pm

@chrisbvt HD+ has numerous sources for icons:

built in images (within the app I guess)
iconsdb
Noun Project
IconFinder
unsplash
Hub Filemanager

I've found that the different sources have different styling, so they can be as generic, plain or 'cartoony' as you like.

chrisbvt · November 25, 2025, 9:11pm

Yes, that is what I was saying. With options for other icons available, using the same lamp icon for everything would be confusing for me. That was not about HD+ specifically.

djh_wolf · November 26, 2025, 7:25am

Summary

spectrum 128k gamea - Google Search

wayne.pirtle · December 6, 2025, 3:12pm

Now that is a WOW dashboard!

user837 · December 9, 2025, 10:48pm

That washer & dryer is crazy cool. Is that in EZ Dashboard?

Don

calinatl · December 10, 2025, 5:46am

...wait - how do you do this in Hubitat??? - ie get the music options, song playing, etc??

Pantheon · December 10, 2025, 9:22am

I use webcore for most it. I use HD+ for the dashboard.