Post by Internet Janitor in The Contraption Bazaar

Viewing post in The Contraption Bazaar

Internet Janitor1 year ago (1 edit) (+3)

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

Internet Janitor1 year ago(+3)

Another variation that might be useful for prototyping and documentation-

The scriptViewer Contraption:

A tabbed text field which allows the user to view (or edit!) the script of several widgets on the current card. The "Sources" should be a newline-delimited list of widget names. If "card" or "deck" are specified, the scriptViewer will access the script of the current card or the deck, respectively.

%%WGT0{"w":[{"name":"scriptViewer","type":"contraption","size":[189,106],"pos":[170,144],"def":"scriptViewer","widgets":{"o":{"size":[100,21],"pos":[212,1],"value":"deck\ncard"},"c":{"size":[189,18]},"i":{"size":[100,26],"pos":[212,34],"interval":[0,1]},"scr":{"size":[185,85]}}}],"d":{"scriptViewer":{"name":"scriptViewer","size":[100,100],"resizable":1,"margin":[3,20,3,3],"description":"a tabbed editor for viewing and editing the scripts of one or more widgets on the current card.","version":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[\"%%IMG2AAsABwADAQUABQEBIAUBAQADAQEgAQEFIAEBAQABAQEgAQEHIAEBAiABAQcgAQECIAEBByABAQIgAQEHIAEBAQ==\"]\n\non target do\n val:get_value[]\n if val~\"deck\" deck elseif val~\"card\" deck.card else deck.card.widgets[val] end\nend\non change do\n target[].script:scr.text\nend\n\non view do\n c.font:card.font\n c.clear[]\n v:get_options[]\n w:(.7*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\n scr.text:target[].script\n scr.locked:card.locked\nend\n\non click pos do\n v:get_options[]\n w:(.7*c.size[0])/count v\n set_value[v[floor(first pos)/w]]\nend","image":"%%IMG2AGQAZAD/AP8A/wD/AP8A/wCqAWUgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAQIgYgECIGIBAiBiAWU=","attributes":{"name":["options_text"],"label":["Sources"],"type":["code"]},"widgets":{"o":{"type":"field","size":[100,20],"pos":[123,1],"show":"none","style":"plain","value":"card"},"c":{"type":"canvas","size":[100,18],"pos":[0,0],"locked":1,"volatile":1,"show":"transparent","border":0,"pattern":32,"scale":1},"i":{"type":"slider","size":[100,25],"pos":[123,32],"show":"none","interval":[0,2]},"scr":{"type":"field","size":[96,79],"pos":[2,19],"volatile":1,"border":0,"scrollbar":1,"style":"code"}}}}}

Salty P. Slug32 days ago (1 edit) (+1)

My apologies if this has been answered before, but how would I actually use this to display different items? e.g. a text field, etc.

ahmwma31 days ago(+1)

I'm going to assume you mostly want to use this to display the contents of Fields, so....

General explanation of how to repurpose this:

This contraption looks at the script of each of widgets that you name inside of it's properties window.

Literally, it's looking at the .script attribute of other widgets (or cards, the deck, etc) and displays them as plain text.

To display the contents of Fields instead we'll need to change the prototype script to look at the .value or .text of the named widgets and allow the Field inside the contraption to display Rich Text (if we want that).

As a reminder:

.text is for plain simple text (no fancy business).
.value (when we're talking about Fields) refers to Rich Text with the possibility of font changes, colors, links, inline images and so on.

(I'm assuming you want Rich Text so I'll use .value in my example.)

Practical explanation of how to edit it:

If you go inside the prototype of the contraption (File > "Prototypes..." or select a copy of this contraption, open it's properties and click "Prototype...") and look at it's script (Prototype > "Script..." from the menu bar)... well, there's a lot of neat stuff going on. But we only need to change two things in here.

Inside the "on change do" section of the prototype script, change...

target[].script:scr.text

target[].value:scr.value

Then... towards the bottom of the "on view do" further down in the script, look for the second-to-last line and change...

scr.text:target[].script

scr.value:target[].value

Finally... change the field named 'scr' inside of the contraption (it's the widget with a scroll bar) to display Rich Text by opening it's properties menu and clicking that option.

Hopefully that's all you need! Please let me know if it doesn't work, haha.

A backup plan:

If you don't want to edit it yourself you can grab the "sceneViewer" contraption out of the unlocked .deck file of this project.
(It's just the scriptViewer contraption with the changes I mention above.)

Salty P. Slug29 days ago(+1)

Thank you so much, Ahmwma! This is exactly what I needed; works like a charm. Also a big fan of your work :)

ahmwma29 days ago(+1)

You're very welcome and likewise! Looking forward to seeing what you come up with next.

itch.io

Viewing post in The Contraption Bazaar

The TabBar Contraption:

The scriptViewer Contraption: