Center image in viewer window?

Dashboard
1

I've been using the Dashboard with a template and viewer node to display the person detection from my AI system. It works great 720p, 1920p, 4K etc images are all automatically resized to fill the viewport and with my few 4:3 cameras the distortion resizing to 16:9 is not too bad.

Recently I've changed the system to "zoom in" on the detection and send a cropped image, since these are usually square or "portrait" aspect ratios the distortion is not really acceptable.

My original template node contains the single line:
<img width="768px" height="360px" src="data:image/jpg;base64,{{{payload}}}

Changing it to remove the width= part:
<img height="360px" src="data:image/jpg;base64,{{{payload}}}

Give a good solution in that the height is resized and the width reduce in proportion so there is not distortion. The issue is the image is displayed "left justified" in the viewport. I can live with it, but it'd look a lot better if it were centered in the viewport.

A "center" attribute seemed to be accepted but didn't seem to do anything:
<img height="360px" center src="data:image/jpg;base64,{{{payload}}}

Is there a simple way to get the image centered in the viewport?

2

Using CSS internal or inline styling should work

<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 360px;
height: 360px;
}
</style>
<img class="center" src="data:image/jpg;base64,{{{payload}}}"/>

or

<img style="display: block;
        margin-left: auto;
        margin-right: auto;
        width: 360px;
        height: 360px;" src="data:image/jpg;base64,{{{payload}}}"/>
3

Thanks but the inline method didn't work, it gave me the full image in the view-port with scrollbars, it was not resized at all. I've no clue how to try CSS method.

I've since discovered that being left justified has advantages when viewing the Dashboard on a cell phone. It is not the way I usually use it, but might be an accaptable trade-off.

4

Strange as if i resize an image i get no scroll bar
e.g

chrome_screenshot_1687077540751
chrome_screenshot_16870775407511920×1468 57.4 KB

What is the viewer node?

5

Here are my template and viewer nodes:

