Dashboard slideshow

Dashboard slideshow

This flow creates a slideshow in the Dashboard with pictures from a local directory in your computer. The slideshow is controlled by MQTT messages.

Features

  • You can play and pause the slideshow.
  • The time each picture displays is configurable in a delay node.
  • You can display a display any of the ten first pictures by sending an MQTT message.

Prerequisites

  • Requires the installation of contrib node: node-red-contrib-fs-ops.
  • Requires access to an MQTT broker to publish/subcribe to commands.
  • Create directory /slideshow in Node-RED static floder and populate it with pictures.

How it works

The heart of the flow is a core template node that will format a message to display the picture as a background image.

Below the code inside this template node.

<style>

#Slide_Slideshow .nr-dashboard-template {
    background-image : url(/slideshow/{{payload}});
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

</style>

The flow requires a TAB named "Slide" and a Group named "Slideshow" in the Dashboard. You may want to change these names, in which case you will modify the first line inside the style session as below:

From:

#Slide_Slideshow .nr-dashboard-template {

To:

#TAB_GROUP .nr-dashboard-template {

where TAB is the the tab name and GROUP is the group name.

You can change the size of the images by changing the size of the Dashboard Group in the ui_template node.

Built and tested With

  • [Node-RED] - version 1.0.3
  • [Dashboard] - version 2.19.2

Authors

Andrei Ochmat

License

Free for any kind of use

Acknowledgments

  • Possible thanks to the outstanding work of Nick O'Leary and Dave Conway-Jones
