Position value dans Carte gauge

Entraide Home Assistant
1

Dans une carte type: custom:canvas-gauge-card

Comment positionner correctement titre, unités et value ?

Ma carte pour direction du vent

Utilisation d’un slider [input.number.vent] pour la démo

vent carte

Les couleurs n’ont pas le rendu en enregistrement

code de la carte 
type: custom:canvas-gauge-card
entity: sensor.bresser_6in1_0_427820547_wd
card_height: 780
card_width: 780
shadow_height: 0%
gauge:
  type: radial-gauge
  width: 750
  height: 750
  title: Vent
  colorTitle: red
  fontTitleSize: 14
  units: (°)
  colorUnits: blue
  fontUnitsSize: 10
  colorValueTextShadow: white
  barStartPosition: right
  valueBox: true
  valueBoxStroke: 1
  valueBoxWidth: 10
  valueBoxHeight: 10
  colorValueText: red
  valueTextShadow: true
  valueDec: 0
  valueInt: null
  valueBoxBorderRadius: 10
  fontValueSize: 20
  colorValueBoxBackground: lightblue
  colorValueBoxShadow: blue
  colorPlate: pink
  colorPlateEnd: white
  colorValueBoxRect: blue
  colorValueBoxRectEnd: lightblue
  needle: true
  needleShadow: true
  needleType: arrow
  needleWidth: 10
  needleEnd: 110
  needleStart: 40
  colorNeedle: red
  colorNeedleEnd: blue
  colorNeedleShadowUp: green
  colorNeedleShadowDown: black
  needleCircleSize: 10
  needleCircleOuter: true
  colorNeedleCircleOuter: white
  colorNeedleCircleOuterEnd: black
  needleCircleInner: true
  colorNeedleCircleInner: lightblue
  colorNeedleCircleInnerEnd: blue
  minValue: 0
  maxValue: 360
  startAngle: 0
  ticksAngle: 360
  majorTicks:
    - S
    - SSO
    - SO
    - OSO
    - O
    - ONO
    - 'NO'
    - NNO
    - 'N'
    - NNE
    - NE
    - ENE
    - E
    - ESE
    - SE
    - SSE
    - S
  colorNumbers: white
  numbersMargin: -55
  HighlightsWidth: 10
  fontNumbersSize: 15
  strokeTicks: true
  colorMajorTicks: green
  colorMinorTicks: red
  colorStrokeTicks: green
  highlights:
    - from: 0
      to: 380
      color: yellow
  minorTicks: 2
  animation: true
  animationDuration: 500
  animationTarget: needle
  animationRule: quad
  animatedValue: true
  animateOnInit: false
  useMinPath: true
  borders: true
  borderOuterWidth: 30
  colorBorderOuter: lightgreen
  colorBorderOuterEnd: green
  borderShadowWidth: 10
  colorBorderShadow: yellow
  colorBorderShadowEnd: red
  borderMiddleWidth: 70
  colorBorderMiddle: Blue
  colorBorderMiddleEnd: lightblue
  borderInnerWidth: 15
  colorBorderInner: pink
  colorBorderInnerEnd: red
  colorBarStroke: red
  colorBar: lightgreen
  colorBarProgress: yellow
  barWidth: 5%
  barStrokeWidth: 5
  barProgress: true
  barShadow: 2
  HighlightsLineCap: square
2

Salut,

Tu n’as pas le code de ta carte, histoire de ne pas passer 20 minutes à chercher les options

3

Si ! j’ai au-dessus, j’ai pas mal d’options!
j’ ai regardé sur GitHub , apparemment il faut modifier dans le code !, sinon pas possible !

INFOS GitHub

Non, vous ne pouvez pas faire cela avec n’importe quelle option. La seule façon pour le moment est de dessiner votre propre boîte de valeur personnalisée. Pour ce faire, vous devez injecter dans le processus de dessin en utilisant des événements appropriés

J’ai vu option sur web
Il faut que je regarde le highcharts que j’avais sur Jeedom

Résumé

image

image
image849×852 80.7 KB

4

Sinon, (c’est pas la même chose) mais c’est pas mal , voir mieux ?:

5

Oui j’ai vu, mais je veux faire sur n’importe quel type de carte, pas seulement Rose des vents !

6

Donc le plus simple !, C’est de partir sur une carte type: picture-elements , en y incorporant la gauge et d’autres info label et image que l’on pourra positionner comme il faut !

7

Bonjour

Regarde ici il y a des exemples:

https://github.com/GlennGoddard/CanvasGaugeBackgrounds

8

:+1:Merci, j’avais déjà regardé cette proposition, mais je préfère ma solution :innocent:
Je suis en train de refaire la carte depuis un type: picture-elements

@Pulpy-Luke Voilà ce que cela donne avec la direction vent et la pression
vent pression test
Les infos des mesures sont des « slider » pour test !
Donc sur une même carte:
type: picture-elements avec 2 elements de type: custom:canvas-gauge-card et state-label

Maintenant reste le choix des couleurs !
Et peut-être l’inversion des gauges ! :point_down:
pression Vent test

Donc on arrive à peu prés au « Design de Jeedom » !

image
image442×645 102 KB

1 « J'aime »