{"type":"rich","version":"1.0","provider_name":"phorkie","provider_url":"https:\/\/p.cweiske.de\/","title":"dreambox web keyboard","author_name":"Christian Weiske","cache_age":86400,"width":900,"height":900,"html":"<!-- embedding all files of https:\/\/p.cweiske.de\/370 -->\n<link rel=\"stylesheet\" href=\"https:\/\/p.cweiske.de\/css\/embed.css\"\/>\n<div class=\"phork\" id=\"370\">\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  \n<div class=\"document\" id=\"dreambox-web-keyboard\">\n<h1 class=\"title\">Dreambox web keyboard<\/h1>\n\n<p>Useful to input text with your mobile phone's keyboard directly into dreambox's enigma2 interface.<\/p>\n<p>Copy to dreambox:<\/p>\n<pre class=\"literal-block\">\nscp keyboard.html dreambox:\/usr\/lib\/enigma2\/python\/Plugins\/Extensions\/WebInterface\/web-data\/keyboard.html\n<\/pre>\n<p>Access it at:<\/p>\n<blockquote>\n<a class=\"reference external\" href=\"http:\/\/dreambox\/web-data\/keyboard.html\">http:\/\/dreambox\/web-data\/keyboard.html<\/a><\/blockquote>\n<\/div>\n\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/370\/rev-raw\/5b2172fc4471392d0e3f5ea056bdf8c58440556a\/README.rst\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/370#README.rst\">README.rst<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.xml .de1, .xml .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.xml  {font-family:monospace;}\n.xml .imp {font-weight: bold; color: red;}\n.xml li, .xml .li1 {color: #DDD;}\n.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.xml .es0 {color: #000099; font-weight: bold;}\n.xml .br0 {color: #66cc66;}\n.xml .sy0 {color: #66cc66;}\n.xml .st0 {color: #ff0000;}\n.xml .sc-1 {color: #808080; font-style: italic;}\n.xml .sc0 {color: #00bbdd;}\n.xml .sc1 {color: #ddbb00;}\n.xml .sc2 {color: #339933;}\n.xml .sc3 {color: #009900;}\n.xml .re0 {color: #000066;}\n.xml .re1 {color: #000000; font-weight: bold;}\n.xml .re2 {color: #000000; font-weight: bold;}\n.xml span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"xml\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59\n60\n61\n62\n63\n64\n65\n66\n67\n68\n69\n70\n71\n72\n73\n74\n75\n76\n77\n78\n79\n80\n81\n82\n83\n84\n85\n86\n87\n88\n89\n90\n91\n92\n93\n94\n95\n96\n97\n98\n99\n100\n101\n102\n103\n104\n105\n106\n107\n108\n109\n110\n111\n112\n113\n114\n115\n116\n117\n118\n119\n120\n121\n122\n123\n124\n125\n126\n127\n128\n129\n130\n131\n132\n133\n134\n135\n136\n137\n138\n139\n140\n141\n142\n143\n144\n145\n146\n147\n148\n149\n150\n151\n152\n153\n154\n155\n156\n157\n158\n159\n160\n161\n162\n163\n164\n165\n166\n167\n168\n169\n170\n171\n172\n173\n174\n175\n176\n177\n178\n179\n180\n181\n182\n183\n184\n185\n186\n187\n188\n189\n190\n191\n192\n193\n194\n195\n196\n197\n198\n199\n200\n201\n202\n203\n204\n205\n206\n207\n208\n209\n210\n211\n212\n213\n214\n215\n216\n217\n218\n219\n220\n221\n222\n223\n224\n225\n226\n227\n228\n229\n230\n231\n232\n233\n234\n235\n236\n237\n238\n239\n240\n241\n242\n243\n244\n245\n246\n247\n248\n249\n250\n251\n252\n253\n254\n255\n256\n257\n258\n259\n260\n261\n262\n263\n264\n265\n266\n267\n268\n269\n270\n271\n272\n273\n274\n275\n276\n277\n278\n279\n280\n281\n282\n283\n284\n285\n286\n287\n288\n289\n290\n291\n292\n293\n294\n295\n296\n297\n298\n299\n300\n301\n302\n303\n304\n305\n306\n307\n308\n309\n310\n311\n312\n313\n314\n315\n316\n317\n318\n319\n320\n321\n322\n323\n324\n325\n326\n327\n328\n329\n330\n331\n332\n333\n334\n335\n336\n337\n338\n339\n340\n341\n342\n343\n344\n345\n346\n347\n348\n349\n350\n351\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\"><span class=\"sc3\"><span class=\"re1\">&lt;html<\/span> <span class=\"re0\">xmlns<\/span>=<span class=\"st0\">&quot;http:\/\/www.w3.org\/1999\/xhtml&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;head<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;meta<\/span> <span class=\"re0\">charset<\/span>=<span class=\"st0\">&quot;utf-8&quot;<\/span><span class=\"re2\">\/&gt;<\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;title<span class=\"re2\">&gt;<\/span><\/span><\/span>Dreambox web keyboard<span class=\"sc3\"><span class=\"re1\">&lt;\/title<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;meta<\/span> <span class=\"re0\">name<\/span>=<span class=\"st0\">&quot;viewport&quot;<\/span> <span class=\"re0\">content<\/span>=<span class=\"st0\">&quot;width=device-width, initial-scale=1&quot;<\/span><span class=\"re2\">\/&gt;<\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;style<\/span> <span class=\"re0\">type<\/span>=<span class=\"st0\">&quot;text\/css&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n#presses {\n&#160; &#160; line-height: 4ex;\n&#160; &#160; border: 1px solid grey;\n&#160; &#160; min-height: 4ex;\n&#160; &#160; text-align: right;\n&#160; &#160; padding-right: 1ex;\n}\n#typer {\n&#160; &#160; width: 100%;\n&#160; &#160; height: 4ex;\n}\n#keyboard, #textinput {\n&#160; &#160; line-height: 4ex;\n}\n#keyboard a, .key {\n&#160; &#160; border: 1px solid #888;\n&#160; &#160; background-color: #DDD;\n&#160; &#160; border-radius: 0.5ex;\n&#160; &#160; padding: 0.5ex 1ex;\n&#160; &#160; margin: 0.2ex;\n&#160; &#160; text-decoration: none;\n}\nkbd {\n&#160; &#160; border: 1px solid #888;\n&#160; &#160; background-color: #DDD;\n&#160; &#160; border-radius: 0.5ex;\n&#160; &#160; padding: 0.5ex 1ex;\n&#160; &#160; margin: 0.2ex;\n}\nkbd.noid {\n&#160; &#160; background-color: #FAA;\n}\nkbd.idfound {\n&#160; &#160; border: 1px dotted #888;\n}\nkbd.error {\n&#160; &#160; background-color: #F00;\n}\nkbd.sent {\n&#160; &#160; background-color: #AFA;\n}\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;\/style<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/head<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;body<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;p<span class=\"re2\">&gt;<\/span><\/span><\/span>Status:<span class=\"sc3\"><span class=\"re1\">&lt;\/p<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;div<\/span> <span class=\"re0\">id<\/span>=<span class=\"st0\">&quot;presses&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;div<\/span> <span class=\"re0\">id<\/span>=<span class=\"st0\">&quot;textinput&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160; &#160;Text input:\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;input<\/span> <span class=\"re0\">type<\/span>=<span class=\"st0\">&quot;text&quot;<\/span> <span class=\"re0\">id<\/span>=<span class=\"st0\">&quot;typer&quot;<\/span> <span class=\"re0\">name<\/span>=<span class=\"st0\">&quot;typer&quot;<\/span> <span class=\"re0\">value<\/span>=<span class=\"st0\">&quot; &quot;<\/span><span class=\"re2\">\/&gt;<\/span><span class=\"re1\">&lt;br<\/span><span class=\"re2\">\/&gt;<\/span><\/span>\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;div<\/span> <span class=\"re0\">style<\/span>=<span class=\"st0\">&quot;text-align: right&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160; &#160; <span class=\"sc3\"><span class=\"re1\">&lt;a<\/span> <span class=\"re0\">class<\/span>=<span class=\"st0\">&quot;key&quot;<\/span> <span class=\"re0\">href<\/span>=<span class=\"st0\">&quot;#&quot;<\/span> <span class=\"re0\">onclick<\/span>=<span class=\"st0\">&quot;handleKey('Backspace');&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span><span class=\"sc1\">&amp;nbsp;&amp;nbsp;<\/span>\u21d0<span class=\"sc1\">&amp;nbsp;&amp;nbsp;<\/span><span class=\"sc3\"><span class=\"re1\">&lt;\/a<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;script<\/span> <span class=\"re0\">type<\/span>=<span class=\"st0\">&quot;text\/javascript&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\/*<span class=\"sc2\">&lt;![CDATA[*\/<\/span>\n<span class=\"sc2\">var typer = document.getElementById('typer');<\/span>\n<span class=\"sc2\">window.onkeypress = handleKeypress;<\/span>\n<span class=\"sc2\">\/\/window.onkeyup = handleKeypress;<\/span>\n<span class=\"sc2\">\/\/for android<\/span>\n<span class=\"sc2\">typer.onchange = handleOnChange;<\/span>\n<span class=\"sc2\">window.onload = function() {<\/span>\n<span class=\"sc2\"> &#160; &#160;typer.focus();<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">\/\/javascript key name =&gt; enigma2 remote control key code settings<\/span>\n<span class=\"sc2\">\/\/ we need to use the T9 mapping since enigma2 web interface api<\/span>\n<span class=\"sc2\">\/\/ does not support direct ascii control code input<\/span>\n<span class=\"sc2\">var keyIdMap = {<\/span>\n<span class=\"sc2\"> &#160; \/\/ 1<\/span>\n<span class=\"sc2\"> &#160; ' ': {'key': &#160;2, 'presses': 1, 'wait': true, label: '\u23b5'},<\/span>\n<span class=\"sc2\"> &#160; '1': {'key': &#160;2, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '.': {'key': &#160;2, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; ':': {'key': &#160;2, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\/': {'key': &#160;2, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '-': {'key': &#160;2, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '_': {'key': &#160;2, 'presses': 7, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 2<\/span>\n<span class=\"sc2\"> &#160; 'a': {'key': &#160;3, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'b': {'key': &#160;3, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'c': {'key': &#160;3, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00e4': {'key': &#160;3, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '2': {'key': &#160;3, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'A': {'key': &#160;3, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'B': {'key': &#160;3, 'presses': 7, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'C': {'key': &#160;3, 'presses': 8, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00c4': {'key': &#160;3, 'presses': 9, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 3<\/span>\n<span class=\"sc2\"> &#160; 'd': {'key': &#160;4, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'e': {'key': &#160;4, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'f': {'key': &#160;4, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '3': {'key': &#160;4, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'D': {'key': &#160;4, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'E': {'key': &#160;4, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'F': {'key': &#160;4, 'presses': 7, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 4 <\/span>\n<span class=\"sc2\"> &#160; 'g': {'key': &#160;5, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'h': {'key': &#160;5, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'i': {'key': &#160;5, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '4': {'key': &#160;5, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'G': {'key': &#160;5, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'H': {'key': &#160;5, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'I': {'key': &#160;5, 'presses': 7, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 5<\/span>\n<span class=\"sc2\"> &#160; 'j': {'key': &#160;6, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'k': {'key': &#160;6, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'l': {'key': &#160;6, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '5': {'key': &#160;6, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'J': {'key': &#160;6, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'K': {'key': &#160;6, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'L': {'key': &#160;6, 'presses': 7, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 6<\/span>\n<span class=\"sc2\"> &#160; 'm': {'key': &#160;7, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'n': {'key': &#160;7, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'o': {'key': &#160;7, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00f6': {'key': &#160;7, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '6': {'key': &#160;7, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'M': {'key': &#160;7, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'N': {'key': &#160;7, 'presses': 7, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'O': {'key': &#160;7, 'presses': 8, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00d6': {'key': &#160;7, 'presses': 9, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 7<\/span>\n<span class=\"sc2\"> &#160; 'p': {'key': &#160;8, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'q': {'key': &#160;8, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'r': {'key': &#160;8, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 's': {'key': &#160;8, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00df': {'key': &#160;8, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '7': {'key': &#160;8, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'P': {'key': &#160;8, 'presses': 7, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'Q': {'key': &#160;8, 'presses': 8, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'R': {'key': &#160;8, 'presses': 9, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'S': {'key': &#160;8, 'presses': 10, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 8<\/span>\n<span class=\"sc2\"> &#160; 't': {'key': &#160;9, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'u': {'key': &#160;9, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'v': {'key': &#160;9, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00fc': {'key': &#160;9, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '8': {'key': &#160;9, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'T': {'key': &#160;9, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'U': {'key': &#160;9, 'presses': 7, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'V': {'key': &#160;9, 'presses': 8, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '\u00dc': {'key': &#160;9, 'presses': 9, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 9<\/span>\n<span class=\"sc2\"> &#160; 'w': {'key': 10, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'x': {'key': 10, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'y': {'key': 10, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'z': {'key': 10, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '9': {'key': 10, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'W': {'key': 10, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'X': {'key': 10, 'presses': 7, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'Y': {'key': 10, 'presses': 8, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; 'Z': {'key': 10, 'presses': 9, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/ 0<\/span>\n<span class=\"sc2\"> &#160; '0': {'key': 11, 'presses': 1, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; ',': {'key': 11, 'presses': 2, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '?': {'key': 11, 'presses': 3, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '!': {'key': 11, 'presses': 4, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '&amp;': {'key': 11, 'presses': 5, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '@': {'key': 11, 'presses': 6, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '=': {'key': 11, 'presses': 7, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '*': {'key': 11, 'presses': 8, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; &quot;'&quot;: {'key': 11, 'presses': 9, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '+': {'key': 11, 'presses': 10, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '&quot;': {'key': 11, 'presses': 11, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '(': {'key': 11, 'presses': 12, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; ')': {'key': 11, 'presses': 13, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '$': {'key': 11, 'presses': 14, 'wait': true},<\/span>\n<span class=\"sc2\"> &#160; '~': {'key': 11, 'presses': 15, 'wait': true},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/Arrow keys<\/span>\n<span class=\"sc2\"> &#160; 'ArrowUp': &#160; &#160;{'key': 103, 'presses': 1, 'wait': false, 'label': '\u2191'},<\/span>\n<span class=\"sc2\"> &#160; 'ArrowLeft': &#160;{'key': 105, 'presses': 1, 'wait': false, 'label': '\u2190'},<\/span>\n<span class=\"sc2\"> &#160; 'ArrowRight': {'key': 106, 'presses': 1, 'wait': false, 'label': '\u2192'},<\/span>\n<span class=\"sc2\"> &#160; 'ArrowDown': &#160;{'key': 108, 'presses': 1, 'wait': false, 'label': '\u2193'},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; \/\/special<\/span>\n<span class=\"sc2\"> &#160; 'Backspace': &#160;{'key': &#160;14, 'presses': 1, 'wait': false, 'label': '\u21d0'},<\/span>\n<span class=\"sc2\"> &#160; 'Delete': &#160; &#160; {'key': 407, 'presses': 1, 'wait': false, 'label': 'Del'},<\/span>\n&#160;\n<span class=\"sc2\"> &#160; 'Enter': &#160; &#160; &#160;{'key': 28, 'presses': 1, 'wait': false, 'label': '\u21b2'},<\/span>\n<span class=\"sc2\"> &#160; 'Escape': &#160; &#160; {'key': &#160;1, 'presses': 1, 'wait': false, 'label': 'Esc'},<\/span>\n<span class=\"sc2\"> &#160; 'Tab': &#160; &#160; &#160; &#160;{'key': 15, 'presses': 1, 'wait': false, 'label': '\u21b9'},<\/span>\n<span class=\"sc2\">};<\/span>\n&#160;\n<span class=\"sc2\">var testMode = false;<\/span>\n<span class=\"sc2\">var pressDiv = document.getElementById('presses');<\/span>\n<span class=\"sc2\">var typer = document.getElementById('typer');<\/span>\n<span class=\"sc2\">var nextId = 0;<\/span>\n<span class=\"sc2\">var processorRunning = false;<\/span>\n<span class=\"sc2\">var queue = [];<\/span>\n<span class=\"sc2\">var lastKeyInfo = null;<\/span>\n&#160;\n<span class=\"sc2\">function handleOnChange()<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;var newText = typer.value;<\/span>\n<span class=\"sc2\"> &#160; &#160;if (newText == '') {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;\/\/key deleted<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;handleKey('Backspace');<\/span>\n<span class=\"sc2\"> &#160; &#160;} else {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;var characters = newText.substr(1).split('');<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;for (var n = 0; n &lt; characters.length; n++) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;handleKey(characters[n]);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;typer.value = ' ';<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function handleKeypress(event)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;if (event.ctrlKey) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;\/\/do not catch ctrl+r (page reload)<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;return;<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;if (event.key) {\/\/android has no event.key value<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;handleKey(event.key);<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function handleKey(key)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;var classes = &quot;&quot;;<\/span>\n<span class=\"sc2\"> &#160; &#160;var keyInfo = {};<\/span>\n<span class=\"sc2\"> &#160; &#160;if (keyIdMap[key]) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;\/\/poor language's clone<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;keyInfo = JSON.parse(JSON.stringify(keyIdMap[key]));<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;classes = &quot;idfound&quot;;<\/span>\n<span class=\"sc2\"> &#160; &#160;} else {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;classes = &quot;noid&quot;;<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n&#160;\n<span class=\"sc2\"> &#160; &#160;typer.value = &quot; &quot;;<\/span>\n<span class=\"sc2\"> &#160; &#160;keyInfo.elemId = getNextId();<\/span>\n&#160;\n<span class=\"sc2\"> &#160; &#160;var label = key;<\/span>\n<span class=\"sc2\"> &#160; &#160;if (keyInfo.label) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;label = keyInfo.label;<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;pressDiv.insertAdjacentHTML(<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;'beforeend',<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;' &lt;kbd'<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;+ ' id=&quot;'+ keyInfo.elemId + '&quot;'<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;+ ' class=&quot;' + classes + '&quot;'<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;+ '&gt;' + label + '&lt;\/kbd&gt;'<\/span>\n<span class=\"sc2\"> &#160; &#160;);<\/span>\n&#160;\n<span class=\"sc2\"> &#160; &#160;if (keyInfo.key) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;queue.push(keyInfo);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;if (!processorRunning) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;processorRunning = true;<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;window.setTimeout(processQueue);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;} else {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;autoRemove(keyInfo.elemId);<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function getNextId()<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;nextId++;<\/span>\n<span class=\"sc2\"> &#160; &#160;return 'key' + nextId;<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function processQueue()<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;while (queue.length &gt; 0) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;var keyInfo = queue.slice(0, 1)[0];<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;if (lastKeyInfo<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;&amp;&amp; lastKeyInfo.wait<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;&amp;&amp; lastKeyInfo.key == keyInfo.key<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;lastKeyInfo = null;<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;window.setTimeout(processQueue, 1000);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;return;<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;queue.shift();\/\/remove from queue<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;sendKey(keyInfo);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;lastKeyInfo = keyInfo;<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;processorRunning = false;<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function sendKey(keyInfo)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;for (var n = 1; n &lt;= keyInfo.presses; n++) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;var xhr = new XMLHttpRequest();<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;xhr.open('POST', '\/web\/remotecontrol', false);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;xhr.setRequestHeader(&quot;Content-type&quot;, &quot;application\/x-www-form-urlencoded&quot;);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;if (testMode) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;continue;<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;try {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;xhr.send('command=' + keyInfo.key);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;} catch (e) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;console.log(e);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;if (parseInt(xhr.status) \/ 100 != 2) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;showKeyError(keyInfo.elemId);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;return;<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\"> &#160; &#160;showKeySent(keyInfo.elemId);<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function showKeySent(elemId)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;document.getElementById(elemId).className = &quot;sent&quot;;<\/span>\n<span class=\"sc2\"> &#160; &#160;autoRemove(elemId);<\/span>\n<span class=\"sc2\">}<\/span>\n<span class=\"sc2\">function showKeyError(elemId)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;document.getElementById(elemId).className = &quot;error&quot;;<\/span>\n<span class=\"sc2\"> &#160; &#160;autoRemove(elemId);<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function autoRemove(elemId)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;window.setTimeout(<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;function() {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160; &#160; &#160;removeKey(elemId);<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;},<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;5000<\/span>\n<span class=\"sc2\"> &#160; &#160;);<\/span>\n<span class=\"sc2\">}<\/span>\n&#160;\n<span class=\"sc2\">function removeKey(elemId)<\/span>\n<span class=\"sc2\">{<\/span>\n<span class=\"sc2\"> &#160; &#160;var elem = document.getElementById(elemId);<\/span>\n<span class=\"sc2\"> &#160; &#160;if (elem != null) {<\/span>\n<span class=\"sc2\"> &#160; &#160; &#160; &#160;elem.parentElement.removeChild(elem);<\/span>\n<span class=\"sc2\"> &#160; &#160;}<\/span>\n<span class=\"sc2\">}<\/span>\n<span class=\"sc2\">\/*]]&gt;<\/span>*\/<span class=\"sc3\"><span class=\"re1\">&lt;\/script<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/body<span class=\"re2\">&gt;<\/span><\/span><\/span>\n<span class=\"sc3\"><span class=\"re1\">&lt;\/html<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/370\/rev-raw\/5b2172fc4471392d0e3f5ea056bdf8c58440556a\/keyboard.html\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/370#keyboard.html\">keyboard.html<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"370\/rev-raw\/5b2172fc4471392d0e3f5ea056bdf8c58440556a\/screenshot.png\" alt=\"screenshot.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/370\/rev-raw\/5b2172fc4471392d0e3f5ea056bdf8c58440556a\/screenshot.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/370#screenshot.png\">screenshot.png<\/a>\n <\/div>\n<\/div>\n<\/div>\n"}
