Author Topic: BrowserBasic - touch example  (Read 4959 times)

Guilect

  • Guest
BrowserBasic - touch example
« on: August 18, 2013, 05:15:54 PM »
You need to access this example with a touch enabled device.

When the screen is touched a circle is created.
As long as you hold this touch the circle will grow for awhile.
If you continue to hold and drag your finger the circle will follow your finger.
When you release your finger the circle will shrink until it disappears.

@SteveOW

When testing touch devices:
  • Watch the speed at which the circle grows and shrinks
  • Watch how well the circle tracks the movement of your finger
  • Note how many fingers on the screen produce a circle

The program allows you to put multiple fingers on the touch screen and get multiple circles.
My Samsung Droid Charge only allows for 1 circle at a time.

Online link

BrowserBasic code:
Code: [Select]
var off as number = 0
var grow as number = 1
var shrink as number = 2

Type TCircle
var x as number
var y as number
var radius as number = 100
var alpha as number
var color as string
var index as number
var state as number = off
endtype

    var circles [10] as TCircle ' an array to hold all of the circles

' Load is here used for basic setup only (line width, for the animated circles)
function OnLoad ()
  setLineWidth(3)
endfunction

function OnDraw()
'                             
  var i as number
  setAlpha(1)
  for i = 0 to UBound(circles) - 1
 
If circles[i].state <> off then
If circles[i].state = grow then
circles[i].radius = circles[i].radius + 1
if circles[i].radius > 300 then
circles[i].radius = 300
endif
endif

If circles[i].state = shrink then
circles[i].radius = circles[i].radius - 1
if circles[i].radius < 0 then
circles[i].radius = 0
circles[i].state = off
endif
endif

setColor(0,255,0)
fillCircle(circles[i].x, circles[i].y, circles[i].radius)
endif 
  next

endfunction

' When a finger touches the screen, show a circle expanding away
function OnTouchPressed(finger as number, x as number, y as number)
circles[finger].state = grow
circles[finger].x = x
circles[finger].y = y
circles[finger].radius = 50
endfunction

' When a finger leaves the screen, draw a circle "compressing to the point where
' the finger was
function OnTouchReleased(finger as number, x as number, y as number)
circles[finger].state = shrink
circles[finger].x = x
circles[finger].y = y
endfunction

function OnTouchMoved(finger as number, x as number, y as number)
circles[finger].x = x
circles[finger].y = y
endfunction

SteveOW

  • Guest
Re: BrowserBasic - touch example
« Reply #1 on: August 18, 2013, 10:26:47 PM »
@Guilect,

Many thanks. 
I have discovered that my WiiU console acts as a touch device when browsing web pages.
Your touch example app works fine upon it. 
When I put two or three fingers on the screen it produces one growing circle at the centroid position.

Edit:
Hoping to get my hands on a Galaxy Note 10.1 with multipoint touch in next few days. That should be fun! :)
« Last Edit: August 22, 2013, 09:00:17 AM by SteveOW »

Guilect

  • Guest
Re: BrowserBasic - touch example
« Reply #2 on: August 22, 2013, 11:20:20 PM »
Quote
Galaxy Note 10.1
That looks like a fun device. :D

SteveOW

  • Guest
Re: BrowserBasic - touch example
« Reply #3 on: August 24, 2013, 12:32:24 PM »
Quote
Galaxy Note 10.1
That looks like a fun device. :D

It certainly is!!! :D
It gives me 10 different fingers to use as inputs
(Your touch example works pretty well on it - http://www.pewtersoftware.com/browserbasic/examples/touch/ex_fingers.html)

But sadly it is a little bit laggy running HTML/Javascript. 
OK for a chess program or maybe space invaders if you are good at deflection shooting
but not really suitable for a fast-paced shoot-em up.

Mopz

  • Guest
Re: BrowserBasic - touch example
« Reply #4 on: August 24, 2013, 06:57:12 PM »
If a game requires more than one touch event it won't sell. Handeling multiple touches is just a waste of time, because players hate to use more than one finger :)

SteveOW

  • Guest
Re: BrowserBasic - touch example
« Reply #5 on: August 31, 2013, 11:33:29 AM »
POND demo has been updated and now works with Mouse(+ some keyboard)  or with Touch
http://www.zen226082.zen.co.uk/POND_KMT.html

For touch I recommend using Firefox browser with the addon "NoDoubleTap 1.0" to disable screen-resizing on double-tap.

@Guilect
In the BB pdf manual there is reference to special functions onTouchReleased and onTouchMoved.
I think these should be changed to OnTouchReleased and OnTouchMoved respectively.
A small detail but took me quite some time to find out why touch didnt work in my Pond app.
The editor and compiler (understandably I suppose) do not hilight any deviant spelling.

PS how do you change the background color for comment fields in PN.exe?
Ive tried various things in tools/options/fonts&colors but without joy.

cheers,SteveOW.

Guilect

  • Guest
Re: BrowserBasic - touch example
« Reply #6 on: August 31, 2013, 01:51:02 PM »
Quote
should be changed to OnTouchReleased and OnTouchMoved
These have been changed in the help manual and will be in the next release.

Guilect

  • Guest
Re: BrowserBasic - touch example
« Reply #7 on: August 31, 2013, 02:38:35 PM »
Quote
how do you change the background color for comment fields in PN.exe?
Good question, no joy here either.