Lovelace: Versatile Swiss Army Knife Custom Card

kkaapp · September 8, 2023, 11:48am

How can I make the card have an auto-update for the entity_picture attribute?

  - type: 'custom:swiss-army-knife-card'
        entities:
          - entity: media_player.yandex_station_xk000000000000023784000034c610f5      
         # - entity: camera.cam021
        layout:
          aspectratio: 1/1
          toolsets:
          - toolset: video-card
            position:
              cx: 50
              cy: 50
            tools:
              # ------------------------------------------------------------
              - type: usersvg
                position:
                  cx: 50
                  cy: 50
                  height: 90
                  width: 90
                entity_index: 0
                style: 'images'
                images: 
                  - default: >
                      [[[
                        {
                          return (entity_config?.entity_picture ||
                                 entity.attributes?.entity_picture || 'none');
                        }
                      ]]]

If you do this, then the live video works

  - type: 'custom:swiss-army-knife-card'
        entities:
          - entity: camera.cam021
            entity_picture: "http://192.168.1.180:8085" 
        layout:
          aspectratio: 1/1
          toolsets:
          - toolset: circle-with-icon
            position:
              cx: 50
              cy: 50
            tools:
              # ------------------------------------------------------------
              - type: usersvg
                position:
                  cx: 50
                  cy: 50
                  height: 90
                  width: 90
                entity_index: 0
                style: 'images'
                images: 
                  - default: >
                      [[[
                        {
                          return (entity_config?.entity_picture ||
                                 entity.attributes?.entity_picture || 'none');
                        }
                      ]]]

