Work at SourceForge, help us to make it a better place! We have an immediate need for a Support Technician in our San Francisco or Denver office.

Close

#397 html canvas terminal driver

closed-accepted
Ethan Merritt
None
8
2009-03-18
2008-08-17
No

Adds HTML Canvas tag as a terminal.

Rationale:
The <canvas> tag has native support in
* Gecko (Firefox, others),
* Webkit (Safari both OSX and Windoze),
* Opera,
* and emulation via a plugin in MS Internet Explorer. (homepage http://code.google.com/p/explorercanvas/\)

The HTML Canvas tag gives compact, cross-platform graphics that can be easily embedded in web pages and accessed from a diverse browsers, without SVG plugins.

For drawing text, this terminal uses vector fonts from the supplied canvastext.js, that was kindly released into the public domain by Jim Studt (that package's home is http://www.federated.com/~jim/canvastext/\)

The terminal outputs a complete HTML file containing a div that contains the drawing area.

The only options are canvas X and Y size. They default to 600 by 400.

Example: create a simple graph

set term canvas 800 600
set output "test.html"
plot [0:2*pi] sin(x) with linespoints
set output

To view, point your browser at "test.html" in the local filesystem, or place "test.html", along with canvastext.js on your favorite webserver.

I am using a Linux build of the 2008-08-17 CVS source snapshot.

Bruce

Discussion

1 2 > >> (Page 1 of 2)
  • diffs to add html canvas terminal driver

     
    Attachments
  • Ethan Merritt
    Ethan Merritt
    2008-08-17

    Logged In: YES
    user_id=235620
    Originator: NO

    Very interesting idea. I have some questions about how you see this developing further.

    - Web browsers are very good with fonts and text. Why did you choose to do text via a very limited js emulation? Isn't this a lot of work for an inferior result?

    - I wonder how you would add support for enhanced text mode or other mark-up for math?

    I assume the main motivation for this is to embed plots in a web page with additional content.

    - How does this work, exactly?

    - Can you provide a demo html file that embeds multiple plots made by this terminal into the page layout?

    - What would be the processing flow through a cgi script (or other content-generation mechanism) that would create a page dynamically using gnuplot to create embedded plots?

    - What are your thoughts on the advantages/disadvantages of this approach as opposed to embedding svg or png output? I grant you that some browsers offer only limited svg support, but that seems to be improving rapidly. The thing is, svg already offers some level of browser-side interaction (zoom, font scaling). And if you don't need or want any such browser-side interaction then embedding a png image seems as close to fool-proof as you can get in the browser world. How does the canvas terminal fit into this state of affairs?

    - I imagine that adding full RGB color support would be trivial. What about palette colors? Images?

    Other comments:

    - embedding canvastext.js as a relative URL is non-optimal. Maybe there should be a terminal option to specify a more complete URL for this and any other support bits?

    - I get the following compile error
    In file included from term.h:289,
    from term.c:1367:
    ../term/canvas.trm: In function ‘CANVAS_graphics’:
    ../term/canvas.trm:143: warning: too many arguments for format

     
  • Logged In: YES
    user_id=2182189
    Originator: YES

    Dear Mr. Merritt,

    >- I get the following compile error
    > In file included from term.h:289,
    > from term.c:1367:
    > ../term/canvas.trm: In function ‘CANVAS_graphics’:
    > ../term/canvas.trm:143: warning: too many arguments for format

    Shame on me for not compiling with -Wall -Werror!

    I've attached an updated diff. The only change is to remove the 'canvas_font_size' param from the fprintf call inside CANVAS_graphics, removing the warning.

    Bruce

    File Added: canvas.diff

     
  • updated diff with compile warning removed

     
    Attachments
  • Ethan Merritt
    Ethan Merritt
    2009-01-04

    • priority: 5 --> 8
    • assigned_to: nobody --> sfeam
     
  • Ethan Merritt
    Ethan Merritt
    2009-01-04

    I have extended this nice work by adding terminal entry points for set_color() fillbox() make_palette() point() pointsize() and support for simple fillstyles. I have also incorporated it into the standard build scripts.

    I think this can go into CVS so that it will get wider testing.
    The limitations that I know of are:

    major:
    The HTML 5 "canvas" element is supported by only a few browsers,
    notably firefox, opera, and safari

    The text handling is minimal in the extreme. It looks like there
    is a mozilla.org project to add canvas support for normal HTML
    text elements; that would be a big improvement, although it's not
    clear to me how that fits in with use of UTF8 or mark-up of math.

    minor:
    The terminal doesn't (yet) support pattern fill or partial density
    solid fill. It could implement a few more of the common options
    for "set term".

    I ran the full set of demos through it, and it all works quite acceptably except for maybe the very detailed transparent surfaces in transparent_solids.dem
    File Added: canvas_03jan2009.patch

     
  • Ethan Merritt
    Ethan Merritt
    2009-01-06

    Demo collection as run through this new driver is here:

    http://skuld.bmsc.washington.edu/~merritt/gnuplot/canvas_demos/

    You need a recent firefox, opera, safari, or maybe IE browser to view these.
    There are some glitches, but it's looking pretty good.

     
  • Ethan Merritt
    Ethan Merritt
    2009-01-06

    Added support and documentation for separate 'standalone' and 'name <foo>' modes. The latter emits javascript only, suitable for inclusion in a separate html document.
    File Added: canvas_05jan2009.patch

     
  • Ethan Merritt
    Ethan Merritt
    2009-01-07

    File Added: canvas_06jan2009.patch

     
  • Ethan Merritt
    Ethan Merritt
    2009-01-09

    • status: open --> pending-accepted
     
1 2 > >> (Page 1 of 2)