# Showcase your Dashboard

**URL:** <https://community.homey.app/t/showcase-your-dashboard/116965>\
**Category:** Dashboards\
**Created:** [September 30, 2024, 12:23pm UTC](https://community.homey.app/t/showcase-your-dashboard/116965 "2024-09-30T12:23:19Z")\
**Posts on this page:** 1\
**Showing post:** 141

<div class="post-metadata">

**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\
**Post date:** [November 20, 2024, 1:57am UTC](https://community.homey.app/t/showcase-your-dashboard/116965/141 "2024-11-20T01:57:32Z")

</div>

‘Old fashioned’ gauches from Home Assistant (guide [here](https://community.homey.app/t/tutorial-pro-how-to-integrate-home-assistant-with-homey-pro/92641))

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

 ![Screenshot_20241119_214356_Homey](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/e/9e940fdb326acbca34d6c977b9595376adfe7fe7.jpeg)

I used the Homey dashboard’s web widget, and the H.A. [canvas-gauge-card](https://github.com/custom-cards/canvas-gauge-card), installable per [HACS store](https://hacs.xyz/docs/use/download/download/).

> **click for white gauge code**
>
> ```auto
> 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**
>
> ```auto
> 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
> 
> ```

---

_[View the full topic](https://community.homey.app/t/showcase-your-dashboard/116965)._