[COMPOSITE] Jauge Qualité d'Air avec Couleur

[WITNicolas]

Un remix de la jauge+consigne avec modification des couleurs de la barre en fonction des seuils de qualité

Il suffit de liaisonner la mesure

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"jaugeQAI","name":"jauge QAI","properties":{"width":"200px"},"additionalDefs":{"colorCns":{"type":"color","value":"grey"},"colorAfter":{"type":"color","value":"lightgrey"},"maxiValeur":{"type":"number","value":2000,"min":0},"miniValeur":{"type":"number","value":0,"min":0},"txtTitre":{"type":"text","label":"Titre","value":"QAI Salle"},"txtValeur":{"type":"number","modifier":"render","label":"Mesure","value":755},"afficheCns":{"type":"boolean","value":true},"textCns":{"type":"text","modifier":"render","label":"Consigne","value":"800"},"txtUnit":{"type":"text","label":"Unité","value":"ppm"},"propColor1":{"type":"color","label":"Couleur 1","value":"rgba(123, 187, 255, 1)"},"propColor2":{"type":"color","label":"Couleur 2","value":"rgba(134, 255, 94, 1)"},"propColor3":{"type":"color","label":"Couleur 3","value":"rgba(255, 175, 55, 1)"},"propColor4":{"type":"color","label":"Couleur 4","value":"rgba(255, 74, 74, 1)"},"propNiv1":{"type":"number","label":"Seuil Bon","value":500,"min":0},"propNiv2":{"type":"number","label":"Seuil Moyen","value":800,"min":0},"propNiv3":{"type":"number","label":"Seuil Fort","value":1500,"min":0}}},"leadActor":{"type":"layout/stack","key":"stackRoot","children":[{"type":"layout/view-box","key":"view-box2","properties":{"height":"100%","width":"100%"},"children":[{"type":"layout/canvas","key":"canvas2","properties":{"horizontalAlignment":"expand","verticalAlignment":"expand","height":"200px","width":"200px"},"children":[{"type":"charting/gauge-demo","key":"gaugeValeur","properties":{"gaugeColor":"rgba(224, 224, 224, 0)","gaugeWidth":1,"gaugeBackgroundColor":"rgba(194, 194, 194, 0.77)","gaugeAngle":270,"gaugeValue":827.2,"height":"100%","width":"100%","classNames":"gauge"},"bindings":{"properties.gaugeBackgroundColor":"stage@properties.colorAfter","properties.gaugeValue":"actor#textValeur@properties.content","properties.gaugeMinValue":"stage@properties.miniValeur","properties.gaugeMaxValue":"stage@properties.maxiValeur","properties.gaugeStartColor":"stage@properties.txtValeur"},"events":{"properties/gaugeValue/binding/onReadTransform":["return context.utils.isNone(context.value) ? 0 : context.value;"],"onRender":["var maValeur = this.stage.properties.txtValeur","","if (maValeur<this.stage.properties.propNiv1) {","  this.properties.gaugeStartColor = this.stage.properties.propColor1","};","","if (maValeur>this.stage.properties.propNiv1 && maValeur<this.stage.properties.propNiv2) {","  this.properties.gaugeStartColor = this.stage.properties.propColor2","};","","if (maValeur>this.stage.properties.propNiv2 && maValeur<this.stage.properties.propNiv3) {","  this.properties.gaugeStartColor = this.stage.properties.propColor3","};","","if (maValeur>this.stage.properties.propNiv3) {","  this.properties.gaugeStartColor = this.stage.properties.propColor4","};"],"properties/gaugeStartColor/binding/onReadTransform":["var maValeur = context.value;","var maCouleur","","if (maValeur<this.stage.properties.propNiv1) {","  maCouleur = this.stage.properties.propColor1","};","","if ((maValeur>=this.stage.properties.propNiv1) && (maValeur<this.stage.properties.propNiv2)) {","  maCouleur  = this.stage.properties.propColor2","};","","if ((maValeur>=this.stage.properties.propNiv2) && (maValeur<this.stage.properties.propNiv3)) {","  maCouleur = this.stage.properties.propColor3","};","","if (maValeur>=this.stage.properties.propNiv3) {","  maCouleur = this.stage.properties.propColor4","};","","return maCouleur;"]}},{"type":"charting/gauge-demo","key":"gaugeCns","properties":{"gaugeColor":"rgba(224, 224, 224, 0)","gaugeStartColor":"rgba(4, 112, 207, 1)","gaugeWidth":1,"gaugeBackgroundColor":"rgba(194, 194, 194, 0.77)","gaugeAngle":270,"gaugeValue":827.2,"height":"100%","width":"100%","classNames":"gauge","top":"1%","scaling":0.77},"bindings":{"properties.gaugeStartColor":"stage@properties.colorCns","properties.gaugeBackgroundColor":"stage@properties.colorAfter","properties.gaugeValue":"actor#textCns@properties.content","properties.gaugeMinValue":"stage@properties.miniValeur","properties.gaugeMaxValue":"stage@properties.maxiValeur","properties.visible":"stage@properties.afficheCns"},"events":{"properties/gaugeValue/binding/onReadTransform":["return context.utils.isNone(context.value) ? 0 : context.value;"]}},{"type":"layout/stack","key":"stack5","children":[{"type":"display/text","key":"textCns","properties":{"lineHeight":"26px","textAlign":"center","horizontalAlignment":"expand","fontSize":"26px"},"bindings":{"properties.content":"stage@properties.textCns","properties.color":"actor#gaugeCns@properties.gaugeStartColor","properties.visible":"stage@properties.afficheCns"},"events":{"properties/content/binding/onReadTransform":["return parseFloat(context.utils.isNone(context.value) ? 0 : context.value);"]}},{"type":"display/text","key":"textValeur","properties":{"lineHeight":"55px","textAlign":"center","horizontalAlignment":"expand","fontSize":"40px"},"bindings":{"properties.color":"actor#gaugeValeur@properties.gaugeStartColor","properties.content":"stage@properties.txtValeur"},"events":{"properties/content/binding/onReadTransform":["return parseFloat(context.utils.isNone(context.value) ? 0 : context.value);"]}},{"type":"display/text","key":"textUnit","properties":{"content":"kWh","horizontalAlignment":"expand","fontSize":"20px","textAlign":"center"},"bindings":{"properties.color":"actor#gaugeValeur@properties.gaugeStartColor","properties.content":"stage@properties.txtUnit"}},{"type":"display/text","key":"textTitre","properties":{"content":"kWh","horizontalAlignment":"expand","fontSize":"20px","textAlign":"center"},"bindings":{"properties.content":"stage@properties.txtTitre"}}],"properties":{"bottom":"0px","right":"0px","left":"0px"}}]}]}],"properties":{"height":"150px"},"bindings":{"properties.height":"stage@properties.width"}}}