how to display mouse tracking box in gnuplot canvas terminal

jaya choudhary

unread,

Jun 22, 2012, 5:46:13 AM6/22/12

to

Hi,
I have installed gnuplot4.6 in my Fedora 15 system. I am trying to
plot a graph using gnuplot canvas terminal and wrap it in an html file
so that a mouse tracking box is visible below the plot. It should
allow tracking mouse movement, zoom in, zoom out etc. as shown on
http://gnuplot.sourceforge.net/demo_canvas_4.6/.

I am using the following file fishplot.html:

<html>
<head>
<script src="canvastext.js"></script>
<script src="gnuplot_common.js"></script>
<script src="gnuplot_mouse.js"></script>
<link rel="stylesheet" type="text/css" href="gnuplot_mouse.css" />
</head>
<body onload="fishplot();">
<script src="fishplot.js"></script>
<canvas id="fishplot" width=600 height=400>
<div id="err_msg">No support for HTML 5 canvas element</div>
</canvas>
</body>
</html>

The gnuplot commands used are:
gnuplot>set term canvas name 'fishplot' standalone mousing
gnuplot>set output 'fishplot.js'
gnuplot>plot sin(x)

When fishplot.html is viewed in browser, only the left click
functionality which marks the current co-ordinates of mouse in
browser is working.

How to make the mouse-tracking toolbox appear in browser and how to
make those functionality work?

Do I need to write additional code for .html and .js files? If yes,
then why is the 'left click ' function working?

sfeam

unread,

Jun 22, 2012, 10:43:42 PM6/22/12

to

I would expect the zoom operation to work also (click and drag to define
zoom box). Is it not working?

> How to make the mouse-tracking toolbox appear in browser and how to
> make those functionality work?

You need to provide an appropriately named set of fields for the
browser to print the mouse coordinates in (HTML, not javascript).
There is a sample file showing how this might look in the gnuplot
source distribution
.../demo/html/mousebox.template

That directory also contains the script webify_canvas.pl that is
used to general the demos you see on-line. If you name your
gnuplot command file fishplot.dem, then from the demo/html
directory you can type
make -f Makefile.canvas fishplot.html
to generate a mouseable HTML page in the same style as the online
demos.

> Do I need to write additional code for .html and .js files? If yes,
> then why is the 'left click ' function working?

You do not need to write additional javascript unless you want to
customize the formatting of mouse coordinates, or apply some other
custom transformation. I think all the mousing functions are
probably working, but you haven't provided anywhere for the output
to appear.

jaya choudhary

unread,

Jun 25, 2012, 3:02:45 AM6/25/12

to

Hi sfeam,
Thanks for the reply. The zoom operation is not working. When I rt.
click the mouse and drag a certain area gets highlighted and then the
entire plot disappears.

I copied mousebox.template into fishplot.html, now the mouse tracking
box appears in the browser. But, the box is not working i.e. it
does'nt display the mouse (x,y) co-ordinates when the mouse is
positioned on canvas. The fishplot.html is as shown below:

<table class="mbright" tabindex=0>
<tr>

<td class="mb0">x </td> <td class="mb1"><span
id="ACTIVE_PLOT_NAME_x">    </span></td>
<td class="mb0">y </td> <td class="mb1"><span
id="ACTIVE_PLOT_NAME_y">    </span></td>

<td class="icon"></td>
<td class="icon" onclick="gnuplot.toggle_grid();"><img
src="grid.png" id="gnuplot_grid_icon" class="icon-image" alt="#"
title="toggle grid"></td>
<td class="icon" onclick="gnuplot.unzoom();"><img
src="previouszoom.png" id="gnuplot_unzoom_icon" class="icon-image"
alt="unzoom" title="unzoom"></td>
<td class="icon" onclick="gnuplot.rezoom();"><img src="nextzoom.png"
id="gnuplot_rezoom_icon" class="icon-image" alt="rezoom"
title="rezoom"></td>
<td class="icon" onclick="gnuplot.toggle_zoom_text();"><img
src="textzoom.png" id="gnuplot_textzoom_icon" class="icon-image"
alt="zoom text" title="zoom text with plot"></td>
<td class="icon" onclick="gnuplot.popup_help();"><img src="help.png"
id="gnuplot_help_icon" class="icon-image" alt="?" title="help"></td>

</tr>
<tr>
<td class="blank"> </td>
<td class="blank"> </td>
<td class="icon"> </td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_1")'>①</td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_2")'>②</td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_3")'>③</td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_4")'>④</td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_5")'>⑤</td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_6")'>⑥</td>
<td class="icon"
onclick='gnuplot.toggle_plot("ACTIVE_PLOT_NAME_plot_7")'>⑦</td>
</tr>

</table>
</body>
</html>

>make -f Makefile.canvas fishplot.html
I copied fishplot.js to ...demo/html
and ran the given command . I get the following error
make: *** No rule to make target `fishplot.html'. Stop.

>Also, I am not clear about how to use webify?

Jaya

sfeam

unread,

Jun 25, 2012, 10:49:32 AM6/25/12

to

On Monday, June 25, 2012 12:02:45 AM UTC-7, jaya choudhary wrote:
> Hi sfeam,
> Thanks for the reply. The zoom operation is not working. When I rt.
> click the mouse and drag a certain area gets highlighted and then the
> entire plot disappears.

I do not recall ever encountering that failure mode. You will
probably need to debug it in the browser's javascript console.

> >make -f Makefile.canvas fishplot.html
> I copied fishplot.js to ...demo/html
> and ran the given command . I get the following error
> make: *** No rule to make target `fishplot.html'. Stop.

The Makefile exists to build the demos.
It has a rule for *.dem -> *.html
So you need to rename your gnuplot script to fishplot.dem
and then the Makefile will know how to create matching
*.js and *.html files.

> >Also, I am not clear about how to use webify?

It is called by the Makefile. You need not call it directly.

jaya choudhary

unread,

Jun 26, 2012, 7:03:33 AM6/26/12

to

Hi,

> The Makefile exists to build the demos.
> It has a rule for *.dem -> *.html
> So you need to rename your gnuplot script to fishplot.dem
> and then the Makefile will know how to create matching
> *.js and *.html files.

As per your suggestion I renamed, fishplot.js to fishplot.dem
Still, make command gave the same error:
make -f Makefile.canvas fishplot.html

make: *** No rule to make target `fishplot.html'. Stop.

Meanwhile, I tried this script(to directly generate html instead of
first generating .js and then writing html file to wrap it) and it
worked:
set term canvas standalone mousing
set out test.html
plot sin(x)