[{"id":"80f1c221.5955d","type":"tab","label":"SlideShow","disabled":false,"info":"# **Dashboard slideshow**\r\n\r\nThis flow creates a slideshow in the Dashboard with pictures from a local directory in your computer. The slideshow is controlled by MQTT messages.\r\n\r\n\r\n## **Features**\r\n\r\n - You can play and pause the slideshow.\r\n - The time each picture displays is configurable in a delay node.\r\n - You can display a display any of the ten first pictures by sending an MQTT message.\r\n\r\n\r\n## **Prerequisites**\r\n\r\n - Requires the installation of contrib node: **fs-ops-dir**.\r\n - Requires access to an MQTT broker to publish/subcribe to commands.\r\n - Create directory /slideshow in Node-RED static floder and populate it with pictures.\r\n\r\n\r\n## **How it works**\r\n\r\nThe heart of the flow is a core template node that will format a message to display the picture as a background image.\r\n\r\nBelow the code inside this template node.\r\n\r\n```\r\n#Slide_Slideshow md-card {\r\n    background-image : url(/slideshow/{{payload}});\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-size: cover;\r\n}\r\n```\r\n\r\n\r\n## **Built and tested With**\r\n\r\n* [Node-RED]  - version 1.0.3\r\n* [Dashboard] - version 2.19.2 \r\n\r\n\r\n \r\n\r\n## **Authors**\r\n\r\n**Andrei Ochmat** \r\n\r\n\r\n## **License**\r\n\r\nFree for any kind of use\r\n\r\n## **Acknowledgments**\r\n\r\n* Possible thanks to the outstanding work of Nick O'Leary and Dave Conway-Jones\r\n\r\n"},{"id":"bd4b4671.5011b8","type":"inject","z":"80f1c221.5955d","name":"Startup","topic":"","payload":"arrow-right","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"2","x":160,"y":680,"wires":[["12d47df6.45de82"]]},{"id":"c0fdd7cc.931cd8","type":"fs-ops-dir","z":"80f1c221.5955d","name":"","path":"C:\\Users\\OCM\\.node-red\\static\\slideshow","pathType":"str","filter":"*","filterType":"str","dir":"files","dirType":"msg","x":360,"y":200,"wires":[["82b463fe.82e4f"]]},{"id":"82b463fe.82e4f","type":"change","z":"80f1c221.5955d","name":"","rules":[{"t":"set","p":"slides","pt":"flow","to":"files","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":200,"wires":[["d9669536.849968"]]},{"id":"d9669536.849968","type":"function","z":"80f1c221.5955d","name":"Set numSlides","func":"let pay = flow.get(\"slides\").length;\nnode.status({text:pay});\nflow.set(\"numSlides\", pay);\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":200,"wires":[[]]},{"id":"a625f68b.8fff58","type":"template","z":"80f1c221.5955d","name":"Slideshow Grid","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n#Slide_Slideshow md-card {\n    background-image : url(/slideshow/{{payload}});\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: cover;\n}\n\n</style>\n\n\n<body>\n\n</body>","output":"str","x":1260,"y":600,"wires":[["8cf538b3.b9b0f8"]]},{"id":"88484829.e39818","type":"function","z":"80f1c221.5955d","name":"Slide Sequencer + +","func":"let numSlides = flow.get(\"numSlides\");\nlet slideIndex = flow.get(\"slideIndex\") || 0;\nslideIndex++;\nif (slideIndex > numSlides - 1) slideIndex = 0;\nflow.set(\"slideIndex\", slideIndex);\nmsg.slideIndex = slideIndex;\nreturn msg;","outputs":1,"noerr":0,"x":840,"y":460,"wires":[["e8056f8c.e987"]]},{"id":"e8056f8c.e987","type":"function","z":"80f1c221.5955d","name":"Get Slide","func":"msg.payload = flow.get(\"slides\")[msg.slideIndex];\nnode.status({\"text\" : msg.payload});\nreturn msg;","outputs":1,"noerr":0,"x":1200,"y":520,"wires":[["a625f68b.8fff58"]]},{"id":"64aee20a.633c7c","type":"comment","z":"80f1c221.5955d","name":"Read image file names from directory /slideshow","info":"","x":320,"y":120,"wires":[]},{"id":"b6821674.9d3958","type":"function","z":"80f1c221.5955d","name":"Slide Sequencer - -","func":"let numSlides = flow.get(\"numSlides\");\nlet slideIndex = flow.get(\"slideIndex\") || 0;\nslideIndex--;\nif (slideIndex < 0) slideIndex = numSlides - 1;\nflow.set(\"slideIndex\", slideIndex);\nmsg.slideIndex = slideIndex;\nreturn msg;","outputs":1,"noerr":0,"x":830,"y":520,"wires":[["e8056f8c.e987"]]},{"id":"dfa4261b.31d288","type":"mqtt in","z":"80f1c221.5955d","name":"Keyboard","topic":"command/keyboard","qos":"2","datatype":"auto","broker":"1e512596.02075a","x":180,"y":820,"wires":[["68079402.db19fc"]]},{"id":"68079402.db19fc","type":"switch","z":"80f1c221.5955d","name":"Key mapping","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"arrow-left","vt":"str"},{"t":"eq","v":"arrow-right","vt":"str"},{"t":"eq","v":"play","vt":"str"},{"t":"eq","v":"pause","vt":"str"},{"t":"eq","v":"digit0","vt":"str"},{"t":"eq","v":"digit1","vt":"str"},{"t":"eq","v":"digit2","vt":"str"},{"t":"eq","v":"digit3","vt":"str"},{"t":"eq","v":"digit4","vt":"str"},{"t":"eq","v":"digit5","vt":"str"},{"t":"eq","v":"digit6","vt":"str"},{"t":"eq","v":"digit7","vt":"str"},{"t":"eq","v":"digit8","vt":"str"},{"t":"eq","v":"digit9","vt":"str"}],"checkall":"false","repair":false,"outputs":14,"x":510,"y":820,"wires":[["b6821674.9d3958"],["88484829.e39818"],["efaddc81.5e8a9"],["f8424ba2.1e4678"],["a4e07766.7af698"],["45adcb2.ed41334"],["1e68677e.86d179"],["2bec5c64.91e904"],["e52069a1.637078"],["cbd91a0a.5eb808"],["280cfe0e.c328d2"],["2e3be19c.aead0e"],["d0716fac.bc74e"],["991d3d64.61d88"]]},{"id":"807fc470.37dba8","type":"comment","z":"80f1c221.5955d","name":"to do: add error handling for directory empty","info":"","x":310,"y":1580,"wires":[]},{"id":"12d47df6.45de82","type":"delay","z":"80f1c221.5955d","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":320,"y":680,"wires":[["68079402.db19fc"]]},{"id":"414279a8.91d058","type":"switch","z":"80f1c221.5955d","name":"flow gate filter Switch","property":"gate.slide","propertyType":"global","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":740,"y":360,"wires":[["88484829.e39818"]]},{"id":"40dad027.59208","type":"trigger","z":"80f1c221.5955d","op1":"","op2":"","op1type":"pay","op2type":"pay","duration":"-5","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":380,"y":360,"wires":[["c6e4c7df.d9c288"]]},{"id":"69ee50d1.8404c","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"Sequencer","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":190,"y":360,"wires":[["40dad027.59208"]]},{"id":"c6e4c7df.d9c288","type":"function","z":"80f1c221.5955d","name":"Gate","func":"let read = global.get(\"gate.slide\");\nlet status = read ? \"Opened\" : \"Closed\";\nlet color  = read ? \"green\" : \"red\";\nnode.status({fill:color,shape:\"ring\",text:status});\nreturn msg;","outputs":1,"noerr":0,"x":550,"y":360,"wires":[["414279a8.91d058"]]},{"id":"efaddc81.5e8a9","type":"change","z":"80f1c221.5955d","name":"Play Slide","rules":[{"t":"set","p":"gate.slide","pt":"global","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":820,"y":640,"wires":[[]]},{"id":"f8424ba2.1e4678","type":"change","z":"80f1c221.5955d","name":"Stop Slide","rules":[{"t":"set","p":"gate.slide","pt":"global","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":830,"y":680,"wires":[[]]},{"id":"a4e07766.7af698","type":"change","z":"80f1c221.5955d","name":"slide0","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"0","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":740,"wires":[["fa371209.018f4"]]},{"id":"45adcb2.ed41334","type":"change","z":"80f1c221.5955d","name":"slide1","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"1","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":780,"wires":[["3abc355b.56743a"]]},{"id":"1e68677e.86d179","type":"change","z":"80f1c221.5955d","name":"slide2","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"2","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"2","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":820,"wires":[["adf131f5.6fc5f"]]},{"id":"2bec5c64.91e904","type":"change","z":"80f1c221.5955d","name":"slide3","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"3","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"3","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":860,"wires":[["85116225.3348a"]]},{"id":"e52069a1.637078","type":"change","z":"80f1c221.5955d","name":"slide4","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"4","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"4","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":900,"wires":[["6ee4f8e6.626e08"]]},{"id":"cbd91a0a.5eb808","type":"change","z":"80f1c221.5955d","name":"slide5","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"5","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"5","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":940,"wires":[["d0552a4f.88d328"]]},{"id":"280cfe0e.c328d2","type":"change","z":"80f1c221.5955d","name":"slide6","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"6","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"6","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":980,"wires":[["e467e4b5.c86af8"]]},{"id":"2e3be19c.aead0e","type":"change","z":"80f1c221.5955d","name":"slide7","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"7","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"7","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":1020,"wires":[["20e218f8.6f12c8"]]},{"id":"d0716fac.bc74e","type":"change","z":"80f1c221.5955d","name":"slide8","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"0","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":1060,"wires":[["26aa1604.46baea"]]},{"id":"fa371209.018f4","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":740,"wires":[]},{"id":"6dc3f48f.9d746c","type":"link in","z":"80f1c221.5955d","name":"","links":["fa371209.018f4","3abc355b.56743a","adf131f5.6fc5f","85116225.3348a","6ee4f8e6.626e08","d0552a4f.88d328","e467e4b5.c86af8","20e218f8.6f12c8","26aa1604.46baea","d8cc71bd.302c5"],"x":1075,"y":880,"wires":[["e8056f8c.e987"]]},{"id":"3abc355b.56743a","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":920,"y":780,"wires":[]},{"id":"adf131f5.6fc5f","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":820,"wires":[]},{"id":"85116225.3348a","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":860,"wires":[]},{"id":"991d3d64.61d88","type":"change","z":"80f1c221.5955d","name":"slide9","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"9","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"9","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":1100,"wires":[["d8cc71bd.302c5"]]},{"id":"6ee4f8e6.626e08","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":900,"wires":[]},{"id":"d0552a4f.88d328","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":920,"y":940,"wires":[]},{"id":"e467e4b5.c86af8","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":980,"wires":[]},{"id":"20e218f8.6f12c8","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":920,"y":1020,"wires":[]},{"id":"26aa1604.46baea","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":1060,"wires":[]},{"id":"d8cc71bd.302c5","type":"link out","z":"80f1c221.5955d","name":"","links":["6dc3f48f.9d746c"],"x":915,"y":1100,"wires":[]},{"id":"ee604f2c.7c08","type":"comment","z":"80f1c221.5955d","name":"Images are rendered as background-images , so the size is not very critical","info":"","x":800,"y":120,"wires":[]},{"id":"8cf538b3.b9b0f8","type":"ui_template","z":"80f1c221.5955d","group":"17ac3ae5.57e2b5","name":"","order":1,"width":"28","height":"16","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1320,"y":680,"wires":[[]]},{"id":"30c355f9.63360a","type":"inject","z":"80f1c221.5955d","name":"Go","topic":"","payload":"Initialize pictures","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":210,"y":200,"wires":[["c0fdd7cc.931cd8"]]},{"id":"ea81b3f9.02a8d","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit0","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1140,"wires":[["f196ed48.4069c"]]},{"id":"f196ed48.4069c","type":"mqtt out","z":"80f1c221.5955d","name":"","topic":"command/keyboard","qos":"2","retain":"false","broker":"1e512596.02075a","x":510,"y":1180,"wires":[]},{"id":"23351a71.215dc6","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1180,"wires":[["f196ed48.4069c"]]},{"id":"fec4ec58.d01f8","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"pause","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":980,"wires":[["f196ed48.4069c"]]},{"id":"361745d8.97a32a","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"play","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":940,"wires":[["f196ed48.4069c"]]},{"id":"8cd03088.7b2a9","type":"inject","z":"80f1c221.5955d","name":"arrow-right","topic":"","payload":"arrow-right","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"2","x":200,"y":1040,"wires":[["f196ed48.4069c"]]},{"id":"ecb4bbf9.7d42d8","type":"inject","z":"80f1c221.5955d","name":"arrow-left","topic":"","payload":"arrow-left","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"2","x":200,"y":1080,"wires":[["f196ed48.4069c"]]},{"id":"6530fb07.d01234","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit2","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1220,"wires":[["f196ed48.4069c"]]},{"id":"a3124855.898698","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit3","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1260,"wires":[["f196ed48.4069c"]]},{"id":"f75eae63.019d6","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit4","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1300,"wires":[["f196ed48.4069c"]]},{"id":"14536081.2b05ef","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit5","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1340,"wires":[["f196ed48.4069c"]]},{"id":"289a1998.06b3c6","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit6","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1380,"wires":[["f196ed48.4069c"]]},{"id":"4e07071.4d4d9f8","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit7","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1420,"wires":[["f196ed48.4069c"]]},{"id":"566a36f4.ca2818","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit8","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1460,"wires":[["f196ed48.4069c"]]},{"id":"5f1a421b.c1414c","type":"inject","z":"80f1c221.5955d","name":"","topic":"","payload":"digit9","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":1500,"wires":[["f196ed48.4069c"]]},{"id":"1e512596.02075a","type":"mqtt-broker","z":"","name":"Mosquitto","broker":"192.168.1.40","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"17ac3ae5.57e2b5","type":"ui_group","z":"","name":"Slideshow","tab":"bd8473ae.131f1","disp":false,"width":"28","collapse":false},{"id":"bd8473ae.131f1","type":"ui_tab","z":"","name":"Slide","icon":"dashboard","disabled":false,"hidden":false}]

Flow Info

Created 5 years, 2 months ago
Updated 5 years, 1 month ago
Rating: not yet rated
view on github

Owner

aiot-maker

Actions

Rate:

Node Types

Core
  • change (x13)
  • comment (x3)
  • delay (x1)
  • function (x5)
  • inject (x17)
  • link in (x1)
  • link out (x10)
  • mqtt in (x1)
  • mqtt out (x1)
  • mqtt-broker (x1)
  • switch (x2)
  • template (x1)
  • trigger (x1)
Other
  • fs-ops-dir (x1)
  • tab (x1)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • slideshow
  • node-red-contrib-fs-ops
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option