Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 52    Views: 155

nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
03/26/12 02:35 AM (13 years ago)

Need help with drawing and sound recording app

Hi, I need to create app with options where you can draw on canvas wit options like select color, size etc. and also where you can record sound and play that sounds. I found html5 script for drawing and I hope it will works but does anybody can help me with that or if someone is interested to earn some money on this project please let me know. thx
 
Skyr0s
Code is Art
Profile
Posts: 196
Reg: Jan 26, 2012
Hong Kong
4,310
like
03/26/12 06:39 AM (13 years ago)
I believe that if you found some HTML code to do so, you could try it out. Just paste the code in a Custom HTML Page, and view the result on the device.
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/26/12 09:56 AM (13 years ago)
It is not problem to test this I have a more complex project and I need somebody to work with me on this project
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 10:06 AM (13 years ago)
Any chance you an share the html5 script? Would like to have a look.
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/26/12 10:10 AM (13 years ago)
Hi MacApple yes I can share with you, just tell me your email and I will send to you
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 10:12 AM (13 years ago)
Post a link perhaps so the group can benefit?
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/26/12 11:01 AM (13 years ago)
Here it is Create a Drawing App with HTML5 Canvas and JavaScript and source of this is here http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 11:04 AM (13 years ago)
Nice one, good share. Will have a play around this week hopefully. Cheers buddy!
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 11:06 AM (13 years ago)
Is the html5 script you've got specifically for mobile? If it's just for browsers there may be a bit of work involved for touch events as you'll need to replace the mouse events, particularly where you hold the left mouse button down and drag to draw. There are tons of drawing scripts out there, but not so many for mobile. So if you've got one, feel free to share! :)
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 11:06 AM (13 years ago)
Beat me to it, thanks!
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 11:08 AM (13 years ago)
Ah, I've seen that one, won't work without modification. See my comment above
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 11:09 AM (13 years ago)
Yeah, looks like it is for web app not touch.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 11:15 AM (13 years ago)
It can't be massively difficult (!!!?!!!?!??!!) You can change the crayon, sharpie and thickness of the line with a screen tap, it's just the actual drawing that's the problem.
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 11:17 AM (13 years ago)
Not going there.
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/26/12 11:30 AM (13 years ago)
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/26/12 11:35 AM (13 years ago)
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 12:48 PM (13 years ago)
Now that looks interesting :)
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 02:51 PM (13 years ago)
Damn, that's just drawing to the canvas programmatically, not with touch.
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 02:51 PM (13 years ago)
Just tried it as well! lol.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 04:48 PM (13 years ago)
Finally! This works, just able to draw a black scribbled line, slow, laggy and a little bit rubbish, but at least it's a start... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" /> <title>sketchpad</title> <script type="text/javascript" charset="utf-8"> window.addEventListener('load',function(){ // get the canvas element and its context var canvas = document.getElementById('sketchpad'); var context = canvas.getContext('2d'); // create a drawer which tracks touch movements var drawer = { isDrawing: false, touchstart: function(coors){ context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function(coors){ if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function(coors){ if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; // create a function to pass touch events and coordinates to drawer function draw(event){ // get the touch coordinates var coors = { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; // pass the coordinates to the appropriate handler drawer[event.type](coors); } // attach the touchstart, touchmove, touchend event listeners. canvas.addEventListener('touchstart',draw, false); canvas.addEventListener('touchmove',draw, false); canvas.addEventListener('touchend',draw, false); // prevent elastic scrolling document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false); // end body.onTouchMove },false); // end window.onLoad </script> <style type="text/css"><!-- body{margin:0;padding:0; font-family:Arial;} #container{position:relative;} #sketchpad{ border: 1px solid #000;} --></style> </head> <body> <div id="container"> <canvas id="sketchpad" width="320px" height="480px"> </canvas> </div> </body> </html> Source: http://dev.opera.com/articles/view/html5-canvas-painting/
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 05:10 PM (13 years ago)
A little bit rubbish my bahooky, v sweet, great work and start.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/26/12 05:19 PM (13 years ago)
bahooky? lol! Times like this I really wish I had some programming flair. Loads of stuff I'd love to do with this. By the time I figure it out, phones will be microchips embedded in the ear and controlled by thought!
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/26/12 05:25 PM (13 years ago)
I hear you. Flair lacking as well as time these days. We can do it!
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/27/12 03:42 AM (13 years ago)
hey raveyd this is great thnx for share
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/27/12 06:26 PM (13 years ago)
Getting better! Modified: http://www.filedropper.com/draw Original: http://www.tricedesigns.com/2012/01/04/sketching-with-html5-canvas-and-brush-images/ Can't get the save feature to work with Android though, perhaps it'll work with iphone?..
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/27/12 06:31 PM (13 years ago)
Will have a look tomorrow, have an app that this kind of feature would be perfect for next update. Yir a good man Charlie Brown.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/27/12 06:34 PM (13 years ago)
Thanks Mac! Hope it's useful.
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
03/27/12 06:36 PM (13 years ago)
10% profit share to you if I get it going.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/27/12 06:43 PM (13 years ago)
haha! Good luck, we'll meet up somewhere hot and sunny next year!
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/28/12 12:26 AM (13 years ago)
hey raveyd great job I test on my iPhone and when you want to save it open new window with the created image and I Have options to 1 add bookmark, add to reading list, add to home screen, mail link to this page, tweet and print
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/28/12 01:03 AM (13 years ago)
Did you see this is great script http://mrdoob.com/projects/harmony/#fur
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/28/12 01:27 AM (13 years ago)
Did you see this is great script http://mrdoob.com/projects/harmony/#fur
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/28/12 03:06 AM (13 years ago)
That's amazing! Back to the drawingboard..
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/28/12 03:58 AM (13 years ago)
It's very good, it's so lightweight it can be put in assets and used offline. Cool.
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/28/12 04:13 AM (13 years ago)
yes it is very cool
 