[
    {
        "id": "e3a5e598.f37888",
        "type": "template",
        "z": "adf6d32e.a7a8c",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<img height=\"360px\" src=\"data:image/jpg;base64,{{{payload}}}\">",
        "output": "str",
        "x": 870,
        "y": 935,
        "wires": [
            [
                "6dfa5a6e.142884"
            ]
        ]
    },
    {
        "id": "6dfa5a6e.142884",
        "type": "ui_template",
        "z": "adf6d32e.a7a8c",
        "group": "893450d8.62944",
        "name": "Viewer",
        "order": 1,
        "width": "13",
        "height": "7",
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 1005,
        "y": 935,
        "wires": [
            []
        ]
    },
    {
        "id": "893450d8.62944",
        "type": "ui_group",
        "z": "",
        "name": "Camera Viewer",
        "tab": "1b8c760d.46028a",
        "order": 2,
        "disp": true,
        "width": "13",
        "collapse": false
    },
    {
        "id": "1b8c760d.46028a",
        "type": "ui_tab",
        "z": "",
        "name": "AI Controller",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

There may be version issues, these are "IOT" systems without the latest versions. In this particular case node-red-dashboard 2.22.1 node-red 1.0.6

6

Your example is corrupt as you did not follow forum guidelines for posting code, use </> button and paste between triple backticks. You should know this by now, you are not a newbie in the forum.

Your issue is you are placing the image in a div block.
here are two ways to display without the div

[{"id":"d1f3ceb3299cb7f9","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=","payloadType":"str","x":90,"y":4560,"wires":[["6cd425d6633ec68e","0147d7fbe533970f"]]},{"id":"6cd425d6633ec68e","type":"template","z":"b9860b4b9de8c8da","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"msg.template\n<img style=\"display: block;\n        margin-left: auto;\n        margin-right: auto;\n         width:100px;\n         height:100px;\" src=\"data:image/png;base64,{{{payload}}}\" />\n","output":"str","x":200,"y":4340,"wires":[["6dcad1c6c461fda3"]]},{"id":"0147d7fbe533970f","type":"ui_template","z":"b9860b4b9de8c8da","group":"2d4fe667.28f8ba","name":"direct in ui-template","order":26,"width":0,"height":0,"format":"Direct in ui-template\n<img style=\"display: block;\n        margin-left: auto;\n        margin-right: auto;\n         width:150px;\n         height:150px;\" src=\"data:image/png;base64,{{msg.payload}}\" />","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":330,"y":4480,"wires":[[]]},{"id":"6dcad1c6c461fda3","type":"ui_template","z":"b9860b4b9de8c8da","group":"2d4fe667.28f8ba","name":"msg.template","order":25,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":380,"y":4380,"wires":[[]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

I have use png example base64 image as jpg was to large for the forum.

7

Thanks but I can't make it work. Your direct method just displayed the image in what looked like a 100x100 pixel box. All I changed was png to jpg in the string. My images are not of fixed size. What I have now is working like I want except it is left justified instead of centered in the viewer.

8

did my flow work with no changes?

If you changed the input payload string to a jpg base64 string, then you would also need to change the data uri in the template and ui-template nodes from
data:image/png;base64,
to
data:image/jpg;base64,

The images are jpg base64 string sent direct to ui-template node.

9

That is exactly what I changed in the template node.

Only your direct UI example worked un-modified to show the emoji image.

Here is a screenshot of my UI page:

Screenshot at 2023-06-18 15-24-34
Screenshot at 2023-06-18 15-24-341317×798 165 KB

The person on the bike is a crop from the upper right hand corner of the frame and is 441x651 pixels. People closer to the this camera often end up something like 1200x 1600.

It works exactly as I want, except it I think it would look better if the image was centered in the view. But as I said, when I viewed it on my cellphone I can see advantage to the left justification.

10

I put this in my "template node" if it can help? try you never know ...

<style>
  div.image {
    margin-left: auto;
    margin-right: auto;
    height: 100%
  }
</style>

<div class="image">
  <img src="data:image/jpg;base64,{{{msg.payload}}}" alt="wait..." style="height:100%">
</div>
11

Thanks, but it didn't work. Did I do something incorrectly?

[
    {
        "id": "e16b700c.0e8",
        "type": "template",
        "z": "7fdf004e.28b08",
        "name": "",
        "field": "template",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<style>\n  div.image {\n    margin-left: auto;\n    margin-right: auto;\n    height: 100%\n  }\n</style>",
        "output": "str",
        "x": 610,
        "y": 480,
        "wires": [
            [
                "9b5cfa3f.4a4ad8"
            ]
        ]
    },
    {
        "id": "9b5cfa3f.4a4ad8",
        "type": "ui_template",
        "z": "7fdf004e.28b08",
        "group": "ce7f592b.fc44c8",
        "name": "viewer",
        "order": 2,
        "width": "13",
        "height": "7",
        "format": "<div class=\"image\">\n  <img src=\"data:image/jpg;base64,{{{msg.payload}}}\" alt=\"wait...\" style=\"height:100%\">\n</div>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 775,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "ce7f592b.fc44c8",
        "type": "ui_group",
        "z": "",
        "name": "Camera Viewer",
        "tab": "cbe60e1a.85145",
        "order": 2,
        "disp": true,
        "width": "13",
        "collapse": false
    },
    {
        "id": "cbe60e1a.85145",
        "type": "ui_tab",
        "z": "",
        "name": "AI Controller",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
12

try this :

[
    {
        "id": "40dcc31eb1e028e9",
        "type": "ui_template",
        "z": "1543d308b342690a",
        "group": "93fae10c.09faa",
        "name": "viewer",
        "order": 3,
        "width": 6,
        "height": 4,
        "format": "<style>\n  div.image {\n    margin-left: auto;\n    margin-right: auto;\n    height: 100%\n  }\n</style>\n\n<div class=\"image\">\n  <img src=\"data:image/jpg;base64,{{msg.payload}}\" alt=\"wait...\" style=\"height:100%\">\n</div>\n  \n ",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 440,
        "y": 1240,
        "wires": [
            []
        ]
    },
    {
        "id": "93fae10c.09faa",
        "type": "ui_group",
        "name": "Default",
        "tab": "6ff5405c.a8e6",
        "order": 1,
        "disp": true,
        "width": "20",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6ff5405c.a8e6",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 8,
        "disabled": false,
        "hidden": false
    }
]
13

Thanks. Now it is close, images are centered but there is still a scrollbar on the right side of the frame that basically has nothing to scroll. How to get rid of it?

Screenshot at 2023-06-27 16-58-15
Screenshot at 2023-06-27 16-58-151252×739 150 KB

Screenshot at 2023-06-27 17-01-52
Screenshot at 2023-06-27 17-01-521252×739 73.5 KB

14

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