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

Re: [svg-developers] Demonstration of SVG Javascript Analogue Clocks

Expand Messages
  • ddailey
    Nice! I didn t know til now that you could do all that svg stuff right inside the HTML like this: [ ....
    Message 1 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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.