Ken
?
I have attache a demo flow you can use to follow along below.
?
First, for sending images to the buttons, you must send the following object.
?
{"event":"setImage","device":"3B4A178B0FA8D7408582138E1F192969", "context":"b92505aa7b38be8abe13cb04ee0c242e", ?
"payload":{"image":"data:image/svg+xml;charset=utf8,<svg viewBox = \"0 0 72 72\" width = \"72\" height = \"72\" ><rect width=\"72\" height=\"72\" style=\"stroke: rgb(0, 0, 0); fill: red; fill-opacity: 1;\"></rect><text style=\"fill: white; font-family: Arial, sans-serif; font-size: 25px; white-space: pre; text-anchor: middle;\" x=\"36\" y=\"30\" bx:origin=\"0.5 0.479796\">Red </text><text style=\"fill: blue; font-family: Arial, sans-serif; font-size: 15px; white-space: pre; text-anchor: middle;\" x=\"36\" y=\"50\" bx:origin=\"0.5 0.479796\">On </text></svg>"}}
?
event is the action you want to command to the button, in this case, "set image". ? See the StreamDeck developer document for all the available actions.
?
context is the button identification, not to be confused with the "id" you assigned the button in the config panel. ?This number is sent when you first push the button, so that future commands from Node-Red can use this id to oommand the button. ? ?Because your button graphics are not updating, I suspect you are not using the correct context number.
?
In this case, the payload is a SVG image to build a red background and some test of various size, position, and color.
?
?
Attache is my version of the SD Flow. ?It uses the same concepts that Warren showed you, but different coding.
?
The function, ""Process Stream Deck Input" will, for each unique button id (the name you gave the button) but into Node-Red flow context the context (button) and the device numbers. ?Below is the example for the button we pushed, above. ? The "device' number can be included in the command object, if you have multiple Stream Deck devices.
?
?
{"context":"b92505aa7b38be8abe13cb04ee0c242e",
"device":"3B4A178B0FA8D7408582138E1F192969",
"id":"toggle","
server":"ws://192.168.70.38:1880/streamdeck"}
?
?
Ok, Now we have everything in flow context to use the button id to search for the correspoiding context (button) and device numbers.
?
Lets look at this flow that build a gauge. ? In this gauge, we have multiple SVC components, that can be modified to your situation:
?
?
The "Build Streamdeck Button", has pre build SVG elements, background, gauge, text one, text two, switch icon, mic icon, speaker icon, and image.
?
?
At the bottom of this function, you build the button with the SVG elements you desire, in the case of the above gauge button, the line is:
?
msg.payload = "data:image/svg+xml;charset=utf8,<svg " + view_box + defs + background + text_one + text_two + gauge + speaker_icon + "</svg>"
"data:image/svg+xml;charset=utf8,<svg " + view_box + defs + background ?>>> is boiler plant that Stream deck needs to build the SVG image.
?
"</svg>" is the end of the SVG line.
?
The desired SVG elements are added between, derived from the element variable names above. In this case, we are using text_one, text_two, gauge, and speaker_icon.
?
Now, how to add the variables to change the SVG file to make the button dynamic. See the "Button Config" function. You can hardcode any of the gauge button parameters or you can input a dynamic value from other pass of your floe
?
In this example, the msg.gauge_pixels, is derived from the msg.payload input.....note, full scale on the gauge is 72 pixels.
?
You can also control the "tick" mark on the gauge.
?
Here is the full configuration for the gauge:
// gauge full scale = 72 pixels
msg.gauge_pixels = msg.payload
msg.tick_pixels = msg.tick
msg.icon_color = "white"
msg.icon_opacity = "0.35"
msg.tick_color = "red"
msg.background_opacity = "0.5"
msg.background_color = "black"
msg.gauge_text_low = "-90"
msg.gauge_text_hi = "-10"
msg.gauge_color_low = "white"
msg.gauge_color_hi = "red"
msg.gauge_x = "10"
msg.one_text = msg.payload
msg.two_text = "Mic Level"
msg.text_one_color = "white"
msg.text_two_color = "red"
msg.font_one_size = "20px"
msg.font_two_size = "15px"
msg.text_one_anchor = "middle"
msg.text_two_anchor = "middle"
//Note: possible anchors are: start, middle, end
msg.one_x = "36"
msg.two_x = "36"
msg.one_y = "56"
msg.two_y = "68"
msg.id = "meter"
return msg;
?
OK, now we must build the object to command Stream Deck to build the button with the SVG image.
?
It is the same object we did for the simple red background image above, but it now contains the SVG elements to build the gauge button:
?
{"event":"setImage","device":"3B4A178B0FA8D7408582138E1F192969",
"context":"b1dd149bf270a96f2b25544c204dd46f",
"payload":{"image":"data:image/svg+xml;charset=utf8,<svg viewBox = \"0 0 72 72\" width = \"72\" height = \"72\" ><defs><linearGradient gradientUnits=\"userSpaceOnUse\" id=\"linear\" x1=\"0px\" y1=\"0px\" x2=\"72px\" y2=\"8px\" gradientTransform=\"matrix(1, 0, 0, 1, 0, 0)\"><stop offset=\"0\" stop-color=\"green\"></stop><stop offset=\"0.3\" stop-color=\"#ff0\"></stop><stop offset=\"0.8\" stop-color=\"#f00\"></stop></linearGradient></defs><rect width=\"72\" height=\"72\" style=\"stroke: rgb(0, 0, 0); fill: black; fill-opacity: 0.5;\"></rect><text style=\"fill: white; font-family: Arial, sans-serif; font-size: 20px; white-space: pre; text-anchor: middle;\" x=\"36\" y=\"56\" bx:origin=\"0.5 0.479796\">25 </text><text style=\"fill: red; font-family: Arial, sans-serif; font-size: 15px; white-space: pre; text-anchor: middle;\" x=\"36\" y=\"68\" bx:origin=\"0.5 0.479796\">Mic Level </text><g transform=\"matrix(1, 0, 0, 0.995671, -0, 10)\"><title>Gauge</title><rect x=\"4\" y=\"8\" fill=\"#29ABE2\" width=\"64\" height=\"2\"></rect><rect x=\"4\" y=\"20\" fill=\"#29ABE2\" width=\"42\" heig..."}}
?
Here is the magic, You enter the "id" of the button. In our case, we entered the id as "gauge" in the StreamDeck config
?
?
?
And, on our node-red flow, for the gauge demonstration, we enter the same id name.
?
Using the button id name, the "ContextR1" uses the button name to find the corresponding button context in flow context.
?
The "Set Image" function then builds the command object to send to StreamDeck via the WS Proxy socket.
?
?
?