nickrick32
Apple Fan
Profile
Posts: 111
Reg: Feb 28, 2011
location unknow...
1,110
like
03/29/12 07:02 AM (13 years ago)
Hi raveyd did you try to customize harmony?
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
03/29/12 07:53 AM (13 years ago)
There's nothing more to do to that, it's brilliant! The only issue is that he's deleted the source code from github, but as there's no external files used, the page source can be used instead. I've got this ridiculously ambitious long term goal to build an app that lets the user make games using their own sprites and music. Thanks to html5, I think I've found every tool I need, now it's just a simple little matter of making them all work together! hahahahahaha!!!!
 
mysps
Code is Art
Profile
Posts: 2082
Reg: May 14, 2011
Palma
33,320
like
04/03/12 03:29 AM (13 years ago)
Following up to this post.. Thanks a lot for starting it! @raveyd I found another page that had a similar canvas code which you posted. I've found a way to change the color and size of the line. Doesn't lag at all in iOS. here is my code. i use a red thick line, with the HTML document with a nice background image for my sketchpad! fun here's the code via: http://tenderlovingcode.com/blog/web-apps/html5-canvas-drawing-on-ipad/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" /> <title>sketchpad</title> <script type="text/javascript" charset="utf-8"> window.addEventListener('load',function(){ // get the canvas element and its context var canvas = document.getElementById('sketchpad'); var context = canvas.getContext('2d'); context.fillStyle = '#ff0000'; // red context.strokeStyle = '#ff0000'; // red context.lineWidth = 4; // create a drawer which tracks touch movements var drawer = { isDrawing: false, touchstart: function(coors){ context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function(coors){ if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function(coors){ if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; // create a function to pass touch events and coordinates to drawer function draw(event){ // get the touch coordinates var coors = { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; // pass the coordinates to the appropriate handler drawer[event.type](coors); } // attach the touchstart, touchmove, touchend event listeners. canvas.addEventListener('touchstart',draw, false); canvas.addEventListener('touchmove',draw, false); canvas.addEventListener('touchend',draw, false); // prevent elastic scrolling document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false); // end body.onTouchMove },false); // end window.onLoad </script> <style type="text/css"><!-- body{margin:0;padding:0; font-family:Arial;} #container{position:relative;} #sketchpad{ border: 1px solid #000;} --></style> </head> <body> <div id="container"> <canvas id="sketchpad" width="1024px" height="768px"> </canvas> </div> </body> </html>
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
04/03/12 04:22 AM (13 years ago)
Nice! I love this html5 canvas stuff, but I'm spending far too much time on it This is my latest effort, a mod of the mrdoob script posted above - http://a-webdomain.com/test4/
 
