Loading ...
Sorry, an error occurred while loading the content.

Demonstration of SVG Javascript Analogue Clocks

Expand Messages
  • Kam-Hung Soh
    Hi, Here s a Web page showing SVG-drawn analogue clocks animated by Javascript. It s the simplest thing I could imagine that could not be easily done using
    Message 1 of 10 , Apr 1 8:14 PM
    • 0 Attachment
      Hi,

      Here's a Web page showing SVG-drawn analogue clocks animated by
      Javascript. It's the simplest thing I could imagine that could not be
      easily done using just XHTML + Javascript because it involves rotating
      the hands of a clock.

      See: http://members.optusnet.com.au/~khsoh/000d.xhtml

      --
      Kam-Hung Soh
      http://kamhungsoh.blogspot.com - It Mostly Works
      http://members.optusnet.com.au/~khsoh - Software That Mostly Works
    • ddailey
      Nice! I didn t know til now that you could do all that svg stuff right inside the HTML like this: [ ....
      Message 2 of 10 , Apr 1 8:55 PM
      • 0 Attachment
        Nice!

        I didn't know 'til now that you could do all that svg stuff right inside the
        HTML like this:

        [<p>....</p>
        <svg:svg height="210px" width="440px">
        <svg:defs> ....</svg:svg>
        <h2>Programming Notes</h2>
        ...]

        I like the idea of only having one document instead of two to mix HTML with
        SVG (today I was just finishing up
        http://srufaculty.sru.edu/david.dailey/svg/angles.html -- messages go both
        ways between the HTML and the SVG and some scripts live in both places --
        when I took a look at your clocks)

        thanks for sharing this.

        DD

        ----- Original Message -----
        From: "Kam-Hung Soh" <kamhung.soh@...>
        To: <svg-developers@yahoogroups.com>
        Sent: Saturday, April 01, 2006 11:14 PM
        Subject: [svg-developers] Demonstration of SVG Javascript Analogue Clocks


        > Hi,
        >
        > Here's a Web page showing SVG-drawn analogue clocks animated by
        > Javascript. It's the simplest thing I could imagine that could not be
        > easily done using just XHTML + Javascript because it involves rotating
        > the hands of a clock.
        >
        > See: http://members.optusnet.com.au/~khsoh/000d.xhtml
        >
        > --
        > Kam-Hung Soh
        > http://kamhungsoh.blogspot.com - It Mostly Works
        > http://members.optusnet.com.au/~khsoh - Software That Mostly Works
        >
        >
        >
        >
        >
        > -----
        > To unsubscribe send a message to:
        > svg-developers-unsubscribe@yahoogroups.com
        > -or-
        > visit http://groups.yahoo.com/group/svg-developers and click "edit my
        > membership"
        > ----
        > Yahoo! Groups Links
        >
        >
        >
        >
        >
        >
        >
        >
      • Geoffrey Swenson
        Thanks very much for the examples. I think it will be very helpful to me on my project, which I will also post later as an example. Geoffrey J. Swenson
        Message 3 of 10 , Apr 1 9:52 PM
        • 0 Attachment
          Thanks very much for the examples. I think it will be very helpful to me on
          my project, which I will also post later as an example.



          Geoffrey J. Swenson

          geoffrey@...



          -----Original Message-----
          From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
          On Behalf Of ddailey
          Sent: Saturday, April 01, 2006 8:56 PM
          To: svg-developers@yahoogroups.com
          Subject: Re: [svg-developers] Demonstration of SVG Javascript Analogue
          Clocks



          Nice!

          I didn't know 'til now that you could do all that svg stuff right inside the

          HTML like this:

          [<p>....</p>
          <svg:svg height="210px" width="440px">
          <svg:defs> ....</svg:svg>
          <h2>Programming Notes</h2>
          ..]

          I like the idea of only having one document instead of two to mix HTML with
          SVG (today I was just finishing up
          http://srufaculty.sru.edu/david.dailey/svg/angles.html -- messages go both
          ways between the HTML and the SVG and some scripts live in both places --
          when I took a look at your clocks)

          thanks for sharing this.

          DD

          ----- Original Message -----
          From: "Kam-Hung Soh" <kamhung.soh@...>
          To: <svg-developers@yahoogroups.com>
          Sent: Saturday, April 01, 2006 11:14 PM
          Subject: [svg-developers] Demonstration of SVG Javascript Analogue Clocks


          > Hi,
          >
          > Here's a Web page showing SVG-drawn analogue clocks animated by
          > Javascript. It's the simplest thing I could imagine that could not be
          > easily done using just XHTML + Javascript because it involves rotating
          > the hands of a clock.
          >
          > See: http://members.optusnet.com.au/~khsoh/000d.xhtml
          >
          > --
          > Kam-Hung Soh
          > http://kamhungsoh.blogspot.com - It Mostly Works
          > http://members.optusnet.com.au/~khsoh - Software That Mostly Works
          >
          >
          >
          >
          >
          > -----
          > To unsubscribe send a message to:
          > svg-developers-unsubscribe@yahoogroups.com
          > -or-
          > visit http://groups.yahoo.com/group/svg-developers and click "edit my
          > membership"
          > ----
          > Yahoo! Groups Links
          >
          >
          >
          >
          >
          >
          >
          >




          -----
          To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
          -or-
          visit http://groups.yahoo.com/group/svg-developers and click "edit my
          membership"
          ----




          _____

          YAHOO! GROUPS LINKS



          * Visit your group "svg-developers
          <http://groups.yahoo.com/group/svg-developers> " on the web.

          * To unsubscribe from this group, send an email to:
          svg-developers-unsubscribe@yahoogroups.com
          <mailto:svg-developers-unsubscribe@yahoogroups.com?subject=Unsubscribe>

          * Your use of Yahoo! Groups is subject to the Yahoo! Terms of
          <http://docs.yahoo.com/info/terms/> Service.



          _____



          [Non-text portions of this message have been removed]
        • Martin Honnen
          ... inside the ... Just to make sure, HTML 4 as defined by the W3C has no concept of namespaces and of writing mixed namespace documents ( do svg stuff inside
          Message 4 of 10 , Apr 2 5:42 AM
          • 0 Attachment
            --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@...> wrote:

            > I didn't know 'til now that you could do all that svg stuff right
            inside the
            > HTML like this:
            >
            > [<p>....</p>
            > <svg:svg height="210px" width="440px">
            > <svg:defs> ....</svg:svg>
            > <h2>Programming Notes</h2>
            > ...]

            Just to make sure, HTML 4 as defined by the W3C has no concept of
            namespaces and of writing mixed namespace documents ("do svg stuff
            inside the HTML"). XHTML 1.0 however as an XML application allows
            writing mixed namespace XML documents so that the cited example works
            with implementations like Firefox 1.5 by serving it with an XML MIME
            type application/xhtml+xml and having it parsed with an XML parser.

            And IE Win has its own extension of HTML with a namespace concept
            where a plugin can take over and that way with IE/Win and the Adobe
            SVG viewer that mix is possible too, but for IE the main document
            needs to be served as text/html. That mix does however not work if you
            use the Adobe SVG viewer with other browsers.
          • Martin Honnen
            ... As for writing CSS selectors to match elements in a certain namespace you can do e.g. /* declare the prefix svg for SVG namespace
            Message 5 of 10 , Apr 2 6:35 AM
            • 0 Attachment
              --- In svg-developers@yahoogroups.com, "Kam-Hung Soh"
              <kamhung.soh@...> wrote:

              > Here's a Web page showing SVG-drawn analogue clocks animated by
              > Javascript.
              > See: http://members.optusnet.com.au/~khsoh/000d.xhtml

              As for writing CSS selectors to match elements in a certain namespace
              you can do e.g.
              <style type="text/css">
              /* declare the prefix svg for SVG namespace */
              @namespace svg url(http://www.w3.org/2000/svg);
              svg|circle { fill: green; }
              </style>
              That is part of the CSS 3 specifications under development but Firefox
              1.5 and Opera 9 preview implement that already as far as I understand.
              See <http://www.w3.org/TR/2005/WD-css3-selectors-20051215/>

              > It's the simplest thing I could imagine that could not be
              > easily done using just XHTML + Javascript because it involves rotating
              > the hands of a clock.

              (X)HTML + canvas + JavaScript can do that too :)
              <http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_animations>
              But text with numbers can currently not be drawn in a canvas.
            • Kam-Hung Soh
              ... Just to add that I found the steps for serving XHTML + SVG to Firefox and MSIE documented in http://wiki.svg.org/Inline_SVG. -- Kam-Hung Soh
              Message 6 of 10 , Apr 2 6:04 PM
              • 0 Attachment
                --- In svg-developers@yahoogroups.com, "Martin Honnen"
                <honnen_martin@...> wrote:
                >
                > --- In svg-developers@yahoogroups.com, "ddailey" <ddailey@> wrote:
                >
                > > I didn't know 'til now that you could do all that svg stuff right
                > inside the
                > > HTML like this:
                > >
                > > [<p>....</p>
                > > <svg:svg height="210px" width="440px">
                > > <svg:defs> ....</svg:svg>
                > > <h2>Programming Notes</h2>
                > > ...]
                >
                > Just to make sure, HTML 4 as defined by the W3C has no concept of
                > namespaces and of writing mixed namespace documents ("do svg stuff
                > inside the HTML"). XHTML 1.0 however as an XML application allows
                > writing mixed namespace XML documents so that the cited example works
                > with implementations like Firefox 1.5 by serving it with an XML MIME
                > type application/xhtml+xml and having it parsed with an XML parser.
                >
                > And IE Win has its own extension of HTML with a namespace concept
                > where a plugin can take over and that way with IE/Win and the Adobe
                > SVG viewer that mix is possible too, but for IE the main document
                > needs to be served as text/html. That mix does however not work if you
                > use the Adobe SVG viewer with other browsers.
                >

                Just to add that I found the steps for serving XHTML + SVG to Firefox
                and MSIE documented in http://wiki.svg.org/Inline_SVG.

                --
                Kam-Hung Soh
                http://kamhungsoh.blogspot.com - It Mostly Works
                http://members.optusnet.com.au/~khsoh - Software That Mostly Works
              • Kam-Hung Soh
                ... Cool! It would clean up the SVG tags. ... Thanks for pointing me towards the canvas feature. It looks like a good programmatic way to do web vector
                Message 7 of 10 , Apr 2 6:18 PM
                • 0 Attachment
                  --- In svg-developers@yahoogroups.com, "Martin Honnen"
                  <honnen_martin@...> wrote:
                  >
                  > --- In svg-developers@yahoogroups.com, "Kam-Hung Soh"
                  > <kamhung.soh@> wrote:
                  >
                  > > Here's a Web page showing SVG-drawn analogue clocks animated by
                  > > Javascript.
                  > > See: http://members.optusnet.com.au/~khsoh/000d.xhtml
                  >
                  > As for writing CSS selectors to match elements in a certain namespace
                  > you can do e.g.
                  > <style type="text/css">
                  > /* declare the prefix svg for SVG namespace */
                  > @namespace svg url(http://www.w3.org/2000/svg);
                  > svg|circle { fill: green; }
                  > </style>
                  > That is part of the CSS 3 specifications under development but Firefox
                  > 1.5 and Opera 9 preview implement that already as far as I understand.
                  > See <http://www.w3.org/TR/2005/WD-css3-selectors-20051215/>

                  Cool! It would clean up the SVG tags.

                  >
                  > > It's the simplest thing I could imagine that could not be
                  > > easily done using just XHTML + Javascript because it involves rotating
                  > > the hands of a clock.
                  >
                  > (X)HTML + canvas + JavaScript can do that too :)
                  > <http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_animations>
                  > But text with numbers can currently not be drawn in a canvas.
                  >

                  Thanks for pointing me towards the canvas feature. It looks like a
                  good programmatic way to do web vector graphics. The first-person
                  shooter demonstration is impressive!

                  There's also an SVG ECMAScript binding as well:
                  http://www.w3.org/TR/SVG11/ecmascript-binding.html

                  I think it should be possible to write something like the following to
                  change a circle's radius, "c.r = 50", rather than the more verbose
                  "c.setAttribute('r', '50')".

                  More stuff to try when I have some spare time!

                  --
                  Kam-Hung Soh
                  http://kamhungsoh.blogspot.com - It Mostly Works
                  http://members.optusnet.com.au/~khsoh - Software That Mostly Works
                • jookeda
                  Last time I played with the SVG DOM, Gecko easily had the closest to complete implementation. E.g., it implemented SVGMatrix and you could do circle.r.baseVal
                  Message 8 of 10 , Apr 2 7:57 PM
                  • 0 Attachment
                    Last time I played with the SVG DOM, Gecko easily had the closest to
                    complete implementation. E.g., it implemented SVGMatrix and you could
                    do circle.r.baseVal = 10 instead of circle.setAttribute("r", "10").
                    ASV, on the other hand, really didn't support any of that. Things
                    might have changed recently, however (I haven't tested the SVG DOM in
                    Opera).

                    As for analogue clocks, I also have one here:
                    http://www.browserland.org/scripts/svgclock/

                    Instead of using the rotation transform, I just use a little bit of
                    math (polar coordinates) to set the (x2,y2) coordinates of 3 line
                    segments.

                    Lastly, it is very possible to serve IE6 actual XML (XHTML+SVG) and
                    get it to render inline SVG via ASV. It just requires an XSLT
                    transformation which takes unprefixed markup and dumps prefixed
                    markup, and inserts the <?import?> hacks into the head of the
                    document. I have something that does there here:
                    http://www.browserland.org/xmlstuff/cxd/
                    (It also does primitive XInclude and MathML transforms too). Instead
                    of inserting all the hacks and prefixing your XML directly in your
                    markup, the xslt document will take care of that for you, and you can
                    write inline markup as you would for a real xml-aware browser such as
                    Opera or Firefox.



                    -Jason Davis


                    --- In svg-developers@yahoogroups.com, "Kam-Hung Soh"
                    >
                    > I think it should be possible to write something like the following to
                    > change a circle's radius, "c.r = 50", rather than the more verbose
                    > "c.setAttribute('r', '50')".
                    >
                    > More stuff to try when I have some spare time!
                    >
                    > --
                    > Kam-Hung Soh
                    > http://kamhungsoh.blogspot.com - It Mostly Works
                    > http://members.optusnet.com.au/~khsoh - Software That Mostly Works
                    >
                  • Christophe Strobbe
                    Hi, ... You d be surprised at what some people do with HTML and JavaScript: there s even JavaScript for an analogue clock that follows your mouse pointer
                    Message 9 of 10 , Apr 3 6:42 AM
                    • 0 Attachment
                      Hi,

                      At 06:14 2/04/2006, Kam-Hung Soh wrote:
                      >Hi,
                      >
                      >Here's a Web page showing SVG-drawn analogue clocks animated by
                      >Javascript. It's the simplest thing I could imagine that could not be
                      >easily done using just XHTML + Javascript because it involves rotating
                      >the hands of a clock.

                      You'd be surprised at what some people do with HTML and JavaScript:
                      there's even JavaScript for an analogue clock that follows your mouse
                      pointer (well, at least in IE): http://www.hypergurl.com/clockcursor.html.

                      Regards,

                      Christophe


                      >See: http://members.optusnet.com.au/~khsoh/000d.xhtml

                      --
                      Christophe Strobbe
                      K.U.Leuven - Departement of Electrical Engineering - Research Group on
                      Document Architectures
                      Kasteelpark Arenberg 10 - 3001 Leuven-Heverlee - BELGIUM
                      tel: +32 16 32 85 51
                      http://www.docarch.be/


                      Disclaimer: http://www.kuleuven.be/cwis/email_disclaimer.htm
                    • Kam-Hung Soh
                      ... http://www.hypergurl.com/clockcursor.html. Aaah, I knew I d get roasted for making such a generalization. :) -- Kam-Hung Soh
                      Message 10 of 10 , Apr 3 4:26 PM
                      • 0 Attachment
                        --- In svg-developers@yahoogroups.com, Christophe Strobbe
                        <christophe.strobbe@...> wrote:
                        >
                        > Hi,
                        >
                        > At 06:14 2/04/2006, Kam-Hung Soh wrote:
                        > >Hi,
                        > >
                        > >Here's a Web page showing SVG-drawn analogue clocks animated by
                        > >Javascript. It's the simplest thing I could imagine that could not be
                        > >easily done using just XHTML + Javascript because it involves rotating
                        > >the hands of a clock.
                        >
                        > You'd be surprised at what some people do with HTML and JavaScript:
                        > there's even JavaScript for an analogue clock that follows your mouse
                        > pointer (well, at least in IE):
                        http://www.hypergurl.com/clockcursor.html.

                        Aaah, I knew I'd get roasted for making such a generalization. :)

                        --
                        Kam-Hung Soh
                        http://kamhungsoh.blogspot.com - It Mostly Works
                        http://members.optusnet.com.au/~khsoh - Software That Mostly Works
                      Your message has been successfully submitted and would be delivered to recipients shortly.