Venetian Blind Icons

jcrowegitHu8 · December 15, 2018, 9:55pm

I just wanted to share the custom Venetian blinds icons I made

Laszlo_Majer · June 26, 2019, 4:45pm

Hi,

How can I setup a card similar to the one you show here?

jcrowegitHu8 · June 27, 2019, 1:25pm

Here is the lovelace yaml for that card. As you can see it uses the slider-entity-row custom card.

- type: entities
  title: Coverings
  entities:
    - entity: cover.left_window_33
      name: Left
      type: custom:slider-entity-row
    - entity: cover.center_window_34
      name: Center
      type: custom:slider-entity-row
    - entity: cover.right_window_35
      name: Right
      type: custom:slider-entity-row
    - type: divider
    - entity: cover.bedroom_window_40
      name: Bedroom
      type: custom:slider-entity-row
    - entity: cover.office_window_41
      name: Office
      type: custom:slider-entity-row

tc23 · July 19, 2019, 9:39pm

@jcrowegitHu8 how did you set up the slider-entity-row? I am trying to add it, but I just get the custom element doesn’t exist error?

edit: nevermind, I got it working

BurnedSoup · October 31, 2019, 5:49am

I’ve been trying to get this working for 2 weeks.
It seems like my if statements in my customize_glob.yaml file aren’t working.
I can put the file directory there and not have the if statements and it works…but it just has that picture and not a dynamic one.

“cover.tradfri_blind_*”:
templates:
entity_picture: >
if (state === ‘closed’) return ‘/local/blinds_00.png’;
if (attributes.current_position <= 10) return ‘/local/blinds_10.png’;
if (attributes.current_position <= 20) return ‘/local/blinds_20.png’;
if (attributes.current_position <= 30) return ‘/local/blinds_30.png’;
if (attributes.current_position <= 40) return ‘/local/blinds_40.png’;
if (attributes.current_position <= 50) return ‘/local/blinds_50.png’;
if (attributes.current_position <= 60) return ‘/local/blinds_60.png’;
if (attributes.current_position <= 70) return ‘/local/blinds_70.png’;
if (attributes.current_position <= 80) return ‘/local/blinds_80.png’;
if (attributes.current_position <= 90) return ‘/local/blinds_90.png’;
return ‘/local/blinds_99.png’;

henaa · November 23, 2019, 2:35am

So I copy the icons to /www/
create new file “customize_glob.yaml”
add resources to ui edit page

Create card like the example

- type: entities
  title: Coverings
  entities:
    - entity: cover.left_window_33
      name: Left
      type: custom:slider-entity-row

Anfo not show the icon on the screen
Show only the old one mdi:blind

What I miss?

Using 102.3HA version

jcrowegitHu8 · November 24, 2019, 5:34pm

Did you actually install and setup the custom_ui per their github page?

I’m back on version 94 HA, so I can’t say if something has changed that may be breaking your version of 102.3HA.

jcrowegitHu8 · November 24, 2019, 5:36pm

What version of HA are you on? If you got this working could you post how so other may benefit.

Mutt · November 24, 2019, 5:59pm

These are great and also useful for roller blinds (in my opinion)
Well done and my thanks too.

Have you submitted these into materialdesignicons ?
That way they will eventually end up in every HA instance

BurnedSoup · November 25, 2019, 12:06am

I did not find a solution. I was able to use the cutom_ui and have a single .png file as the icon but as soon as I introduced if statements to the customize_glob.yaml / config.yaml file it goes blank with no icon being displayed. Which leads me to believe the issue is with the if statement. Running Home Assistant 0.101.2

jcrowegitHu8 · November 26, 2019, 2:36am

Great suggestion…No I have not, It’s not really clear how I submit the 5 icons, or what formats they should be in. This information doesn’t specify much https://materialdesignicons.com/contribute

Can you offer any guidance on how to submit them? Inputting the info and clicking become a contribute doesn’t seem to do anything.

Mutt · November 26, 2019, 8:32am

Sorry not done that myself, try just Googling it

@Tinkerer, sorry to tag you, but can you help ?
I think Blackbird’s blind icons would be a very good addition AND
We could always appeal to his good nature if we need a particular icon for some use in future

