Jauge
L’acteur jauge permet de représenter graphiquement par un arc de cercle coloré, une valeur dans un intervalle.
🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule
Propriétés
Couleur après
this.properties.gaugeBackgroundColor · string · défaut '#C2C2C2' · modifie : Style CSS
Couleur CSS après l’aiguille.
Couleur avant
this.properties.gaugeStartColor · string · défaut '#0B04CF' · modifie : Style CSS
Couleur CSS avant l’aiguille.
Couleur de l’aiguille
this.properties.gaugeColor · string · défaut '#E0E0E0' · modifie : Style CSS
Couleur CSS de l’aiguille.
Épaisseur
this.properties.gaugeWidth · number · défaut 3 · modifie : Style CSS
Épaisseur de la jauge.
Ouverture Angulaire
this.properties.gaugeAngle · number · défaut 180 · modifie : Style CSS
Angle d’étendue de la jauge en degré.
Valeur
this.properties.gaugeValue · number · défaut 75 · modifie : Style CSS
Valeur de la jauge.
Valeur maximale
this.properties.gaugeMaxValue · number · défaut 100 · modifie : Style CSS
Valeur maximale de la jauge.
Valeur minimale
this.properties.gaugeMinValue · number · défaut 0 · modifie : Style CSS
Valeur minimale de la jauge.
Hérite de
Outre ce qui est décrit ici, l’acteur a tout ce que décrit l’acteur de base : propriétés communes (taille, disposition, aspect, texte, bordures, effets…), évènements communs (cycle de vie, souris, clavier…) et membres accessibles par script.
Personnalisation
Il est possible de la personnaliser en changeant les couleurs
- de l’aiguille
- de l’arc avant l’aiguille
- de l’arc après l’aiguille. La personnalisation va plus loin en permettant de définir l’épaisseur de l’arc et sont étendue angulaire.
Quelques recommandations
- Ne sortez pas la valeur de l’intervalle définie par les bornes sous peine de dysfonctionnement de la jauge.
- Fixez sa largeur et sa hauteur pour éviter les problèmes de redimensionnement. Éventuellement, placez la ensuite dans une Boite à vue.
Quelques exemples
Jauge épaisse sans aiguille
SYNAPPS-STUDIO-ACTOR|{"type":"charting/gauge-demo","key":"gauge-demo1","properties":{"height":"200px","width":"350px","gaugeColor":"rgba(224, 224, 224, 0)","gaugeStartColor":"rgba(4, 207, 4, 1)","gaugeWidth":10}}
Jauge annulaire fine sans aiguille
SYNAPPS-STUDIO-ACTOR|{"type":"charting/gauge-demo","key":"gauge-demo2","properties":{"height":"200px","width":"350px","gaugeColor":"rgba(224, 224, 224, 0)","gaugeStartColor":"rgba(207, 92, 4, 1)","gaugeWidth":1,"gaugeBackgroundColor":"rgba(194, 194, 194, 0)","gaugeAngle":360,"gaugeValue":80}}
Jauge annulaire fine sans aiguille avec un texte à l’intérieur
Vous noterez que le texte reste bien centré et contenu dans la jauge grâce à une boite à vue avec des marges intérieures
SYNAPPS-STUDIO-ACTOR|{"type":"layout/stack","key":"stack2","children":[{"type":"layout/canvas","key":"canvas1","properties":{"height":"200px","width":"350px"},"children":[{"type":"charting/gauge-demo","key":"gauge-demo3","properties":{"height":"100%","width":"100%","gaugeColor":"rgba(224, 224, 224, 0)","gaugeStartColor":"rgba(4, 112, 207, 1)","gaugeWidth":1,"gaugeBackgroundColor":"rgba(194, 194, 194, 0)","gaugeAngle":360,"gaugeValue":820,"gaugeMaxValue":1000}},{"type":"layout/view-box","key":"view-box1","properties":{"height":"100%","width":"100%","paddingTop":"35px","paddingBottom":"27px","paddingRight":"115px","paddingLeft":"115px"},"children":[{"type":"layout/stack","key":"stack3","children":[{"type":"display/text","key":"text1","properties":{"lineHeight":"0.9em"},"bindings":{"properties.content":{"sourceType":"actor","sourceKey":"gauge-demo3","path":"properties.gaugeValue"},"properties.color":{"sourceType":"actor","sourceKey":"gauge-demo3","path":"properties.gaugeStartColor"}}},{"type":"display/text","key":"text2","properties":{"content":"kWh","horizontalAlignment":"middle","fontSize":"0.3em"},"bindings":{"properties.color":{"sourceType":"actor","sourceKey":"gauge-demo3","path":"properties.gaugeStartColor"}}}]}]}]},{"type":"input/text-box","key":"text-box1","properties":{"width":"350px","inputType":"range","min":0,"max":1000,"step":5},"bindings":{"properties.value":{"sourceType":"actor","sourceKey":"gauge-demo3","path":"properties.gaugeValue","canWrite":true}}}]}
