Need Help Creating Dashboard "Input Variable" waiting for user to type in a "Numeric Value"?

[damica51]

I've been working with the Node-Red-Dashboard and I can't figure out how to make a "Blank Numeric Input" box waiting for the user to type in a value?

Also is there a better way of doing object arrangements so the display looks clean and neat?
Tutorial?, Examples?

[TotallyInformation]

It would probably help if you were to share a picture of what you want things to look like.

[damica51]

I am trying to convert this Plc/Hmi program over to Node Red. But the NR Dashboard leaves a lot of holes for a workable solution. (In my opinion).

This is my working screen, you just tap where is says enter value and a 10 digit keypad pops up.

I got most things working but I can't get a good looking/workable dashboard?

[E1cid]

You will need to join the buttons and text inputs(set to numeric), then use a switch node to route start and stop
e.g.

[{"id":"f069550701925cdb","type":"ui_text_input","z":"65617ffeb779f51c","name":"","label":"start time","tooltip":"","group":"2d4fe667.28f8ba","order":20,"width":0,"height":0,"passthru":false,"mode":"number","delay":"0","topic":"start_time","sendOnBlur":true,"className":"","topicType":"str","x":680,"y":4620,"wires":[["8ebf018954350d48"]]},{"id":"8ebf018954350d48","type":"join","z":"65617ffeb779f51c","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"3","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":870,"y":4660,"wires":[["e1513822ced47e2d"]]},{"id":"202a2c0dc07d67b7","type":"ui_text_input","z":"65617ffeb779f51c","name":"","label":"stop time","tooltip":"","group":"2d4fe667.28f8ba","order":21,"width":0,"height":0,"passthru":false,"mode":"text","delay":"0","topic":"stop_time","sendOnBlur":true,"className":"","topicType":"str","x":680,"y":4660,"wires":[["8ebf018954350d48"]]},{"id":"175f7bf017431ca0","type":"ui_button","z":"65617ffeb779f51c","name":"","group":"2d4fe667.28f8ba","order":22,"width":0,"height":0,"passthru":false,"label":"start","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"num","topic":"start","topicType":"str","x":690,"y":4700,"wires":[["8ebf018954350d48"]]},{"id":"bb2d699ef245e30c","type":"ui_button","z":"65617ffeb779f51c","name":"","group":"2d4fe667.28f8ba","order":23,"width":0,"height":0,"passthru":false,"label":"stop","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"0","payloadType":"num","topic":"stop","topicType":"str","x":690,"y":4740,"wires":[["8ebf018954350d48"]]},{"id":"e1513822ced47e2d","type":"switch","z":"65617ffeb779f51c","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"start","vt":"str"},{"t":"eq","v":"stop","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":1010,"y":4660,"wires":[["6c468a1d2f4d9e8e"],["9e05c9ae603d2a4d"]]},{"id":"6c468a1d2f4d9e8e","type":"debug","z":"65617ffeb779f51c","name":"start","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1090,"y":4600,"wires":[]},{"id":"9e05c9ae603d2a4d","type":"debug","z":"65617ffeb779f51c","name":"stop","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1090,"y":4720,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[TotallyInformation]

That is why node-red-contrib-uibuilder exists

If you have some HTML already, it should be pretty easy to convert to using uibuilder.

Just make sure that any element on the page that you want to update from Node-RED has a unique HTML id or some other way of uniquely selecting it. Then you can use the uib-update node to change text, CSS class or styles, etc very simply.

[damica51]

I've, been looking at UIBUILDER but still can't figure out how to make a numeric popup so user could input numeric variable.

This flow will be running on a Raspberry Pi - without keyboard or mouse just a 5" touch screen.

[TotallyInformation]

You need a standard <input> tag.

- HTML: HyperText Markup Language | MDN

It has loads of options for fine control.

The inputmode attribute will steer mobile browsers to give a numeric-only popup keyboard.

If you need to always show a keyboard even on desktop browsers, I think you will need to create your own keypad display, probably using buttons with a CSS grid layout. Though you should note that it probably won't be very friendly for people with accessibility needs.