diameter in % vh or even dvh

[Forsskieken]

Hi there,

I'm running into trouble with my card that I can't set the diameter in % vh or dvh. If only it would accept a var value....

In my code I'm trying to scale the clock depending on a device it's shown.
Like deskop, Nest, Pixel7

The AI's let me run in circles

type: custom:mod-card
view_layout:
  grid-area: main
style:
  .: >
    ha-card {
      width: var(--clock-size);
      height: var(--clock-size);
      border-radius: 16px;
      padding: 0;
      margin: 0 auto;
      box-sizing: border-box;
      overflow: hidden;
      height: 100%;
      width: 100%;
      /* Responsive max dimensions */
     /* max-width: 100%;*/
      /*max-height: 100%;*/
    } canvas {
      width: 100% !important;
      height: 100% !important;
    } @media (min-width: 1024px) {
      ha-card {
        max-width: 800px;
        max-height: 500px;
        **--clock-size: 500px;**
      }
    }

    @media (min-width: 900px) and (max-height: 650px) and (orientation:
    landscape) {
      ha-card {
        max-width: 700px;
        max-height: 400px;
        **--clock-size: 440px;**
      }
    }

    @media (max-width: 950px) and (max-height: 500px) and (orientation:
    landscape) {
      ha-card {
        max-width: 500px;
        max-height: 240px;
        **--clock-size: 250px;**
      }
    }

    @media (max-width: 600px) and (orientation: portrait) {
      ha-card {
        max-width: 350px;
        max-height: 250px;
      }
    }
card:
  type: custom:state-switch
  entity: input_select.button_nest
  default: Clock
  states:
    Voordeur:
      type: custom:webrtc-camera
      url: Hoofdingang_sub
      mode: webrtc
      media: video
    Poortje:
      type: custom:webrtc-camera
      url: Poortje
      mode: webrtc
      media: video
    Wachtkamer:
      type: custom:webrtc-camera
      url: rtsp://admin:95defgh65@192.168.4.33:554/h264Preview_01_main
      mode: webrtc
      media: video
    Clock:
      type: custom:analog-clock
      hide_secondHand: false
      locale: sv-SE
      diameter: 100%
      color_hourhand: "#326ba8"
      color_minutehand: "#3273a8"
      color_secondhand: "#e74c3c"
      color_digitaltime: "#CCCCCC"
      color_facedigits: "#a83832"
      color_ticks: Silver
      dateformat: mmm dd yyyy

[tomasrudh]

Hello, can you please elaborate on how you want this to work? You want to be able to set diameter in percent? Like:

type: "custom:analog-clock"
diameter: 50%

If so, percent of what? And what is 'vh' and 'dvh'?

Please give me a configuration example, and an explanation how you expect it to work.

Also, the pull request you suggest has a lot more changes than just allowing percent, what does the rest do?

[Forsskieken]

Hi Thomas, Below is the code I'm using in home assistant. I use a var(--clock-size) type: custom:analog-clock view_layout: grid-area: main card_mod: style: | ha-card { background: transparent; box-shadow: none; padding: 0; z-index: 1; top: var(--main-top); } hide_secondHand: false locale: sv-SE diameter: var(--clock-size) color_hourhand: White color_minutehand: White color_secondhand: '#e74c3c' color_digitaltime: White color_facedigits: '#a83832' color_ticks: White color_background: transparent dateformat: mmm dd yyyy As I look at the clock on various screens Pixel 7, Nest Hub 2 and desktop a fixed px doesn't work. using a var (var(--clock-size)) like I do now neither . vh, vw,dvh and dvw are explained here.. https://www.terluinwebdesign.nl/en/blog/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/ the clock I' using now is here.. github.com/Forsskieken/analogclock/blob/main/dist/analogclock.js Op zo 11 jan 2026 om 16:36 schreef Tomas Rudh ***@***.***>:

…

*tomasrudh* left a comment (tomasrudh/analogclock#41) <#41 (comment)> Hello, can you please elaborate on how you want this to work? You want to be able to set diameter in percent? Like: type: "custom:analog-clock" diameter: 50% If so, percent of what? And what is 'vh' and 'dvh'? Please give me a configuration example, and an explanation how you expect it to work. Also, the pull request you suggest has a lot more changes than just allowing percent, what does the rest do? — Reply to this email directly, view it on GitHub <#41 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAXGOANENSV3B55U3OGK3KD4GJUWHAVCNFSM6AAAAACLQPPA4OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTOMZUHAZDQNZZGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>