Showcase your Dashboard

How did you got 4 columns?

Hi Peter,

how did you get the day ahead prices into your dashboard?

Thanks
Han

The Power By The Hour app produces images that can be used in the Dashboard, Today, Tomorrow or Next Hours.

Thanks. Yes, I also installed this app and I know that the pictures can be seen in the device settings . But up to now I’ve not been able to include them in Dashboards.

Is it a picture which I need to update every day manually or is it a web-api? As far as I’ve seen there is no app-widget of Power by the hour!?

The graph is a cam image, should auto refresh.
So pick the ‘cam’ widget, and select the PbtH ‘cam’

Eh, when I select the cam widget it only shows my Reolink Doorbell, no PBTH devices. I guess the widget only shows ‘cam’ for certain PBTH devices.

Just a check, did you create a Device for PBTH?

Ah, Since I do not have real Cameras, I never thought about to look into the cam-widget.

Thanks, it works.

1 Like

Yes, I have a P1 meter and log both gas and electricity via a PBTH devise:

1 Like

IMG_0701

Latest version of Homey dashboards running on an old iPad Air 2 mounted in the kitchen. Power, current room temps, weather with a outside temp sensor combined with a 7-day forecast.
Stream from the local beach, a bit to dark and cold atm :grinning:

Using the Spotify beta app to play music as this is not yet supported as a speaker.

All those widgets are web-based using the local api integration running on a local raspi apache server.

6 Likes

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

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

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

How did you manage to put cards from HA on homey dash? Via iframes?
Thanks

Yes. Via iframes in node-red and show them in the web-widget from homey dashboard.

Is it possible to put any card from HA in an iframe, how you get the url card from HA to put in iframe in homey?

In my case i made a dashboard in Home assistant with one single device (mediaplayer) and hide the top- and sidebar. Load it first in a iframe is not necessary. You can past the adress right in the web widget.

1 Like

Nice trick.
I think i will start working on a floorplanner a pass it to Homey like this (will try at least).

Thanks :slight_smile:

EDIT:
I can have an apple tv widget now :smiley:
Thanks for the tip Peter :slight_smile:

1 Like

Hi @Peter_Kawa, you mentioned this post of yours about gauges in the Homey Slack community and suggested I share an update here as well.

I’m currently developing an app to display gauges on your dashboard.

Please stay tuned for updates in this topic:

4 Likes

Yeah these are really cool gauges! I’m sure this is a must have for any dashboard.

3 Likes

Took full advantage of the new Energy widgets. :nerd_face:

9 Likes

And then, with the (hopefully) upcoming dynamic view, hide the green ones :smiling_face_with_three_hearts:

5 Likes