Ivo's website

Button+ - Het perfecte smarthome dashboard

Een poosje geleden kondigde Button+ zich aan. Een project wat in 2021 starte, maar recent zijn v2 model aankondigde. Een smarthome display met knoppen, die je kunt koppelen aan HomeAssistant of Homey.

Ja, technische kennis is vereist, wie denkt dat dit plug en play is, lees niet verder, ga terug naar Philips HUE en noem jezelf geen smarthome enthousiast. Maar als JSON, MQTT en Automations in Home Assist niet eng zijn, dan zou ik op bovenstaande link klikken en er een bestellen! Zo ver voor de sales pitch en waarschuwingen.

Wat is het?

In feite is het een ESP32 als baseboard, hierop klik je een selectie van 4 elementen. 1 groot display met knoppen of tot 4 knoppen balken. Op het grote display is wat meer ruimte voor informatie door de 320x240 resolutie. Op de knoppenbalken zit bij iedere knop een klein display voor een 'Top label' en een 'label' of een icoon in SVG formaat.

Uitpakken

Heel eerlijk, het geheel was netjes verpakt tot een brievenbus pakket, elk onderdeel netjes los in een doosje, compleet met schroefjes, een voedingskabeltje, alleen een usb-c kabel miste eigenlijk, maar wie heeft daar niet handen vol van liggen? Ook niet echt een probleem dus. De online handleiding is duidelijk, al zie je zelf snel genoeg hoe je het in elkaar schroeft en schuift. Dan de spanning er op en je ziet een accesspoint online komen om de WiFi in te stellen.

Configureren

Dan is het klaar met de pret, dan moet je configureren! Het display geeft je keurig een IP en als je dat in je browser invult kom je op de webinterface om de naam in te stellen, de kleuren, je MQTT server, display elementen en knoppen aan te maken. Er zijn zowel leds die de muur verlichten aan de achterkant als leds in elke knop, allemaal RGB om een prachtige poppenkast te maken, of gewoon een mooie uitstraling.

Ik heb een paar test velden op het display aangemaakt, evenals de knoppen en dan kun je eigenlijk het beste meteen de JSON exporteren, formatten in je editor en daar in verder werken. De webinterface werkt, maar het is gewoon niet heel snel en soepel.

Het geheel werkt met pagina's, waar het mij het meest logisch leek de knoppen naast het grote display in te zeten om te bladeren. Hiervoor is een configuratie nodig met knoppen op pagina 0, want pagina 0 is een soort default.

