User programmed commands

Dashboard
1

Is there a way to allow users to select a timeline of commands for a device to do? For example, say the application is a wheeled robot. The user wants it to go forward for one yard, then move left for two yards, forward for two yards, whatever.

Is there a way to implement a GUI that allows the user to self-program commands? I am thinking something like a drag and drop boxes (similar to how Trello boards work). Although, just allowing a user to parse "film strips" together--somehow--and see the sequence of what they built on the dashboard would be good enough.

2

In a word - yes.

However you will need reasonable web dev skills to achieve this as it is quite bespoke (there is nothing"off the shelf" within node-red to do this).

It would be easier to start basic. E.g.. use a text input and design something easy to parse.

E.g...

SPEED=5,DIR=-90,DIS=700
SPEED=4,DIR=0,DIS=1500

Then once you have your logic working look into something more adventurous for the UI. Perhaps search the internet for jQuery drag and drop and use it in a UI template.

1 Like
3

There is also the node-red blockly node that lets you assemble blocks.

4

oh yeah - good call - I was thinking solely of the dashboard.

5

Users will not have access to Node-RED. They will only see the Dashboard.

I know only basic programming :confused:

6

In that case I suspect Node-RED may not be the tool you need.

7

Isn't Node-RED JavaScript?

Couldn't any one of these examples be used for the Dashboard? (Click "Run Pen" and then "JS" in the CodePen Angular boxes.)

8

Yes

Yes

However - it goes back to this...

The key parts being "you will need reasonable web dev skills" and "nothing"off the shelf" within node-red to do this"

Dave was simply stating "I suspect Node-RED may not be the tool you need" in response to your comment "I know only basic programming"

by all means - give it a go & come back with specific questions when you get stuck - I find people get the most support when they have tried and failed (as opposed to asking for an overall solution)

1 Like
9

But those examples are very close to "off the shelf"--aren't they? I'm not looking for a final solution to just edit. I'm just looking for a vague direction that it is possible for a user to control the logic or the sequence of actions the "robot" will take.

So I was really asking two questions. Is the drag and drop functionality possible? Yes (examples). I'm more concerned about if a user can cause a certain sequence of events to occur from the dashboard. Please help me with some direction there.

10

Its just WEB so the answer is yes.

  • Install dashboard nodes.
  • Drop a UI_template on
  • try some of the examples you have found.
  • Dont forget to read the built in help on the UI_template (it tells you how to pass values between client (users browser) and server (node-red))

And lastly, as you are quite new to node-red and programming...

I recommend watching this playlist: Node-RED Essentials. The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

11

I have implemented Node-RED programs before. Thank you for trying to help, but this information does not look helpful. It is too general for the specific question: Can a user control logic, events to be carried out from the Dashbaord (beyond the developer IDE).

I realize a user can control values (e.g., dials, enter in numbers) on the Dashboard. I created a few Node-RED programs with user controllable sliders and such. Although, what examples are there for a user to control which actions (e.g., go forward, stop, move to the left, then move in a circle) to take via the Dashboard?

