UI for Child Quick Apps, PLEASE!

[PeterV959 8]

So I have been working on integrating my ceiling fan & light into my HC3 hub. I want to treat the fan control as a device and the light control as a device. But the problem is that I need buttons and sliders for user interaction. I get that the focus is primarily on z-wave integration but it is very shortsighted to imagine that everything the user installs in his/her Smart Home will be z-wave enabled. Furthermore, it seems that Fibaro does not have much market share in the United States. Consequently we are left in the dust having to integrate our devices ourselves. The Fibaro tech support seems very non-responsive to its community of owners and simply patches bugs without sharing new and updated features. For example, I noticed there is a new thermostat UI that appeared recently. Or at least I did not see it before a certain recent FW update. I presume it was made available because Fibaro needed it to sell their own thermostat device. Truly, I love my hub. The use of a web interface is far superior to using a smart phone app, IMHO. And, if I cannot easily find a z-wave enabled device, I can create or help someone else create a device handler for this device. I use and enjoy my Alexa but home automation is far more than telling Alexa to turn on my lights. And why should I rely on an internet device for more sophisticated control strategies? Right now my z-wave continues to operate even when my ISP goes offline. My ceiling fan will rely on my WiFi operating but it does not have to go to the cloud to be controlled. Only my Nest Thermostat will lose connection to my hub when my internet goes offline. When the time (and money) comes, I will replace it with something z-wave or maybe WiFi but not cloud controlled.

 

I think the biggest takeaway from this rant is that there needs to be a means to create custom UIs for child devices. An added bonus would be a few different control objects. Things like a select box, a multi-select box, a check box (or something that looks like a pushbutton?), ways to group things (a container) or a means to draw a line between sections. Granted that images may be memory hogs so adding a bunch of icons or other small pictures would be memory intensive but small icons that could be added to a global list in the device might mitigate some of that. It seems that many of these structures are integral to the HTML world and a part of the web client. We just need a way to safely use them in the UI.

 

Also, a comprehensive list of Lua methods that we can use along with simple descriptions of their use. Fibaro relies too heavily on its community so leverage that community to learn and share their knowledge on use. Fibaro need not shy away from providing this list because they don't want to write extensive descriptions of each and every method. Reward your faithful users with better tools to take advantage of your systems and you may be rewarded with an increase in sales. You could think of it as hiring a huge team of unpaid integrators who develop creative ways to solve problems. I was impressed with one user who described his sophisticated solution to control his home energy use based on the hourly electric rates that his utility company makes available each day. We don't have that need in North America (yet) but I am aware of a niche market that could be tapped for remote locations who exist off-grid and use solar energy exclusively.

 

Thank you for your time in reading this. I feel better having expressed myself even though I figure this will be ignored or looked at as impractical. Have a great day (or night).

 

Peter

[jgab 2,051]

Yes, it's a bit frustrating trying to create custom child UI's.

If we avoid trying to create some of the unsupported elements, there is still some hoops to be jumped through to achieve the task.

Have a look at this example - does it work for you - what's missing that you would need?

Please login or register to see this attachment.

[PeterV959 8]