I take the streaming URL (http://192.168.1.180:8085) from motioneye

ValMarDav · September 8, 2023, 12:14pm

I use Storage mode for my dashboard.

AmoebeLabs · September 8, 2023, 12:28pm

Ok. And you did not have problems until you tried the config with the circle and the state?

I still can’t understand why such a simple card would crash, and a card with 1.000 lines of YAML simply works.

The crash is not in SAK, but in HA Frontend. The question is; WHY?

ValMarDav · September 8, 2023, 12:58pm

Yes, the problem occurs when I test the card, which, as you said, is very simple.

Normally I don’t have this problem. My dashboard works very well. I have several sak cards.

AmoebeLabs · September 8, 2023, 1:00pm

Maybe this only happens with small cards. What if you add some tools (circles, states) to that card? Does it still crash??

ValMarDav · September 8, 2023, 2:03pm

Same problem.

type: custom:swiss-army-knife-card
aspectratio: 2/1
entities:
  - entity: sensor.blink_allee_temperature
  - entity: sensor.blink_allee_temperature
  - entity: sensor.blink_allee_temperature
    name: sala
layout:
  toolsets:
    - toolset: just-a-name
      position:
        cx: 50
        cy: 50
      tools:
        - type: circle
          position:
            cx: 50
            cy: 50
            radius: 45
          styles:
            circle:
              stroke-width: 2em
              stroke: red
              stroke-opacity: 0.5
              fill: bisque
              fill-opacity: 0.5
        - type: state
          position:
            cx: 50
            cy: 70
          entity_index: 0
          styles:
            state:
              font-size: 15em
    - toolset: thermostat
      position:
        cx: 150
        cy: 50
      tools:
        - type: segarc
          entity_index: 0
          position:
            cx: 50
            cy: 50
            start_angle: -120
            end_angle: 120
            width: 4
            radius: 37.9
          scale:
            min: 0
            max: 35
          show:
            scale: false
            style: colorlist
          segments:
            colorlist:
              gap: -0.5
              colors:
                - white
          animation:
            duration: 5
          styles:
            background:
              fill: '#263C50'
        - type: segarc
          id: 0
          entity_index: 1
          position:
            cx: 50
            cy: 50
            start_angle: -120
            end_angle: 120.3
            width: 5
            radius: 34
          scale:
            min: 0
            max: 35
            width: 2
            offset: 2.2
          show:
            scale: true
            style: colorstops
          segments:
            colorstops:
              gap: -0.5
              colors:
                '0': '#4390E0'
                '5': '#4B90C9'
                '8': '#598FB5'
                '11': '#688FA0'
                '14': '#798F8C'
                '17': '#8B8F76'
                '20': '#9F8E62'
                '23': '#B28E50'
                '26': '#C48F42'
                '29': '#D99039'
                '32': '#D6882B'
          animation:
            duration: 5
          styles:
            background:
              fill: '#263C50'
        - type: line
          position:
            cx: 50
            cy: 55
            length: 33
            orientation: horizontal
          styles:
            line:
              stroke: white
              stroke-width: 3
        - type: state
          position:
            cx: 50
            cy: 49
          entity_index: 2
          styles:
            state:
              text-anchor: middle
              font-family: Days One
              font-size: 15em
              fill: white
              text-shadow: 2px 2px 2px black
            uom:
              font-family: Days One
              fill: white
              text-shadow: 2px 2px 2px black
        - type: text
          position:
            cx: 50
            cy: 33
          text: Room
          styles:
            text:
              text-anchor: middle
              font-family: Days One
              fill: white
              text-shadow: 2px 2px 2px black
              font-size: 7em
        - type: state
          position:
            cx: 50
            cy: 64.5
          entity_index: 1
          styles:
            state:
              text-anchor: start
              font-family: Days One
              font-size: 7em
              fill: white
              text-shadow: 2px 2px 2px black
            uom:
              font-family: Days One
              fill: white
              text-shadow: 2px 2px 2px black
        - type: text
          position:
            cx: 48
            cy: 63
          text: Set
          styles:
            text:
              text-anchor: end
              font-family: Days One
              fill: white
              text-shadow: 2px 2px 2px black
              font-size: 4.5em

AmoebeLabs · September 8, 2023, 3:52pm

Pitty.

I have made a GitHub issue for HA frontend. Maybe some of the devs have a solution or an idea what is happening behind the HA scenes, so this can be solved.

I find these kind of bugs annoying…

AmoebeLabs · September 9, 2023, 10:53am

That card is part of a progress path experiment. So now and then I try different things. Some work and make it into SAK as a tool, others just don’t work very well and are abandoned.

The goal of this expermiment is to answer the question: “Can I make a generic progress tool based on a path in order to create completely different progress bars with the exact same piece of JavaScript”.

The current state is still very alpha…
One of the things I want (and you see those examples) is having round AND square line caps on the same line: that is NOT possible using standard SVG settings & CSS, so the round line endings you see are extra objects that are drawn to look like round line endings!

You can see that round line endings don’t work on spirals for some reason…

The specific viz I showed is based on the 6spiral plugin for Figma.

On the left the spiral converted to an helix, and on the right the original spiral.

The other path experiments are lines and circles. The circle has some overlap with the segmented arc and the horseshoe, but the implementation is completely different as it is generic.

And last but not least: rectangles…

These cards are just development examples not meant for red dot design awards

Dadafrenk · September 9, 2023, 4:56pm

hi guys… I’m writing after several attempts and tests to verify the error. I’ll start by saying that even with a new installation with a new PC the same error occurs… both with virtual machine and with miniPC and raspberry.

yes, I confirm! the same thing applies to me…

I also use Storage mode…

I thought the problem was related to my configuration but seeing the checks carried out by you @AmoebeLabs & @ValMarDav I can confirm that if I have a catalytic converter like the sSAK examples you have no problems, even if the codes are complex (I have some too complex). While if the same card is inserted in different yaml configurations you get the same error, both in storage, yaml, with the “true” panel and even inside the “type: picture-elements”.

below I will show with a video what happens on my smartphone to get an idea … I hope the bug (if so) will be fixed because it would be a shame not to be able to use these beautiful cards
One thing is certain: with the version of SAK v1.0.0-rc.3 this problem does not occur, but when you update the version of HA this problem occurs

kkaapp · September 10, 2023, 2:42pm

I could not reproduce this error, it always works for me without problems

If you have a test server, try copying the configuration from my github to it.

Dadafrenk · September 10, 2023, 3:50pm

obvious! It works for me too under SAK configuration. both me and @ValMarDav tried… try to create another dashboard in any mode and insert your card… refresh the page ( CTR + f5) and see what happens… the problem arises when you do it outside the dashboard by SAK…

ValMarDav · September 10, 2023, 4:20pm

Indeed, in my case the problem occurs under the conditions you describe. What is strange is that for some people, like one of my friends, the problem occurs permanently.

AmoebeLabs · September 10, 2023, 5:39pm

Could you elaborate a bit more?

As I understand now, it is a Lovelace resource problem: the ‘other’. Dashboards don’t load the custom card. But I may be wrong of course.

So, can you describe the steps, so I can reproduce the problem?

Dadafrenk · September 11, 2023, 6:44am

for reasons of file size I had to divide the videos into 3 parts … they are placed in sequential order…

vid1-3
vid2-3
vid 3-3

Dadafrenk · September 11, 2023, 8:01am

forgive me but I didn’t understand the request well… how can I help??

kkaapp · September 11, 2023, 12:58pm

Can you show screenshots of the interface you made

kkaapp · September 13, 2023, 1:06pm

For the “type: sparkline” element, is it somehow possible to display the maximum and minimum values on the chart, as well as the date and time when there was a maximum and minimum? And how else can you manage transparency?

Dadafrenk · September 13, 2023, 2:34pm

hello @AmebeLabs … do you have any news about the error of “i.setconfig is not a function” ??

AmoebeLabs · September 17, 2023, 3:02pm

Well, I had a 8 day workweek, so was a bit tired for other stuff…

I have some progress, although it might not be related.

See: Cannot read properties of undefined (reading ‘template’) · Issue #243 · AmoebeLabs/swiss-army-knife-card (github.com)

This problem is around templates not loading, or at least “unknown”

The templates (‘energy_4000w_v1’ and ‘energy_4kw_v1’) do exist, but are not loaded. You can see the v2’s, but not the v1’s:

These colorstops were added a few days ago.

I even added a dummy colorstop, which also isn’t showing up…

And then finally all three are there:

sak_colorstops_energy_4kw_v1
sak_colorstops_energy_4000w_v1
sak_colorstops_dummy

The solution for this problem is to RESTART Home Assistant, at least this solves this problem every time I have tried sofar…

Note:

reload config does NOT work
restarting HA from within HA does NOT work
restarting the container (using Portainer) DOES work!

The first two options keep loading the OLD configuration for some reason.

I wonder if the problems have any correlation…

kkaapp · September 17, 2023, 3:11pm

It will be cool if you also make a period selection from the interface, for example:

          - type: sparkline
            period:
              rolling_window:
                duration:
                  hour: '[[[ return states.input_select.period.state ]]]'