Graphing/plotting with embedded webserver?

I've been asked about the feasibility of generating simple graphs (chart recorder style) with an embedded web-server -- GoAhead web server to be specific.

The only plotting I've ever done programmaticaly was by executing gnuplot under. That's not an option for the embedded platform in question. The plots will have to be generated by C code. One options is to write C code to actually render the graphics and crunch out a GIF or PNG "file". That sounds like a _lot_ of work.

Is there a way to use client-side Javascript to do the actual drawing? I'd rather stay away from serving up a Java applet, but I could probably get away with Javascript.

--
Grant Edwards                   grante             Yow!  I hope something GOOD
                                  at               came in the mail today so
 Click to see the full signature
Reply to
Grant Edwards
Loading thread data ...

The problem is javaScript relies on the graphic capabilities of the machine it is running on.

What is your graphic environment? Have you graphic libraries?

Reply to
Lanarcam

It's not, if you can fit a useful library like GD into your embedded side. They present a little raster-graphics API that is fairly easy to draw into by hand-written C code, and can spit out JPG/PNG/GIF.

- FChE

Reply to
Frank Ch. Eigler

You might take a look at Ploticus. I believe there's a library interface.

--
	mac the naïf
Reply to
Alex Colvin

[...]

I think we can safely assume that the browser will be running on a machine with decent graphics capabilities. If somebody is using a text-only browser, there isn't much I can do about it. I don't plan on trying to generate ASCII plots.

I would guess 90% of the browsers will be running under Win32 and 10% under Linux/X11.

Are you asking about the client side or the server side? The server side is an ARM7 based embedded system running an RTOS with no graphics capabilities.

--
Grant Edwards                   grante             Yow!  Look into my eyes and
                                  at               try to forget that you have
 Click to see the full signature
Reply to
Grant Edwards

I guess I wasn't clear in my original post. My server isn't running under Linux or Win32. It's running an RTOS (eCos).

--
Grant Edwards                   grante             Yow!  It's the RINSE
                                  at               CYCLE!! They've ALL IGNORED
 Click to see the full signature
Reply to
Grant Edwards

graphics like that were explicitly NOT a goal of javascript, although people have done some pretty appalling things. For low rez, you can generate tables of colored boxes. For higher rez you can align 1-pixel images.

formatting link

The SVG standard should make it easier to send a description of a data plot to the browser, but most browsers don't support it yet.

--
	mac the naïf
Reply to
Alex Colvin

And the required supporting libraries like zlib, libpng, etc.

Interesting. Porting all of the libraries to an embedded platform looks like a lot of work.

--
Grant Edwards                   grante             Yow!  One FISHWICH coming
                                  at               up!!
 Click to see the full signature
Reply to
Grant Edwards

Oh, I know that. It doesn't have to be elegant or efficient, but if it means I don't have to port a half-dozen libraries originally designed for Linux...

Yup, that's the sort of thing I was thinking about.

Here's an very interesting example of some higher-level graphics/plotting done in client-side JavaScript (it works in Firefox, don't know about others):

formatting link

I'm not sure if it's portable enough for my project, or if can really do what I want, but it sort of demonstrates what I was hoping to find.

Right. I looked into SVG, but too many browsers don't support SVG out of the box.

--
Grant Edwards                   grante             Yow!  Boy, am I glad it's
                                  at               only 1971...
 Click to see the full signature
Reply to
Grant Edwards

interface.

You could write an HTML page on your server with directives such as

and send it to the browser.

Reply to
Lanarcam

That seems to be the approach used by most of the examples I can find. They usually seem to use a tag -- which I need to read up on.

--
Grant Edwards                   grante             Yow!  In Newark the
                                  at               laundromats are open 24
 Click to see the full signature
Reply to
Grant Edwards

Grant Edwards wrote: > I've been asked about the feasibility of generating simple > graphs (chart recorder style) with an embedded web-server -- > GoAhead web server to be specific.

The M0n0wall firewall

formatting link
is an embedded FreeBSD network security distribution. Apart from being a fabulous security tool, this firewall has a live traffic monitoring graph that shows a strip-chart record of network throughput in a web browser GUI using the Adobe SVG plugin. The graph is updated about once per second.

