Displays images in a grid with customizable spacing and appearance. Can edit the amount of images on each row using the '.colw' attribute and the vertical spacing between each row by expanding the widget boundaries.
Toggle between full-color images or black silhouetted previews by changing the values of the list within the '.unlocked' field. This contraption was made to function as a quick-to-deploy achievements display for games.
Adds 5px of spacing by default, this can be adjusted by changing the + value at the end of this script:
px:px+v.size[0]+5
Silho(uette)Collection
%%WGT0{"w":[{"name":"silhoCollection","type":"contraption","size":[118,60],"pos":[183,107],"script":"on click x do\n show[x]\nend","show":"transparent","def":"silhoCollection","widgets":{"f":{"size":[10,8],"value":"{\"colw\":3,\"imgs\":[%%IMG3ACYAFwZAgHBILA4DyKTSyDQqn9BosxitWpPTq9bK3CpH4DC4So2Kz+jzkwhNu99r4fdNTy8BTzoSvecv526AI4JhVnpJYoSFZod+cFV1kWp/ipKBWHKGlpOYmVuWcWxeo51lpKNOa6dXpkiiq6GeAa2zR3evtaKprq1duVO6vsBCQQ==,%%IMG3AB8AGgZAgHBIFAaOyEBxyQQkn9AmE0p9SofVbLKpFXm92iL0Sy6Lqtinef2NGpPsOHirLh/l7aoZjj9T90h9fmOAgoN1hoB6iXZIToSMVouGVm9dcZVEWptbXJxoV59uV4+ipJqOaamnqkdiq6ylSq+wrK5LmbGht01B,%%IMG3ACQAGwZAgHBILAoDyKRxyTwmn1BlkxmtWqdEqzaK3SZD4JC2WQ2bz+DqMopuo6FZtnsehgPk9Lz4eYfq/3x4f3Neg3pahAF1inRWiUh7kI+CZk+RjG6BX5mYkm9cfoZnV06WhltFhZ+oRl6uUmSvY1hDsqS0cbN9SLipsHy1Ab2+vKXFw1TCucrIw8dYQQ==,%%IMG3ACEAGQZAgHBIFAaOyGNxySQmn9BmE0qNSgHVrJWpRXm/2mX1Sy6jqE6oeU22Utlw79P4jNvndXs7UE5ik3pgSHtIf0eBcoOChXmBh32Fho+IkJGSipRzaWp3aEVaoJqfoaBTpGFcmqcBUqKbrEN+pkpisnS0prOwsZZXqbi3u76pxExB,%%IMG3AB8AGAZAgHAoDBiPyCRxuUw6n0bmEEp1SqtY5dR56nq/Xuj2CC6btclzAGz8IovkMjIcP1XV7e6czjXb126AfGl+hYFQholKhIlybwBPjYNRY1mHWpVZVFeam1KZWZ9MaE+inJSQj6anAUSYq5lNR7CyqJW0sp+2n0E=,%%IMG3ABwAGAZAgHBIBASOyEBxyUw6nczicwqNUq/I5tTENWGVw2d3TJ6Gk+T0uOpUu7lJY9sbeK+vcKQ9v+XX91Rlf3ZYe2qFhl1PQmKEZmdfX0SRkVKUWEuXk1lWnFWMnJlxoKFyUXJHm6WnpGCQrFqwTEE=],\"uns\":[1,1,1,0,0,1]}"},"c":{"size":[118,60]},"storage":{}}}],"d":{"silhoCollection":{"name":"silhoCollection","size":[100,100],"resizable":1,"margin":[0,0,0,0],"description":"Display a list of images in a grid, using a list of booleans to determine an 'unlocked' or visible state - otherwise, images are drawn with a black sillohette.","version":2,"script":"on get_value do f.data end\non set_value x do f.data:x end\n\non get_imgs do \n i:rtext.make[]\n each v in f.data.imgs\n i:rtext.cat[i v]\n end\n i\nend\n\non set_imgs x do \n i:extract arg where text=\"i\" from x\n f.data:f.data.imgs:(i)\n f.data:f.data.uns:filluns[x]\n render[]\nend\n\non get_colw do f.data.colw end\non set_colw x do f.data:f.data.colw:x end\n\non get_unlocks do f.data.uns end\non set_unlocks x do \n f.data:f.data.uns:filluns[x]\n render[]\nend\n\non view do \n card.show:\"transparent\"\n render[] \nend\n\non inside p r cellsize do\n min(p>r)&(p<r+cellsize)\nend\n\non click pos do\n uns:get_unlocks[]\n imgs:extract arg from get_imgs[]\n input:rows storage.value\n each v k in input\n vpos:v.pos\n vsize:v.size\n if inside[pos vpos vsize]\n rimg:imgs[k].copy[]\n if uns[k]=0 rimg.map[(0,1) dict (0,1) colors.black] end\n card.event[\"click\" rimg]\n end\n end\nend\n\non get_update do render[] end\n\non render do\n input:()\n c.clear[]\n i:0\n py:0\n px:0\n cw:get_colw[]\n imgs:get_imgs[]\n uns:get_unlocks[]\n rs: ceil ((count imgs) / cw)\n rw: card.size[1]/rs\n each v k in extract arg from imgs\n if uns[k]=1\n c.paste[v px,(py*rw) 1]\n else\n c.paste[v.map[(0,1) dict (0,1) colors.black] px,(py*rw) 1]\n end\n input[k].pos:px,(py*rw)\n input[k].size:v.size\n if i=cw-1\n i:0\n py:py+1\n px:0\n else\n i:i+1\n px:px+v.size[0]+5\n end\n end\n storage.value:table input\nend\n\non filluns x do\n r:get_imgs[].arg dict x\n r:1 fill r\n range r\nend","template":"on click x do\n\nend","attributes":{"name":["colw","imgs","unlocks"],"label":["Column Width","Images","Unlocked State"],"type":["number","rich","data"]},"widgets":{"f":{"type":"field","size":[8,8],"pos":[1,-13],"locked":1,"show":"none"},"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"volatile":1,"show":"transparent","border":0,"scale":1},"storage":{"type":"grid","size":[8,8],"pos":[-12,-13],"locked":1,"volatile":1,"show":"none"}}}}}
Creates an interactive, full color palette (exposes selection with both '.pattern' and a click[] event) using a single image containing the pattern 1.
Image Palette
%%WGT0{"w":[{"name":"Image Palette","type":"contraption","size":[248,72],"pos":[137,144],"script":"on change col do\n\nend","pattern":40,"show":"transparent","def":"Image Palette","widgets":{"c":{"size":[248,72]},"i":{"size":[248,14],"value":{"text":["i"],"font":[""],"arg":["%%IMG3AB8AJAKEjxmR7W/WgvTJWXO8Ol/ZUR8WOiNZHieaAitbvgwCevJq3ber96APZAR7quGrYRzlkjBa0jbUGDtTadB6hWZFVW60wgTjeCexslhefkxndhtZU8db6Dl9Y7/j6QU="]}}}}],"d":{"Image Palette":{"name":"Image Palette","size":[100,100],"resizable":1,"margin":[0,0,0,0],"description":"Create a color palette by tiling an image.\n\nReturns color selection via card.pattern.","version":1,"script":"on get_i do i.images[0] end\non set_i x do i.value:x end\n\nimg:get_i[]\non view do\n card.show:\"transparent\"\n if img.size\n x:img.size[0]\n y:img.size[1]\n card.size:(x*8),(y*2)\n c.size:card.size\n col:47\n each v in range 2\n each k in range 8\n c.paste[img.copy[].map[(1) dict (col)] (x*k),(y*v)]\n col:col-1\n end\n end\n end\nend","template":"on change col do\n\nend","attributes":{"name":["i"],"label":["image"],"type":["rich"]},"widgets":{"c":{"type":"canvas","size":[100,100],"pos":[0,0],"locked":1,"volatile":1,"script":"on click pos do\n if !me[pos]=0 \n card.pattern:me[pos] \n card.event[\"change\" me[pos]]\n end\nend","show":"transparent","border":0,"scale":1},"i":{"type":"field","size":[100,20],"pos":[0,0],"locked":1,"show":"none"}}}}}