Streamline Card - Streamline your Lovelace configuration with with a card template system

brunosabot · September 5, 2024, 12:07pm

Hello there!

I’m pleased to share today a project that I’m working on for few weeks : Streamline Card!

For a long time, I was using decluttering-card in my configuration, but unfortunately, the project looks unmaintained anymore.

Even if I’m willing to contribute to some projects, like I did with Bubble-Card, and with the questions left without answer, I decided to make my own version of this, with few other goodies:

A template system to ease the reusability of your components (like decluttering-card)
The support of the visibility option (new)
The support of the new section layout (new)
The support of javascript templates (new)
An UI editor! (new)

The project is still a pre-release version, so there might be some bugs left, but if you are willing to help and test, please provide me any feedback you could have.

Also, it hasn’t been accepted in HACS yet: you’ll need to make a manual install for now.
The PR on HACS is here if you want to upvote!

Thanks and happy streamlining!

BBE-FR · September 11, 2024, 1:54pm

I discovered your card thanks to the french speaking forum where it was advertised:

Great work !

brunosabot · September 15, 2024, 5:48pm

Hello there!

Version 0.0.8 released today to fix some bugs with sub-elements (such as image of picture-elements) and some problems with the card editor!

Let me know if you have any issue!

Haningback · September 17, 2024, 12:08pm

just leaving a comment here to bump it up and giving it a bit more traction, have just replaced all my decluttering-templates with streamline-templates… which was ridiculously easy, just replace all “decluttering” with “streamline” lol

brunosabot · September 21, 2024, 7:34am

Hello there!

A new release is available for streamline-card!
It allow you to also use objects instead arrays for both defaults and variables!

Let me know if you find any issue!

ASNNetworks · September 21, 2024, 9:33am

Amazing work! Would it be possible to “convert” all decluttering cards and templates to streamline by simply changing decluttering to streamline in all my codes? It seems to use identical variables.

brunosabot · September 21, 2024, 12:23pm

Yes, it should work. I kept the same contract.

ASNNetworks · September 21, 2024, 12:37pm

Awesome! Will switch to this cloning and changing YAMLs to test out

ASNNetworks · September 27, 2024, 4:42pm

So I replaced all lines from decluttering to streamline (was easy using ChatGPT changing like 30 YAMLs in 30 seconds :)) But I noticed performance is a lot slower and it doesn’t seem to play nicely with swipe card. Then I tested smaller by only using one streamline template and declaring that one only in my dashboard yaml.

streamline_templates:
  smartphone_statusbar_alerts:
    card:
      card:
        template: smartphone_markdown_statusbar
        show_icon: false
        name: "[[name]]"
        entity: "[[entity]]"
        type: "custom:button-card"
      conditions:
        - entity: "[[entity]]"
          state: "on"
      type: conditional

This is a custom header I created. But even only this takes a serious performance hit compared to decluttering card. Where decluttering shows all cards instantly, streamline takes like 0,5-1 seconds. Also switching to other tabs (using navigation service calls, created my own navigation bar) it’s definitely slower switching to other tabs.

Not sure if you this feedback helps you, but in my testing, it’s sadly not up to par with decluttering performance wise right now. Perhaps it doesn’t play nicely with other cards that I used in my template (custom:button-card). Also it doesn’t play nicely with swipe card.

brunosabot · September 28, 2024, 9:29pm

Hello @ASNNetworks !

There is indeed a problem with swipe-card, which is going to be fixed in a next version.

For the performance issues, there is also some improvements coming, but I can’t tell if it’s going to solve you problems. I was about the same between decluttering and streamline before -so no seconds to wait like you, but next it will be about 30x faster!

I would love your smartphone_markdown_statusbar template to ensure that the gain is also here for button-card.

In any case, do not hesitate to open an issue on GitHub with the maximum info so I can try to reproduce and fix your issues!

Edit: the performance gain is available in the version 0.0.12

deluxestyle · October 9, 2024, 2:46pm

what an amazing card. this helps me so much. thank you

maesenator · October 23, 2024, 12:52pm

Thanks for this cool card.
Unfortunately I seem to have a rather odd issue.

I made this card with all kinds of mods, and it was working perfectly fine. Then I switched it over to streamline-card and I seem to have some kind of timing issue now.

The card usually looks like this:

But if I go to the edit mode and press done, it looks like this until I press F5:

I could live with the edit mode issue, but unfortunately this happens on my phone if I go to the page a second time. I can’t get it back to normal until I kill the app and start it again. Even then it will only work once.

