[COMPOSITE] Double Jauge avec Libellé + Valeur + Consigne + Unité

[WITNicolas]

Affichage d'une double jauge pour avoir le suivi de la consigne en cours et de la valeur actuelle.
Possibilité de personnaliser les couleurs et de masquer la Jauge de Consigne avec une propriété spécifique.

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"jaugeValeurCns","name":"jaugeValeur+Cns","properties":{"width":"200px"},"additionalDefs":{"colorBar":{"type":"color","value":"salmon"},"colorCns":{"type":"color","value":"purple"},"colorAfter":{"type":"color","value":"lightgrey"},"maxiValeur":{"type":"number","value":100,"min":0},"miniValeur":{"type":"number","value":0,"min":0},"txtTitre":{"type":"text","value":"Soufflage"},"txtValeur":{"type":"text","modifier":"render","value":"66"},"afficheCns":{"type":"boolean","value":true},"textCns":{"type":"text","modifier":"render","value":"22"},"txtUnit":{"type":"text","value":"°C"}}},"leadActor":{"type":"layout/stack","key":"stack1","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)","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"},"bindings":{"properties.gaugeStartColor":"stage@properties.colorBar","properties.gaugeBackgroundColor":"stage@properties.colorAfter","properties.gaugeValue":"actor#textValeur@properties.content","properties.gaugeMinValue":"stage@properties.miniValeur","properties.gaugeMaxValue":"stage@properties.maxiValeur"},"events":{"properties/gaugeValue/binding/onReadTransform":["return context.utils.isNone(context.value) ? 0 : context.value;"]}},{"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":{"textAlign":"center","horizontalAlignment":"expand","fontSize":"30px","lineHeight":"30px"},"bindings":{"properties.content":"stage@properties.textCns","properties.color":"actor#gaugeCns@properties.gaugeStartColor","properties.visible":"stage@properties.afficheCns"},"events":{"properties/content/binding/onReadTransform":["return context.utils.isNone(context.value) ? 0 : context.value;"]}},{"type":"display/text","key":"textValeur","properties":{"lineHeight":"40px","textAlign":"center","horizontalAlignment":"expand","fontSize":"50px"},"bindings":{"properties.color":"actor#gaugeValeur@properties.gaugeStartColor","properties.content":"stage@properties.txtValeur"},"events":{"properties/content/binding/onReadTransform":["return context.utils.isNone(context.value) ? 0 : context.value;"]}},{"type":"display/text","key":"textUnit","properties":{"content":"kWh","horizontalAlignment":"expand","fontSize":"0.5em","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.color":"actor#gaugeValeur@properties.gaugeStartColor","properties.content":"stage@properties.txtTitre"}}],"properties":{"bottom":"0px","right":"0px","left":"0px","fontSize":"5vmin"}}]}]}],"properties":{"height":"150px"},"bindings":{"properties.height":"stage@properties.width"}}}

[manufitoussiwit]

J'adore :-) !

[WITNicolas]

C'est super simple mais ça fait du contenu :-)