Design your QuickApp UI without the controller

The HC3 UI editor is fine for tweaks, but building a real interface there is slow. In flua, the UI is declared in the QA file itself — the --%%u: directives — and you see the result live in the viewer while you iterate.

One --%%u: line is one row of the UI. Elements can share a row with {{...},{...}}:

--%%name:LightPanel
--%%type:com.fibaro.binarySwitch

--%%u:{label="status",text="Ready"}
--%%u:{button="onBtn",text="Turn on",onReleased="handleOn"}
--%%u:{slider="dim",text="Brightness",min="0",max="100",value="50",onChanged="dim"}
--%%u:{switch="auto",text="Auto mode",value="false",onReleased="auto"}
--%%u:{select="mode",text="Mode",value="eco",onToggled="mode",
--     options={{type='option',text='Economy',value='eco'},{type='option',text='Comfort',value='comfort'}}}
--%%u:{multi="tags",text="Tags",values={"home","night"},onToggled="tags",
--     options={{type='option',text='Home',value='home'},{type='option',text='Night',value='night'}}}

function QuickApp:onInit()
  self:debug("panel ready")
end

function QuickApp:handleOn() self:updateProperty("value", true) end  -- the lamp goes on
function QuickApp:dim(event) print("dim to", event.values[1]) end
function QuickApp:auto(event) print("auto", event.values[1]) end
function QuickApp:mode(event) print("mode", event.values[1]) end
function QuickApp:tags(event) print("tags", json.encode(event.values[1])) end

Labels, buttons, sliders, switches, single and multi selects — the same elements the HC3 renders, laid out the same way. Run it with F5 ("Run Current File (UI)" from flua --tool setup) or from the terminal:

flua --ui 8090 quickapp.lua

Click things in the viewer: every interaction calls your handler, exactly like a tap on the real HC3 UI. Slider drags fire onChanged, buttons onReleased, selects onToggled — and the values follow the HC3 contract (slider values in event.values[1], a multi select's chosen list in event.values[1] too).

Update the UI from code, like on the HC3:

self:updateView("status", "text", "All good")
self:updateView("tags", "selectedItems", json.array())  -- clear the multi select

The viewer follows along live. (One HC3 subtlety worth knowing: an empty list must be json.array() so it encodes as [] and not {} — the HC3 demos do the same.)

Because the UI lives in the QA file, it is versioned with your code and uploaded with it — no separate UI editing step. Next post: the virtual clock, for testing timers and scenes in fast-forward.

Full example: flua --examples → examples/ui.lua · flua: https://github.com/jangabrielsson/flua