HC3 QuickApps coding - tips and tricks

[jgab 2,647]

1 hour ago, Neo Andersson said:

@jgab yeah and here is the cherry on the cake..

 

Creating a thermostat type child device will end up in a device without any UI control...oh ...Fibaro...Neither in web UI nor in mobile app...

Tried with all available types, 

com.fibaro.hvacSystemAuto,

com.fibaro.hvacSystemHeat,

com.fibaro.hvacSystemCool

 

Please login or register to see this link.

So this is another dead end.

 

 

but you can add custom UI elements to the child device, with their new "Copy JSON view" option?

 

[Anth 11]

Deleted post - Issue I had was thought to be padding in html tag but image had a large transparent border!

 

 

Edited January 5, 2025 by Anth

[jgab 2,647]

Here is a class that helps with the select drop-down UI element.

Please login or register to see this spoiler.

 

It abstracts the list handling and makes it easier to control.

This example has 2 drop down lists, one with id 'qaSelect' and one with id 'varSelect'

The idea is that we populate the first drop down with all QuickApps in the system and when we

select a QA the second dropdown is populated with all quickAppVariables of that selected QA.

We can then select a qickVar and it will be displayed in the label below.

 

Please login or register to see this code.

 

The Selectable class looks like

Please login or register to see this code.

The class is initialized with the quickApp (self) and the id of the select UI element.
To populate the dropdown we give it a list with elements in :update(list)

For the Selectable to be able to create the dropdown list we need to define a :text and :value method.

The :text method creates the string in the dropdown, given an item in the list.

The :value method picks out the what in the list item should be the value of the dropdown.

Please login or register to see this code.

Optionally we can define a sort and filter method to sort the items in the list and eventually filter out some elements that should not be in the dropdown.

Please login or register to see this code.

When a selection is down we get a call back to :selected with the item of the list that was selected.

Please login or register to see this code.

It is not just the value key we get normally, but the item of the list we gave to :update.
The current selected item is also available in in

Please login or register to see this code.

if we need to access it outside the callback.

 

Dropdowns are still buggy. The new view don't update when we set the options and both views don't update the options if we set to an empty list. The class tries to go around the last issue by setting it to {{text="",type='option',value=""}}

 

Improvements are welcome!

Edited March 9, 2025 by jgab

[jgab 2,647]

setTimeout. Tips & Tricks

 

setTimeout

Execute a function after a specified delay.

Please login or register to see this code.

clearTimeout

Cancel a scheduled timeout before it executes.

Please login or register to see this code.

setInterval

Execute a function repeatedly at specified intervals.

Please login or register to see this code.

clearInterval

Stop a repeating interval.

Please login or register to see this code.

🔄 Advanced Timer Patterns

Debouncing

Delay execution until after a series of rapid calls has stopped.

Please login or register to see this code.

Throttling

Limit function execution to once per time period.

Please login or register to see this code.

Retry Logic

Retry operations with exponential backoff.

Please login or register to see this code.

⏱️ Timing and Measurement

Execution Timer

Measure how long operations take.

Please login or register to see this code.

Performance Monitor

Track performance metrics over time.

Please login or register to see this code.

🚀 Async Patterns

Sequential Execution

Execute async operations in sequence.

Please login or register to see this code.

Parallel Execution

Execute multiple async operations in parallel.

Please login or register to see this code.

Rate Limiting

Control the rate of operations.

Please login or register to see this code.

🔄 Scheduled Tasks

Daily Tasks

Execute tasks at specific times.

Please login or register to see this code.

Cron-like Scheduling

Please login or register to see this code.

🧪 Testing Examples

Timer Accuracy Test

Please login or register to see this code.

Memory Leak Test

Please login or register to see this code.

💡 Best Practices

Timer Management

Please login or register to see this code.

Error Handling

Please login or register to see this code.

Resource Management

Please login or register to see this code.

 

[fel-x 7]

Hello

I found so many useful tips on this topic, so first of all tanks a lot to all contributors !

 

I am writing a QA template with all my favorite functions and tips and tricks, so I can update/rewrite all my current QA's and use the same template for my future QA's. That will definitely make maintenance easier.

For instance, the template will include a function to disable the 'Use the new views in mobile application' property at startup, a version check through GitHub to display a notification when an update is available, etc...

 

Now I'm also working on a standard appearance for my QA's and this is where I'm asking for some tips.

 

 

