# Displaying annotated image on the dashboard

**URL:** <https://discourse.nodered.org/t/displaying-annotated-image-on-the-dashboard/42056>\
**Category:** Dashboard\
**Created:** [5 March 2021 01:38 UTC](https://discourse.nodered.org/t/displaying-annotated-image-on-the-dashboard/42056 "2021-03-05T01:38:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bird](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bird/32/34966_2.png) [@bird](https://discourse.nodered.org/u/bird)\
**Post date:** [5 March 2021 01:38 UTC](https://discourse.nodered.org/t/displaying-annotated-image-on-the-dashboard/42056/1 "2021-03-05T01:38:41Z")

</div>

![스크린샷 2021-03-05 오전 10.30.54](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b88e41e1744a77749fa9c47f24af5af15e399c2.jpeg)

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}]

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 March 2021 09:30 UTC](https://discourse.nodered.org/t/displaying-annotated-image-on-the-dashboard/42056/2 "2021-03-05T09:30:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 April 2021 09:30 UTC](https://discourse.nodered.org/t/displaying-annotated-image-on-the-dashboard/42056/3 "2021-04-04T09:30:52Z")

</div>

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