Hey Ken,
?
Glad you have made progress!? ?Alan has extended my "Create Basic Button" idea to have more of the fun graphic stuff, which is what I was implying could be done.
I'll let Alan keep guiding you deeper with extending the options for SVG on-the-fly.? My intent was to get you to write dynamic code and not rely on hard wired PNG files.
?
Yes, the "context" is just a Globally Unique Identifier (GUID) generated when you create a button in the Stream Deck software.? It's just a 32 byte long string of characters. When you press that button, the data that comes into the websocket in node has that GUID passed as a unique way to identify that particular button.? When your code sends data back to the Stream Deck, that context is used by the Stream Deck software to figure out which button to update.? Since you got to pick the "id" (Button ID), that isn't guaranteed to be
unique. The context is used to figure out which button to change.? After all, you could have more than one button with the same "ID"
?
If you select "Context Data" in the node-red workspace screen, then scroll down and open up "Global", (click on the "refresh" icon next it too)
You should see a variable called streamdeckContexts?It is an array object, so the first time you press a Stream Deck button, you should see an element appear in this variable.
?
In my example flow, there are four buttons with id's "ant1", "ant2", "ant3" and "ant4"? So, after I have pressed each button at least one time, the streamdeckContexts variable
will look like this:
?
{"ant1":"3aa25e8c4ed77976f4afae17e3171bfc","ant2":"1c9dfb8c2c35247a16cf3bbb1163da03","ant3":"ea87d6a6cb3a7d86ba5853cb4c75a1de","ant4":"ad37919469130768e4185539fa9e6d12"}
?
(your GUIDs will be different than mine!)
?
You can see each button has a 32 byte identifier collected in this array.? When you get to the last part of your code that generates the data to send back to the Stream Deck device,??the sd-output node does a lookup in this context array of the "button ID" that you want to update, and then grabs the button context string to pass along to the Stream Deck.
?
My sample flow included a Function node called "Format for SD" which isn't magical as it was just the original Stream Deck out node code, stripped down.? However, it appears you didn't use it originally and ran into the quirk I've found with the Stream Deck Out (sd-output) node --and that is, the design time parameters take precedence over runtime variables being passed in.? That bit caught you out (as it has me)?
?
So I present two? Stream Deck node Quirks:
?
Rule 1:? If you use the sd-input node (which is just fine) you must always configure the preceding WebSocket In node to Send/Receive "payload"? If you set it to "Entire message",
a couple bad things happen in the following sd-input node as it is poorly written and stupidly attempts to do a JSON conversion on an input that is already a JSON object.? The result is, you will see an error in the Debug window stating "SyntaxError: Unexpected token o in JSON at position 1"?
?
If you see your sd-output node show "no context", this issue is likely the cause as the code bails out with the above error before it stuffs your button's GUID into the Global streamdeckContexts variable.? ?Another reason you might see the sd-output node show "no context" is if you don't have your Stream Deck plugged into the USB port!
?
I have written my own "sd-input" function that handles this situation with a single extra line that bypasses the JSON.parse(msg.payload); statement if the payload needs that conversion.? i.e.
if (typeof msg.payload == "string")
? ? msg.payload = JSON.parse(msg.payload);
?
I've run into this issue when importing sample flows from this group!? My custom sd-input ignores this issue and also keeps track of the device identifier from the Stream Deck device as part of caching?the button context.? This allows using more that one Stream Deck with the same named button actions and they can all get broadcasted updates from each other.
?
So, just configure your websocket in to output "payload" and life will get better for you.? (double click the node, then click on the "edit pencil" button on Path, to see the configured value.
?
Rule 2:? Don't set ANYTHING at design time on Properties sheet for the sd-output node!? ?The code in the sd-output node will assume you want the design-time values and ignore runtime values passed into it. ??If you do, remove the node, and add it back into the flow without touching any properties.? ?You could also delete the Configuration Node data for that node and start it over as well.?
?
That's the two biggest rules you need to pay attention to.? There could be more.
?
I've modified my sample flow to be a complete working sample.? All you need to do is create four buttons in your Stream Deck with the ids of ant1, ant2, ant3 and ant4, Point each button to the ip address and port of your node red instance with the WebSocket endpoint of /4way? For example "ws://192.168.1.100:1880/4way
?
Also for each button, click the little down arrow at the end of the Title line (after the "T") and uncheck the "Show Title" option.? You don't want the button to have your title superimposed on top of your dynamically generated button graphic.
?
I've attached the fully working flow of the 4-Gang dynamic two line button example to this message.
?
Warren, KD4Z
?
?
?
?
