The Slider Knob

I have always had a fondness for the little slider knob that Apple used in the early Mac control panel, and it certainly feels like it fits the Decker aesthetic, but we just have the scrollbar-y looking ones. So I made this today instead of actually writing.

The slider holds a "value" like any other, but because it's so chunky, it only goes from 0 to 6, because that's exactly as many as I needed for the thing I built it for, and also I think that's exactly how many steps the original inspiration had too. It's not draggable, but it is clickable. Clicking one of the ticked areas sets it to that value, while clicking the top and bottom ends of the slider will increment or decrement the value by one. There is also a "change" event that receives the new value.

Hopefully this is useful to someone. The implementation is pretty crude, and could probably be refactored and maybe even made resizable, and the "sprites" are all there in the script so you could probably make it smaller or larger or whatever.

%%WGT0{"w":[{"name":"vertSlider1","type":"contraption","size":[48,144],"pos":[454,99],"script":"on change val do\n vs.text:val+0\nend","def":"vertSlider","widgets":{"sliderVal":{},"can":{},"buttonTop":{},"buttonBottom":{},"button1":{},"button2":{},"button3":{},"button4":{},"button5":{},"button6":{},"button7":{}}}],"d":{"vertSlider":{"name":"vertSlider","size":[48,144],"margin":[0,0,0,0],"description":"Classicly inspired vertical slider widget, created for use in the tension track.","script":"sliderTop:image[\"%%IMG2ADAAEAD/AGYBBgAoAQIgBgECACUBASADAQQgAwEBACMBASACAQMgAgEDIAIBAQAiAQEgAQECIAYBAiABAQEAIQEBIAIBASAIAQEgAgEBACABASABAQIgAwECIAMBAiABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABA=\"]\nsliderT:image[\"%%IMG2ADAAEAAQAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAHwESAB0BASASAQEAHAEBIBIBAQAbARYAGQEBIBYBAQATAQQAAQEBIAEBFCABAQEAAQEEAA4BBAABAQEgAQEUIAEBAQABAQQAEwEBIBYBAQAZARYAGwEBIBIBAQAcAQEgEgEBAB0BEgAfAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAEA==\"]\nsliderF:image[\"%%IMG2ADAAEAAQAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAQ\"]\nsliderBottom:image[\"%%IMG2ADAAEAAQAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBAiADAQIgAwECIAEBAQAgAQEgAgEBIAgBASACAQEAIQEBIAEBAiAGAQIgAQEBACIBASACAQMgAgEDIAIBAQAjAQEgAwEEIAMBAQAlAQIgBgECACgBBgD/AGY=\"]\n\non get_value do sliderVal.text+0 end\non set_value v do sliderVal.text:v end\n\non view do\n can.clear[]\n can.paste[sliderTop 0,0]\n can.paste[sliderBottom 0,128]\n \n each x in range 7\n  can.paste[sliderF 0,16+(x*16)]\n end\n \n can.paste[sliderT 0,16+(get_value[]*16)]\nend\n\non change val do\n sliderVal.text:val\n card.event[\"change\" val]\n view[]\nend","template":"on change val do\n \nend","image":"%%IMG2ADAAkAACIAIABiACAAYgAQAEIAEAFSABABkgBwABIA8ADCACAAYgAQAaIAIACyACAAYgAQAZIAEAAiABAAogAgAGIAEAGCABAAcgAwABIAMAASADAAUgAwAUIAEABCABAAIgAQABIAIAASAEAAEgAgAEIAQABiABAAwgAgAHIAIABiACAAkBBgANIAMAByACAAYgAgAHAQIABCACAQIABCABAAUgAQABIAIAFwEBAAMBBCABAAIBAQABIAEAGyABAAUBASACAQMgAgEDAAIBASAEAAQgAQATIAEABQEBAAEBAiABAAUBAgABAQEgAQABIAEABiABABIgAQAEAQEAASABAQEAASABAAYBAQABIAEBAQAJIAEAASACABMBASABAQIgAgABAQIAAwECAAEBAQAKIAEABCABAAsgAQAEAQEgAQEBIAEAASABAQQAAwEBIAEBAQALIAEADyABAAQBAQABAQEAAwEEAAMBAQABAQEADCABAAIgAQAQAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAVAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAVAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAVAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAVAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAVAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAVAQEAAQEBAAMBBAADAQEAAQEBAA0gAgARAQEAAQEBAAMBBAADAQEAAQEBACABAQABAQEAAwEEAAMBAQABAQEACiABAAkgAQACIAEABSABAAEgAQEBAAEBAQADAQQAAwEBAAEBASABAAEgAQAFIAEAAiABAAggAQACIAEAASACAAQgAQEBAAEBAQADAQQAAwEBAAEBASABAAQgAgABIAEAASADAAcgAQAEIAIABQEBAAEBAQADAQQAAwEBAAEBAQAFIAIAAyADABMBAQABAQEAAwEEAAMBAQABAQEAAiABAAkgAQACIAEABSABAAEBBAAFAQEAAQEBAAMBBAADAQEAAQEBAAIgAQACAQQABiABAAQgAQACAQQABQEBAAEBAQADAQQAAwEBAAEBAQAFAQQAFwEBAAEBAQADAQQAAwEBAAEBAQAXIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAogAQABIAEACAEBAAEBAQADAQQAAwEBAAEBASABAAcgAQABIAEACSABAAIgAQAIAQEAAQEBAAMBBAADAQEAAQEBIAEAByABAAEgAQAMIAEACAEBAAEBAQADAQQAAwEBAAEBAQAIIAEAASABAAkgAgABIAEABSABAAIBAQABAQEAAwEEAAMBAQABAQEAAiABAAUgAQABIAEACSACAAEgAQAFIAEAAgEBAAEBAQADAQQAAwEBAAEBAQACIAEABSABAAEgAQAIIAEAAiABAAQgAQAEAQEAAQEBAAMBBAADAQEAAQEBAAUgAQAJIAIAAiABAAIgAQAEIAEABAEBIAEBASABAAEgAQEEAAMBASABAQEABSADAAggAQACIAEAAiABAAQgAQAEAQEgAQECIAIAAQECAAMBAgABAQEABSADAAkgAQABIAEAAiABAAIgAQABIAEABAEBAAEgAQEBAAEgAQAGAQEAASABAQEgAQAEIAEACCACAAEgAwACIAEAASAEAAUBAQABAQIgAQAFAQIAAQEBIAEAASABAAMgAQACIAIABCABAAQgAQACIAEABCABAAUBASACAQMgAgEDAAIBASACAAQgAQAIIAIAEgEBAAMBBCABAAIBAQABIAIAIgECAAQgAgECABsgAQAMAQYADCACAA4gAQANIAEABCABAAwgAQAIIAIAEyABAAIgAQABIAMACCABAAEgAgAHIAIABSABAA0gAQACIAEAAiACAAkgAQAGIAEAASABAAcgAQANIAEAASADAAEgAwAIIAEAAiABAAQgAQAIIAMABiAGAAEgAQABIAMAASABAAkgAgAZIAEABCABAAEgAgACIAEAASABACAgBQACIAcAASACAA8=","attributes":{"name":["value"],"label":["Value"],"type":["string"]},"widgets":{"sliderVal":{"type":"field","size":[21,20],"pos":[57,1],"show":"none","border":1,"value":"0"},"can":{"type":"canvas","size":[48,144],"pos":[0,0],"locked":1,"border":0,"image":"%%IMG2ADAAkAD/AGYBBgAoAQIgBgECACUBASADAQQgAwEBACMBASACAQMgAgEDIAIBAQAiAQEgAQECIAYBAiABAQEAIQEBIAIBASAIAQEgAgEBACABASABAQIgAwECIAMBAiABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAfARIAHQEBIBIBAQAcAQEgEgEBABsBFgAZAQEgFgEBABMBBAABAQEgAQEUIAEBAQABAQQADgEEAAEBASABARQgAQEBAAEBBAATAQEgFgEBABkBFgAbAQEgEgEBABwBASASAQEAHQESAB8BASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBABcBBAAFAQEgAQEBIAMBBCADAQEgAQEBAAUBBAAOAQQABQEBIAEBASADAQQgAwEBIAEBAQAFAQQAFwEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBASADAQQgAwEBIAEBAQAgAQEgAQEBIAMBBCADAQEgAQEBACABASABAQEgAwEEIAMBASABAQEAIAEBIAEBAiADAQIgAwECIAEBAQAgAQEgAgEBIAgBASACAQEAIQEBIAEBAiAGAQIgAQEBACIBASACAQMgAgEDIAIBAQAjAQEgAwEEIAMBAQAlAQIgBgECACgBBgD/AGY=","scale":1},"buttonTop":{"type":"button","size":[48,16],"pos":[0,0],"script":"on click do\n v:sliderVal.text+0\n if v\n  sliderVal.text:v-1\n end\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"buttonBottom":{"type":"button","size":[48,16],"pos":[0,128],"script":"on click do\n v:sliderVal.text+0\n if v<6\n  sliderVal.text:v+1\n end\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"button1":{"type":"button","size":[48,16],"pos":[0,16],"script":"on click do\n sliderVal.text:0\n card.event[\"change\" get_value[]] \n view[]\nend","style":"invisible"},"button2":{"type":"button","size":[48,16],"pos":[0,32],"script":"on click do\n sliderVal.text:1\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"button3":{"type":"button","size":[48,16],"pos":[0,48],"script":"on click do\n sliderVal.text:2\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"button4":{"type":"button","size":[48,16],"pos":[0,64],"script":"on click do\n sliderVal.text:3\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"button5":{"type":"button","size":[48,16],"pos":[0,80],"script":"on click do\n sliderVal.text:4\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"button6":{"type":"button","size":[48,16],"pos":[0,96],"script":"on click do\n sliderVal.text:5\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"},"button7":{"type":"button","size":[48,16],"pos":[0,112],"script":"on click do\n sliderVal.text:6\n card.event[\"change\" get_value[]]\n view[]\nend","style":"invisible"}}}}}

A tabstrip contraption

I have a card that calculates some data, and displays it in various ways. Rather than have multiple cards that do the same calculation, I figured I’d have all of the views on the same card, and add a tabstrip to switch which ones were visible.

Attributes:

• x.labels String. The text of the labels in the tabstrip, separated by \n. r/w.
• x.current String. The text of the currently selected label. r/w.

Events:

• on change label active Called when a tab is activated or deactivated. label (string) is the label of the tab that changed, active (bool) is true if the tab became active, or false if the tab became inactive.

The thing I’m proud of is the event model. Previously, I had separate Decker buttons for each tab, so when I added a new widget to a “tab” I had to add newwidget.show:"solid" on one button and newwidget.show:"none" on all the others, and I kept forgetting which buttons I’d updated, copy/pasting the line and forgetting to change "show" to "none" or vice-versa, it was a pain.

The new tabstrip contraption sends an event for the old tab deactivating, and an event for the new tab activating, so I can have one single event handler like this:

on change label active do
    if label = "Words"
        field1.show:if active "solid" else "none" end
    elseif label = "Picture"
        canvas1.show:if active "solid" else "none" end
    end
end

…and when I add a new widget, I can add just one line to one event handler, and be sure it will never be out of sync with anything else.

One awkward thing is that you wind up with different widgets overlapping, so you can’t easily click on one to select it. As a work around, you can use Widgets → Order… to bring up a list of widgets on the screen, select the widget you want to work with, and click the “Properties” button (if that’s what you want to do) or just click OK and drag the resize handles around.

%%WGT0{"w":[{"name":"tabstrip","type":"contraption","size":[192,16],"pos":[128,64],"script":"on change label active do\n    if label = \"Words\"\n        field1.show:if active \"solid\" else \"none\" end\n    elseif label = \"Picture\"\n        canvas1.show:if active \"solid\" else \"none\" end\n    end\nend","def":"tabstrip","widgets":{"canvas":{"size":[192,16],"font":"menu","pattern":47},"current":{"pos":[0,32],"value":"Words"},"labels":{"pos":[0,64],"value":"Words\nPicture"}}},{"name":"field1","type":"field","size":[192,80],"pos":[128,80],"scrollbar":1,"value":"Here are some words in a regular field!"},{"name":"canvas1","type":"canvas","size":[192,80],"pos":[128,80],"show":"none","image":"%%IMG2AMAAUAD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AAoBAwDAAQYAwAEGAMABBADAAQQAKgEBAJUBBAAmAQEAmQEEAAUBCgATAQEAnQEFAAoBBQANAQEAnwEGAA0BBAAJAQEAnQECAAYBBAANAQMABQEBAJ0BAQAMAQMADQEFAJ0BAQAQAQIArAEBABMBAwCoAQEAFwECAKUBAQAaAQIAogEBAB0BAQChAQEAHgECAJ4BAQAhAQEAnQEBACIBAQCbAQEAIwEBAJsBAQAkAQEAmQEBACUBAQCZAQEAJgEBAJkBAQAlAQEAmQEBACYBAQCZAQEAJQEBAJkBAQAlAQEAmgEBACQBAQCbAQEAJAEBAJsBAQAjAQEAmwEBACMBAQCcAQEAIQEBAJ4BAQAgAQEAnwEBAB8BAQCgAQIAHAEBAKMBAgAaAQEApQEBABkBAQCmAQIAFgEBAKkBAQAVAQEAqgECABIBAQCtAQIADwEBALABAgALAQIAswEEAAQBAwC5AQQA/wD/AJ0=","scale":1}],"d":{"tabstrip":{"name":"tabstrip","size":[192,32],"resizable":1,"margin":[0,0,0,0],"description":"A strip of mutually-exclusive options that can be clicked.","script":"on get_labels do\n   labels.text\nend\n\non set_labels x do\n   labels.text:x\n   new_labels:\"\\n\" split x\n   if !(current.text in new_labels)\n       set_current[first new_labels]\n   end\nend\n\non get_current do\n   current.text\nend\n\non set_current x do\n   valid_labels:\"\\n\" split labels.text\n   if !(x in valid_labels)\n       x:first valid_labels\n   end\n   card.event[\"change\" current.text 0]\n   current.text:x\n   card.event[\"change\" current.text 1]\n   view[]\nend\n\non view do\n    canvas.pattern:colors.white\n    canvas.rect[(0,0) canvas.lsize]\n    valid_labels:\"\\n\" split labels.text\n    width:canvas.lsize[0] / count valid_labels\n    height:canvas.lsize[1]\n    \n    canvas.font:\"menu\"\n\n    each val key in valid_labels\n        left:key * width\n        canvas.pattern:colors.black\n        if val = current.text\n            canvas.rect[(left,0) width,height]\n            canvas.pattern:colors.white\n        end\n        canvas.text[\n            val\n            (left,0) + (width,height)/2\n            \"center\"\n        ]\n   end\nend","template":"on change label active do\n \nend","attributes":{"name":["labels","current"],"label":["Labels (one per line)","Current Label"],"type":["code","string"]},"widgets":{"canvas":{"type":"canvas","size":[192,32],"pos":[0,0],"volatile":1,"script":"on activate pos do\n    valid_labels:\"\\n\" split labels.text\n    index:floor (pos[0]/canvas.lsize[0])*(count valid_labels)\n    set_current[valid_labels[index]]\nend\n\non click pos do\n    activate[pos]\nend\n\non drag pos do\n    activate[pos]\nend\n\non release pos do\n    activate[pos]\nend","border":0,"scale":1},"current":{"type":"field","size":[96,16],"pos":[0,48],"style":"plain"},"labels":{"type":"field","size":[96,80],"pos":[0,80],"style":"plain"}}}}}