Show Off Your Dashboards!

[user1632]

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]

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.

[RELEASE] Remote Builder – A New Way to Control Devices - 7 Remotes Available

I have released SmartGrid 4.0.4 via HPM. There are lots of changes from version 3.2.0 so these are just the biggest ones. Group Headers Variables drawn from device attributes and Hub variables Custom rows (🛈) using static text and variables. Custom Sort order using Drag and Drop [image] Re-designed layout of SmartGrid composer for better space usage. Offload shuttle animation to GPU for low CPU utilisation Color Schemes. Run-Time settings for filtered views (Long press on Name header) [i…