Skip to content

3. Configure the flow

Jump to bottom
balk77 edited this page Jan 28, 2024 · 8 revisions

General configuration

Open flow Button+ and open 01 general config. Edit the following to your setup:

// Configuration goes here for this device
var bplusdevice = "wk1"; // no spacess allowed!
var ip = "192.168.1.81"; // IP of your Buttonplus
var basetopic = "buttonplus/" // first level of the mqtt topic, should end with a /
var autobackup = true; // keep at true, unsure what it does
var statusbar = 0; // 0 = hidden, 1 = top, 2 = statusbar at bottom of display

// Number of bars below the ButtonPlus display (0-3) (currently only 3 bars supported)
var numbars = 3;

var mqttbrokerid = "ha";
var mqtturl = "mqtt://192.168.1.7";
var mqttport = 1883;
var mqttwsport = 0;
var mqttusername = "mqtt";
var mqttpassword = "mqtt";
// add pages, should start with "main"; 
// when more pages are added you should change some switch blocks as well
var pages = ["main", "avond", "muziek","overdag"];
var buttonpages = ["main", "avond", "muziek", "overdag"];

bplusdevice is the reference for this device and is used in the MQTT structure. Do not use capitals or spaces. The last two rows are used to define the menus. The main menu is always visible. Do not use a different name. The flow is prepared for 6 menu pages, but can be extended.

Button and display items have their own menu; could be used to create a set of buttons while keeping the display the same. Use case: Music page on display, showing "now playing". Two separate buttonpages; one when streaming music (play/pause/ volume) and one when listening radio (station presets/volume). The flow is preconfigured with 3 menu pages, the same for the display and the buttons.

Button numbering

The buttons are numbered left to right, top to bottom starting at 0. The 2 buttons on the display are thus 0 (left) and 1 (right).

Button assignment to page main

You can assign a button to main so it will always be active. For instance a button to change to the next page. The flow has button 0, 1 and 2 mapped to main. Open node 02 mainbutton and add main behind the buttons you want as main. The other buttons will be part of the menu pages.

Assign labels to the buttons

Open the nodes below 03 Contains the default button labels and setup the labels. You cannot assign labels to button 0 and 1 on the display, but the Set in the change nodes needs to be kept:

Untitled Repeat for all menu pages.

Create Display Items

The next group of nodes contains the configuration of the Display Items. Each Node contains 1 display item (value, label and unit of measurement is 1 display item). Explanation is inside the nodes:

//// Configuration of displayitem
// assign unique number
var displayitem = 1;
// assign to a page by specifying the page id it belongs to
// for instance, when you have this in 01 general config:
// var pages = ["main", "menu_x", "menu_y","menu_z"];
// pageid 1 corresponds to menu_x
var pageid = 0;
//// add characteristics
// position of the item, 0-100
var x = 0;
var y = 0;
// fontsize 1-4 (1 is smallest)
var fontsize = 3;
// width of label, 0-100
var width = 27;
// Default label (above value). Will be overwritten by mqtt
var label = "";
// Default value. Will be overwritten by mqtt
var value = "";
// Default unit of measurement (behind value). Will be overwritten by mqtt
var uom = "°C"
// Value rounding, decimal places
var round = 1;
// alignment, not working well.
var align = 0;

This example places a display item for the Main screen (always visible) at position 0,0 (top left). It is displayitem 1. This number should be unique and is used in the MQTT structure. pageid refers to the menu page it belongs to.

Do not DEPLOY yet!

Open flow Button+ modes

And open node 01 general config. Update this with your chosen device id var bplusdevice = "wk1"; // the device this page belongs to

Deploy!

Press Deploy; The Buttonplus should flash and you should see a skeleton of you display items and buttons. Next step is to feed your B+ with data through MQTT.

MQTT Display subscription topics

The display items subscribe to the following topics:

buttonplus/<device_id>/display/<menu_page>/<displayitem>/value
buttonplus/<device_id>/display/<menu_page>/<displayitem>/label
buttonplus/<device_id>/display/<menu_page>/<displayitem>/uom

Where

  • <device_id> is you selected id, wk1 in this example
  • <menu_page> is the menu page it belongs to, could be main, or music or whatever you configured
  • <displayitem> is the unique display item number you have assigned

You can start feeding the MQTT topics (enable retain!) from your favorite home automation platform. One way to do that from Home Assistant through Node Red to the B+. See examples on flow Button+

MQTT Button subscription topics

By default, the buttons take their configured labels. You can overwrite these labels/led colors using the following topics:

buttonplus/<device_id>/button/<menu_page>/<buttonid>/toplabel
buttonplus/<device_id>/button/<menu_page>/<buttonid>/label
buttonplus/<device_id>/button/<menu_page>/<buttonid>/ledrgb

Where

  • <buttonid> is the button number, starting from 0, from left to right, top to bottom
  • toplabel is the label at the top of the button
  • label the main label
  • ledrgb the color of the led (front and wall together). Decimal color, 0 means off.

MQTT Button publish topics

The buttons publish their click-state to Node Red where the current button menu page is added.

buttonplus/<device_id>/button/<menu_page>/<buttonid>/state
Example:
buttonplus/wk1/button/music/7/state

state can be press, release or longpress. You can let you favorite Home Automation system listen to these topics; I have buttonplus/wk1/button/music/7/state assigned to Volume Up.

The Split topic node on flow Button+ modes also publishes msg.state, msg.buttonpage (the active menu page) and msg.button (button number, 0-7) for inside Node Red.

Clone this wiki locally