Indication luminosité d’une pièce dans monitor

Domoticz,

Comme dashboard pour ma domotique, j’utilise la Custom Page de vil1driver, aussi appelé monitor.
j’utilise donc monitor pour afficher chacune de mes pièces et leur contenu domotique.
pour ce faire j’ai personnalisé le fichier page5.html (affichage de 4 pieces) pour afficher mon rez de chaussée (rdc.html) et l’étage (etage.html)
et leur fichier css associé (rdc.css et etage.css modifiées depuis le fichier page5.css).
avec l’arrivée des capteurs de mouvement et de luminosité xiaomi aquara et un blocky simple ou via un script, il est très simple de savoir si la lumière électrique non domotisée est allumée ou éteinte.
je souhaite bien sur afficher cette information sur monitor.
pour chacune des pièces à traiter (#rdc_1, #rdc_2, #rdc_3, #rdc_4 ) il suffit d’ajouter dans le css 

background-color: rgba(243, 255, 51, 0.3);

mais comment rendre ce css conditionnel à la valeur d’un device ou d’une variable?
exemple de ce que cela donne :

La solution? la méthode css jquery proposée par Nemesis24

Editer le fichier frontpage_setting.js
en fin de fichier juste avant 

			} 
		  
		}

		

// ############################################################################################################
// #### ^^^^^   USER VALUES above ^^^^^   #######
// ############################################################################################################

Ajouter

		////////////////////////////////////////////////////////////////////////////////
						
					// Eclairer background piece 1 dans page rdc.html (modele de page : page5.html)
					case "lumiere_rdc_1": // nom du switch
						
						if (message.nvalue == 1){		// status On 
                        $("#rdc_1").css("background-color", "rgba(243, 255, 51, 0.3)");
						}	
						if (message.nvalue == 0){
                         $("#rdc_1").css("background-color", "rgba(0, 0, 0, 0)");
                        }
						break;;							
					// Eclairer background piece 2 dans page rdc.html (modele de page : page5.html)
					case "lumiere_rdc_2": // nom du switch
						
						if (message.nvalue == 1){		// status On 
                        $("#rdc_2").css("background-color", "rgba(243, 255, 51, 0.3)");
						}	
						if (message.nvalue == 0){
                         $("#rdc_2").css("background-color", "rgba(0, 0, 0, 0)");
                        }						
						break;;	
					// Eclairer background piece 3 dans page rdc.html (modele de page : page5.html)
					case "lumiere_rdc_3": // nom du switch
						
						if (message.nvalue == 1){		// status On 
                        $("#rdc_3").css("background-color", "rgba(243, 255, 51, 0.3)");
						}	
						if (message.nvalue == 0){
                         $("#rdc_3").css("background-color", "rgba(0, 0, 0, 0)");
                        }						
						break;;	
                    // Eclairer background piece 4 dans page rdc.html (modele de page : page5.html)
					case "lumiere_rdc_4": // nom du switch
						
						if (message.nvalue == 1){		// status On 
                        $("#rdc_4").css("background-color", "rgba(243, 255, 51, 0.3)");
						}	
						if (message.nvalue == 0){
                         $("#rdc_4").css("background-color", "rgba(0, 0, 0, 0)");
                        }						
						break;;

Laisser un commentaire