Video demo: LifešŸ”… (my personal trackers)

With great thanks to EricShulman’s TiddlyTools/Time/ParseDate.jss (without which this would be an impossibility for me), I built myself a Tiddlywiki app that encompasses and compacts what I need from a…

(1) habit & expense tracker
(2) journal
(3) diet, weight & workout tracker, and
(4) period tracker (permiso, gentlemen)

As I don’t use a laptop or desktop other than for work, all my computing is done on mobile with Tiddloid. That is why this here app is really mobile-first. (I would also like to present my general mobile Tiddlywiki setup sometime in the future but hiding personal stuff before presenting is a pain in the butt)

As these are all just system tiddlers talking to each other, and not a packaged plugin, I hesitate to share even a barebones demo site, so please be kind to just a video :pray:

Thank you so much Jeremy, EricShulman, Tiddloid dev, and Tiddlywiki devs!

(palette: modified Dracula Palette)

13 Likes

That’s awesome! It’s inspiring to see how you creatively combined tools to build such a comprehensive, mobile-friendly Tiddlywiki app. Thanks for sharing your journey!

If, by any chance, you’re using full wiki encryption, I’d like to know how big your wiki is, what CPU does your mobile device have and how many seconds approx does a wiki save take.

Hi! Unfortunately I don’t use encryption.
It’s a 4.06mb single-file wiki, initial startup takes about 2.5~3 seconds, after which it stays as a background app and initiates instantly until I manually force close the Tiddloid app.

Believe it or not I’m still using my old unmodified Galaxy S9 on Android10

1 Like

Thank you! I realized how differently people use their TWs and no one size fits all, so I just searched for solutions to specific problems only I might have :grin: EricShulman’s stuff really helped me with these! I love tinkering with his stuff but I do understand why they are not part of the core.

any chance you might consider making an empty copy for others to use as a template on tiddlyhost?

I think it would be fairly popular since the mobile friendly UI is very nicely made, among other well made aspects.

(also seeing all those exersizes made my legs sore 🫠 I will stick to sitting on my bum for now)

1 Like

this is great!! if you ever decide to share an empty copy of this i think that would be super helpful for people, i’d definitely try it out! :heart_eyes:

1 Like

Oh, thanks for the interest!!!

Once I’ve cleaned it up some more I may upload an empty version, for the main purpose of snapshotting this project (and for others to use, reuse and modify, of course).

Although I think it may be too-multipurpose-y right now.

So… not any time soon, I suppose. I’ve changed the way I tiddlywiki-markup through the months I built this, so legibility may be an issue… but I do wish to get there!

As for the weight training exercises… I’m still in the process of hyping myself up to do them! Thus, the need for a habit tracker…haha! Martial arts are more my jam :sweat_smile:

1 Like

well later is better than never :smiley:

1 Like

Thank you so much!
I hope to clean up the code soon so I can share an empty version.
An intuitive mobile experience is very important to me so I hope I can make the setup process easy for possible users too!

2 Likes

This is very cool. Some questions:

  • The ā€œcommentsā€ style UI (with boxing gloves and other emoji in circles), what’s this used for? Journaling?
  • How did you build the calendar?
  • What engine does the graphing / plotting of weight?
  • Is this a custom layout? A special ā€œlife trackingā€ tiddler? Something else?
  • What is your sync story with this? Do you ever edit on another device?

A really creative use of TiddlyWiki!

Thank you! No other program or app can really do for me what Tiddlywiki does for free! I would have had to use multiple android apps to have something like this.

The ā€œcommentsā€ style UI (with boxing gloves and other emoji in circles), what’s this used for? Journaling?

Yes, I’m trying to take note of my progresses for different things, in the freeform way of journaling (I found that a yes/no functionality is not applicable to every habit I try to track, and I wanted to see these different journal topics in a stream-like timeline)

How did you build the calendar?

I used EricShulman’s TiddlyTools/Time/ParseDate.js as the base for all date-related stuff. I built the calendar datepicker and days/months scroller upon this, using TW widgets and some specific grid-positioning (based on the date’s weekday) by CSS.

What engine does the graphing / plotting of weight?

It is <$wikify>-ed CSS :sweat_smile:, here’s a sample of how I did it:


<$wikify name="clip-path" text="""

<$list filter="[list<db>nsort[]]" variable="x">

<$list filter="[<db>getindex<x>]" variable="y">

<$let

top={{{ [<y>subtract<min>] }}}

bottom={{{ [<max>subtract<min>] }}}

>

{{{ [list<db>nsort[]allbefore<x>count[]divide<count>multiply[100]] % +[join[]] }}} {{{ [<top>divide<bottom>subtract[1]] +[abs[]multiply[100]] % +[join[]] }}},

</$let></$list> </$list> 100% 100%, 0 100%

""">

<div class="lg-datum lg-datum-color" style={{{ clip-path: polygon( [<clip-path>] ); +[join[ ]] }}}> </div>

<div class="lg-datum lg-datum-mask" style={{{ clip-path: polygon( [<clip-path>] ); +[join[ ]] }}}> </div>

...

this produces a variable=clip-path that I use later on in the .lg-datum div

Is this a custom layout? A special ā€œlife trackingā€ tiddler? Something else?

It’s just a tiddler with all its contents a relationship between system tiddlers. A button within it allows me to set this specific tiddler to ā€˜full-screen’ so it acts like an app, and my startup is set to this tiddler specifically

What is your sync story with this? Do you ever edit on another device?

The rare instances I needed to edit on a pc I e-mail myself the single wiki file :sweat_smile:

Trully I’m waiting for this kind of workflow: a single TW locally stored on my phone (syncing to a google drive folder), editable in Tiddloid, that when saved, will also save to a Tiddlyhost site… so I can edit it in any PC browser that will also update the google drive synced wiki… and so on… basically I wish there’s an integration between Tiddloid, google drive and tiddlyhost.

Pipe dream, I know :pensive:

4 Likes