Say I get the drag-and-drop functionality working. Then, I'm going to need some direction: if the user drags [this box] to [this location], how will the action be carried out? It's almost like having the blockly code externally editable (rather than internally from the developer's sandbox).

The goal is to allow users to edit the sequence of events on the fly. Imagine parsing together three film strips. There would be six possible unique sequences...

12

TBH, your request is incredibly vague - I am not certain you cannot expect generic answers :man_shrugging:

for example ...

I dont beleive I have seen any example dashboard that is setup in this mannor - but it is certainly possible.

And, it is not entirely clear what are you asking here.
Are you asking how to write the dashboard? Are you asking how to move a "device" that you have not yet described? how is this "device" controlled? etc etc.



what action? do you mean how have the dashboard tell node-red to tell the "device" to move?
well - dashboard can send messages to node-red. node-red can tell your "device" to move. you need to impliment the logic (n node-red) to interpret the commands entered by the user (in the dashboard).

As I said earlier, you might want to start simple with a text box...



So add a ui_template, try some of the examples you found (or the text box version I suggested as a starter), get it to send a message to node-red. When you have the users "moves" in node-red, use the nodes (like switch, change, function) to interpret the array of commands & send them to your "device".

I will probably bow out of this conversation now. I am sorry I cant be of more help other than to say - it is all possible, give it a go, see where you get to.

13

Sorry for being blunt before. What action? Any true/false action.

In other words, say there are three actions the user can choose: forward, backward, spin. I want the Dashboard to allow the user to control the sequence of those actions or to allow any number of unique actions (per the application). Say one user wants it just to spin in a circle (arbitrary action for the example). Say another user wants a device to go forward, forward again and then spin in a circle.

Is that less vague? It's just to allow the user to control events. It could be a robot moving. It could be a door opening/closing. Logic: if this box is chechmarked or if this box is dropped on this location on the dashboard, then do X action.

14

Here's the basics for collecting bunch of commands and show them on dashboard but definitely missing any launching logic of commands in sequence.

[{"id":"b43f2ef8.dc399","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"2","height":"1","passthru":false,"label":"FORWARD","tooltip":"","color":"","bgcolor":"","icon":"","payload":"forward","payloadType":"str","topic":"","x":260,"y":160,"wires":[["1aed67eb.171c48"]]},{"id":"c831d26e.63827","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"2","height":"1","passthru":false,"label":"BACKWARD","tooltip":"","color":"","bgcolor":"","icon":"","payload":"backward","payloadType":"str","topic":"","x":270,"y":200,"wires":[["1aed67eb.171c48"]]},{"id":"c09001a2.8c29f","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":0,"width":"2","height":"1","passthru":false,"label":"SPIN","tooltip":"","color":"","bgcolor":"","icon":"","payload":"spin","payloadType":"str","topic":"","x":290,"y":240,"wires":[["1aed67eb.171c48"]]},{"id":"1aed67eb.171c48","type":"function","z":"9038de34.04db3","name":"","func":"var commands = flow.get('commadns') || []\nmsg.topic = 'collect'\nswitch(msg.payload){\n    case 'spin':{\n        commands.push(msg.payload)\n        break\n    }\n    case 'forward':{\n        commands.push(msg.payload)\n        break\n    }\n    case 'backward':{\n        commands.push(msg.payload)\n        break\n    }\n    case 'clear':{\n        commands = []\n        break\n    }\n    case 'run':{\n        msg.topic = 'start'\n    }\n}\nflow.set('commadns',commands)\nmsg.payload = commands\nreturn msg\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":480,"y":240,"wires":[["11c1b4d3.f010ab","fc0a271d.7130c8"]]},{"id":"375a5fb5.ef5a6","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":3,"width":0,"height":0,"passthru":false,"label":"CLEAR","tooltip":"","color":"","bgcolor":"","icon":"","payload":"clear","payloadType":"str","topic":"","x":270,"y":300,"wires":[["1aed67eb.171c48"]]},{"id":"78c3c66d.e31928","type":"ui_button","z":"9038de34.04db3","name":"","group":"855d3e6d.56036","order":3,"width":0,"height":0,"passthru":false,"label":"RUN","tooltip":"","color":"","bgcolor":"","icon":"","payload":"run","payloadType":"str","topic":"","x":270,"y":340,"wires":[["1aed67eb.171c48"]]},{"id":"11c1b4d3.f010ab","type":"debug","z":"9038de34.04db3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"y":240,"wires":[]},{"id":"c5be3507.b37de8","type":"ui_template","z":"9038de34.04db3","group":"855d3e6d.56036","name":"","order":5,"width":"6","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":510,"y":440,"wires":[[]]},{"id":"fc0a271d.7130c8","type":"function","z":"9038de34.04db3","name":"","func":"msg.payload = msg.payload.join('<br>')\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":470,"y":380,"wires":[["c5be3507.b37de8"]]},{"id":"855d3e6d.56036","type":"ui_group","z":"","name":"DEFAULT","tab":"7179c13.0628d4","order":2,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
15

OK. What nodes are needed to do this?

16

Almost all dashboard nodes can send a message to node-red.

Start small. Perhaps add 3 buttons & name them forward, backward, spin. Have them send something with a topic and payload that you can distinguish in the node-red side. Get your node-red logic working.

Then look at the UI_Template to generate a more complex drag and drop affair (the built in help on the ui_template tells you how to send a msg from dashboard to node-red)

If you find the dashboard to be too restrictive, then look at using uibuilder where you have complete control over the web pages to design,

1 Like
17

It's certainly easy to create something like a joystick keypad
image
out of buttons. But there is no concept of actions in order or time within the dashboard.

18

Hello,
Dont know if something as simplistic as this could work:

image
image750Ă—1070 75.6 KB
image
image1356Ă—564 99.3 KB

[{"id":"8f66fca2.30a2c","type":"ui_button","z":"8dcb5519.97c368","name":"","group":"f2b3b649.3a0428","order":2,"width":0,"height":0,"passthru":false,"label":"forwards","tooltip":"","color":"","bgcolor":"","icon":"","payload":"forward","payloadType":"str","topic":"","x":220,"y":360,"wires":[["74feed45.2c380c"]]},{"id":"6e440910.6bb2c8","type":"ui_button","z":"8dcb5519.97c368","name":"","group":"f2b3b649.3a0428","order":1,"width":0,"height":0,"passthru":false,"label":"backwards","tooltip":"","color":"","bgcolor":"","icon":"","payload":"backwards","payloadType":"str","topic":"","x":230,"y":420,"wires":[["74feed45.2c380c"]]},{"id":"748ce9d1.9924f8","type":"ui_button","z":"8dcb5519.97c368","name":"","group":"f2b3b649.3a0428","order":3,"width":0,"height":0,"passthru":false,"label":"turn left","tooltip":"","color":"","bgcolor":"","icon":"","payload":"left","payloadType":"str","topic":"","x":220,"y":480,"wires":[["74feed45.2c380c"]]},{"id":"2fd0ce4b.ccbf5a","type":"ui_button","z":"8dcb5519.97c368","name":"","group":"f2b3b649.3a0428","order":4,"width":0,"height":0,"passthru":false,"label":"turn right","tooltip":"","color":"","bgcolor":"","icon":"","payload":"right","payloadType":"str","topic":"","x":220,"y":540,"wires":[["74feed45.2c380c"]]},{"id":"a84a1d4f.fc84a","type":"ui_text","z":"8dcb5519.97c368","group":"89538443.9a52d8","order":5,"width":"0","height":"0","name":"","label":"command queue:","format":"{{msg.payload}}","layout":"col-center","x":850,"y":480,"wires":[]},{"id":"adf22118.84a4c8","type":"ui_button","z":"8dcb5519.97c368","name":"","group":"89538443.9a52d8","order":7,"width":0,"height":0,"passthru":false,"label":"execute queue","tooltip":"","color":"","bgcolor":"","icon":"","payload":"clear","payloadType":"str","topic":"","x":240,"y":600,"wires":[["b3358875.cac53"]]},{"id":"74feed45.2c380c","type":"function","z":"8dcb5519.97c368","name":"make queue","func":"let queue = flow.get(\"queue\") || [];\nqueue.push(msg.payload);\nmsg.payload = queue.toString();\nflow.set(\"queue\", queue);\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":460,"wires":[["a84a1d4f.fc84a"]]},{"id":"b3358875.cac53","type":"function","z":"8dcb5519.97c368","name":"empty queue","func":"let queue = flow.get(\"queue\");\nconst times = queue.length;\nfor(i=0; i<times; i++){\n    let command = queue.shift();\n    node.send([{payload:queue.toString()},{payload:command}]);\n}\nreturn [{payload:\"queue done\"},{payload:\"\"}];","outputs":2,"noerr":0,"x":440,"y":600,"wires":[["59e27146.f7a68"],["950607ee.231ca8"]]},{"id":"59e27146.f7a68","type":"delay","z":"8dcb5519.97c368","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"0.5","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":630,"y":540,"wires":[["a84a1d4f.fc84a"]]},{"id":"950607ee.231ca8","type":"delay","z":"8dcb5519.97c368","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"0.5","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":630,"y":620,"wires":[["1bec9616.f7999a"]]},{"id":"1bec9616.f7999a","type":"ui_text","z":"8dcb5519.97c368","group":"89538443.9a52d8","order":6,"width":0,"height":0,"name":"","label":"command beeing executed:","format":"{{msg.payload}}","layout":"row-spread","x":930,"y":620,"wires":[]},{"id":"f2b3b649.3a0428","type":"ui_group","z":"","name":"commands","tab":"3408b43d.f3fcac","order":1,"disp":true,"width":"6","collapse":false},{"id":"89538443.9a52d8","type":"ui_group","z":"","name":"queue","tab":"3408b43d.f3fcac","order":2,"disp":true,"width":"6","collapse":false},{"id":"3408b43d.f3fcac","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

Where you have the commands and can add them to a queue which you can than execute on the push of another button.
This is of course just a basic proof of concept i threw together but maybe its and idea for a starting point. (disclaimer: i tested this for about 30 seconds, so it might have errors)

Johannes

3 Likes
19

You are a god.

1 Like
20

I wouldn’t go quite as far. Im just your average fool which sometimes has a bright moment :see_no_evil::joy: