DokuWiki

It's better when it's simple

User Tools

Site Tools

Trace:
plugin:clock

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
plugin:clock [2010-09-21 22:59] – demo picture sources (most of them), new demo ryan.chappelleplugin:clock [2024-01-22 03:39] (current) – 1.99 update in preparation for 2.0 ryan-chappelle
Line 1: Line 1:
-====== clock plugin ======+====== clock Plugin ======
  
 ---- plugin ---- ---- plugin ----
 description: Display a clock in DokuWiki description: Display a clock in DokuWiki
 author     : Luis Machuca Bezzaza author     : Luis Machuca Bezzaza
-email      : luis.machuca[at]gulix.cl+email      : lambalicious [at] tuta [dot] io
 type       : syntax type       : syntax
-lastupdate : 2010-03-30 +lastupdate : 2024-01-21 
-compatible : +compatible : Weatherwax, Adora Belle, Angua, Rincewind, Anteater, Igor
 depends    :  depends    : 
 conflicts  :  conflicts  : 
Line 13: Line 13:
 tags       : time tags       : time
  
-downloadurl: http://ryan.gulix.cl/dw/_media/desarrollo/dokuwiki/dw-plugin-clock-latest.zip +downloadurl: https://chiselapp.com/user/lmachucab/repository/dokuwiki-plugin-clock/zip/trunk/clock.zip 
-bugtracker : # eg. http://github.com/ryan.chappelle/dokuwiki-plugin-noiewarning/issues +bugtracker : # eg. https://github.com/ryan.chappelle/dokuwiki-plugin-noiewarning/issues 
-sourcerepo : # eg. http://github.com/ryan.chappelle/dokuwiki-plugin-noiewarning/ +sourcerepo : https://chiselapp.com/user/lmachucab/repository/dokuwiki-plugin-clock/index 
-donationurl: +donationurl: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=T44AQDXJQJTJQ&source=url
 ---- ----
  
-^  No longer under //experimental//!   ^+The **clock plugin** provides a [[wp>clock|visual representation of time]] in your DokuWiki pages, using nothing more than some CSS and JavaScript... and voilà: the current time, in your browser. This plugin is more useful if combined with a sidebar-enabled template like [[:template:arctic]].
  
