search

AmoebeLabs / swiss-army-knife-card

The versatile custom Swiss Army Knife card for Home Assistant allows you to create your unique visualization using several graphical tools, styling options and animations.
236 stars 20 forks source link

SEGARC value indicator #175

Open jwaz73 opened 1 year ago

jwaz73 commented 1 year ago

The Problem To Be Solved

I have spent the last couple days looking for how to do this and haven't been successful. I'm looking for a way to have the SEGARC tool indicate the current value only and not fill the arc from the min value to the current value.

Additional background:

An example of this use case would be a wind direction indicator. Have the SEGARC tool indicate just the current value that would correspond to the current wind heading. For a sensor value of 45 the indicator would just position itself at the 45 degree position on the arc.

Related Issues (if any)

(Optional): Suggested Solution

One solution could be to only fill the portion of the SEGARC corresponding to the actual sensor value + and - 2. For example, a sensor value of 45 would cause the arc to fill from 43 to 47.

Another solution could be to position a filled circle/polygon along the SEGARC centered on the sensor value. Here is a picture of what I'm thinking of. This is from the LCD display that came with my weather station. IMG_0116

(Optional): Alternative Solutions

github-actions[bot] commented 1 year ago

Thank you for creating your first issue for the Swiss Army Knife custom card!

jwaz73 commented 1 year ago

After experimenting with the circle slider a bit I achieved the effect I was looking for.

E9F6260F-5FB6-4476-B42E-05790BDECD56

The only question I have left is if it’s possible to disable the circle slider’s response to touch. I have tried setting the drag and touch actions to none but I can still drag the thumb around the circle, it just doesn’t do anything. Refreshing the page resets the value that is displayed.

AmoebeLabs commented 1 year ago

The enhancement is on my list. Thanks!

After experimenting with the circle slider a bit I achieved the effect I was looking for.

That is a nice card, and creative thinking to create a solution 👍

The only question I have left is if it’s possible to disable the circle slider’s response to touch. I have tried setting the drag and touch actions to none but I can still drag the thumb around the circle, it just doesn’t do anything. Refreshing the page resets the value that is displayed.

That should be a bug. I will check that one. If you don't have actions defined, it should not have any interaction.

You could fix this yourself though by setting a CSS value on the slider: pointer-events: none. That completely disables events.

Let me know if that at least helps your issue.

jwaz73 commented 1 year ago

Based on your suggestion and after some experimenting I found that setting the pointer-events: none value on the thumb: did the trick. Thanks for the suggestion!

ArtMel1998 commented 9 months ago

After experimenting with the circle slider a bit I achieved the effect I was looking for.

E9F6260F-5FB6-4476-B42E-05790BDECD56

The only question I have left is if it’s possible to disable the circle slider’s response to touch. I have tried setting the drag and touch actions to none but I can still drag the thumb around the circle, it just doesn’t do anything. Refreshing the page resets the value that is displayed.

Hello jwaz73,

Would you mind sharing your code for this card? so others can get inspiration out of this.

Thanks in advance.

jwaz73 commented 9 months ago

@ArtMel1998 Absolutely! The yaml file for the template to create the standalone 'compass' gauge is attached to this reply (as a .txt file). twc-toolset-compas.txt

Additionally, I'm working on a card that overlays the circslider on a segarc to create a combo gauge. The segarc is the wind speed and the circslider is the wind direction. image

