Dasthicz i CSS, czyli upiększamy nasz Dashboard

Ziuuuuu, jedziemy dalej z Dashticz.

Specem od stron internetowych nie jestem, ale wiem, że CSS (Cascading Style Sheets - https://pl.wikipedia.org/wiki/Kaskadowe_arkusze_styl%C3%B3w) służy do opisu sposobu ich wyglądu. W Dashticz również możemy posłużyć się plikiem custom.css znajdującym się w folderze naszego Dashboard do 'tuningu wizualnego'.

Ciężko mi wszystko opisać od podstaw (tym bardziej, że sam nie jestem w tym zbyt dobry), dlatego podam konkretne przykłady, zachęcając do własnych eksperymentów - zmiany kolorów, fontów, wielkości, itp., itd. Wtedy sami zobaczycie jak duży macie wpływ i jak zmienia się wasz pulpit. Do tego - każdy tablet/laptop/telewizor (tak, widziałem, że ktoś ma Dashticz uruchomiony na TV) ma inną rozdzielczość i każdy z Was ma własne preferencje. Nadmieniam od razu, że opcje te są w pewnym stopniu opisane w Wiki Dashticz, część znalazłem przeglądając rozwiązania różnych osób.

Możecie edytować jak za króla Ćwieczka (jak i ja robię), edytując pliki na komputerze i przesyłając je FTP na Raspberry albo trochę bardziej nowocześnie, zgodnie z http://cezarowy.blogspot.com/2018/10/winscp-wygodna-edycja-skryptow-na.html.

Zacznijmy może od zdefiniowania wyglądu tekstów nagłówków:
/* Nagłówki */
body {
font-size:13px !important;
background-color:black !important;
}

/* Nagłówki- duża wielkość i pogrubienie */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    margin: 0px;
    margin-left: 15px;
    font-weight: 900;
    font-size: 150%;
}

Jak widać, wskazujemy między innymi wielkość, font, jego tło.

/* Tytuły bloków */

.title{      

font-size:10px !important;      

}

/* Mniejsze nagłówki bloków */
div.mh.titlegroups {
    height: 55px !important;            /* domyślnie=75px */
    padding-top: 3px;                   /* centrowanie */
}

Mam zainstalowany i skonfigurowany Logitech Media Server, nie podobały mi się domyślne wielkości ikon i fonty, więc:
/* Media Player - wielkość ikon i fontów */

.h4.h4 {
   font-size:12px;
}
.fa.fa-arrow-circle-left.fa-small {
    font-size: 50px !important;
    }
.fa.fa-stop-circle.fa-small {
   font-size: 50px !important;
}
.fa.fa-play-circle.fa-small {
   font-size: 50px !important;
}
.fa.fa-arrow-circle-right.fa-small {
   font-size: 50px !important;
}
.fa.fa-pause-circle.fa-small {
   font-size: 50px !important;
}

Zdefiniowałem wykresy na jednej ze stron, ich wielkość możemy zmienić następująco:
/*Wysokość wykresów*/
#graphoutput136{height:170px;}
#graphoutput93{height:170px;}
#graphoutput121{height:170px;}
#graphoutput118{height:170px;}

Aby zmieniać kolory ikon przy różnych akcjach:
/* Ikony */
.fa.fa-lightbulb-o.on {color: yellow}
.fa.fa-lightbulb-o.on:before {color: yellow;font-size: 25px;}
.fa.fa-lightbulb-o.off:before {color: white;font-size: 25px;}
.fa.fa-power-off.on:before {color: green;font-size: 25px;}
.fa.fa-power-off.off:before {color: red;font-size: 25px;}
.fa.fa-thermometer-half:before {color: green;font-size: 25px;}
.fa.fa-plug:before {color: yellow;font-size: 25px;}
.fa.fa-flash:before {color: yellow;font-size: 25px;}

Do przechodzenia między ekranami służą kropki na dole ekranu. Chciałem je mieć tak duże, aby łatwo było w nie trafić, ale nie przysłaniały zbyt wiele:
/* Kropki do przechodzenia między ekranami */
.swiper-pagination-bullet       {background: #c7c7c7; width: 30px !important; height: 30px !important; float:center; position:relative; left:35px;}

Zaokrąglone rogi w sekcjach możecie osiągnąć przez dodanie:
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
align-items: center;
justify-content: center;
border: 3px solid rgba(255,255,255,0); 
background: rgba(0,0,0,0.5); 
background-clip: padding-box;
border-radius: 20px; 
}

