Enhanced Shutter Card

Share your Projects! Dashboards & Frontend
,
21

@FunkyC Do you mind to create an issue on github for this? I see none of the images are loaded. So I wonder why. A seperate issue is best to communicate about it. Thanks!

1 Like
22

@marcelhoogantink, your card looks very promising. I’m currently trying to use it. I’m using V1.1.0b2. Could it be that the new features, such as name_disabled and opening_disabled, are not working yet?

23

Hi @marcelhoogantink,
I tested the v1.1.0b2 and it works great.
I find the evolution I introduced in my fork.
I have these remarks :

  1. The default background of white color is not possible. I would prefer to have it instead of an image. You could imagine a preference for it for the user to choose its color.
  2. The state under the title of the cover takes too much vertical space for me. I prefer having it next to the title.
  3. The partial open buttons do not display has in my implementation, I prefer having them on 3 columns if there is space for it.
  4. Your version displays the future percentage when we slide it : it is a good point.

Here is the display I use :
image

And the one with the enhanced shutter card :
image

And final points :

  • there are lots of console.log in the code that are present in the beta release
  • there is a small mistake in the documentation (readme.md) : you reference the old name of the card :

custom:shutter-card

  • To fully test it, implementing the editor would greatly facilitates. Another point for the editor is that some beginner users do not find the way of using it with direct yaml configuration.
24

@blueglassmv , it seems that name_disabeled and opening_disabled work a little buggy. I’ll look into it.

25

Hi @cnico ,

Thanks for looking into it !!

  • Default background: Good idea, i will work something out for it.

  • Opening state under/next to Name: That’s tricky, since when it does not fit, it goes to the next line, an then the GridOptions() (before LayoutOptions()) can’t be calculated well.

  • Partial Buttons. For the partial buttons, I use the flex-flow with row or column. I thought that displaying it this way, it would fit better on mobile devices. It is hard to know in when there is place for it or not.

  • display dynamic percentage: Nice isn’t it :slight_smile:

  • console.logs(): It is a beta, so this was intended.

  • reference to old name: Thanks , I changed it.

  • Implementing the editor: This is for a next version. I do not understand all the code yet, so I study it. I agree that it is a good addition, especially for beginners.

26

@blueglassmv

The disabled_position and disabled_name settings should work now in v1.1.0b4

27

Works perfect :slight_smile: THX

28

@cnico
I added background-color option to setting view_image in the just released version v1.1.0

29

@marcelhoogantink
Thanks,
The final point I am missing to definitely remove my old version is to be able to have the name_position and opening_position displayed on the same line.
What do you think about adding an option name_opening_inline configuration key ? If it has a value of true, you then render the divs with display:inline instead of display:block for the 2 divs and it will do the job.

30

@cnico
Good idea, I’ll look into it.

31

Create a Live CCTV Background in Home Assistant

Hey everyone,

I loved how simple this setup was, so I added it to my Home Assistant system. Then I realized the background image could be a snapshot from the CCTV camera above the window where the blind is installed. Then it hit me—why just take a photo when I can use the live video feed instead?

Here’s a step-by-step guide if you want to set this up too.

1. Test the RTSP Feed Using FFmpeg

First, make sure FFmpeg is installed on your computer. Use the following command template to test the RTSP feed from your camera:

ffmpeg -rtsp_transport tcp -i "rtsp://admin:[email protected]:554/Streaming/channels/101" -frames:v 1 -y /config/www/community/enhanced-shutter-card/images/sons_blind.png

Note: Adjust the RTSP URL based on your camera’s settings. The important option here is -y, which forces FFmpeg to overwrite the existing image file without asking.

2. Create an Automation in Home Assistant

If the FFmpeg command works, set up an automation in Home Assistant. You can use either the user interface (UI) or YAML, whichever you prefer.

Here’s a YAML example:

- id: '12345677890' # Use a unique number; it’s created automatically in the UI
  alias: Capture RTSP Snapshot
  description: Grabs an RTSP snapshot every 10 seconds
  trigger:
    - platform: time_pattern
      seconds: "/10"
  condition: []
  action:
    - service: shell_command.capture_snapshot
  mode: single

Tip: You can adjust the timing or other settings to match your needs.

3. Add a Shell Command to Configuration.yaml

In your configuration.yaml, add this code:

shell_command:
  capture_snapshot: >
    ffmpeg -rtsp_transport tcp -i "rtsp://admin:[email protected]:554/Streaming/channels/101" -frames:v 1 -y /config/www/community/enhanced-shutter-card/images/sons_blind.png

Reminder: Update the RTSP URL and file path as needed. Let me know if you need help setting this up!

4. Update the Enhanced Shutter Card Config

Finally, in the Enhanced Shutter Card configuration, set the background PNG location like this:

view_image: sons_blind.png

Or whatever you named the image file in the previous steps.

And that’s it! You now have a “live” background image that updates every 10 seconds, giving you a near real-time view from your camera!

image
image770×720 35.8 KB

I hope this helps!

Let me know what you think, even better share with us your experiences with implementing above and if I missed anything let me know so we can work through it together :slight_smile:

1 Like
32

@kenibarwick : Nice !!:+1::smiley:

1 Like
33

thank you sir, and great work keeping this Card alive for us to use

34

Before the last version 1.1.0, i have an an image with view_image but now, i have only a background color white. Is it normal ?

35

No, please share your config, so I can check it.