Issues to display images across a different page initiated by UI controls

[joergatcw]

Current Behavior

• images from the local file system can't be displayed on a different page than the initiating controls are located
• text, comments etc. perfectly work
• using images on the same page (even different tab) as the controls perfectly work

Expected Behavior

• images to show/hide should be controllable by controls in all pages of the project no matter where located

Steps To Reproduce

• simply change ‘Group’ in properties of the template node to an other page than the controls

Environment

• Dashboard version: 1.30.2
• Node-RED version: 4.1.3
• Node.js version: 20.20.0
• npm version: 10.8.2
• Platform/OS: RaspiOS Bookworm
• Browser: MS Edge Version 144.0.3719.92

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

[colinl]

Can you post a simple example flow showing the problem?

[joergatcw]

flows-DB.json
Pls. find the code where you need to

• edit Node 'ReadFile' according your local path/imagefile etc.
• create the Dashboard pages in order to assign 'button' and 'template' nodes accordingly
• for testing at first set the same page for 'button' and template', and at second change to different pages for 'button' and 'template'

Thanks!

[colinl]

Inserting flow inline for easier access

[{"id":"4005d14538604ee8","type":"ui-button","z":"088354aa8c8ea440","group":"e6637e94516268d5","name":"","label":"noProvisioning","order":3,"width":4,"height":2,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"close-outline","iconPosition":"left","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"#39AB36","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"noProvisioning","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":200,"y":580,"wires":[["f8561b8f06fd56d1"]]},{"id":"c6865fb21ac6b8a3","type":"ui-button","z":"088354aa8c8ea440","group":"e6637e94516268d5","name":"","label":"Provisioning","order":2,"width":4,"height":2,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"qrcode","iconPosition":"left","payload":"2","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"#39AB36","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":190,"y":620,"wires":[["e76783bb430cd747"]]},{"id":"f8561b8f06fd56d1","type":"change","z":"088354aa8c8ea440","name":"noProvisioning","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":580,"wires":[["94f40cc5da1888af"]]},{"id":"94f40cc5da1888af","type":"ui-template","z":"088354aa8c8ea440","group":"e6637e94516268d5","page":"","ui":"","name":"ShowLogo","order":1,"width":5,"height":14,"head":"","format":"<template>\n    <div>\n        <!-- Image src: {{ info || 'none' }} -->\n        <v-img\n            v-if=\"msg.payload\"\n            :width=\"msg.width || 1100\"\n            aspect-ratio=\"msg.aspec || 16/9\"\n            cover\n            :src=\"msg.payload\"\n    ></v-img>\n    </div>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":790,"y":580,"wires":[[]]},{"id":"b66dab5e8d1e55cb","type":"base64","z":"088354aa8c8ea440","name":"","action":"","property":"payload","x":480,"y":620,"wires":[["5e8e7d8d2648a59d"]]},{"id":"5e8e7d8d2648a59d","type":"change","z":"088354aa8c8ea440","name":"set payload","rules":[{"t":"set","p":"payload","pt":"msg","to":"\"data:image/jpg;base64,\" & payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":620,"wires":[["94f40cc5da1888af"]]},{"id":"e76783bb430cd747","type":"file in","z":"088354aa8c8ea440","name":"ReadFile","filename":"/home/pi/Logo.png","filenameType":"str","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":340,"y":620,"wires":[["b66dab5e8d1e55cb"]]},{"id":"e6637e94516268d5","type":"ui-group","name":"Deaktivierung","page":"a4780c8e06029734","width":8,"height":1,"order":2,"showTitle":true,"className":"","visible":true,"disabled":false,"groupType":"default"},{"id":"a4780c8e06029734","type":"ui-page","name":"TouchGUI","ui":"654a6c62de1e6362","path":"/TouchGUI","icon":"home","layout":"tabs","theme":"9200798dad9a3336","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":4,"className":"","visible":"true","disabled":"false"},{"id":"654a6c62de1e6362","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"/home/pi/CWlogo2.png","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-template","ui-button"],"showPathInSidebar":false,"headerContent":"none","navigationStyle":"none","titleBarStyle":"hidden","showReconnectNotification":false,"notificationDisplayTime":"3","showDisconnectNotification":false,"allowInstall":false},{"id":"9200798dad9a3336","type":"ui-theme","name":"TouchGUI","colors":{"surface":"#ffffff","primary":"#39ab36","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"24px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"dcddc5442675ecc3","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2","node-red-node-base64":"1.0.0"}}]

[colinl]

I am not an expert with using ui-templates, but I suspect that you have to watch for messages and save the image, then in mounted (which is called when the template is displayed), setup the widget.
Hopefully someone with more knowledge will confirm this.
See https://dashboard.flowfuse.com/nodes/widgets/ui-template.html for full docs.

[colinl]

I don't think that this is an issue with the dashboard code, but a 'how to' question. @joergatcw I am closing this, please ask for help with how to solve your problem on the node-red forum if you still need help.

[joergatcw]

Hi colinl, thanks for your feedback. I'm fine with the closure, others of the community may not. I found a commercial solution for the issue. If there is anything I can support in this regards just drop me a note.

[colinl]

Is there a reason that you did not ask for help with the problem on the forum?