|
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning.
Appreciate the feedback in advance.
Marc
|
|
|
|
|
But surely there's a spiffing framework you can use? Just plug arcJs into canvasSgv using the latest MVCCMVMCVMVC architecture to leverage server side client API generators. 
veni bibi saltavi
|
|
|
|
|
Nagy Vilmos wrote: using the latest MVCCMVMCVMVC architecture to leverage server side client API generators.
Send code plz! 
Marc
|
|
|
|
|
(MVC)4
Software Zen: delete this;
|
|
|
|
|
As much as I know all the latest graphics engines in JavaScript uses HTML5 canvas, mostly via WebGL...
If you want to do it yourself, check WebGL[^]...
Or search the web, you may find this too - What is Unreal Engine 4[^], which is probably too much...
Skipper: We'll fix it.
Alex: Fix it? How you gonna fix this?
Skipper: Grit, spit and a whole lotta duct tape.
|
|
|
|
|
Interesting, but both are too much for what I'm looking for -- basic 2D shapes, texturing and shading is totally unnecessary. That said, maybe I should set my goals a tad higher.
Marc
|
|
|
|
|
|
It sounds like SVG will do what you want. SVG is (as the name implies) vector graphics, basic shapes, etc. while the HTML5 canvas is more about bitmap manipulation. This is not to say that both cannot do both but for line drawing, scaling drawings, etc. SVG has the edge perhaps.
I have a web-based application that draws stylized 2D maps and SVG works great. I actually use jquery.svg.js to assist although I have been trying out raphael.js recently.
- I would love to change the world, but they won’t give me the source code.
|
|
|
|
|
What do you use for your SVG drawings? I'm using AutoCad, because it has the technical, i.e. geometric features I want readily accessible, much more than my other tool, InkScape, and Expression Design seems to lack them altogether.
I love AutoCad, but it seems a but of overkill, and there's a conversion process I haven't got to yet because I haven't finished my first drawing, a line diagram of the Qabbalistic Tree of Life, with layers for the Sephiroth, the Paths, the Hebrew glyphs, and the other symbols.
|
|
|
|
|
I have an application I wrote myself to generate the SVG drawing parameters. My most commonly used objects are simple hexagons or partial hexagons, circles, squares plus a couple of complex images of mythical beasts done by hand.
- I would love to change the world, but they won’t give me the source code.
|
|
|
|
|
I've actually even considered drawing the diagram on an A3 sheet of graph paper, the manually just copying the co-ords into SVG. The paper drawing itself will be so much simpler and quicker than with a cad tool.
|
|
|
|
|
If you don't have to do it repeatedly, sometimes graph paper and a pencil works best!
- I would love to change the world, but they won’t give me the source code.
|
|
|
|
|
Fast and "dirty" and better supported at the moment: SVG
Long (more middle) term: HTML5 Canvas, great "standard"
modified 19-Jan-21 21:04pm.
|
|
|
|
|
I'm still waiting for W3C to accept my HTML <WinForm> element proposal 
|
|
|
|
|
Sander Rossel wrote: I'm still waiting for W3C to accept my HTML <WinForm> element proposal
Don't I wish!
Marc
|
|
|
|
|
cytoscape.js. Simple and awesome!
___ ___ ___
|__ |_| |\ | | |_| \ /
__| | | | \| |__| | | /
|
|
|
|
|
Sanjay K. Gupta wrote: cytoscape.js. Simple and awesome!
Looks impressive. But I'm not really looking for a charting package, but more something that can, for example, be used to create flowcharts. cytoscape seems overkill?
Marc
|
|
|
|
|
depends what you want to accompliah
if want graphics that basic shapes could make, and marked up, and interactive the same as "normal" html markup is (like hover and click events), then SVG
check out d3.js[^] all that is SVG and document driven interaction.
If have specific graphics stuff that you need to do, and do not care so much about user interaction (unless you look at libraries and want to deal with Pixel<> object mapping relations), then Canvas your thing.
|
|
|
|
|
Wholeheartedly agree.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
maze3 wrote: if want graphics that basic shapes could make, and marked up, and interactive the same as "normal" html markup is (like hover and click events), then SVG
Yes, exactly, thank you.
I've just start poking around d3, will explore more.
Marc
|
|
|
|
|
Kornfeld mentioned this web-app today, here, in his "smallest circle" programming challenge: Sketchometry [^]
I'm impressed by its speed of drawing and grouping complex shapes. etc.
Wonder if you might get some ideas from it.
cheers, Bill
«There is a spectrum, from "clearly desirable behaviour," to "possibly dodgy behavior that still makes some sense," to "clearly undesirable behavior." We try to make the latter into warnings or, better, errors. But stuff that is in the middle category you don’t want to restrict unless there is a clear way to work around it.» Eric Lippert, May 14, 2008
|
|
|
|
|
Personally, I like the single level of indirection SVG would use.
Everything Renders it quite nicely, and if you DID need to do something relatively unique, you could easily find the SVG example.
Very easy to dump an SVG file and find the issue. Especially vs. Canvas Writing commands.
Also, great for importing into a graphics package as vectored and using it in literature.
Seems obvious as someone who knows NOTHING about your goals 
|
|
|
|
|
Kirk 10389821 wrote: Seems obvious as someone who knows NOTHING about your goals
This but in a browser.
SVG seems to be the winner here in this informal questionnaire.
Marc
|
|
|
|
|
Hah, that reminds me of a DOS program I used: EZ-Flow. It had a great feature/mode: Keyboard!
You would type a 1 letter code for each object (D for Decision), hit ENTER and then hit an arrow key, it would draw the decision box, and the arrow in that direction and then you type R (I think) for routine, gives a rectangle, completes the arrow for you.
If you kept typing, it would fill in the caption until you hit ENTER or something (this was like 1987).
The funny part was that I could CRANK OUT Flowcharts really quickly. We had to use them in our documentation, LOL. Everything aligned to grid, which was fine.
==
But now you have me curious. Are you going to use SVG For the Individual objects, or for the Entire Graph? (I assume the entire graph, since it should handle the moving of attached lines perfectly well).
Good luck. Won't it be funny if it was easier to implement than everything you had to do to make the desktop app?
Kirk Out!
|
|
|
|
|
Kirk 10389821 wrote: EZ-Flow.
I vaguely remember that program.
Kirk 10389821 wrote: Won't it be funny if it was easier to implement than everything you had to do to make the desktop app?
We shall see!
Marc
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
