HC3 QuickApps coding - tips and tricks

[Christb 13]

Done, SVG image are realy simple to manage: thinner line, dotted smaller Grid: 

Please login or register to see this image.

/monthly_2024_02/image.png.c36886a5b662e2d7872623f3751450aa.png" />

I will try to suppress grey areas to save space in QA Yubbi view.

Edited February 28, 2024 by Christb

[jgab 2,122]

Ok, made some improvements and added @Christb dotted raster as a SVG feature (SVG.raster=true)

It also only re-renders stuff that changes, thus saving precious HC3 cpu cycles...

 

Please login or register to see this image.

/monthly_2024_02/image.png.edd7a6ad33f17561219803f4de8cbcb1.png" />

Please login or register to see this attachment.

 

Please login or register to see this code.

 

Edited February 29, 2024 by jgab

[Brors94 53]

 

I have tried to change the Image of the quickapp too see if i understand how it works and maybe could use it for a layout for my house to show status of motion sensor and temperatures   

I am using this site to convert an exampel planview to base64: 

Please login or register to see this link.

 (found in an other post from Jgab)

but ill get an error when changing the data between the:

 

_IMAGES['houseMap'] = [[data:image/png;base64,iVBORw0K........and alot more letters.......then the end--->

kJggg==]]

 

Error:

 

Do you know why? 😅

 

 

 

 

 

[jgab 2,122]

WHat happens if you change line 74 to

Please login or register to see this code.

e.g. 54 instead of 100 ?

[Christb 13]

15 hours ago, Brors94 said:

Error:

Please login or register to see this link.

 

I have been able to change displayed image using 4 buttons like below and I got this eror message with 2 of the 4 base64 image's data I added in _IMAGES data. I have been able to correct that in using  for all images the same size (300*215px) but also looking at not having an undesired space between "[[" and "data:image/png;.."(it appears that this space is introduced during the copy/pace process)

Please login or register to see this image.

/monthly_2024_03/image.png.9f471c1095eada6aeb6afa22246f1c1f.png" />

I have not yet finished to develop this modified QA because, in making the background image linked to buttons event, I have killed the "raster" and "indic" functions; the dot and orange rectangles shown above are those created by onInit(). I need to discover why...

 

Edited March 1, 2024 by Christb

[jgab 2,122]

9 minutes ago, Christb said:

I have been able to change displayed image using 4 buttons like below and I got this eror message with 2 of the 4 base64 image's data I added in _IMAGES data. I have been able to correct that in using  for all images the same size (300*215px) but also looking at not having an undesired space between "[[" and "data:image/png;.."(it appears that this space is introduced during the copy/pace process)

Please login or register to see this link.

Please login or register to see this link.

I have not yet finished to develop this modified QA because, in making the background image linked to buttons event, I have killed the "raster" and "indic" functions; the dot and orange rectangles shown above are those created by onInit(). I need to discover why...

 

Yes, the error comes from an attempt to get the size of the image with SVG.getImageSize.

I try to base64decode the first x bytes of the image to get the width and height info.

For it to work x must be even four characters and large enough to get the header info.

Please login or register to see this code.

seems to work for me. 

If you know the size you can remove the SVG.getImageSize and set the size manually.

 

There is also some issues with the encoding in prBuff.

To be on the safe size the charMap should look like

Please login or register to see this code.

 

[jgab 2,122]

If you use vscode and fibemu you can automatically include an encoded png in the QA.

The advantage is that you also get the height and width

(It creates an QA file with a table _IMAGES[<name>]={data="data:image/png;base64,...",height=<h>,width=<w>} )

 

Ex. This imports a png with the name 'dog' from the examples directory.

Please login or register to see this code.

 

Another approach is to draw the housemap as a SVG instead of a PNG. Probably saves a lot of space.

Using something like

Please login or register to see this link.

editor, and import it as an Element(svg)

Edited March 1, 2024 by jgab

[jgab 2,122]

The "temp labels" are done with an SVG filter, and it's not very pretty.

Setting background color of SVG text objects is a tricky issue - just try to google it...

However, if we know the string size (temperature 6 characters) we can just make a rectangle behind with a border. The complication is when we don't know the size of the string and thus can't make a corresponding sized rectangle.

[Brors94 53]

8 hours ago, jgab said:

WHat happens if you change line 74 to

Please login or register to see this code.

e.g. 54 instead of 100 ?

This did it    

[Christb 13]

Dear JGAB, I have an unexpected issue with visual studio:

in the debug console the header giving the link to the HTML view is missing as shown below:

Please login or register to see this image.

/monthly_2024_03/image.png.a9f556a79dc198255a09a8e2f908410d.png" />

