Adding UI elements to QuickAppChild devices?

[PeterV959 6]

I am using a Z-Box hub which appears to be based on the HCL. Everything is Fibaro with the Z-Box brand. I presume it is based on HCL because it only supports 32-bit math. My FW is 5.141.59 beta.

 

I have a fan/light device that I want to treat as two separate devices. All is well creating the child devices. The fan is a com.fibaro.binarySwitch device. I want to add six speed selector buttons, a direction toggle, a sleep timer value, and a "Wind" toggle (maybe with a max speed setting of some sort). The light is a com.fibaro.multilevelBinary device. I want to add a sleep timer value, and maybe a ramp speed for the dimmer ability. The sleep timers could be a slider value. I'm not sure which I prefer. Is there a way to add these elements to the UI screen for each child device? I have the six button layout defined on my parent app and I can see the view layout in the properties and the $json element added as an additional element to the view top level definition below the ts element. I'm wondering if "ts" means it's TypeScript that comes below the asset urls.

 

I find it rather frustrating that so much is open to view but the means to implement a change is limited (or not documented). While I only have the single fan/light combo, I hope to add three more devices someday. Especially in the living room which has a vaulted ceiling and the fan is rather high. Besides, I hate pull cords and isn't that why I implemented my Smart Home?

 

Thanks in advance. I'm really afraid of the answer I will get to this question.

 

Peter

[PeterV959 6]

Well, I figured it out. Never mind.

[Joep 156]

Please tell us what you figured out  So other people can learn from it.

[PeterV959 6]

Well, to begin with, I am something of a dinosaur when it comes to computers. We were still drawing flowcharts on cave walls when I began my computer journey. While I loved C/C++ I really struggled with Nodejs. I'm not trying to learn Lua or Nodejs as a means of making money. Rather I enjoy the thrill of learning new languages and systems. My Smart Home Automation is a learning lab for me.

 

I tried using the TQAE for a while. I could get it to work but I had a tough time with Lua in general. I wanted to create a device for my garage but it was a bigger project than I wanted to learn with. Then I bought a ceiling fan that was "Smart Home" ready and said that SmartThings would work. Perfect, I can make it work with Fibaro. I got the specs for the device control. I overthought the interface until I realized it was (almost) too simple. I built my http client and got it working pretty well. My Nodejs experience eased that transition.

 

Next I began working on the child devices. BOY, did I struggle getting that working just right. Because I want to learn, I shied away from using @jgab's excellent libraries. I like to see what's happening "under the hood." I could get the child devices to create and run just fine, but if I restarted the QA it would just create two more child devices. Finally, after a six day weekend I got everything ironed out. Next I wanted to set up more buttons for my UI. I chose a com.fibaro.binarySwitch for the fan because I couldn't make the slider control work the way I wanted it to and six buttons seemed more in line with my plan. The fan has six speeds, a direction, a "wind" mode that varies the speed to simulate wind, and a sleep timer. So I DID use the UI library from @jgab to remove the drudgery of laying out the template which had a specific format. At this point I hit a small brick wall. I could create the six buttons for the parent QA using the HC3 editor. Then I laid out the UI template in a table, ran it through the UI library, and added it to the initialProperties for the createChildDevice() method. No luck. That's when I chased down the creation of multiple child devices after a restart. It seems after that I got everything working. (It's always amazing how things work correctly once all the bugs are removed. 🤪) Now I am trying to get the event handlers working in the child classes. I hit a button and am rewarded with an "event handler method not found." My progress is slow during the week because I work four 10 hour days. But I keep plugging away at it.

 

Anyway, that's probably longer than you expected but I can't always stop once I get started. If anyone should like any clarification I'd be happy to elaborate.

 

More later.

 

Peter

[PeterV959 6]

After much scratching my head I finally figured out how to get the class methods for my child device UI to work. The following works but I couldn't find any references to this implementation. Yes, I do realize that creating my own UI layout is uncharted territory. What I did was created a method in my parent QA called QuickApp:UIHandler(event). Then I got the child device that corresponds with the ID passed in the event handler. After that I found the UI element in the UI handler from the child's uiCallbacks table, and execute that method.

 

Here's my code. It isn't very elegant and may need some more clean up, but it gives the idea. Hope this helps someone else. Now I want to change the button color if I can figure that out. 😁

 

 

Please login or register to see this code.

 

(I just realized I'm not dealing with UI handlers with values. Should be trivial to do, but I don't have an immediate need for that yet. I will post a modified method when I get that done, or I will leave it to one of the people here who are much smarter than I am.)

Edited July 8 by PeterV959

[PeterV959 6]

I have worked on adding a slider to my child QA UI. The callback I am using is onChanged. What I found is that this is not a uiHandler callback, but an onAction callback. Furthermore, unlike the uiHandler, the onAction will be redirected to the child QA directly. From there I use the action name to redirect to the onChanged method for my slider. I also passed the first argument of the ... varargs because this method only expects a single value. At present I only have the one need, but I could easily abstract it into something a bit more general purpose.

 

Please login or register to see this code.

 

I am having trouble changing the min/max values of the slider so they are reflected in the UI. They seem fixed at 0-99. I want 0-1440, which will be the maximum number of minutes for my sleep timer. Even better, but probably not possible, I would like to change the value displayed below the slider to show hours and minutes. I fear that changing the displayed value may not be possible. Consequently, I have put a label before the slider which can display my timer value or "Off".

 

The UI viewLayout table definition follows:

 

Please login or register to see this code.

 

I was trying to get the "select" UI element  to do something but it would never work right. I copied this from another post hoping that would help. That's why it's commented out.

 

That's my journey so far. Hope someone might benefit from my efforts.

 

PeterV959

[PeterV959 6]

Well, things are not as good as I hoped. I realized that I had only run this in the TQAE. When I uploaded it to my hub, I'm not seeing the same results. Back to scratching my head, I guess.