Jump to content

Welcome to Smart Home Forum by FIBARO

Dear Guest,

 

as you can notice parts of Smart Home Forum by FIBARO is not available for you. You have to register in order to view all content and post in our community. Don't worry! Registration is a simple free process that requires minimal information for you to sign up. Become a part of of Smart Home Forum by FIBARO by creating an account.

 

As a member you can:

  •     Start new topics and reply to others
  •     Follow topics and users to get email updates
  •     Get your own profile page and make new friends
  •     Send personal messages
  •     ... and learn a lot about our system!

 

Regards,

Smart Home Forum by FIBARO Team


HC3 QuickApps coding - tips and tricks


jgab

Recommended Posts

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" />

image.png.c0e6f3321fde39c5fd9c6be6ee61c8f4.pngI will try to suppress grey areas to save space in QA Yubbi view.
Edited by Christb
  • Like 2
Link to comment
Share on other sites

  • Topic Author
  • 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 by jgab
    • Like 3
    Link to comment
    Share on other sites

     

    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:

    image.png.ca679f0611a3553bdb6b8aaece405d4e.png

     

    Do you know why? 😅

     

     

     

     

     

    Link to comment
    Share on other sites

  • Topic Author
  • WHat happens if you change line 74 to

    Please login or register to see this code.

    e.g. 54 instead of 100 ?

    • Thanks 1
    Link to comment
    Share on other sites

    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" />image.png.88a81ec33a21918ed84cf3035c11919c.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 by Christb
    Link to comment
    Share on other sites

  • Topic Author
  • 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.

     

    • Like 1
    Link to comment
    Share on other sites

  • Topic Author
  • Posted (edited)

    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 by jgab
    • Like 2
    Link to comment
    Share on other sites

  • Topic Author
  • 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.

    Link to comment
    Share on other sites

    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 :D   

    Link to comment
    Share on other sites

    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" />image.png.2606f67ef7f2ae7823f6c82d7865a247.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?

     

    Link to comment
    Share on other sites

  • Topic Author
  • Posted (edited)
    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 by jgab
    Link to comment
    Share on other sites

  • Topic Author
  • 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.

    Link to comment
    Share on other sites

  • Topic Author
  • Posted (edited)

    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 by jgab
    • Like 2
    Link to comment
    Share on other sites

    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 by Christb
    Link to comment
    Share on other sites

    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 by Christb
    Link to comment
    Share on other sites

  • Topic Author
  • 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.

    Link to comment
    Share on other sites

    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? :)

     

     

     

     

     

     

    Link to comment
    Share on other sites

  • Topic Author
  • Posted (edited)
    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 by jgab
    • Thanks 1
    Link to comment
    Share on other sites

    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 :D

    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 :) 
     

     

     

    • Thanks 1
    Link to comment
    Share on other sites

     

     

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

     

    image.png.0b9991b5111b9cb947b4c133b8711745.png

     

    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

     

     

     

     

     

     

     

     

     

     

     

    Link to comment
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    ×
    ×
    • Create New...