UI Numeric Node

[Karl Norseman Bo]

Hi, im trying to make a smooth user interface for controlling some tanks and volumes etc

for this i will be using among other functions the Numeric node.

its nice being able to adjust up and down with the errors, however i would like the numbers to be editable direct

Anyone have a idea what file to "hack" to make that row or table editable?

thank you for your help

[Zenofmud]

A little more information would be helpful say 

1)  a copy of your flow

2) what versions of NR node and npm?

3) the exact name of the node you are talking about

Paul

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/b5091aa7-8b67-46a8-bc22-44a0e12f157b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Karl Norseman Bo]

Hi, 

here is a portion of my flow

[{"id":"b2ce469e.afe798","type":"function","z":"a94fc51c.172c18","name":"words send","func":"var address = msg.topic\nvar cmd = [1, address,0, msg.payload]\nmsg.payload = {'value': cmd, 'fc': 16, 'unitid': 1, 'address': 900 , 'quantity': 4 } \nreturn msg","outputs":"1","noerr":0,"x":873,"y":435,"wires":[["50a067bb.994b68"]]},{"id":"d7d88769.eefe08","type":"ui_button","z":"a94fc51c.172c18","name":"","group":"fc6061d.8f99ea","order":10,"width":0,"height":0,"passthru":false,"label":"Menu","color":"","bgcolor":"grey","icon":"","payload":"Settings","payloadType":"str","topic":"","x":564,"y":682,"wires":[["672b04fd.65237c"]]},{"id":"c585e74b.523938","type":"comment","z":"a94fc51c.172c18","name":"Activation settings","info":"","x":528.5,"y":220,"wires":[]},{"id":"672b04fd.65237c","type":"ui_ui_control","z":"a94fc51c.172c18","name":"ui control","x":921,"y":585,"wires":[[]]},{"id":"2e1a82ae.51e99e","type":"ui_switch","z":"a94fc51c.172c18","name":"actholdsig","label":"Activate by holding signal","group":"fc6061d.8f99ea","order":1,"width":"8","height":"1","passthru":false,"decouple":"true","topic":"745.9","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":534,"y":261,"wires":[["6add19bb.072928"]]},{"id":"6aff1bc5.f87144","type":"link in","z":"a94fc51c.172c18","name":"745.9R","links":["b1a06c0a.5ea8a"],"x":269.5,"y":260,"wires":[["2e1a82ae.51e99e"]]},{"id":"77dda035.b28e3","type":"ui_switch","z":"a94fc51c.172c18","name":"actimpsig","label":"Activate by impuls signal","group":"fc6061d.8f99ea","order":2,"width":"8","height":"1","passthru":false,"decouple":"true","topic":"705.3","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":542,"y":299,"wires":[["6add19bb.072928"]]},{"id":"d485019a.8b90b","type":"link in","z":"a94fc51c.172c18","name":"705.3R","links":["425b2f4c.7848e"],"x":238.5,"y":298,"wires":[["77dda035.b28e3"]]},{"id":"40ff3511.f455fc","type":"ui_numeric","z":"a94fc51c.172c18","name":"","label":"Shortest impuls to start (s)","group":"fc6061d.8f99ea","order":3,"width":0,"height":0,"passthru":true,"topic":"708","format":"{{value/100}}","min":0,"max":"1000","step":"10","x":541.5,"y":332,"wires":[["b2ce469e.afe798"]]},{"id":"deef6d12.a541f","type":"ui_numeric","z":"a94fc51c.172c18","name":"","label":"Shortest impuls to stop (s)","group":"fc6061d.8f99ea","order":4,"width":0,"height":0,"passthru":true,"topic":"709","format":"{{value/100}}","min":0,"max":"1000","step":"10","x":544,"y":367,"wires":[["b2ce469e.afe798"]]},{"id":"9afe3498.fc5f28","type":"ui_switch","z":"a94fc51c.172c18","name":"actbyfedsens","label":"Activate by feedrobot sensors","group":"fc6061d.8f99ea","order":5,"width":"8","height":"1","passthru":false,"decouple":"true","topic":"745.8","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":542,"y":401,"wires":[["6add19bb.072928"]]},{"id":"bb526a77.a83b98","type":"ui_numeric","z":"a94fc51c.172c18","name":"","label":"Photocell activation delay (s)","group":"fc6061d.8f99ea","order":6,"width":0,"height":0,"passthru":true,"topic":"748","format":"{{value/100}}","min":0,"max":"1000","step":"100","x":544,"y":435,"wires":[["b2ce469e.afe798"]]},{"id":"9ae2aee6.cf37d","type":"ui_numeric","z":"a94fc51c.172c18","name":"","label":"Delay before next loading (s)","group":"fc6061d.8f99ea","order":7,"width":0,"height":0,"passthru":true,"topic":"749","format":"{{value/100}}","min":0,"max":"10000","step":"100","x":539,"y":471,"wires":[["b2ce469e.afe798"]]},{"id":"f2d0166c.403e88","type":"ui_numeric","z":"a94fc51c.172c18","name":"","label":"Switch activation delay (s)","group":"fc6061d.8f99ea","order":8,"width":0,"height":0,"passthru":true,"topic":"750","format":"{{value/100}}","min":0,"max":"1000","step":"100","x":528,"y":505,"wires":[["b2ce469e.afe798"]]},{"id":"757df53f.3fb59c","type":"ui_numeric","z":"a94fc51c.172c18","name":"","label":"Switch deactivation delay (s)","group":"fc6061d.8f99ea","order":9,"width":0,"height":0,"passthru":true,"topic":"751","format":"{{value/100}}","min":0,"max":"10000","step":"100","x":537,"y":542,"wires":[["b2ce469e.afe798"]]},{"id":"5c9d5565.5b724c","type":"link in","z":"a94fc51c.172c18","name":"708R","links":["fef69268.c59e8"],"x":269.5,"y":340,"wires":[["40ff3511.f455fc"]]},{"id":"e98518f8.b7dbf8","type":"link in","z":"a94fc51c.172c18","name":"709R","links":["d63f0b02.59a188"],"x":321.5,"y":367,"wires":[["deef6d12.a541f"]]},{"id":"ffaabf6c.1862d","type":"link in","z":"a94fc51c.172c18","name":"745.8R","links":["304a4c42.5e4cb4"],"x":278,"y":403,"wires":[["9afe3498.fc5f28"]]},{"id":"cc9a9521.61b538","type":"link in","z":"a94fc51c.172c18","name":"748R","links":["58b95a93.c968a4"],"x":321,"y":428,"wires":[["bb526a77.a83b98"]]},{"id":"8c306187.d2d9a","type":"link in","z":"a94fc51c.172c18","name":"749R","links":["5f0fc72a.323b78"],"x":274,"y":468,"wires":[["9ae2aee6.cf37d"]]},{"id":"c2eb7c70.3c3ef","type":"link in","z":"a94fc51c.172c18","name":"750R","links":["cc42033d.ad32b"],"x":321,"y":498,"wires":[["f2d0166c.403e88"]]},{"id":"5e178ad5.44ecc4","type":"link in","z":"a94fc51c.172c18","name":"751R","links":["7a91e29a.b8f55c"],"x":268,"y":537,"wires":[["757df53f.3fb59c"]]},{"id":"6add19bb.072928","type":"function","z":"a94fc51c.172c18","name":"bits send","func":"var address = msg.topic.split(\".\")[0]\nvar bit = msg.topic.split(\".\")[1]\n\nvar cmd = [2, address, bit, msg.payload]\nmsg.payload = {'value': cmd, 'fc': 16, 'unitid': 1, 'address': 900 , 'quantity': 4 } \nreturn msg","outputs":"1","noerr":0,"x":751,"y":113,"wires":[["50a067bb.994b68"]]},{"id":"50a067bb.994b68","type":"link out","z":"a94fc51c.172c18","name":"","links":["8e46d5f3.659de8"],"x":988.5,"y":71,"wires":[]},{"id":"fc6061d.8f99ea","type":"ui_group","z":"","name":"Activation settings","tab":"990fefb6.2d668","order":1,"disp":true,"width":"8"},{"id":"990fefb6.2d668","type":"ui_tab","z":"","name":"Activationsetting","icon":"dashboard","order":14}]

