Lovelace: Button card

Share your Projects! Dashboards & Frontend
5395

here you go:

  custom_fields:
    info: &info_light
      >
        [[[ if (entity.state == 'on' && entity.attributes.brightness) {
            const brightness = Math.round(entity.attributes.brightness/2.54);
            const radius = 20.5; const circumference = radius * 2 * Math.PI;
            return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
            stroke="var(--active-color)" stroke-width="2" fill="none"
            style="transform: rotate(-90deg); transform-origin: 50% 50%;
            stroke-dasharray: ${circumference};
            stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
            <text x="50%" y="54%" fill="black" font-size="16" font-weight= "bold"
            text-anchor="middle" alignment-baseline="middle">
            ${brightness}<tspan font-size="10">%</tspan></text></svg>`;} ]]]

  styles:
    custom_fields:
      info: &circle_pos
        - position: absolute
        - right: 5%
        - top: 10%
        - width: 30%
5 Likes