Here is the working yaml I have so far...

      # --- Wind Card
      - type: custom:swiss-army-knife-card
        aspectratio: 2/1.5
        disable_card: false
        dev:
          debug: false
        entities:
          # --- 0 Wind Speed
          - entity: sensor.wind_speed
            decimals: 1
            icon: mdi:weather-windy
            area: Wind Speed
          # --- 1 Wind Direction
          - entity: sensor.wind_dir
            icon: mdi:compass-outline
            area: Wind Direction
          # --- 2 Average Gust
          - entity: sensor.wind_gust
            decimals: 1
            icon: mdi:weather-windy
            area: Avg Gust
          # --- Max Gust
          - entity: sensor.max_gust
            decimals: 1
            icon: mdi:weather-dust
            area: Max Gust
        layout:
          toolsets:
            # --- Card TopBar
            - toolset: topbar
              template:
                name: ts-topbar
                variables:
                  - var-cx: 100
                  - var-cy: 10
                  - var-text: "Wind Speed & Direction"
                  - var-text-cx: -40
                  - var-rectex-width: 200
                  - var-rectex-height: 20
            # --- Wind Speed & Direction Guage Set
            - toolset: wind_speed_direction
              position:
                cx: 100
                cy: 75
              tools:
                # --- Wind Speed Guage
                - type: segarc
                  position:
                    cx: 50
                    cy: 50
                    start_angle: -175
                    end_angle: 175
                    width: 6
                    radius: 45
                  entity_index: 0
                  scale:
                    min: 0
                    max: 100
                    offset: 2
                  show:
                    scale: true
                    style: colorstops
                  segments:
                    colorstops:
                      template:
                        name: cs-wind
                  styles:
                    background:
                      fill: var(--theme-sys-elevation-surface-neutral7)
                      opacity: 1
                      filter: url(#is-1)
                # --- Wind Direction Guage
                - type: circslider
                  position:
                    cx: 50
                    cy: 50
                    start_angle: 0
                    end_angle: 360
                    radius: 45
                    thumb:
                      width: 5
                      height: 15
                      radius: 2
                  entity_index: 1
                  show:
                    uom: none
                  scale:
                    min: 0
                    max: 360
                    step: 1
                  styles:
                    circslider:
                      stroke: none
                      pointer-events: none
                    active:
                      stroke: none
                      pointer-events: none
                    track:
                      stroke: none
                      pointer-events: none
                    thumb:
                      fill: var(--theme-sys-color-primary)
                      fill-opacity: 0.7
                      pointer-events: none
                    capture:
                      fill: var(--theme-sys-color-primary)
                      fill-opacity: 0.0
                      pointer-events: none
                # --- Wind Speed (Numbers)
                - type: state
                  position:
                    cx: 50
                    cy: 50
                  entity_index: 0
                  show:
                    uom: bottom
                  styles:
                    state:
                      font-size: 20em
                      font-weight: 700
                      text-anchor: middle
                      fill: var(--primary-text-color)
                    uom:
                      font-weight: 700
                      fill: var(--primary-text-color)
                # --- Wind Direction (Cardinal)
                - type: state
                  position:
                    cx: 50
                    cy: 30
                  entity_index: 1
                  derived_entity:
                    state: |
                      [[[
                        const DIRECTION = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW", ];
                        const dir = Math.floor((state / 22.5) + .5);
                        return DIRECTION[(dir % 16)];
                      ]]]
                  show:
                    uom: none
                  styles:
                    state:
                      font-size: 10em
                      font-weight: 700
                      text-anchor: middle
                      fill: var(--primary-text-color)
                # --- Average Gust
                - type: area
                  position:
                    cx: -22
                    cy: 45
                  entity_index: 2
                  styles:
                    area:
                      font-size: 8em
                      font-weight: 700
                      text-anchor: middle
                      fill: var(--primary-text-color)
                - type: state
                  position:
                    cx: -22
                    cy: 55
                  entity_index: 2
                  show:
                    uom: none
                  styles:
                    state:
                      font-size: 10em
                      font-weight: 700
                      text-anchor: middle
                      fill: var(--primary-text-color)
                # --- Max Gust
                - type: area
                  position:
                    cx: 122
                    cy: 45
                  entity_index: 3
                  styles:
                    area:
                      font-size: 8em
                      font-weight: 700
                      text-anchor: middle
                      fill: var(--primary-text-color)
                - type: state
                  position:
                    cx: 122
                    cy: 55
                  entity_index: 3
                  show:
                    uom: none
                  styles:
                    state:
                      font-size: 10em
                      font-weight: 700
                      text-anchor: middle
                      fill: var(--primary-text-color)

Here is the template I use for the TopBar for the cards in the example above:

ts-topbar:
  template:
    type: toolset
    defaults:
      - var-cx: 50
      - var-cy: 50
      - var-text: "Change Me"
      - var-text-cx: 50
      - var-font-size: 10em
      - var-rectex-width: 100
      - var-rectex-height: 100

  toolset:
    toolset: topbar
    position:
      cx: '[[var-cx]]'
      cy: '[[var-cy]]'
    tools:
      - type: rectex
        id: 0
        position:
          cx: 50
          cy: 50
          width: '[[var-rectex-width]]'
          height: '[[var-rectex-height]]'
          radius:
            all: 0
        styles:
          rectex:
            fill: var(--theme-sys-palette-secondary97)
      - type: text
        id: 1
        position:
          cx: '[[var-text-cx]]'
          cy: 50
        text: '[[var-text]]'
        styles:
          text:
            font-size: '[[var-font-size]]'
            font-weight: 700
            text-anchor: start
            fill: var(--theme-sys-palette-secondary70)

Happy New Year!

-James

ArtMel1998 commented 9 months ago

Hello James,

Have a blessed 2024. Thank you for sharing your code with me. I will immediately make a card with it. :)

