Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Writing on screen

Author
Message
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 21st Feb 2013 17:45
I'm about to start a mini project to allow people to sign their name on their touchscreen. Before I do, I thought I'd get the opinion from the community on the best way to achieve this. Here are my thoughts so far...

1a. once the user is writing, take waypoints at a set distance (5 units) and join them with lines or...

1b. continually paste circles to the screen wherever the finger is. I haven't looked at the implications, but I imagine this will involve pasting images to the screen, the number of sprites would get too big too quickly. I need to refer to the help files to work out how we permanently paste to the backdrop.

2. As an enhancement, allow the line to "bleed" by overlaying a semi-transparent larger circle along the line, with a slight delay.

3. Only work with the first finger to touch the screen, ignore any other accidental taps.

Any other thoughts welcomed!

Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 21st Feb 2013 19:14
I would probably favour the sprite waypoint method while the user is writing - only dropping a sprite when the movement is a certain distance from the last one. this would give a quick response and rough feedback to the user.

When there is time - when the user pauses or lifts the finger / stylus - convert to something like bezier curves - for more efficient storage and more accurate redrawing.

Redrawing the curves - well that's a whole other question
Mobiius
Valued Member
21
Years of Service
User Offline
Joined: 27th Feb 2003
Location: The Cold North
Posted: 21st Feb 2013 20:38
Actually, a Bezier curve option, dropping a keyframe every 0.1 of a second where there is a click event should provide quite accurate and reproducible results. Simply store the coords of the keypoints in an array.

I live for video games! (And beers, and football, and cars!)
See what I live for here: [url]http:\\www.TeamDefiant.co.uk[/url]
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 21st Feb 2013 21:28
I'd love to see the bezier curve idea, and the code. I have used some drawing techniques in AppGameKit and this worked pretty well for drawing like a pencil / pen:



this.mess = abs(sin(times#))
Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 21st Feb 2013 23:37 Edited at: 21st Feb 2013 23:38
I was put off Beziers for a long time - scared off by all the maths stuff

But the Wiki page on it ( http://en.wikipedia.org/wiki/B%C3%A9zier_curve ) has a set of images which just clicked with me and it all fell into place.

They start with this one.



Which is achievable without any complex maths at all.

Attachments

Login to view attachments
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 22nd Feb 2013 09:52
using DrawSprite is much better than create much sprites.

i had made with BlitzMax
out p
in 4 Points p1-p4
mu from 0 to 1
tornado
18
Years of Service
User Offline
Joined: 21st Jul 2005
Location:
Posted: 22nd Feb 2013 11:12
Hi BatVink and all
I've played with this around for some time (made a drawing app in tier2, not yet published, screenshots here http://kirschapps.com/chalkandcrayon.html). I agree the main issue is that touch {x,y} coords are not sampled continuously but 60 (or less) times per second. To solve this I've also came to approximation from current to next touch, storing X and Y in variables, and then filling the gap with certain amount of circles or whatever "brush" shape you want (sorry guys no Bezier curves, although can be implemented in a few more lines). I'll just put here a very raw source code to share:


BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 22nd Feb 2013 11:23
I'm glad I started this thread, lots of interestng ideas

I like the bezier curve idea. I'm not sure how to position the handles required by the curve though?

When I created my track editor, I started with a circle made up of numerous curves. Positioning the handles was easy for a circular shape.

But for an unknown set of points, how would I position the handles? I guess I need to define the tangent of each point somehow? Or perhaps there is a simpler type of c-spline that doesn't require any additional points other than the line itself?

JimHawkins
14
Years of Service
User Offline
Joined: 26th Jul 2009
Location: Hull - UK
Posted: 22nd Feb 2013 12:43
If you could access the background image data you could set the pixel colours - interpolating where necessary.

-- Jim DO IT FASTER, EASIER AND BETTER WITH AppGameKit FOR PASCAL
tornado
18
Years of Service
User Offline
Joined: 21st Jul 2005
Location:
Posted: 22nd Feb 2013 13:25
hmm there is good one implementation here http://www.effectiveui.com/blog/2011/12/02/how-to-build-a-simple-painting-app-for-ios/ in Creating Smooth Lines section, hopefully this could be of help, although obj-c one

Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 22nd Feb 2013 20:36 Edited at: 22nd Feb 2013 20:53
Quote: "I like the bezier curve idea. I'm not sure how to position the handles required by the curve though?"

I did a few tests some time ago and found that a handle length of half the distance from previous node was a good starting point.

The position was based on the change in direction of the (unbeziered) line as it passed through the node - at 90 degrees to the middle if I recall.

Easier with a sketch...



Edit: replaced with bigger image with annotations scrawled in green.

If you work on the change in x and y, rather than use angles and distance, you can work most of it through with just addition, subtraction and (for the 90 degree turns) swapping x's and y's.

Or you can use angles. I honestly don't know which would be faster as AGK's trig functions are pretty fast.

Attachments

Login to view attachments
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 22nd Feb 2013 22:58
I used similar lengths for my circular bezier curve (and interestingly a length of about a third the distance made a really nice polygon with "smoothed" points")

I need to get my head around the creation of that straight tangent line across the point, in order to position the handles. At this time of night, I just can't make sense of it

BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 24th Feb 2013 23:11
I've managed to find time to create layer 1 of this problem. It's not perfect but it's getting closer.

The code below can be thrown into any project as an additional module. Simply sigInit(), then sigStart() and repeatedly sigProcess() when you want to record the signature waypoints. Finish with a sigEnd().

This will record the waypoints for your signature. How you display it after that is up to you, but we can try any of the above methods overlaid on this code. In this demo, I simple draw a dot at each waypoint to prove it is working.

You also set the frame within which the signature is drawn. This will allow you to put an OK button onscreen, or whatever else is required.

(set the screen size to 1024x768)



xCept
21
Years of Service
User Offline
Joined: 15th Dec 2002
Location:
Posted: 25th Feb 2013 18:22 Edited at: 25th Feb 2013 18:28
Quote: "using DrawSprite is much better than create much sprites"


Do you have an example of using DrawSprite to achieve this? I assume you mean with EnableClearColor(0) so that the buffer is not cleared with each frame. However, EnableClearColor(0) is pretty useless in its current state and in my opinion should never be used in actual projects since it is completely unpredictable. It causes many graphical glitches in most devices I have tested it on (Android and iOS).

Or are you instead suggesting to store the state of each point on the drawn path in an array and redraw all points using DrawSprite each frame? I haven't tested this to see if it is faster (you could potentially have many thousands of 'points' to draw each frame) but I do know that cloning sprites and drawing using that method gets very slow after several hundred are on the screen, depending on the device.
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 5th Mar 2013 18:00
In my final solution I simply joined the dots, as generated above. I took a 3 pixel sprite, stretched it in the y-axis to the distance between 2 points, then rotated to fit between the points. The signature is made up of however many sprites are required to complete the lines.

As there will be very little other activity while writing the signature, this is sufficient. I had to take the 60FPS cap off the frame rate, as this is too slow for a decent flowing line.

Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 5th Mar 2013 23:04
today i play with a tablet input screen.
the best solution is write big letters and after each
letter scroll the input text to the left for new free space.
after input scale the input down.
then the input looks like my signatur
at input i using fast lines and after ready button i paint sprites.
(the missing thing is center all coords.)

Login to post a reply

Server time is: 2024-05-06 19:41:35
Your offset time is: 2024-05-06 19:41:35