mysps
Code is Art
Profile
Posts: 2082
Reg: May 14, 2011
Palma
33,320
like
04/03/12 04:57 AM (13 years ago)
yeah i tried that script but didn't like it. i just needed something basic to scribble. the save option is good on that one however i would like the background added and i couldnt figure out how to do it.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
04/03/12 05:32 AM (13 years ago)
Take a look at this, it's sort of a basic scribble, but brilliant! - http://hakim.se/experiments/html5/sketch/ - the grid is a background image. If you check it out, go to the gallery and click on one of the images, very cool! The code is open source too.
 
mysps
Code is Art
Profile
Posts: 2082
Reg: May 14, 2011
Palma
33,320
like
04/03/12 06:51 AM (13 years ago)
thanks, its nice! although it couldn't get it to save properly for ios. where is the source code located?
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
04/03/12 07:16 AM (13 years ago)
hakim github repository: https://github.com/hakimel/Sketch/
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
04/03/12 08:50 AM (13 years ago)
I have other stuff to do, stop giving me cool links and ideas. Yir pal MacApple who loves this thread.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
04/03/12 10:26 AM (13 years ago)
@MacApple - I haven't done any real world work for a week! I'm facinated by this stuff.
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
04/03/12 10:29 AM (13 years ago)
I hear you mate. Some slick stuff, future is bright.
 
mysps
Code is Art
Profile
Posts: 2082
Reg: May 14, 2011
Palma
33,320
like
04/10/12 03:44 PM (13 years ago)
had an app approved today with only about 5 pages via buzztouch - html5 using hype - html5 using the script above drawing app - basic contact page - basic about page approved for ios with no problems.. i was expecting them to write back that there werent enough ios features... anyway, fyi for others who might want work with more animations with a sketchpad and html5 via hype!
 
Vali
buzztouch Evangelist
Profile
Posts: 193
Reg: May 22, 2011
Bucharest
5,830
like
04/10/12 11:33 PM (13 years ago)
Congrats mysps! Do you have a link to your app so we can see how it looks?
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
04/26/12 05:21 AM (13 years ago)
Dropped a couple of these into an app that I'm going to submit this weekend, slick stuff. Love the harmony on iOS and the doodle red (other colours are available!) is a nice wee bonus screen.
 
Paul Rogers
Android Fan
Profile
Posts: 2524
Reg: May 30, 2011
UK
35,740
like
04/26/12 05:30 AM (13 years ago)
Love Harmony, I've set up a website for it and working on it when I have a bit of time. Made a lot of new brushes for it too - easier than I thought it'd be. Good luck with the apps Mac!
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
04/26/12 06:06 AM (13 years ago)
Nice one. Might have a look at brushes before I submit then. Will let you know. Seems to fit in well for a couple of apps I'm doing but may well hold off to customise a bit. Nearly Friday.
 
Rad Doc
Apple Fan
Profile
Posts: 653
Reg: Oct 08, 2010
USA, NYC
8,580
like
05/21/12 08:50 AM (13 years ago)
@Mac,Which code did you use for your Tattoo app.?
 
MacApple
Apple Fan
Profile
Posts: 4675
Reg: Oct 25, 2010
USA
61,150
like
05/21/12 09:03 AM (13 years ago)
Used both of them mate.
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.