Hi Alex,

as a proof of concept, I have implemented your zapper demo using svg and
without any javascript, see http://logand.com:2234/

Tomas Hlavaty <t...@logand.com> writes:
> Another way of achieving the same result without any need for
> javascript would be using SVG.  It works very well across browsers
> nowadays.  Canvas could be an iframe with a refresh rate if required
> and SVG could be inlined in the HTML, generated in a similar way as
> the usual PicoLisp generated HTML.  As an added bonus, SVG could
> contain links which could trigger picolisp actions without the need
> for calculating positions on server side (because the browser would do
> this work for us), should the users wish to inspect a point in the
> demo graph.

1) It uses svg instead of canvas, meaning that:

  - There is no javascript required for drawing stuff.  The same
    approach to generating html can be used to generate svg.

  - It's easy to define parts of the picture to be clickable, so if you
    click on a point in the graph, the text clicked will be updated with
    the y axis value, as an example.  Also it displays a buuble if you
    leave cursor above a point.

  - svg used to be slow, broken and non-portable across browsers a few
    years ago but these days, it's rather good for many use-cases.
    There are still some things broken on some browsers, but it's
    getting steadily better.

  - Graphics transformation can be easily specified in svg, so there is
    no need to do "complicated" coordinate calculations. e.g.

    <g transform="translate(0 300) scale(1 -1) translate(0.5 150.5)">

    changes the orientation and origin of the coordinate system, and
    also moves the centres of lines a bit so that 1px lines are sharp
    (which is what you discussed with Jon I guess, and which your
    example doesn't do for the horizontal axis I think).

2) The example doesn't use any javascript meaning that the maximum
   refresh speed is 1s.  This is good enough for many use-cases.  If
   not, a bit of javascript can be added in a similar way like the
   current picolisp refresh is implemented.  As you mentioned, something
   like the +Auto class.

   If the automatic refresh is not desirable for the whole page, the
   whole svg graph could be put into an iframe which would refresh, but
   the surounding html would stay.  But it's not critical for this demo.

3) Bug: If you click too fast or at the same time as refresh happens,
   the browser and session can get out of sync and it will stop reacting
   to click, unfortunately.  I have to figure out why.  If that happens,
   simply open the link again, or just discard the "s" query parameter.

Generally I find svg much better than using canvas, which is too low
level.  In picolisp, one could write similar functions like for html, or
use the '<xml>' function to generate arbitrary svg.


UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe

Reply via email to