Lovelace: Versatile Swiss Army Knife Custom Card

The browser console should say more.

It might be a cache issue. The t.type error points to the fact that the card doesn’t know the ‘sparkline’ type, hence the new card is not loaded…

Yes, it is, thank you :slight_smile:
I tried it in another browser and everything worked!!!

Эти примеры, просто волшебство!!!

Please list all possible chart_type

sparkline:
show:
chart_type: {area, equalizer, line …}

and also, how to make a shaded graph?
image

My magical development cards are also included yes :grinning_face_with_smiling_eyes:

There should be a fill: fade option somewhere to show the fading part of the area chart.

Not sure if I’m complete, but:

  • area with (yet to be changed) fill modes and dots option
  • bar
  • barcode with audio, stalactites, and stalagmites variants
  • dots
  • equalizer
  • graded with default and rank_order variants
  • radial_barcode with sunburst/sunburst_centered, sunburst_outward and sunburst_inward variants
  • line with dots option
1 Like

Hello, can you explain to me what the & and * that are used in this code are used for.

Those are YAML anchors and aliases:

YAML built-in template functionality - Swiss Army Knife Card (amoebelabs.com)

Anchors and Aliases are YAML constructions that allow you to reduce repeat syntax and extend existing dictionaries. You can place Anchors (& ) on an entity to mark a multi-line section. You can then use an Alias (* ) and use that Anchor later in the YAML document to reference that section.

In other words: it saves a lot of repetitive definitions!

1 Like

Hi, In the sparkline chart, can we ask to have a chart of more than 24 hours? I put 48 hours as a parameter and the graph starts at the beginning every day.


Try this:

        period:
          rolling_window:
            duration:
              hour: 48
            bins: 
              per_hour: 1

all code for the graph:
image