We have a homeassistant icon on there so ‘we’ must have a path ?

I realise how cheeky I’m being here but I think he/she has a really useful skill that I (for one) think, the output of which, should reach a wider audience.

Tinkerer · November 26, 2019, 6:58pm

Sure, I can say submit the icons to MDI, then wait for a release. Then submit a PR to have Home Assistant use that new version (as was done here)…

The contribute page specifies 4 format options (Illustrator, Expression, Affinity, SVG) which they provide templates for, and that submissions are through their GitHub.

Mutt · November 26, 2019, 7:44pm

Thanks,

Blackbird, I assume that will give you enough to progress.
I really hope to see your work available in native HA

jmvaz · March 4, 2020, 2:02pm

Hi Guys!

I need some help here.
I’m trying to do this adaption to my blinds, but the icon is not working after I do this customization.
I will try to describe all the steps I made:

I had installed the customizer (https://github.com/andrey-git/home-assistant-customizer/ )
" Put customizer dir in <ha_config_dir>/custom_components/ "
Added to my configuration.yaml

homeassistant:
  customize: !include customize.yaml
  customize_glob: !include customize_glob.yaml

in customize_glob.yaml I added the following code:


"cover.rollershutter_*":
  templates:
    entity_picture: >
      if (state === 'closed') return '/local/ihcrollershutter/rollershuttersihc-0.png';
      if (attributes.current_position <= 10) return '/local/ihcrollershutter/rollershuttersihc-10.png';
      if (attributes.current_position <= 20) return '/local/ihcrollershutter/rollershuttersihc-20.png';
      if (attributes.current_position <= 30) return '/local/ihcrollershutter/rollershuttersihc-30.png';
      if (attributes.current_position <= 40) return '/local/ihcrollershutter/rollershuttersihc-40.png';
      if (attributes.current_position <= 50) return '/local/ihcrollershutter/rollershuttersihc-50.png';
      if (attributes.current_position <= 60) return '/local/ihcrollershutter/rollershuttersihc-60.png';
      if (attributes.current_position <= 70) return '/local/ihcrollershutter/rollershuttersihc-70.png';
      if (attributes.current_position <= 80) return '/local/ihcrollershutter/rollershuttersihc-80.png';
      if (attributes.current_position <= 90) return '/local/ihcrollershutter/rollershuttersihc-90.png';
      return '/local/ihcrollershutter/rollershuttersihc-100.png';

Added all the icons to the folder: www/ihcrollershutter/[all PNG’s].png
Added the following configuration to lovelace:

cards:
      - entities:
          - entity: cover.rollershutter_dining_room_window
          - entity: cover.rollershutter_kitchen_door
          - entity: cover.rollershutter_kitchen_window
          - entity: cover.rollershutter_master_bedroom_window
          - entity: cover.rollershutter_master_bathroom_window
          - entity: cover.rollershutter_guest_room_window
          - entity: cover.rollershutter_office_window
        show_header_toggle: false
        title: Rollershutters
        type: entities

After restarting Homeassistant there is no icons in my blinds and they dont update when the blind moves. Anyone can guide me in order to solve this issue?

Thanks !!!

jmvaz · March 9, 2020, 11:46pm

Can someone help me here? Thanks

wmaker · March 10, 2020, 8:18pm

Hi, I don’t know anything about the “customizer”, so sorry I can’t help with this directly. However I can make some alternative recommendations:

I have used the Button Card to do this with cover shades:
Lovelace: Button card
This is a very popular custom card, but it is very complex and not for everybody.
But you may want to look instead at the following:
📝 100% Templatable Lovelace Configurations
I have used this to display a cover (tilt blind) icon of my choosing based on state open or closed using a template, and I would think you could use the template based on current_position.
Or even have a look at the following which I have also used for a cover (tilt blind) icons:
Lovelace card-templater card (Jinja2 card templating in Lovelace!)

chhofi · April 24, 2020, 10:46pm

Just add:

customizer:
  custom_ui: hosted

to your

configuration.yaml

file. Than it should work At least that did the trick for me.
For more info look at the “Using” section of the GitHubRep of home-assistant-customizer