Mohammad,
Inspirational. Especially the idea of dynamic svg's that respond to content
that can become buttons
Inspired by your effort, I built a version that shows the year, and uses
now, unless a fieldname is provided. The fieldname needs to contain a date
according to the date serial number.
- It uses the new format:date operator on the *pre-release.*
- You can use partial serial numbers eg; 201911021200
- I am keen to pass the top fill colour as well, as one could use this
to distinguish created/modified now etc...
- I plan to make this into an alternative for the new Journal button
which also shows if a journal entry exists.
Regards
Tones
\define svg-date-field(width:"", height:"" fieldname)
<$set name=date-value value={{!!$fieldname$}} emptyValue=<<now
"YYYY0MM0DD0hh0mm0ss0XXX">> >
<$set name=month value={{{ [<date-value>format:date[mmm]] }}}>
<$set name=day value={{{ [<date-value>format:date[DD]] }}}>
<$set name=dow value={{{ [<date-value>format:date[DDD]] }}}>
<$set name=year value={{{ [<date-value>format:date[YYYY]] }}}>
<svg xmlns="http://www.w3.org/2000/svg";
aria-label="Calendar" role="img"
viewBox="0 0 512 512" width="$width$" height="$height$">
<path d="M512 455c0 32-25 57-57 57H57c-32 0-57-25-57-57V128c0-31 25-57
57-57h398c32 0 57 26 57 57z" fill="#e0e7ec"/>
<path d="M484 0h-47c2 4 4 9 4 14a28 28 0 1 1-53-14H124c3 4 4 9 4 14A28 28 0
1 1 75 0H28C13 0 0 13 0 28v157h512V28c0-15-13-28-28-28z" fill="#dd2f45"/>
<!--g fill="#f3aab9">
<circle cx="470" cy="142" r="14"/>
<circle cx="470" cy="100" r="14"/>
<circle cx="427" cy="142" r="14"/>
<circle cx="427" cy="100" r="14"/>
<circle cx="384" cy="142" r="14"/>
<circle cx="384" cy="100" r="14"/>
</g-->
<text id="month"
x="32"
y="164"
fill="#fff"
font-family="monospace"
font-size="140px"
style="text-anchor: left"><<month>></text>
<text id="year"
x="300"
y="164"
fill="#fff"
font-family="monospace"
font-size="80px"
style="text-anchor: right"><<year>></text>
<text id="day"
x="256"
y="400"
fill="#66757f"
font-family="monospace"
font-size="256px"
style="text-anchor: middle"><<day>></text>
<text id="weekday"
x="256"
y="480"
fill="#66757f"
font-family="monospace"
font-size="64px"
style="text-anchor: middle"><<dow>></text>
</svg>
</$set></$set></$set></$set>
\end
<<svg-date-field 64 64>>
<<svg-date-field 64 64 test-date>>
On Thursday, 26 November 2020 at 10:07:17 UTC+11 TW Tones wrote:
> Mohammad,
>
> I love it. Especially in the sidebar!
>
> Tones
>
> On Thursday, 26 November 2020 at 10:00:36 UTC+11 Mohammad wrote:
>
>> The tiddler of above post is attached here!
>>
>> It seems Google group does not allow to attached this kind of svg! So I
>> zipped the tiddler.
>> Unzip and then drag into your wiki or into https://tiddlywiki.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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/6360e396-39d5-494e-b80b-f68a3b6dfdban%40googlegroups.com.
