Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SEGARC value indicator #175

Open
jwaz73 opened this issue Dec 23, 2022 · 12 comments
Open

SEGARC value indicator #175

jwaz73 opened this issue Dec 23, 2022 · 12 comments
Labels
enhancement New feature or request good first issue Good for newcomers tool/segmented-arc About the segmented arc tool

Comments

@jwaz73
Copy link

jwaz73 commented Dec 23, 2022

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
@jwaz73 jwaz73 added the enhancement New feature or request label Dec 23, 2022
@github-actions
Copy link

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

@jwaz73
Copy link
Author

jwaz73 commented Feb 18, 2023

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 AmoebeLabs added tool/segmented-arc About the segmented arc tool good first issue Good for newcomers labels Apr 30, 2023
@AmoebeLabs
Copy link
Owner

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
Copy link
Author

jwaz73 commented May 18, 2023

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
Copy link

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
Copy link
Author

jwaz73 commented Jan 1, 2024

@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
Copy link

ArtMel1998 commented Jan 1, 2024 via email

@ArtMel1998
Copy link

ArtMel1998 commented Jan 3, 2024 via email

@jwaz73
Copy link
Author

jwaz73 commented Jan 3, 2024

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
Copy link

ArtMel1998 commented Jan 5, 2024 via email

@ArtMel1998
Copy link

ArtMel1998 commented Jan 7, 2024 via email

@jwaz73
Copy link
Author

jwaz73 commented Jan 8, 2024

That's great, Art! Good Job!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers tool/segmented-arc About the segmented arc tool
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@AmoebeLabs @jwaz73 @ArtMel1998