1. Is there a recommended width in pixels for compatibility through most devices of the labels ?

 

It seems the maximum is 420, and I went for 400 by using :

<table width=400>

But maybe I shouldn't use <table>, and simply let the content be displayed and fit to the user's interface ?

 

 

2. Is there a way to adapt to the user's display mode? I'm referring to light mode and dark mode.

If I don't set any color for my font then the default color seems to be light grey, which is ok in both dark and light mode :

 

Please login or register to see this image.

/monthly_2026_03/image.png.ce030115a50fb46101ecf45550d049e6.png" />

 

But once I start to set a different color, it might become unreadable in one of the modes :

<font color='#FFFF00'> My text is here

 

 

Therefore, using white fonts (color='#FFFFFF') would render very nicely in dark mode, but would be invisible in light mode.

 

The only hack I found to force the view to be identical in both dark and light mode, is to include the content of a label in a table, with fixed background color and fixed font color :

<table bgcolor='#000000'><tr><td><font color='#FFFF00'> My text is here

 

 

 

3. Is there a way to remove the automatic space between labels, buttons, etc ?

Now I'm using tables in my labels or sliders or buttons, with fixed background color.

Anyway, there is always a space between them, which is filled by the theme color.

For exemple, 3 labels with white background and blue text will display nicely in light mode but will have a dark grey stripe/space between each of them in dark mode :

 

.    

 

 

So basically, I’m looking for a way to keep the appearance of all my QA's consistent, regardless of the user’s light/dark mode setting.

 

all ideas are welcome

 

[Brors94 115]

@fel-x
I think it isnt possible to do a check of the users Dark/light mode so we cant auto update the labels on the mode the user have. 

But you could do a quickapp variable: dark/light and read that on startup to choose if you want the colors who fits darkmode or lightmode. 

Or make a button/setup menu when you scroll far down on the QA to do setup (I like to do this) 
I dont have a button for the colors of the label. 
But have 4 quickvars to change the colors if the user want to. 

Please login or register to see this image.

/monthly_2026_03/image.png.b6f2b822c309d487db18b97be5a37702.png" />

[fel-x 7]

On 3/7/2026 at 7:41 PM, Brors94 said:

I think it isnt possible to do a check of the users Dark/light mode

@Brors94

I thought so too, but today I finally found it !!! 🤩

 

It's under/api/settings/info where you can find "skin": "dark" (or "light") and also "skinSetting": "manual" (or "auto")

So I will write a function that switches font and background colors in my QA according to "skin" value

 

[Brors94 115]

Just now, fel-x said:

@Brors94

I thought so too, but today I finally found it !!! 🤩

 

It's under/api/settings/info where you can find "skin": "dark" (or "light") and also "skinSetting": "manual" (or "auto")

So I will write a function that switches font and background colors in my QA according to "skin" value

 

Aha, I actually have seen that to😅 But it is what setting the Webview use. And not what the phones use. 
It can be used if you only have one user I guess 🤔


 

[Sankotronic 2,370]

Hi @fel-x,

 

there is also setting under api/users:

Please login or register to see this code.

 

for each user, but also for web view.

[fel-x 7]

Thanks @Sankotronic

I will look into that.

I'm testing my QA using Google Chrome -> it works 

But I can't seem to be able to fetch dark/light mode when using my iOS app. Where is the iOS app's skin setting ?

[Sankotronic 2,370]

10 hours ago, fel-x said:

But I can't seem to be able to fetch dark/light mode when using my iOS app. Where is the iOS app's skin setting ?

 

Hi @fel-x,

 

I think that Fibaro added API for Yubii app settings that are now backed up, but just can't find it here on forum.

Found it, it is here:

Not sure if it will help you with your task.

Edited March 9 by Sankotronic
found it :-)

[fel-x 7]

thanks for the tip, I did find info about getting some of the app's preferences in /api/mobile/settings/$uuid but the parameter I'm looking for is obviously not shared in the api. It must be a local setting in the app. I will try to find another way to deal with my color settings.

I wanted to dynamically adapt the colors used in the QA to make them more readable in both dark and lightmode.

It's very easy on the webUI with a browser, but not possible when using the mobile view.

 

[petrkl12 228]

On 4/1/2024 at 1:17 PM, jgab said:

So QuickApps have their own storage that is not quickAppVariables.

It's a good place to store values that should survive restarts but we don't want them visible in the quickVar list.

Please login or register to see this code.

