Touchthrough TouchSpy

[Alan Hendry]

HI,

For a layout the option TouchThrough is described as "forward touch events to underlying children".  I presume this means that if one layout (partially or wholly) covers another then touches on the top "layer" get passed thru to controls on the lower layer, and that it applies to behaviours (like opening up a spinner) as well as the ontouch events. 

And TouchSpy as "spies for touch event on all children", which I take to mean that if a layout has children then when a child is touched the layout is touched.

Does anyone know of better explanations, or clear examples?

Regards, ah

[Steve Garman]

That's a reasonable description

Neither of them work well on stacks of more than 2 layouts and it's best to avoid using both TouchThrough and TouchSpy  on the same layout

With TouchSpy ev.X and ev.Y are not relative to any control the finger happens to be over so it's usually more helpful to use 

ev.screenX and ev.screenY (it's late at night and Im not sure if the s should be capitalized ev.ScreenX but I don't think so)

[Alan Hendry]

HI,

I presume ev.screenX and ev.screenY are parameters passed to the Layout OnTouch callbacks.

I guess they're arrays (for multiple touch points).

Are they documented somewhere? If not then they could be added.

(For my prototype organ/stylophone, finger slides to another note don't invoke the control touches).

I want to capture touch down and up and move for the whole screen/keyboard, 

and figure out what note(s) to play.)

Regards, ah

[Steve Garman]

screenX and screenY are single values for the main finger

If you need to track multiple fingers there's a lot of arithmetic involved to decide which control is involved  I'm afraid 

I shied away from mentioning some of the values before but if you want to experiment with then you could look at any of

{

 "action": "Move",

 "count": 3,

 "X": 0.6870117,

 "Y": 0.23663281,

 "screenX": 0.6870117,

 "screenY": 0.2740539,

 "rawX": 741.97266,

 "rawY": 607.85156,

 "x": [

  0.6870117,

  0.57177734,

  0.46948242

 ],

 "y": [

  0.23663281,

  0.31622177,

  0.398644

 ]

}

[Alan Hendry]

HI,

X, Screenx and x[0} are the same, but ScreenY is larger than Y and y[0] probably Android notification bar.

For white keys only I think it's trivial/fast to figure out which one a fnger is over 
(if we have 8 keys, X is 0 to 1 decimal, multiply by 8, result is 0 to 8, math.trunc to integer, if 8 change to 7).

Black keys have gaps, so probably need to compare X to getposition left & right, and Y to top & bottom.

I reckon black keys should be checked first, if no match then white.

Yes, multiple fingers gets v. tricky, obviously more than one synth. 

Although I have a "cunning plan".

Regards, ah

[Alan Hendry]

HI,

If one finger touches then it invokes ontouch with action "Down".

Trying to check exactly what happens if a second finger touches, and if one then goes up.

Also if multiple X and Y are in any specific order?

I can handle slides of one finger on white keys changing note in the Synth demo, 

still need to look at black, and re-fit code to change colour of touched key.

Regards, ah

[Steve Garman]

If I wanted to check up on that sort of stuff I would use something like

// using MultiLineLog by wheelie.tips
// from https://dl.dropbox.com/s/fgtcnjqd7cwl0tm/MultiLineLog.zip
// expects to be using WiFi IDE
app.LoadPlugin("MultiLineLog");
plg = app.CreateObject("MultiLineLog");

function OnStart()
{
   lay = app.CreateLayout("linear", "VCenter, FillXY")

   img = app.AddImage(lay, null, .5, .5)
   img.SetColor("red")
   img.SetOnTouch(img_OnTouch) + ""
   app.AddLayout(lay)
}

function img_OnTouch(ev)
{
   delete ev.source
   var s = JSON.stringify(ev)
   plg.log(s)
   plg.log("#", "blue")
}

to get output like