@jgabyou are a genius. I just installed it in my hub and it worked. When I briefly looked through your code I feel I was close to 90% there in my adventure in learning. I had the excellent UI formatter you created working nicely (well, it was already working, I just learned how to get to it). Then I thought I had all the i's dotted and the t's crossed in my code to include it in the child device. But no matter what I tinkered with, no matter how I searched, I could not seem to make the leap to get the UI tables to install into the structure on the hub. Worked fine in your TQAE, it just acted stupid on the hub (well, I'm probably the stupid one). Now I want to see what key piece I'm missing.

 

This has been a rewarding journey of discovery for me. Lots of dead ends, red herrings, and other clichés. I still stand by my post above. Yes, I know it will fall on deaf ears because the tech team at Fibaro probably suffers from being overworked and understaffed. While Microsoft has so many issues, their documentation efforts are good for navigating through their systems. But their development teams are many and they probably rely on the same documentation so why not make it available to their outside developers. Who better to expand the universe of new ideas than a host of developers doing their own thing. I wish more companies were as open as Microsoft is. I'm sure Apple is no different but I've been using Microsoft products since GW-BASIC way back in the late 70's and early 80's. It's what I grew up with, warts and all.

 

Thank you again, @jgab! You saved the day. I'll buy you an adult beverage of your choice, should we ever meet. 😁 

 

Peter

[PeterV959 8]

So it appears the real thing that made this work is using com.fibaro.genericDevice? Was it really that simple? Now I REALLY feel stupid.

 

I see there are select and multi elements but I have yet to figure out how to get them to display much less interact. I have seen you post that the multi element doesn't seem to work properly and I don't have a use for it (yet). Originally I wanted to use a select button element to set the speed, but I prefer the immediacy of having six buttons. And there is a switch element, too. Does it act as a toggle with two halves, an "on" half and an "off" half (or whatever label I choose to make them)? I certainly prefer that construct vs. having a "Turn On" button and a separate "Turn Off" button.

 

And while I'm at it, I had problems with the slider element in the emulator. It didn't seem to use the min or max properties. When I installed my QA on my hub it worked just as I expected. This was long ago in this process when I was playing around with my UI. I had bigger problems at the time so I let it slide.

 

Thank you again!

[jgab 2,051]

I choose genericDevice because it made it simple for me - it is a device type that doesn't add its own controls, like most device types do. 

You don't see them in the QA "developer" view, but it the main device panel and in the mobile app you get the "extra" controls that the
devices adds, beyond the custom UI elements you add yourselves. I haven't figured out how to kill those yet...

 

The select, multi and switch element are not supported and besides that they are difficult to work with, it is sometimes not possible to get any events from them.

 

So, besides doing your own custom ui elements for the child QAs, sometimes it can work by adding interfaces to the QA.

Ex. adding the "levelChange" interface will add the up/down and stop buttons. etc.

 

But I do share your frustration - it's 2023 and one would expect a better UI toolbox for QAs and children.

1 hour ago, PeterV959 said:

And while I'm at it, I had problems with the slider element in the emulator. It didn't seem to use the min or max properties. When I installed my QA on my hub it worked just as I expected. This was long ago in this process when I was playing around with my UI. I had bigger problems at the time so I let it slide.

 

Thank you again!

Ok, in my new emulator "fibemu" I set those properties on sliders. However, the UI doesn't auto-update yet so one have to manually reload the page.

 

 

Edited July 16, 2023 by jgab

[PeterV959 8]

I'm not experienced enough to create my own UI elements in this environment so I'll leave that to the experts. While I would take advantage of more/better elements I can make the ones available work for my simple little needs. I noticed an api post to plugins/interfaces. I'm guessing that was something that makes the child use custom UIs? I will explore this code and use it to great advantage (and credit you appropriately). I was humbled by your choice of "Child's Play" for your sample. I haven't been on the receiving end of that kind of sentiment in a LONG time.

 

Are you migrating to Visual Studio and away from ZBS? I'm gaining experience with ZBS and like it well enough. I can go either way, of course, so I don't have any preference.

 

Thank you again!

[jgab 2,051]

33 minutes ago, PeterV959 said:

Are you migrating to Visual Studio and away from ZBS? I'm gaining experience with ZBS and like it well enough. I can go either way, of course, so I don't have any preference.

Thank you again!

Yes, I'm moving to vscode - one reason is that I also code other stuff then hc3/lua...  and vscode has better workflow integrations with tools etc.

I also learned a lot doing TQAE. TQAE has a million features, and I better understand now what's important and what's not. There is no need to be 100% compatible
with the HC3, just have the 80% that allow you to develop the difficult stuff (the net.TCPSocket, net.UDPSocket and net.WebSocketClient seems to perform really well in fibemu and has helped me with some tricky integration coding the last days...). The last 20% to be fully HC3 compliant is too much work, at least for s single developer...

Also rewriting parts of it in Python was much easier (i.e. the whole web API and the previously mentioned net.* apis).

This means that I'm not going to evolve TQAE further (it's still a competent environment for ZBS), and focus on vscode from now on.

[PeterV959 8]

I got VS Code running with the fibemu emulator. When I try to run the child's_play.fqa quick app I get an error trying to access uiRegisterCallbacks in the library file (or what I called the library file, vs. the main code file or UI file). It seemed to work find in the TQAE so I'm guessing you haven't gotten around to implementing this method yet. Still, the UI displays but I get an error when I try to use the UI. I had this problem with my old code in TQAE and resolved it before I discovered the UI would not install on my hub and I grew frustrated. I think I have the workaround I used and will look for that.

Edited July 17, 2023 by PeterV959
clarification

[jgab 2,051]

'uiRegisterCallbacks' there now. I had not implemented the method.

I have not run the child's play yet in fibemu so there may be other issues, will come back on that later today.

[jgab 2,051]

Ok, tried child's play in the emulator and it seems to work. Note that the web ui doesn't autoupdate, so you need to manually refresh the page. (have a fix for that)

[bonhomme 4]

Sorry for reviving an old thread, but I saw this in the changelog for 5.170.16:

 

Quote

 

Quick Apps
    Added the possibility to set custom views for child devices.

 

 

Has anyone had a look at the new functionality?