A Gloom
Apr 27, 2020, 4:55:36 AM4/27/20
to TiddlyWiki
To generate basic svg shapes withotut using svg tiddlers or icons, colored independently of TW svg themeing, for inserting into tiddlers or using as custom bullet points– see example list widgets below.
Polygons and similiar uniform symmetrical shapes like stars could be macrofied.
To make into macros, copy each definiton, paste into individual tiddlers litle them as fits your TW's title naming convention and tag them $:/tags/Macro
Still to be done: applying TW button and/or svg classes – leaving color parameter of macro empty and having a tc class parameter should apply TW icon colors
CIRCLE MACRO:
actual macro <<circlesvg "40" "20" "cyan">> -
format circlesvg "total width" "half the total width (for radius of the circle)" "color" – * all numbers are pixels, color is html color name*
SQUARE MACRO:
actual macro <<squaresvg "40" "cyan">> -
format squaresvg "width/height" "color" – * all numbers are pixels, color is html color name*
RECTANGLE MACRO:
actual macro <<rectanglesvg "40" "20" "cyan">> -
format rectanglesvg "width" "height" "color" – * all numbers are pixels, color is html color name*
OVAL MACRO:
Polygons and similiar uniform symmetrical shapes like stars could be macrofied.
To make into macros, copy each definiton, paste into individual tiddlers litle them as fits your TW's title naming convention and tag them $:/tags/Macro
Still to be done: applying TW button and/or svg classes – leaving color parameter of macro empty and having a tc class parameter should apply TW icon colors
CIRCLE MACRO:
\define circlesvg(width,radius,color)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 $width$ $width$" width=$width$>
<circle cx=$radius$ cy=$radius$ r=$radius$ fill=$color$ stroke="none"/>
</svg>
\endformat circlesvg "total width" "half the total width (for radius of the circle)" "color" – * all numbers are pixels, color is html color name*
SQUARE MACRO:
\define squaresvg(width,color)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 $width$ $width$" width=$width$>
<rect x="0" y="0" width=$width$ height=$width$ fill=$color$ stroke="none"/>
</svg>
\end format squaresvg "width/height" "color" – * all numbers are pixels, color is html color name*
RECTANGLE MACRO:
\define rectanglesvg(width,height,color)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 $width$ $height$" width=$width$>
<rect x="0" y="0" width=$width$ height=$height$ fill=$color$ stroke="none"/>
</svg>
\end actual macro <<rectanglesvg "40" "20" "cyan">> -
format rectanglesvg "width" "height" "color" – * all numbers are pixels, color is html color name*
OVAL MACRO:
\define ovalsvg(width,height,ovalhalfW,ovalhalfH,color)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 $width$ $height$" width=$width$>
<ellipse cx="$ovalhalfW$" cy=$ovalhalfH$ rx=$ovalhalfW$ ry=$ovalhalfH$ fill=$color$ stroke="none"/>
</svg>
\endactual macro <<ovalsvg "40" "20" "20" "10" "cyan">> -
format ovalsvg "total wifth" "total height" "half width" "half height" "color" – * all numbers are pixels, color is html color name*
format ovalsvg "total wifth" "total height" "half width" "half height" "color" – * all numbers are pixels, color is html color name*
Joshua Fontany
Apr 27, 2020, 6:32:05 PM4/27/20
to TiddlyWiki
Saved, nice work!
Best,
Joshua F
Best,
Joshua F
Mohammad
Apr 28, 2020, 3:32:30 AM4/28/20
to TiddlyWiki
Hi A Gloom,
Great stuff!
One question why you add the xmlns in <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 $width$ $height$" width=$width$>
Have a look here: https://kookma.github.io/TW-Scripts/#Create%20Svg%20Icons%20Using%20Macro
Have a look here: https://kookma.github.io/TW-Scripts/#Create%20Svg%20Icons%20Using%20Macro
--Mohammad
Added to TW-Scripts
A Gloom
Apr 28, 2020, 4:01:29 PM4/28/20
to TiddlyWiki
@Mohammad
Good eye on spotting that. I keep the namespace (xmins) in my svg's for when I export them as regular external svg's-- I have a custom exporter that saves the tiddler as plain text with a .svg extension that creates an svg that works outside of the wiki (browsers require the xmins if its a standalone file). I create quite a few of my external svg's In TW now-- only using Inkscape or Gimp for complex paths. Many times I'll take Inkscape or Gimp svg's into TW to finish them. I can create paths with curves with TW-- I have learned the cryptic code of paths and can create paths with a text editor-- working procedurally with svg's allow me to keep working with graphics otherwise I would have to give up working on them-- i have yer to hear of anyone working on graphics with a screen reader.
@Joshua
you like those macros-- you wiill like these then-- macros to easily insert wiki widgets into a svg
details below, attached demo, or live here: http://pyewackit.net/ash/empty1.html#button%20for%20svg%20macro%20demo
To insert a button or tiddler or just a block of multi-line text into a svg you can:
use this code inside the svg:
<foreignObject x="10" y="10" width="20" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="view area/item"><$action-sendmessage $message="tm-modal" $param="modal title"/>{{button tiddler title}}
</$button></div>
</body></foreignObject>
or if you want not be restricted to using button tiddlers you can make a macro for a general button framework where you can alter icon used or actions preformed with a macro--
so instead of having 20 separate button tiddlers for using in the svg, you can use the macro with however many variations in parameters as you need.
MACRO: BUTTON FOR ACTIONS:
such as setting fields for altering the svg viewBox
\define buttonforsvg(bsx,bsh,buttimg,bact)
<foreignObject x=$bsx$ y=$bsh$ width="20" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="Go to next room">$bact$
{{$buttimg$}}
</$button></div>
</body></foreignObject>
\end
You can replace the nested action widget with the buton widget set or actions parameters.
<<buttonforsvg "160" "103" "$:/core/images/right-arrow" """<$action-setfield filter-field0="200 0 200 200" />""">>
1) button x axis position
use this code inside the svg:
<foreignObject x="10" y="10" width="20" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="view area/item"><$action-sendmessage $message="tm-modal" $param="modal title"/>{{button tiddler title}}
</$button></div>
</body></foreignObject>
or if you want not be restricted to using button tiddlers you can make a macro for a general button framework where you can alter icon used or actions preformed with a macro--
so instead of having 20 separate button tiddlers for using in the svg, you can use the macro with however many variations in parameters as you need.
MACRO: BUTTON FOR ACTIONS:
such as setting fields for altering the svg viewBox
\define buttonforsvg(bsx,bsh,buttimg,bact)
<foreignObject x=$bsx$ y=$bsh$ width="20" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="Go to next room">$bact$
{{$buttimg$}}
</$button></div>
</body></foreignObject>
\end
You can replace the nested action widget with the buton widget set or actions parameters.
<<buttonforsvg "160" "103" "$:/core/images/right-arrow" """<$action-setfield filter-field0="200 0 200 200" />""">>
1) button x axis position
2) y axis position
3) TW icon (or other image) name or font character 4) button action (a nested action widget)
MACRO: BUTTON FOR OPENING A MODAL
\define buttonformodalsvg(bsx,bsh,modaltidd,buttimg)
<foreignObject x=$bsx$ y=$bsh$ width="20" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="view area/item"><$action-sendmessage $message="tm-modal" $param="$modaltidd$"/>{{$buttimg$}}
</$button></div>
</body></foreignObject>
\end
<<buttonmodalforsvg "100" "103" "Courtyard stairs 1" "$:/core/images/info-button">>
1) button x axis position
MACRO: BUTTON FOR OPENING A MODAL
\define buttonformodalsvg(bsx,bsh,modaltidd,buttimg)
<foreignObject x=$bsx$ y=$bsh$ width="20" height="20">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<$button class="tc-btn-rounded" style="vertical-align:top;" tooltip="view area/item"><$action-sendmessage $message="tm-modal" $param="$modaltidd$"/>{{$buttimg$}}
</$button></div>
</body></foreignObject>
\end
<<buttonmodalforsvg "100" "103" "Courtyard stairs 1" "$:/core/images/info-button">>
1) button x axis position
2) y axis position
3) title of modal tiddler
4) TW icon (or other image) name or font character
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox={{!!filter-field0}} width="200">
<rect x="1" y="1" width="198" height="198"stroke="cyan" stroke-width="2"/>
<rect x="201" y="1" width="198" height="198" stroke="orange" stroke-width="2"/>
<text x="20" y="20" style="fill:white;">SVG SECTION 1</text>
<text x="20" y="50" style="fill:white;">click right arrow button</text>
<text x="20" y="70" style="fill:white;">below</text>
<text x="20" y="100" style="fill:white;">Modal button</text>
<text x="220" y="20" style="fill:white;">SVG SECTION 2</text>
<text x="220" y="50" style="fill:white;">click left arrow button</text>
<!-- TW MACROS -->
<<buttonmodalforsvg "100" "103" """Courtyard stairs 1""" "$:/core/images/info-button">>
<<buttonforsvg "160" "60" "$:/core/images/right-arrow" """<$action-setfield filter-field0="200 0 200 200" />""">>
<<buttonforsvg "360" "60" "$:/core/images/left-arrow" """<$action-setfield filter-field0="0 0 200 200" />""">>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox={{!!filter-field0}} width="200">
<rect x="1" y="1" width="198" height="198"stroke="cyan" stroke-width="2"/>
<rect x="201" y="1" width="198" height="198" stroke="orange" stroke-width="2"/>
<text x="20" y="20" style="fill:white;">SVG SECTION 1</text>
<text x="20" y="50" style="fill:white;">click right arrow button</text>
<text x="20" y="70" style="fill:white;">below</text>
<text x="20" y="100" style="fill:white;">Modal button</text>
<text x="220" y="20" style="fill:white;">SVG SECTION 2</text>
<text x="220" y="50" style="fill:white;">click left arrow button</text>
<!-- TW MACROS -->
<<buttonmodalforsvg "100" "103" """Courtyard stairs 1""" "$:/core/images/info-button">>
<<buttonforsvg "160" "60" "$:/core/images/right-arrow" """<$action-setfield filter-field0="200 0 200 200" />""">>
<<buttonforsvg "360" "60" "$:/core/images/left-arrow" """<$action-setfield filter-field0="0 0 200 200" />""">>
</svg>
See the dungeon map navigator with embedded navigation and modal buttons in the SVG Live Demo thread
Riz
Apr 28, 2020, 4:20:42 PM4/28/20
to TiddlyWiki
With a little work tiddlywiki community can develop this concept into a charting library. There might be takers in the quantifiedself followers for a programmable editor with a charting library.
A Gloom
Apr 28, 2020, 10:57:32 PM4/28/20
to TiddlyWiki
Riz
With a little work tiddlywiki community can develop this concept into a charting library. There might be takers in the quantifiedself followers for a programmable editor with a charting library.
Definitely. But I made the mistake of posting it ina thread that isn't of interest. I'm taking it and other tricks and aiming to the opposite of convention, Convention is that svg's are looked at like other content, text and images-- something TW uses. I'm making svg's that use TW and its features. So the main "UI" is the svg and not TW-- like a map UI that utilizes TW's features and content to present everything in the map. All toward the goal of having a full screen video game UI for TW-- everythng transcluded into the game UI all without using the sidebar. I'm about to show Joshua a svg map that has navigation control and presentation of images and tifddlers in modals.
A Gloom
May 7, 2020, 8:03:42 AM5/7/20
to TiddlyWiki
svg shapes macro adapted for use in a svg annotation overlay for raster images (or html/pdf using forreign object underlying object/iframe layer)
\define circleOL(xpos,ypos,radius,fill,border,borderw)
<circle cx=$xpos$ cy=$ypos$ r=$radius$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define squareOL(xpos,ypos,width,fill,border,borderw)
<rect x=$xpos$ y=$ypos$ width=$width$ height=$width$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define rectangleOL(xpos,ypos,width,height,fill,border,borderw)
<rect x=$xpos$ y=$ypos$ width=$width$ height=$height$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define ovalOL(xpos,ypos,width,height,fill,border,borderw)
<ellipse cx="$xpos$" cy=$ypos$ rx=$width$ ry=$height$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define lineOL(xpos,ypos,xpos2,ypos2,linecol,linew)
<line x1=$xpos$ y1=$ypos$ x2=$xpos2$ y2=$ypos2$ stroke=$linecol$ stroke-width=$linew$/>
\end
\define textOL(xpos,ypos,fill,text)
<text x="$xpos$" y=$ypos$ fill=$fill$>$text$</text>
\end
<circle cx=$xpos$ cy=$ypos$ r=$radius$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define squareOL(xpos,ypos,width,fill,border,borderw)
<rect x=$xpos$ y=$ypos$ width=$width$ height=$width$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define rectangleOL(xpos,ypos,width,height,fill,border,borderw)
<rect x=$xpos$ y=$ypos$ width=$width$ height=$height$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define ovalOL(xpos,ypos,width,height,fill,border,borderw)
<ellipse cx="$xpos$" cy=$ypos$ rx=$width$ ry=$height$ fill=$fill$ stroke=$border$ stroke-width=$borderw$/>
\end
\define lineOL(xpos,ypos,xpos2,ypos2,linecol,linew)
<line x1=$xpos$ y1=$ypos$ x2=$xpos2$ y2=$ypos2$ stroke=$linecol$ stroke-width=$linew$/>
\end
\define textOL(xpos,ypos,fill,text)
<text x="$xpos$" y=$ypos$ fill=$fill$>$text$</text>
\end
SVG SHELL
<svg viewBox="0 0 400 200" width="" height="">
<!-- this is the shell to hold the underlying raster image and overlying annotations, viewBox detemines the image size 1st number is starting point on x up/down axis 2nd number y right to left axis 3rd number the ending point on x axis pixels from starting point 4th number the ending point on y axis pixels from starting point-->
<!-- rect eleemnt for background color and svg border can be removed -->
<rect x="0" y="0" width="399" height="199" fill="black" stroke="white" stroke-width="2"/>
<!-- 2 text elements below are for illustrative purposes only can be removed -->
<text x="50" y="50" stroke="white" font-size="50px">UNDERLYING</text>
<text x="50" y="150" stroke="white" font-size="50px">RASTER IMAGE</text>
<!-- the underlying raster image(s) jpg's etc multiple can be inserted each in its own image tag image tags MUST BE FIRST in listing order -->
<image href="file:///D:/file.jpg" x="0" y="0" width="100%"/>
<!-- overlay annotations the svg overlay shapes macros or normal svg elements will go AFTER the image tag(s) holding the raster images jpg's etc so the annotations are on top of the raster image(s) -->
<!-- outlined shapes -->
<<circleOL "66" "30" "25" "none" "cyan" "3">>
<<squareOL "114" "10" "50" "none" "orange" "3">>
<<rectangleOL "190" "5" "100" "50" "none" "pink" "3">>
<<ovalOL "310" "35" "50" "25" "none" "white" "3">>
<!-- solid shapes -->
<<circleOL "66" "100" "10" "cyan" "cyan" "3">>
<<squareOL "114" "110" "50" "blue" "cyan" "3">>
<<rectangleOL "235" "115" "50" "20" "red" "orange" "3">>
<<ovalOL "325" "135" "25" "12" "green" "lime" "3">>
<<lineOL "50" "155" "390" "155" "cyan" "4">>
<<textOL "300" "170" "cyan" "line macro">>
</svg>
Macros only work inside a svg or a tiddler containing the svg shell above.
<svg viewBox="0 0 400 200" width="" height="">
<!-- this is the shell to hold the underlying raster image and overlying annotations, viewBox detemines the image size 1st number is starting point on x up/down axis 2nd number y right to left axis 3rd number the ending point on x axis pixels from starting point 4th number the ending point on y axis pixels from starting point-->
<!-- rect eleemnt for background color and svg border can be removed -->
<rect x="0" y="0" width="399" height="199" fill="black" stroke="white" stroke-width="2"/>
<!-- 2 text elements below are for illustrative purposes only can be removed -->
<text x="50" y="50" stroke="white" font-size="50px">UNDERLYING</text>
<text x="50" y="150" stroke="white" font-size="50px">RASTER IMAGE</text>
<!-- the underlying raster image(s) jpg's etc multiple can be inserted each in its own image tag image tags MUST BE FIRST in listing order -->
<image href="file:///D:/file.jpg" x="0" y="0" width="100%"/>
<!-- overlay annotations the svg overlay shapes macros or normal svg elements will go AFTER the image tag(s) holding the raster images jpg's etc so the annotations are on top of the raster image(s) -->
<!-- outlined shapes -->
<<circleOL "66" "30" "25" "none" "cyan" "3">>
<<squareOL "114" "10" "50" "none" "orange" "3">>
<<rectangleOL "190" "5" "100" "50" "none" "pink" "3">>
<<ovalOL "310" "35" "50" "25" "none" "white" "3">>
<!-- solid shapes -->
<<circleOL "66" "100" "10" "cyan" "cyan" "3">>
<<squareOL "114" "110" "50" "blue" "cyan" "3">>
<<rectangleOL "235" "115" "50" "20" "red" "orange" "3">>
<<ovalOL "325" "135" "25" "12" "green" "lime" "3">>
<<lineOL "50" "155" "390" "155" "cyan" "4">>
<<textOL "300" "170" "cyan" "line macro">>
</svg>
Macros only work inside a svg or a tiddler containing the svg shell above.
Reply all
Reply to author
Forward
0 new messages