Kind regards,

Art.

On Mon, Jan 1, 2024 at 7:43 AM James Wood @.***> wrote:

@ArtMel1998 https://github.com/ArtMel1998 Absolutely! The yaml file for the template to create the standalone 'compass' gauge is attached to this reply (as a .txt file). twc-toolset-compas.txt https://github.com/AmoebeLabs/swiss-army-knife-card/files/13803709/twc-toolset-compas.txt

Additionally, I'm working on a card that overlays the circslider on a segarc to create a combo gauge. The segarc is the wind speed and the circslider is the wind direction. image.png (view on web) https://github.com/AmoebeLabs/swiss-army-knife-card/assets/35283565/22819eba-f2b3-4093-a181-aca04d7ecb80

Here is the working yaml I have so far...

  # --- Wind Card
  - type: custom:swiss-army-knife-card
    aspectratio: 2/1.5
    disable_card: false
    dev:
      debug: false
    entities:
      # --- 0 Wind Speed
      - entity: sensor.wind_speed
        decimals: 1
        icon: mdi:weather-windy
        area: Wind Speed
      # --- 1 Wind Direction
      - entity: sensor.wind_dir
        icon: mdi:compass-outline
        area: Wind Direction
      # --- 2 Average Gust
      - entity: sensor.wind_gust
        decimals: 1
        icon: mdi:weather-windy
        area: Avg Gust
      # --- Max Gust
      - entity: sensor.max_gust
        decimals: 1
        icon: mdi:weather-dust
        area: Max Gust
    layout:
      toolsets:
        # --- Card TopBar
        - toolset: topbar
          template:
            name: ts-topbar
            variables:
              - var-cx: 100
              - var-cy: 10
              - var-text: "Wind Speed & Direction"
              - var-text-cx: -40
              - var-rectex-width: 200
              - var-rectex-height: 20
        # --- Wind Speed & Direction Guage Set
        - toolset: wind_speed_direction
          position:
            cx: 100
            cy: 75
          tools:
            # --- Wind Speed Guage
            - type: segarc
              position:
                cx: 50
                cy: 50
                start_angle: -175
                end_angle: 175
                width: 6
                radius: 45
              entity_index: 0
              scale:
                min: 0
                max: 100
                offset: 2
              show:
                scale: true
                style: colorstops
              segments:
                colorstops:
                  template:
                    name: cs-wind
              styles:
                background:
                  fill: var(--theme-sys-elevation-surface-neutral7)
                  opacity: 1
                  filter: url(#is-1)
            # --- Wind Direction Guage
            - type: circslider
              position:
                cx: 50
                cy: 50
                start_angle: 0
                end_angle: 360
                radius: 45
                thumb:
                  width: 5
                  height: 15
                  radius: 2
              entity_index: 1
              show:
                uom: none
              scale:
                min: 0
                max: 360
                step: 1
              styles:
                circslider:
                  stroke: none
                  pointer-events: none
                active:
                  stroke: none
                  pointer-events: none
                track:
                  stroke: none
                  pointer-events: none
                thumb:
                  fill: var(--theme-sys-color-primary)
                  fill-opacity: 0.7
                  pointer-events: none
                capture:
                  fill: var(--theme-sys-color-primary)
                  fill-opacity: 0.0
                  pointer-events: none
            # --- Wind Speed (Numbers)
            - type: state
              position:
                cx: 50
                cy: 50
              entity_index: 0
              show:
                uom: bottom
              styles:
                state:
                  font-size: 20em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
                uom:
                  font-weight: 700
                  fill: var(--primary-text-color)
            # --- Wind Direction (Cardinal)
            - type: state
              position:
                cx: 50
                cy: 30
              entity_index: 1
              derived_entity:
                state: |
                  [[[
                    const DIRECTION = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW", ];
                    const dir = Math.floor((state / 22.5) + .5);
                    return DIRECTION[(dir % 16)];
                  ]]]
              show:
                uom: none
              styles:
                state:
                  font-size: 10em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            # --- Average Gust
            - type: area
              position:
                cx: -22
                cy: 45
              entity_index: 2
              styles:
                area:
                  font-size: 8em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            - type: state
              position:
                cx: -22
                cy: 55
              entity_index: 2
              show:
                uom: none
              styles:
                state:
                  font-size: 10em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            # --- Max Gust
            - type: area
              position:
                cx: 122
                cy: 45
              entity_index: 3
              styles:
                area:
                  font-size: 8em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            - type: state
              position:
                cx: 122
                cy: 55
              entity_index: 3
              show:
                uom: none
              styles:
                state:
                  font-size: 10em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)

