I'm working on a project where workers have to locate components on a plane. Planes are going to be scanned and put on a web app where, after that, user select where are placed.
My first idea was img map (where I work, computers still have IE, we are trying to change to Firefox or Chrome) but I'm not sure how make an area visible for user (some kind of dynamic overlay coloured area), so my second suggestion was to use a HTML 5 canvas.
Is better to work with an img map and find some solution to overlay points at least or work with canvas?
Note: where I work, they have to change to non-Windows OS, and use Firefox-based browser or Chromium, so the browser have not be seen as part of the problem.
Yes, I'd suggest to use a canvas to do that.
Quoting from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial:
<canvas> is an HTML element which can be used to draw graphics using
scripting (usually JavaScript). It can, for instance, be used to draw
graphs, make photo compositions or do simple (and not so simple)
animations. The image on the right shows some examples of <canvas>
implementations which we will see later in this tutorial.
<canvas> was first introduced by Apple for the Mac OS X Dashboard and
later implemented in Safari and Google Chrome. Gecko 1.8-based
browsers, such as Firefox 1.5, also support this element. The <canvas>
element is part of the WhatWG Web applications 1.0 specification also
known as HTML5.
This tutorial describes how to use the <canvas> element to draw 2D
graphics, starting with the basics. The examples provided should give
you some clear ideas what you can do with canvas and will provide code
snippets that may get you started in building your own content. Before
you start
Using the element isn't very difficult but you do need a
basic understanding of HTML and JavaScript. The <canvas> element isn't
supported in some older browsers, but is supported in recent versions
of all major browsers.The default size of the canvas is 300px * 150px
(width * height). But custom sizes can be defined using CSS height and
width property. In order to draw graphics on the canvas we use a
javascript context object, which creates graphics on the fly.
Related
I created animation in flash and converted it into HTML5 using Swiffy.
I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.
Thanks!
While no option is perfect, there are a few choices:
1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444
2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/
3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/
4.) There is the option to display flash for IE8 and below.
5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.
Based on your reason for the animation - I would recomend 4 or 5.
There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):
Chrome Frame: if you're going to get an extension, get that one
Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back.
If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg.
You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.
The best option probably is to diplomatically encourage them to use a real browser, but then it's not always possible for those who live under the rule of an unskilled IT department ;)
I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
Other than the fact that it's not supported in IE, no.
canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...
I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?
Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit
This question is for a web application.
And maybe it's a stupid question but I was wondering if there is a way to
generate a polygon with 4 points, so that the user can himself drag
each point to create it's own (As an example, let's say that we want to remove a window from an image that it is not at a normal angle) .Is it possible?. I can't seem to
find anything after a few hours of search.
Look into the SVG and Canvas APIs. These will allow you to do vector drawings that can be updated via Javascript. For your stated purpose, updating the DOM of SVG documents might be easier. Canvas is more like a 2D bitmap, so you'd need to work out a lot of the drawing code yourself.
SVG Specs: http://www.w3.org/Graphics/SVG/
Canvas Specs: http://www.whatwg.org/specs/web-apps/current-work/
Note that SVG only works in IE with a plugin. Canvas works in IE only with Google exCanvas support.
Sounds like a job for the <canvas> tag or a Flash interface.
I'm considering developing a website similar to stackoverflow, but the answers may also consist of drawings (schematics, in this case). I want to have an area in the answer form where they can make this schematic without requiring special plugins, etc.
Are we to the point where SVG has or should have critical mass soon (1-2 years) such that designing a website where script-run SVG as a primary feature is reasonable (ie, requiring Firefox or another SVG/AJAX compliant browser)?
What are some good resources for learning cross platform SVG scripting (likely in javascript)?
-Adam Davis
Raphael looks like an interesting take on the problem of cross-browser vector graphics.
Unfortunately, I don't have an answer, but I do have three pointers to projects that you could look at.
The first is the Lively Kernel by Dan Ingalls (yes, the Dan Ingalls) at Sun Labs. It is an implementation of a Smalltalk Virtual World in JavaScript on top of SVG. More precisely, it is an implementation of the Morphic GUI framework from Squeak Smalltalk in JavaScript using SVG and a port of (parts of) Squeak Smalltalk in JavaScript.
Or, if you're not a Smalltalker and the above doesn't make sense to you: it's an Operating System, written in JavaScript with the JavaScript interpreter as the CPU, SVG as the graphics card and the browser as the computer.
This is about as extreme as it gets, when it comes to JavaScript and SVG. And it only fully works in Safari 3 and partly in Firefox 3, although there is an experimental port to Internet Explorer as well.
The second project is John Resig's Processing.js port of the Processing visualization language to JavaScript. It uses the <canvas> element instead of SVG precisely because of the problems that you mentioned. This one however, only works in Firefox 3.
The third one is Real-Time 3D in JavaScript by Useless Pickles. It uses only JavaScript, DOM and CSS and no SVG or <canvas> or Flash or whatever. And it is portable to almost any browser, including Internet Explorer 7 and up. Doing 2D should be even easier than this.
Between those three projects you should be able to find some inspiration and also to find some people who tried to push the envelope with JavaScript and SVG or JavaScript and Graphics and can tell you what works and what doesn't.
Conclusion: doing cross-browser SVG or cross-browser <canvas> is nigh impossible, but with a little bit of craziness, cross-browser graphics without SVG or <canvas> is possible.
SVGWeb is a script that adds near-native SVG capabilities to IE using flash. All the other major browsers support SVG.
http://code.google.com/p/svgweb/
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I've done largish front ends using XULRunner and SVG, but nothing on the web which had to cater for IE.
2/ The two I referred to most often were the SVG pages on mozilla.org and this SVG DOM reference . All of my SVG links are here on delicious
There's one existing editor at http://www.bpel4chor.org/editor/; also if all you want is schematics where all arcs are on a grid, you can do that quite well using divs and images without SVG. Or you could just go the lo-fi route
As #jwmittag mentioned <canvas> is an option.
It works in Saffari and Firefox 3, Opera 9, and people are developing support for IE.
You could easily capture mouse clicks associated with the current tool and properties.
Redrawing the canvas on every page display.
I just finished a project using <canvas> and it's a simple and very powerful API to work with, especially if you have ever done any OpenGL or Cairo work.
Good Luck, sounds like a cool project.