As you can see, it is starting with the line Running 'main'

The web frontEnd is stucked to the last workinq files I was using : ping.lua/pong.lua

What I have to do to go back to usual behaviour?

 

[jgab 2,122]

23 minutes ago, Christb said:

Dear JGAB, I have an unexpected issue with visual studio:

in the debug console the header giving the link to the HTML view is missing as shown below:

Please login or register to see this link.

Please login or register to see this link.

As you can see, it is starting with the line Running 'main'

The web frontEnd is stucked to the last workinq files I was using : ping.lua/pong.lua

What I have to do to go back to usual behaviour?

 

1. Reload the web page  the ping should go away then...

2. Is your web port occupied (5004) - kill it.

3. Have you done a git "pull" to get the latest changes?

4. Restart vscode.

 

Edited March 1, 2024 by jgab

[jgab 2,122]

13 minutes ago, jgab said:

1. Reload the web page  the ping should go away then...

2. Is your web port occupied (5004) - kill it.

3. Have you done a git "pull" to get the latest changes?

 

There was a bug when including images on Windows (forgot to read the file in binary mode - didn't matter on MacOS). Pushed the fix.

[jgab 2,122]

One can do other things with SVGs besides housemaps.

Like a ticking clock...

Please login or register to see this attachment.

 

Please login or register to see this attachment.

 

Please login or register to see this code.

Please login or register to see this spoiler.

 

Edited March 1, 2024 by jgab

[Christb 13]

3 hours ago, jgab said:

1. Reload the web page  the ping should go away then...

2. Is your web port occupied (5004) - kill it.

3. Have you done a git "pull" to get the latest changes?

4. Restart vscode.

 

1. I did reload the web page more than once... no change 

2. I just did it and now the web page is not found

3. Yes just now

4. close and restart Visual Studio but without success.

Same start with your QA_SVGTest2.lua:

[01.03.2024] [19:49:23] [SYS   ] [QUICKAPP5000]: Running 'svg'
[01.03.2024] [19:49:23] [SYS   ] [QUICKAPP5000]: Running 'main'

and the web page not updated

My version of Visual is:

Version: 1.87.0 (user setup)
Commit: 019f4d1419fbc8219a181fab7892ebccf7ee29a2
Date: 2024-02-27T23:41:44.469Z
Electron: 27.3.2
ElectronBuildId: 26836302
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Windows_NT x64 10.0.19045

I think it has jus been update.

 

Do I have to desinstall vscode completly?

I prefer not as it will be a difficult and long process..

Edited March 1, 2024 by Christb

[Christb 13]

1 hour ago, Christb said:

1. I did reload the web page more than once... no change 

2. I just did it and now the web page is not found

3. Yes just now

4. close and restart Visual Studio but without success.

Same start with your QA_SVGTest2.lua:

[01.03.2024] [19:49:23] [SYS   ] [QUICKAPP5000]: Running 'svg'
[01.03.2024] [19:49:23] [SYS   ] [QUICKAPP5000]: Running 'main

In fact the port 5004 was not really closed because I got errors when trying your way.

Made a search on the web and I followed this process in PowerShell 7.4.1:

PS C:\Users\ASUS\Documents\fibemu\examples> netstat -ano -p TCP | findstr 5004
  TCP    0.0.0.0:5004           0.0.0.0:0              LISTENING       2528
  TCP    127.0.0.1:5004         127.0.0.1:51574        ESTABLISHED     2528
  TCP    127.0.0.1:51574        127.0.0.1:5004         ESTABLISHED     7484

PS C:\Users\ASUS\Documents\fibemu\examples> Get-Process -ID 7484

 NPM(K)    PM(M)      WS(M)     CPU(s)      Id  SI ProcessName
 ------    -----      -----     ------      --  -- -----------
    231   490.23     335.97  22 289.25    7484   1 firefox

 

PS C:\Users\ASUS\Documents\fibemu\examples> taskkill /PID 7484 /F
Opération réussie : le processus avec PID 7484 a été terminé. -- which means success!
PS C:\Users\ASUS\Documents\fibemu\examples>

This has closed all my Firefox sessions but launching again vscode, and the QA_Image.lua file I do not have the usual header again:

[01.03.2024] [21:25:38] [SYS   ] [QUICKAPP5000]: Running 'IMAGES'
[01.03.2024] [21:25:38] [SYS   ] [QUICKAPP5000]: Running 'main'
[01.03.2024] [21:25:38] [DEBUG ] [QUICKAPP5000]: ---- onInit start ----
[01.03.2024] [21:25:38] [DEBUG ] [QUICKAPP5000]: Image size
[01.03.2024] [21:25:38] [DEBUG ] [QUICKAPP5000]: ---- onInit end ----

and the web view is still the ping/pong view😠

so I killed also the other process:

PS C:\Users\ASUS\Documents\fibemu\examples> Get-Process -ID 2528

 NPM(K)    PM(M)      WS(M)     CPU(s)      Id  SI ProcessName
 ------    -----      -----     ------      --  -- -----------
     38    57.75      46.91     346.77    2528   1 python3.11

PS C:\Users\ASUS\Documents\fibemu\examples> taskkill /PID 2528 /F
Opération réussie : le processus avec PID 2528 a été terminé.
PS C:\Users\ASUS\Documents\fibemu\examples>

Then the web page was no more found, re opening vscode and running  your QA_SVGTest2.lua I still have not the header:

[01.03.2024] [21:40:00] [SYS   ] [QUICKAPP5000]: Running 'svg'
[01.03.2024] [21:40:00] [SYS   ] [QUICKAPP5000]: Running 'main'
[01.03.2024] [21:40:24] [DEBUG ] [QUICKAPP5000]: UIEvent:  {"eventType":"onReleased","deviceId":5000,"type":"UIEvent","values":{},"elementName":"__turnon"}
[01.03.2024] [21:40:24] [ERROR ] [QUICKAPP5000]: callAction: No such method turnOn
[01.03.2024] [21:40:25] [DEBUG ] [QUICKAPP5000]: UIEvent:  {"eventType":"onReleased","deviceId":5000,"type":"UIEvent","values":{},"elementName":"__turnoff"}
[01.03.2024] [21:40:25] [ERROR ] [QUICKAPP5000]: callAction: No such method turnOff

But the web page view is the right one

Please login or register to see this image.

/monthly_2024_03/image.png.d70e16e6abab9ac045d894fb9ea0dcf9.png" /> Not having the header is not stopping to used Vscode but you have to wait until the running 'main' is shown to know that all is OK

 

Edited March 1, 2024 by Christb

[jgab 2,122]

Ok, other things to look at - have you set a filter in the debug console of the vscode?

It is obviously running but you don't get all the logs - there is a filter in the debug console that can block/allow specific log strings.

[Brors94 53]

Hi @jgab, I am trying to add the value off my temp reading too the housemap

 

but I am a bit stuck since I dont understand how this works. 
I dont quite have the hang on the for loop and tables  

 

Do i have to store the temps in a table to make the for loop get the values in the same order as the self.temps? 

(if I understand the it right😅)

 

any advice on how to add the temps?

 

 

 

 

 

 

[jgab 2,122]

9 hours ago, Brors94 said:

Hi @jgab, I am trying to add the value off my temp reading too the housemap

 

but I am a bit stuck since I dont understand how this works. 
I dont quite have the hang on the for loop and tables  

 

Do i have to store the temps in a table to make the for loop get the values in the same order as the self.temps? 

(if I understand the it right😅)

 

any advice on how to add the temps?

 

Assume that you have 5 temps.

The createMap function adds the UI labels to the table self.temps in the order they are created

Make another function

Please login or register to see this code.

and call self:updateTemps() last in :onInit() to start the loop.

It will update the map every 30s with the current temps 

Edited March 2, 2024 by jgab

[Brors94 53]

36 minutes ago, jgab said:

 

Assume that you have 5 temps.

The createMap function adds the UI labels to the table self.temps in the order they are created

Make another function

Please login or register to see this code.

and call self:updateTemps() last in :onInit() to start the loop.

It will update the map every 30s with the current temps 

I guess it is a typo, should it be local tempDevices =.... instead of the function?

And thanks once again

But I have too say, I think this picture loading is heavy for the hc3 😅 after I saved 2 rapid times it crashed and recovered from an unexpected error 😅
 But up and going again now  
 

 

 

[Brors94 53]

 

 

This is Awsome @jgab   I have too work more with tables and the for/ipairs loops 😅 But think i start to get it  

 

 

local tempDevices = {Sov1IDRoom, Sov1IDFloor, OutdoorID}  -- Temp devices in same order as labels waa created

local temptype = {"Room", "Floor", "Outdoor"}

function QuickApp:updateTemps(ev)

   local function loop()

     for i,t in ipairs(self.temps) do

       local temp = fibaro.getValue(tempDevices[i],'value')

       local room = temptype[i]

       t.text = string.format(""..room..": "..temp.."°")          --string.format('%.1f°',temp)

     end

     self:drawMap()

     setTimeout(loop,60*1000)

   end

   setTimeout(loop,1000)

end