Here is the template I use for the TopBar for the cards in the example above:

ts-topbar: template: type: toolset defaults:

  • var-cx: 50
  • var-cy: 50
  • var-text: "Change Me"
  • var-text-cx: 50
  • var-font-size: 10em
  • var-rectex-width: 100

  • var-rectex-height: 100

    toolset: toolset: topbar position: cx: '[[var-cx]]' cy: '[[var-cy]]' tools:

  • type: rectex id: 0 position: cx: 50 cy: 50 width: '[[var-rectex-width]]' height: '[[var-rectex-height]]' radius: all: 0 styles: rectex: fill: var(--theme-sys-palette-secondary97)
  • type: text id: 1 position: cx: '[[var-text-cx]]' cy: 50 text: '[[var-text]]' styles: text: font-size: '[[var-font-size]]' font-weight: 700 text-anchor: start fill: var(--theme-sys-palette-secondary70)

Happy New Year!

-James

— Reply to this email directly, view it on GitHub https://github.com/AmoebeLabs/swiss-army-knife-card/issues/175#issuecomment-1873187259, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY6IKWCV52PUZWOM3O6NOFLYMJLHTAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZTGE4DOMRVHE . You are receiving this because you were mentioned.Message ID: @.***>

ArtMel1998 commented 9 months ago

Hello James,

So sorry to bother you but there is something I don't understand. Most I do but I was expecting that the needle should turn with te wind direction over the circslider and there would be some text which tells the wind direction. I took out all code (for now) that is irrelivant (i think :)). The needle stucks on North and there is no text with the wind direction. Maybe you can help and check my code please?

Kind regards,

Arthur

 - type: horizontal-stack
  cards:
    # Windrichting
    - type: custom:swiss-army-knife-card

      entities:
        - entity: sensor.wind_direction
