Displaying annotated image on the dashboard

I use the annotate image function to print letters and squares. It works well.
But I want to show it on the dashboard.

What should I do?

thanks

[{"id":"78ab1fb9.2c8c7","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"3f4e1c64.cd0fe4","type":"template","z":"78ab1fb9.2c8c7","name":"Image in","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img src="data:image/png;base64,{{payload}}"style="width="569" height="197""/>","output":"str","x":580,"y":1300,"wires":[["90dd194f.da4ad8"]]},{"id":"90dd194f.da4ad8","type":"ui_template","z":"78ab1fb9.2c8c7","group":"3e00675a.17f428","name":"RIO Logo","order":8,"width":"15","height":"15","format":"<div ng-bind-html="msg.payload">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":980,"y":1300,"wires":[]},{"id":"fabe3caa.601e9","type":"file in","z":"78ab1fb9.2c8c7","name":"","filename":"/Users/jonghwanchoi/.node-red/lib/ui-media/lib/test.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","x":670,"y":1140,"wires":[["5d7cd06e.e2043","adcd3081.e806f"]]},{"id":"5d7cd06e.e2043","type":"base64","z":"78ab1fb9.2c8c7","name":"","action":"","property":"payload","x":980,"y":1220,"wires":[["3f4e1c64.cd0fe4","6321d24e.4827ac"]]},{"id":"e8874f.538868b","type":"comment","z":"78ab1fb9.2c8c7","name":"On inject add the groov RIO logo to the dashboard","info":"","x":470,"y":1160,"wires":},{"id":"edef2b61.08b5e8","type":"inject","z":"78ab1fb9.2c8c7","name":"","repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":230,"y":1140,"wires":[["fabe3caa.601e9","7974268b.0b0c58"]]},{"id":"adcd3081.e806f","type":"function","z":"78ab1fb9.2c8c7","name":"Prep rects for annotate image node","func":"msg.annotations = [{\n type: "rect",\n x: 10, y: 10, w: 50, h: 50,\n label: "hello"\n}]\nmsg.payload = msg.payload;\n\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1320,"y":1240,"wires":[["8a9a9395.e6b6"]]},{"id":"8a9a9395.e6b6","type":"annotate-image","z":"78ab1fb9.2c8c7","name":"","fill":"","stroke":"#ff0000","lineWidth":"20","fontSize":"48","fontColor":"#ff0000","x":1180,"y":1380,"wires":[["cf6ec7d0.a37fc8","316b5bd6.e5c154"]]},{"id":"cf6ec7d0.a37fc8","type":"image","z":"78ab1fb9.2c8c7","name":"","width":"800","data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":1220,"y":1480,"wires":},{"id":"6321d24e.4827ac","type":"image","z":"78ab1fb9.2c8c7","d":true,"name":"","width":"800","data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":840,"y":1620,"wires":},{"id":"316b5bd6.e5c154","type":"template","z":"78ab1fb9.2c8c7","name":"Image in","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img src="data:image/png;base64,{{payload}}"style=" width:100%; height:100%"/>","output":"str","x":1300,"y":1640,"wires":[["739df1f3.b0a0b"]]},{"id":"739df1f3.b0a0b","type":"ui_template","z":"78ab1fb9.2c8c7","group":"b586a8f7.e060e8","name":"RIO Logo","order":2,"width":0,"height":0,"format":"<div ng-bind-html="msg.payload">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1500,"y":1640,"wires":[]},{"id":"7974268b.0b0c58","type":"annotate-image","z":"78ab1fb9.2c8c7","name":"","fill":"","stroke":"#ff0000","lineWidth":"20","fontSize":"48","fontColor":"#ff0000","x":720,"y":1400,"wires":[["90dd194f.da4ad8"]]},{"id":"3e00675a.17f428","type":"ui_group","name":"new","tab":"c40344b0.c82658","order":2,"disp":true,"width":"6","collapse":false},{"id":"b586a8f7.e060e8","type":"ui_group","name":"groov RIO","tab":"c40344b0.c82658","order":1,"disp":true,"width":"26","collapse":false},{"id":"c40344b0.c82658","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

I think that the SVG node may be able to accommodate this?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.