Tomas,
That is interesting!
I was playing around with your demo and ran a little bookmarklet that would
refresh the stepped version automatically.
I first included jquery through a bookmarklet. Then, I pasted this into my
javascript console window:
var refresh = function(location) {
$.get(location, function(x) {
var $html = $(x);
var url = $html.find('a:contains(step)').attr("href");
console.log(url);
var svg = $html.find('svg');
$('svg').replaceWith(svg.get(0));
setTimeout(function() { refresh(url) }, 500)
})
}
refresh($('a:contains(step)').attr("href"));
I think this appears more seamless (like the iframe approach) instead of
doing a full page refresh.
It looks like Alex's approach is about 15x lighter on the wire. I ran
fiddler and it looks like it transmits upwards of 639 bytes for a full
chart whereas the svg is around 9500 bytes. Still, it's an neat
alternative!
On Sun, Sep 15, 2013 at 12:51 PM, Tomas Hlavaty <[email protected]> wrote:
> 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 <[email protected]> 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:[email protected]?subject=Unsubscribe
>
