[{"data":1,"prerenderedAt":1920},["ShallowReactive",2],{"posts:\u002Fposts\u002F2021-07-26-multitouch-start":3},{"id":4,"title":5,"body":6,"categories":1906,"date":1908,"description":1909,"extension":1910,"image":1911,"lang":1909,"meta":1912,"navigation":219,"path":1913,"seo":1914,"stem":1915,"tags":1916,"titleInPicture":1918,"__hash__":1919},"posts\u002Fposts\u002F2021-07-26-multitouch-start.md","Micro guide to multi-touch events",{"type":7,"value":8,"toc":1901},"minimark",[9,13,25,28,32,1850,1854,1857,1860,1871,1874,1883,1886,1890,1898],[10,11,12],"p",{},"There isn't much to say about how this works. if you are here, I am sure that you will understand the code just by reading it.",[10,14,15,16,20,21,24],{},"The code a very bare-bones working example of multi-touch interaction. One thing that was not obvious to me at the beginning, is that I needed to use ",[17,18,19],"code",{},"event.targetTouches"," instead of ",[17,22,23],{},"event.changedTouches",". The former property is more useful to track touches, as it provides the still existing touches, whereas the latter provides what has changed only.",[10,26,27],{},"I also added some colors, because they make us happy.",[29,30,31],"h2",{"id":17},"Code",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-html shiki shiki-themes github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no\">\n    \u003Ctitle>Multi touch test\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cstyle>\n    body {\n        color: white;\n        background-color: #73777D;\n    }\n\n    #container {\n        position:fixed;\n        left: 0;\n        top: 0;\n    }\n\n    #pseudo-console {\n        position:fixed;\n        left: 0;\n        top: 0;\n    }\n    \n    #container .touch-element {\n        border: solid 3px;\n        border-radius: 50%;\n        width: 70px;\n        height: 70px;\n        position: fixed;\n        text-align: center;\n        padding-top: -30px;\n        color: white;\n    }\n\n    #container .touch-element:nth-child(1){\n        background-color: #011627;\n    }\n    #container .touch-element:nth-child(2){\n        background-color: #2EC4B6;\n    }\n    #container .touch-element:nth-child(3){\n        background-color: #E71D36;\n    }\n    #container .touch-element:nth-child(4){\n        background-color: #FF9F1C;\n    }\n    #container .touch-element:nth-child(5){\n        background-color: #0061AA;\n    }\n    #container .touch-element:nth-child(6){\n        background-color: #73777D;\n    }\n    #container .touch-element:nth-child(7){\n        background-color: #2EC4B6;\n    }\n    #container .touch-element:nth-child(8){\n        background-color: #FF9F1C;\n    }\n    #container .touch-element:nth-child(9){\n        background-color: #2EC4B6;\n    }\n    #container .touch-element:nth-child(10){\n        background-color: #E71D36;\n    }\n    .hide {\n        display: none;\n    }\n\u003C\u002Fstyle>\n\u003Cbody>\n    \u003Cdiv id=\"container\">\u003C\u002Fdiv>\n    \u003Cdiv id=\"pseudo-console\">\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003Cscript>\n\nconst container = document.getElementById(\"container\");\nconst pseudoLog = (tx) => {\n    const cont = document.getElementById(\"pseudo-console\");\n    cont.innerHTML = JSON.stringify(tx);\n};\n\nconst TouchDiv = function () {\n    let diameter = 100;\n    let radius = (diameter \u002F 2);\n    const element = document.createElement(\"div\");\n    element.classList.add(\"touch-element\");\n    container.appendChild(element);\n\n    this.position = (coords) => {\n        element.style.left = (coords.x - radius) + \"px\";\n        element.style.top = (coords.y - radius) + \"px\";\n        if(coords.diameter) {\n            diameter = coords.diameter;\n            radius = diameter \u002F 2;\n            element.style.width = diameter + \"px\";\n            element.style.height = diameter + \"px\";\n        };\n    }\n\n    this.text = (txt) => {\n        element.innerHTML = txt + \"\";\n    }\n    this.hide = () => {\n        element.classList.add(\"hide\");\n    }\n    this.show = () => {\n        element.classList.remove(\"hide\");\n\n        element.style.width = diameter + \"px\";\n        element.style.height = diameter + \"px\";\n    }\n}\n\nconst touchSprites = [];\n\nconst touchesUpdate = (touches) => {\n\n    for (let touch of touches) {\n        const number = touch.identifier;\n\n        if(!touchSprites[number]){\n            touchSprites [number] = new TouchDiv();\n        }\n\n        touchSprites[number].show();\n        const tts = touchSprites[number];\n\n        tts.position({\n            x: touch.clientX,\n            y: touch.clientY,\n            \u002F\u002F diameter:touch.radiusX, \u002F\u002Fnot supported everywhere\n        });\n        tts.text(number);\n    }\n\n    touchSprites.slice(touches.length).forEach((touchSprite)=>touchSprite.hide());\n}\n\ndocument.addEventListener(\"touchmove\",(event) => {\n    event.preventDefault();\n    touchesUpdate(event.targetTouches);\n});\n\ndocument.addEventListener(\"touchstart\",(event) => {\n    event.preventDefault();\n    touchesUpdate(event.targetTouches);\n});\n\ndocument.addEventListener(\"touchend\",(event) => {\n    event.preventDefault();\n    touchesUpdate(event.targetTouches);\n});\n\n\u003C\u002Fscript>\n\u003C\u002Fhtml>\n\n","html","",[17,40,41,61,81,91,110,135,150,160,170,179,195,208,214,221,229,243,256,268,273,278,286,297,308,319,324,330,340,360,376,391,405,416,429,444,455,460,465,482,494,499,513,525,530,544,556,561,575,587,592,606,618,623,637,648,653,667,678,683,697,708,713,727,738,743,757,768,773,781,794,799,808,818,841,861,870,880,885,910,935,956,976,982,987,1003,1019,1040,1062,1078,1090,1095,1119,1144,1165,1174,1185,1201,1217,1233,1239,1244,1249,1272,1290,1295,1314,1329,1334,1352,1366,1371,1387,1403,1408,1414,1419,1432,1437,1458,1463,1483,1497,1502,1515,1531,1537,1542,1552,1565,1570,1581,1587,1593,1603,1609,1619,1624,1629,1669,1674,1679,1705,1716,1725,1731,1736,1758,1767,1774,1779,1784,1806,1815,1822,1827,1832,1841],{"__ignoreMap":38},[42,43,46,50,54,58],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"s95oV","\u003C!",[42,51,53],{"class":52},"s4JwU","DOCTYPE",[42,55,57],{"class":56},"svObZ"," html",[42,59,60],{"class":48},">\n",[42,62,64,67,69,72,75,79],{"class":44,"line":63},2,[42,65,66],{"class":48},"\u003C",[42,68,37],{"class":52},[42,70,71],{"class":56}," lang",[42,73,74],{"class":48},"=",[42,76,78],{"class":77},"sU2Wk","\"en\"",[42,80,60],{"class":48},[42,82,84,86,89],{"class":44,"line":83},3,[42,85,66],{"class":48},[42,87,88],{"class":52},"head",[42,90,60],{"class":48},[42,92,94,97,100,103,105,108],{"class":44,"line":93},4,[42,95,96],{"class":48},"    \u003C",[42,98,99],{"class":52},"meta",[42,101,102],{"class":56}," charset",[42,104,74],{"class":48},[42,106,107],{"class":77},"\"UTF-8\"",[42,109,60],{"class":48},[42,111,113,115,117,120,122,125,128,130,133],{"class":44,"line":112},5,[42,114,96],{"class":48},[42,116,99],{"class":52},[42,118,119],{"class":56}," name",[42,121,74],{"class":48},[42,123,124],{"class":77},"\"viewport\"",[42,126,127],{"class":56}," content",[42,129,74],{"class":48},[42,131,132],{"class":77},"\"width=device-width, user-scalable=no\"",[42,134,60],{"class":48},[42,136,138,140,143,146,148],{"class":44,"line":137},6,[42,139,96],{"class":48},[42,141,142],{"class":52},"title",[42,144,145],{"class":48},">Multi touch test\u003C\u002F",[42,147,142],{"class":52},[42,149,60],{"class":48},[42,151,153,156,158],{"class":44,"line":152},7,[42,154,155],{"class":48},"\u003C\u002F",[42,157,88],{"class":52},[42,159,60],{"class":48},[42,161,163,165,168],{"class":44,"line":162},8,[42,164,66],{"class":48},[42,166,167],{"class":52},"style",[42,169,60],{"class":48},[42,171,173,176],{"class":44,"line":172},9,[42,174,175],{"class":52},"    body",[42,177,178],{"class":48}," {\n",[42,180,182,186,189,192],{"class":44,"line":181},10,[42,183,185],{"class":184},"sDLfK","        color",[42,187,188],{"class":48},": ",[42,190,191],{"class":184},"white",[42,193,194],{"class":48},";\n",[42,196,198,201,203,206],{"class":44,"line":197},11,[42,199,200],{"class":184},"        background-color",[42,202,188],{"class":48},[42,204,205],{"class":184},"#73777D",[42,207,194],{"class":48},[42,209,211],{"class":44,"line":210},12,[42,212,213],{"class":48},"    }\n",[42,215,217],{"class":44,"line":216},13,[42,218,220],{"emptyLinePlaceholder":219},true,"\n",[42,222,224,227],{"class":44,"line":223},14,[42,225,226],{"class":56},"    #container",[42,228,178],{"class":48},[42,230,232,235,238,241],{"class":44,"line":231},15,[42,233,234],{"class":184},"        position",[42,236,237],{"class":48},":",[42,239,240],{"class":184},"fixed",[42,242,194],{"class":48},[42,244,246,249,251,254],{"class":44,"line":245},16,[42,247,248],{"class":184},"        left",[42,250,188],{"class":48},[42,252,253],{"class":184},"0",[42,255,194],{"class":48},[42,257,259,262,264,266],{"class":44,"line":258},17,[42,260,261],{"class":184},"        top",[42,263,188],{"class":48},[42,265,253],{"class":184},[42,267,194],{"class":48},[42,269,271],{"class":44,"line":270},18,[42,272,213],{"class":48},[42,274,276],{"class":44,"line":275},19,[42,277,220],{"emptyLinePlaceholder":219},[42,279,281,284],{"class":44,"line":280},20,[42,282,283],{"class":56},"    #pseudo-console",[42,285,178],{"class":48},[42,287,289,291,293,295],{"class":44,"line":288},21,[42,290,234],{"class":184},[42,292,237],{"class":48},[42,294,240],{"class":184},[42,296,194],{"class":48},[42,298,300,302,304,306],{"class":44,"line":299},22,[42,301,248],{"class":184},[42,303,188],{"class":48},[42,305,253],{"class":184},[42,307,194],{"class":48},[42,309,311,313,315,317],{"class":44,"line":310},23,[42,312,261],{"class":184},[42,314,188],{"class":48},[42,316,253],{"class":184},[42,318,194],{"class":48},[42,320,322],{"class":44,"line":321},24,[42,323,213],{"class":48},[42,325,327],{"class":44,"line":326},25,[42,328,329],{"class":48},"    \n",[42,331,333,335,338],{"class":44,"line":332},26,[42,334,226],{"class":56},[42,336,337],{"class":56}," .touch-element",[42,339,178],{"class":48},[42,341,343,346,348,351,354,358],{"class":44,"line":342},27,[42,344,345],{"class":184},"        border",[42,347,188],{"class":48},[42,349,350],{"class":184},"solid",[42,352,353],{"class":184}," 3",[42,355,357],{"class":356},"snl16","px",[42,359,194],{"class":48},[42,361,363,366,368,371,374],{"class":44,"line":362},28,[42,364,365],{"class":184},"        border-radius",[42,367,188],{"class":48},[42,369,370],{"class":184},"50",[42,372,373],{"class":356},"%",[42,375,194],{"class":48},[42,377,379,382,384,387,389],{"class":44,"line":378},29,[42,380,381],{"class":184},"        width",[42,383,188],{"class":48},[42,385,386],{"class":184},"70",[42,388,357],{"class":356},[42,390,194],{"class":48},[42,392,394,397,399,401,403],{"class":44,"line":393},30,[42,395,396],{"class":184},"        height",[42,398,188],{"class":48},[42,400,386],{"class":184},[42,402,357],{"class":356},[42,404,194],{"class":48},[42,406,408,410,412,414],{"class":44,"line":407},31,[42,409,234],{"class":184},[42,411,188],{"class":48},[42,413,240],{"class":184},[42,415,194],{"class":48},[42,417,419,422,424,427],{"class":44,"line":418},32,[42,420,421],{"class":184},"        text-align",[42,423,188],{"class":48},[42,425,426],{"class":184},"center",[42,428,194],{"class":48},[42,430,432,435,437,440,442],{"class":44,"line":431},33,[42,433,434],{"class":184},"        padding-top",[42,436,188],{"class":48},[42,438,439],{"class":184},"-30",[42,441,357],{"class":356},[42,443,194],{"class":48},[42,445,447,449,451,453],{"class":44,"line":446},34,[42,448,185],{"class":184},[42,450,188],{"class":48},[42,452,191],{"class":184},[42,454,194],{"class":48},[42,456,458],{"class":44,"line":457},35,[42,459,213],{"class":48},[42,461,463],{"class":44,"line":462},36,[42,464,220],{"emptyLinePlaceholder":219},[42,466,468,470,473,476,479],{"class":44,"line":467},37,[42,469,226],{"class":56},[42,471,472],{"class":56}," .touch-element:nth-child",[42,474,475],{"class":48},"(",[42,477,478],{"class":184},"1",[42,480,481],{"class":48},"){\n",[42,483,485,487,489,492],{"class":44,"line":484},38,[42,486,200],{"class":184},[42,488,188],{"class":48},[42,490,491],{"class":184},"#011627",[42,493,194],{"class":48},[42,495,497],{"class":44,"line":496},39,[42,498,213],{"class":48},[42,500,502,504,506,508,511],{"class":44,"line":501},40,[42,503,226],{"class":56},[42,505,472],{"class":56},[42,507,475],{"class":48},[42,509,510],{"class":184},"2",[42,512,481],{"class":48},[42,514,516,518,520,523],{"class":44,"line":515},41,[42,517,200],{"class":184},[42,519,188],{"class":48},[42,521,522],{"class":184},"#2EC4B6",[42,524,194],{"class":48},[42,526,528],{"class":44,"line":527},42,[42,529,213],{"class":48},[42,531,533,535,537,539,542],{"class":44,"line":532},43,[42,534,226],{"class":56},[42,536,472],{"class":56},[42,538,475],{"class":48},[42,540,541],{"class":184},"3",[42,543,481],{"class":48},[42,545,547,549,551,554],{"class":44,"line":546},44,[42,548,200],{"class":184},[42,550,188],{"class":48},[42,552,553],{"class":184},"#E71D36",[42,555,194],{"class":48},[42,557,559],{"class":44,"line":558},45,[42,560,213],{"class":48},[42,562,564,566,568,570,573],{"class":44,"line":563},46,[42,565,226],{"class":56},[42,567,472],{"class":56},[42,569,475],{"class":48},[42,571,572],{"class":184},"4",[42,574,481],{"class":48},[42,576,578,580,582,585],{"class":44,"line":577},47,[42,579,200],{"class":184},[42,581,188],{"class":48},[42,583,584],{"class":184},"#FF9F1C",[42,586,194],{"class":48},[42,588,590],{"class":44,"line":589},48,[42,591,213],{"class":48},[42,593,595,597,599,601,604],{"class":44,"line":594},49,[42,596,226],{"class":56},[42,598,472],{"class":56},[42,600,475],{"class":48},[42,602,603],{"class":184},"5",[42,605,481],{"class":48},[42,607,609,611,613,616],{"class":44,"line":608},50,[42,610,200],{"class":184},[42,612,188],{"class":48},[42,614,615],{"class":184},"#0061AA",[42,617,194],{"class":48},[42,619,621],{"class":44,"line":620},51,[42,622,213],{"class":48},[42,624,626,628,630,632,635],{"class":44,"line":625},52,[42,627,226],{"class":56},[42,629,472],{"class":56},[42,631,475],{"class":48},[42,633,634],{"class":184},"6",[42,636,481],{"class":48},[42,638,640,642,644,646],{"class":44,"line":639},53,[42,641,200],{"class":184},[42,643,188],{"class":48},[42,645,205],{"class":184},[42,647,194],{"class":48},[42,649,651],{"class":44,"line":650},54,[42,652,213],{"class":48},[42,654,656,658,660,662,665],{"class":44,"line":655},55,[42,657,226],{"class":56},[42,659,472],{"class":56},[42,661,475],{"class":48},[42,663,664],{"class":184},"7",[42,666,481],{"class":48},[42,668,670,672,674,676],{"class":44,"line":669},56,[42,671,200],{"class":184},[42,673,188],{"class":48},[42,675,522],{"class":184},[42,677,194],{"class":48},[42,679,681],{"class":44,"line":680},57,[42,682,213],{"class":48},[42,684,686,688,690,692,695],{"class":44,"line":685},58,[42,687,226],{"class":56},[42,689,472],{"class":56},[42,691,475],{"class":48},[42,693,694],{"class":184},"8",[42,696,481],{"class":48},[42,698,700,702,704,706],{"class":44,"line":699},59,[42,701,200],{"class":184},[42,703,188],{"class":48},[42,705,584],{"class":184},[42,707,194],{"class":48},[42,709,711],{"class":44,"line":710},60,[42,712,213],{"class":48},[42,714,716,718,720,722,725],{"class":44,"line":715},61,[42,717,226],{"class":56},[42,719,472],{"class":56},[42,721,475],{"class":48},[42,723,724],{"class":184},"9",[42,726,481],{"class":48},[42,728,730,732,734,736],{"class":44,"line":729},62,[42,731,200],{"class":184},[42,733,188],{"class":48},[42,735,522],{"class":184},[42,737,194],{"class":48},[42,739,741],{"class":44,"line":740},63,[42,742,213],{"class":48},[42,744,746,748,750,752,755],{"class":44,"line":745},64,[42,747,226],{"class":56},[42,749,472],{"class":56},[42,751,475],{"class":48},[42,753,754],{"class":184},"10",[42,756,481],{"class":48},[42,758,760,762,764,766],{"class":44,"line":759},65,[42,761,200],{"class":184},[42,763,188],{"class":48},[42,765,553],{"class":184},[42,767,194],{"class":48},[42,769,771],{"class":44,"line":770},66,[42,772,213],{"class":48},[42,774,776,779],{"class":44,"line":775},67,[42,777,778],{"class":56},"    .hide",[42,780,178],{"class":48},[42,782,784,787,789,792],{"class":44,"line":783},68,[42,785,786],{"class":184},"        display",[42,788,188],{"class":48},[42,790,791],{"class":184},"none",[42,793,194],{"class":48},[42,795,797],{"class":44,"line":796},69,[42,798,213],{"class":48},[42,800,802,804,806],{"class":44,"line":801},70,[42,803,155],{"class":48},[42,805,167],{"class":52},[42,807,60],{"class":48},[42,809,811,813,816],{"class":44,"line":810},71,[42,812,66],{"class":48},[42,814,815],{"class":52},"body",[42,817,60],{"class":48},[42,819,821,823,826,829,831,834,837,839],{"class":44,"line":820},72,[42,822,96],{"class":48},[42,824,825],{"class":52},"div",[42,827,828],{"class":56}," id",[42,830,74],{"class":48},[42,832,833],{"class":77},"\"container\"",[42,835,836],{"class":48},">\u003C\u002F",[42,838,825],{"class":52},[42,840,60],{"class":48},[42,842,844,846,848,850,852,855,857,859],{"class":44,"line":843},73,[42,845,96],{"class":48},[42,847,825],{"class":52},[42,849,828],{"class":56},[42,851,74],{"class":48},[42,853,854],{"class":77},"\"pseudo-console\"",[42,856,836],{"class":48},[42,858,825],{"class":52},[42,860,60],{"class":48},[42,862,864,866,868],{"class":44,"line":863},74,[42,865,155],{"class":48},[42,867,815],{"class":52},[42,869,60],{"class":48},[42,871,873,875,878],{"class":44,"line":872},75,[42,874,66],{"class":48},[42,876,877],{"class":52},"script",[42,879,60],{"class":48},[42,881,883],{"class":44,"line":882},76,[42,884,220],{"emptyLinePlaceholder":219},[42,886,888,891,894,897,900,903,905,907],{"class":44,"line":887},77,[42,889,890],{"class":356},"const",[42,892,893],{"class":184}," container",[42,895,896],{"class":356}," =",[42,898,899],{"class":48}," document.",[42,901,902],{"class":56},"getElementById",[42,904,475],{"class":48},[42,906,833],{"class":77},[42,908,909],{"class":48},");\n",[42,911,913,915,918,920,923,927,930,933],{"class":44,"line":912},78,[42,914,890],{"class":356},[42,916,917],{"class":56}," pseudoLog",[42,919,896],{"class":356},[42,921,922],{"class":48}," (",[42,924,926],{"class":925},"s9osk","tx",[42,928,929],{"class":48},") ",[42,931,932],{"class":356},"=>",[42,934,178],{"class":48},[42,936,938,941,944,946,948,950,952,954],{"class":44,"line":937},79,[42,939,940],{"class":356},"    const",[42,942,943],{"class":184}," cont",[42,945,896],{"class":356},[42,947,899],{"class":48},[42,949,902],{"class":56},[42,951,475],{"class":48},[42,953,854],{"class":77},[42,955,909],{"class":48},[42,957,959,962,964,967,970,973],{"class":44,"line":958},80,[42,960,961],{"class":48},"    cont.innerHTML ",[42,963,74],{"class":356},[42,965,966],{"class":184}," JSON",[42,968,969],{"class":48},".",[42,971,972],{"class":56},"stringify",[42,974,975],{"class":48},"(tx);\n",[42,977,979],{"class":44,"line":978},81,[42,980,981],{"class":48},"};\n",[42,983,985],{"class":44,"line":984},82,[42,986,220],{"emptyLinePlaceholder":219},[42,988,990,992,995,997,1000],{"class":44,"line":989},83,[42,991,890],{"class":356},[42,993,994],{"class":56}," TouchDiv",[42,996,896],{"class":356},[42,998,999],{"class":356}," function",[42,1001,1002],{"class":48}," () {\n",[42,1004,1006,1009,1012,1014,1017],{"class":44,"line":1005},84,[42,1007,1008],{"class":356},"    let",[42,1010,1011],{"class":48}," diameter ",[42,1013,74],{"class":356},[42,1015,1016],{"class":184}," 100",[42,1018,194],{"class":48},[42,1020,1022,1024,1027,1029,1032,1035,1038],{"class":44,"line":1021},85,[42,1023,1008],{"class":356},[42,1025,1026],{"class":48}," radius ",[42,1028,74],{"class":356},[42,1030,1031],{"class":48}," (diameter ",[42,1033,1034],{"class":356},"\u002F",[42,1036,1037],{"class":184}," 2",[42,1039,909],{"class":48},[42,1041,1043,1045,1048,1050,1052,1055,1057,1060],{"class":44,"line":1042},86,[42,1044,940],{"class":356},[42,1046,1047],{"class":184}," element",[42,1049,896],{"class":356},[42,1051,899],{"class":48},[42,1053,1054],{"class":56},"createElement",[42,1056,475],{"class":48},[42,1058,1059],{"class":77},"\"div\"",[42,1061,909],{"class":48},[42,1063,1065,1068,1071,1073,1076],{"class":44,"line":1064},87,[42,1066,1067],{"class":48},"    element.classList.",[42,1069,1070],{"class":56},"add",[42,1072,475],{"class":48},[42,1074,1075],{"class":77},"\"touch-element\"",[42,1077,909],{"class":48},[42,1079,1081,1084,1087],{"class":44,"line":1080},88,[42,1082,1083],{"class":48},"    container.",[42,1085,1086],{"class":56},"appendChild",[42,1088,1089],{"class":48},"(element);\n",[42,1091,1093],{"class":44,"line":1092},89,[42,1094,220],{"emptyLinePlaceholder":219},[42,1096,1098,1101,1103,1106,1108,1110,1113,1115,1117],{"class":44,"line":1097},90,[42,1099,1100],{"class":184},"    this",[42,1102,969],{"class":48},[42,1104,1105],{"class":56},"position",[42,1107,896],{"class":356},[42,1109,922],{"class":48},[42,1111,1112],{"class":925},"coords",[42,1114,929],{"class":48},[42,1116,932],{"class":356},[42,1118,178],{"class":48},[42,1120,1122,1125,1127,1130,1133,1136,1139,1142],{"class":44,"line":1121},91,[42,1123,1124],{"class":48},"        element.style.left ",[42,1126,74],{"class":356},[42,1128,1129],{"class":48}," (coords.x ",[42,1131,1132],{"class":356},"-",[42,1134,1135],{"class":48}," radius) ",[42,1137,1138],{"class":356},"+",[42,1140,1141],{"class":77}," \"px\"",[42,1143,194],{"class":48},[42,1145,1147,1150,1152,1155,1157,1159,1161,1163],{"class":44,"line":1146},92,[42,1148,1149],{"class":48},"        element.style.top ",[42,1151,74],{"class":356},[42,1153,1154],{"class":48}," (coords.y ",[42,1156,1132],{"class":356},[42,1158,1135],{"class":48},[42,1160,1138],{"class":356},[42,1162,1141],{"class":77},[42,1164,194],{"class":48},[42,1166,1168,1171],{"class":44,"line":1167},93,[42,1169,1170],{"class":356},"        if",[42,1172,1173],{"class":48},"(coords.diameter) {\n",[42,1175,1177,1180,1182],{"class":44,"line":1176},94,[42,1178,1179],{"class":48},"            diameter ",[42,1181,74],{"class":356},[42,1183,1184],{"class":48}," coords.diameter;\n",[42,1186,1188,1191,1193,1195,1197,1199],{"class":44,"line":1187},95,[42,1189,1190],{"class":48},"            radius ",[42,1192,74],{"class":356},[42,1194,1011],{"class":48},[42,1196,1034],{"class":356},[42,1198,1037],{"class":184},[42,1200,194],{"class":48},[42,1202,1204,1207,1209,1211,1213,1215],{"class":44,"line":1203},96,[42,1205,1206],{"class":48},"            element.style.width ",[42,1208,74],{"class":356},[42,1210,1011],{"class":48},[42,1212,1138],{"class":356},[42,1214,1141],{"class":77},[42,1216,194],{"class":48},[42,1218,1220,1223,1225,1227,1229,1231],{"class":44,"line":1219},97,[42,1221,1222],{"class":48},"            element.style.height ",[42,1224,74],{"class":356},[42,1226,1011],{"class":48},[42,1228,1138],{"class":356},[42,1230,1141],{"class":77},[42,1232,194],{"class":48},[42,1234,1236],{"class":44,"line":1235},98,[42,1237,1238],{"class":48},"        };\n",[42,1240,1242],{"class":44,"line":1241},99,[42,1243,213],{"class":48},[42,1245,1247],{"class":44,"line":1246},100,[42,1248,220],{"emptyLinePlaceholder":219},[42,1250,1252,1254,1256,1259,1261,1263,1266,1268,1270],{"class":44,"line":1251},101,[42,1253,1100],{"class":184},[42,1255,969],{"class":48},[42,1257,1258],{"class":56},"text",[42,1260,896],{"class":356},[42,1262,922],{"class":48},[42,1264,1265],{"class":925},"txt",[42,1267,929],{"class":48},[42,1269,932],{"class":356},[42,1271,178],{"class":48},[42,1273,1275,1278,1280,1283,1285,1288],{"class":44,"line":1274},102,[42,1276,1277],{"class":48},"        element.innerHTML ",[42,1279,74],{"class":356},[42,1281,1282],{"class":48}," txt ",[42,1284,1138],{"class":356},[42,1286,1287],{"class":77}," \"\"",[42,1289,194],{"class":48},[42,1291,1293],{"class":44,"line":1292},103,[42,1294,213],{"class":48},[42,1296,1298,1300,1302,1305,1307,1310,1312],{"class":44,"line":1297},104,[42,1299,1100],{"class":184},[42,1301,969],{"class":48},[42,1303,1304],{"class":56},"hide",[42,1306,896],{"class":356},[42,1308,1309],{"class":48}," () ",[42,1311,932],{"class":356},[42,1313,178],{"class":48},[42,1315,1317,1320,1322,1324,1327],{"class":44,"line":1316},105,[42,1318,1319],{"class":48},"        element.classList.",[42,1321,1070],{"class":56},[42,1323,475],{"class":48},[42,1325,1326],{"class":77},"\"hide\"",[42,1328,909],{"class":48},[42,1330,1332],{"class":44,"line":1331},106,[42,1333,213],{"class":48},[42,1335,1337,1339,1341,1344,1346,1348,1350],{"class":44,"line":1336},107,[42,1338,1100],{"class":184},[42,1340,969],{"class":48},[42,1342,1343],{"class":56},"show",[42,1345,896],{"class":356},[42,1347,1309],{"class":48},[42,1349,932],{"class":356},[42,1351,178],{"class":48},[42,1353,1355,1357,1360,1362,1364],{"class":44,"line":1354},108,[42,1356,1319],{"class":48},[42,1358,1359],{"class":56},"remove",[42,1361,475],{"class":48},[42,1363,1326],{"class":77},[42,1365,909],{"class":48},[42,1367,1369],{"class":44,"line":1368},109,[42,1370,220],{"emptyLinePlaceholder":219},[42,1372,1374,1377,1379,1381,1383,1385],{"class":44,"line":1373},110,[42,1375,1376],{"class":48},"        element.style.width ",[42,1378,74],{"class":356},[42,1380,1011],{"class":48},[42,1382,1138],{"class":356},[42,1384,1141],{"class":77},[42,1386,194],{"class":48},[42,1388,1390,1393,1395,1397,1399,1401],{"class":44,"line":1389},111,[42,1391,1392],{"class":48},"        element.style.height ",[42,1394,74],{"class":356},[42,1396,1011],{"class":48},[42,1398,1138],{"class":356},[42,1400,1141],{"class":77},[42,1402,194],{"class":48},[42,1404,1406],{"class":44,"line":1405},112,[42,1407,213],{"class":48},[42,1409,1411],{"class":44,"line":1410},113,[42,1412,1413],{"class":48},"}\n",[42,1415,1417],{"class":44,"line":1416},114,[42,1418,220],{"emptyLinePlaceholder":219},[42,1420,1422,1424,1427,1429],{"class":44,"line":1421},115,[42,1423,890],{"class":356},[42,1425,1426],{"class":184}," touchSprites",[42,1428,896],{"class":356},[42,1430,1431],{"class":48}," [];\n",[42,1433,1435],{"class":44,"line":1434},116,[42,1436,220],{"emptyLinePlaceholder":219},[42,1438,1440,1442,1445,1447,1449,1452,1454,1456],{"class":44,"line":1439},117,[42,1441,890],{"class":356},[42,1443,1444],{"class":56}," touchesUpdate",[42,1446,896],{"class":356},[42,1448,922],{"class":48},[42,1450,1451],{"class":925},"touches",[42,1453,929],{"class":48},[42,1455,932],{"class":356},[42,1457,178],{"class":48},[42,1459,1461],{"class":44,"line":1460},118,[42,1462,220],{"emptyLinePlaceholder":219},[42,1464,1466,1469,1471,1474,1477,1480],{"class":44,"line":1465},119,[42,1467,1468],{"class":356},"    for",[42,1470,922],{"class":48},[42,1472,1473],{"class":356},"let",[42,1475,1476],{"class":48}," touch ",[42,1478,1479],{"class":356},"of",[42,1481,1482],{"class":48}," touches) {\n",[42,1484,1486,1489,1492,1494],{"class":44,"line":1485},120,[42,1487,1488],{"class":356},"        const",[42,1490,1491],{"class":184}," number",[42,1493,896],{"class":356},[42,1495,1496],{"class":48}," touch.identifier;\n",[42,1498,1500],{"class":44,"line":1499},121,[42,1501,220],{"emptyLinePlaceholder":219},[42,1503,1505,1507,1509,1512],{"class":44,"line":1504},122,[42,1506,1170],{"class":356},[42,1508,475],{"class":48},[42,1510,1511],{"class":356},"!",[42,1513,1514],{"class":48},"touchSprites[number]){\n",[42,1516,1518,1521,1523,1526,1528],{"class":44,"line":1517},123,[42,1519,1520],{"class":48},"            touchSprites [number] ",[42,1522,74],{"class":356},[42,1524,1525],{"class":356}," new",[42,1527,994],{"class":56},[42,1529,1530],{"class":48},"();\n",[42,1532,1534],{"class":44,"line":1533},124,[42,1535,1536],{"class":48},"        }\n",[42,1538,1540],{"class":44,"line":1539},125,[42,1541,220],{"emptyLinePlaceholder":219},[42,1543,1545,1548,1550],{"class":44,"line":1544},126,[42,1546,1547],{"class":48},"        touchSprites[number].",[42,1549,1343],{"class":56},[42,1551,1530],{"class":48},[42,1553,1555,1557,1560,1562],{"class":44,"line":1554},127,[42,1556,1488],{"class":356},[42,1558,1559],{"class":184}," tts",[42,1561,896],{"class":356},[42,1563,1564],{"class":48}," touchSprites[number];\n",[42,1566,1568],{"class":44,"line":1567},128,[42,1569,220],{"emptyLinePlaceholder":219},[42,1571,1573,1576,1578],{"class":44,"line":1572},129,[42,1574,1575],{"class":48},"        tts.",[42,1577,1105],{"class":56},[42,1579,1580],{"class":48},"({\n",[42,1582,1584],{"class":44,"line":1583},130,[42,1585,1586],{"class":48},"            x: touch.clientX,\n",[42,1588,1590],{"class":44,"line":1589},131,[42,1591,1592],{"class":48},"            y: touch.clientY,\n",[42,1594,1596,1600],{"class":44,"line":1595},132,[42,1597,1599],{"class":1598},"sAwPA","            \u002F\u002F diameter:touch.radiusX,",[42,1601,1602],{"class":1598}," \u002F\u002Fnot supported everywhere\n",[42,1604,1606],{"class":44,"line":1605},133,[42,1607,1608],{"class":48},"        });\n",[42,1610,1612,1614,1616],{"class":44,"line":1611},134,[42,1613,1575],{"class":48},[42,1615,1258],{"class":56},[42,1617,1618],{"class":48},"(number);\n",[42,1620,1622],{"class":44,"line":1621},135,[42,1623,213],{"class":48},[42,1625,1627],{"class":44,"line":1626},136,[42,1628,220],{"emptyLinePlaceholder":219},[42,1630,1632,1635,1638,1641,1644,1647,1650,1653,1656,1659,1661,1664,1666],{"class":44,"line":1631},137,[42,1633,1634],{"class":48},"    touchSprites.",[42,1636,1637],{"class":56},"slice",[42,1639,1640],{"class":48},"(touches.",[42,1642,1643],{"class":184},"length",[42,1645,1646],{"class":48},").",[42,1648,1649],{"class":56},"forEach",[42,1651,1652],{"class":48},"((",[42,1654,1655],{"class":925},"touchSprite",[42,1657,1658],{"class":48},")",[42,1660,932],{"class":356},[42,1662,1663],{"class":48},"touchSprite.",[42,1665,1304],{"class":56},[42,1667,1668],{"class":48},"());\n",[42,1670,1672],{"class":44,"line":1671},138,[42,1673,1413],{"class":48},[42,1675,1677],{"class":44,"line":1676},139,[42,1678,220],{"emptyLinePlaceholder":219},[42,1680,1682,1685,1688,1690,1693,1696,1699,1701,1703],{"class":44,"line":1681},140,[42,1683,1684],{"class":48},"document.",[42,1686,1687],{"class":56},"addEventListener",[42,1689,475],{"class":48},[42,1691,1692],{"class":77},"\"touchmove\"",[42,1694,1695],{"class":48},",(",[42,1697,1698],{"class":925},"event",[42,1700,929],{"class":48},[42,1702,932],{"class":356},[42,1704,178],{"class":48},[42,1706,1708,1711,1714],{"class":44,"line":1707},141,[42,1709,1710],{"class":48},"    event.",[42,1712,1713],{"class":56},"preventDefault",[42,1715,1530],{"class":48},[42,1717,1719,1722],{"class":44,"line":1718},142,[42,1720,1721],{"class":56},"    touchesUpdate",[42,1723,1724],{"class":48},"(event.targetTouches);\n",[42,1726,1728],{"class":44,"line":1727},143,[42,1729,1730],{"class":48},"});\n",[42,1732,1734],{"class":44,"line":1733},144,[42,1735,220],{"emptyLinePlaceholder":219},[42,1737,1739,1741,1743,1745,1748,1750,1752,1754,1756],{"class":44,"line":1738},145,[42,1740,1684],{"class":48},[42,1742,1687],{"class":56},[42,1744,475],{"class":48},[42,1746,1747],{"class":77},"\"touchstart\"",[42,1749,1695],{"class":48},[42,1751,1698],{"class":925},[42,1753,929],{"class":48},[42,1755,932],{"class":356},[42,1757,178],{"class":48},[42,1759,1761,1763,1765],{"class":44,"line":1760},146,[42,1762,1710],{"class":48},[42,1764,1713],{"class":56},[42,1766,1530],{"class":48},[42,1768,1770,1772],{"class":44,"line":1769},147,[42,1771,1721],{"class":56},[42,1773,1724],{"class":48},[42,1775,1777],{"class":44,"line":1776},148,[42,1778,1730],{"class":48},[42,1780,1782],{"class":44,"line":1781},149,[42,1783,220],{"emptyLinePlaceholder":219},[42,1785,1787,1789,1791,1793,1796,1798,1800,1802,1804],{"class":44,"line":1786},150,[42,1788,1684],{"class":48},[42,1790,1687],{"class":56},[42,1792,475],{"class":48},[42,1794,1795],{"class":77},"\"touchend\"",[42,1797,1695],{"class":48},[42,1799,1698],{"class":925},[42,1801,929],{"class":48},[42,1803,932],{"class":356},[42,1805,178],{"class":48},[42,1807,1809,1811,1813],{"class":44,"line":1808},151,[42,1810,1710],{"class":48},[42,1812,1713],{"class":56},[42,1814,1530],{"class":48},[42,1816,1818,1820],{"class":44,"line":1817},152,[42,1819,1721],{"class":56},[42,1821,1724],{"class":48},[42,1823,1825],{"class":44,"line":1824},153,[42,1826,1730],{"class":48},[42,1828,1830],{"class":44,"line":1829},154,[42,1831,220],{"emptyLinePlaceholder":219},[42,1833,1835,1837,1839],{"class":44,"line":1834},155,[42,1836,155],{"class":48},[42,1838,877],{"class":52},[42,1840,60],{"class":48},[42,1842,1844,1846,1848],{"class":44,"line":1843},156,[42,1845,155],{"class":48},[42,1847,37],{"class":52},[42,1849,60],{"class":48},[29,1851,1853],{"id":1852},"setup-and-observations","Setup and observations",[10,1855,1856],{},"I tested this on a raspberry-pi to which I added a 7-inch touch display. I had one computer with the source code, which had a static server serving the multi touch test html file. On the raspberry pi, I opened chromium on kiosk mode, pointing to the url of my code. Alternatively you could transfer the html file to the raspberry pi filesystem.",[10,1858,1859],{},"Static serve the html:",[33,1861,1865],{"className":1862,"code":1863,"language":1864,"meta":38,"style":38},"language-shell shiki shiki-themes github-dark","light-server -s .\u002F -b localhost -p:4000\n","shell",[17,1866,1867],{"__ignoreMap":38},[42,1868,1869],{"class":44,"line":45},[42,1870,1863],{},[10,1872,1873],{},"Open chromium via ssh, but show it on the local display:",[33,1875,1877],{"className":1862,"code":1876,"language":1864,"meta":38,"style":38},"DISPLAY=:0 chromium-browser --kiosk \"http:\u002F\u002F192.168.1.3:4000\u002Fmulti-touch-test.html\" -touch-devices=2 --remote-debugging-port=9000 --disable-pinch\n",[17,1878,1879],{"__ignoreMap":38},[42,1880,1881],{"class":44,"line":45},[42,1882,1876],{},[10,1884,1885],{},"It works well, although the animation ends up having a low frame rate. I yet have to find out whether this is due to the touch driver report rate being low, or the web app being too much for the processor handle.",[29,1887,1889],{"id":1888},"questions-and-collaboration","Questions and collaboration",[10,1891,1892,1893,969],{},"If you are left with any questions or you want to suggest an improvement to this code, go to the ",[1894,1895,1897],"a",{"href":1896},"https:\u002F\u002Fgist.github.com\u002Fautotel\u002F681543428a939e8ac30e9151c08cb504","Gist in github",[167,1899,1900],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":38,"searchDepth":63,"depth":63,"links":1902},[1903,1904,1905],{"id":17,"depth":63,"text":31},{"id":1852,"depth":63,"text":1853},{"id":1888,"depth":63,"text":1889},[1907],"blog","2021-07-26",null,"md","\u002Fimages\u002F2021\u002F07\u002Fminimal-touch-screen-example.jpg",{},"\u002Fposts\u002F2021-07-26-multitouch-start",{"title":5,"description":12},"posts\u002F2021-07-26-multitouch-start",[1917],"tool_javascript",false,"64ydsVTTWFpkQcY0-cc0Jk20O_DEZuH-nzSWtxmAUcU",1790978019087]