Example; [image: Snag_2a5cdfe7.png]
Tones On Thursday, 26 November 2020 at 17:59:42 UTC+11 TW Tones wrote: > 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/c8ab465e-d5d6-4809-9e3a-7385094761a9n%40googlegroups.com.
