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.
Enjoy:-)
Tomas
--
UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