I know nothing about how the graphs are generated or how they are coded, apart from needing the Adobe plugin to view them, but they sure are slick, and work in any browser that the plugin works with. I've used IE, Mozilla and Firefox. m0n0wall uses mini-httpd for its web server.

You might want to check how M0n0wall generates the graphs. Source code seems to be available on the web site.

Just an idea.

--rick

Rick Low Ottawa, Canada ral613 at yahoo dot com

Reply to
Rick Low

I've looked into SVG a little. All I really know is it uses XML as a container format and requires a plugin from Adobe. I'd rather not require users to download a plugin if there's a way (even if it's less technically elegent) to work with browsers in their out-of-the-box state.

I'll definitely take a look at it.

--
Grant Edwards                   grante             Yow!  ... I think I'd
                                  at               better go back to my
 Click to see the full signature
Reply to
Grant Edwards

Which then hits the age old "This page is designed to work at 1024x768" issues, which is worse than relying on a graphing plugin.

--
Paul Carpenter          | paul@pcserviceselectronics.co.uk
    PC Services
 Click to see the full signature
Reply to
Paul Carpenter

Not as bad as you might think, but I don't know what the GoAhead has to work with. What I can tell you is

1) line drawing is pretty easy - search for Bresenham line drawing. 2) the compression table space for a GIF image only takes 2k bytes. 3)You'll need another buffer for your virtual image - say: 100 by 200 pixels at 1 bit per pixel = 2.5k 3a)(you didn't say anything about color) 3b)(you can scale the image up by 2 or 3x in the browser) 4) The LZW psuedo-code (GIF) can be found (sorry, no links) but of course, you *do* know about the copyright issues, right? So PNG is the legally safe way to go but I don't know how hard the implementation is.

I would start by sending your image in straight, uncompressed bitmap format (the simplest .BMP) and work my way up to GIF or PNG. Back in the day, I used to "Graphics File Formats" by Kay and Levine but my copy is 13 years old, so it doesn't even mention PNG. One of the hardest things is giving the user control of the X axis scaling. If you keep it simple (e.g. a data point every N pixels in x -- no fractions) then there really isn't anything to be afraid of.

Bob

Reply to
Bob

oops. The symbol buffer I used was 2k*9 = 18kbytes

Bob

Reply to
Bob

course,

I think you mean patent issues. The patent has expired. The code for GIF compression is trivial compared to the library used for PNG. In cases where all I needed was a black and white drawing, uncompressed PNG was very easy.

Reply to
bob

Grant,

If you want a running strip tape, you'll need some client-side code. If you're looking for static charts that refresh, you have more options.

One that hasn't been mentioned yet - HTML re-sizing of images. Bentham's book TCP/IP Lean (2nd Edition) has a few examples starting at page 230.

formatting link

In short, the HTML references tiny image files, but at specific rendering dimensions; the browser shrinks or stretches the image to accommodate. By stacking the images vertically in a table cell, one can create a line / bar / stacked bar / area chart, or X-Y graph. Cells are placed side by side to create the width.

This technique can use very tiny image files (like, 1 pixel), but requires a lot of HTML on-the-fly tag creation. No buffering needed except the source data points. I've used it for years in scripts for quick health-check charts, and it's pretty slick. Use nicer image files (3D, gradient) for even better effect.

HTH, Richard

Reply to
Richard H.

A running strip would be ideal, but the time scale is slow enough that the latter will be quite sufficient.

Thanks for the reference. I should probably have a copy of that book anyway.

That sounds like something that might work for my application.

That I can do. I do have some limited server side dynamic content generation capabilities. I've also run across what looks like the same thing done mosly in client-side JavaScript.

--
Grant Edwards                   grante             Yow!  Half a mind is a
                                  at               terrible thing to waste!
 Click to see the full signature
Reply to
Grant Edwards

I you are connected locally rather than over the internet, then use BMP instead of GIF or PNG. Once you have a few bits and pieces right for the header, the rest is just a straight pixel map (assuming you don't need palette handling - just pick a pixel depth that suits your application). It won't help with your line drawing, but it will at least save you doing the compression stuff.

Reply to
David

ElectronDepot website is not affiliated with any of the manufacturers or service providers discussed here. All logos and trade names are the property of their respective owners.