How to Create a Custom Lovelace Card for Insteon Scenes

General
1

Hey everyone, I’m really excited to share my journey of integrating Insteon Scenes into Home Assistant using Lovelace. I’ve been using Insteon for years and recently migrated to HA, so I wanted to recreate the functionality I loved from my old setup. Let me walk you through how I did it and hopefully, this will help someone else out there!

The Challenge

I had two keypad controllers set up in my Insteon system, where pressing the A button on either keypad would toggle the same lamp. Holding the button would dim the light. I wanted to replicate this behavior in Lovelace, but it wasn’t straightforward. The keypads are defined as switches in HA, and the lamp is a light entity. In Insteon, they were all linked in a single scene, but in HA, I needed a way to combine these actions into one seamless experience.

The Solution

After some research and experimentation, I found that using a combination card in Lovelace was the way to go. Here’s how I set it up:

  1. Toggle Button for On/Off: I used a standard toggle button to control the lamp’s power state. This was straightforward, as it directly integrates with the light entity.

  2. Slider for Dimming: For the dimming functionality, I added a slider. This allows me to adjust the brightness smoothly, just like holding the button on the keypad.

  3. Automation for the Scene: To mimic the Insteon scene, I created an automation that triggers when the toggle button is pressed. This automation sends the appropriate commands to both the lamp and the keypad switches, ensuring they work in unison.

The Code

Here’s the YAML configuration I used for the Lovelace card:
yaml

  • type: custom:button-card
    entity: light.my_lamp
    name: Lamp Control
    show_name: false
    icon: ‘mdi:lightbulb’
    tap_action:
    action: toggle
    hold_action:
    action: more-info
    style:
    tap_action:
    style:
    color: ‘var(–primary-color)’
    hold_action:
    style:
    color: ‘var(–primary-color)’
    cards:
    • type: slider
      entity: light.my_lamp
      name: Brightness
      show_name: false
      icon: ‘mdi:lightbulb-outline’
      style:
      icon:
      color: ‘var(–primary-color)’

The Result

Now, I have a single card in Lovelace that combines both the toggle and slider functionality. Pressing the button toggles the lamp on/off, and holding it brings up the brightness slider. This setup perfectly replicates the behavior of my Insteon system, and I couldn’t be happier with the result!

Tips for Others

  • Experiment with Cards: Lovelace has a wide range of cards and custom integrations that can help you achieve complex functionalities.
  • Use Automations: Automations are incredibly powerful for linking entities together and creating seamless user experiences.
  • Customize Your UI: Don’t be afraid to tweak the styling and layout to match your preferences. A well-designed UI makes all the difference!

If anyone has questions or suggestions, feel free to drop a comment. I’m always happy to help and learn from others’ experiences! :rocket: