SVG Grapher sidebar

[jkd]

Take a look at the attached image to see what exactly it does.

If you by chance happen to have a SVG-enabled release of Mozilla handy (:)), take a look at the zip file attached to my reply on this thread (can't attach multiple files per reply).

Basically, it can graph:

functions
polar equations
4 basic conic sections (circle, ellipse, hyperbola, and parabola)

It accepts any Javascript constant and method for input (graphing f(x) = Math.random()*x gets interesting).

And is basically really cool - the XUL interface is pretty slick imho too (was originally written in XHTML 1.1, but decided to learn XUL and rewrite it in it for fun).

And for even more fun - I define the example conic equations using presentation MathML 2.0 :D.

Anyway, I need to implement 2 things before it becomes really usable:

1. zooming - easy enough with the SVGTransform interface
2. changing the x-min/x-max, y-min/y-max box settings - which is also easy enough via SVGTransform :)


If you regularly used a SVG-enabled Mozilla, what would you like to see in the sidebar calculator application? :)

[jkd]

And the zip file containing the XUL, the CSS, and the JS ;).

[mouse]

You mean to tell me there's a use for SVG?! :eek:

This could come in quite useful for doing power/torque Vs rpm graphs if I can get it to work - downloading latest mozzy at the mo as it goes - is there anything I need to know, any instructions etc? Can it graph with multiple axis, such as two y-axis?

[jkd]

Originally posted by mouse
You mean to tell me there's a use for SVG?! :eek:

This could come in quite useful for doing power/torque Vs rpm graphs if I can get it to work - downloading latest mozzy at the mo as it goes - is there anything I need to know, any instructions etc? Can it graph with multiple axis, such as two y-axis?

SVG is perhaps the most useful XML application after XHTML I've used. A definite future replacement for Flash too. :p

Be sure to get the SVG enabled release of Mozilla.
The one I currently have you can grab here (http://ftp36.newaol.com/pub/mozilla/nightly/2002-07-15-08-trunk/mozilla-win32-svg-mathml.zip)

And currently, the grapher is very incomplete. It is currently locked at -10 < x < 10 and -10 < y <10 window setting, and there is no zoom capability. :(

I've been intending to add that very soon, but have yet to get around to it.

I still prefer to use my Ti-83 Silver Edition to graph functions, but once I get this working entirely, who knows.

So no, it isn't a real good graphing utility yet. And will never be up to par with Mathematica's graphing capability for example. Nor will it ever be as fast.

But it is a neat example of how with a little Javascript SVG can do amazing things. :)

[brothercake]

Indeed it can, and I agree it has the potential to replace flash - how many flash movies can be broken up into polygons and positioned in different places on the screen ... :thumbsup:

The GUI looks good .. but I couldn't make it show any graphs (i'm using RC2 at the moment)

[jkd]

Originally posted by brothercake
Looks good jkd, very impressive :) If it were me, I'd do a vml port as well .. you know, for accesibility ... but it isn't me ... that kind of maths is a bit out of my league :o What's a polar equation?

I have sworn myself to never touch VML. :D
SVG is a superior implementation, and there is an excellent plugin by Adobe for SVG in NS4+ and IE4+. Scriptable nonetheless - I could port this grapher to the Adobe plugin by simply changing the UI a little.

Anyway, polar equations are very useful. :)
A polar coordinate is in the form (theta, radius).

In a cartesian coordinate plane, you have (x,y) - you go x over on the x-axis, and y up on the y-axis.

In (theta,radius), picture a circle centered at the origin with the specified radius. The point it refers to is the point on the circle at theta.

polar form (theta, r) translates to:
(r*cos theta, r*sin theta) in cartesian.

With that out of the way, you can define functions with that:

r = theta
creates a very cool spiral.

r = 1
creates a unit circle

You are essentially defining a radius in terms of an angle.

You can apply polar coordinates to complex numbers too to make things much easier:

z = a + bi

Pretend (a,b) = (x,y), you have:

theta = atan(b/a)
r = sqrt(a*a + b*b)

Which can be represented:

z = r cis(theta)

(cis theta is a math shortcut for cos theta + i*sin(theta))

Or in complex-exponential form:

z = re^(i*theta)

(e is Euler's constant, or lim (1+1/n)^n as n approaches infinity)

In this form, multiplying, dividing, and raising powers to complex numbers is a synch, and much easier than the standard form.

z1 * z2 = r1*r2*e^(i*(theta1 + theta2))

As opposed to foiling out (a + bi) * (c + di)

Definitely one of the fun subjects in precalc :).

[brothercake]

Looks like you replied while I was editing ... but I never got to see it make any graphs, my comments were about the gui. Is it the older build i'm using or are there only some equations which produce visible graphs?

[jkd]

You need an SVG-enabled build of Mozilla.

By default, SVG isn't enabled because of some missing developers who haven't trilicensed their code or something...

Here is a link to the Mozilla 1.1 Beta SVG-enabled release:
http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.1b/mozilla-win32-svg-mathml-1.1b.zip

*sigh* I went through all that explaining polar equations/coordinates just for you to edit your reply. :D

[brothercake]

Sorry ... I was embarassed :p And that comment about VML seemed inflamatory on reflection ... and I never meant it like that so I decided to just take it out.

Ah well - thanks all the same, i appreciate the explanation :) cos it's my lack of advanced maths knowledge that makes vector progamming quiote hard for me ... I'll have a look at that tomorrow when I'm at work (leased line = always latest builds)

[brothercake]

Dude that rocks :) Good stuff. Zoom would be great, and it would be nice to be able to move the canvas around within it's space, so you can effectively zoom in on certain areas of the graph.

[jkd]

Originally posted by brothercake
Dude that rocks :) Good stuff. Zoom would be great, and it would be nice to be able to move the canvas around within it's space, so you can effectively zoom in on certain areas of the graph.

Its all coming when I find my motivation again for working on it. :)

All of that is easily done through SVGTransform. To be accurate though for non-linear functions, I am going to need to redraw every non-conic graph for the new viewing area.

[dsvg]

How about laying out your XUL to give more space for the graphing area. I took a few minutes to make some small changes which you can see in the attachment.

[jkd]

I see what you did. :)

The only problem is with a sidebar, you have a very limited "safe" width to work with, which is why everything is so cramped. I have another version of this on my hard drive I am working on and off on, which eliminates some of the cramping by using overflow: scroll on some of the more lengthy boxes to give it more vertical room, but there isn't much I can about width. If I convert this to an XPInstall package someday, I'd probably throw it under the Tools menu, and use a much larger window. :)

[dsvg]

Sure, just a suggestion. :) BTW, I think there is a project on mozdev something along the same lines. If you are interested you might like to have a look for it.

[jkd]

Originally posted by dsvg
BTW, I think there is a project on mozdev something along the same lines.

Perhaps you mean MozCalc? :)

Alex Vincent (another moderator here) is involved with that project to some extent, as well as the documentation effort at Mozilla. I have my own MozDev project (layeremu.mozdev.org), but I haven't updated it in a while... and as of late, been involved with the Mozilla SVG project. :)

[dsvg]

No, I think I meant http://svggraphs.mozdev.org but on a closer look I find it is actually intended to create stuff like pie charts, not function graphing. My mistake.

Can't say that I am sorry to see your project slip. NS4 is a dinosaur and it and it's behaviour should be relegated to the past. :) Anyone that argues that they are not going to try to keep their code portable by focusing on the W3C standards just because the Mozilla project decided not to support layers is talking rubbish IMNSHO. Mozilla != Netscape. It is a total rewrite and, although initiated by Netscape, it does not belong to Netscape. But then you know that. :)

Your grapher project is a lot more interesting and I look forward to seeing it progress. Nice stuff. :cool: BTW, was it inspired by Alex's attempt (that was some time ago now though).

[jkd]

Originally posted by dsvg
Can't say that I am sorry to see your project slip. NS4 is a dinosaur and it and it's behaviour should be relegated to the past. :) Anyone that argues that they are not going to try to keep their code portable by focusing on the W3C standards just because the Mozilla project decided not to support layers is talking rubbish IMNSHO. Mozilla != Netscape. It is a total rewrite and, although initiated by Netscape, it does not belong to Netscape. But then you know that. :)

I get that a lot. ;) My primary reason behind the project was to instantly update all old DHTML effects previously written for NS4 so that they would work in Gecko. It was my hopes that the author would write a native Gecko implementation of their effect eventually, but this would provide them a little slack. ;)


Originally posted by dsvg
Your grapher project is a lot more interesting and I look forward to seeing it progress. Nice stuff. :cool: BTW, was it inspired by Alex's attempt (that was some time ago now though).

The idea of an SVG grapher sprang from his own implementation, but his was Adobe SVG Viewer-only, and since I use Mozilla, I decided to write one based on Mozilla's SVG implementation. Further development on my grapher is pending bug 163068 (implement pan and zoom controls). This would allow me to sneak out of writing my own window controls ;). Naturally though, I assigned myself ownership of that bug because I already partially have the patch for it written in XBL. :)

(It is *very* awesome being able to replace a file in a jar file - svgBindings.xml in this case, and see it correspond to the rendering of SVG! Mozilla is truely a browser anyone who has a knowledge of XML and Javascript can modify.)

[dsvg]

Yeah, the fact that you can actually make contributions to Mozilla and fix the things you want fixed is certainly one of its strong points. At least to anyone that has the knowhow. It is a great feeling. :)

Hopefully that dependency will be fixed so that your patch can go through soon. Mind you it is the colors problem that really bugs me. Now that they have sorted out the image/svg+xml mime type crasher it is my most hated bug. Unfortunately it is way to complex for me to try to tackle. Maybe someday I will know enough. :)

[jkd]

Originally posted by dsvg
Mind you it is the colors problem that really bugs me. Now that they have sorted out the image/svg+xml mime type crasher it is my most hated bug.

The colors problem was in the libart backend. If you download a GDI+ Windows SVG build, you'll find that even in 32bit color the colors display correctly. :)
http://www.croczilla.com/svg/ for links.

[dsvg]

I didn't realize that the GDI+ builds fixed the color problem too, thanks. I was going to wait until alex releases a post 1.1 SVG build before downloading.

Do you know the story behind all this libart mess? I was aware there have been problems but don't know the details. Why was it dropped?

[jkd]

Originally posted by dsvg
Do you know the story behind all this libart mess? I was aware there have been problems but don't know the details. Why was it dropped?

Alex Fritze changed the SVG implementation in Mozilla to be modular. He merely "plugged in" GDI+ for Windows builds because it had less issues than libart.
Linux SVG builds still use libart, and still have the color issue because of that.

If you so desired, you can still build Mozilla's SVG with libart for Windows with the right configuration options.

[dsvg]

Thanks jkd. Aren't there also licensing problems with libart? Thought I heard something along those lines but I might be mistaken.

[jkd]

Originally posted by dsvg
Thanks jkd. Aren't there also licensing problems with libart? Thought I heard something along those lines but I might be mistaken.

I believe so.

[Corwin5772]

I have examples and resources at
http://www.issi1.com/corwin/sniffers/detect_plugin.xml
http://www.issi1.com/corwin/sniffers/combine.html
http://www.issi1.com/corwin/sniffers/bezier.xml
e.g. an annoted Bezier curve in a transparent layer over Tex rendered with MathML