Voorbeeld van de linker knop:

    "buttons": [
        {
            "buttonid": "1-0",
            "position": 1,
            "page": 0,
            "toplabel": "",
            "svg": "",
            "longdelay": 40,
            "longrepeat": 15,
            "leds": [],
            "topics": [
                {
                    "brokerid": "home",
                    "topic": "buttonplus/btn_xxxxxx/page/set",
                    "payload": "previous",
                    "eventtype": 0
                }
            ]
        },

De knoppen hebben een id, meestal position-page, welke dan ook de 2 volgende velden zijn. het brokerid "home" is mijn eigen mqtt server, waar de knop zich op aanmeldt als btn_xxxxxx en door je page op previous of next te zetten, blader je hier dus doorheen. Een hard nummer kan ook natuurlijk, zo spring ik vanuit mijn pagina's per kamer naar de muziekpagina van die kamer. En hoe ziet zo'n pagina er dan uit?

Woonkamer

Elke knop heeft immers een aantal topics binnen mqtt waar hij op luistert, zo ook buttonplus/btn_xxxxxx/3-1/svg/set waar ik een branden lampje heen stuur als deze scene actief is in de woonkamer, wordt een andere scene actief of gaat het licht uit, stuur ik een lege payload en verdwijnt het icoon. Ook elk display veld heeft eigen topics in de MQTT tree, hierdoor kun je dus vanuit je home automation gegevens heen sturen.

MQTT

Hier zie je bijvoorbeeld display items 3 en 4, welke voor de mediaspeler pagina in gebruik zijn.

"displayitems": [
    {
            "displayitemid": "3",
            "x": 0,
            "y": 0,
            "page": 8,
            "boxtype": 0,
            "fontsize": 3,
            "align": 1,
            "width": 100,
            "label": "Woonkamer Artiest",
            "unit": "",
            "round": 0,
            "topics": [
                {
                    "brokerid": "home",
                    "topic": "buttonplus/data/sonos/livingroom/artist",
                    "payload": "",
                    "eventtype": 15
                }
            ]
        },
        {
            "displayitemid": "4",
            "x": 0,
            "y": 50,
            "page": 8,
            "boxtype": 0,
            "fontsize": 2,
            "align": 1,
            "width": 100,
            "label": "Titel",
            "unit": "",
            "round": 0,
            "topics": [
                {
                    "brokerid": "home",
                    "topic": "buttonplus/data/sonos/livingroom/title",
                    "payload": "",
                    "eventtype": 15
                }
            ]
        },

In het MQTT screenshot zie je dat hier data heen is gegaan, namelijk de Artiest "Gloria Turrini" met de titel "I'm walking". Dit zie je dan terug op het display:

Display

De 6 knoppen worden vervolgens gebruikt voor play/pause, het groeperen met de keuken, volume en heen en weer skippen. Hiervoor moet je natuurlijk wel de nodige automations in Home Assistant verwerken, want wat als er een liedje via een app, Alexa, NFC kaarten of welke manier dan ook wordt gestart? En hier wordt het dus al snel ingewikkeld, er zijn een hoop edge-cases om over na te denken. Sommige zijn goed op te lossen binnen Home Assistant, andere vereisen iets meer code. Wat vaak de oplossing is, is het sturen van de juiste informatie via MQTT, maar hoe kom je hier aan?

Laten we kijken naar Philips HUE, waar je het licht veelal in scenes aanstuurt. Dat doen we hier met de App, Friends of HUE schakelaars van Niko, Home Assistant of de Button+. De laatste 2, daarvan zien we het aanroepen van de scene netjes als trigger, maar HUE geeft dit niet door, dus schakel je met de app of een knop, dan klopt de informatie niet meer. Gelukkig kun je in Home Assistant voor een ruimte een gemiddelde helderheid in kaart brengen via de groep, in mijn geval "light.woonkamer" waar ik als status attribute de lampen kan zien, maar dus ook de status aan of uit en de brightness. Als je nu een autoation maakt die daar op triggert!

alias: Button+ Woonkamer scene sync
description: ""
triggers:
  - entity_id:
      - light.woonkamer
    trigger: state
    attribute: brightness
conditions: []
actions:
  - variables:
      b: "{{ state_attr('light.woonkamer','brightness') | int(0) }}"
      aan: "{{ is_state('light.woonkamer','on') }}"
      zit: "{{ aan and b == 158 }}"
      tv: "{{ aan and b == 110 }}"
      zittafel: "{{ aan and b == 159 }}"
      uit: "{{ not aan }}"
  - data:
      topic: buttonplus/btn_xxxxxx/button/3-1/svg/set
      retain: true
      payload: >
        {% if zit %} <svg viewBox="0 0 24 24"><path d="M12,6A6,6 0 0,1
        18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1
        9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1
        13,23H11A1,1 0 0,1
        10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"
        fill="white"></path></svg> {% else %}""{% endif %}
    action: mqtt.publish
  - data:
      topic: buttonplus/btn_xxxxxx/button/4-1/svg/set
      retain: true
      payload: >
        {% if tv %} <svg viewBox="0 0 24 24"><path d="M12,6A6,6 0 0,1
        18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1
        9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1
        13,23H11A1,1 0 0,1
        10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"
        fill="white"></path></svg> {% else %}""{% endif %}
    action: mqtt.publish
  - data:
      topic: buttonplus/btn_xxxxxx/button/5-1/svg/set
      retain: true
      payload: >
        {% if zittafel %} <svg viewBox="0 0 24 24"><path d="M12,6A6,6 0 0,1
        18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1
        9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1
        13,23H11A1,1 0 0,1
        10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"
        fill="white"></path></svg> {% else %}""{% endif %}
    action: mqtt.publish
  - data:
      topic: buttonplus/btn_xxxxxx/button/6-1/svg/set
      retain: true
      payload: >
        {% if uit %} <svg viewBox="0 0 24 24"><path d="M12,2A7,7 0 0,1
        19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1
        8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1
        14,22H10A1,1 0 0,1 9,21Z" fill="white"/></svg> {% else %} <svg
        viewBox="0 0 24 24"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16
        15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22
        6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1
        10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"
        fill="white"></path></svg> {% endif %}
    action: mqtt.publish
mode: restart

Een hele lap code, ik weet het. Maar deze automation gaat dus af als er iets in de brightness verandert. Mijn 3 voorgeprogrameerde scene's heb ik hier afgekort met zit, zittafel en tv en met hun eigen brightness stel ik zo de iconen in op de knoppen. De uit knop (6-1) heeft altijd een icoon, dus ook als er licht brandt in een andere scene dan hier opgegeven, zul je dit toch zien op je Button+

Op deze manier, kun je dus heel veel leuke data en iconen instellen op je device, het is even puzzelen, maar na een paar uurtjes heb je dan ook wel een fantastische manier om je smart home nog beter te bedienen!