Add value in overprint in a column of Ui_Table with the format "Progress (0-100)

Dashboard
1

Hello,
do you think it is possible to add the value that was used to fill the cell marked in 1 (below) which is a column of the Ui_Table node in the format "Progress (0-100)" ?
So the same kind as the node marked in 2 like the Ui_Level node does.
Or integrate the Ui_Level node in the table cell?
I added the number 100 in red to show an example of the expected result.
Thank you for your ideas or comments

image
image865Ă—464 31.8 KB

2

Hello ..

I dont have much experience with the ui_table node but if you go to Import > Examples
and load the 3rd flow .. you get an advanced example of sending a msg.ui_control msg to the node
with some row formatting options to customize the design of the table

3

It should be possible - as the underlying library is the tabulator version 5.1. I can not directly tell you - may be a little bit later, how you can address this through the UI_Table. This shoud be custom parameters and it should be possible:

image
image2306Ă—1266 279 KB

Here is the reference:

4

Thanks for advice.
I saw this column which I like very much because on my batteries there is exactly the same number of LED. This would be better than the progress bar finally.
The formatting that exists by default in the Ui_table node has only 5 stars and not 6.
I will look into this example as soon as possible.

image
image865Ă—175 22 KB

5

If you look to the examples which came with the ui_table Node investigate the ui_control example

image
image988Ă—508 22.4 KB

In the Change Node - you see where you can modify the formatterParams when define the columns.

6

This is exactly what I was looking for and it was there under a click of my mouse.
Thank you so much for showing me the info!

image
image1016Ă—230 28.8 KB

7

No matter how carefully I look at the example provided, this one is off the charts for my knowledge. I have tried some things but without success. I don't know how to use these 2 msg that are the payload & the control to modify the label of the "progress" field named "SOC".
I understood the idea but I lack too much knowledge.
It's a pity.

I provide below an example of my flow in case all this is "easy" for a person who can manage

[{"id":"451e31c7dfde825e","type":"inject","z":"04301bd7cfbc1f1f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Batterie_numero\":\"<b>1</b>\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"100\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>2</b>\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>3</b>\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>4</b>\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"70\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>5</b>\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>6</b>\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>7</b>\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>8</b>\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"}]","payloadType":"json","x":170,"y":100,"wires":[["a6e9bd57c05171ff"]]},{"id":"6a18c7b1475dda19","type":"ui_table","z":"04301bd7cfbc1f1f","group":"08b55a197fb6da2a","name":"Table Bytteries","order":1,"width":13,"height":6,"columns":[{"field":"Batterie_numero","title":"Bat. #","width":"80","align":"center","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Volt","title":"Volt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Courant","title":"Courant","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Puissance","title":"Watt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Temp","title":"Temp °C","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Status","title":"Status","width":"90","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Health","title":"Santé","width":"85","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"SOC","title":"SOC","width":"100","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":520,"y":100,"wires":[]},{"id":"a6e9bd57c05171ff","type":"change","z":"04301bd7cfbc1f1f","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":100,"wires":[["6a18c7b1475dda19"]]},{"id":"08b55a197fb6da2a","type":"ui_group","name":"Données Live","tab":"988a249f62084232","order":2,"disp":true,"width":13,"collapse":false,"className":""},{"id":"988a249f62084232","type":"ui_tab","name":"Pylontech","icon":"fa-battery-three-quarters ","order":1,"disabled":false,"hidden":false}]

Below is one of my attempts to understand the fields in the large - complex example provided with ui_table.

image
image1518Ă—205 11.6 KB

8

I had a little difficulty also when i played around with it ..
that example is to advanced and I got a bit confused at first in its complexity :wink:

Try this cut down config for the SOC column
( you may need to change some of the settings . .like the colors etc )

Flow:

[{"id":"451e31c7dfde825e","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Batterie_numero\":\"<b>1</b>\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"100\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>2</b>\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>3</b>\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>4</b>\",\"Volt\":\"30\",\"Courant\":\"5\",\"Puissance\":150,\"Temp\":\"21\",\"Status\":\"Charging\",\"Health\":\"Normal\",\"SOC\":\"70\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>5</b>\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>6</b>\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>7</b>\",\"Volt\":\"40\",\"Courant\":\"88\",\"Puissance\":100,\"Temp\":\"21.5\",\"Status\":\"Discharge\",\"Health\":\"Normal\",\"SOC\":\"50\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"},{\"Batterie_numero\":\"<b>8</b>\",\"Volt\":\"60\",\"Courant\":\"57\",\"Puissance\":59,\"Temp\":\"22.5\",\"Status\":\"Idle\",\"Health\":\"Normal\",\"SOC\":\"20\",\"Cycles\":\"5\",\"Amperes_heures\":\"12\",\"Fault_code\":\"99\"}]","payloadType":"json","x":350,"y":1220,"wires":[["a6e9bd57c05171ff"]]},{"id":"6a18c7b1475dda19","type":"ui_table","z":"54efb553244c241f","group":"08b55a197fb6da2a","name":"Table Bytteries","order":1,"width":13,"height":6,"columns":[{"field":"Batterie_numero","title":"Bat. #","width":"80","align":"center","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Volt","title":"Volt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Courant","title":"Courant","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Puissance","title":"Watt","width":"80","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Temp","title":"Temp °C","width":"90","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Status","title":"Status","width":"90","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Health","title":"Santé","width":"85","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"SOC","title":"SOC","width":"100","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":700,"y":1220,"wires":[]},{"id":"a6e9bd57c05171ff","type":"change","z":"54efb553244c241f","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columnResized\":\"function(column){     var newColumn = {         field: column._column.field,         visible: column._column.visible,         width: column._column.width,         widthFixed: column._column.widthFixed,         widthStyled: column._column.widthStyled     }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }\",\"columnMoved\":\"function(column, columns){     var newColumns=[];     columns.forEach(function (column) {         newColumns.push({'field': column._column.field});     });     this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }\",\"groupHeader\":\"function (value, count, data, group) {return value + \\\"<span style='color:#d00; margin-left:10px;'>(\\\" + count + \\\" Termostat\\\"+((count>1) ? \\\"e\\\" : \\\"\\\") + \\\")</span>\\\";}\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":99,\"color\":[\"gray\",\"orange\",\"red\"],\"legend\":\"function (value) {return (value>0)? '&nbsp;&nbsp;'+value+' %' : '-';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"SOC\",\"field\":\"SOC\",\"formatter\":\"progress\",\"topCalc\":\"max\",\"width\":100}],\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"},\"customHeight\":12}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":1220,"wires":[["6a18c7b1475dda19"]]},{"id":"08b55a197fb6da2a","type":"ui_group","name":"Données Live","tab":"988a249f62084232","order":2,"disp":true,"width":13,"collapse":false,"className":""},{"id":"988a249f62084232","type":"ui_tab","name":"Pylontech","icon":"fa-battery-three-quarters ","order":1,"disabled":false,"hidden":false}]
9

Whooohh, whooohhh, I don't know how to write it in English :star_struck:
Just had time to go eat and here is the ready-made solution on my screen. Great!
Just a defect on the 1st line, I should be fine I hope
I will spend all night studying your code to try to understand.
That's exactly what I was looking for in a rendering. I will indeed just change the colors but then I saw that I could do it.
Thanks a million for your help. This forum is definitely a nice place to be.

image
image719Ă—384 9.12 KB