####################################################
      - type: sparkline
        id: 1
        position:
          cx: 77
          cy: 55
          width: 29
          height: 14
          margin:
            l: 0
            x: 0
            y: 0
            r: 0
            t: 0
            b: 2
        entity_index: 1
        entity_indexes:
          - entity_index: 0
        expose_entities:
          - min: sak_sensor.graph_0_min
          - max: sak_sensor.graph_0_max
          - avg: sak_sensor.graph_0_avg
        period:
            # calendar:
            # period: day
            # duration:
            #   hour: 48
            # bins: 
            #   per_hour: 1
          rolling_window:
            duration:
              hour: 48
            bins: 
              per_hour: 1
        sparkline:
          show:
            chart_type: area #dots #equalizer #area #line graded
            fill: none
            points: true
            line_width : 0.5
          area:
            show_dots: false
            fill: fade #fade #true
            line_width : 0.1
          colorstops_transition: smooth
          colorstops:
            colors:
              - value: 0
                color: '#ff9100'
              - value: 10
                color: '#ffc400'
              - value: 20
                color: '#ffea00'
              - value: 30
                color: '#c6ff00'
              - value: 40
                color: '#76ff03'
              - value: 50
                color: '#00e676'
              - value: 60
                color: '#1de9b6'
              - value: 70
                color: '#00e5ff'
              - value: 80
                color: '#00b0ff'
              - value: 90
                color: '#2979ff'
          styles:
            area_mask_above:
              fill: url(#sak-sparkline-area-mask-tb-3)
            area_mask_below:
              fill: url(#sak-sparkline-area-mask-tb-0)
1 Like

Yup. I copied the settings from the statistics card that HA is using…

Saved me somt time thinking how to specify such periods…

I did NOT implement the fixed_period. Only used calendar (parts) and rolling_window stuff.

1 Like

Good morning guys.
after about 3 months it continues to receive the same error as shown in the photo. I reinstalled several times following to the letter the procedure of ‘AmebeLabs’ and the advice of ‘ValMarDav’ in some of his previous posts. Now I’m stuck in HA update too. in fact, in the versions following the HA 2023.06 the swiss army knife card gives me an error. Only the v1.0.0-rc3 version manages to work well but only up to HA2023.06… after this I find myself removing this amazing card and finding a replacement. this hurts me a lot… help me understand this mistake… thanks to whoever will take the time… :cry:

type: custom:swiss-army-knife-card
aspectratio: 1/1
entities:
  - entity: sensor.temperatura_sala_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

I have had several extra containers set up since the first problems were mentioned on Github, but I can’t reproduce the problem so far, even while mixing different versions of HA and SAK.

Also, the step to HA 2023.6 is weird.

The fact that v1.0.0-rc3 does not work anymore has to do with several changes in HA.

Version v1.0.0-rc3 introduced the layout templates, and required (due to some changes in HA fetching the configuration) a particular alphabetical order of the templates, at least in some cases.

That error I could reproduce, hence the change in folder names to make sure that layouts are loaded as the last folder using the HA file merge function:

image

However, in your example, there are no templates. So that can’t be some ordering problem.

Are there any errors in the browser console or the HA log? The screenshot alone does not help me to find the error and replicate the problem. I need the JavaScript stack logging which is available in the browser’s console (use right mouse button → inspect).

I assume that you already cleared browser caches, and/or tested with a private browser window.

Thanks for the prompt response! I’m happy to hear from you again. Forgive me if I’m repetitive but last night it was too late to write and I certainly messed up. :sweat_smile:
Let’s start from the current version of HA installed which is 2023.3.6 with the SAK v1.0.0-rc.3. So far everything is working great.
Immagine 2023-09-07 190558

here is the card configuration:

 - type: custom:swiss-army-knife-card
   entities:
     - entity: sensor.temperatura_sala_temperature
       name: thermostat
       decimals: 1
       unit: °C
     - entity: sensor.temp_auto
       name: setpoint
       unit: °C
   style: |
      ha-card {
        background-color: transparent;
        --ha-card-border-width: 0px;
        width: 240px;
        top: -350px;
        left: 920px;
        pointer-events: none;
      } 
   layout: 
     toolsets:
       - toolset: thermostat
         position:
           cx: 50
           cy: 50
         tools:
         
####### ARC TEMPERATUR #########
           - 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'
                 
####### ARC SETPOINT #########                 
           - 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'
                 
####### LINE SEPARATOR #########                
           - type: line
             position:
               cx: 50
               cy: 55
               length: 33
               orientation: horizontal
             styles:
               line:
                 stroke: white
                 stroke-width: 3

####### VIEW STATE TEMPERATUR #########                 
           - type: state
             position:
               cx: 50
               cy: 49
             entity_index: 0
             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

####### TEXT 'ROOM' #########                 
           - 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
                 
####### TEMPERATUR SETPOINT #########
           - 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
                 
####### TEXT 'SET' #########
           - 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 

                 

The problem arises when the system asks me to update to the latest version of both HA and SAK.

Immagine 2023-09-07 190406

Today I made an attempt in the office at work 60km away from home. On a different PC from a different network I installed a virtual machine and ran HA. I subsequently installed SAK at version v2.5.1 and the problem recurred… now I’m wondering, after reading your answer: is it likely that I’m installing it wrong? because it is impossible for the error to recur in the same way even in a different instance!
I use the hybrid version from HACS and then manual… what do you think I’m doing wrong??

Hi, I don’t know if this will help you, but I managed to reproduce the problem. This is what I see in the web inspector.

1 Like

That is great! Ut bow did you do this?

It is a call from the HA frontend code. I also see some chunk loading calls that were the cause of troubles in earlier versions.

This is very weird: as if SAK is not loaded by HA, and thus failing to call the setConfig function?

I managed to reproduce the problem in a funny way. :grinning: In the basic dashboard, I was doing a test with @Dadafrenk’s code to see if there was a problem in his code that caused the error. It worked well until I refreshed the page. Following the refresh, the error occurs. Even the cards in my dashboard no longer work. In my dashboard, I have to refresh the page for it to work again.

1 Like

I copied the code, but this simply works…

However: I do everything in YAML. I don’t use the UI as it is configured as YAML only…

May that be the problem???

If I add this card to an existing view, it keeps working…

If everyone with problems is using the UI to add cards, we might be on a path to a solution…

frontend/src/panels/lovelace/create-element/create-element-base.ts at dev · home-assistant/frontend (github.com)

The crash is here on line 97 while calling the element.setConfig(config) of the just created card:

I have no idea why HA can’t create the card.

And you can talk about this card in more detail :slight_smile:

image

I was playing with it in mixed mode a while ago and what I found is that I always had to go to a YAML based dashboard page first otherwise it would not have loaded certain resources. After that all pages worked fine for the duration of the session.