-Welcome to ''clock'', a simple yet functional attempt to display a [[wp>clock]] inside DokuWiki. Using only the basis of PHP and JavaScript, as well as some pretty basic CSS styling... and voilà: the current time, in your browser. +Feel free to use and comment (see =>[[#Discussion]]).
  
-===== Syntax =====+^ Quick Questions:\\ So you want to...   ^^ 
 +| ...install this plugin?       | → [[#Download and Installation|Instructions]]  | 
 +| ...configure this plugin?     | → [[#Configuration]]  | 
 +| ...see the plugin in action?  | → [[#Demo]]  | 
 +| ...read a legal disclaimer?   | → [[#Legalese]]  | 
 +^  No longer under //experimental//!   ^^ 
 + 
 +===== Download and Installation ===== 
 + 
 +Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually. 
 + 
 +===== Usage =====
  
 Just write __in a line of its own__: Just write __in a line of its own__:
Line 34: Line 45:
   * Configuration is available via the **Configuration Manager**.   * Configuration is available via the **Configuration Manager**.
  
-===== Download and Installation ===== +==== Demo ====
- +
-To download and install this plugin point your DokuWiki's [[plugin:plugin|Plugin Manager]] to the URL indicated in the download above. That link will always point to the __latest release__. +
- +
-It is //recommended// that you clean your Wiki's cache after installing this plugin.+
  
-To see how to enable the fonts for the different styles, see [[#Manual Styling]].+**Want to see the plugin in action?**
  
-===== Other Details ===== +:!: The [[http://ryan.gulix.cl/dw/desarrollo/dokuwiki/plugin-clock|(Neo) Demo site]] will show you how does the plugin work, live((although, actually, it's the wiki //navigation// that functions as the demo for this plugin)).
- +
-==== Demo ==== +
- +
-:!: The [[http://ryan.gulix.cl/dw/desarrollo/dokuwiki/plugin-clock|(Neo) Demo site]] will show you how does the plugin work, live (although, actually, it's the wiki //navigation// that functions as the demo for this plugin).+
  
 Note language is **Spanish** but online translators shall do a good job with it. Note language is **Spanish** but online translators shall do a good job with it.
  
->Another demo site: http://ryan.gulix.cl/tests/doku.php/clock +**Snapshots**:
  
 ^  {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-01.png?nolink}}  ^ ^  {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-01.png?nolink}}  ^
 |    An example visualization of the ''clock'' plugin\\ (using a custom CSS style to match [[wp>24 (TV series)|"24"]]'s digital clock) | |    An example visualization of the ''clock'' plugin\\ (using a custom CSS style to match [[wp>24 (TV series)|"24"]]'s digital clock) |
 +
 +=== Styles ===
  
 | {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-d_default.png}} |Plugin, with default style.  |  | {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-d_default.png}} |Plugin, with default style.  | 
Line 61: Line 65:
 | {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-d_bluebox.png}} |Plugin, with the "bluebox" style.  | | {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-d_bluebox.png}} |Plugin, with the "bluebox" style.  |
  
 +=== Sneak Peek ===
  
-^ Possible future feature: ^ +| {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-analog_demo.png?nolink}}  | 
-| {{http://ryan.gulix.cl/archivos/dokuwiki/scr-plugin-clock-analog_demo.png?nolink}} | +|  Analog clocks...\\ the possible future of the clock plugin?                        |
-| Plugin, with //analog clock// style  |+
  
-==== The Helpbar ====+===== Configuration =====
  
-This version of the plugin implements a __help bar__ that displays the wiki link selected in the Plugin Configuration options (under ''infopage''), or a link to this very page if that variable is left empty. If you want to remove the help bar, just set the variable ''helpbar'' to ''false'' in your local.php file.+The plugin is configured via the **Configuration Manager**. Here is a quick run through the most important options:
  
 +  * ''clock_type'': This option sets what kind of clock is used. Currently only the option ''text'' is supported.
 +    * ''text'': A normal text clock.
 +    * ''binary'': A binary clock. :!: Currently unimplemented.
 +  * ''clock_style'': This option is set to a class name used to style the plugin. Check [[#Styles|style]] for examples.
 +  * ''helpbar'': If this option is enabled, [[#The Helpbar]] is displayed alongside / below the plugin. By default the helpbar contains a link to the page specified by the ''infopage'' option, or to the official plugin page (ie.: this one ;) ), but it can be changed to almost anything.
 +  * ''infopage'': this option specifies the location ([[:pagename]]) of a wikipage containing information for this plugin. 
 +    * By default it points to '':wiki:clock'', which must be created by the admin.
 +    * Setting it to an empty string points the info link to this very page.
 +  * ''nojs_fallback'': This options specifies what to do if JavaScript is not enabled in the client: then the clock shows either the time as seen by the server, or a standard message with the name of the plugin, both static (ie.: non-animated).
 +  * ''font_fallback'': This options sets the fallback CSS family for the font style in case you have specified a font-family in your CSS configuration and the clients can't find it. It can be set to any of the standard CSS families.
  
-==== Manual Styling ====+:!: To configure the clock styles or add new ones, check the section on [[#Customization]].
  
-:?: I installed the plugin but the //aradio// and //tv24// styles won't show with the adequate typefaces?+===== Other Details =====
  
-:!: The //aradio// and //tv24// styles require the client's browser to support CSS3 ''@font-face'' method to load external typefaces. Unfortunately only some browsers support this feature with the necessary degree of completeness (tested in Firefox 3.5 and Opera 10.10 at the moment of this writing). +==== The Helpbar ====
  
-The instructions to enable these fonts in your own DokuWiki installation, __assuming you already have them__, is as follows:+This version of the plugin implements a __help bar__ that displays the wiki link selected in the Plugin Configuration options (under ''infopage''), or a link to this very page if that variable is left empty. If you want to remove the help bar, just disable it via the Configuration Manager.
  
-  - Your clients need web access to the typeface, so make sure that they can download it by placing a __direct link__ somewhere in your website((say, something like [[http://my.domain.com/resources/atomicclockradio.ttf]])).  +==== Customization ====
-  - Substitute the "''/path/to/your/typeface''" entries in the ''style.css'' file with the paths above as appropiate and save.  +
-  - **Flush your DokuWiki cache**.  +
-  - __Point your users__ towards the fonts, as well as installation instructions and, if possible, suggest them to use standards-compliant browsers. That's what the //infopage// setting is about -- just put some text to explain how to install the fonts and some download links((be wary of __licenses__ however, and see the point below)).+
  
-This has a double effect: if visitors load the page using an up-to-date browser, the browser itself will take care of downloading and rendering the font; if it doesn't, then users can still download the font themselves and install in their systems, which in Firefox 2+ and Opera 9+ should result in the font becoming available.  +The //aradio// and //tv24// styles require not only adequate CSS3 typeface support, but also that the client has installed or can access the requires typefaces (fonts). The typefaces are not provided directly to avoid problems with licensing, networking and privacy when installing the plugin by default. 
- +
-By this point, visitors should be able to view the plugin's effect at its full potential if they are using a web browser that follows standards. If for some reason the user can't load the fonts (maybe he is using IE?) the plugin will still render with acceptable defaults. +
- +
-:?: Can you provide the typefaces? +
- +
-:!: **No, because of license issues.** These fonts are not mine, in the sense that I have no copyright over them. I have acquired them for personal use as their licenses establish, but these licenses don't allow for me to directly give them away. I can only suggest you to use either them or similar ones, which is why I provide the family names ("lcdd", "digitalbreakout" and "atomicclockradio", the last two are offered as Freeware fonts in some collection sites). You can acquire or design a typeface yourself and serve it to your clients with the procedure above. Also see the ''style.css'' file headers for details. +
- +
-:?: How do I add my own style? +
- +
-:!: Copy one of the styles of the ''style.css''  to your ''conf/userstyle.css'' file and edit as appropriate. Pick a name for the style, such as "mystyle" and substitute under "default" in the next sample: +
- +
-<code css> +
-#dw_clock_object.default .face { +
-  ... +
-  } +
- +
-</code> +
- +
-What you are actually styling is the clock's face (a visual container inside the clock itself). Apply the new style by changing the "style" option under the Configuration Manager. Flushing the cache shouldn't be necessary.+
  
 +To create your own clock style, the quick&dirty way is to pick one of the default styles (the actual ''default'' one, even), copy it to your ''$DOKU_CONF/userstyle.css'' and modify as needed. You need to modify the ''.default'' classname to one of your liking, which you can then set as the style used from the Configuration Manager.
  
 ==== Known Issues ==== ==== Known Issues ====
Line 110: Line 103:
 Only **one instance of the clock** is allowed to exist in a DokuWiki page. This is by design. If the syntax mode (''<nowiki>{{clock}}</nowiki>'') is used again in a page, an anchor-link to the location of the existing clock will be shown instead. Only **one instance of the clock** is allowed to exist in a DokuWiki page. This is by design. If the syntax mode (''<nowiki>{{clock}}</nowiki>'') is used again in a page, an anchor-link to the location of the existing clock will be shown instead.
  
-The newest version of the plugin, ''v1.4'', has a cleaner JavaScript code that allows the plugin to operate without much trouble in current browsers like [[http://www.opera.com/|Opera]] and [[http://www.getfirefox.com/|Firefox]] (the main ones tested). Safari and Midori, //Webkit//-based browsers, are reported to work, but I haven't tested them myself. That said, any browser that implements CSS and JavaScript decently and according to standards should be able to display the clock without non-minor issues.+The plugin does not support simultaneous loads (like from a page and a sidebar). This won't affect normal rendering unless the two pages are displayed at once, in which case only the first invocation loaded (usually the normal page) will be rendered correctly, and the other (usually a sidebar) will be left an empty space.
  
-Note that **JavaScript support is required** for the plugin to work. If you're using Firefox plugins such as "NoScript" in its "ultimate paranoid" mode, you'll see no clock, instead a tag only. Make sure to at least "//allow scripts from the same site//" for the clock to work. If JavaScript is not enabled, the fallback message method specified with the ''nojs_fallback'' option will take place.+==== Questions ====
  
-Opera 9.5 beta versions have a JS issue where ''getSeconds()'' is not correctly implemented, causing the clock to display either "''-1''" or "''  ''" (//empty//) seconds. It doesn't matter, really: at this point you should be using the 10.10 release. +:?: How do I add my own style?
  
-The plugin does not support simultaneous loads (like from a page and a sidebar). This won't affect normal rendering unless the two pages are displayed at once, in which case only the first invocation loaded (usually the normal page) will be rendered correctly, and the other will be left an empty space.+:!: Copy one of the styles of the ''style.css''  to your ''conf/userstyle.css'' file and edit as appropriate, following the instructions in the [[#Customization]] section.
  
-==== Source Code ====+:?: I installed the plugin but the //aradio// and //tv24// styles won't show with the adequate typefaces?
  
-Download and unpack from the links above to get a view of the Source Code.+:!: The //aradio// and //tv24// styles require the client's browser to support CSS3 ''@font-face'' method to load external typefaces. Unfortunately only some browsers support this feature with the necessary degree of completeness (tested in Firefox 3.6 and Opera 10.61 at the moment of this writing). 
  
-==== The Major Release ====+:?: How do I provide the typefaces from my server to the clients?
  
-The following are improvements in the latest version (''v1.4''):+The instructions to enable these fonts in your own DokuWiki installation, __assuming you already have them__, is as follows:
  
-  * A help bar that shows a link to either this page, or a wikipage of your choice (defaults to ''wiki:clock''). +  - Your clients need web access to the typeface, so make sure that they can download it by placing a __direct link__ somewhere in your website((say, something like [[http://my.domain.com/resources/atomicclockradio.ttf]])).  
-  * A new style, //plain//, where simply no visual styling is done. +  - Substitute the "''/path/to/your/typeface''" entries in the ''style.css'' file with the paths above as appropiate and save.  
-  * A new style, //bluebox//, featuring a white typeface clock with shadows over a blue background. +  - **Flush your DokuWiki cache**.  
-  * Code is clearer and neater, in particular the JavaScript that may even work with Internet Explorer now. +  - __Point your users__ towards the fonts, as well as installation instructions and, if possible, suggest them to use standards-compliant browsers. That's what the //infopage// setting is about -- just put some text to explain how to install the fonts and some download links((be wary of __licenses__ however, and see the point below)).
-  * Slightly higher granularity for clock tick, may prevent time from "slipping by" under higher client load. +
-  * Compatibility with the [[doku>plugin:text|text-mode renderer]] (where simply the time according to the server is displayed).+
  
 +This has a double effect: if visitors load the page using an up-to-date browser, the browser itself will take care of downloading and rendering the font; if it doesn't, then users can still download the font themselves and install in their systems, which in Firefox 2+ and Opera 9+ should result in the font becoming available. 
  
-The following improvements are planned for the major release (''v.2.0''):+By this point, visitors should be able to view the plugin's effect at its full potential if they are using a web browser that follows standards. If for some reason the user can't load the fonts (maybe he is using IE?) the plugin will still render with acceptable defaults.
  
-  * Localization((right now only English and Spanish are available)). +===== Afterwords =====
-  * <del>Code clarity.</del> +
-  * AM/PM format option. +
-  * Better ''@font-face'' support. +
-  * An analog visualization mode (using SVG + CSS, maybe?). +
-  * A sort of print-version rendering.+
  
 +==== Legalese ====
  
-When will the major be released? Whenever it's ready.+This plugin ("clock") © [[#The Author]]. 
  
-==== Other Developments ==== +"clock" is developed part-for-fun, part-for-learning, of The Author's free will and during his spare time. It is released "as-is" under the terms of the GPL 2 License. The Author is not affiliated to the core DokuWiki staff, he just knows the guys and likes them (er... their work). The Author takes no responsibility for damages caused by inadequate use of "clock", but tries to stay available for a nice chat if particular issues related to "clock"'s domain are presented. Insert standard lorem-ipsum like legal disclaimer and/or waiver of warranties here and you know the drill. 
- +
-^ Other Plugins by\\ Luis Machuca:   | [[doku>plugin:progrecss]]\\ [[doku>plugin:tooltip]]\\ [[doku>plugin:clock]]\\ [[doku>plugin:divalign2]]\\ [[doku>plugin:countdown]]\\ [[doku>plugin:hide]]\\ [[doku>plugin:noiewarning]]   |+
  
 +----
  
 ===== Discussion ===== ===== Discussion =====
Line 158: Line 145:
  
 ----- -----
 +
 I attempted to disable the info link after the clock without success. Exactly what **file** and **syntax** needs to be used?  I attempted to disable the info link after the clock without success. Exactly what **file** and **syntax** needs to be used? 
 \\ I tried things in **<root>\conf\local.php** like $conf['helpbar'] = 0;, $helpbar = 0;, etc.  \\ I tried things in **<root>\conf\local.php** like $conf['helpbar'] = 0;, $helpbar = 0;, etc. 
 \\ Thanks for the help... \\ Thanks for the help...
 >Oopps... it seems some parsing escaped me. The syntax should be ''<nowiki>$conf['helpbar'] = 0;</nowiki>'', which the Configuration Manager already handles. Remove the plugin and download it again (there's a patched version) to see if the changes go through.  --- //[[luis.machuca@gulix.cl|Luis]] 2010/07/07 19:44// >Oopps... it seems some parsing escaped me. The syntax should be ''<nowiki>$conf['helpbar'] = 0;</nowiki>'', which the Configuration Manager already handles. Remove the plugin and download it again (there's a patched version) to see if the changes go through.  --- //[[luis.machuca@gulix.cl|Luis]] 2010/07/07 19:44//
 +
 +-----
 +
 +\\Work on 2010-11-07 "Anteater" --- //[[|vinnie]] 2011/01/13 1:25//
 +
 +---
 +
 +03/01/2012
 +
 +Hello team,
 +**
 +How can we make the clock float towards the top right or top left of a given wiki page???**
 +
 +-James
 +
 +>Hello. If you mean float as in be permanently moved, the only option is customizing the CSS as explained above, but that'll effect entire wiki. Not sure if what you ask can be done without writing a plugin that deals with specific pages itself.  --- [[user>ryan.chappelle|Luis Machuca Bezzaza]] //2012/01/20 21:08//
plugin/clock.1285102769.txt.gz · Last modified: 2010-09-21 22:59 by ryan.chappelle
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

Global DokuWiki Links