ingress-glyph-tools/input-pad-example.html at master · audiocommander/ingress-glyph-tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <!--meta name="viewport" content="width=302" /-->
	<meta name="viewport" id="viewport" content="width=302 initial-scale=1 maximum-scale=1 user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="shortcut icon" href="icon.png" />
	<link rel="apple-touch-icon" href="icon.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="icon_76.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="icon_120.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="icon_152.png" />
    <!--link rel="apple-touch-startup-image" href="icon_320x480.png" /--> <!-- 320 x 480 -->
    <!-- open links in webapp -->
    <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

    <link rel="stylesheet" href="black.css" />
    <script type="text/javascript" src="glyph-tools.js" charset="utf-8"></script>
    <script type="text/javascript" src="glyph-dic.js" charset="utf-8"></script>
    <style>
      #page { width: 302px;}
      #control { line-height: 1.5;}
    </style>
    <title>Input Pad Example - Ingress Glyph Tools</title>
  </head>
  <body>
    <div id="page">
      <div id="glyph-pad">
      </div>
      <div id="control">
        <input type="button" value="Clear" onclick="glyphPad.clearGlyph()" />
        <input type="button" value="Undo" onclick="glyphPad.removeLastEdge()" />
        <br />
        Code:<input type="text" id="glyph-code" /><input type="button" value="Set" onclick="setGlyphFromCode(glyphCode.value)" /><br />
        Word:<input type="text" id="glyph-word" /><input type="button" value="Set" onclick="setGlyphFromWord(glyphWord.value)" /><br />
        <a href="index.html">Ingress Glyph Tools</a>
      </div>
    </div>

    <script>
      var gm9igt = gm9.IngressGlyphTools;
      var glyphPad = gm9igt.createInputPad({
        size: 300,
        style: {
          color: "white"
        }
      });
      document.getElementById("glyph-pad").appendChild(glyphPad);
      glyphPad.addEventListener("glyphchange", function(e){
        var glyph = glyphPad.getGlyph();
        glyphCode.value = glyph.toString();
        glyphWord.value = gm9igt.glyphtionary.get(glyph);
      }, false);

      var glyphCode = document.getElementById("glyph-code");
      var glyphWord = document.getElementById("glyph-word");

      function setGlyphFromCode(code){
          glyphPad.setGlyph(gm9igt.Glyph.fromString(code))
      }
      function setGlyphFromWord(word){
          glyphPad.setGlyph((gm9igt.glyphtionaryIndex[word.toLowerCase()] || [null])[0]);
      }

      // Parse Query String
      function getQueryParams()
      {
          var result = {};
          var q = document.location.search.substr(1);
          if(q.length > 0){
              var ps = q.split("&");
              for(var pi = 0; pi < ps.length; ++pi){
                  var nv = ps[pi].split("=");
                  result[nv[0]] = decodeURI(nv[1].replace(/\+/g, " "));
              }
          }
          return result;
      }
      var queryParams = getQueryParams();
      if(queryParams["c"]){
          setGlyphFromCode(queryParams["c"]);
      }
      if(queryParams["w"]){
          setGlyphFromWord(queryParams["w"]);
      }

      // Dynamic Viewport Controll
      gm9igt.controlViewportMetaElement(document.getElementById("page"));
    </script>
  </body>
</html>