these are basically a bunch of Numeric nodes i use to send settings from my cellphone to my PLC via Modbus

what i would like to enable is to make the text field between the up and down arrow editable, so that i can write my values direct instead of only relying on the up down arrow, like we do on a html table after we make the field editable.

but, even after all my search im unable to find what setting to edit in the code to activate this function.

my NR version is  0.17.5

Thanks

Karl

[steve rickus]

This is not really a node-red question -- but how to use html5/jquery/angular to enable the behavior you would like...

A quick search show that others have solved it using either the JQuery numeric spinner library directly, or by wrapping it inside an angular directive, such as in this plunkr demo page.

Although there is not a node-red widget already built-in, you should be able to put code like these examples into a `ui_template` node -- just keep in mind that the base jquery and angular libs are already loaded by the dashboard. Other external libs should be loaded into the <head> element using a separate `ui_template` node.

--

Steve

[Karl Norseman Bo]

Thanks Steve, those are great solutions, and i have lots of other functions already in template nodes.

But, :-)   i really like the simplicity of using those Numeric nodes, had it just been editable, will continue to read the files in the structure, im sure its in the js code or html code somewhere.

it would also be awsome if it was a function one could activate on the node itself.

karl

[Dave C-J]

currently it would require a re-do of the node to change that to be an input field, and then it has to pick up the input validation so that the numbers fit into the steps requested etc.

