Can we display somehow an image in a QA web interface

[Neo Andersson 230]

Hi

The answer is probably not, but maybe some more experienced, more skilled user can give me some hint...is there any method by which we can display an image on a Quickapp interface? Som image from url or something...

Thanks

[SmartHomeEddy 1,007]

Look for the Ritual quickapp from Joep. Jgab also made a nice QuickApp with an image. 
 

 

Please login or register to see this link.

 

Please login or register to see this link.

 

Also some discussion over here:

 

 

 

 

 

Edited April 6, 2023 by SmartHomeEddy

[Joep 200]

Thank you @SmartHomeEddy; how I did it:

 

1. Go to 

Please login or register to see this link.

;

2. Upload an image;

3. Click show code and copy the code;

4. Go to your Lua scene and add the encoded img to a variable:

 

Please login or register to see this code.

 

Change the width and height to the correct size and aspect ratio. Also change the label name to your label.

[SmartHomeEddy 1,007]

It is that easy 😁

[Neo Andersson 230]

Hi, actually i have found it out meanwhile...but thanks anyway..

[SmartHomeEddy 1,007]

But why ask?

[Neo Andersson 230]

I couldnt find it before..

[Joep 200]

Please post a reply if you find a solution yourself before people post a possible solution to help you.

 

People spend their valuable time to give you an answer and your behavior comes across as disrespectful.

 

This a a community, and not a servicedesk.

[Neo Andersson 230]

As soon as I found the solution i came to the post and commented it. In between i had no time and access to the topic, so i am sorry.

I hope i did not offend anyone.

 

[Christb 33]

On 4/6/2023 at 9:29 PM, Joep said:

Thank you @SmartHomeEddy; how I did it:

 

1. Go to 

Please login or register to see this link.

;

2. Upload an image;

3. Click show code and copy the code;

4. Go to your Lua scene and add the encoded img to a variable:

 

Please login or register to see this code.

 

Change the width and height to the correct size and aspect ratio. Also change the label name to your label.

I have tried your solution using as image one of  Guntamatic.png logo and I have first pasted my image in the base64-image site and get a very important string

I get a blank display at the image location wich has the correct size (128x128).  No fibaro:debug error but going to the Firefox console I have this error message:

GET
https://hc3-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
[HTTP/1.1 414 Request-URI Too Large 23ms]

What goes wrong?

[Joep 200]

I can't determine what goes wrong from your post.

Please post your code and remove the base64 string, its to large.

If I make a guess, you added http://hc3 in front and that is not correct. It has to be: data:image/png;base64,BASE64CODEHERE

 

Note: the new Yubii app doesn't allow HTML view by default. So I don't know if this method keeps working.

 

 

[Christb 33]

6 hours ago, Joep said:

I can't determine what goes wrong from your post.

Please post your code and remove the base64 string, its to large.

If I make a guess, you added http://hc3 in front and that is not correct. It has to be: data:image/png;base64,BASE64CODEHERE

 

Note: the new Yubii app doesn't allow HTML view by default. So I don't know if this method keeps working.

 

 

Dear Joep,

I am using old or new Yubii application but alway with "use New view" unticked.

 

I have changed the image that causes the error by a standard Fibaro icon (128x128 pixels and 10.1 kb) and it works with both YUBII applications😀.

 

The GUNTAMATIC image used for my first test (118x128 and 12kb) is accepted as a valid icon for a device.

I didn't add myself the http/hc3" in front of the data...☹️ but it's so easy to make errors..

Below the part of the code about image insert:
--===================================Start of Image creation =========================================
  --[[  data:image/png;base64,--]]
local image=  "data:image/png;base64,iVBORw0KGgoAAAANS...
...h9csqnpnXqP3tEEmJThRZy8BZMEmJRJAkzKJAEm5V0p/x/0nddd28TmKAAAAABJRU5ErkJggg=="
--=================================== End of Image creation =========================================
--------- updating image in onInit() -------------------------  
self:updateView("info2", "text", "<div><img src='" .. image .. "' crossorigin='anonymous' alt='My Logo' width='128' height='128' border='0'></div>")
 

I have made a new test with the GUNTAMATIC.png file and it does not work again. In the html Firefox console I am getting the following:

Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "https://hc3-00006080/api/userActivity", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://hc3-00006080/api/userActivity: 0 Unknown Error", error: error }

I just can see "My Logo" instead the image but the QA is working.

 

My test are done with a non production QA for testing features like Select type buttton, formating labels, using table to display information, linking buttons actions... 

Attached the full QA (the one using SwitchOFF.png) and the 2 icons used.

Is there something in the GUNTAMATIC image that kills the process?

 

New: I want to be able to change the displayed image following a button press: is there a way to created a function that will base_64_encode an image that is loaded from a directory when needed?

 

 

 

Please login or register to see this attachment.

Please login or register to see this attachment.

Please login or register to see this attachment.

Edited February 27, 2024 by Christb

[Christb 33]

14 minutes ago, Christb said:

I have made a new test with the GUNTAMATIC.png file and it does not work again. In the html Firefox console I am getting the following:

Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "https://hc3-00006080/api/userActivity", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://hc3-00006080/api/userActivity: 0 Unknown Error", error: error }

I just can see "My Logo" instead the image but the QA is working

Joep,

I am sorry, again a paste error: a space was introduced between " and data/: " data:image/png;base64,

This is just killing the process. Thank you for your help.👍 

 

I still have the need to refresh this displayed image following a QA action.

Please login or register to see this attachment.

[Christb 33]

Sorry, I finally found a post from JGAB explaining how to do it:

On 2/3/2022 at 1:30 PM, jgab said:

Hack-of-the-day...

 

Please login or register to see this attachment.

I am now able to change the image from a file (images{plan1.="encoded64_image1",plan2="encoded64_image2",...}

What I am not able to do is to load an external .png file, encode it in  base64 inside the QA to update the images table.

I may not be possible with HC3?

[Joep 200]

An external PNG you can load directly with its url. 
 

The Base64 method is when you want the image in the QA and don’t load it from a server 😉

[jgab 2,648]

I have a much better hack in the pipe...  

[jgab 2,648]

Work in progress...