I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.
The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?
I have no idea where to even start, let alone solve the actual problem...
It depends on the target browser.
If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).
If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).
Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.
Related
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
I am trying to create a navigation bar that will sit at the top of my website for all of my pages.
I am much more familiar with the code that the Raphael library uses, and it will be much simpler for me than creating a bunch of tiles and the corresponding JavaScript.
Is there any problem with using a canvas for these sorts of purposes?
Does anyone have a better idea?
Thanks in advance for any advice.
UPDATE: Problems with render speed? Again, I'm totally open to alternate suggestions!
Short answer: Probably not the greatest idea.
Longer Answer: As logical Chimp hinted, using the canvas for a crucial element is certainly a bad idea, as browsers with no javascript support and/or no canvas support (including web spiders, and browsers that are for various perceptual differences (blindness, etc)) would see nothing. (for people, this means they won't find your sub pages. For web spiders (Google, etc.) this means no one would ever find your sub pages.)
If you want to use Raphael or another canvas based solution, for accessibility you should start with an html based navigation element (like ul li in a div as has been done for years), and then you'll replace that via javascript when the page loads (see HTML5 Canvas replace to <div> for an example of how to do this (includes a jsfiddle link)
The reason it's not the greatest idea is that you'll need to ensure that you keep your html nav element in sync with your canvas based one - although I guess if it's being generated by a server side process (e.g. wordpress) it's not too much more work to build the html nav element, and then you only need to test it regularly to ensure it's working.
I am trying to combine canvas that change colour in response to consumer's choice. I have placed PNG's onto multiple canvas with transparent backgrounds. I need to combine them and save a png of the final image to pass to the basket and post to my server. Can anyone help? You can see the page and code at http://www.ewe.potberrys.com/colour_image_3.php. Please excuse the quality of the code. I am new :) Thanks
I would suggest do not save the PNG. Just save the colors with your order (you have to do it anyways) and render the helmet in the basket with the same approach you do in the selector tool.
It would probably be possible (but I am not 100% sure) to generate an image on the client side in Chrome and post it via a hidden form, but the stack is so experimental, that it is not ready for production.
A little easier, one can do it with ImageMagic and PHP on the server side. I am not a PHP expert, but you can easily google an example code - there is plenty.
My advice: do not bother. Just have tidy up your JavaScript that renders a helmet to be usable in multiple places with multiple dimensions.
I'm writing a quite complicated, big and long living (it might display for many days) web page that will also need icons. These icons are supposed to be SVG graphics. Depending on the place on the page the SVG should be recolored by JavaScript calls (jQuery or even jQuery-SVG is fine).
So my questions are:
What's the best way to include the SVG in the web page?
<img>
<object>
jQuery(...).svg({loadUrl:...})
...
How to "multiply" them?
Pre-load in a hidden <div> and clone()?
Just load on demand?
What's the best way to setup the SVG? (All icons in one file on different layers? All icons in one file separated by place? One file per icon?)
What's the best way to recolor the icons then? (Think of quite abstract icons consisting out of a line graphic where that line should get a different color)
Required browsers are the usual compliant modern ones (Firefox, Chrome, Opera, Safari) for normal PC as well as mobile (Android, iOS). Internet Explorer compatability is not required.
If you want to recolour it then <img> is out straight away as you can't change images with javascript either externally or internally.
If you put clone data then you'll need to make sure that any id attributes remain unique within a single document so perhaps having things as <object> would be easiest for you.
You can use straight DOM calls to change the colour of things in an SVG graphic or you can use jquery if you want.
For the rest you'll probably have to try things and see how they work out for you.
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