Difference in behavior display on phone vs desktop?

Dashboard
1

I'm just not knowledgeable about html and "web development" but have used the dashboard for a simple, yet effective, controller/viewer for my AI enhanced security system.

What I don't understand is why it works "better" on my phone than my desktop, both running Chrome browser.

On the phone I get a vertical layout, with the small images "zoomable" if I tap it and pinch zoom and pan. On the desktop its a horizontal layout with just the fixed sized small image displayed, but if i do "Save As" It saves the full resolution image.

Is there anyway to make the desktop behavior be more like on the phone?

Here is the section of the flow that reads an image buffer via MQTT and ends with an template on the dashboard. I basically got this by slight modification of other sample flows:

[{"id":"54dca344.c9d7bc","type":"template","z":"9eec8188.e2fcb","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"640px\" height=\"360px\" src=\"data:image/jpg;base64,{{{payload}}}\">","output":"str","x":1215,"y":1250,"wires":[["63ee5fe4.0250c"]]},{"id":"63ee5fe4.0250c","type":"ui_template","z":"9eec8188.e2fcb","group":"a4d1387f.772c08","name":"Viewer","order":1,"width":"13","height":"7","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1345,"y":1250,"wires":[[]]},{"id":"560a60c3.1b056","type":"base64","z":"9eec8188.e2fcb","name":"","action":"str","property":"payload","x":1075,"y":1250,"wires":[["54dca344.c9d7bc"]]},{"id":"31fc0008.fe4f9","type":"ui_button","z":"9eec8188.e2fcb","name":"filename","group":"a4d1387f.772c08","order":2,"width":"12","height":"1","passthru":true,"label":"{{msg.filename}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":935,"y":1280,"wires":[[]]},{"id":"99a5d2.222a7a3","type":"mqtt in","z":"9eec8188.e2fcb","name":"ImageBuffer/","topic":"ImageBuffer/#","qos":"0","datatype":"buffer","broker":"7aae156e.ffd09c","x":225,"y":1250,"wires":[["9bcdb480.57dca8","ea88efb8.5cc88"]]},{"id":"9bcdb480.57dca8","type":"change","z":"9eec8188.e2fcb","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"image","tot":"msg"},{"t":"move","p":"topic","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":435,"y":1250,"wires":[["c4a2e364.fd7f8"]]},{"id":"c4a2e364.fd7f8","type":"csv","z":"9eec8188.e2fcb","name":"","sep":"!","hdrin":"","hdrout":"","multi":"one","ret":"\\n","temp":"topic,filename","skip":"0","x":595,"y":1250,"wires":[["9183479e.46fab8"]]},{"id":"9183479e.46fab8","type":"change","z":"9eec8188.e2fcb","name":"","rules":[{"t":"move","p":"payload.filename","pt":"msg","to":"filename","tot":"msg"},{"t":"move","p":"image","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":755,"y":1250,"wires":[["560a60c3.1b056","a7281be4.6c0338","31fc0008.fe4f9"]]},{"id":"ea88efb8.5cc88","type":"debug","z":"9eec8188.e2fcb","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":440,"y":1305,"wires":[]},{"id":"a7281be4.6c0338","type":"debug","z":"9eec8188.e2fcb","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":925,"y":1220,"wires":[]},{"id":"a4d1387f.772c08","type":"ui_group","z":"","name":"Camera Viewer","tab":"3270d8bf.5a65a8","order":2,"disp":true,"width":"13","collapse":false},{"id":"7aae156e.ffd09c","type":"mqtt-broker","z":"","name":"localhost:1883","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","closeTopic":"","closePayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"3270d8bf.5a65a8","type":"ui_tab","z":"","name":"LorexAI Controller","icon":"dashboard","disabled":false,"hidden":false}]type or paste code here
2

Dashboard attempts to be adaptive to the available window size. If you change the size of your desktop window and make it suitably narrow, it will change to the vertical layout as it does on your phone (with its naturally narrower screen).

Not sure about the difference in image size though, you would have to look at the details of the CSS being used I'm afraid which does require some knowledge of how HTML and CSS works.

Another thing to note is that just because they are both called "Chrome" doesn't necessarily mean that they are much alike. On iOS for example, all browsers have to use the iOS Safari engine as this is dictated by Apple.

3

Thanks, Making the window narrow enough does switch it to the vertical layout, but there are intermediate sizes where the display is messed up.

I did find a workaround playing around based on your suggestion, If I open the image in a new tab I get the full image resized to fit the window and the "zoom" magnifying glass cursor appears to get the zoomed image with scrollbars.

Above my pay grade to deal with, but this effectively solves the issue in the desktop browser.

4

Not quite the solution on the desktop.

Seems the "open image in new tab" is grayed out for some images, particularly large ones (4K UHD).

Depending on the cameras, the images processed by the AI can be anything from CIF to UHD.

The zoom and pan on the phone is fine for 4K images.

5

One more bit of info, the 4K UHD images seem to be "compression dependent. I had to increase the compression (lower the quality) of the image buffers I was feeding to the dashboard so as to make them small enough to be accepted as MMS messages. Once I did this, the open in new tab reappeared on the images from the 4K cameras.