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

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

Expand Messages
  • 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 1 of 10 , Apr 1, 2006
    • 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 2 of 10 , Apr 2, 2006
      • 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 3 of 10 , Apr 2, 2006
        • 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 4 of 10 , Apr 2, 2006
          • 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 5 of 10 , Apr 2, 2006
            • 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 6 of 10 , Apr 2, 2006
              • 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 7 of 10 , Apr 3, 2006
                • 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 8 of 10 , Apr 3, 2006
                  • 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.