Off-kilter: Sequence buttons

[A Gloom]

2 "state" slide/accordion button (with reveals) expanded to 3 (or more) "states"/position/sequence

On the radio, round buttons are 3 position while rectangular are 2 state (on/off).  The round "ON" switch is shown in its 3 states-- first click turns the radio on enabling audio to run once a station is selected, second click (VOL) reveals the HTML audio controls, third click (OFF) turns off any streaming audio and returns the button back to its starting state/condition (ON) .  The button remains in the same spot, just the text of the button change.  Each state (step in the sequence) turns on the next step and the final step turns on the first so the sequence can be repreated.  As many steps can be chained and actions assigned to each step.

Secong image also shows the concept moidified for a dial appearance and slide switch.

working on a bi-directional version forward and backwards sequence

code at bottom

Aplolgies for broken button borders-- latest Firefox update is playing havok with buttons-- I now have white bg buttons (which means I now cannot see the editor toolbar in topic creation)-- the impact in TW is much less-- text know has black bg which can overlap & cover the button border.

<style>.radiobutt {width:50px;height:50px;padding:1em;border-width:2px;border-radius:50%;}</style>



<$reveal type="match" state="$:/state/radioonbutt" text=""><$button set="$:/state/radioonbutt" setTo="on" class="tc-btn-rounded radiobutt" tooltip="Click to turn radio on"><$action-setfield $tiddler="$:/temp/radiostat" text="# radio static" />ON</$button></$reveal><$reveal type="match" state="$:/state/radioonbutt" text="on"><$button set="$:/state/radioonbutt" setTo="off" class="tc-btn-rounded radiobutt" tooltip="Click to open volume control">VOL</$button></$reveal><$reveal type="match" state="$:/state/radioonbutt" text="off"><$button set="$:/state/radioonbutt" setTo="" class="tc-btn-rounded radiobutt" tooltip="Click to turn radio off"><$action-setfield $tiddler="$:/temp/radiostat" text="" />OFF</$button></$reveal>

[TiddlyTweeter]

You are my kind of Heath Robinson already ...

But its actually quite tough to figure it out in images.

Any demo?

TT

[Julio Peña]

Hello all,

Wow AM/FM Radio (showing my age...hehe) ala HTML....THAT my friend is creativity!

I can only watch with wonder and amazement at some of the work I see from the community.

I'd second TT on that, a simple demo would be nice.

Blessings all,

Julio

[A Gloom]

@TT

You are my kind of Heath Robinson already ...

ty I shall take that as a compliment : D

 

But its actually quite tough to figure it out in images. Any demo?

Understood-- is the demo for the switches?  I can make a tiddler-- the second screenshot is of a tiddler containing the switches-- I can attach it after I change the switches to write to a field that I will initially set.

@Julio

Wow AM/FM Radio (showing my age...hehe) ala HTML....THAT my friend is creativity!

I can only watch with wonder and amazement at some of the work I see from the community.

I'd second TT on that, a simple demo would be nice.

TYVM!  If you recognized MW as AM you are ancient or European : P  (tho I believe the rest of the world also used the Eurpean band designations) you may also notice the FM band is the original 106 instead of 108

Now a demo of the radio wouldn't be ready-- its still in work, the screenshot below shows the latest changes.  I wasn't expecting attention being drawn to the radio but I believe I could put up a demo of it-- its only a few tiddlers that can be used independently of the wiki its from.  If you saw the screenshots of my personal wiki, the radio is one of the sidebar UI's (along with a cellphone, GPS unit, file cabinet, bookshelf, notebook, EMF detector) that are role playing immersive aides.  The radio is to find phantom radio broadcasts that are part of the story-- but just like with Fallout, Internet streaming radio stations can be listened to with it.  Currently, it has a bunch of Internet radio mixed with number stations recordings.  Once done, each band will have 100 channels to scatter stations and recordings among, with empty channels using the static mp3 that fires off when the on button is pressed (the green screen glow also turns on with the on button).  The phantom radio signal the wiki reader will want to find randomly appears on a different frequency each time.

It's all html and widgets--  the new display numbers are a table generated by list widgets to get the even spacing needed for the red dial needle movement.  It's currently a div but may change it to a svg so the the tuning button list widget to manipulate easier for its movement.

[TiddlyTweeter]

A Gloom wrote:

Understood-- is the demo for the switches?  I can make a tiddler-- the second screenshot is of a tiddler containing the switches-- I can attach it after I change the switches to write to a field that I will initially set.

Yeah. Very grateful IF you have time for that!

Best wishes

Josiah

[Mat]

A Gloom wrote:

Now a demo of the radio wouldn't be ready-- its still in work

 

Oh, sounds really cool! Looking forward to it!

<:-)

[A Gloom]

@@TT

the .tid with working examples ending with "1" was attached to last post (the one where I asked demo of which)

Bi-directional button I ended up going with buttons side by side (the far right round button with left & right arrows)-- two buttons inside a round div that makes it look like one control.

Got the dial to move with the tuning buttons and close enough to the channels increments as css allows...

got the dial glow to turn on with the on button, the numbers are white, dial red when radion is off-  got to get the dial dull red again-- I'm working with a theme that doesn't allow normal css/html colors so I have to use a concoction of css filters to achieve colors

got static when turned on till a station is selected..

just having to figure things out -- the else operator wasn't my solution for when I hit the ends of bands and the filter the tuning button operates returns an empty value and disables the button function

there's much more (the interesting combination of widgets & filters) than time permits atm

[TiddlyTweeter]

Tx for reminder. I'm behind. Will catch up.

Best, TT

[A Gloom]

TT

It just hit me-- let me know if the buttons display like in the screenshots except in reveresed colors black on white-- I operate with a theme that is opposite of what everyone uses and may not display as intended on normal themes (yes my view of the online world is grim n stark black & white)

This is actually the issue with my pride n glum creation-- no one will probably ever see it if I wanted to make it public cause its created depending upon my system theme and won't translate to a normal theme without a lot of readjusting.