[{"data":1,"prerenderedAt":282},["ShallowReactive",2],{"posts:\u002Fposts\u002F2024-09-06-pen":3},{"id":4,"title":5,"body":6,"categories":265,"date":267,"description":268,"extension":269,"image":270,"lang":268,"meta":271,"navigation":179,"path":272,"seo":273,"stem":275,"tags":276,"titleInPicture":280,"__hash__":281},"posts\u002Fposts\u002F2024-09-06-pen.md","Pen input with pressure sensitivity",{"type":7,"value":8,"toc":263},"minimark",[9,21,24,27,35,38,48,51,198,206,209,259],[10,11,12,13],"p",{},"You can detect and use pen input events on websites, including pressure sensitivity, tilt and other variables.\n",[14,15,20],"a",{"className":16,"href":19},[17,18],"button","blue","https:\u002F\u002Fautotel.co\u002Fscribe\u002F","Try it here",[10,22,23],{},"I have yet to find a good, free tool that lets me draw with the pencil on linux. All those I can find have some problem that completely kills the experience, such as lines being drawn if I accidentally touch the screen (I like to draw with my hand resting on the surface) or them not taking into account the pencil pressure (e.g. gimp).",[10,25,26],{},"I realized that web browsers detect the pen pressure well enough, so I wrote a minimal script for this.",[10,28,29,30],{},"The code: ",[14,31,32],{"href":32,"rel":33},"https:\u002F\u002Fgithub.com\u002Fautotel\u002Fpencil-input-playground",[34],"nofollow",[10,36,37],{},"The branches are important",[39,40,41,45],"ul",{},[42,43,44],"li",{},"Basic: contains the minimum functionality",[42,46,47],{},"Complex: implements more functions. It can be used multi-player. It's a branch for experimentation, so things might act weird sometimes.",[10,49,50],{},"This is the most main code for this:",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-javascript shiki shiki-themes github-dark","function down_handler(event) {\n    event.preventDefault();\n    if (event.pointerType === \"touch\") {\n        view.dragStart(event.x, event.y);\n    } else {\n        scribe.start(event.x, event.y, event.pressure);\n        page.startTrace();\n    }\n}\n\n\nel.onpointerdown = down_handler;\n","javascript","",[59,60,61,85,97,115,127,139,151,162,168,174,181,186],"code",{"__ignoreMap":57},[62,63,66,70,74,78,82],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"snl16","function",[62,71,73],{"class":72},"svObZ"," down_handler",[62,75,77],{"class":76},"s95oV","(",[62,79,81],{"class":80},"s9osk","event",[62,83,84],{"class":76},") {\n",[62,86,88,91,94],{"class":64,"line":87},2,[62,89,90],{"class":76},"    event.",[62,92,93],{"class":72},"preventDefault",[62,95,96],{"class":76},"();\n",[62,98,100,103,106,109,113],{"class":64,"line":99},3,[62,101,102],{"class":68},"    if",[62,104,105],{"class":76}," (event.pointerType ",[62,107,108],{"class":68},"===",[62,110,112],{"class":111},"sU2Wk"," \"touch\"",[62,114,84],{"class":76},[62,116,118,121,124],{"class":64,"line":117},4,[62,119,120],{"class":76},"        view.",[62,122,123],{"class":72},"dragStart",[62,125,126],{"class":76},"(event.x, event.y);\n",[62,128,130,133,136],{"class":64,"line":129},5,[62,131,132],{"class":76},"    } ",[62,134,135],{"class":68},"else",[62,137,138],{"class":76}," {\n",[62,140,142,145,148],{"class":64,"line":141},6,[62,143,144],{"class":76},"        scribe.",[62,146,147],{"class":72},"start",[62,149,150],{"class":76},"(event.x, event.y, event.pressure);\n",[62,152,154,157,160],{"class":64,"line":153},7,[62,155,156],{"class":76},"        page.",[62,158,159],{"class":72},"startTrace",[62,161,96],{"class":76},[62,163,165],{"class":64,"line":164},8,[62,166,167],{"class":76},"    }\n",[62,169,171],{"class":64,"line":170},9,[62,172,173],{"class":76},"}\n",[62,175,177],{"class":64,"line":176},10,[62,178,180],{"emptyLinePlaceholder":179},true,"\n",[62,182,184],{"class":64,"line":183},11,[62,185,180],{"emptyLinePlaceholder":179},[62,187,189,192,195],{"class":64,"line":188},12,[62,190,191],{"class":76},"el.onpointerdown ",[62,193,194],{"class":68},"=",[62,196,197],{"class":76}," down_handler;\n",[10,199,200,201,205],{},"as you can see, we utilize the pointerdown handler, which is the same method for handling ",[202,203,204],"em",{},"mouse down"," events. Since I want to also be able to draw with the mouse if necessary, I simply pass the pressure to my handler. This pressure value, conveniently is set to 0.5 if it was generated by a mouse drag.",[10,207,208],{},"The browser also detects many other factors such as tilt, twist, et cetera. My pen does not support these, so I was not able to try them out. But you can try them right away by calling this statement on your web console:",[52,210,212],{"className":54,"code":211,"language":56,"meta":57,"style":57},"document.onpointermove = ({\n    type, pressure, twist, tiltX, tiltY, pointerId, tangentialPressure, which\n}) => console.log({\n    type, pressure, twist, tiltX, tiltY, pointerId, tangentialPressure, which\n})\n",[59,213,214,228,233,250,254],{"__ignoreMap":57},[62,215,216,219,222,225],{"class":64,"line":65},[62,217,218],{"class":76},"document.",[62,220,221],{"class":72},"onpointermove",[62,223,224],{"class":68}," =",[62,226,227],{"class":76}," ({\n",[62,229,230],{"class":64,"line":87},[62,231,232],{"class":76},"    type, pressure, twist, tiltX, tiltY, pointerId, tangentialPressure, which\n",[62,234,235,238,241,244,247],{"class":64,"line":99},[62,236,237],{"class":76},"}) ",[62,239,240],{"class":68},"=>",[62,242,243],{"class":76}," console.",[62,245,246],{"class":72},"log",[62,248,249],{"class":76},"({\n",[62,251,252],{"class":64,"line":117},[62,253,232],{"class":76},[62,255,256],{"class":64,"line":129},[62,257,258],{"class":76},"})\n",[260,261,262],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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":57,"searchDepth":87,"depth":87,"links":264},[],[266],"blog","2024-09-06",null,"md","\u002Fimages\u002F2024\u002F09\u002Fscribus.png",{},"\u002Fposts\u002F2024-09-06-pen",{"title":5,"description":274},"You can detect and use pen input events on websites, including pressure sensitivity, tilt and other variables.\nTry it here","posts\u002F2024-09-06-pen",[277,278,279],"area_development","tool_javascript","gist",false,"sfegwpWfbLB1exA08TF65ildjU63VP5q-YICnnb6XRQ",1790978019483]