Module - Analog Clock

Posted by leigerleiger on 1257328440|%A, %e %B %Y, %H:%M

Have you ever wanted to add an analog clock to your Wikidot site? I've just created a module that does exactly that!

First off, I'll show you the analog clock itself… I entered a few settings here, then made it into a CSI module for you. Thanks also goes to James Kanjo for this Iframe Embed page, which I couldn't have done this without!

This is the official documentation for this module. A direct copy of the documentation can be found on the Userspace Modules site.

The Clock

CSI packages site | Development blog | Edit documentation

  1. Copy and paste the code into one of your pages
  2. Then enter the values you want using the attribute table
  3. Save your page — it's that easy! :)

[[include :csi:include:analog-clock
|color=
|timezone=
|width=
|height=
|title=
]]


You can use all of these attributes, or you can delete some of them and the default values will be used instead. If you want, you could just type [[include :csi:include:analog-clock]] and it would work!

Attributes

After changing some of these settings, clear your cache (Ctrl+Shift+Del), then refresh the page (Ctrl+R) to see the changes.

Attribute Required Description Examples Default
color No A hex value for the clock's colour. color=595858
color=267F00		 color=555555
timezone No The timezone that the clock should use.
See below for a list of all supported timezones.		 timezone=AU-SA
timezone=AU-VIC
timezone=PL
timezone=US-NY
timezone=US-AL		 timezone=UMT
width No Width (x100) of the clockface. Whole numbers only. width=2 for 200px
width=3 for 300px		 width=2
height No Height (x100) of the clockface. Whole numbers only. height=2 for 200px
height=3 for 300px		 width=2
title No The text that appears beneath the clockface title=South Australia
title=Poland		 No title

Timezone selector

There are 498 possible time-zones. I suggest that you use the search function of your browser (activated by pressing Ctrl+F) to find the country and city that you live in.

Show list of all timezones

Leave a comment

Fold
This is so cool!
James KanjoJames Kanjo 1257337090|%e %b %Y, %H:%M %Z|agohover

This is very cool!

Rating: +1 +1 +1 +1 +1 +1 +1!!! … +1 +1 +1 +1 +1 +1!

λ James Kanjo | blog | photos | contact

Reply  |  Options
Unfold This is so cool! by James KanjoJames Kanjo, 1257337090|%e %b %Y, %H:%M %Z|agohover
Fold
Re: This is so cool!
leigerleiger 1257338564|%e %b %Y, %H:%M %Z|agohover

The rating module is in the sidebar :) Has been moved. It's in the "Rate/Share" section above the comments now.

Thanks for the help — I'm glad I finally got it working!!

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Last edited on 1257594815|%e %b %Y, %H:%M %Z|agohover By leiger + Show more
Reply  |  Options
Unfold Re: This is so cool! by leigerleiger, 1257338564|%e %b %Y, %H:%M %Z|agohover
Fold
Re: This is so cool!
leigerleiger 1257594776|%e %b %Y, %H:%M %Z|agohover

Was looking through the include pages in the calendar application earlier today. I don't understand half of what you've done there… but thanks to a few tricks I did understand, I was able to add in default values for each of these! :)

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold Re: This is so cool! by leigerleiger, 1257594776|%e %b %Y, %H:%M %Z|agohover
Fold
This is really cool...
BrunhildaBrunhilda 1257444897|%e %b %Y, %H:%M %Z|agohover

But…

What code should I copy and paste into one of mu pages?

EDIT: I see now. Could you give us the contents of the page :leiger:module:analog-clock ?

also, I put as a color RED, but it shows orange ??? :D

The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell

Last edited on 1257445239|%e %b %Y, %H:%M %Z|agohover By Brunhilda + Show more
Reply  |  Options
Unfold This is really cool... by BrunhildaBrunhilda, 1257444897|%e %b %Y, %H:%M %Z|agohover
Fold
Re: This is really cool...
leigerleiger 1257457001|%e %b %Y, %H:%M %Z|agohover

