hi,
i am trying to insert warning image in each row on my table.
i used the blow code in msg.ui_control but nothing diplay
{title:"Img", field:"img", "visible": true, "width":150,hight:20,align:"center",
"formatter": "function(cell, formatterParams, onRendered){return '<img width='20' height='20' alt='Image not found' src='/home/osboxes/node-red_1887/warning.jpg'/>''; }"
}
could help me
thank you
I dont think you need the ui_control for that
the ui_table has a field, when configuring its columns, to set as an image
Example Flow :
[{"id":"b7dff285.69049","type":"inject","z":"670e449e482aa4bb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\",\"image\":\"https://picsum.photos/id/234/50/50\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"image\":\"https://picsum.photos/id/235/50/50\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"image\":\"https://picsum.photos/id/236/50/50\"},{\"Name\":\"Ronin\",\"Age\":\"22\",\"Color\":\"dodgerblue\",\"Prog\":45,\"Star\":\"5\",\"Pass\":true,\"image\":\"https://picsum.photos/id/237/50/50\"}]","payloadType":"json","x":370,"y":660,"wires":[["7d48e13.90ee22"]]},{"id":"7d48e13.90ee22","type":"ui_table","z":"670e449e482aa4bb","group":"571a38b1.5e3638","name":"People","order":1,"width":"24","height":"10","columns":[{"field":"Name","title":"Who","width":"","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Age","title":"Age","width":"","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Color","title":"","width":"","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"Star","title":"%","width":"","align":"left","formatter":"star","formatterParams":{"target":"_blank"}},{"field":"Pass","title":"","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"Prog","title":"","width":"","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}},{"field":"image","title":"Image","width":"","align":"center","formatter":"image","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":580,"y":660,"wires":[]},{"id":"571a38b1.5e3638","type":"ui_group","name":"Richer Table","tab":"29ec6908.552b36","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"29ec6908.552b36","type":"ui_tab","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]
You might have to send the column definition to msg.ui_control.tabulator.columns array.
You can take a look into the provided examples how to format a ui_control message.
Check the browser console for any error messages.
i already did this.
please find all the flows that i used:
[
{
"id": "731cf73c8837e83f",
"type": "tab",
"label": "Flow 2",
"disabled": false,
"info": ""
},
{
"id": "b2f7724575bccdb8",
"type": "inject",
"z": "731cf73c8837e83f",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payloadType": "str",
"x": 350,
"y": 340,
"wires": [
[
"3904341271fd2062",
"e329b01d0f34ace7"
]
]
},
{
"id": "8a799d2cd04946d3",
"type": "debug",
"z": "731cf73c8837e83f",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 930,
"y": 180,
"wires": []
},
{
"id": "8d06bd4ebc25bc6c",
"type": "ui_table",
"z": "731cf73c8837e83f",
"group": "b070d416.db371",
"name": "Thermostats",
"order": 1,
"width": "25",
"height": "7",
"columns": [],
"outputs": 1,
"cts": true,
"x": 810,
"y": 320,
"wires": [
[]
]
},
{
"id": "3904341271fd2062",
"type": "function",
"z": "731cf73c8837e83f",
"name": "",
"func": "msg.payload = [\n {\n \"name\":\"MEQ0451495\",\n \"room\":\"Bathroom\",\n \"TEMPERATURE\":22,\n \"ACTUAL TEMPERATURE\":21.8,\n \"VALVE STATE\":90,\n \"BATTERY STATE\":2.7\n },\n \n {\n \"name\":\"MEQ1875547\",\n \"room\":\"Living Room\",\n \"TEMPERATURE\":12,\n \"ACTUAL TEMPERATURE\":16.2,\n \"VALVE STATE\":10,\n \"BATTERY STATE\":2.7\n },\n \n {\n \"name\":\"MEQ1875515\",\n \"room\":\"Living Room2\",\n \"TEMPERATURE\":123,\n \"ACTUAL TEMPERATURE\":16.2,\n \"VALVE STATE\":35,\n \"BATTERY STATE\":2.7\n },\n \n {\n \"name\":\"MEQ1875515\",\n \"room\":\"Living Room2\",\n \"TEMPERATURE\":123,\n \"ACTUAL TEMPERATURE\":16.2,\n \"VALVE STATE\":100,\n \"BATTERY STATE\":2.7\n },\n {\n \"name\":\"MEQ1875515\",\n \"room\":\"Living Room2\",\n \"TEMPERATURE\":123,\n \"ACTUAL TEMPERATURE\":16.2,\n \"VALVE STATE\":70,\n \"BATTERY STATE\":2.7\n }\n]\n\n \nmsg.ui_control = {\n \"tabulator\":{\n columns:[\n {title:\"Name\", field:\"name\", width:200},\n {title:\"Room\", field:\"room\", widthGrow:3},\n {title:\"TEMPERATURE\", field:\"TEMPERATURE\", align:\"center\"},\n {title:\"ACTUAL TEMPERATURE\", field:\"ACTUAL TEMPERATURE\", sorter:\"number\", align:\"center\"},\n {\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":99,\"color\":[\"green\",\"orange\",\"red\"],\n \"legend\":\"function (value) {return (value>0)? ' '+value+' %' : '-';}\",\n \"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\n \"title\":\"VALVE STATE\",\"field\":\"VALVE STATE\",\"formatter\":\"progress\",\"width\":100},\n {title:\"BATTERY STATE\", field:\"BATTERY STATE\", sorter:\"number\", align:\"center\"},\n {title:\"Action\", field:\"Action\", \"visible\": true, width:50,hight:20,\n \"formatter\": \"function(cell, formatterParams, onRendered){return '<button class=\\\"md-warn md-button \\\">Activate</button>'; }\"\n },\n {title:\"test\", field:\"test\", width:50,\n \"formatter\": \"function(cell, formatterParams, onRendered){return '<img width='30' height='30' alt='Image not found' src='data:image/png;base64,{{msg.imageSrc}}' />'; }\"\n }\n ]\n }\n}\n\n\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 590,
"y": 320,
"wires": [
[
"8d06bd4ebc25bc6c",
"8a799d2cd04946d3"
]
]
},
{
"id": "7466eb2b70a8cd74",
"type": "inject",
"z": "731cf73c8837e83f",
"name": "reset table",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "[]",
"payloadType": "json",
"x": 580,
"y": 200,
"wires": [
[
"8d06bd4ebc25bc6c"
]
]
},
{
"id": "77c863e6910aee6c",
"type": "function",
"z": "731cf73c8837e83f",
"name": "msg.filename",
"func": "msg.filename = \"C:\\\\Users\\\\Oualid\\\\Desktop\\\\warning.jpg\";\nreturn msg;\n \n\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 510,
"y": 480,
"wires": [
[
"a561775911f57a0e"
]
]
},
{
"id": "ab7097a4786dee23",
"type": "inject",
"z": "731cf73c8837e83f",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payloadType": "str",
"x": 340,
"y": 480,
"wires": [
[
"77c863e6910aee6c"
]
]
},
{
"id": "a561775911f57a0e",
"type": "file in",
"z": "731cf73c8837e83f",
"name": "",
"filename": "",
"format": "",
"chunk": false,
"sendError": false,
"encoding": "none",
"allProps": false,
"x": 690,
"y": 480,
"wires": [
[
"b44d73b1e1020dae"
]
]
},
{
"id": "b44d73b1e1020dae",
"type": "base64",
"z": "731cf73c8837e83f",
"name": "",
"action": "str",
"property": "payload",
"x": 840,
"y": 480,
"wires": [
[
"7ecd396dc1ce9916"
]
]
},
{
"id": "7ecd396dc1ce9916",
"type": "function",
"z": "731cf73c8837e83f",
"name": "",
"func": "msgPayload= msg.payload;\nmsg={imageSrc:msg.payload};\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 1000,
"y": 480,
"wires": [
[
"3904341271fd2062"
]
]
},
{
"id": "e329b01d0f34ace7",
"type": "change",
"z": "731cf73c8837e83f",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 450,
"y": 420,
"wires": [
[
"77c863e6910aee6c"
]
]
},
{
"id": "b070d416.db371",
"type": "ui_group",
"name": "Table",
"tab": "cd895ba5.a7168",
"order": 1,
"disp": true,
"width": "25",
"collapse": false
},
{
"id": "cd895ba5.a7168",
"type": "ui_tab",
"name": "newTable",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
thank you
Ok I see you like to send your image as a base64 encoded data. Sorry I can't help here as I don't have any experience with that line:
src='data:image/png;base64,{{msg.imageSrc}}'
but this can't work
msgPayload= msg.payload;
msg={imageSrc:msg.payload};
return msg;
a) there is something wrong in line 1.
b) you have to set your call data via the complete array or commands. Then it will be passed to your formatter function by cell.getValue(). But without further tricks you have to send a copy of your file to every row in that column.
src='data:image/png;base64,{{'+cell.getValue()+'}}'
Tabulator and all callbacks don't have access to the msg object.
I think you can't you place your image where it could be accessed via http 
? @UnborN solution would be the easiest. Or you use an icon (more efficient)
perhaps scaled by 2x
In Node-red settings.js file there is an option to serve files from a static folder.
Un-comment httpStatic and point to a folder on your system to serve your own images
Node-red Documentation - httpStatic
The image (warning.jpg) can be then accessed from the url path
http://<node-red-ip>:1880/warning.jpg
Then you can use the msg.ui_control formatter without the need for base64 that doesnt seem to be supported with Tabulator.
{
title: "test", field: "test", width: 50,
"formatter": `function(cell, formatterParams, onRendered){return '<img width="30" height="30" alt="Image not found" src="/warning.jpg"/>'; }`
}
Modified Flow
[{"id":"8a799d2cd04946d3","type":"debug","z":"731cf73c8837e83f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":380,"wires":[]},{"id":"8d06bd4ebc25bc6c","type":"ui_table","z":"731cf73c8837e83f","group":"b070d416.db371","name":"Thermostats","order":1,"width":"25","height":"7","columns":[],"outputs":1,"cts":true,"x":690,"y":460,"wires":[[]]},{"id":"3904341271fd2062","type":"function","z":"731cf73c8837e83f","name":"table data","func":"msg.payload = [\n {\n \"name\": \"MEQ0451495\",\n \"room\": \"Bathroom\",\n \"TEMPERATURE\": 22,\n \"ACTUAL TEMPERATURE\": 21.8,\n \"VALVE STATE\": 90,\n \"BATTERY STATE\": 2.7\n },\n\n {\n \"name\": \"MEQ1875547\",\n \"room\": \"Living Room\",\n \"TEMPERATURE\": 12,\n \"ACTUAL TEMPERATURE\": 16.2,\n \"VALVE STATE\": 10,\n \"BATTERY STATE\": 2.7\n },\n\n {\n \"name\": \"MEQ1875515\",\n \"room\": \"Living Room2\",\n \"TEMPERATURE\": 123,\n \"ACTUAL TEMPERATURE\": 16.2,\n \"VALVE STATE\": 35,\n \"BATTERY STATE\": 2.7\n },\n\n {\n \"name\": \"MEQ1875515\",\n \"room\": \"Living Room2\",\n \"TEMPERATURE\": 123,\n \"ACTUAL TEMPERATURE\": 16.2,\n \"VALVE STATE\": 100,\n \"BATTERY STATE\": 2.7\n },\n {\n \"name\": \"MEQ1875515\",\n \"room\": \"Living Room2\",\n \"TEMPERATURE\": 123,\n \"ACTUAL TEMPERATURE\": 16.2,\n \"VALVE STATE\": 70,\n \"BATTERY STATE\": 2.7\n }\n]\n\n\nmsg.ui_control = {\n \"tabulator\": {\n columns: [\n { title: \"Name\", field: \"name\", width: 200 },\n { title: \"Room\", field: \"room\", widthGrow: 1 },\n { title: \"TEMPERATURE\", field: \"TEMPERATURE\", align: \"center\" },\n { title: \"ACTUAL TEMPERATURE\", field: \"ACTUAL TEMPERATURE\", sorter: \"number\", align: \"center\" },\n {\n \"formatterParams\": {\n \"target\": \"_blank\", \"min\": 0, \"max\": 99, \"color\": [\"green\", \"orange\", \"red\"],\n \"legend\": \"function (value) {return (value>0)? ' '+value+' %' : '-';}\",\n \"legendColor\": \"#101010\", \"legendAlign\": \"center\"\n },\n \"title\": \"VALVE STATE\", \"field\": \"VALVE STATE\", \"formatter\": \"progress\", \"width\": 100\n },\n { title: \"BATTERY STATE\", field: \"BATTERY STATE\", sorter: \"number\", align: \"center\" },\n {\n title: \"Action\", field: \"Action\", \"visible\": true, width: 100,\n \"formatter\": \"function(cell, formatterParams, onRendered){return '<button class=\\\"md-warn md-button \\\">Activate</button>'; }\"\n },\n {\n title: \"test\", field: \"test\", width: 50,\n \"formatter\": `function(cell, formatterParams, onRendered){return '<img width=\"30\" height=\"30\" alt=\"Image not found\" src=\"/warning.jpg\"/>'; }`\n }\n \n ]\n }\n}\n\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":460,"wires":[["8a799d2cd04946d3","8d06bd4ebc25bc6c"]]},{"id":"7466eb2b70a8cd74","type":"inject","z":"731cf73c8837e83f","name":"reset table","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":500,"y":540,"wires":[["8d06bd4ebc25bc6c"]]},{"id":"ab7097a4786dee23","type":"inject","z":"731cf73c8837e83f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":310,"y":460,"wires":[["3904341271fd2062"]]},{"id":"b070d416.db371","type":"ui_group","name":"Table","tab":"cd895ba5.a7168","order":1,"disp":true,"width":"25","collapse":false},{"id":"cd895ba5.a7168","type":"ui_tab","name":"newTable","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
thanks a lot
hi @UnborN @Christian-Me ,
please i have another tow questions for you.
in fact, using the same example given above, i want to display the value of the cell on the name of the button for ex: if the value of the cell is 5 so the button name should display 5 and so on.
for that i tried the below code but did not work:
{ title: "TEMPERATURE", field: "TEMPERATURE", align: "center",
"formatter": "function(cell, formatterParams, onRendered){var value= cell.getValue();" +
"return '<button class=\"md-warn md-button \">value</button>'; }"
}
my second question, i want to change the color of the button to warning color. please the find in the below what i did
{
title: "Action", field: "Action", "visible": true, width: 100,
"formatter": "function(cell, formatterParams, onRendered){return '<button class=\"md-warn md-button \">Activate</button>'; }"
}
thanks a lot for your help
What value exactly ? in your table there are several columns, with several values 
Try something like this :
{
title: "Action", field: "Action", "visible": true, width: 100,
"formatter": "function(cell, formatterParams, onRendered){ return '<button class=\"md-warn md-button\">Activate ' + cell._cell.row.data[\"TEMPERATURE\"] + '}</button>'; }"
},
which at some point in the return string you have to close the single quote string and concatenate +
cell._cell.row.data[\"TEMPERATURE\"] which is where the data is for each row.
regarding styling the button you can use css style tags. do md (material design classes work? dunno)
Avoid using the internal variables usually starting with _. Even if this works now it could break in s feature update.
Better use the get methods instead:
Noted.
{
title: "Action", field: "Action", "visible": true, width: 100,
"formatter": "function(cell, formatterParams, onRendered){ return '<button class=\"md-warn md-button\">Activate ' + cell.getData()[\"TEMPERATURE\"] + '</button>'; }"
},
thanks a lot
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy