More button foolery (borders & aufio)

196 views
Skip to first unread message

A Gloom

unread,
Mar 10, 2020, 2:11:56 AM3/10/20
to TiddlyWiki

easy to modified buttons shapes with style override

btnClipboard.jpg



inline styling used for demo, styles can be moved to a stylesheet for wiki wide custom buttons using class="" don't use with tc-btn-rounded class

class attribute shown to show no tc-btn- classes used, imgglow (the glow for the buttons) not included

<$button class="imgglow" style="font-size:1em; border: groove 3px; border-radius:0px 50px 50px 50px; padding:2px 20px;">Remorse</$button>

<$button class="imgglow" style="font-size:1em; border: ridge 3px; border-radius:0px 50px; padding:2px 20px 2px 25px;">The Inquisitor</$button>

<$button class="imgglow" style="font-size:1em; border: outset 3px; border-radius:0px 50px 0px 0px; padding:2px 20px;">The Stalwart</$button>

<$button class="imgglow" style="font-size:1em; border: inset 3px; border-radius:50px 50px 0px 0px; padding:2px 20px;">The Adversary</$button>

<$button class="imgglow" style="border-style:inset solid inset solid; border-width:1px 2px 5px; border-radius:0px 0px 50px 50px; padding:2px 20px;">The Fated</$button>

Next attaching audio to button clicks...

A Gloom

unread,
Mar 11, 2020, 12:51:26 AM3/11/20
to TiddlyWiki
What?! we shall call it menu elevator music-- audio in the topbar menu's (wiki zoom increased 150% so things are more visible)-- look at topbar Environment menu

Why? cause we could

Also can be seen what I did with TonyM's empty story river idea (that's an empty story river, no tiddlers open)

audiotopbar.jpg



TonyM

unread,
Mar 11, 2020, 11:09:19 PM3/11/20
to TiddlyWiki
A Gloom

Thanks for Sharing. On your image I see you have groups a set of icons into a bordered set, cute

Tony

A Gloom

unread,
Mar 13, 2020, 2:08:59 AM3/13/20
to TiddlyWiki
you haven't seen half of it yet-- my wiki now be musical-- audio embedded into everything I could dream of (more details on that later)-- next post will have the code for a button with audio triggered by button in addition to any normal button actions (takes an unusual purely wikitext approach-- no scripts)

the border icons?  I assume you mean the ones right below the audio  controls?  They're just an unicode string in a bordered div-- I customized the tag pll macro and templates to display a different field (not the usual title/caption) which contains html to display the audio control and a list widget to list all enviromental status fields (unicode symbols) from a master temp tiddle that keeps all statuses as they get changed by game/story pages-- basically the top bar is part of a browser based game >> <<

And yes, cute-- this was originally a children's story that matured as the child would had-- she/it would had/be 18 now-- so this version (Aylin) of the story is a milestone.  Even as the story matures (darkens) it still keeps some of its light-hearted nature.

A Gloom

unread,
Mar 16, 2020, 6:00:10 AM3/16/20
to TiddlyWiki

Mr. Underfoot here.  KAOS operative extraordaire, speaking on behalf of the mad coding lab of WikiWitchery, to bring the Next Big Thing-- the biggest thing since the last big thing...

Musical ToC's...

Yes you too can have music in your sidebar ToC tabs-- just throw an audio html element in the caption tab of a tiddler-- tho it may not be wise to do at home << >> -- it will play whenever you click on that sidebar tab and the ToC is expanded for it to show-- a html5 audio control if controls attribute is used in the audio element, or a blank line if controls is omitted.  Autoplay attribute has to be used for the audio to play automatically.

That's not all! This trick-- or variants of this trick-- allows for musical menus, tabs, buttons... and with the music-- we'll include images and animated svg's too (see topbar menu in screendhot-- 1 png, 2 animated svg's)

tocmusic.jpg



A disco in your wiki!1! falls out of chair laughing.


Mr Underfoot (Smudge, in memorium) courtesy of Kittens Against Organization & Sanity pyewackit.net/kaos All Noms

Birthe C

unread,
Mar 16, 2020, 7:11:20 AM3/16/20
to TiddlyWiki
K.A.O.S Center and the Technical Support. I can tell from the ears that support is all ready to listen. All charming. I smiled and laughed.
I enjoyed it very much.

Your idea of having music in the sidebar is good, I would not want it for my daily wiki though ;-)
It might be an idea for the wiki I am putting together for my friend, who always fall asleep when checking his diary and plans, a little wake up surprise maybe.


Birthe

Joshua Fontany

unread,
Mar 17, 2020, 9:51:12 PM3/17/20
to TiddlyWiki
The Floating Librarians of Mu (Left Coa$t, US) appreciate these audio experiments greatly. Mahalo. -><-

Joshua F, KSC

Donald Coates

unread,
Mar 17, 2020, 11:59:53 PM3/17/20
to TiddlyWiki
Fart buttons on my wiki!!!  I'm in!!

A Gloom

unread,
Mar 18, 2020, 2:10:32 AM3/18/20
to tiddl...@googlegroups.com
well here you go, go find your fav sound and insert into the html audio element src's or make tiddlers for the audio element and transclude the tiddlers in place of html audio element.

basically a 2 state "slide" button with 2 reveals to alternate between 2 instances of the same audio element so it resets with each button click even if its currently playing the audio -- but 2 different audio files could also be used- one for each state of the "slide" button.-- I need to duuble check if I tested the alternating reveals o sn audio tiddler

