How to use base64 encoded images in datatable?

Grafana Configuration
1

Hi,

I am trying to figure out the new feature to display a base64 encoded images in a table, but am a bit stuck and don’t know how the image should be encoded.

I have an influxDB, into which I am inserting a base64 encoded jpg image. The payload I am pushing to influxDB looks like this (in this example, just a red dot I found on stack overflow):

  sensor_data,sensor=office_camera imageData="iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

In my panel, I have the following influxDB query:

SELECT first("imageData") FROM "sensor_data" WHERE ("sensor" = 'office_camera') AND $timeFilter GROUP BY time(1m) fill(null)

And I get a result set that I can display:

image
image1216×98 19.6 KB

But if I try and override the Cell display mode for the field to “Image”:

I get this:

image

Should I prefix my data in some way?

If I copy the value from the table in Grafana, and pipe it through base64 to decode it, I get the red dot jpeg image, which I can open in an image viewer.

Thanks for a nice product!
//magnus

2 Likes
2

Basically, what I want to do, is to slowly get to mimik the awesome image timeline shown in Nissan Leaf -> Cloud all the things - GrafanaCONline | Grafana Labs

(for example 41min23sec into the video)

image
image1257×730 271 KB

If someone would have a pointer to how to create such a timeline, I would be extremely thankful.

3

I figured it out.

I have to prefix the base64 data with “data:image/jpg:base64” (plus a space, then my base64 string).

cat<<EOT > payload.file
  sensor_data,sensor=office_camera imageData="data:image/jpg;base64, $(cat currentImage.jpg | base64)"
EOT

curl -i -XPOST "http://${influxHost}:${influxPort}/write?db=${influxDb}" --data-binary @payload.file

I am still curious on how to create a timeline in a graph from this. =)

//magnus

4

He names the used panels in his project page (if you watch to the end of the video, there is the GitHub project named. Within the project he names the used panels.
It seems it might be this one: GitHub - ryantxu/image-viewer-panel: Image Viewer panel

5

just to clarify for other users, if you have an opencv image data type, the following code will produce the string in python

encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 20]
retval, buffer = cv2.imencode('.jpg', input_image,encode_param)
data = base64.b64encode(buffer)
encoded_img = str(data, "utf-8")
imageData="data:image/jpg;base64," + encoded_img
6

Have to try to use influxDB and the Dynamic image plugin panel? I have the below query and would like to show the according image at the panel:

from(bucket: "test_enviro")
  |> range(start: -5m)
  |> filter(fn: (r) => r["_measurement"] == "rpi-bme280")
  |> filter(fn: (r) => r["_field"] == "img" or r["_field"] == "arrow" or r["_field"] == "forcast_text")
  |> filter(fn: (r) => r["location"] == "xxxx")
  |> aggregateWindow(every: v.windowPeriod, fn: last, createEmpty: false)
  |> yield(name: "last")

In the img field I have locale path to the image+name e.g. /home/pi/pressure_info/SunCloud.png
But, I somehow can’t get to show the image. Same issue when using base64 image plugin.

Any Idea what I am doing wrong? Thanks