Re: Great canvas article and demo
Hi Tomas, as a proof of concept, I have implemented your zapper demo using svg and without any javascript, see http://logand.com:2234/ Very nice indeed! SVG is a good alternative to Canvas, it seems. 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. This makes a lot of sense. Thanks! ♪♫ Alex -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
From: Alexander Burger a...@software-lab.de Subject: Re: Great canvas article and demo Date: Mon, 16 Sep 2013 08:25:25 +0200 Hi Tomas, as a proof of concept, I have implemented your zapper demo using svg and without any javascript, see http://logand.com:2234/ Very nice indeed! SVG is a good alternative to Canvas, it seems. Would it also be feasible to use (encapsulated?) postscript instead of SVG? Or is there maybe even a way to use the Canvas widgets of Tcl/Tk over the ffi or generating appropriate tcl code on the fly? Klaus Schilling -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
On Mon, Sep 16, 2013 at 10:20:03AM +0200, Klaus Schilling wrote:
Would it also be feasible to use (encapsulated?) postscript instead of
SVG?
Probably.
But what surely works well is Gnuplot. We used it in the mentioned
project to draw the final data. Code fragments:
In a library file:
# Draw Gnuplot
# Data in (tmp gp.csv)
# Result in (tmp gp.{typ})
(de gnuplot (Typ SizeX SizeY Flags Col)
(out (tmp gp.cmd)
(if (== Typ 'eps) # 'eps' or 'png'
(prinl
set terminal postscript eps size
SizeX
,
SizeY
enhanced color )
(prinl
set terminal png font helvetica 9 size
SizeX
,
SizeY ) )
(prinl set encoding utf8)
(prinl set xlabel \Netzteil [mA]\)
(prinl set y2label \Drehmoment [Nm]\)
(prinl set ytics)
(prinl set ytics nomirror)
(prinl set y2tics)
(prinl set grid xtics)
(prinl set grid y2tics)
(prinl set key outside bottom)
(prinl set style data lines)
(prinl set output \ (tmp gp. Typ) \)
(prin plot \ (tmp gp.csv)
\ using 1:3 axes x1y2 lc rgb \red\ t \Drehmoment [Nm]\ )
(mapc
'((F L I)
(and
F
I
(prin , \ (tmp gp.csv)
\ using 1: I
lc rgb \ (caddr L)
\ t \ (cadr L) \ ) ) )
Flags
Col
(2 NIL 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18) )
(prinl) )
(call 'gnuplot (tmp gp.cmd)) )
The chart with data in the GUI:
(gui '(+E/R +Chart) '(sel : home obj) 19)
(table 'chart Selektion
(mapcar
'((L)
(list
(cons 'style (pack color: (caddr L)))
(cadr L) ) )
(with '*DrawMes
(cons (: col 1) (: col -2)) ) )
(do 6
(row (alternating)
(gui 1 '(+Checkbox))
(gui 2 '(+Checkbox))
(gui 3 '(+Checkbox))
(gui 4 '(+Checkbox))
(gui 5 '(+Checkbox))
(gui 6 '(+Checkbox))
(gui 7 '(+Checkbox))
(gui 8 '(+Checkbox))
(gui 9 '(+Checkbox))
(gui 10 '(+Checkbox))
(gui 11 '(+Checkbox))
(gui 12 '(+Checkbox))
(gui 13 '(+Checkbox))
(gui 14 '(+Checkbox))
(gui 15 '(+Checkbox))
(gui 16 '(+Checkbox))
(gui 17 '(+Rid +Able +Tiny +Button) '(curr) Anzeigen
'(let (F (cons (curr 1) T (curr -1)) C (get '*DrawMes 'col))
(out (tmp gp.csv)
(for L (: home obj lst)
(prinl (glue ^I L)) ) )
(gnuplot 'png 1200 600 F C)
(call 'mv (tmp gp.png) (tmp full.png))
(gnuplot 'png 800 300 F C) ) )
(gui 18 '(+DelRowButton))
(gui 19 '(+BubbleButton)) ) ) )
(scroll 6 T)
and finally the display in the GUI:
(gui '(+Upd +Img)
'(let F (tmp gp.png)
(and (info F) F) )
Grafik
'(let F (tmp full.png)
(and (info F) (pack + F)) ) )
(--)
(Für eine vergrößerte Ansicht in einem neuen Tab bitte auf die Grafik
klicken) ) )
Hope this helps
♪♫ Alex
--
UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
On September 16, 2013 at 9:30 AM Tomas Hlavaty t...@logand.com wrote: 3) I guess most of the overhead of the http request is probably establishing the connection. My bett is that it doesn't really matter if you send 1kB or 5kB of data. For example, if I run this It might matter, the only way to make sure is to measure. For instance you can fit an answer inside an IP packet completely, it may make a difference. (There are also many other things to consider, for instance if there are CSS or Javascript resources which are blocking start of browser rendering, until those are loaded.) best regards, Jakob -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
Hi Jakob, Jakob Eriksson ja...@aurorasystems.eu writes: On September 16, 2013 at 9:30 AM Tomas Hlavaty t...@logand.com wrote: 3) I guess most of the overhead of the http request is probably establishing the connection. My bett is that it doesn't really matter if you send 1kB or 5kB of data. For example, if I run this It might matter, the only way to make sure is to measure. For instance you can fit an answer inside an IP packet completely, it may make a difference. (There are also many other things to consider, for instance if there are CSS or Javascript resources which are blocking start of browser rendering, until those are loaded.) yeah, but this is getting too theoretical. The IPv4 packet length field is 16 bits, for a maximum size of 65535 bytes. IPv6 - The extended length option provides for a 32 bit length field, supporting packet length's up to 4294967295 bytes. but those are further fragmented maximum length Ethernet II frames (1518 bytes, with a payload of 1500 bytes) Alex' example might fit in one Ethernet frame. My too, if you remove the additional feature (clickable graph and popup bubbles) and gzip the page source. But then there is sync, and all the communication slows down on ack... Anyway, it's fast enough, and the and it doesn't make any difference if it loads in 3ms (locally) or 60ms (from logand.com). Btw, both times are somewhere around the frame rate of TV (40ms) and human eye needs about 100ms to not notice :-D The example doesn't contain any CSS or Javascript, intentionally. Cheers, Tomas -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
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 t...@logand.com 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 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
Re: Great canvas article and demo
On Fri, Sep 06, 2013 at 06:54:34PM +0200, Alexander Burger wrote: I would propose that by convention we put new articles always on the topmost position. Are there other opinions? If not, perhaps we should (manually) re-order the existing list? Or better not, seems too tedious ;-) So I only moved the two articles I wrote recently to the top of the list. And in the future, let's insert new articles always in the first position to make them prominently accessible. ♪♫ Alex -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
Hi Alex,
very nice demo indeed, especially the use of plio protocol to do stuff
in the browser;-)
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.
Cheers,
Tomas
Jon Kleiser jon.klei...@usit.uio.no writes:
Hi Alex,
Hi Jon,
Do you mean the box around the whole canvas (there is no dedicated
X-axis)? In fact, the box is not part of the canvas itself, but
appears
because of the CSS style canvas {border: 1px solid}.
No, I mean the redish horizontal line in the middle of the canvas. You
can
Ah, right! Yes, that's indeed a kind of X-axis :)
see an example of sharp (1px) horizontal and vertical lines if you go to
my
http://folk.uio.no/jkleiser/pico/emuLisp/console.html
and evaluate e.g. '(1 (2 3)) - then look in the canvas to the right.
What
I do in this console.html is this:
ctx.translate(16.5, 16.5);
It's the .5 that does the trick.
OK. So this could be written as (csTranslate 16.5 16.5) in PicoLisp?
Yes, I guess that should work.
Another possibility would be to set (csLineWidth 0.5), right?
?? Alex
I would have to try that csLineWidth before I can say if it works. I guess
it could make the color of the line somewhat paler than what you intended.
/Jon
--
UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
Hi Jon,
Do you mean the box around the whole canvas (there is no dedicated
X-axis)? In fact, the box is not part of the canvas itself, but appears
because of the CSS style canvas {border: 1px solid}.
No, I mean the redish horizontal line in the middle of the canvas. You can
Ah, right! Yes, that's indeed a kind of X-axis :)
see an example of sharp (1px) horizontal and vertical lines if you go to
my
http://folk.uio.no/jkleiser/pico/emuLisp/console.html
and evaluate e.g. '(1 (2 3)) - then look in the canvas to the right. What
I do in this console.html is this:
ctx.translate(16.5, 16.5);
It's the .5 that does the trick.
OK. So this could be written as (csTranslate 16.5 16.5) in PicoLisp?
Another possibility would be to set (csLineWidth 0.5), right?
♪♫ Alex
--
UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
On Sat, Sep 07, 2013 at 08:01:46AM +0200, Alexander Burger wrote: OK. So this could be written as (csTranslate 16.5 16.5) in PicoLisp? Another possibility would be to set (csLineWidth 0.5), right? Oops, no, forget the second one :) This won't produce a _sharper_ line. -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Great canvas article and demo
Hi Alex, From watching http://code.google.com/p/picolisp/source/list I knew you were working on some canvas stuff, and I was curious to find out. ;-) I really like your article at http://picolisp.com/5000/!wiki?canvasDrawing, and the demo at http://canvas.picolisp.com/. I'll take a closer look at you code a little later. A couple of questions: 1) Will your canvas library allow the use of non-integer values? The reason I ask is that I notice that the X-axis in your demo appears, at least on my screen, to be two pixels thick (and slightly pale). You probably will have to offset it (vertically) by 0.5 to get a really sharp one-pixel line. I believe this is how canvas works for horizontal and vertical lines. 2) I've always thought that the most recent articles in the PicoLisp wiki should (automatically) appear at the bottom of the article lists, but thinking of it a bit more, the fact is that the author is free to put it anywhere he/she likes, and you put yours somewhere in the middle of http://picolisp.com/5000/!wiki?Articles. I think it would have been nice with a little flag indicating if an article was newer than e.g. a month, or if there was a way to sort the articles in a list by creation or modification date ... Just dreaming. ;-) Anyway, it's nice to see some new and interesting stuff here. Have a nice weekend, everybody! /Jon -- UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
Re: Great canvas article and demo
Hi Jon,
thanks for the feedback! :)
A couple of questions:
1) Will your canvas library allow the use of non-integer values? The
Yes. JavaScript doesn't really care about the type of an argument, so
you should be able to pass a string like 0.5, or (format Number 3), or
whatever.
reason I ask is that I notice that the X-axis in your demo appears,
at least on my screen, to be two pixels thick (and slightly pale).
Do you mean the box around the whole canvas (there is no dedicated
X-axis)? In fact, the box is not part of the canvas itself, but appears
because of the CSS style canvas {border: 1px solid}.
You probably will have to offset it (vertically) by 0.5 to get a
really sharp one-pixel line. I believe this is how canvas works for
horizontal and vertical lines.
Yes. In other cases (not in that demo) I saw that drawing a rectangle
with the size of the canvas itself, i.e.
(csClearRect 0 0 *DX *DY)
(csStrokeRect 0 0 *DX *DY)
displays the Rectangle with only half the line-width, because the other
half is outside the canvas drawable area.
2) I've always thought that the most recent articles in the PicoLisp
wiki should (automatically) appear at the bottom of the article
lists, but thinking of it a bit more, the fact is that the author is
free to put it anywhere he/she likes, and you put yours somewhere in
the middle of http://picolisp.com/5000/!wiki?Articles. I think it
Yeah. I was wondering too where to put it, and ended up putting it
besides GUI Scripting for no real special reason ;-)
I would propose that by convention we put new articles always on the
topmost position. Are there other opinions? If not, perhaps we should
(manually) re-order the existing list?
would have been nice with a little flag indicating if an article
was newer than e.g. a month, or if there was a way to sort the
articles in a list by creation or modification date ... Just
dreaming. ;-)
In a certain way this is already available. I usually do it this
way:
1. Go to the DB maintenance GUI (http://wiki.picolisp.com)
2. Log in
3. Click on Documents in the menu
By default (i.e. if you don't enter a specific name), the search dialog
shows all document reverse sorted by modification date, i.e. the latest
changes on top. There you can also click on the '@' of documents you are
interested in, and thus immediately get the Revsion history with the
differences between the versions etc.
Anyway, it's nice to see some new and interesting stuff here. Have a
nice weekend, everybody!
Thanks! You too!
♪♫ Alex
--
UNSUBSCRIBE: mailto:picolisp@software-lab.de?subject=Unsubscribe