The values survive restarts of the QA but will not be saved when the QA is downloaded (only quickVars are saved with the .fqa)

 

To make it easy to use we can wrap it up in a metatable

Please login or register to see this code.

 

 

@jgab

Do you know how to get saved information in internalStorage outside from fibaro via API. I would like to use this function for returning data from called function in QA .... Thanks

 

[Łukasz997 117]

Godzinę temu, petrkl12 napisał:

Do you know how to get saved information in internalStorage outside from fibaro via API. I would like to use this function for returning data from called function in QA .... Thanks

Do you mean the following:
1. in one qa you do: hub.call(id_remote, fun, params) - id_remote is id of other qa and fun is  function name in other qa
2. id_remote qa processes request and stores answer in it's internal storage

3. caller retrieves answer by accessing remote qa's internal storage

Pseudo-synchronic: call remote, wait for answer, continue (doing something with result)? Am I right?

 

[Łukasz997 117]

In general about mid-qa communication. In Fibaro this is asynchronous. 

If you do not need pseudo-synchronous behavior, then internal storage is not needed. A callback from the remote process back to your QA with the response is enough.

This can be done, but it is rather tedious: you are responsible for the whole communication mechanism, and it remains all asynchronous. You do not know when the answer will arrive, and your code continues running without waiting for it.

I have already tested/practiced this in DNSfD.

What cannot be done in the current Fibaro model is a pseudo-synchronous mechanism. For that, coroutines would be needed, although the communication mechanics would still have to be written. In fact, the communication would still be asynchronous internally, but it would look synchronous from the programmer’s point of view.

That's why I'm sorry about lack of coroutines... (also rawget, rawset)

[petrkl12 228]

48 minutes ago, Łukasz997 said:

Do you mean the following:
1. in one qa you do: hub.call(id_remote, fun, params) - id_remote is id of other qa and fun is  function name in other qa
2. id_remote qa processes request and stores answer in it's internal storage

3. caller retrieves answer by accessing remote qa's internal storage

Pseudo-synchronic: call remote, wait for answer, continue (doing something with result)? Am I right?

 

Yes

 

[jgab 2,647]

You can’t http get internalStorage from outside the HC3. It’s “restricted”.
In plua I deploy an helper QA that make internalStorage locally and sends the result back to plua.

 

 

 

Plua has a built in library for rpc calls, to make synchronous calls between QAs and return values,  that even though we do a busy wait it’s pretty efficient.

Please login or register to see this code.

 

Edited April 22 by jgab

[jgab 2,647]

Server:

Please login or register to see this code.

Client:

Please login or register to see this code.

Output:
 

Please login or register to see this code.

 

*IF* we had coroutines, we could make the above code not using a busy wait.
There would then be a way to allow QuickApp methods to return values, and make it backwards compatible with how it currently works...

[jgab 2,647]

15 hours ago, petrkl12 said:

 

@jgab

Do you know how to get saved information in internalStorage outside from fibaro via API. I would like to use this function for returning data from called function in QA .... Thanks

 

 

If you need a QA to return a value to an outside client, I would do something like

Please login or register to see this code.

and depending on the client, have a socket listener prepared at the url given to receive the payload.

[TN92 2]

On 8/28/2022 at 2:09 AM, tinman said:

 

 

Please login or register to see this attachment.

 

How to use it:

- instal the sniffer QA

- ensure non of your mobile devices has TUYA app opened, if so, close them

- set IP, device id and device key and save

- disable wifi ony you mobile device, open the TUYA app (TUYA can handle only ONE connection locally, that's why)

- click on "connect" button from this QuickApp (if the QuickApp is crashing, won't connect, click few times on disconect, and try again to connect)

- click / select this you wish to sniff, e.g. you wish to know what need to be send to turn light on, cick "On" in the TUYA app

- watch the console window on your HC3, you should see some messages:

 

 

 

Hey Tinman,


Thank you for your support to the community 

Im working to integrate some Tuya curtains into my HC3 and i used the sniffer, i got the id and key through the cloud api explorer but i cant seem to get any response when trying to connect. Is the sniffer still working as of now? Have you had any luck integrating Tuya curtains previously?

Tuya Curtain model is LS830-TY

When i query on the explorer i get the following
 

Please login or register to see this code.

The ones that i use in the sniffer are the Ip address (note that this is not a local ip address, im guessing its a public id), id for devID and local_key for devKEY 

Thanks in advance for any support possible

Edited May 11 by TN92