# Index ID = 0
          icon: mdi:compass-outline
          area: direction

      aspectratio: 1/1

      disable_card: false

      layout:
        styles:
          card:
          toolsets:
            filter: url(#nm-1)

        toolsets:

          # Wind Direction
          - toolset: wind_direction
            position:
              cx: 50
              cy: 50
            tools:

              - type: segarc
                position:
                  cx: 50
                  cy: 50
                  start_angle: 0
                  end_angle: 360
                  width: 3
                  radius: 30
                entity_index: 0
                scale:
                  min: 0
                  max: 120
                  offset: 2
                show:
                  scale: true
                  style: colorstops
                segments:
                  colorstops:
                    gap: 0
                    colors:
                      0: '#C2C2C0'
                      1: '#27CD3E'
                      40: '#FFC300'
                      75: '#F49E29'
                      100: '#CA1021'
                styles:
                  background:
                    fill: var(--theme-sys-elevation-surface-neutral7)
                    opacity: 1
                    filter: url(#is-1)

              # Slider should change with direction
              - type: circslider
                position:
                  cx: 50
                  cy: 50
                  start_angle: 0
                  end_angle: 360
                  radius: 33
                  thumb:
                    width: 1.5
                    height: 8
                    radius: 1
                entity_index: 0
                show:
                  uom: none
                scale:
                  min: 0
                  max: 360
                  step: 1
                styles:
                  circslider:
                    stroke: none
                    pointer-events: none
                  active:
                    stroke: none
                    pointer-events: none
                  track:
                    stroke: none
                    pointer-events: none
                  thumb:
                    #fill: var(--theme-sys-color-primary)
                    fill: grey
                    fill-opacity: 1
                    pointer-events: none
                  capture:
                    #fill: var(--theme-sys-color-primary)
                    fill: yellow
                    fill-opacity: 0
                    pointer-events: none

              # --- Wind Direction (Cardinal)
              - type: state
                position:
                  cx: 50
                  cy: 50
                entity_index: 0
                derived_entity:
                  state: |
                    [[[
                      const DIRECTION = ["North", "NNE", "NE", "ENE",

"East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW", ]; const dir = Math.floor((state / 22.5) + .5); return DIRECTION[(dir % 16)]; ]]] show: uom: none styles: state: font-size: 10em font-weight: 700 text-anchor: middle

fill: var(--primary-text-color)

                    fill: '#FFFFFF'

On Mon, Jan 1, 2024 at 7:43 AM James Wood @.***> wrote:

@ArtMel1998 https://github.com/ArtMel1998 Absolutely! The yaml file for the template to create the standalone 'compass' gauge is attached to this reply (as a .txt file). twc-toolset-compas.txt https://github.com/AmoebeLabs/swiss-army-knife-card/files/13803709/twc-toolset-compas.txt

Additionally, I'm working on a card that overlays the circslider on a segarc to create a combo gauge. The segarc is the wind speed and the circslider is the wind direction. image.png (view on web) https://github.com/AmoebeLabs/swiss-army-knife-card/assets/35283565/22819eba-f2b3-4093-a181-aca04d7ecb80

Here is the working yaml I have so far...

  # --- Wind Card
  - type: custom:swiss-army-knife-card
    aspectratio: 2/1.5
    disable_card: false
    dev:
      debug: false
    entities:
      # --- 0 Wind Speed
      - entity: sensor.wind_speed
        decimals: 1
        icon: mdi:weather-windy
        area: Wind Speed
      # --- 1 Wind Direction
      - entity: sensor.wind_dir
        icon: mdi:compass-outline
        area: Wind Direction
      # --- 2 Average Gust
      - entity: sensor.wind_gust
        decimals: 1
        icon: mdi:weather-windy
        area: Avg Gust
      # --- Max Gust
      - entity: sensor.max_gust
        decimals: 1
        icon: mdi:weather-dust
        area: Max Gust
    layout:
      toolsets:
        # --- Card TopBar
        - toolset: topbar
          template:
            name: ts-topbar
            variables:
              - var-cx: 100
              - var-cy: 10
              - var-text: "Wind Speed & Direction"
              - var-text-cx: -40
              - var-rectex-width: 200
              - var-rectex-height: 20
        # --- Wind Speed & Direction Guage Set
        - toolset: wind_speed_direction
          position:
            cx: 100
            cy: 75
          tools:
            # --- Wind Speed Guage
            - type: segarc
              position:
                cx: 50
                cy: 50
                start_angle: -175
                end_angle: 175
                width: 6
                radius: 45
              entity_index: 0
              scale:
                min: 0
                max: 100
                offset: 2
              show:
                scale: true
                style: colorstops
              segments:
                colorstops:
                  template:
                    name: cs-wind
              styles:
                background:
                  fill: var(--theme-sys-elevation-surface-neutral7)
                  opacity: 1
                  filter: url(#is-1)
            # --- Wind Direction Guage
            - type: circslider
              position:
                cx: 50
                cy: 50
                start_angle: 0
                end_angle: 360
                radius: 45
                thumb:
                  width: 5
                  height: 15
                  radius: 2
              entity_index: 1
              show:
                uom: none
              scale:
                min: 0
                max: 360
                step: 1
              styles:
                circslider:
                  stroke: none
                  pointer-events: none
                active:
                  stroke: none
                  pointer-events: none
                track:
                  stroke: none
                  pointer-events: none
                thumb:
                  fill: var(--theme-sys-color-primary)
                  fill-opacity: 0.7
                  pointer-events: none
                capture:
                  fill: var(--theme-sys-color-primary)
                  fill-opacity: 0.0
                  pointer-events: none
            # --- Wind Speed (Numbers)
            - type: state
              position:
                cx: 50
                cy: 50
              entity_index: 0
              show:
                uom: bottom
              styles:
                state:
                  font-size: 20em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
                uom:
                  font-weight: 700
                  fill: var(--primary-text-color)
            # --- Wind Direction (Cardinal)
            - type: state
              position:
                cx: 50
                cy: 30
              entity_index: 1
              derived_entity:
                state: |
                  [[[
                    const DIRECTION = ["North", "NNE", "NE", "ENE", "East", "ESE", "SE", "SSE", "South", "SSW", "SW", "WSW", "West", "WNW", "NW", "NNW", ];
                    const dir = Math.floor((state / 22.5) + .5);
                    return DIRECTION[(dir % 16)];
                  ]]]
              show:
                uom: none
              styles:
                state:
                  font-size: 10em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            # --- Average Gust
            - type: area
              position:
                cx: -22
                cy: 45
              entity_index: 2
              styles:
                area:
                  font-size: 8em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            - type: state
              position:
                cx: -22
                cy: 55
              entity_index: 2
              show:
                uom: none
              styles:
                state:
                  font-size: 10em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            # --- Max Gust
            - type: area
              position:
                cx: 122
                cy: 45
              entity_index: 3
              styles:
                area:
                  font-size: 8em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)
            - type: state
              position:
                cx: 122
                cy: 55
              entity_index: 3
              show:
                uom: none
              styles:
                state:
                  font-size: 10em
                  font-weight: 700
                  text-anchor: middle
                  fill: var(--primary-text-color)

Here is the template I use for the TopBar for the cards in the example above:

ts-topbar: template: type: toolset defaults:

  • var-cx: 50
  • var-cy: 50
  • var-text: "Change Me"
  • var-text-cx: 50
  • var-font-size: 10em
  • var-rectex-width: 100

  • var-rectex-height: 100

    toolset: toolset: topbar position: cx: '[[var-cx]]' cy: '[[var-cy]]' tools:

  • type: rectex id: 0 position: cx: 50 cy: 50 width: '[[var-rectex-width]]' height: '[[var-rectex-height]]' radius: all: 0 styles: rectex: fill: var(--theme-sys-palette-secondary97)
  • type: text id: 1 position: cx: '[[var-text-cx]]' cy: 50 text: '[[var-text]]' styles: text: font-size: '[[var-font-size]]' font-weight: 700 text-anchor: start fill: var(--theme-sys-palette-secondary70)

Happy New Year!

-James

— Reply to this email directly, view it on GitHub https://github.com/AmoebeLabs/swiss-army-knife-card/issues/175#issuecomment-1873187259, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY6IKWCV52PUZWOM3O6NOFLYMJLHTAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZTGE4DOMRVHE . You are receiving this because you were mentioned.Message ID: @.***>

jwaz73 commented 9 months ago

Hey, Arthur! No problem at all, just be patient. I don't always have a lot of time to respond but I don't mind helping out.

To begin, I just want to confirm you have set the entity to be an entity that exists in your HA instance. The example I provided is just generic text I used to keep the actual names of entities from my instance private. Make sure you have replaced - entity: sensor.wind_direction with an actual sensor that exists in your HA instance. (I have an Ambient Weather station connected to my HA instance via local API.)

For the segarc tool, your configuration could be problematic. A wind direction sensor will return a state between 0 and 360 but the scale in your config is set from 0 to 120. This means that more than 50% of the values reported by the sensor could be out of the scale. In the example I provided, the segarc was used to display wind speed, not direction. For wind speed, 0 to 120 would be a valid range.

The configurations for the circslider and state tools look fine at first glance. Double-check your formatting (spacing/indention, etc.) to make sure it is correct.

If your sensor is correct and you are still having issues, I would locate the sensor on the states tab in the developer tools. This will show you real-time states from your active sensors and you can make sure the state being reported is what you expect.

I hope this helps!

-James

ArtMel1998 commented 9 months ago

Hello James,

No problem when it takes some time. The sensor names are correct (Dutch buitenradar)

Below is the full code of the card. Everything is correct now as far as I can see. I am not quit satisfied with the background image (N-O-Z-W) , not clean/sharp enough. The only thing I want is that the needle points to the right direction. (like in the custom: compass-card) For this card it sticks on North. f.y.i. the card is made with the position of our house in mind. In a later stadium I would like to add the position of the sun.

[image: afbeelding.png]

On Wed, Jan 3, 2024 at 7:44 PM James Wood @.***> wrote:

Hey, Arthur! No problem at all, just be patient. I don't always have a lot of time to respond but I don't mind helping out.

To begin, I just want to confirm you have set the entity to be an entity that exists in your HA instance. The example I provided is just generic text I used to keep the actual names of entities from my instance private. Make sure you have replaced

  • entity: sensor.wind_direction with an actual sensor that exists in your HA instance. (I have an Ambient Weather station connected to my HA instance via local API.)

For the segarc tool, your configuration could be problematic. A wind direction sensor will return a state between 0 and 360 but the scale in your config is set from 0 to 120. This means that more than 50% of the values reported by the sensor could be out of the scale. In the example I provided, the segarc was used to display wind speed, not direction. For wind speed, 0 to 120 would be a valid range.

The configurations for the circslider and state tools look fine at first glance. Double-check your formatting (spacing/indention, etc.) to make sure it is correct.

If your sensor is correct and you are still having issues, I would locate the sensor on the states tab in the developer tools. This will show you real-time states from your active sensors and you can make sure the state being reported is what you expect.

I hope this helps!

-James

— Reply to this email directly, view it on GitHub https://github.com/AmoebeLabs/swiss-army-knife-card/issues/175#issuecomment-1875808808, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY6IKWGANYB5MZRED3VTE63YMWRKLAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZVHAYDQOBQHA . You are receiving this because you were mentioned.Message ID: @.***>

ArtMel1998 commented 9 months ago

Hello James,

I got it working, thanks for you assistance. Below the code and the result.

Had to add a extra entity that gives the wind direction in degrees.

On Fri, Jan 5, 2024 at 2:10 PM Arthur en Imelda van Egmond < @.***> wrote:

Hello James,

No problem when it takes some time. The sensor names are correct (Dutch buitenradar)

Below is the full code of the card. Everything is correct now as far as I can see. I am not quit satisfied with the background image (N-O-Z-W) , not clean/sharp enough. The only thing I want is that the needle points to the right direction. (like in the custom: compass-card) For this card it sticks on North. f.y.i. the card is made with the position of our house in mind. In a later stadium I would like to add the position of the sun.

[image: afbeelding.png]

  • type: vertical-stack cards:

    • type: horizontal-stack cards:

      Windrichting en snelheid

      • type: custom:swiss-army-knife-card

        aspectratio: 1/1

        disable_card: false

        entities:

        • entity: sensor.wind_speed

          Index ID = 0

          decimals: 1 icon: mdi:windsock area: 'Windsnelheid'

        • entity: sensor.wind_direction

          Index ID = 1

          area: 'Windrichting'

        layout: styles: card: toolsets: filter: url(#nm-1)

        toolsets:

        Titlebalk

        • toolset: titlebar position: cx: 50 cy: 50 tools:

          • type: rectex id: 0 position: cx: 0 cy: 0 width: 200 height: 20 radius: all: 0 styles: rectex: fill: var(--primary-background-color)
          • type: text id: 1 position: cx: 5 cy: 5 text: 'Windrichting/snelheid' styles: text: font-size: 7em font-weight: 400 text-anchor: start fill: var(--primary-text-color)
          • type: icon id: 2 position: cx: 95 cy: 5 align: center icon_size: 10 entity_index: 0 styles: icon: fill: var(--primary-text-color) opacity: 0.7

          Circle

        • toolset: backgroud-circle position: cx: 50 cy: 50 tools:

          • type: 'circle' id: 0 position: cx: 50 cy: 55 radius: 44 styles: circle: opacity: 1 fill: var(--primary-background-color)

        • toolset: background-image position: cx: 50 cy: 55 tools:

          • type: 'usersvg' id: 2 position: cx: 50 cy: 50 height: 92 width: 92 style: 'images' images:

            Dark theme background image

            - default:

            /local/images/backgrounds/compass_edit_200px_dark-theme.png

            Light theme background image

            • default: /local/images/backgrounds/compass_edit_200px_light-theme.png

          Wind Speed & Direction Guage Set

        • toolset: wind_speed position: cx: 50 cy: 50 tools:

          Windsnelheid (gauge)

          • type: segarc position: cx: 50 cy: 55 start_angle: -135 end_angle: 225 width: 4 radius: 28 entity_index: 0 scale: min: 0 max: 120 offset: 2 show: scale: true style: colorstops segments: colorstops: gap: 0 colors: 0: '#C2C2C0' 1: '#27CD3E' 40: '#FFC300' 75: '#F49E29' 100: '#CA1021' styles: foreground: fill: var(--theme-gradient-color-01) opacity: 1 background: fill: var(--cs-theme-default-darken-15) filter: url(#is-1) opacity: 0.2

            Windrichting Gauge

          • type: circslider position: cx: 50 cy: 55 start_angle: -135 end_angle: 225 radius: 28 thumb: width: 1.5 height: 9 radius: 1 entity_index: 1 show: uom: none scale: min: 0 max: 360 step: 1 styles: circslider: stroke: none pointer-events: none active: stroke: none pointer-events: none track: stroke: none pointer-events: none thumb: fill: '#0000AE' fill-opacity: 0.9 pointer-events: none capture: fill: '#FFC300' fill-opacity: 0 pointer-events: none

            Windsnelheid in KM/H

          • type: state position: cx: 50 cy: 60 entity_index: 0 show: uom: bottom styles: state: font-size: 10em font-weight: 400 text-anchor: middle fill: var(--primary-text-color) uom: font-weight: 500 fill: var(--primary-text-color)

            Windrichting (Cardinal)

          • type: state position: cx: 50 cy: 55 entity_index: 1 derived_entity: state: | [[[ const DIRECTION = ["N", "NNO", "NO", "ONO", "O", "OZO", "ZO", "ZZO", "Z", "ZZW", "ZW", "WZW", "W", "WNW", "NW", "NNW", ]; const dir = Math.floor((state / 22.5) + .5); return DIRECTION[(dir % 16)]; ]]] show: uom: none styles: state: font-size: 10em font-weight: 400 text-anchor: middle fill: var(--primary-text-color)

            Windrichting in tekst

          • type: state position: cx: 50 cy: 45 entity_index: 1

            styles: state: font-size: 10em font-weight: 400 text-anchor: middle fill: var(--primary-text-color)

On Wed, Jan 3, 2024 at 7:44 PM James Wood @.***> wrote:

Hey, Arthur! No problem at all, just be patient. I don't always have a lot of time to respond but I don't mind helping out.

To begin, I just want to confirm you have set the entity to be an entity that exists in your HA instance. The example I provided is just generic text I used to keep the actual names of entities from my instance private. Make sure you have replaced

  • entity: sensor.wind_direction with an actual sensor that exists in your HA instance. (I have an Ambient Weather station connected to my HA instance via local API.)

For the segarc tool, your configuration could be problematic. A wind direction sensor will return a state between 0 and 360 but the scale in your config is set from 0 to 120. This means that more than 50% of the values reported by the sensor could be out of the scale. In the example I provided, the segarc was used to display wind speed, not direction. For wind speed, 0 to 120 would be a valid range.

The configurations for the circslider and state tools look fine at first glance. Double-check your formatting (spacing/indention, etc.) to make sure it is correct.

If your sensor is correct and you are still having issues, I would locate the sensor on the states tab in the developer tools. This will show you real-time states from your active sensors and you can make sure the state being reported is what you expect.

I hope this helps!

-James

— Reply to this email directly, view it on GitHub https://github.com/AmoebeLabs/swiss-army-knife-card/issues/175#issuecomment-1875808808, or unsubscribe https://github.com/notifications/unsubscribe-auth/AY6IKWGANYB5MZRED3VTE63YMWRKLAVCNFSM6AAAAAATIEMMZ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZVHAYDQOBQHA . You are receiving this because you were mentioned.Message ID: @.***>

jwaz73 commented 9 months ago

That's great, Art! Good Job!