Mohammad, Thanks for sharing back again. I did something similar. Including providing buttons and a tooltip with the date displayed.
One idea is to determine the days from now and have a simple line in the image that hints at how old the date is, forward or back. In thought if a Journal tiddler existed with the matching journal-date field I could have the icon have black dots at the top to indicate its exists, other wise click to create a journal tiddler for the given date. Also adding a viewtemplate for journal tiddlers that shows other tiddlers with a matching date field. I included a little code to determine the color by default from the field name Red = Now (no field) Blue = created Green Modified Black = other fieldnames Still a work in progress, but as I have called for before I value ways to bring information forward in compact ways and within existing elements. Regards Tones On Thursday, 26 November 2020 at 17:33:44 UTC+11 Atronoush wrote: > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a9ab17c2-30ef-47a0-8af1-8ae85bccdbf3n%40googlegroups.com.
