Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded

A Gloom

unread,

Apr 11, 2020, 10:00:02 AM4/11/20

to TiddlyWiki

Just a quick demo posted at the Discord channel
http://pyewackit.net/ash/empty1.html

An in-tiddler svg with:
-- embedded buttons
-- -- for instruction modal
-- -- for initiating svg animations and audio to accompany the animations
-- with an additional embedded widget

NOTE: Chrome doesn't seem to like the transclusion of svg animation elements so it won't show animations

The "i" button has an instruction modal

scaling is off I know, just threw it together with a svg I already had made (still recovering so haven't the time to refine it properly)

EXPLAINATION:

The button initates svg element animations (by transclusion of animation elements into the svg) and accompanying audio file tiddlers with each of the 3 clicks, the 3rd reseting the animation to a non-animated state (no transclusions of animation elements).

TiddlyTweeter

unread,

Apr 11, 2020, 11:23:55 AM4/11/20

to TiddlyWiki

Very interesting!

Looks promising. But what is it for? Entry to a game? A secret enclave?

TT

A Gloom

unread,

Apr 11, 2020, 6:59:15 PM4/11/20

to TiddlyWiki

For that example-- a wiki/game logon startup-- could be made a default (start up like Jan's dramatic log on)-- the edit-text widget could be made a logon field

Other uses:

incorporating wikitext and widgets into svgs

switching views of a svg, zoom/pan/navigation in a svg, images sequence in a svg

turning svg animations on & off

activating animation sequences for a diagram-- showing moving parts of a item diagram with a button

showing sequenced routes in a map or chart/graph/plot changes over time, controlled by a button

* a graphical "ToC"/UI for the sidebar

* framing button clusters/rows in a visual graphic design frame

* which I'm putting to use in a full screen 10 pane game UI

the buttons embedded in the svg could be moved outside of the svg and into the tiddler containing and they'll function the same

TonyM

unread,

Apr 11, 2020, 10:17:49 PM4/11/20

to TiddlyWiki

A Gloom

Very interesting - I see how this could be used in many ways. I suppose it needs both imagination but also to be broken into its components for reassembly as needed, although a number of finished products could be created.

An example Idea following your lead is select an avatar icon and then have it create a reusable icon with the name below the icon.

Very promising.

Regards

Tony

A Gloom

unread,

Apr 11, 2020, 11:11:16 PM4/11/20

to TiddlyWiki

good news, FF fixed the break with their implementing system theme-- I can use most websites again

An example Idea following your lead is select an avatar icon and then have it create a reusable icon with the name below the icon.

yes many applications-- althoough I'm nowhere near a plugin version, its all custom coding I using for intregating wiki widgets with svg framing for a full screen 10 pane game UI

A Gloom

unread,

Apr 20, 2020, 10:21:44 AM4/20/20

to TiddlyWiki

Button group with graphic frame example-- providing a tidd file won't suffice-- all 8 buttons are custom buttons, so a tidd would display no buttons

its designed as a standalone tiddler that can be transcluded into any svg (that isn't too small to display it clearly) to manipulate its viewBox for zoom and pan but vould be adapt for many different manipulations of the svg and its elements.

Jeremy Ruston

unread,

Apr 20, 2020, 10:41:02 AM4/20/20

to TiddlyWiki

Just to let you know that I’ve pushed an update to the prerelease for v5.1.23 that allows the <$link> widget to be used directly within SVG elements.

https://github.com/Jermolene/TiddlyWiki5/commit/e71a27ac2d71f2e48f9e4e9156b59bb3ecc2a105

Best wishes

Jeremy.

On 20 Apr 2020, at 15:21, A Gloom <barro...@gmail.com> wrote:

Button group with graphic frame example-- providing a tidd file won't suffice-- all 8 buttons are custom buttons, so a tidd would display no buttons

its designed as a standalone tiddler that can be transcluded into any svg (that isn't too small to display it clearly) to manipulate its viewBox for zoom and pan but vould be adapt for many different manipulations of the svg and its elements.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/89b1d2c5-1ddb-4f03-9d23-859f9de31c7e%40googlegroups.com.
<buttoncompass.jpg>

A Gloom

unread,

Apr 20, 2020, 11:59:20 AM4/20/20

to TiddlyWiki

Jeremy

Just to let you know that I’ve pushed an update to the prerelease for v5.1.23 that allows the <$link> widget to be used directly within SVG elements.

Most excellent! I wonder if that will help the use link issue ie:

bringing up a tiddler instead of a different viewbox of the svg.

Or the svg <a> tag not appling target attribute (which I assume is a shadow DOM issue)

I don't know if my breaking svg's into different element tiddler to be transcluded into a svg shell is what you previously meant by primitives but I can now assemble custom layered svg maps picking and choosing from a "master library" of over 100 layer/element tiddlers by just setting fields of the shell svg tiddler and not needing js.

etc...

</svg>

Jeremy Ruston

unread,

Apr 20, 2020, 12:12:35 PM4/20/20

to TiddlyWiki

Hi A Gloom

Most excellent! I wonder if that will help the use link issue ie:

<view id="halfSizeView" viewBox="0 0 1200 400"/>
<a href="#halfSizeView">/<a xlink:href="#halfSizeView">

bringing up a tiddler instead of a different viewbox of the svg.

No, TW will still detect the change to the document fragment and respond accordingly.

Or the svg <a> tag not appling target attribute (which I assume is a shadow DOM issue)

I’m not familiar with that problem, can you elaborate?

I don't know if my breaking svg's into different element tiddler to be transcluded into a svg shell is what you previously meant by primitives but I can now assemble custom layered svg maps picking and choosing from a "master library" of over 100 layer/element tiddlers by just setting fields of the shell svg tiddler and not needing js.

Cool stuff, looks good.

Best wishes

Jeremy

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1100 1240">{{!!maplyr-citygrid}}
{{!!maplyr-citysecb}}
{{!!maplyr-citylim}}
{{!!maplyr-citycommrr}}
{{!!maplyr-cityfreirr}}
{{!!maplyr-citystr}}
{{!!maplyr-citytfare}}
{{!!maplyr-oroads}}
{{!!maplyr-cityhwy}}
{{!!maplyr-citycommrrd}}
{{!!maplyr-cityfreirrd}}
{{!!maplyr-geofea}}
{{!!maplyr-twnvill}}
{{!!maplyr-sndmarks}}
{{!!maplyr-citysecn}}
{{!!maplyr-citynein}}
{{!!maplyr-citylmark}}
etc...
</svg>

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c8d1cf24-4768-4cc3-97d5-19d4150b5ad5%40googlegroups.com.

Joshua Fontany

unread,

Apr 20, 2020, 6:35:20 PM4/20/20

to TiddlyWiki

Just really diving into SVGs in TiddlyWiki myself. This is awesome work!

Best,
Joshua Fontany

Hi A Gloom

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

A Gloom

unread,

Apr 21, 2020, 5:49:38 AM4/21/20

to TiddlyWiki

Jeremy

bringing up a tiddler instead of a different viewbox of the svg.
No, TW will still detect the change to the document fragment and respond accordingly.

Understandable-- necessary for TW's tiddler navigation (using the #anchor)

Or the svg <a> tag not appling target attribute (which I assume is a shadow DOM issue)
I’m not familiar with that problem, can you elaborate?

When targetting an iframe from a svg <a> with target attribute, it opens a second instance of the entire wiki inside the iframe instead of just the tiddler that is the href.

Attached is a json with a test tiddler & 2 support tiddlers, the circles of the svg are the links, the last 2 targetting iframes (1 in the same tiddler as the svg, the other is another tiddler, whhich has to be open in the story river along with the test tiddler)

I don't know if my breaking svg's into different element tiddler to be transcluded into a svg shell is what you previously meant by primitives but I can now assemble custom layered svg maps picking and choosing from a "master library" of over 100 layer/element tiddlers by just setting fields of the shell svg tiddler and not needing js.
Cool stuff, looks good.

The only problem with transcluding elements into a svg shell- Chrome doesin't seem to like it-- with the animation demo, http://pyewackit.net/ash/empty1.html , I had someone tell me Chrome (Mac & PC) wouldn't show the svg animations triggered by button clicks.

svgatargettesting.json

A Gloom

unread,

Apr 24, 2020, 10:58:04 AM4/24/20

to TiddlyWiki

Zoom & pan control buttons for svg demo

Single self contained demo tiddler attached.

Using buttons setting fields with math filter operators to set the svg viewBox, which is the dimension, aspect ratio settings for the svg image.

Only drawback is current zoom multipliers product is rounded to whole numbers so the zoom in and out numbers don't stay constant (zoom in from 240 doesn't zoom back out to 240).

The svg has 9 quadrants, only the central one is visible, the others are revealed by pan controls.

This would be good for "dungeon" maps where portions of the map isn't revealed till movement direction is chosen by the pan controls. The pan controls could also be embedded into the map svg at doors to reveal/move map view to new rooms by button click. Shall make a demo dungeon map with nav buttons on doors-- just have to strip down one of my interactive novel's maps to make it just enough to demostrate the concept.

filter for zoom in (multiply[.75]) & out (multiply[1.25]) to manipulat width & height portion of viewBox

{{{ [all[current]get[filter-field4]multiply[1.25]round[]] }}}

filter for pan (add[40]) to manipulate Xmin (origin) & Ymin (origin) portion of viewBox

{{{ [all[current]get[filter-field1]add[40]] }}}

Screenshots show the controls (upper right) used with a map as well as checkbox widgets for building the svg with layers. First using the normal button widgets, second using buttons with TW icons housed in a svg "frame" (the compass rose). The map key (hidden till the map key button is clicked) is revealed (another seperate svg). The 2nd screenshot has 3 svgs-- the zoom/pan compass rose & buttons, the map key and the main map.

svg map zoom pan.tid

Joshua Fontany

unread,

Apr 24, 2020, 6:17:50 PM4/24/20

to TiddlyWiki

Really neat to see how far you are taking these SVG experiments!

I am currently translating the gameicons.net icon SGVs into tiddlywiki image tiddlers.

Just figured out how to recolor multiple sub-paths with CSS selectors.

I LOVE that you can transclude SVG code and other tiddler content into other SVG objects.

Hope to share some of that soon.

Best,
Joshua F

Steven Schneider

unread,

Apr 25, 2020, 10:42:37 AM4/25/20

to TiddlyWiki

Joshua, it looks like you're working on something I'm trying to do too:

render any svg tiddler with fill and stroke set by fields and using a macro:

<$list filter=[title[whatever]]"><<showsvg tiddler="any.svg" fill={{!!fill-color}} stroke={{!!stroke-color}/>></$list>

it's way beyond my abilities, but well within my imagination :)

thanks,

//steve.

A Gloom

unread,

Apr 25, 2020, 7:36:46 PM4/25/20

to TiddlyWiki

This is how I did the viewBox by buttons with a macro

a macro for the viewBox attribuute with variable transclusins from fields set by the buttons

viewBox=<<viewBox4 $(orgn1)$ $(orgn2)$ $(whv3)$ $(whv4)$>>

\define viewBox4(origin1:"0",origin2:"0",wh1:"240",wh2:"240")

$origin1$ $origin2$ $wh1$ $wh2$
\end

<$set name="orgn1" value={{!!filter-field1}}>
<$set name="orgn2" value={{!!filter-field2}}>
<$set name="whv3" value={{!!filter-field3}}>
<$set name="whv4" value={{!!filter-field4}}>
default viewBox: <<viewBox4>> -- current viewBox: <span class="ragsspanbold"><<viewBox4 $(orgn1)$ $(orgn2)$ $(whv3)$ $(whv4)$>></span><br/>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox=<<viewBox4 $(orgn1)$ $(orgn2)$ $(whv3)$ $(whv4)$>> width="240">
</svg>
</$set></$set></$set></$set>

A Gloom

unread,

Apr 25, 2020, 8:32:10 PM4/25/20

to TiddlyWiki

<$set name="orgn1" value={{!!filter-field1}}>
<$set name="orgn2" value={{!!filter-field2}}>
<$set name="whv3" value={{!!filter-field3}}>
<$set name="whv4" value={{!!filter-field4}}>

<$vars orgn1={{!!filter-field1}} orgn2={{!!filter-field2}} whv3={{!!filter-field3}} whv4={{!!filter-field4}} >

A Gloom

unread,

Apr 27, 2020, 12:57:46 AM4/27/20

to TiddlyWiki

Joshua

I am currently translating the gameicons.net icon SGVs into tiddlywiki image tiddlers.
Just figured out how to recolor multiple sub-paths with CSS selectors.

Hope to share some of that soon.

definitely interested in seeing it

Really neat to see how far you are taking these SVG experiments!

I LOVE that you can transclude SVG code and other tiddler content into other SVG objects.

i referred to it in Discord, but we're taking the experiments even further-- in svg/embedded TW buttons: for navigating to different sections of the svg and calling modals from within the svg with text details or another svg (view) of objects in the svg. Demo will be posted today.

Then there's the svg object macro library for inserting basic svg shapes into a tiddler with a macro

A Gloom

unread,

May 4, 2020, 12:53:34 PM5/4/20

to TiddlyWiki

@Joshua

I am currently translating the gameicons.net icon SGVs into tiddlywiki image tiddlers.

I looked o,0 that's 3000 icons

just about ready to demo a 2 pane 4 svg interactive/navigatable dungeon map

1) main map svg with embedded buttons for navigating between rooms and levels, modals for text details, alternate views (including cross section view of multillevel areas-- I need to throw in a x3d vrml view)-- only one section of a much larger svg image shown at a time.

2) reveal/hide map key svg

3) cross section svg for indicating lateral and level position-- cyan bordered section moved by nav buttons in main map svg (need to add a read history list to show sections travelled through while others are concealed)

4) movement control for player position indicator (white circle/cyan dot indicator ar bottom of main map svg)-- buttons in a svg graphic framework (compass rose) for moving the player position indicator in the main map svg

see screenshot below

Also made the zoom pan tiddler for zoom and pan for huge dimensioned raster images-- taking a 1800X1600 png displayed in a svg container tiddler with zoom in/out & 8 direction pan

Reply all

Reply to author

Forward