Teraz chyba najciekawsze, ale najbardziej pracochłonne, chociaż głównie metodą Kopiuj + Wklej.
Na przykład - mam Owl, który mierzy zużycie prądu. Standardowo jakoś dziwnie jego ikony są przedstawiane, nie podobały mi się. Musiałem je zmienić. Poniżej propozycja jak można to zrobić. Zwróćcie uwagę, że tak samo jak w CONFIG.js, tak i w css możecie się odwoływać do różnych zmiennych danego czujnika. Tutaj _2 sugeruje zużycie dzienne, nie chwilowe.

.block_318_2 {
   font-size:12px !important;
   color:white !important;
   height:110px !important;
}

Tak samo działają na przykład niektóre czujniki temperatury/wilgotności. Zależało mi, aby temperatura oraz wilgotność wraz z tekstem mieściła się w jednej linii. Czasem można tak:

.block_93 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

Czasem tak:

.block_314_1 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_314_2 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
} 

To mniej więcej tyle. Jak się raz zdefiniuje, to sobie już działa. Gorzej, jeżeli zmieniacie ID urządzeń (wyczerpały się baterie i w Domoticz czujnik dostaje nowe IDX), bo wtedy zmiany musicie wprowadzić w CONFIG.js oraz custom.css. Zalecam dobre opisywanie czujników, będzie łatwiej. Jak widać poniżej - nie zrobiłem tego i czasem mam problem. Staram się go jednak poprawiać z każdą możliwą okazją.

Cała zawartość mojego custom.css to :

/*
CUSTOM CSS FILE
*/

/* Nagłówki */
body {
font-size:13px !important;
background-color:black !important;
}

/* Nagłówki- duża wielkość i pogrubienie */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    margin: 0px;
    margin-left: 15px;
    font-weight: 900;
    font-size: 150%;
}

/* Mniejsze nagłówki bloków */
div.mh.titlegroups {
    height: 55px !important;            /* domyślnie=75px */
    padding-top: 3px;                   /* centrowanie */
}

/* Media Player - wielkość ikon i fontów */

.h4.h4 {
   font-size:12px;
}
.fa.fa-arrow-circle-left.fa-small {
    font-size: 50px !important;
    }
.fa.fa-stop-circle.fa-small {
   font-size: 50px !important;
}
.fa.fa-play-circle.fa-small {
   font-size: 50px !important;
}
.fa.fa-arrow-circle-right.fa-small {
   font-size: 50px !important;
}
.fa.fa-pause-circle.fa-small {
   font-size: 50px !important;
}

/*Wysokość wykresów*/
#graphoutput136{height:170px;}
#graphoutput93{height:170px;}
#graphoutput121{height:170px;}
#graphoutput118{height:170px;}

/* Pogoda */
.wi                             {color:#fff000;}

/* Ikony */
.fa.fa-lightbulb-o.on {color: yellow}
.fa.fa-lightbulb-o.on:before {color: yellow;font-size: 25px;}
.fa.fa-lightbulb-o.off:before {color: white;font-size: 25px;}
.fa.fa-power-off.on:before {color: green;font-size: 25px;}
.fa.fa-power-off.off:before {color: red;font-size: 25px;}
.fa.fa-thermometer-half:before {color: green;font-size: 25px;}
.fa.fa-plug:before {color: yellow;font-size: 25px;}
.fa.fa-flash:before {color: yellow;font-size: 25px;}

/* Kropki do przechodzenia między ekranami */
.swiper-pagination-bullet       {background: #c7c7c7; width: 30px !important; height: 30px !important; float:center; position:relative; left:35px;}

canvas#stationclock{
    width:50px !important;
    height:50px !important;
}

.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
align-items: center;
justify-content: center;
border: 3px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */
background: rgba(0,0,0,0.5); 
background-clip: padding-box;
border-radius: 20px; /* Rounded corners */
}

.block_318_1 {
   font-size:12px !important;
   color:white !important;
   height:110px !important;
}

.block_211 {
   font-size:12px !important;
   color:white !important;
   height:110px !important;
}

.block_318_2 {
   font-size:12px !important;
   color:white !important;
   height:110px !important;
}

.block_93 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_133 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_337_1 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_121_1 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_129_1 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_231 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
} /*Kuchnia*/

.block_251 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
} /*Sypialnia*/

.block_245 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_337_2{
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_121_2 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_233_2 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_314_1 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}

.block_314_2 {
   font-size:12px !important;
   color:white !important;
   height:60px !important;
}