Lovelace: Versatile Swiss Army Knife Custom Card

Github weather map:

1 Like

template: weather_today_detail
readme_1

  • template: main-box-sensor

  • template: main-circle-sensor

  • template: main-box-termometr

  • template: main-circle-termometr

  • template: main-circle-percent

  • template: main-circle-percent-battery

  • template: main-min-temperature-room

  • template: main-min-humidity
    readme_5

3 Likes

With one of your card, I created a new card that displays temperature, humidity, wind speed and the number of millimeters of rain.

4 Likes
  • template: main-box-switch
  • template: main-circle-switch
  • template: main-min-switch


1 Like

The new sparkline graph tool for SAK is getting somewhere.

Here are some card examples I’m currently making to verify and test the new functionality. Not all new functionality is shown in these cards :smiley:

Electricity cards with real-time graph (left) and historical (top right today’s average per 2 hours using an equalizer graph, bottom right today’s average per 30 minutes using a timeline/audio graph)

The second example shows the pollen card with a clock/sunburst graph added to the real-time state to show today’s history. The bottom card shows the history as a timeline/audio graph.

Both graphs use state mapping to map the very_high, very_low, none etc. states to some number.

Last but not least, a card that shows the Awair Element sensors and score.
The score is shown in real-time using a segmented arc, and today’s history using an area graph.

Each sensor’s current state is shown using an equalizer/color-stop graph with a binning feature to fully implement the way Awair is using color-stop ranges. The history is again using a timeline/audio graph.

I hope to release it in a month. The tool already has 2.500 lines of code, so a lot to test and try!

6 Likes

wow looks great! can’t wait to try

Flower Powerrrrrrrrrrrrrrrrrr :grinning_face_with_smiling_eyes:

My PV is broken, so the blue part in the flower is fake (it is in fact the L3 sensor)… The average load is about 100-150W, so I used the kettle to get some nice colors!

What do you see?

  • In the header the average use of the last 24 hours
  • the flower shows the average historical usage (and return if PV working) per 15 minutes for today. You can see from the flower that it is around 18:00 hours here!
  • the left bar shows the (graded) power consumption
  • the right bar shows the (graded) returned power to the net
  • Then a block with the 3 phases with their use and return power values
  • Last but not least: the overall energy consumption per day / month and year.

I solved some nice bugs while making these example cards.

The card is a layout template but does not yet use other templates, so is still a bit large (around 1.200 lines of YAML), although I’m using YAML node anchors (using & ) and references (using * ) where possible.

The card contains already 11 sparklines, and those do need some YAML, although YAML re-use shortens the code a lot as you can see (this is the sparkline at the bottom of the L3 2,530kW value):

      - toolset: L3-row-out-spark
        position:
          cx: 150
          cy: 360
          rotate: 90
        tools:
          # ------------------------------------------------------------
          - type: sparkline
            position: *power_out_graded_pos
            entity_index: 7
            animate: true
            show:
              chart_type: graded
            period:
              real_time: true
            graded: *graded_config
            colorstops_transition: hard
            colorstops: *electricity_colorstops_kwh
            styles: *graded_phase_styles

Light mode:

Dark mode:

A more compact variant with consumption at the top, and power usage at the bottom.

Light mode:

Dark mode:

5 Likes

hey guys,
can someone help me to integrate an slider for an number value 0-100? its not climate its an SOC Value of battery by my solar inverter.
what i need to change on:

                    derived_entity:
                      input : '[[[ return state ]]]'
                      state: >
                        [[[
                          if (typeof(entity) === 'undefined') return;
                          if (typeof(state) === 'undefined') return;
                          
                          var bri = Math.round(state / 2.55);
                          return (bri ? bri : '0');
                        ]]]
                      unit: >
                        [[[
                          if (typeof(state) === 'undefined') return undefined;
                          return '%';
                        ]]]

and

                    user_actions:
                      drag_action:
                        update_interval: 200          # Update every 200msec
                        haptic: selection
                        actions:
                          - action: call-service
                            service: light.turn_on
                            parameter: brightness_pct

thanks guys

var bri = Math.round(state / 1);

I tried this before. I can’t use the slider in this way. Can’t slide this and it’s just standing in the middle of the sliderline

Here are the cards I made with SAK.

I would like to see your achievements.

4 Likes

2 Likes

2 Likes

What kind of slider are you using?

The slider has a scale, normally from 0…100. That is why the brightness is converted to a range of 0…255 (from HA) to 0…100.
Also, the service you call is for a light, ie for brightness.

Nice :grinning_face_with_smiling_eyes:

I’m just experimenting with some new cards to test the sparkline tool…

Binary sensors with 24-hour history in 1-hour steps (the left card has a blinking icon, therefore the transparency):

Sensors with history on the background (area, left card), and around icon (radial barcode, right card):

Some more radial stuff, to be used later on for pollen:

The single-sensor card should display something like the following:

I find more bugs and things that should behave a bit differently when making these kinds of cards than during explicit testing of a single chart type. Real-life data is just different…

2 Likes

Very beautiful, I hope you will make this new card available to us soon.

All cards will become available as functional card examples, probably series 2.

All cards are already layout templates, as this is easier to use.

Seen from the view, this is the only YAML you need to get the the first showed binary cards:

        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: binary_sensor.back_door_contact
              area: Keuken
              name: Achterdeur
            - entity: binary_sensor.back_door_contact
              secondary_info: last_changed
              format: time-24h
            - entity: sensor.back_door_battery
              decimals: 0
            - entity: sensor.back_door_linkquality
              decimals: 0
          layout:
            template:
              name: sak_layout_fce2_binary1

I also want all the examples in the examples section in the documentation. Now the examples are both in the design and examples menu, which is not logical…

1 Like
  • template: header_room_2x2
  • template: header_room_3x2
  • template: header_room_4x3

2 Likes

Slightly modified binary sensor card and new person card… The time field now shows the short date if it is longer than 1 day ago. Otherwise, you keep seeing the same time, which might be confusing.

The person card uses a fixed map background…

If you are in one of the defined regions, that region (name) is shown (name and icon). Exactly the same as with the current person card example.
The history only tracks the home state (home / not home)…

3 Likes