Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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 -- 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+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/52b845ce-ae86-426e-9864-f4eb283c3467%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
> <$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}} >
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/cf7cbe69-e3c0-46e8-b39a-05b856c134b7%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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=<>
\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: <> -- current viewBox: <>
http://www.w3.org/2000/svg;
xmlns:xlink="http://www.w3.org/1999/xlink; viewBox=<> width="240">
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/afb3d43c-5444-4b19-8cfb-ca2ac7e4296c%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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]]"><>
it's way beyond my abilities, but well within my imagination :)
thanks,
//steve.
On Friday, April 24, 2020 at 6:17:50 PM UTC-4, Joshua Fontany wrote:
>
> 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
>
> On Friday, April 24, 2020 at 7:58:04 AM UTC-7, A Gloom wrote:
>>
>> 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.
>>
>> [image: zoompanmap.jpg]
>>
>> [image: zoompanmap2.jpg]
>>
>>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/384d9827-443c-4f28-89ed-1c8f00f0dbd3%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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
On Friday, April 24, 2020 at 7:58:04 AM UTC-7, A Gloom wrote:
>
> 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.
>
> [image: zoompanmap.jpg]
>
> [image: zoompanmap2.jpg]
>
>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/23cfbd12-3773-4166-be1d-4d158faa9bb6%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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 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 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. -- 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+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/845f439d-5e1a-42f2-9002-5d39e26c3982%40googlegroups.com. svgatargettesting.json Description: application/json
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
Just really diving into SVGs in TiddlyWiki myself. This is awesome work!
Best,
Joshua Fontany
On Monday, April 20, 2020 at 9:12:35 AM UTC-7, Jeremy Ruston wrote:
>
> Hi A Gloom
>
> 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.
>
>
> No, TW will still detect the change to the document fragment and respond
> accordingly.
>
> Or the svg 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
>
>
> 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...
>
>
> --
> 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 tiddl...@googlegroups.com .
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywiki/c8d1cf24-4768-4cc3-97d5-19d4150b5ad5%40googlegroups.com
>
>
> .
>
>
>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/0dec15d6-724a-45c4-b46b-eb03807366ce%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
Hi A Gloom
> 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.
No, TW will still detect the change to the document fragment and respond
accordingly.
> Or the svg 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
>
> 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...
>
>
> --
> 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+unsubscr...@googlegroups.com
> .
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywiki/c8d1cf24-4768-4cc3-97d5-19d4150b5ad5%40googlegroups.com
>
> .
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/488CA6AF-05D1-4C9D-8B81-911C5D4740B3%40gmail.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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 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.
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...
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c8d1cf24-4768-4cc3-97d5-19d4150b5ad5%40googlegroups.com.
Re: [tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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 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.
>
>
>
>
>
> http://www.w3.org/2000/svg; viewBox="38 -2 122 82 " width="240">
>
>
>
>
>
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml; style="">{{svg compup button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg compdwn button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg complft button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg comprght button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg compzin button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg comprel button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg compzout button}}
>
>
> http://www.w3.org/1999/xhtml;>
> http://www.w3.org/1999/xhtml;>{{svg compcent button}}
>
>
>
> --
> 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+unsubscr...@googlegroups.com
> .
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywiki/89b1d2c5-1ddb-4f03-9d23-859f9de31c7e%40googlegroups.com
>
> .
>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/BABEEED5-ED29-4A71-8760-9D09CFD202C6%40gmail.com.
[tw5] Live Demo: SVG, embedded buttons controlling animations, audio, other widgets embedded
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). -- 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+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c298284b-4493-4b6e-a6d5-f8adc0e7d26c%40googlegroups.com.
