Honeycomb Module: Hex PopUp Menu for Home Assistant

True Home Assistant tinkerers are always looking for ways to up their dashboard game. Dev Sian-Lee-SA created a cool Honeycomb Menu which pop ups when defined as an action in any card. It presents a hexagonal shaped menu which you can style to your liking and use as a quick action toggle for many things. It’s pretty good looking, slick and has great usability for a mounted wall tablet. Whether this scratches that dashboard itch is up for you to decide, Let’s see how it works!

Installation

HACS

The Honeycomb Menu is available in the Home Assistant Community Store (HACS). 

1. Open HACS
2. Click Frontend
3. Click + Explore and download repositories
4. Search for “honeycomb”
5. Click + Download this repository with HACS
6. Reload resources

Manual

1. Download the honeycomb-menu.js file and copy it into your config/www folder
2. Add a resource reference to it. On the HA UI, navigate to Configuration -> Dashboards -> Resources. Visit the Registering resources page on the Home Assistant support site for more information.
3. Click on the + Add Resource button
4. Type /local/honeycomb-menu.js into the URL field and make sure the resource type field says Javascript Module
5. Hit create

IMPORTANT: Thomas Loven’s card-tools are a requirement for the Honeycomb Module. Make sure you install this module as well, manually or from HACS.

KEEP IN MIND: Honeycomb Module uses a modified system of button-card‘s templating system. It is also built with this card as a base, so it works best when used together. Some variables honeycomb pulls directly from button-card so a little different configuration is needed when using other cards as a base. Templates to reduce clutter are also usable only when defined for button-card.

How to Use

Like in any of our tutorials, we are going to show you how this Honeycomb module works through examples and provide the YAML code for each one, for easy copy-paste. We will try to cover a wide scope of use cases which hopefully will give you some ideas for using Honeycomb. A little bit of info:

• Honeycomb Menu is a module, not a card
  • A base card need to be created, and honeycomb executed as a call-service
  • A call-service can be executed in many ways in HA, but in this tutorial we are going to use actions defined in cards
• We’re going to base our design on Mushroom Cards (see tutorials: Part 1, Part 2)

Creating a base card

For the purpose of this tutorial, we will use simple cards and just define actions for them. Let’s create a simple horizontal stack of three Mushroom cards: entity, light & alarm card.

Now, to execute the Honeycomb menu, we will define the following actions:

• tap_action: Honeycomb menu for quick controlling our entity (Bravia TV)
• hold_action: Honeycomb menu for various light entity settings (Wall Light 1)
• tap_action: Honeycomb menu for controlling our alarm entity (Apartment)

Example 1: Simple TV Remote

To construct a Honeycomb menu, we define buttons as a variable. Each of these buttons is a separate hex on the Honeycomb and a total of 6 (0-5) can be defined. We will define simple actions for each button and look into styling and more complex configuration as we go through the tutorial.

To define the separate buttons, first we need to set the honeycomb service call for our entity:

type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
tap_action:
  action: call-service
  service: honeycomb
.....

If you tap your card without buttons defined, you will notice honeycomb pops up empty. This means the service call is working and we can continue. To define the buttons, we will simply create a list of icons, which will initially position each button in the Honeycomb:

type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
hold_action:
  action: toggle
tap_action:
  action: call-service
  service: honeycomb
  service_data:
    buttons:
      - icon: mdi:volume-plus #0
      - icon: mdi:volume-minus #1
      - icon: mdi:volume-mute #2
      - icon: mdi:television-classic #3
      - icon: mdi:television-classic-off #4
      - icon: mdi:play-pause #5

Now, when you click your entity TV card a full Honeycomb menu will appear. You will notice your buttons are positioned in order like you defined them, starting with 0.

The middle button or pad is used to control things such as light brightness, opening or closing shutters, covers and much more. It can travel horizontally (X), vertically (Y) or in both directions (XY). We will look into the pad a bit later.

Depending on your theme, you may notice the buttons have transparent backgrounds, which we can style and colorize afterwards. For now, we will focus on the button actions themselves.

We can define simple actions to these buttons we created and test them out. The icons themselves are already self-explanatory, so we just need to execute the appropriate service call for each. Example:

type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
hold_action:
  action: toggle
tap_action:
  action: call-service
  service: honeycomb
  service_data:
    buttons:
      - icon: mdi:volume-plus
        tap_action:
          action: call-service
          service: media_player.volume_down #Volume down
          service_data:
            entity_id: media_player.bravia_tv
      - icon: mdi:volume-minus
        tap_action:
          action: call-service
          service: media_player.volume_up #Volume up
          service_data:
            entity_id: media_player.bravia_tv
      - icon: mdi:volume-mute
        tap_action:
          action: call-service
          service: media_player.turn_mute #Mute
          service_data:
            entity_id: media_player.bravia_tv
      - icon: mdi:television-classic
        tap_action:
          action: call-service
          service: media_player.turn_on #Turn ON tv
          service_data:
            entity_id: media_player.bravia_tv
      - icon: mdi:television-classic-off
        tap_action:
          action: call-service
          service: media_player.turn_off #Turn OFF tv
          service_data:
            entity_id: media_player.bravia_tv
      - icon: mdi:play-pause
        tap_action:
          action: call-service
          service: media_player.media_play_pause #Play/pause
          service_data:
            entity_id: media_player.bravia_tv

