Lovelace: Versatile Swiss Army Knife Custom Card

thanks for the little progress… when I get home I will try what you wrote…

image

hey guys. its about the “Haus zuerst” second one by the right side.
its possible to set the thumb on the left or right by the select section?

            tools:
              - type: switch
                position:
                  cx: 50
                  cy: 20
                  track:                    # Configure track part
                    radius: 1
                    width: 45                # Set width
                    height: 15                    
                  thumb:                    # Configure thumb part
                    width: 5                # Set width
                    height: 15               # Set height
                    radius: 1               # Set corner radius
                    offset: 2.5             # offset = width/2 for on/off move
                    orientation: 'horizontal'
                entity_index: 8
                animations:
                  - state: "Haus zuerst"
                    styles:
                      thumb:
                        --thumb-stroke: 'var(--primary-background-color)'
                        fill: green
                        
                  - state: "Batterie zuerst"
                    styles:
                      thumb:
                        --thumb-stroke: 'var(--primary-background-color)'
                        fill: green
                styles:
                  thumb:                    # Overwrite thumb setting
                    fill: var(--primary-text-color)
                    color: var(--primary-text-color)
              - type: state
                id: 1
                position:
                  cx: 50
                  cy: 38
                entity_index: 8
                styles:
                  state:
                    text-anchor: middle
                    font-size: 8em
                    font-weight: 300
                    fill: var(--primary-text-color)

kind regards guys

The switch tool is based on on/off states and does some transform under the hood.

But you can do that too (I hope):

  • transform: translateX(-4.5em) should move the thumb to the left,
  • and transform: translateX(+4.5em) to the right.

The value of 4.5em is calculated by the tool normally and depends on the size of the switch.

You probably have to play around a bit with that size to get the exact size.

1 Like

Thank you alot. That’s works great :+1:

1 Like

Note to Apple users.

Safari 17 - once again - managed to change the way rotation and scaling is handled :anger:

So example SAKE7 will show some problems. Also the rotated sparklines will not show up anymore, atvleast not in my example cards…

Annoying but sofar an annual event…

hi guys… I’ve done other checks and followed the @AmebeLabs process, but nothing to do… the situation remains unchanged. we even went from “i.setConfig is not a function” to “r.setConfig is not a function”. Unfortunately this binds me not to update any version of the SAK that it HAS… I must reluctantly say that if I can’t find a solution I will be forced to replace this card with another one that I have already found works… I’m really sorry to abandon it given which is a beautiful customization but not at all versatile for me… :sob:

Hello, Friends! I finally have some time to work on my HA setup again and I have been moving through making several improvements to my deployment.

I’m having an issue with coding a derived entity.
I’m trying to take the state of a sensor that reports absolute barometric pressure and convert it to relative barometric pressure. I have this formula:

P = P0 * exp(-g * M * (h - h0) / (R * T))

A full description of this formula is here.
(I know, it’s wikipedia… ugg.)

I’m not very good at javascript so I asked Chat-GPT to help me convert this to js:

function calculateRelativeBarometricPressure(P0, h, h0, T) {
  const g = 9.80665;
  const M = 0.0289644;
  const R = 8.3144598;
  const P = P0 * Math.exp(-g * M * (h - h0) / (R * T));
  return P;
}

I’ve tried many different attempts to get this to work but no luck yet. Here is what my last attempt looks like:

                  derived_entity: >
                    input: '[[[ return state; ]]]'
                    state: >
                      [[[
                        var g = 32.17405;
                        var M = 28.9644;
                        var R = 889494.596;
                        var h = 7550;
                        var T = 283.15;
                        var P0 = state;
                        var P = P0 * Math.exp(-g * M * h / (R * T));
                        return P;
                      ]]]

  • Note, the constants have been changed from the example to reflect imperial values instead of metric.
  • I omitted the h0 value as this is the target elevation value which I’m using sea level or zero. (h - 0 = h)

The result I keep getting is the same, nothing.

I’m fairly confident in the formula because doing the calculations by hand I get a result that does make sense for my current location.

I’m not at all confident in my javascript abilities. Based on my limited knowledge here this still seems like it should not be this complicated…

Suggestions and constructive comments are appreciated!

I found the problem… I don’t know how the ">" made it’s way to the line for the derived_entity…

Also, if anyone is interested, the following pulls the state of a different entity into this calculation:

var T = ((Number(states['sensor.my_outdoor_temp'].state) + 459.67) * 5) / 9;

The additional math is converting the Fahrenheit temperature to Kelvin.

Hey guys,
i learned a bit the last months and wanna go forward these days.
same problem again…
the slider_action not working on number

        slider_action:
          update_interval: 200
          service: number.set_value
          service_data:
            value: "20"

in development this code (with entity_id) is setting the value on 20

i used slider_actions: / user_actions - drag_action

i wanna set the slider value… i dont know how to do…

i learned about input_select to use service_data as data (in SAK calling parameter for your lights)
this code works great like the same in developer test

        user_actions:
          tap_action:
            haptic: selection
            actions:
              - action: call-service
                service: input_select.select_option
                service_data:
                  option: Aus

can you test something on numbers? is there a bug or am i still dump.

Kind regards.
SirUlbrich

I found a way to make this:


But i struggle to do what i want with the sparkline tool in the circular form… Do someone have a list of available options and how to configure them??

@AmoebeLabs

Don’t have much time to be busy on the project. But I notice my wall plug sensor cards are broken without doing anything except to normal HA updates.

Can you check it out if there is something changed and maybe is broken in this code?
This is a template I am using.

Al wall plug cards does not show up

wall_plug_sensor Card

hey guys,
is it possible in colorstops using flash animation for next step?
like: 0,10,20,30,n - if colorstop 10 and battery is charging and going to 20, flash 20

1 Like

Wow! Impressive. Can you share the code?

1 Like

great work. thanks.
how can i find more about the sparkline tool? can i set min and max on the y-axis?

Hi Guys,

first of all very nice card. I´m quit new to this hard config stuff but atm i got all stuff working except one. If i use the light with the Slider template it wont update its state after turning the light off. i have to refreh the page or the dashboard to get the correct state. This problem was already talked about somewhere above with a fan.
Is there a workaround for that?
image

Thanks for your help…

BTW i forgot some info´s… :person_facepalming:


Maybe this helps…thanks in advance

BTW Happy New Year @all


The Lamp ist turned off. I dont have any idea why the state isnt updating…

Can you share your code? (please forgive my laziness), i’ll give it a look!

1 Like

Are you using a derived_entity in the tool itself?
I was running into the same problem, and it has to do with attributes like brightness being set to null when the light is turned off. When using a convert statement in the entity it does seem to work.

      - entity: light.example_light
        name: Bureau
        area: Woonkamer
        icon: mdi:floor-lamp-dual
        attribute: brightness
        convert: brightness_pct

Edit: I played around a bit more with this. It only seems to work for the brightness attribute. color attributes still throw the error, even if a converter is set.

1 Like