You can always also provide another (text style) input field and use that to preset the numeric field. Not ideal I know.

Currently the buttons do provide quite nice acceleration if you press and hold.

[Bart Butenaers]

Hi Karl,

Unfortunately I have no useful feedback about your question, but you made me curious with 'controlling some tanks and volumes'...

I have been looking some time ago an open source library to calculate volumes of multiple tank shapes (rectangular/cylindrical) and cap shapes (flat/hemispherical/...).

Unfortunately I didn't found anything useful ;-(

Have transpiled TankCalc from Java to Javascript, and that worked fine.  

But not the best option when you need to add extra functionality.  Moreover might be a license issue?

So I started from scratch.  But since my maths aren't what they used to be, I still haven't a usable contribution to publish ...

Thanks in advance !!

Bart Butenaers

[Karl Norseman Bo]

for now im solving it like this

combining ui_numeric and ui_text_input it does the job, but it would be so awsome to be able to edit the numerical value direct in the ui_numeric node

the key lies within the code for ui_text_input, ill try this weekend to compare the codes for the templates of both of them. just need to figure out where to add <editable> its high level core code in this Node red  :-)

[Karl Norseman Bo]

Hi Bart, usually i just get some vega sensors, they are cheap and easy to work with.

you will use the 4-20ma analog signal anyway to feed your PLC or other control device with data.

you can take this raw data and calculate it, or you can put dimensions in the vega sensors and they will give you excact volume data.

Karl   

[Dave C-J]

Because the sun is shining and the coding gods are smiling upon us and the coffee is extra strong this morning... I have added the ability for numeric field to be edited...

It in master but not on npm yet... so you need to install direct from github - let me know what you think.

    cd ~/.node-red

    npm i node-red/node-red-dashboard

[Simon Walters]

:-)

[Karl Norseman Bo]

Hi, 

Seems i have done something wrong, cause even after upgrading as described below, the numerical field between the arrow up-down is not editable on my sytem.

What i think  :-)  AWSOME  we must be drinking the same coffee, and by seeing the extent of files you have changed for this to be possible i have realized it would have taken me loooooooong time to figure it out by my self.

trying again without sudo, perhaps i fucked it by old habbits

Thaks

Karl 

[Dave C-J]

You need the correct command as well as not using sudo

Plus will need to reload browser a couple of times to flush cache

--

Sent from phone.

[Karl Norseman Bo]

Hi, it works.

i messed it up first time using sudo.

I noticed something weird in IE

earlier i used scaling on the data comming in from my modbus source  {{value/60}}

for a reason im unable to explain, it seems to ignore that on my cellphone and in IE, but still works in Chrome.

Any idea what can cause that?

Karl

[Karl Norseman Bo]

So yesterday i started redeploying my Nodes on a raspberry pi 3b+

with latest stretch image and latest node-red

really a nice improvement, untill i started with the mysql install or MariaDB as its called thse days, utter clusterfuck.

anyway, back to point.

i started testing these numeric nodes again, and wow, how nice they are now with the possibility to write value directly, thank you so much for the development there Dave J-C

so i started tinkering with it and was very happy, then i discovered that the {{value}} manipulations i had put in did not stick anymore

No big deal, but just thought it proper to inform about it. added some function nodes before and after to divide and multiply as a solution for now.

howerver, as i was playing around with this i was thinking, would it be possible to make the numerical input call for numerical keypad on cellphone like the ui_text_input node does when number mode is defined?

even the delay setting/option in the ui_text_input would be very nice to have in some instances, especially when in my case values are forwarded directly on Modbus to PLC

Anyway, thank you very much  Dave C-J  your work has really helped me alot in this matter

Best Regards

Karl