How to use now macro to create a clock

#1

Is it possible to use the now macro to create a digital clock. I know that now macro won’t update automatically. But can it be used in a button widget to update the time on pressing the button and hence act as a clock on demand

#2

@EricShulman has a lot of info about time and some clocks. TiddlyTools for TW v5.3.5 — Small Tools for Big Ideas!™

1 Like
#3

can it be used in a button widget to update the time on pressing the button and hence act as a clock on demand

Without having investigated it closer, I’d say, “but of course!? why would that not be possible?”

Have you seen Erics various time solutions? TiddlyTools for TW v5.3.5 — Small Tools for Big Ideas!™ - see Packages tab > Time tab

1 Like
#4

Hi @arunnbabu81 ,

I use:

And here is my “button” that I click to “set” a field - - ,…

<$button class="badge info">
<$action-setfield $tiddler="_Input-Temp" $field="about" $value=<<now "DDD, hh12:0mm:0ss AM">>/>
[img width=15 [United-States-icon.png]] Omer: <<now MMM,DD>> {{$:/time}}
</$button>

Note: My Button also has the time on it,… :innocent:

Before I press the button:

image
image874×62 10.5 KB

After I press the button:

image
image786×66 8.56 KB

Hop this helps,

TwN00b

1 Like
#5

This is the option I use to have a digital clock in the corner. TiddlyTools is a great resource for lots of handy functionality.

Another fun part of TiddlyTools, @arunnbabu81, is the action-timeout widget. You’ll find good uses for “do this at an interview” that this widget can enable.

1 Like
#6

First, copy these two tiddlers into your TiddlyWiki:

  • TiddlyTools/Time/action-timeout.js
    The $action-timeout widget lets you set an interrupt-driven (“automatic”) timeout to trigger other actions.
  • TiddlyTools/Time/Ticker
    This “startup” tiddler sets up a $:/temp/time/ticker tiddler that contains the current time (in milliseconds), and is automatically updated once per second (by using the $action-timeout widget above).
  • You will need to save-and-reload so that the $action-timeout widget is available for use, and also to allow the TiddlyTools/Time/Ticker to start the ticker at startup.

Then, to show a digital clock that automatically updates, you can add the following to any tiddler:

<$let tick={{$:/temp/time/ticker}}><<now "0hh:0mm:0ss">></$let>

The $let surrounding the <<now>> forces the <<now>> output to refresh each time the $:/temp/time/ticker content is updated. The result is a digital clock that updates each second.

enjoy,
-e

3 Likes
#7

Nothing fancy, but pretty simple. Put this in the body of a tiddler:

<iframe srcdoc="""<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2><div id="txt"></div></h2>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>
""" style="border:1px solid black;width:110px;height:70px;"/>

image

5 Likes
#8

Thank you all for your responses. I was checking for a wikitext solution. I knew about Eric’s and Andrew’s clocks. But thought of using the now macro if possible because it will be just a few lines of code.

Now I am confused between Eric digital clock and Charlies version. I will check which will sit pretty in my topbar and select the appropriate one. Thank you again for all the replies.

#9

But why do you need a clock in a browser window, when every OS has them by default in the OS toolbars?

#10

Only for full screen mode use

#11

I can’t take credit for that clock. I just put that code in an iframe with styling for the iframe.

Code is from here: W3Schools Tryit Editor

There isn’t much of a comparison. Eric’s plugin is the cat’s meow.

You only chose what I suggested if you want absolute minimalism, I.e. a very simple clock that involves just one tiny tiddler. Knowing that you can’t get a time from it to use in your TiddlyWiki actions/filters/functions/etc… (If you don’t mind playing with CSS, you can alter the look/size of it as needed.)

#12

I’m sure there are all kinds of reasons, as many as there are personalities.

It could be as simple as proximity. The clock is exactly where you want it.

It could be as simple as having more control over the look of it.

It could be that the TiddlyWiki is made to be full screen for distraction-free TiddlyWiki work, thus hiding system task bars. The system clock being hidden along with anything else, one may still want the time available right there, in the full screen TiddlyWiki, so that if one gets so focused on the TiddlyWiki work, one can still see the time and realize: “oh poop, I’ve got to go to my appointment.”

Maybe ?

2 Likes
#13

For me - I use a clock - as there is just something warm about having a custom clock that you can change as your desire changes,…

  • I think this is why having clocks in a home - in every room - is common for my family
  • Even though we all have phone’s, watches, tablets, etc.,…

Could just be me,… :slight_smile:

#14

If you’d like to show an analog clock in your TiddlyWiki, import these three TiddlyTools tiddlers:

Then, you can write <<clock analog>> (or just <<clock>>) in any tiddler content. You can adjust the size of the clock using inline CSS like this: @@font-size:50%;<<clock>>@@.

You can use <<clock digital>> for a digital clock display. The digital clock also supports an optional format parameter, like this:

<<clock digital format:"It is now hh12:0mm:0ssam on DDD, MMM DDth YYYY">>

which would show as:

It is now 12:36:40pm on Tuesday, September 3rd 2024

And… both the analog and digital clocks support an optional timezone offset parameter to show times in places other than your current locale, using UTC offset values between -12:00 and +12:00.

To see the current times in lots of places around the world, check out TiddlyTools/Time/WorldClocks.

See TiddlyTools/Time/Info for more documentation.

enjoy,
-e

2 Likes
#16

Here’s a very simple clock that only uses standard wikitext, and will automatically update whenever the TWCore triggers a refresh event:

<$let time=<<now "0hh:0mm:0ss">>><<time>></$let>

The enclosing $let widget creates a refresh dependency for the display of the time variable. When anything changes in your TiddlyWiki that causes TWCore refresh processing, the time variable is recalculated, causing the <<time>> display to be re-drawn.

TWCore refresh processing can be triggered simply by opening/closing a tiddler, showing/hiding a popup, switching between sidebar tabs, etc.

-e

#17

Thank you @EricShulman for this idea. I am using this in a button widget in my topbar and each button click will trigger a refresh and update the time.

\procedure set-clock-time()
<$let time=<<now "0hh:0mm:0ss">>>
<$action-setfield $tiddler="$:/arsheth/clock" clock-time=<<time>>/>
</$let>
\end

<$button actions=<<set-clock-time>> >
{{$:/arsheth/clock!!clock-time}}
</$button>
#18

Nicely done! …and, here’s a more compact version:

<$let time=<<now "0hh:0mm:0ss">>>
<$button set="$:/temp/clock" setTo=<<time>>><<time>></$button>
</$let>

Notes:

  • The surrounding $let causes the button display to update when ANY TWCore refresh is triggered.
  • The $button triggers a TWCore refresh by writing to $:/temp/clock.
  • By using $:/temp/clock, it doesn’t leave anything behind when the file is saved (since $:/temp tiddlers are not saved)

-e

2 Likes
#19

Thanks for providing the concise form and for the learning tips