Dashboard differences when viewed on a cell phone vs computer browser

I'm curious about the dashboard UI behavior on cell phones vs. a desktop computer.

Here is a straight forward flow to control, monitor, and send notifications from my python AI. The key here is the dashboard pane on the right side where you can see the layout.

On a cellphone everything is "stacked" in a single window with scrolling. This is perfect for my purpose on a cellphone -- tested with Chrome and whatever other "default" browser was on the phone (if it wasn't Chrome) on Android 4.4, 5.1, 6.1, 7.1, & 8.0. If I pinch/zoom and rotate the phone I can see any image in its full 720p or 1080p glory. Very happy.

On a desktop computer I get this display with two columns and apparently no way to zoom the image, although if I opposite click and "save image as" I get the full image.

Having the two columns is an advantage on the desktop and immediately suggests re-arranging maybe 3 columns and two rows, but having no way to "zoom" the image makes it not so useful as a system viewer on a notebook computer.

Any solutions?

I noticed that in the forum my png images have the same issue, but a bottom bar appears if I "hover" which pops up a full sized display. I pretty much an http virgin, is there any reasonably simple way to add such a "widget" to the dashboard image displays?

Have you tried changing the width of your dashboard group?

I've no idea what this might be and where I'd change it. The only "width" I see is in the dashboard template nodes which I changed from the default 6x6 to 7x4 to better match the images aspect ratio.

Also you could split your page into more groups which would then layout as more columns on the desktop view

I'm happy enough with the desktop view, this issue is not the layout its the fact that on the cellphone I can pinch-zoom the images to see "everything" where on the desktop the display is "stuck" at the reduced resolution.

This forum has the same issue -- the images in the thread are much reduced in size, but on this page if I "hover" on an image, a bar pops up and lets me display the images "full size"

I'm going to open this thread on my phone as see how it behaves.

As I said, I'm pretty much an http virgin,

Well at the current size 3 columns would at least let you see them all in one go without scrolling :-)... but yes no dead simple answer re zoom - apart from maybe adding a whole load of tabs with one large size template (one camera per page) on. (leaving this as the front page)

If you double-click any of the dashboard nodes, the first property is group. Click the edit button to the right of the group name. This will bring up "edit dashboard group node", and the 3rd setting down is width.

You can also click the down arrow in the top-right corner and select dashboard. Under layout, find your group and edit.

On my phone (Android 8.1.0, Chrome browser) this forum shows the images resized to fit the width of my phone screen (if I rotate to landscape mode whitespace appears on the side of the image and the text re-formats to fill the width of the screen.

There is no pinch-zoom of the image and the popup bar is replaced by a "double arrows" that pops up an offer to download the image(s). Presumably the server sent me a page with the images dynamically sized to fit my screen width.

When I close the tab and re-enter the forum with the phone in landscape mode, I get the images sized to fit what was the height. When I rotate to portrait mode the images get cropped on the right side to fit what was the height.

My dashboard behavior on the phone seems pretty much perfect, its less that useful on the desktop because the images are "stuck" on the small size.

I'm hoping this clarifies the issue I'm asking about.

Ok found it, its at the default of "6" which presumably means 6 x 48 (the default on the Layout tab for 1x1 widget size)

I'm not seeing how changing this would help. I'm running the system now for tests, so I can't mess with it at the moment, but changing the template node from from auto or 6x6 (I forget which was the default) to 7x4 got rid of the scroll bars on the bottom of the image displays.

It wouldn't give you the ability to zoom, but it'd make that column much bigger on the desktop. Looks like you're using the template nodes for the images, maybe add links to open up the images on a new page? Probably some way to add the javascript to the page for a popup image viewer too.

That would be the purpose of this thread :slight_smile: with luck maybe some one who knows how to do it will respond.

I did "View source" on this page but its way above my http/javascript pay grade.

I also experience this issue, when I view nodered ui on my phone it fills the whole screen, which I want, but when viewed on the tablet is only fills about half of the screen.

How can I make this fit on both devices?

1 Like

See here the examples, left is on the tablet, a lot of unused space, right is on the phone, where it fits perfectly:

1 Like