A friend of mine has a slate sign company and he found a flash application on another website which he would like to have himself, but we dont want to go down the Flash route so we looking at HTML 5.
I would liek to build a similar application to the Flash application above in HTML 5 and in honesty looking for a starting point, so wondered if anyone can point me to a tutorial to start from or have a starting point for me so I can give it a go.
The idea is to first select a slate size, then add text on top in 3 rows, change the font size possibly, and font type, and add a few little things liek that, but to offer it as a build your won slate sign application for his site.
You should be able to do something similar using javascript ( possibly with the JavaScript version of Imagemagick ) - although I do not use it and so am not sure.
Another method would be to use GD or Imagemagick and php but you would need to refresh the page every time a change is made. It would probably be best to input all the data and when the form is submitted it would create the image.
Ajax may be another possibility but again I do not use it and am not sure.
Thanks for getting back to me, ideally he would like it so that when you say add some text it does it straight away, or change font etc, rather than inputting it all and then seeing what it looks like.
Will have a look at the ideas you gave me, and see what options are there.
I believe sites like Zazzle where you design your own shirt do ajax requests to the server, so instead of page refreshes you get image refreshes only. I agree that having someone put in all the info and only seeing the result at the end is more difficult than seeing what you do as you go.
But I don’t think it would be very simple. You might possibly want to look at the <canvas> tag however any older browsers you’d want to support would need something else entirely written for them (unless someone’s made a nice canvas polyfil). Canvas has some ideas taken from SVG like primitive shapes and basic events/functions like easing, transforms etc.
When trying to make a shirt design on a site, I would have a form where I inputted stuff, and checkboxes/radios to choose what I could do (so it was limited). For example I could first write text, and hit enter. I could then select the text and choose a font, hit enter. Then I could select the text again and choose “center align” and hit enter. Each hitting of Enter would refresh the image. Something on the back end was probably regenerating a new image each time.