• App.GetPrivateFolder( Plugins, )
• -> /data/user/0/com.smartphoneremote.androidscriptfree/app_Plugins
• App.FileExists( /data/user/0/com.smartphoneremote.androidscriptfree/app_Plugins/multilinelog/Mul... )
• -> true
• App.CreateLayout( linearVCenter, FillXY )
• -> #0
• App.AddImage( null0.5, 0.5, , , )
• -> #1
• Img.SetColor( red )
• Img.SetOnTouch( img_OnTouch )
• App.AddLayout( #0 )
• === img_OnTouch ===
• {"action":"Down","count":1,"X":0.57666016,"Y":0.29361773,"screenX":0.5383301,"screenY":0.4340045
• 5,"rawX":581.3965,"rawY":962.6221,"x":[0.57666016,0,0],"y":[0.29361773,0,0]}
• #
• {"action":"Move","count":2,"X":0.57666016,"Y":0.29928428,"screenX":0.5383301,"screenY":0.4368378
• ,"rawX":581.3965,"rawY":968.90625,"x":[0.57666016,0.33007812,0],"y":[0.29928428,0.48834026,0]}
• #
• {"action":"Move","count":2,"X":0.57958984,"Y":0.3049508,"screenX":0.5397949,"screenY":0.43967107
• ,"rawX":582.9785,"rawY":975.1904,"x":[0.57958984,0.33007812,0],"y":[0.3049508,0.48834026,0]}
• #
• {"action":"Move","count":2,"X":0.58251953,"Y":0.31277722,"screenX":0.54125977,"screenY":0.443584
• 3,"rawX":584.56055,"rawY":983.86993,"x":[0.58251953,0.33500803,0],"y":[0.31277722,0.49457157,0]}
• #
• {"action":"Move","count":2,"X":0.5842632,"Y":0.32033044,"screenX":0.5421316,"screenY":0.4473609,
• "rawX":585.50214,"rawY":992.24646,"x":[0.5842632,0.33698347,0],"y":[0.32033044,0.4998197,0]}
• #
• {"action":"Move","count":2,"X":0.587174,"Y":0.32934973,"screenX":0.543587,"screenY":0.45187053,"
• rawX":587.074,"rawY":1002.24884,"x":[0.587174,0.34047788,0],"y":[0.32934973,0.505768,0]}
• #
• {"action":"Move","count":2,"X":0.5894454,"Y":0.3394247,"screenX":0.54472274,"screenY":0.45690802
• ,"rawX":588.30054,"rawY":1013.422,"x":[0.5894454,0.34646145,0],"y":[0.3394247,0.51560223,0]}
• #
• {"action":"Move","count":2,"X":0.5866466,"Y":0.3552506,"screenX":0.54332334,"screenY":0.46482095
• ,"rawX":586.7892,"rawY":1030.9729,"x":[0.5866466,0.34532526,0],"y":[0.3552506,0.52988267,0]}
• #
• {"action":"Move","count":2,"X":0.58496094,"Y":0.36371395,"screenX":0.54248047,"screenY":0.469052
• 64,"rawX":585.8789,"rawY":1040.3588,"x":[0.58496094,0.34472656,0],"y":[0.36371395,0.53834605,0]}
• #
• {"action":"Move","count":2,"X":0.5867254,"Y":0.37338227,"screenX":0.54336274,"screenY":0.4738868
• 2,"rawX":586.8317,"rawY":1051.0809,"x":[0.5867254,0.34634122,0],"y":[0.37338227,0.54801434,0]}
• #
• {"action":"Move","count":2,"X":0.5959067,"Y":0.38841784,"screenX":0.54795337,"screenY":0.4814045
• 7,"rawX":591.7896,"rawY":1067.7554,"x":[0.5959067,0.3527901,0],"y":[0.38841784,0.56361514,0]}
• #
• {"action":"Move","count":2,"X":0.6078881,"Y":0.4082041,"screenX":0.55394405,"screenY":0.49129772
• ,"rawX":598.2596,"rawY":1089.6984,"x":[0.6078881,0.364724,0],"y":[0.4082041,0.5833514,0]}
• #
• {"action":"Move","count":2,"X":0.6193773,"Y":0.43268016,"screenX":0.5596886,"screenY":0.50353575
• ,"rawX":604.46375,"rawY":1116.8423,"x":[0.6193773,0.37426013,0],"y":[0.43268016,0.60731226,0]}
• #
• {"action":"Move","count":2,"X":0.6291069,"Y":0.45746702,"screenX":0.56455344,"screenY":0.5159291
• 6,"rawX":609.7177,"rawY":1144.3309,"x":[0.6291069,0.3840298,0],"y":[0.45746702,0.63261425,0]}
• #
• {"action":"Move","count":2,"X":0.63964844,"Y":0.48009804,"screenX":0.5698242,"screenY":0.5272447
• ,"rawX":615.41016,"rawY":1169.4287,"x":[0.63964844,0.3935547,0],"y":[0.48009804,0.6516393,0]}
• #
• {"action":"Move","count":2,"X":0.6491784,"Y":0.4913921,"screenX":0.5745892,"screenY":0.53289175,
• "rawX":620.55634,"rawY":1181.9539,"x":[0.6491784,0.40357298,0],"y":[0.4913921,0.66550905,0]}
• #
• {"action":"Move","count":2,"X":0.6564165,"Y":0.5025628,"screenX":0.57820827,"screenY":0.53847706
• ,"rawX":624.4649,"rawY":1194.3422,"x":[0.6564165,0.41240686,0],"y":[0.5025628,0.6766798,0]}
• #
• {"action":"Move","count":2,"X":0.6621094,"Y":0.5125518,"screenX":0.5810547,"screenY":0.5434716,"
• rawX":627.53906,"rawY":1205.4199,"x":[0.6621094,0.41918945,0],"y":[0.5125518,0.6861536,0]}
• #
• {"action":"Move","count":2,"X":0.66820484,"Y":0.5209544,"screenX":0.58410245,"screenY":0.5476728
• 7,"rawX":630.8306,"rawY":1214.7384,"x":[0.66820484,0.4235759,0],"y":[0.5209544,0.6935259,0]}
• #
• {"action":"Move","count":2,"X":0.6689453,"Y":0.5321271,"screenX":0.58447266,"screenY":0.5532592,
• "rawX":631.23047,"rawY":1227.1289,"x":[0.6689453,0.42529297,0],"y":[0.5321271,0.70160776,0]}
• #
• {"action":"Up","count":1,"X":0.6689453,"Y":0.5321271,"screenX":0.58447266,"screenY":0.5532592,"r
• awX":631.23047,"rawY":1227.1289,"x":[0.6689453,0,0],"y":[0.5321271,0,0]}
• #

[Alan Hendry]

Nice,

I tried alerts and popups but the number and frequency of events swamped it.

This shows Down 1 finger, Move 2 fingers, Up 1 finger (no Down and Up for the 2nd finger).

Also want to look at when onlongtouch is run (when the finger has been down for a while or when it lifts?)

The DS home page runs the app on short touch (up?), and opens a pop-up of actions on long touch.

Regards, ah

[Alan Hendry]

HI,

My organ demo morphed into a Stylophone 

(easy to get that tinny sound, although I had to go up an octave ).

One finger slide works.

Layout is a bit scrappy (might borrow from piano)

Regards, ah

cfg.Landscape
const ratio = 1.059463094359
var wfreq = []
var bfreq = []
var bleft = []

function OnStart() {
    lay = app.CreateLayout( "absolute", "touchspy")        
    lay.SetChildTextSize(36)
    lay.SetChildMargins(2,2,2,2,"px")
    lay.SetOnTouch(lay_OnTouch)

    syn = app.CreateSynth("Signal")
    syn.SetVca(0,0,1,0)
//    syn.SetVolume( 1,1 )
    syn.SetWaveShape("saw")

    base = 110 * 2
    x = 0
    v = 0

    a1  =  white("1\nA3")  ; v+=1/26
    a15 =  black("1.5\nA\u266f3\nB\u266d3")
    a2  =  white("2\nB3")  
    a3  =  white("3\nC4")  ; v+=1/13+0.0025
    a35 =  black("3.5\nC\u266f4\nD\u266d4")
    a4  =  white("4\nD4")  
    a45 =  black("4.5\nD\u266f4\nE\u266d4")
    a5  =  white("5\nE4")  
    a6  =  white("6\nF4")  ; v+=1/13+0.0025
    a65 =  black("6.5\nF\u266f4\nG\u266d4")
    a7  =  white("7\nG4")  
    a75 =  black("7.5\nG\u266f4\nA\u266d4")
    a8  =  white("8\nA4")  
    a85 =  black("8.5\nA\u266f4\nB\u266d4")
    a9  =  white("9\nB4")  
    a10 =  white("10\nC5") ; v+=1/13+0.0025
    a105 = black("10.5\nC\u266f5\nD\u266d5")
    a11  = white("11\nD5")  
    a115 = black("11.5\nD\u266f5\nE\u266d5")
    a12  = white("12\nE5")

        app.AddLayout( lay )

}

function white(text) {
    var w = app.AddText(lay,text+"\n ",-1,-1,"Center,Bottom,Multiline")
    var wlen = wfreq.push(base)
    base *= ratio
        w.SetBackColor("silver")
        w.SetTextColor("black")
        w.SetPosition(x , 1/4 , 1/13, 1/4)
        x+= 1/13+0.0025
    return w
}

function black(text) {
    var w = app.AddText (lay,"\n"+text,-1,-1,"Center,Multiline")
    var blen = bfreq.push(base)
    base *= ratio
        w.SetBackColor("gray")
        w.SetTextColor("silver")
        w.SetPosition(v , 0, 1/13, 0.25)
        v+= 1/13+0.0025
          return w
}

function lay_OnTouch(event) {
//alert(JSON.stringify(event))
    var action = event.action
    if (action == "Up"){
        syn.Stop()
        return
    }
    var count  = event.count
    var x = event.x
    var x0 = x[0]
    var y0 = event.screenY
    br = -1
    if (y0 < 0.25) {
        // black
        var rb = Math.trunc((x0+1/24) * 12)
        if (rb == 1) {br = bfreq[0]}
        else if (rb == 3) {br = bfreq[1]}
        else if (rb == 4) {br = bfreq[2]}
        else if (rb == 6) {br = bfreq[3]}
        else if (rb == 7) {br = bfreq[4]}
        else if (rb == 8) {br = bfreq[5]}
        else if (rb == 10) {br = bfreq[6]}
        else if (rb == 11) {br = bfreq[7]}
   } else {
        // white
        var rb = Math.trunc(x0 * 12)
        var br = wfreq[rb]
    }
    if (br == -1) {
        syn.Stop()
    } else {
        syn.SetFrequency( br )
        syn.Start()
    }
}