Hello, I am trying to learn Lil as the scripting language to properly use Decker. I have been combing thru the documentation to try to figure out how to do something extremely specific.
If I wanted to click on the right arrow button in order to move clockwise on the next part of the menu wheel, how would I do this with Lil?
I built something similar to your screenshot:
It's made out of four canvases (mA, mB, mC, and mD), a hidden field to keep track of the highlighted object index (idx), and two buttons for cycling between items:
The buttons increment or decrement the number in idx modulo 4 and then call the view[] function in the card script to update the canvases. Incrementing:
on click do idx.data:4%idx.data+1 view[] end
Decrementing:
on click do idx.data:4%idx.data-1 view[] end
My view[] function reaches into every canvas and remaps the color in their image to opaque white or yellow in order to "highlight" the item:
on view do each w i in mA,mB,mC,mD rep:if i~idx.data colors.white dict colors.yellow else colors.yellow dict colors.white end w.paste[w.copy[].map[rep]] end end
There are many different approaches possible here, depending on exactly how you want it to look; you might instead show or hide widgets or toggle the .border property of fields.
Here's the above example as a card you can copy and paste into Decker (starting at the "%%" and ending at the final "}"):
%%CRD0{"c":{"name":"home","script":"on view do\n each w i in mA,mB,mC,mD\n rep:if i~idx.data\n colors.white dict colors.yellow\n else\n colors.yellow dict colors.white\n end\n w.paste[w.copy[].map[rep]]\n end\nend","image":"%%IMG2AgABVgD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8AUwEJAP8A9wENAP8A9AESAP8A8AESAP8A9wEKAP8A+gEHAP8A/AEEAP8A9gELAP8A8wENAP8A8QEPADABCQD/ALYBEgAvAQwA/wCzAQsAAwEFAC8BDQD/ALABCgAFAQUAMQEOAP8ArQEIAAcBBQA6AQcA/wCrAQYACQEFAD0BBwD/AKgBBgAKAQQAPwEIAP8ApQEGAAsBBABBAQcA/wCjAQYADAEEAEIBBwD/AKIBBQAOAQIARQEHAP8AnwEFAFgBBwD/AJwBBQBaAQcA/wCbAQQAXAEHAP8AmQEFAF4BBgD/AJcBBQBhAQUA/wCVAQUAYwEFAP8AlAEEAGUBBAD/AJMBBQBlAQUA/wCSAQQAZwEEAP8AkQEFAGcBBQD/AI8BBQBpAQQABgEEAP8AhAEFAGoBBQAEAQYA/wCDAQQAbAEEAAQBBgD/AIIBBQBsAQUAAgEGAP8AgwEEAG4BBAABAQUA/wCEAQUAZQEHAAIBCQD/AIUBBABlAQkAAQEIAP8AhgEEAGUBEQD/AIcBBABmAQ8A/wCIAQQAbAEJAP8AiAEEAGwBCAD/AIkBBABtAQYA/wCKAQQAbgEFAP8AigEEAG8BBAD/AIoBBABwAQIA/wCMAQIA/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8AVgEHAP8A+QENAP8A8wETAP8A7gEUAGUBAgD/AIQBBwADAQwAZAEEAP8AggEIAAgBBgBlAQQA/wCBAQkAcwEEAP8AgAEKAHMBBAD/AIABBQABAQUAcgEEAP8AgQEDAAMBBAByAQQA/wCHAQQAcgEEAP8AhwEEAHEBBQD/AIcBBABxAQQA/wCIAQQAcAEFAP8AiAEEAHABBAD/AIkBBQBvAQQA/wCKAQQAbgEFAP8AigEEAG4BBAD/AIsBBABsAQYA/wCLAQUATgEDABkBBgD/AI0BBQBMAQUAFwEGAP8AjwEFAEsBBQAWAQYA/wCQAQYASQEFABYBBQD/AJMBBgBIAQQAFgEFAP8AlQEGAEYBBQAUAQYA/wCYAQUARAEFABQBBgD/AJoBBgBBAQYAEwEGAP8AnAEHAD4BBgASAQcA/wCeAQsAOAEGAAwBDAD/AKEBFgAsAR0A/wCkARUAKgEdAP8ApwETACoBGwD/AK4BDQArARQA/wDtAQcA/wD7AQcA/wD9AQYA/wD8AQYA/wD8AQYA/wD8AQYA/wD8AQYA/wD8AQUA/wD9AQMA/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8AFA==","widgets":{"idx":{"type":"field","size":[16,15],"pos":[190,147],"locked":1,"show":"none","align":"center","value":"0"},"button1":{"type":"button","size":[60,20],"pos":[251,250],"script":"on click do\n idx.data:4%idx.data+1\n view[]\nend","text":"->"},"button2":{"type":"button","size":[60,20],"pos":[95,250],"script":"on click do\n idx.data:4%idx.data-1\n view[]\nend","text":"<-"},"mA":{"type":"canvas","size":[36,34],"pos":[180,85],"locked":1,"border":0,"image":"%%IMG2ACQAIgANAQoAFwEQABMBEgARAQUhCgEFAA4BBSEOAQUACwEEIRIBBAAJAQQhBwEBIQwBBAAHAQQhBwEDIQwBBAAGAQMhBwEEIQ0BAwAFAQMhCAEFIQ0BAwAEAQMhBwEDIQEBAyEMAQMAAwEDIQcBBCEBAQMhDQEDAAIBAyEHAQMhAwEDIQwBAwACAQMhBwEDIQQBAyELAQMAAQEDIQgBAyEFAQMhCwEGIQcBAyEGAQMhCwEGIQcBDSEKAQYhBwENIQoBBiEHAQohAQEDIQkBBiEHAQMhCAEDIQkBAwABAQMhBgEDIQgBBCEHAQMAAgEDIQYBAyEJAQMhBwEDAAIBAyEGAQMhCQEDIQcBAwADAQMhBgEBIQsBASEHAQMABAEDIRoBAwAFAQMhGAEDAAYBBCEWAQQABwEEIRQBBAAJAQQhEgEEAAsBBSEOAQUADgEFIQoBBQARARIAEwEQABcBCgAN","scale":1},"mB":{"type":"canvas","size":[36,34],"pos":[248,139],"locked":1,"border":0,"image":"%%IMG2ACQAIgANAQoAFwEQABMBEgARAQUgCgEFAA4BBSAOAQUACwEEIBIBBAAJAQQgFAEEAAcBBCAWAQQABgEDIBgBAwAFAQMgCAEIIAoBAwAEAQMgBwEKIAkBAwADAQMgCAEKIAoBAwACAQMgCAEDIAQBAyAKAQMAAgEDIAgBAyAEAQMgCgEDAAEBAyAJAQMgAwEEIAsBBiAKAQMgAQEEIAwBBiAKAQwgCAEGIAoBDSAHAQYgCgEOIAYBBiAKAQMgCAEDIAYBAwABAQMgCQEDIAgBAyAFAQMAAgEDIAkBAyAHAQQgBQEDAAIBAyAJAQMgBgEEIAYBAwADAQMgCAEDIAUBBCAGAQMABAEDIAkBASACAQcgBwEDAAUBAyAJAQggBwEDAAYBBCAHAQggBwEEAAcBBCAHAQIgCwEEAAkBBCASAQQACwEFIA4BBQAOAQUgCgEFABEBEgATARAAFwEKAA0=","scale":1},"mC":{"type":"canvas","size":[36,34],"pos":[180,191],"locked":1,"border":0,"image":"%%IMG2ACQAIgANAQoAFwEQABMBEgARAQUgCgEFAA4BBSAOAQUACwEEIBIBBAAJAQQgFAEEAAcBBCAWAQQABgEDIBgBAwAFAQMgGgEDAAQBAyAaAQMAAwEDIAwBBSALAQMAAgEDIAsBByAKAQMAAgEDIAoBByALAQMAAQEDIAoBBCAQAQYgCgEDIBEBBiAJAQQgEQEGIAkBAyASAQYgCQEDIBIBBiAJAQMgEgEDAAEBAyAIAQMgEQEDAAIBAyAIAQMgCgEBIAYBAwACAQMgCAEDIAkBAyAFAQMAAwEDIAcBAyAGAQYgBAEDAAQBAyAHAQ4gBQEDAAUBAyAHAQsgBgEDAAYBBCAIAQcgBwEEAAcBBCAUAQQACQEEIBIBBAALAQUgDgEFAA4BBSAKAQUAEQESABMBEAAXAQoADQ==","scale":1},"mD":{"type":"canvas","size":[36,34],"pos":[116,139],"locked":1,"border":0,"image":"%%IMG2ACQAIgANAQoAFwEQABMBEgARAQUgCgEFAA4BBSAOAQUACwEEIBIBBAAJAQQgFAEEAAcBBCAWAQQABgEDIBgBAwAFAQMgCAEHIAsBAwAEAQMgBwEKIAkBAwADAQMgCAEMIAgBAwACAQMgCAEDIAUBBSAHAQMAAgEDIAgBAyAHAQQgBgEDAAEBAyAJAQMgCAEDIAcBBiAJAQMgCAEDIAcBBiAJAQMgCQEDIAYBBiAJAQMgCQEDIAYBBiAJAQMgCQEDIAYBBiAJAQMgCQEDIAYBAwABAQMgCAEDIAkBAyAFAQMAAgEDIAgBAyAIAQQgBQEDAAIBAyAIAQMgBwEEIAYBAwADAQMgBwEDIAUBBSAGAQMABAEDIAcBAyADAQYgBwEDAAUBAyAGAQogCAEDAAYBBCADAQsgCAEEAAcBBCABAQogCQEEAAkBBAABAQUgDAEEAAsBBSAOAQUADgEFIAoBBQARARIAEwEQABcBCgAN","scale":1}}},"d":{}}
There's also some discussion of a similar type of UI in this thread.
Does any of that help? Need clarification on anything?