Widgets Demo

Code

This is a real-world example of a pages.jsonl file:

{"page":1,"comment":"---------- Page 1 ----------"}
{"obj":"btn","id":1,"x":10,"y":45,"w":220,"h":55,"toggle":true,"text":"Push Me \uf0a6"}
{"obj":"cb","id":2,"x":10,"y":100,"w":220,"h":55,"text":"A Checkbox"}
{"obj":"label","id":3,"x":10,"y":10,"w":220,"h":30,"text":"My Label","align":1,"padh":50}
{"obj":"switch","id":4,"x":70,"y":205,"w":100,"h":55}
{"obj":"led","id":5,"x":10,"y":205,"w":55,"h":55}
{"obj":"dropdown","id":6,"x":10,"y":150,"w":150,"options":"\uf007 Line 1\n\uf007 Line 2\n\uf007 Line 3"}
{"obj":"spinner","id":7,"x":165,"y":140,"w":70,"h":70}

{"page":2,"comment":"---------- Page 2 ----------"}
{"obj":"slider","id":1,"x":10,"y":170,"w":200,"h":50}
{"obj":"gauge","id":3,"x":13,"y":10,"w":100,"h":100}
{"obj":"bar","id":4,"x":10,"y":110,"w":200,"h":50}
{"obj":"lmeter","id":5,"x":127,"y":10,"w":100,"h":100}
{"obj":"label","id":10,"x":0,"y":0,"w":70,"h":50,"parentid":5,"text":"\uf00c OK"}

{"comment":"---------- Page 3 ----------"}
{"obj":"cpicker","id":1,"page":3,"x":20,"y":0,"w":200,"h":200}
{"obj":"cpicker","id":2,"page":3,"x":20,"y":210,"w":200,"h":50,"rect":true}

{"page":4,"comment":"---------- Page 4 ----------"}
{"obj":"dropdown","id":1,"x":10,"y":10,"w":220,"options":"Spring\nSummer\nAutumn\nWinter"}
{"obj":"roller","id":2,"x":40,"y":50,"w":160,"rows":3,"options":"2020\n2021\n2022\n2023\n2024"}

{"page":0,"comment":"---------- All Pages ----------"}
{"obj":"btn","id":1,"x":0,"y":270,"w":75,"h":50,"opacity":100,"text":"\uF053 Prev"}
{"obj":"btn","id":2,"x":75,"y":270,"w":90,"h":50,"opacity":100,"text":"\uF015 Home"}
{"obj":"btn","id":3,"x":165,"y":270,"w":75,"h":50,"opacity":100,"text":"Next \uF054"}

Result