Hi Tones, great idea! Based on your suggestion I changed your code as below:
1. color of top part is sent as macro parameter: e.g: red, #f00, or rgb(128,160,256) 2. the date value is sent as a macro parameter, so a field value can be sent too See attached a JSON containing the revised code and a test Just drag the JSON into https://tiddlywiki.com/prerelease/ and open Test tiddler See the results [image: 105_chrome.png] See the content of Test tiddler <<svg-date-field date:"20201209" width:128>><<svg-date-field date:"20200225" width:128 color:"blue">> <<svg-date-field date:"20210418" width:128 color:"orange">> <<svg-date-field date:"20200815" width:128 color:"purple">> <<svg-date-field date:"20210312" width:128 color:"black">> <$macrocall $name=svg-date-field date={{!!mydate}} width=128 color="#f18973"/> Best wishes Mohammad On Thursday, November 26, 2020 at 5:11:50 AM UTC+3:30 TW Tones wrote: > 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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/79c41605-b2da-4efe-b45d-dc10f69dbca1n%40googlegroups.com.
svg-calendars-tones.json
Description: application/json