<!-- buttons with reveals to toggle 2 buttons in 1 --><$reveal type="match" state="$:/state/audtstbtn" text=""><$button set="$:/state/audtstbtn" setTo="2" >button</$button></$reveal><$reveal type="match" state="$:/state/audtstbtn" text="2"><$button set="$:/state/audtstbtn" setTo="" >button2</$button></$reveal>
<!-- 2 reveals with reveals to toggle 2 buttons in 1 audio source for external audio files, audio element can be replaced with transclusions of tiddlers containing the audio element omitting the controls attribute makes the audio element autoplay makes it play automatically -->
<$reveal type="match" state="$:/state/audtstbtn" text="">
<audio autoplay controls><source src="file:///d:/00/01twbu2/darkforebodingpiano.mp3" type="audio/mpeg"></audio></$reveal>
<$reveal type="match" state="$:/state/audtstbtn" text="2">
<audio autoplay controls><source src="file:///d:/00/01twbu2/darkforebodingpiano.mp3" type="audio/mpeg"></audio></$reveal>



A Gloom

unread,
Mar 18, 2020, 3:47:38 AM3/18/20
to TiddlyWiki
@Birthe

K.A.O.S Center and the Technical Support. I can tell from the ears that support is all ready to listen. All charming. I smiled and laughed.
I enjoyed it very much.

Cool that they caused joy-- Smudge would be pleased-- he was a happy cat, greeted visitors at the door, was friends with the neighbors' kids-- especially the one boy with autism-- would get distressed if we soulnded like we were arguring. (KAOS was my guys (the black cats) and the strays we socialized for the shelters in our area, Ash, Smudge & Voodoo had instructor positions because they helped us in socializing-- the strays would see them interactiing with us which seems to reassure them we weren't a threat)
 
Your idea of having music in the sidebar is good, I would not want it for my daily wiki though ;-)
It might be an idea for the wiki I am putting together for my friend, who always fall asleep when checking his diary and plans, a little wake up surprise maybe.

: >   I did that will the demo of audio capacity for a victim-- errr, client of a customized TW-- had a button for the demo fire up an audio clip from John Carpenter's movie "The Thing", the defibrillator scene with the long torturous monster scream-- they were not amused ><

for other than for show-- an audio clip embedded into a ToC could be audio instructions or commentary you would want associated with an ToC-- if its in collapsable sections of an expandable ToC and it wouldn't play till that secton was expanded, or

A ToC of audio files with ability to play the audio tile in the ToC without having to open tiddlers or external files because of the html audio controls (would also work in a list widget of audio files/itiddlers)-- the ToC macro/list widget could display title along with audio controls (if autoplay attribute is omitted, the controls become play on click)

be warned I don't know the potentially effeects if any of using html/audio element in the caption field other than messing with anything that would need a plain text caption

@Joshua

Floating Librarians of Mu-- didn't know if they foated on the sunken continent but they did in CoH << >>

Birthe C

unread,
Mar 18, 2020, 6:27:13 AM3/18/20
to TiddlyWiki
@Gloom,
My close friend had a black cat very much like yours. It was called Misser (Another name for cat). When we went for a walk it followed us like a dog, just without a leach. It was playful till the last day, 18 years old.
We got friends the cat and I just about the time I started using Tiddlywiki (classic). I swear that cat tried to take part in it, write in it. But after too many hours it just laid down on the keyboard ;-)

Lots of good ideas for the music ToC, thank you.
Now I really will have to play with that also. Always something to do with a tiddlywiki. You seem to always have so many ideas.

I wish people being bored now in isolation would start using tiddlywiki and have some fun.

Birthe

onsdag den 18. marts 2020 kl. 08.47.38 UTC+1 skrev A Gloom:
@Birthe

Cool that they caused joy-- Smudge would be pleased-- he was a happy cat, greeted visitors at the door, was friends with the neighbors' kids-- especially the one boy with autism-- would get distressed if we soulnded like we were arguring. (KAOS was my guys (the black cats) and the strays we socialized for the shelters in our area, Ash, Smudge & Voodoo had instructor positions because they helped us in socializing-- the strays would see them interactiing with us which seems to reassure them we weren't a threat)
 

A Gloom

unread,
Mar 21, 2020, 10:35:26 PM3/21/20
to TiddlyWiki
Birthe

Sorry about the delayed response-- was working on some tiddlers for Mohammad's wiki-- drawing on the external content & search tricks from the Rererences Collective
 
Lots of good ideas for the music ToC, thank you.
Now I really will have to play with that also. Always something to do with a tiddlywiki. You seem to always have so many ideas.

I shall make up some example tiddlers-- tiddlywiki com has an audio file in it so I can make example tiddlers for people to import into the official documentation site to see the ideas in action
 
I wish people being bored now in isolation would start using tiddlywiki and have some fun.

Understood

 
My close friend had a black cat very much like yours. It was called Misser (Another name for cat). When we went for a walk it followed us like a dog, just without a leach. It was playful till the last day, 18 years old.

Misser.. cool-- another name I can use with the guys-- I often call them Gato.
Smudge was like that, could be walked without a leash-- as long as no birds were around...
Ash, his brother you may appreciate the symbolism-- he was a wedding gift-- one of Freja's own-- a big black tailless cat


We got friends the cat and I just about the time I started using Tiddlywiki (classic). I swear that cat tried to take part in it, write in it. But after too many hours it just laid down on the keyboard ;-)

:)
TW isn't Mayhem proof I have discovered >> <<  Mayhem being our current KAOS operative-- Arkham, aka Mr Mayhem, aka Crash, KAOS demolitions specialist-- I stepped away from the computer the other with a tiddler in edit mode-- came back to find Mayhem standing on the keyboard with his nose up against the monitor watching the text scrolling-- he froze up Firefox and crashed everything...
Reply all
Reply to author
Forward
0 new messages