by request,

The Chat Contraption:

The chat contraption provides a scrolling view of static text clustered into "speech bubbles" as in the text messaging UIs of most phones which can be advanced or retracted one bubble at a time.

The .value attribute contains rich text describing the chat log. Messages should be separated by a blank line (i.e. two newlines; \n\n). If a message is "!left" or "!right", it will switch which side of the conversation ensuing messages appear on instead of being displayed. Remember, you can use any other rich text formatting you like, including fonts and inline images!

The contraption exposes read-only .hasnext and .hasprev attributes indicating whether there are previous messages or next messages to show, respectively. It also exposes functions .next[] and .prev[] for stepping through message history. Any time you change the contraption's .value attribute the history will be reset to show only the first message.

The contraption respects the standard .show and .font attributes to control the transparency mode and default font of the chat log.

This contraption is provided below along with an enclosing card and prev/next buttons for paging through messages, to demonstrate how to use .hasprev/.hasnext/.prev[]/.next[]; these buttons are not part of the contraption itself and therefore can be freely customized or replaced to suit the needs of a particular application:

%%CRD0{"c":{"name":"card1","script":"on view do\n prev.locked:!chat1.hasprev\n next.locked:!chat1.hasnext\nend","widgets":{"chat1":{"type":"contraption","size":[196,155],"pos":[176,77],"font":"menu","show":"transparent","def":"chat","widgets":{"f":{"size":[196,155],"show":"transparent","value":{"text":["i"],"font":[""],"arg":["%%IMG2ALAAHAAFAWkARQFtAEIBbwBAAXEAPwFxAD4BcwA9AQUgAgFsAD0BBSACAWwAPQEFIAUBAyAEAQIgAgECIAIBWgA9AQUgAgECIAIBASACAQIgAgEBIAIBAiACAVoAPQEFIAIBAiACAQEgAgECIAIBASACAQIgAgFaAD0BBSACAQIgAgEBIAYBASACAQIgAgFaAD0BBSACAQIgAgEBIAIBBSACAQIgAgFaAD0BBSACAQIgAgEBIAIBAyABAQEgAgECIAIBWgA9AQUgAgECIAIBAiAEAQMgBQFaAD0BFyACAVoAPQETIAEBAyACAVoAPQEUIAQBWwA9AXIAPgFyAD4BcQA/AXAAQAFuAP8A/wD/ALU="]}},"msg":{"size":[100,31],"pos":[225,11],"value":{"text":["hey\n\ncan you read these?\n\n!right\n\nyeah\n\nwhat's up\n\n...\n\ncome on, man, don't keep me hanging here forever\n\n!left\n\nsorry\n\nlooks like the chat contraption works\n\n!right\n\n","sweet!","\n\n!left\n\nkeep in mind that there's kind of a soft limit to how many messages we can display\n\n!right\n\ngot it\n\nsince the messages are updated in response to an attribute change we have to stay in quota\n\n!left\n\nexactly\n\nbut as you can see the limit is reasonably high for practical use\n\n!right\n\nyeah this isn't too bad\n\nwe could also try to use longer sentences, since the cost is per speech bubble rather than per character\n\n!left\n\ntruth\n\nanyway, hopefully this contraption is handy!"],"font":["","menu",""],"arg":["","",""]}},"idx":{"size":[100,31],"pos":[225,53]},"tmp":{"pos":[225,91],"font":"menu"},"cnt":{"size":[100,31],"pos":[225,110],"value":"18"}}},"next":{"type":"button","size":[60,20],"pos":[280,260],"script":"on click do\n chat1.next[]\n view[]\nend","text":"Next"},"prev":{"type":"button","size":[60,20],"pos":[202,260],"locked":1,"script":"on click do\n chat1.prev[]\n view[]\nend","text":"Prev"}}},"d":{"chat":{"name":"chat","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"a semi-interactive scrollable chat log.","script":"on get_value   do msg.value end\non set_value x do msg.value:x idx.text:0 view[] end\n\non view do\n f.show:card.show\n tmp.font:card.font\n tw:(first f.size)-20\n mw:floor .6*tw\n d :0\n r :rtext.cat[]\n margin:4 take 5\n lborder:image[\"%%IMG0AAwADAYAH4A/wH/gf+D/8P/w/+D/4P/A/4D+AA==\"]\n rborder:image[\"%%IMG2AAwADAAFAQIACAECIAIBAgAFAQEgBgEBAAMBASAIAQEAAgEBIAgBAQABAQEgCgECIAoBAQABAQEgCQEBAAEBASAJAQEAAgEBIAgBAQADAQIgBgEBAAUBBw==\"]\n   \n each chunk in rtext.split[\"\\n\\n\" msg.value]\n  str:rtext.string[chunk]\n  if     \"!left\" ~str d:0\n  elseif \"!right\"~str d:1\n  else\n   mh:last tmp.textsize[chunk mw]\n   sz:mw,mh\n   tmp.size:tw,mh+15\n   tmp.clear[]\n   if d # right-half\n    tmp.segment[rborder ((tw-mw+10),0),(10+sz) margin]\n    tmp.pattern:1\n    tmp.text[chunk ((tw-mw+5),5),sz \"top_right\"]\n   else # left-half\n    tmp.segment[lborder (0,0,10+sz) margin]\n    tmp.pattern:32\n    tmp.text[chunk (5,5,sz) \"top_left\"]\n   end\n   r:r,rtext.cat[tmp.copy[]]\n  end\n end\n tmp.size:1,1\n cnt.text:count r\n i:1+0|idx.text\n r:i limit r\n f.value:r\nend\n\non get_animate do view end\non get_hasprev do (0+idx.text)>0          end\non get_hasnext do (0+cnt.text)>1+idx.text end\non get_prev do\n on prev do\n  if get_hasprev[] idx.text:idx.text-1 view[] f.scroll:9999999 end\n end\nend\non get_next do\n on next do\n  if get_hasnext[] idx.text:idx.text+1 view[] f.scroll:9999999 end\n end\nend\n","attributes":{"name":["value"],"label":["Value"],"type":["rich"]},"widgets":{"f":{"type":"field","size":[100,100],"pos":[0,0],"locked":1,"scrollbar":1},"msg":{"type":"field","size":[100,20],"pos":[129,7],"locked":1,"show":"none"},"idx":{"type":"field","size":[100,20],"pos":[129,34],"locked":1,"show":"none","value":"0"},"tmp":{"type":"canvas","size":[1,1],"pos":[129,59],"locked":1,"image":"%%IMG0AAEAAQA=","pattern":32,"scale":1},"cnt":{"type":"field","size":[100,20],"pos":[129,71],"locked":1,"show":"none","value":"1"}}}}}

itemlist contraption

This contraption lets you store a list of items. Basically it wraps a two-column grid, but the second column is hidden and replaced with a big text area.

The buttons at the top do the following:

• ! -> "run", passes the current text to a configurable event handler on the card (run_event attribute contains the event name to trigger). Using shift-enter with the editor focused will also trigger this event, either on the entire item text or the selection. 
• up/dn -> moves the current item up or down in the list of items
• </> -> lets you navigate between the items in order. (you can click the names in the list to do this, but you can also hide the names by setting the list_width attribute to 0) 
• - -> deletes the current item (shows a confirmation box first)
• + -> adds a new item

There are also two helper functions you can use to get access to the underlying data:

• .ls[] -> returns the entire items.value table
• .current[] -> returns the current row from the table.

<couldn't get the widget to paste correctly. see comment below for link to a .deck>

Feel like your life just isn't sliding into place? Experience catharsis with

ThatPuzzle Contraption

The ThatPuzzle contraption is a classic sliding tile puzzle often called a "15-puzzle", in contraption form. Configure its dimensions from 2x2 to 10x10 tiles, and it will automatically display an image sliced up from the card background it's placed over. There are even event hooks and attributes for recognizing a successful solution!

• thatpuzzle.dim : r/w integer from 2 to 10; the number of tiles per axis.
• thatpuzzle.solved: read-only bool; is the puzzle currently solved?
• thatpuzzle.reset[] : reset the tiles to a solved configuration.
• thatpuzzle.scramble[] : randomize the tiles. for large puzzles you may need to repeat this a few times for a thorough mixing.
• on change do .. end : fired whenever a user moves a tile.

%%WGT0{"w":[{"name":"thatpuzzle1","type":"contraption","size":[100,100],"pos":[199,126],"script":"on change do\n won.value:me.solved\nend","def":"thatpuzzle","widgets":{"c":{},"s":{"value":"[]"},"dim":{"value":"3"}}}],"d":{"thatpuzzle":{"name":"thatpuzzle","size":[100,100],"resizable":1,"margin":[5,5,5,5],"description":"the classic sliding-tile puzzle. you know, that one.","script":"BG:image[\"%%IMG2AAYABgEIDQMBAiABAQENAgECIAIBBCACAQEMAQEH\"]\nFG:image[\"%%IMG2AAkACQEGAAMBASAEAQIAAgEBIAQBASABAQEAAQEBIAQBASACAQIgBAEBIAIBByACAQEAAQEBDQQBASABAQEAAgEBDQQBAgADAQY=\"]\nBG_M:4,4,1,1\nFG_M:4,4,4,4\nDELTAS:\"%j\" parse \"[[-1,0],[0,-1],[1,0],[0,1]]\"\nSTEPS:30\n\non get_dim do 0+dim.text end\non set_dim x do dim.text:10&2|x end\n\non swap a x y do t:a[x] a[x]:a[y] a[y]:t a end\non initstate do d:get_dim[] (d^2)%1+range d^2 end\non setstate x do s.text:\"%j\" format list x end\non getstate do\n d:get_dim[]\n r:\"%j\" parse s.text\n if (d^2)~count r r else initstate[] end\nend\n\non view do\n d:get_dim[]\n b:getstate[]\n cell:c.size/d\n c.segment[BG 0,0,c.size BG_M]\n o:d cross d\n tiles:select orderby p asc where v from select v:b p:o from ()\n each row in rows tiles\n  c.segment[FG (row.p*cell),(cell+2 drop FG_M) FG_M]\n  bg:deck.card.image.copy[card.pos+o[row.v-1]*cell (cell,cell)-1]\n  c.paste[bg (1+row.p*cell)]\n end\nend\n\non click pos do\n d:get_dim[]\n b:nb:getstate[]\n o:(d cross d) dict range d^2\n p:floor pos/c.size/d\n each delta in DELTAS\n  t:p+delta\n  if (0~b[o[t]])&(!max(t<0)|(t>d-1)) nb:swap[b o[t] o[p]] end\n end\n setstate[nb]\n view[]\n if !nb~b card.event[\"change\"] end\nend\n\non get_reset do\n on reset do\n  setstate[()]\n  view[]\n end\nend\n\non get_scramble do\n on scramble do\n  d:get_dim[]\n  b:getstate[]\n  o:(d cross d) dict range d^2\n  p:first extract key where 0=b from o\n  each in range 100\n   t:p+random[DELTAS]\n   if !max(t<0)|(t>d-1) b:swap[b o[t] o[p]] p:t end\n  end\n  setstate[b]\n  view[]\n end\nend\n\non get_solved do\n getstate[]~initstate[]\nend","template":"on change do\n \nend","attributes":{"name":["dim"],"label":["Dim"],"type":["number"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"volatile":1,"scale":1},"s":{"type":"field","size":[100,20],"pos":[117,13],"show":"none"},"dim":{"type":"field","size":[100,20],"pos":[117,47],"show":"none","value":"4"}}}}}

Tired of having boring checkboxes? Tired of having a boring life? Spice things up with

The ToggleButton Contraption

The toggleButton contraption behaves as a drop-in replacement for a "checkbox"-styled button widget, using customizable graphics instead of a textual label. Just like a Button widget, this produces click[] events when clicked, exposes a boolean .value attribute, and respects .show for transparency. If provided with a single image, the image will be displayed only if the value is 1. Otherwise, the first image will be used to indicate a value of 0 and the last image will be used to indicate a value of 1. If images are smaller than the bounding box of the contraption, they will be drawn centered.

%%WGT0{"w":[{"name":"toggleSwitch","type":"contraption","size":[53,31],"pos":[155,141],"show":"transparent","def":"toggleButton","widgets":{"c":{"size":[53,31],"show":"transparent"},"b":{"size":[53,31]},"ims":{"size":[100,6],"pos":[74,2],"value":{"text":["","i","i"],"font":["","",""],"arg":["","%%IMG2ADMAHQAoAQIALwECIAIBAQAsAQIgBAECACkBAiAGAQIAJwECIAQNAiACAQEMAQEBAAgBHiAGDQIgAgEBDAEBBQADAQEgGQEDIAUNASACDQIgAgEBDAIBASADAQEAAQEBIBcBAyAHDQMgAQ0CIAIBAQwDAQEgAwECIAMBFCAHDQEgAg0GIAIBAQwDAQEgAwECIAIBFCAGDQQgAQ0GIAIBAQwEAQEgAgECIAIBAiAXDQUgAQ0GIAIBAQwEAQEgAgECIAIBASAYDQIgAQ0CIAENBiACAQEMBAEBIAIBAiACAQEgGA0CIAENAiABDQIgAQ0DIAIBAQwEAQEgAgECIAIBASADAQMgAgEEIAEBBCAHDQIgAQ0CIAENAiACDQIgAgEBDAQBASACAQIgAgEBIAIBBSABAQQgAQEEIAcNAiABDQIgAQ0CIAMNASACAQEMBAEBIAIBAiACAQEgAgECIAEBAiABAQIgAwECIAkNAiABDQIgAQ0CIAYBAQwEAQEgAgECIAIBASACAQIgAQECIAEBBCABAQQgBw0FIAkBAQwEAQEgAgECIAIBASACAQIgAQECIAEBBCABAQQgBw0FIAcBAwwEAQEgAgECIAIBASACAQIgAQECIAEBAiADAQIgCg0CIAcBAg0DAQEMAwEBIAIBAiACAQEgAgECIAEBAiABAQIgAwECIBEBAg0FAQEMAwEBIAIBAiACAQEgAgEFIAEBAiADAQIgDwECDQgBAQwCAQEgAgECIAIBASADAQMgAgECIAMBAiANAQINCgEBDAIBASACAQIgAgEBIBoBAg0NAQEMAQEBIAIBAiACAQEgFwEDDQ8BAQwBAQEgAgECIAIBASAUAQMNEwECIAIBAiADASsgAwECIDEBAQABAQEgLwEBAAMBLwAC","%%IMG2ADMAHQAJAQIAMAEBIAIBAgAtAQIgBAECACsBAiAGAQIAKAEBDAEBASAIAQIAIgEFDAEBASADDQIgBQEeAAMBASADAQEMAgEBIAINBCAGAQMgGQEBAAEBASADAQEMAwEBIAINAiABDQIgAQ0BIAYBAyAXAQIgAwEBDAMBASACDQIgAQ0CIAENAiAIARQgAwECIAIBAQwEAQEgAg0CIAENAiABDQMgAQ0BIAYBFCACAQIgAgEBDAQBASACDQIgAQ0CIAENAyABDQIgFwECIAIBAiACAQEMBAEBIAINAiABDQIgAQ0CIAINAyAXAQEgAgECIAIBAQwEAQEgAg0CIAENAiABDQMgAQ0DIBcBASACAQIgAgEBDAQBASACDQIgAQ0CIAENAyABDQIgCwEDIAIBAiACAQIgAgEBIAIBAiACAQEMBAEBIAINBSABDQMgAQ0DIAkBBSABAQMgAQECIAIBASACAQIgAgEBDAQBASAEDQIgAg0CIAINAyAJAQIgAQECIAEBAyABAQIgAgEBIAIBAiACAQEMBAEBIAgNAiACDQIgCgECIAEBAiABAQYgAgEBIAIBAiACAQEMBAEDIAcNASACDQIgCgECIAEBAiABAQYgAgEBIAIBAiACAQEMAwEBDQMBAiAIDQIgCgECIAEBAiABAQIgAQEDIAIBASACAQIgAgEBDAMBAQ0FAQIgBw0BIAoBAiABAQIgAQECIAEBAyACAQEgAgECIAIBAQwCAQENCAECIBABBSABAQIgAgECIAIBASACAQIgAgEBDAIBAQ0KAQIgDwEDIAIBAiACAQIgAgEBIAIBAiACAQEMAQEBDQ0BAiAaAQEgAgECIAIBAQwBAQENDwEDIBcBASACAQIgAgECDRMBAyAUAQEgAgECIAMBKyADAQIgMQEBAAEBASAvAQEAAwEvAAI="]}}}}],"d":{"toggleButton":{"name":"toggleButton","size":[100,100],"resizable":1,"margin":[1,1,1,1],"description":"A graphical drop-in replacement for checkboxes.","script":"on view do\n i:extract arg where arg..type=\"image\" from ims.value\n c.show:card.show\n c.clear[]\n if 1~count i\n  f:first i\n  if b.value c.paste[f .5*c.size-f.size] end \n end\n if 2~count i\n  f:i[b.value]\n  c.paste[f .5*c.size-f.size]\n end\nend\n\non click do\n set_value[!get_value[]]\n card.event[\"click\"]\nend\n\non get_value do b.value end\non set_value x do b.value:x view[] end\non get_images do ims.value end\non set_images x do ims.value:x end","template":"on click do\n \nend","attributes":{"name":["value","images"],"label":["Value","Images"],"type":["bool","rich"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"volatile":1,"border":0,"scale":1},"b":{"type":"button","size":[100,100],"pos":[0,0],"script":"on click do\n \nend","show":"transparent","style":"invisible"},"ims":{"type":"field","size":[100,20],"pos":[121,5],"show":"none","border":1,"value":{"text":["","i"],"font":["",""],"arg":["","%%IMG2AA8ADwACAQsAAwEBIAsBAQABAQEgDQECIA0BAiANAQIgDQECIA0BAiANAQIgDQECIA0BAiANAQIgDQECIA0BAQABAQEgCwEBAAMBCwAC"]}}}}}}

Do you want the Juice? Do you need the Juice? Juice it or lose it with

The AnimButton Contraption

The animButton is another drop-in replacement for button widgets, this time for ordinary buttons. Just like a Button widget, this produces click[] events when clicked,  and respects .show for transparency. The first image is the default appearance of the button. When clicked, the button will cycle forward-and-back through the provided images. For example, if there are 3 images {0,1,2}, they will be displayed in the order {0,1,2,1,0}. If images are smaller than the bounding box of the contraption, they will be drawn centered.

%%WGT0{"w":[{"name":"animButton1","type":"contraption","size":[29,27],"pos":[249,73],"show":"transparent","def":"animButton","widgets":{"c":{"size":[29,27]},"b":{"size":[29,27]},"ims":{"size":[100,6],"pos":[50,1],"value":{"text":["","i","i","i","i"],"font":["","","","",""],"arg":["","%%IMG2ABkAGQABARcAAQEBIBcBAiAXAQIgFwECIBcBAiAXAQIgFwECIBcBAiAXAQIgFwECIBcBAiAXAQIgFwECIBcBAiAXAQIgFwECIBcBAiAXARsNFwECDRcBAg0XAQINFwECDRcBGg==","%%IMG2ABkAGQBMARcAAQEBDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXARsNFwECDRcBGg==","%%IMG2ABkAGQCWARoMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBGg==","%%IMG2ABkAGQCWAWYMFQEDDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBAgwXAQIMFwECDBcBGg=="]}},"ai":{"size":[100,5],"pos":[50,10],"value":"12"}}}],"d":{"animButton":{"name":"animButton","size":[100,100],"resizable":1,"margin":[1,1,1,1],"description":"A graphical drop-in replacement for buttons.","version":1,"script":"on rev x do x @ (-1+count x)-range count x end\n\non view do\n i:ims.images\n f:first i\n c.show:card.show\n c.clear[]\n if c.animated\n  s:(range count i),1 drop rev[range count i]\n  a:floor ai.text/2\n  f:f unless i[s[a]]\n  if a~(count s)-1 c.animated:b.locked:0 else ai.text:1+ai.text end\n end\n c.paste[f .5*c.size-f.size]\nend\n\non click do\n if !b.locked\n  ai.text:0\n  c.animated:b.locked:1\n  view[]\n  card.event[\"click\"]\n end\nend\n\non get_images do ims.value end\non set_images x do ims.value:x end","template":"on click do\n \nend","attributes":{"name":["images"],"label":["Images"],"type":["rich"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"volatile":1,"script":"on click pos do\nend","border":0,"scale":1},"b":{"type":"button","size":[100,100],"pos":[0,0],"show":"transparent","style":"invisible"},"ims":{"type":"field","size":[100,20],"pos":[121,5],"show":"none","border":1},"ai":{"type":"field","size":[100,20],"pos":[121,37],"show":"none","style":"plain"}}}}}

Do you pine for diet colas from the 1970s? Indulge yourself with

The TabBar Contraption:

Configure a set of newline-delimited options, and this contraption allows you to make an exclusive selection among them. In concert with showing/hiding other widgets or manipulating the data stored in other widgets, this can be used to create the appearance of "tabbed" UIs. This contraption supports the standard .show, .font, and .locked attributes. You can obtain the list of options with the .options attribute, and the selected tab (by name) with the .value attribute. When a tab is selected, this contraption provides a click[] event with no arguments.

%%WGT0{"w":[{"name":"tabbar","type":"contraption","size":[168,34],"pos":[184,140],"def":"tabbar","widgets":{"o":{"size":[100,7],"pos":[191,0]},"c":{"size":[168,34]},"i":{"size":[100,8],"pos":[191,11]}}}],"d":{"tabbar":{"name":"tabbar","size":[100,100],"resizable":1,"margin":[1,1,1,1],"description":"a tab bar, allowing the user to make an exclusive selection among several choices.","version":1.1,"script":"on get_options_text do o.text end\non set_options_text x do\n o.text:x\n i.interval:0,(count \"\\n\" split o.text)-1\n view[]\nend\non get_options do \"\\n\" split o.text end\non set_options x do set_options_text[\"\\n\" fuse x] x end\non get_value do get_options[][i.value] end\non set_value x do v:get_options[] i.value:sum (range count v)*v=x x view[] end\n\nbf:image[\"%%IMG2AAsABwADAQUABQEBIAUBAQADAQEgBwEBAAEBASAJAQIgCQECIAkBDA==\"] bb:image[\"%%IMG2AAsABwADAQUABQEBIAUBAQADAQEgAQEFIAEBAQABAQEgAQEHIAEBAiABAQcgAQECIAEBByABAQw=\"]\n\non view do\n c.show:card.show\n c.font:card.font\n c.clear[]\n v:get_options[]\n w:c.size[0]/count v\n each x ix in v\n  sel:ix~i.value\n  b:(ix*w),0,(w+ix<-1+count v),c.size[1]\n  c.segment[(bf,bb)[sel] b 5,4,5,2]\n  c.pattern:(1,32)[sel]\n  c.text[x b+(0,1,0,0) \"center\"]\n end\nend\n\non click pos do\n if !card.locked\n  v:get_options[]\n  w:c.size[0]/count v\n  p:get_value[]\n  set_value[v[floor(first pos)/w]]\n  if !p~get_value[] card.event.click end\n end\nend","template":"on click do\n \nend","attributes":{"name":["options_text"],"label":["Options"],"type":["code"]},"widgets":{"o":{"type":"field","size":[100,20],"pos":[123,1],"show":"none","style":"plain","value":"One\nTwo\nThree"},"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"volatile":1,"border":0,"scale":1},"i":{"type":"slider","size":[100,25],"pos":[123,32],"show":"none","interval":[0,2]}}}}}

Ever wanted to be able to have text fields that are colours other than black or white, or indeed have white text on a transparent background?

ColourText can do that!

It's a pretty simple contraption, there's a field for rich text and a field for the desired colour (by decker palette index). It'll flow/wrap the text fine, but if you're resizing in widgets mode it won't update until you switch back to interact mode. It can't do the "editing in interact mode" thing like real text fields can nor does it have support for adding borders or being able to scroll. If you need those I'll say it's a challenge for the reader at the moment.

Give it a try though! Let me know if there's any obvious bugs or fixes I ought to do.

Edit: you may want to grab the updated version from the comments - it sets the internal canvas as "volatile" so that when you save your deck it doesn't include the image of text, thus saving on space. But it has the drawback of playing a bit funny with transition effects in a way that is workaround-able but requires some coding, so I'm leaving the original version here in case that's easier for you

%%WGT0{"w":[{"name":"colourtext1","type":"contraption","size":[134,65],"pos":[142,122],"show":"transparent","def":"colourtext","widgets":{"canvas1":{"size":[134,65],"image":"%%IMG2AIYAQQD/AJUjAQAOIwEADCMBAAkjAgABIwIABCMBAAIjAQAFIwEACSMBAA4jAQAIIwEAAiMBACgjAQAOIwEADCMBAAojAQACIwEABCMBAAIjAQAPIwEADiMBAAsjAQAoIwEABSMCAAMjAgACIwEAAiMBAAQjAgACIwMABCMCAAMjAQACIwEAAyMDAAEjAwACIwIAAiMDAAMjAwACIwIAAiMBAAMjAQABIwMABiMCAAEjAwAEIwIAAyMCAAIjAwABIwIAAyMCAAMjAwAJIwEABCMBAAIjAQABIwEAAiMBAAEjAQABIwEAByMBAAIjAQAHIwEAAiMBAAIjAQAEIwEAAiMBAAIjAQACIwEAASMBAAcjAQACIwEAAiMBAAIjAQABIwEAAyMBAAgjAQACIwEABCMBAAIjAQABIwEAAiMBAAEjAQACIwEAAiMBAAEjAQACIwEAASMBAAwjAQAEIwEAAiMBAAEjAQACIwEAASMCAAYjAwACIwEABSMDAAIjAQACIwEABCMBAAIjAQACIwEAAiMBAAIjAgAFIwEAAiMEAAMjAQAEIwEACCMBAAIjAQAEIwEABCMBAAIjAQABIwEAAiMBAAIjAQABIwQAAiMCAAojAQAEIwEAAiMBAAEjAQACIwEAASMBAAEjAQAEIwEAAiMBAAIjAQAEIwEAAiMBAAIjAQACIwEABCMBAAIjAQACIwEAAiMBAAQjAQAEIwEAAiMBAAUjAQABIwEAAyMBAAgjAQACIwEABCMBAAIjAQABIwEAAiMBAAEjAQACIwEAAiMBAAEjAQAHIwEACSMEAAIjAgADIwIAAiMBAAIjAQAEIwMAAyMBAAQjAwACIwEAAiMBAAUjAQABIwEAAiMBAAIjAQABIwMABiMBAAIjAgACIwEAAyMBAAMjAQACIwEABCMBAAMjAQAEIwIAAyMCAAIjAQACIwEAAiMBAAIjAgACIwMAXyMBAIQjAQDFIwIAASMCAAMjAwADIwMAHSMCAAcjAwAQIwIALSMBAAwjAgAFIwIABCMCAB8jAgAGIwIAEiMCABcjAQAfIwUAASMCAAEjBAACIwQAAyMEAAIjAgABIwIAAiMEAAIjBQACIwQABCMEAAMjBAACIwUAAiMEAAIjAwARIwEAFCMCAAEjAwAEIwIAAiMCAAEjAgACIwIABCMCAAMjAgACIwIAASMDAAMjAgACIwIAASMCAAIjAgACIwIABiMCAAMjAgACIwIAASMCAAIjAgACIwIAAiMCAAIjAQAEIwIAAiMDAAMjAwAVIwEAASMBAAIjAQADIwIAAiMCAAEjAgACIwIABCMCAAMjAgACIwIAASMCAAQjAgACIwIAASMCAAIjAgACIwIABiMCAAMjAgACIwIAASMCAAIjAgACIwIAAiMDAAgjAQABIwEAAiMBAAEjAQACIwEAFSMBAAEjAQACIwEAAyMCAAIjAgABIwIAAiMCAAQjAgADIwYAASMCAAQjBgABIwIAAiMCAAIjAgAGIwIAAyMCAAIjAgABIwIAAiMCAAIjAgADIwMABSMDAAEjAQACIwEAASMBAAIjAQAVIwEAASMBAAIjAQADIwIAAiMCAAEjAgACIwIABCMCAAMjAgAFIwIABCMCAAUjAgACIwIAAiMCAAYjAgADIwIAAiMCAAEjAgACIwIAAiMCAAQjAwADIwEAAiMBAAEjAQACIwEAASMBAAIjAQAVIwEAASMBAAIjAQADIwIAAiMCAAEjAgACIwIABCMCAAMjAgADIwEAASMCAAQjAgADIwEAASMCAAIjAgACIwIABiMCAAMjAgACIwIAASMCAAIjAgACIwIAAiMBAAIjAgAEIwMAASMBAAIjAQACIwMAHyMFAAEjAgACIwIABCMCAAQjBAACIwIABSMEAAIjAgACIwIAAyMCAAUjAgAEIwQAAiMCAAIjAgADIwIAAiMDAP8A/wBBIwEAAiMBAAIjAQAVIwEAECMBAAQjAQAwIwEAJSMBAAIjAQAVIwEAECMBAAQjAQAwIwEAISMCAAEjAwAEIwMAAyMBAAEjAgACIwIAAyMDAAQjAgACIwMAAyMDAAMjAwABIwEAASMCAAIjAgACIwMAAyMDAAEjAwADIwIAAiMBAAEjAgACIwIAAiMDAAIjAwAhIwEAAiMBAAQjAQAGIwIAAyMBAAIjAQABIwEAAiMBAAYjAQABIwEAAiMBAAEjAQACIwEABCMBAAIjAgAGIwEAASMBAAIjAQABIwEABCMBAAIjAQAEIwEAASMCAAMjAQACIwEAASMBAAIjAQACIwEAIiMBAAIjAQAFIwIABCMBAAQjBAABIwEAAiMBAAQjAwABIwEAAiMBAAEjAQACIwEABCMBAAIjAQAFIwMAASMBAAIjAQACIwIAAiMBAAIjAQACIwMAASMBAAQjBAABIwEAAiMBAAIjAQAiIwEAAiMBAAcjAQADIwEABCMBAAQjAQACIwEAAyMBAAIjAQABIwEAAiMBAAEjAQACIwEABCMBAAIjAQAEIwEAAiMBAAEjAQACIwEABCMBAAEjAQACIwEAASMBAAIjAQABIwEABCMBAAQjAQACIwEAAiMBACIjAQADIwEAAyMDAAQjAQAFIwIAAyMDAAQjAwABIwEAAiMBAAIjAwAFIwEAASMBAAUjAwABIwEAAiMBAAEjAwACIwMAAyMDAAEjAQAFIwIAAiMBAAIjAQADIwEAaiMBAIUjAQD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD/AP8A/wD8","pattern":35},"field1":{"pos":[-186,154],"value":{"text":["Look at all this text, it comes in ","different fonts"," and it's red and transparent"],"font":["","menu",""],"arg":["","",""]}}}}],"d":{"colourtext":{"name":"colourtext","size":[100,100],"resizable":1,"margin":[0,0,0,0],"description":"Like a text box, but with colour!","version":1,"script":"on get_colour do\n canvas1.pattern\nend\n\non set_colour x do\n canvas1.pattern:x\n redraw[]\nend\n\non get_value do\n field1.value\nend\n\non set_value x do\n field1.value:x\n redraw[]\nend\n\non redraw do\n canvas1.clear[]\n size:canvas1.textsize[field1.value canvas1.size[0]-4]\n canvas1.text[field1.value 2,2,size]\nend\n\non view do\n redraw[]\nend","attributes":{"name":["value","colour"],"label":["Text","Colour (palette index)"],"type":["rich","number"]},"widgets":{"canvas1":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"show":"transparent","border":0,"scale":1},"field1":{"type":"field","size":[100,20],"pos":[-186,189]}}}}}

Hi there! I'm trying to use the marquee contraption, but it doesn't seem to save the font, only the text. Am I missing something?

Good day, how can I remove a contraption template?

The Lockbox Contraption

A simple, unobtrusive contraption that both indicates whether a deck is locked and allows the user to lock or unlock their deck by clicking on it:

Many decks benefit presentationally from being locked, but leaving your decks unlocked helps other deckbuilders learn from your work and (when appropriate) modify it for their own needs. Including this little contraption offers a nice compromise: in a game, you might add this button to the credits screen as a reward for succeeding. Tools and tutorials might offer it on the front page!

%%WGT0{"w":[{"name":"lockbox1","type":"contraption","size":[20,20],"pos":[210,146],"def":"lockbox","widgets":{"c":{},"b":{},"ims":{}}}],"d":{"lockbox":{"name":"lockbox","size":[20,20],"margin":[1,1,2,2],"description":"Make your deck manually lockable and unlockable.","script":"on view do\n i:ims.images[deck.locked]\n c.clear[]\n c.paste[i .5*c.size-i.size]\nend","attributes":{"name":[],"label":[],"type":[]},"widgets":{"c":{"type":"canvas","size":[20,20],"pos":[0,0],"locked":1,"volatile":1,"border":0,"scale":1},"b":{"type":"button","size":[20,20],"pos":[0,0],"script":"on click do\n deck.locked:!deck.locked\n view[]\nend\n","show":"transparent","style":"invisible"},"ims":{"type":"field","size":[100,20],"pos":[154,-5],"locked":1,"show":"none","value":{"text":["","i","i"],"font":["","",""],"arg":["","%%IMG0ABAAEAAAP/xAAkPCR+JGYkZiQGJP8k/yT/JP8k/yQAI//AAA","%%IMG0ABAAEAAAP/xAAkACQ8JH4kZiRmJP8k/yT/JP8k/yQAI//AAA"]}}}}}}

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"}}}}}