I'm not sure why the colour would be wrong. Are you using a 6-digit number? Because color=red will not work.

The contents of the page :leiger:module:analog-clock:

+ show block

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold Re: This is really cool... by leigerleiger, 1257457001|%e %b %Y, %H:%M %Z|agohover
Fold
BrunhildaBrunhilda 1257583450|%e %b %Y, %H:%M %Z|agohover

Thanks, Shane!!!!

The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell

Reply  |  Options
Unfold by BrunhildaBrunhilda, 1257583450|%e %b %Y, %H:%M %Z|agohover
Fold
BrunhildaBrunhilda 1257583864|%e %b %Y, %H:%M %Z|agohover

Can title be made optional? If not, how can I remove it?

Also, how did you manage to put two clocks one beside the another, and also the code beside the two clocks? If I try to put anything beside it, it doesn't allow. .. Can it be wrapped around with text, or other elements of the page?

The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell

Last edited on 1257584044|%e %b %Y, %H:%M %Z|agohover By Brunhilda + Show more
Reply  |  Options
Unfold by BrunhildaBrunhilda, 1257583864|%e %b %Y, %H:%M %Z|agohover
Fold
leigerleiger 1257588488|%e %b %Y, %H:%M %Z|agohover

Can title be made optional? If not, how can I remove it?

Good question. Try this (not sure if it will work):

title=@@@@

Also, how did you manage to put two clocks one beside the another, and also the code beside the two clocks?

I just used div blocks :)

[[div style="float:left; width:30%;"]]
**Text goes here 1**
[[/div]]

[[div style="float:left; width:30%;"]]
**Text goes here 2**
[[/div]]

[[div style="float:left; width:30%;"]]
**Text goes here 3**
[[/div]]

Result:

Text goes here 1

Text goes here 2

Text goes here 3

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold by leigerleiger, 1257588488|%e %b %Y, %H:%M %Z|agohover
Fold
leigerleiger 1257588606|%e %b %Y, %H:%M %Z|agohover

Okay, I just tested this:

title=@@@@

And it does not work. I'll have to look into the includes documentation to see if I can figure out how to make some of these things optional…

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold by leigerleiger, 1257588606|%e %b %Y, %H:%M %Z|agohover
Fold
BrunhildaBrunhilda 1257588739|%e %b %Y, %H:%M %Z|agohover

title=

It doesn't work. In order to use this, there shold be some code put in the original code, like [!-- --] and similar…

The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell

Reply  |  Options
Unfold by BrunhildaBrunhilda, 1257588739|%e %b %Y, %H:%M %Z|agohover
Fold
BrunhildaBrunhilda 1257588774|%e %b %Y, %H:%M %Z|agohover

And it does not work. I'll have to look into the includes documentation to see if I can figure out how to make some of these things optional…

Thanks!!!! :D

The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell

Reply  |  Options
Unfold by BrunhildaBrunhilda, 1257588774|%e %b %Y, %H:%M %Z|agohover
Fold
Good news!!
leigerleiger 1257594017|%e %b %Y, %H:%M %Z|agohover

I've just pushed an update. Now, none of the attributes are required, and they all have default values.

If you were to type this, it would work:

[[include :leiger:module:analog-clock ]]

It would result in a 200px by 200px clock, showing Polish time, and with no title. The colour would be gray.

So, if you don't want a title on your clock, simply don't type that attribute! =)

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold Good news!! by leigerleiger, 1257594017|%e %b %Y, %H:%M %Z|agohover
Fold
BrunhildaBrunhilda 1257595679|%e %b %Y, %H:%M %Z|agohover

Thanks, it works… Could you give me the new code from the include page?

The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt. Bertrand Russell

Reply  |  Options
Unfold by BrunhildaBrunhilda, 1257595679|%e %b %Y, %H:%M %Z|agohover
Fold
leigerleiger 1257751597|%e %b %Y, %H:%M %Z|agohover

Again — just use the same method as last time to get the code :)

Surround it with code blocks in your page source, press preview, and copy/paste what you see :)