This is the yaml:

streamline_templates:
  sprinkler_row:
    card:
      type: custom:mod-card
      style:
        vertical-stack-in-card$: |
          mushroom-template-card {
            flex: 0 0 13% !important;
            max-height: 40px;
          }
      card:
        type: custom:vertical-stack-in-card
        horizontal: true
        cards:
          - type: custom:mushroom-template-card
            icon: mdi:toggle-switch{{'-off' if states(entity) == 'off'}}
            entity: switch.sprinklercontroller_[[entity]]_include_in_cycle
            fill_container: true
            icon_color: '{{''amber'' if states(entity) == ''on'' }}'
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            layout: vertical
          - type: custom:timer-bar-card
            state_color: true
            mushroom: null
            tap_action:
              action: toggle
            bar_height: 10px
            entities:
              - entity: switch.sprinklercontroller_[[entity]]
                name: '[[name]]'
                remain_time:
                  entity: sensor.sprinklercontroller_remaining_time_current_valve
                  units: seconds
                duration:
                  entity: number.sprinklercontroller_[[entity]]_duration
                  units: minutes
            card_mod:
              style: |
                .card-content {
                  padding-top: 0; 
                  padding-bottom: 0;
                  padding-left: 0;
                }
                timer-bar-entity-row {
                  max-height: 35px;
                }

and the card

type: custom:vertical-stack-in-card
horizontal: false
cards:
  - type: custom:streamline-card
    template: sprinkler_row
    variables:
      - entity: backyard_group_1
      - name: Achtertuin 1
  - type: custom:streamline-card
    template: sprinkler_row
    variables:
      - entity: backyard_group_2
      - name: Achtertuin 2
  - type: custom:streamline-card
    template: sprinkler_row
    variables:
      - entity: backyard_group_3
      - name: Achtertuin 3
  - type: custom:streamline-card
    template: sprinkler_row
    variables:
      - entity: frontyard
      - name: Voortuin

I also get an error in the visual editor, so I’m forced to make changes using the raw file:

maesenator · October 25, 2024, 9:41am

Since no one’s responding… went back to decluttering-card and all works perfectly.

deluxestyle · November 7, 2024, 12:23pm

streamline card is not working with 2024.11
had to roll back to previous version

llaumgui · November 17, 2024, 2:56pm

I have issue with UI. When I edit a card on UI, default variable are set to “”

brunosabot · November 23, 2024, 5:14pm

Hello @deluxestyle!

It should work now

brunosabot · November 23, 2024, 6:21pm

Thanks for reporting.

It is indeed not the expected behavior.
The version 0.0.18 is fixing this even if it’s a breaking change.

deluxestyle · November 23, 2024, 9:27pm

Thanks for this great work. Already using the working version again

duceduc · December 23, 2024, 8:02pm

I 've created this template and it seems to be resource hungry. My browser for home assistant page would be unresponsive and I can hear my pc fan run faster. Other browser page does not seem to be affected. Maybe the code has error but seems to be running fine. The reason I say this is because, when there is a syntax error and you refresh the frontend page, you will get an error of this block. I can see a flash error on the screen when I refresh this page. But the page loads.

Possibly this is not the most efficient way of going about it??

  server_exc_tpl:
    card:
        type: entities
        title_javascript: "states['[[entity_1]]'].state === 'unavailable' ? 'rear sate' : 'desktop';"
        show_header_toggle: false
        footer:
          type: graph
          entity_javascript: "states['[[entity_1]]'].state === 'unavailable' ? '[[entity_44]]' : '[[entity_4]]';"
          detail: 3
        entities:
          - entity_javascript: "states['[[entity_1]]'].state === 'unavailable' ? '[[entity_11]]' : '[[entity_1]]';"
            name: Memory Use
            icon: mdi:memory
          - entity_javascript: "states['[[entity_1]]'].state === 'unavailable' ? '[[entity_22]]' : '[[entity_2]]';"
            name: Disk Use
            icon: mdi:harddisk
          - entity_javascript: "states['[[entity_1]]'].state === 'unavailable' ? '[[entity_33]]' : '[[entity_3]]';"
            name: Processor Use
            icon: mdi:memory
          - type: divider
          - entity_javascript: "states['[[entity_1]]'].state === 'unavailable' ? '[[entity_44]]' : '[[entity_4]]';"
            name: CPU Temperature
            icon: mdi:thermometer