Show Base64 Image


#1

Hi to everyone! This is my first post here!

So, I was trying to make a custom widget that will indicate an image to my portal. I’ve create a Data named IMG (defined as a string) and I am pushing the based64 image to it, every two minutes or so. To do that I am using Python and the code looks like that:

from pyonep import onep 
import base64

with open("Image.jpg", "rb") as image_file: 
encoded_string = base64.b64encode(image_file.read())

o = onep.OnepV1()

cik = 'My_CIK' 
dataport_alias = 'IMG'     #declared as a sting on the Exosite Portal 
val_to_write = encoded_string

testvar = o.write( 
cik, 
{"alias": dataport_alias}, 
val_to_write, 
{})

I am calling this code regularly (normally every two minutes). Now, for the widget side I’ve select Width=4, Height=4, Data Source the one I am pushing the base64 string, View Data: Count=1 and Refresh Rate = 0.

But what I should add to the Script field? Any help here with the javascript/css/html! I am super new to this and despite that I’ve read the exosite tutorial about the custom widgets I didn’t understand a lot!

Thank in advance!


#2

Hi John! Welcome!

I don’t have time to write up a full example, but here’s some code that will show a base64 encoded image in a widget:

function( container, portal )
{
  var base64_image = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
  
  $(container).empty();
  $('<img/>', {
    style: 'width:100%; height:100%',
    src: 'data:image/png;base64,' + base64_image,
  }).appendTo(container);
}

You’ll need to replace the base64_image variable with the actual image that you have stored in your dataport. The easiest way to get that is to get it from the portal variable in the above code. See the Portal Resource section of the widget documentation for more information on the format of the data in there (or drop a console.log(portal) inside the function to see the actual data returned in your browser’s javascript console). You’ll probably also want to set the widget to refresh about every 60 seconds so that it automatically updates itself.

Let me know if you have any trouble getting your image data out.


#3

Here is the reference code I think John is using.

Here is what it looks like when I set up the custom widget:

The script code comes from:

And here is what it looks like:


#4

Thank you both for your help! Actually I haven’t done any progress until now! Mainly I am working with try end error mode with this code!

The code Patrick wrote works but I am facing problems loading my own image that I am pushing into the IMG dataport. I am very new to that type of coding and thats why I am so confused for now! I am more a C/assembly/VHDL/Verilog type of programmer!


#5

I am still trying to figure out a solution! Is there any image resolution limitations?

Do you think that the image should be a low resolution one?


#6

The only limitations that you’re going to run into are the 64Kb limit on string type dataports and the 10Mb limit on total data stored in a device. So, the largest image that you’re going to be able to store would be about 48Kb (before base64 encoding), the actual resolution will depend on what type of compression you’re using and what the image is actually of.

Also, to not run into the device storage limit, you’d want to set the retention on that dataport to “1” or some other low number.


#7

It seems that I am inside the limits but still without any success! For example I am using your code (@ Patrick):

function( container, portal )
{
  var base64_image = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

  $(container).empty();
  $('<img/>', {
    style: 'width:100%; height:100%',
    src: 'data:image/png;base64,' + base64_image,
  }).appendTo(container);
}

and I am trying to change the fixed string of the base64 image

var base64_image = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

to point to the datapoint (named IMG) I’ve set. But somehow I am missing something!


#8

Hey John,
I see where you are having trouble. You just have to make sure to gather portal resources. Earlier in the thread Patrick linked you to the documentation that explains the structure of portal resources: http://docs.exosite.com/widget/#portal-resources. That read is worth your time.

You may also find it useful to see the stock widget we created specifically for this purpose. The widget Mike inserted earlier contains a function with the name ~getPortalResrouces, you could use that widget in its entirety, or use that function within for reference.


#9

I don’t know what I am doing wrong! I’ve just copy Mikes code and nothing is happening! Both codes are exactly the same (with the appropriate CIK and dataport name), even the images are the same on the exact same image folder. But nothing!

No image at all! I don’t know what I am doing wrong!


#10

If you add ‘support@exosite.com’ as a manager to your portal, we can check this out for you.

-Mike


#11

I’ve just did it! Now exist is a manager to my portal! I am not updating any base64 image for now and you can use the dataport as you like!


#12

Ok. The problem was the your Device in the platform did not have an alias. Custom widget APIs will only work if device’s and dataports have aliases. I made your device client’s alias ‘ermis’.

It should be working now.
-Mike


#13

The system was working for a few weeks without any problem but now it seems that the picture is always corrupted!

I am getting just the few first lines of the picture and nothing else!


#14

Have you looked at the actual value in the dataport - is it correct? We don’t have much to work off here. Have you debugged the widget - are there any javascript errors being generated, etc?