This is the simplest way to define Honeycomb buttons. As we go, things are going to become more complex, but this should be no problem for HA enthusiasts.

Example 2: Light Control

Lets assume our light is dimmable and we would like to control it’s brightness as well. We can achieve this using the middle button or pad. Both vertical and horizontal axis can be defined (X & Y). In this guide, we will define only the X. We can assign simple actions to the other buttons, control other entities or skip some buttons all together.

type: custom:mushroom-light-card
layout: vertical
entity: light.kids_room_l1
hold_action:
  action: call-service
  service: honeycomb
  service_data:
    entity: entity
    xy_pad:
      x:
        service: light.turn_on
        service_data:
          entity_id: light.kids_room_l1
          brightness_step_pct: '{{ x_percentage / 5 }}'
    buttons:
      - icon: mdi:lightbulb
        tap_action:
          action: call-service
          service: light.turn_on
          service_data:
            entity_id: light.kids_room_l1
      - icon: mdi:lightbulb-on
        tap_action:
          action: call-service
          service: light.turn_off
          service_data:
            entity_id: light.kids_room_l1
      - show: false
      - icon: mdi:light-flood-down
        tap_action:
          action: call-service
          service: light.turn_on
          service_data:
            entity_id: light.sonoff_terrace
      - icon: mdi:wall-sconce
        tap_action:
          action: call-service
          service: light.turn_on
          service_data:
            entity_id: light.wall_light_2
      - show: false

The position of the X-pad will step brightness up and down depending on our defined brightness_step_pct variable. The further you move the slider, the faster the brightness will change as the X variable is derived from distance of the center calculated in pixels. The same applies for the Y variable (vertical).

Similar services can be setup for hue, saturation, color or for controlling cover entities such as blinds, shutters, fans. We just need to call on the appropriate service. For example:

xy_pad:
  y:
    service: cover.set_cover_position
    service_data:
      entity_id: cover.garage_door
      position: '{{ y_percentage / 10 }}'

xy_pad:
  x:
    service: fan.increase_speed
    service_data:
      entity_id: fan.living_room
      percentage_step: '{{ x_percentage / 15 }}'

With a little bit of styling magic, some icons and scripts positioning and we get this:

Example 3: Alarm Control

As a third example, we are going to setup an Alarm card with arming and disarming functions. Assuming you already have an alarm system integrated in Home Assistant, we are going to create scripts to execute alarm commands, such as arm home, arm away, disarm. You can read this guide (Alarmo) for setting your very own DIY alarm system.

First, we create a couple of scripts based on the built-in Home Assistant alarm system which we will execute using Honeycomb buttons. Although scripts are not necessary, we will use them here as a way of reducing clutter:

#Arm Home
alarm_arm_home:
  alias: Arm Alarm in Home Mode
  sequence:
    - service: alarm_control_panel.alarm_arm_home
      data:
        code: "1234"
      target:
        entity_id: alarm_control_panel.apartment
  mode: single

#Arm Away
alarm_arm_away:
  alias: Arm Alarm in Away Mode
  sequence:
    - service: alarm_control_panel.alarm_arm_away
      data:
        code: "1234"
      target:
        entity_id: alarm_control_panel.apartment
  mode: single

#Arm Night
alarm_arm_night:
  alias: Arm Alarm in Night Mode
  sequence:
    - service: alarm_control_panel.alarm_arm_night
      data:
        code: "1234"
      target:
        entity_id: alarm_control_panel.apartment
  mode: single

#Disarm
alarm_disarm:
  alias: Disarm Alarm
  sequence:
    - service: alarm_control_panel.alarm_disarm
      data:
        code: "1234"
      target:
        entity_id: alarm_control_panel.apartment
  mode: single

Now we add these scripts to our Honeycomb Menu, which will execute the appropriate call service with the click of a button.

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.apartment
layout: vertical
tap_action:
  action: call-service
  service: honeycomb
  service_data:
    size: 500
    spacing: 10
    buttons:
      - icon: mdi:shield-home
        tap_action:
          action: call-service
          service: script.alarm_arm_home
      - icon: mdi:shield-key
        tap_action:
          action: call-service
          service: script.alarm_arm_away
      - show: false
      - icon: mdi:shield-moon
        tap_action:
          action: call-service
          service: script.alarm_arm_night
      - icon: mdi:shield-off
        tap_action:
          action: call-service
          service: script.alarm_disarm
      - show: false

Like we mentioned, you could call the service directly within the card, but by using a script you will significantly reduce clutter in your YAML. We get something like this as an end result:

Styling

