Nanoleaf scenes

Hey, so I bought a nanoleaf setup and I wonder if it’s possible to make the nanoleaf scenes which I show in the picture, into buttons/switches on my lovelace page. If so, how do I do this?

I’ve been trying! but I haven’t found a way to do this. Was gonna try some fancy stuff with a color gif kinda behind the icon but nothing would pan out.

I understand what you’re going for and I know this doesn’t solve the problem for you but helped me visually recognize the nanoleafs as on. It’s of course very limited but better than the base functionality which is confusing. If you turn nanoleaf blue, the icon will follow the color but if it’s in any sort of effect, it appears as a whiteish gray icon (which looks very similar to unavailable/disconnected/or otherwise not reading the state properly.

It drove me so crazy for weeks that I animated the icons to spin just so I could absolutely be certain that the nanoleaf was on just by looking at lovelace.

Obviously this is silly, but it was the best I could do as a newbie. Then, I learned how to give the icons a glow. I disabled the rotating and added the glow so when I look at any of them, I can be sure they are on. This isn’t my most desirable solution but it’s better than spinning the icon like an insane person.


I configured this pic so you can see the difference in the glow

here’s the card info:

type: custom:button-card
state:
  - value: 'on'
    styles:
      icon:
        - animation: null
        - filter:
            - drop-shadow(0px 0px 4px)
tap_action:
  action: toggle
entity: light.woodleaf
name: Woodleaf
icon: mdi:hexagon-multiple
hold_action:
  action: more-info

It’s subtle enough to where it shows differently than any other “on” device
Here is the video that walks you through adding a glow: Custom Button & Home Assistant - What's next Dave? - YouTube

I’m going to keep following along in case somebody else has solved this problem. I tried to follow the custom icon tutorials to see if I could rig up a state for each scene and select a custom icon based on it but that’s a lot of work for 4 different nanoleafs with 25 scenes each.

Oh ok, ill try this out. Thank you!

Ok, you gave me an idea because you said picture.

You COULD:

Take a video of your scene on your device for just a second. Convert it to gif, then display gif in Lovelace based on device effect. The same guy in the video above has a tutorial on how to do this. I didn’t think about it earlier because he made the whole button a picture gif and that’s not something I was interested in, but I think could theoretically be used for your application. Custom Button Card 3: Home Assistant Icons: Borders, Backgrounds and Advanced Animation - YouTube

I’d have to set up 3 or 4 files to see if I could get it going.

This of course is a stupid amount of work but could be worth it depending on your motovations. I spend TONS of time doing proverbial stupid things in HA.

If this truly interests you, let me know and I’ll fool around with it a little and see what I can cook up. I look for any excuse to talk to somebody about nanoleaf.