[[code]]
[[include :leiger:module:analog-clock
|color=
|timezone=
|width=
|height=
|title=
]]
[[/code]]

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold by leigerleiger, 1257751597|%e %b %Y, %H:%M %Z|agohover
Fold
GMT ?
gerdamigerdami 1257673622|%e %b %Y, %H:%M %Z|agohover

Timezone ?
I am used to GMT+1

lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
Reply  |  Options
Unfold GMT ? by gerdamigerdami, 1257673622|%e %b %Y, %H:%M %Z|agohover
Fold
Re: GMT ?
leigerleiger 1257751467|%e %b %Y, %H:%M %Z|agohover

I think the reason this clock doesn't use GMT, is because during Daylight Saving Time (not all countries have this) the timezone changes.

By using something like PL to represent Poland and AU-SA to represent country:Australia state:South-Australia, I think that's a way of making the clock always have the correct time even if the timezone changes! :) I don't think there's any way for me to make it accept GMT as the timezone.

Gerdami… if you're not sure what to enter for your timezone, can you tell me where you live, and I'll tell you what you need to write?

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold Re: GMT ? by leigerleiger, 1257751467|%e %b %Y, %H:%M %Z|agohover
Fold
Re: GMT ?
gerdamigerdami 1257765533|%e %b %Y, %H:%M %Z|agohover

Near Pieter's Brussels, in Liege.

CET is my timezone
http://www.timeanddate.com/library/abbreviations/timezones/eu/cet.html

lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
Options
Unfold Re: GMT ? by gerdamigerdami, 1257765533|%e %b %Y, %H:%M %Z|agohover
Fold
Re: GMT ?
leigerleiger 1257767475|%e %b %Y, %H:%M %Z|agohover

What you are actually looking for: Liege, Belgium, which is BE :)

I should make a list of all of these… I think I know a way to get them off of the World Time Server website…

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Options
Unfold Re: GMT ? by leigerleiger, 1257767475|%e %b %Y, %H:%M %Z|agohover
Fold
Re: GMT ?
leigerleiger 1257768488|%e %b %Y, %H:%M %Z|agohover

Here's the full list :)

Show all 498 possible timezones

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold Re: GMT ? by leigerleiger, 1257768488|%e %b %Y, %H:%M %Z|agohover
Fold
Default timezone
leigerleiger 1257773440|%e %b %Y, %H:%M %Z|agohover

I've just changed the default time-zone from being Polish time to be UTC/GMT. It makes sense to have it as UTC, and I think it's best to change it now before too many people use the clock and expect it to be PL.

Everyone will automatically get the updates so there is no need to change any code on your end :)

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Last edited on 1257773900|%e %b %Y, %H:%M %Z|agohover By leiger + Show more
Reply  |  Options
Unfold Default timezone by leigerleiger, 1257773440|%e %b %Y, %H:%M %Z|agohover
Fold
Re: Default timezone
gerdamigerdami 1257773906|%e %b %Y, %H:%M %Z|agohover

Poland was fine with me … it indicates when the wikidot team is supposed to be working…

lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
Reply  |  Options
Unfold Re: Default timezone by gerdamigerdami, 1257773906|%e %b %Y, %H:%M %Z|agohover
Fold
Re: Default timezone
leigerleiger 1257774092|%e %b %Y, %H:%M %Z|agohover

Supposed to be working … :)

That's the reason I set it as PL originally… because it was the time the wikidot dev's used. But I thought that GMT would be more generic, and would be what most people would expect a default time-zone to be.

Well… if anyone else disagrees with this please post here. I'm willing to change it back if enough people want me to do so.

★ Read my blog ★ STE - Offline Wikidot Editor ★ Learn Java! ★ Wikidot Help & Support ★

Reply  |  Options
Unfold Re: Default timezone by leigerleiger, 1257774092|%e %b %Y, %H:%M %Z|agohover
Add a New Comment
Page tags: analog clock dev time
Please read the Legal Guidelines before using any of my work. In almost all circumstances, you should ask permission first.