You will notice the Honeycomb in the last example is enlarged and spaced out. There are many variables we can configure to style the Honeycomb Menu. Color, size, spacing and even an audio file can be loaded to play whenever a button has been tapped.

So lets change the color of the honeycombs. If we define color_type: card it will colorize the background of the button. If we define it as color_type: icon it will colorize only the icon.

#Button Color Type
type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
tap_action:
  action: call-service
  service: honeycomb
  service_data:
    buttons:
      - icon: mdi:volume-plus
        color_type: card #or icon
        color: green
      - icon: mdi:volume-minus
        color_type: icon #or card
        color: steelblue
.....

Next, let’s say we want to increase the size of the menu and add some more spacing in between the buttons. We can use the size and spacing variables, both declared in pixels. To match the icon size of our new button size, we need to increase it using the styles variable.

#Honeycomb Size and Spacing
type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
tap_action:
  action: call-service
  service: honeycomb
  service_data:
    size: 500
    spacing: 10
    buttons:
      - icon: mdi:volume-plus
        color_type: card
        color: green
        styles:
          icon:
            - width: 70%
      - icon: mdi:volume-minus
        color_type: card
        color: steelblue
        styles:
          icon:
            - width: 70%
......

We can add audio file to be played whenever a button has been pressed. To do this, upload a sound file to www/media folder (local=www) and than define it in the card:

#Button Audio File
type: custom:mushroom-entity-card
entity: media_player.bravia_tv
layout: vertical
tap_action:
  action: call-service
  service: honeycomb
  service_data:
    size: 500
    spacing: 10
    audio: /local/media/pin-drop.ogg
    buttons:
      - icon: mdi:volume-plus
        color_type: card
        color: green
.....

Further, we can set some default values by editing our theme. Whatever layout you create later, will inherent these values. You will need to manually override them if you want to change them to something else. Add these lines to your theme.yaml file.

styles {
    --honeycomb-menu-icon-color: var(--paper-item-icon-color);
    --honeycomb-menu-icon-active-color: var(--paper-item-icon-active-color);
    --honeycomb-menu-background-color: var(--paper-card-background-color);
    --honeycomb-menu-active-background-color: var(--paper-card-active-background-color, var(--paper-card-background-color));
    --honeycomb-menu-disabled: #9a9a9a6e
}

Templates

Templates can be defined for the Honeycomb Menu to minimize clutter, offer reusability and keep things neat and consistent. We can do this by creating a template for button-card, as they only work with this card as a base. To do this, we create a template under the button_card_templates: variable in the raw configuration editor of our dashboard.

Let’s say we are defining a template for lights, as they tend to be repetitive in their function and configuration. We define every variable we want: color, size, type, buttons, actions, entities and we place it above everything else in the configuration editor:

#Honeycomb Template defined in button-card
button_card_templates:
  light_honeycomb:
    entity: light.kids_room_l1
    hold_action:
      action: call-service
      service: honeycomb
      service_data:
        entity: entity
        xy_pad:
          x:
            service: light.turn_on
            service_data:
              entity_id: light.kids_room_l1
              brightness_step_pct: '{{ x_percentage / 5 }}'
        buttons:
          - icon: mdi:lightbulb
            color_type: card
            color: green
            styles:
              icon:
                - width: 70%
            tap_action:
              action: call-service
              service: light.turn_on
              service_data:
                entity_id: light.kids_room_l1
          - icon: mdi:lightbulb-on
            color_type: card
            color: steelblue
            styles:
              icon:
                - width: 70%
            tap_action:
              action: call-service
              service: light.turn_off
              service_data:
                entity_id: light.kids_room_l1
          - show: false
          - icon: mdi:light-flood-down
            color_type: card
            color: red
            styles:
              icon:
                - width: 70%
            tap_action:
              action: call-service
              service: light.turn_on
              service_data:
                entity_id: light.sonoff_terrace
          - icon: mdi:wall-sconce
            color_type: card
            color: orange
            styles:
              icon:
                - width: 70%
            tap_action:
              action: call-service
              service: light.turn_on
              service_data:
                entity_id: light.wall_light_2
          - show: false
title: Home
views:
  - title: Home
    path: home
.....

Entities can remain undefined, or replaced later when adding the card. Than we simply set the template in our new card and replace the dynamic content e.g. the new light we want to inherit these attributes:

type: custom:button-card
template: light_honeycomb
entity: light.bar_lights

The honeycomb menu will display the same button configuration without further setup. This significantly reduces clutter and makes reusability easy.

Summary

These are the basic principles and configuration variables of the Honeycomb Menu. When templating is involved, there is almost no limit to what can be achieved. Paired with the versatility of the custom:button-card you can customize your dashboard however you like.

In this tutorial, we used Mushroom Cards as a base, to show you that Honeycomb works with any card whose actions can be defined. In reality, we do not even need a card to popup the module. The call-service can be called upon by many things in Home Assistant, such as timers, MQTT events, input helpers and much more.

All use cases and example are too much for a single tutorial, but if you have questions and need help please leave a comment, we are happy to help.