Best practice to show time series of images

I have a series of images recorded from a webcam.

I want to display those images depending on the time range selector of Grafana together with other recorded data like temperatures etc.

Images are stored on a local drive which can be made accessible through a webserver.

I found this discussion here, but it does not really solve my problem:

What is the best way to archive this? I could store the appropriate image file location in postgres and maybe even store the whole images as binary data in the database. But I would prefer a way to load them via the web server using the file timestamp, since loading images from postgres would be not too easy…

Any ideas how to do it?

@sebastianebert If you decide to store image in the Postgres or any other data source there is Base64 Image/PDF plugin for Grafana | Grafana Labs panel to display base64 encoded images.

To load images from web server you can use various panels. Take a look at the Dynamic text panel (Dynamic text plugin for Grafana | Grafana Labs).

Also you can create a custom panel with ability to look at previous/next images and a play button to see sequential images.

1 Like

Thanks for the recommendations!

Base64 Image/PDF plugins seems to be a good choice. If I got it right, the plugin will be able to render the raw data coming from postgresql. With this solution, I will store the image data inside the database.

I think, you probably meant Dynamic Image panel plugin? Dynamic text plugin does not seem to have the right functionality. Using it, I will store the image on the file system and only put the reference to the file on postgresql. Dynamic Image will be able to render the right image depending on the selected time interval, right (reading the corresponding filename from postgres)?

1 Like

@sebastianebert Correct, Base64 Image/PDF was created exactly for that. You are welcome to ask any questions or suggest improvements on the GitHub repository.

The Dynamic Image panel may work in your case. I suggested Dynamic Text panel which can retrieve the reference to the file from the Postgres database and then you can simply use HTML or markdown to display it from the webserver:

<img src="{{name}}">

As you can see, there are multiple options to achieve what you are looking for and this is the beauty of Grafana.

Kudos to @mikhailvolkov :+1: but I would prefer solution from Grafana first. Problem with 3rd party plugins is that they may work now, but they may not work in the future (or when new major Grafana version with some new UI feature/change is released).

I would use standard Grafana table panel with Cell display mode: Image, e.g.:

1 Like

@jangaraj, I agree. The last time I checked, the Image option in the Table was too small for our needs. I wanted a full-size image scaled with a panel. I will check if it was changed recently.

After using Base64 Image/PDF plugin for a while, it might have advantages for me to use @ jangaraj’s alternative based on the Grafana table panel.

So I the the cell display mode to “image”. Data comes Base64 encoded from my Postgres database. However the image is not displayed.

I there any conversion missing?

What you see here is using the “auto” mode. The “image” mode result is just below

screenshot_1155

1 Like

Hi !
I dealt a bit with Grafana’s table and image displaying.

I assume your image is not displaying there cause it’s missing the base64 header.
To display images with table you need this : data:image/jpeg;base64,
written just before the rest of your encoded image.

Images

That’s how my encoded image is written in the table.
Hope it helps.

2 Likes

Great! This works:

select 'data:image/jpeg;base64,' || content

One more indirectly linked question: How can I change the row height? The images are displayed quite tiny…

That’s probably off topic, I will open a new thread…