monitor - background-color conditionnel?

[papoo]

Bonjour,
j'utilise 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).
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 lumiere electrique non domotisée est allumée ou éteinte.
j'aimerai 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 donnerait :

css conditionnel.png (1.05 Mio) Consulté 5698 fois

j'ai essayé d'attribuer un id aux div concernés

Code : Tout sélectionner

<div class="frame" id="rdc_01>

dans rdc.html
en ajoutant ensuite

Code : Tout sélectionner

		['lumiere_rdc_1','status',           		'rdc_01',                       	'','','','',''],
                ['lumiere_rdc_2','status',           		'rdc_02',                       	'','','','',''],
                ['lumiere_rdc_3','status',           		'rdc_03',                       	'','','','',''],
                ['lumiere_rdc_4','status',           		'rdc_04',                       	'','','','',''],
                

dans frontpage_setting.js
mais les div disparaissent lorsque lumiere_rdc_x est eteint

[Nemesis24]

Salut,
Par la méthode css jquery
https://www.w3schools.com/jquery/jquery_css.asp

[papoo]

merci Nemesis24
cela me permet de gérer directement la condition dans la page.

Code : Tout sélectionner

$("#rdc_1").css("background-color", "rgba(243, 255, 51, 0.3)");

Me reste plus qu'a trouver comment récupérer l'info du device qui l'actionnera

[papoo]

pour ceux que cela pourraient interesser
editer le fichier frontpage_setting.js
en fin de fichier juste avant

Code : Tout sélectionner

			} 
		  
		}

		

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

ajouter

Code : Tout sélectionner

	
		////////////////////////////////////////////////////////////////////////////////
						
					// 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;;