Showcase your Dashboard

Dashboards
141

‘Old fashioned’ gauches from Home Assistant (guide here)

Just to show what’s possible (don’t mind the overall dash design / layout :woozy_face: ):

Screenshot_20241119_214356_Homey
Screenshot_20241119_214356_Homey1920×1200 239 KB

I used the Homey dashboard’s web widget, and the H.A. canvas-gauge-card, installable per HACS store.

click for white gauge code 
type: custom:canvas-gauge-card
entity: < your sensor entity here >
name: Energie gebruik (W)
card_height: 200
shadow_height: 10%
font_size: 0.9em
font_color: "#000"
shadow_bottom: 0
gauge:
  type: radial-gauge
  width: 150
  height: 150
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: -7000
  maxValue: 4000
  startAngle: 45
  ticksAngle: 275
  valueBox: true
  majorTicks:
    - "-7000"
    - "-6000"
    - "-5000"
    - "-4000"
    - "-3000"
    - "-2000"
    - "-1000"
    - "0"
    - "1000"
    - "2000"
    - "3000"
    - "4000"
  minorTicks: 2
  strokeTicks: true
  highlights:
    - from: -7000
      to: 0
      color: lightgreen
    - from: 0
      to: 500
      color: yellow
    - from: 500
      to: 4000
      color: darkorange
  colorPlate: "#ddd"
  borders: false
  needleType: arrow
  needleStart: 30
  needleEnd: 55
  needleWidth: 4
  needleCircleSize: 12
  needleCircleOuter: true
  needleCircleInner: false
  animationDuration: 1500
  animationRule: linear

For the black gauge I used the ‘Buienradar’ integration. This gauge translates wind angle degrees to wind directions:

click for black gauge code 
type: custom:canvas-gauge-card
entity: sensor.buienradar_wind_direction_azimuth
gauge:
  type: radial-gauge
  width: 150
  height: 150
  minValue: 0
  maxValue: 360
  majorTicks:
    - "N"
    - NNO
    - "NO"
    - ONO
    - O
    - OZO
    - ZO
    - ZZO
    - Z
    - ZZW
    - ZW
    - WZW
    - W
    - WNW
    - NW
    - NNW
    - "N"
  minorTicks: 0
  ticksAngle: 360
  startAngle: 180
  strokeTicks: false
  highlights: false
  colorPlate: "#222"
  colorMajorTicks: "#f5f5f5"
  colorMinorTicks: "#ddd"
  colorNumbers: "#ccc"
  colorNeedle: yellow
  colorNeedleEnd: rgba(255, 160, 122, .9)
  valueBox: false
  valueTextShadow: false
  colorCircleInner: "#fff"
  colorNeedleCircleOuter: "#ccc"
  needleCircleSize: 12
  needleCircleOuter: false
  animationRule: linear
  needleType: arrow
  needleStart: 20
  needleEnd: 50
  needleWidth: 5
  title: WIND
  borders: true
  borderInnerWidth: 0
  borderMiddleWidth: 0
  borderOuterWidth: 8
  colorBorderOuter: "#ccc"
  colorBorderOuterEnd: "#ccc"
  colorNeedleShadowDown: "#222"
  borderShadowWidth: 5
  animationDuration: 2000
5 Likes