[Composite] JAUGE avec graduation

[Raphael-zoreille]

Bonjour,

quelqu'un aurait-il de quoi faire des vrais jauges avec des traits de position?
un truc comme ça par exemple:

Quand je vois tout ce qui se fait en domotique, ça doit bien pouvoir se transposer ici ?
https://canvas-gauges.com/documentation/user-guide/configuration

Merci

[WITNicolas]

Bonjour,

ça peut donner une base de travail

gauge_min.zip
A decompresser et à mettre dans l'INCLUDE du projet pour le composite puisse y faire référence.

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"jaugeParam","name":"jaugeParam (WIP)","properties":{"height":"200px","width":"200px"},"additionalDefs":{"colorNormal":{"type":"color","value":"lightblue"},"colorMedium":{"type":"color","value":"lightyellow"},"colorFault":{"type":"color","value":"lightsalmon"},"strGraduation":{"type":"text","value":"0,5,10,15,20,25,30,35,40"},"boiteValeur":{"type":"boolean","value":true},"nbrInt":{"type":"number","value":2},"nbrDec":{"type":"number","value":1},"seuilNormal":{"type":"number","value":15},"seuilMedium":{"type":"number","value":30},"couleurBarre":{"type":"color","value":"green"},"unite":{"type":"text","value":"°C"},"minValeur":{"type":"number","value":0},"maxValeur":{"type":"number","value":40},"actualValeur":{"type":"number","value":15}}},"leadActor":{"type":"layout/stack","key":"stackGauge","children":[{"type":"display/html","key":"jaugeParam","properties":{"content":"<canvas \n        data-type=\"{{typeGauge}}\"\n        data-title=\"{{TitreGauge}}\"\n        data-value=\"{{actualValeur}}\"\n        data-value-box=\"{{boiteValeur}}\"\n        data-value-Int=\"{{nbrInt}}\"\n        data-value-Dec=\"{{nbrDec}}\"\n        data-min-value=\"{{minValeur}}\"\n        data-max-value=\"{{maxValeur}}\"\n        data-major-ticks=\"[{{strGraduation}}]\"\n        data-minor-ticks=\"10\"\n        data-units=\"{{unite}}\"\n        data-width=\"{{largeur}}\"\n        data-height=\"{{hauteur}}\"\n        data-bar-width=\"10\"\n        data-bar-shadow=\"5\"\n        data-color-bar-progress=\"{{couleurBarre}}\"\n        data-highlights='[\n             {\"from\": {{minValeur}}, \"to\": {{seuilNormal}}, \"color\": \"{{colorNormal}}\"},\n             {\"from\": {{seuilNormal}}, \"to\": {{seuilMedium}}, \"color\": \"{{colorMedium}}\"},\n             {\"from\": {{seuilMedium}}, \"to\": {{maxValeur}}, \"color\": \"{{colorFault}}\"}\n             ]'\n        data-animation-rule=\"{{animation}}\"\n></canvas>","top":"660px","left":"170px","height":"200px"},"additionalDefs":{"largeur":{"type":"size"},"hauteur":{"type":"size"},"unite":{"type":"text"},"minValeur":{"type":"number"},"maxValeur":{"type":"number"},"actualValeur":{"type":"number"},"strGraduation":{"type":"text"},"boiteValeur":{"type":"boolean"},"typeGauge":{"type":"select","canBeEmpty":false},"nbrInt":{"type":"number"},"nbrDec":{"type":"number"},"couleurBarre":{"type":"color"},"colorNormal":{"type":"color"},"colorMedium":{"type":"color"},"colorFault":{"type":"color"},"seuilNormal":{"type":"number"},"seuilMedium":{"type":"number"},"animation":{"type":"multi-select"}},"additionals":{"largeur":"200px","hauteur":"200px","unite":"°C","minValeur":0,"maxValeur":40,"actualValeur":20,"strGraduation":"0,5,10,15,20,25,30","boiteValeur":true,"typeGauge":"radial-gauge","nbrInt":2,"nbrDec":1,"couleurBarre":"grey","colorNormal":"green","colorMedium":"yellow","colorFault":"red","seuilNormal":15,"seuilMedium":30,"animation":"bounce"},"bindings":{"properties.width":"[email protected]","properties.height":"[email protected]","additionals.largeur":"actor#[email protected]","additionals.hauteur":"actor#[email protected]","additionals.colorNormal":"[email protected]","additionals.colorMedium":"[email protected]","additionals.colorFault":"[email protected]","additionals.strGraduation":"[email protected]","additionals.boiteValeur":"[email protected]","additionals.nbrInt":"[email protected]","additionals.nbrDec":"[email protected]","additionals.seuilNormal":"[email protected]","additionals.seuilMedium":"[email protected]","additionals.couleurBarre":"[email protected]","additionals.unite":"[email protected]","additionals.minValeur":"[email protected]","additionals.maxValeur":"[email protected]","additionals.actualValeur":"[email protected]"}}]}}

[Raphael-zoreille]

Merci, y'a t'il pareil à plat (comme sur les synoptiques avec barre de position) ? 😎
(actuellement c'est vertical thermomètre)

[Raphwit]

Hello, serait-il possible d'avoir une image de ce que vous cherchez pour avoir une idée ?

[Raphael-zoreille]

Hello,

voici une idée:

ou

[JeremieDENAEGEL]

Bonjour,

J'ai déployé l'image ci-dessous pour gérer une consigne d'ambiance. Il y a moyen de faire cela avec un gradient de couleur dans l'image de fond de l'acteur :

Je pense qu'en y ajoutant quelques acteurs, il y a moyen de recréer ton image "Temperatur - nur test".

Pour ta première image, je pense qu'il faudra utiliser un canvas