Home Explore Help
Sign In
jack
/
cocorobolx
1
0
Fork 0
Files Issues 0 Wiki
Tree: f4db1a0f2f
Branches Tags
cocorobolx
/
blockly
/
generators
/
python
/
webpage.js

webpage.js 37 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311 
  1. 'use strict';
    2. 

  2. 

  3. goog.provide('Blockly.Python.webpage');
    4. 

  4. goog.require('Blockly.Python');
    5. 

  5. 

  6. /*
    7. 

  7. sed 's/^/START/; s/$/END/' target.html >> target_NEW.html
    8. 

  8. */
    9. 

  9. 

  10. Blockly.Python['webpage_label'] = function(block) {
    11. 

  11.     var code = "server.send(200, \"text/html\",\"";
    12. 

  12.     code += "<!DOCTYPE HTML><html><head><meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1, user-scalable=no\\\"> <meta http-equiv=\\\"refresh\\\" content=\\\"1\\\">  </head><style>body { font-family:Arial;padding-top: 10px; background-color: white; user-select: none; --webkit-user-select: none; /* updated */ } .row { margin-left: auto; margin-right: auto; margin-bottom: 20px; text-align: center; } .label { font-size: 20px; line-height: 28px; } .value { font-weight: bolder !important; margin-left: 2px; padding: 5px 8px; border-radius: 5px; background-color: rgba(0,0,0,.025); border: 1px solid rgba(0,0,0,.15); } .header { padding: 5px 0; border-radius: 10px; background-color: rgba(0, 0, 0, .04); color: #111; border: 1px solid rgba(0,0,0,.1); width: 80%; margin-left: auto; margin-right: auto; } .content { padding: 20px 20px 20px 20px; } h1,h2,h3,h4,h5,h6 {font-weight: 500;line-height: 1.1;z-index: 1001;}p {margin-bottom: 10px;text-align: center;z-index: 1001;}  </style> <body> <div> <div class='row'> <h1> CocoRobo IoT Project </h1> </div> <div class='row header'> <h2> Web Dashboard </h2></div><div class='content'>"
    13. 

  13.     for (var i = 0; i < block.itemCount_; i++) {
    14. 

  14.         var item_label = block.getFieldValue("LABLE" + i);
    15. 

  15.         var item_value = Blockly.Python.valueToCode(block, "ADD" + i, Blockly.Python.ORDER_ATOMIC);
    16. 

  16.         code += "    <div class='row label'>" + item_label + ": <span class='value'>\"+String(" + item_value + ")+\"</span> </div>";
    17. 

  17.     }
    18. 

  18.     code += "    </div></body></html>"
    19. 

  19.     code += "\")\n";
    20. 

  20.     return code;
    21. 

  21. }
    22. 

  22. 

  23. Blockly.Python['webpage_button'] = function(block) {
    24. 

  24.     var code = "server.send(200, \"text/html\",\"";
    25. 

  25.     code += "<!DOCTYPE HTML><html><head><meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1, user-scalable=no\\\"></head><style>body { font-family:Arial;padding-top: 10px; background-color: white; user-select: none; --webkit-user-select: none; /* updated */ } .row { margin-left: auto; margin-right: auto; font-weight: bolder !important; margin-bottom: 20px; text-align: center; z-index: 1001; } .header { padding: 5px 0; border-radius: 10px; background-color: rgba(0, 0, 0, .04); color: #111; border: 1px solid rgba(0,0,0,.1); width: 80%; margin-left: auto; margin-right: auto; } .content { padding: 20px 20px 20px 20px; } h1,h2,h3,h4,h5,h6 {font-weight: 500;line-height: 1.1;z-index: 1001;}p {margin-bottom: 10px;text-align: center;z-index: 1001;} .btn { font-weight: bolder; /* added */ border-radius: 5px; display: inline-block; height: 36px; line-height: 36px; padding: 0.5rem 2rem; text-decoration: none; color: #444; /* updated */ border: 1px solid rgba(0,0,0,.2); /* updated */ background-color: rgba(255, 255, 255, 0); /* updated */ text-align: center; text-transform: uppercase; vertical-align: middle; -webkit-tap-highlight-color: transparent; } .btn.disabled, .btn[disabled] { pointer-events: none; background-color: rgba(44, 79, 205, 1) !important; -webkit-box-shadow: none; box-shadow: none; color: #9F9F9F !important; cursor: default; } .btn:hover { background-color: rgba(44, 79, 205, 1); border-radius: 5px; border: 1px solid #2c4fcd; color: #fff; } .btn:before { border-radius: 0; }</style> <body> <div> <div class='row'> <h1> CocoRobo IoT Project </h1> </div> <div class='row header'> <h2> Web Dashboard </h2></div> <div class='content'>"
    26. 

  26.     for (let i = 0; i < block.itemCount_; i++) {
    27. 

  27.         var url = block.getFieldValue("URL" + i);
    28. 

  28.         // url = url.replace(/\"/g, "");
    29. 

  29.         url = "http://192.168.4.1" + url;
    30. 

  30.         var button = block.getFieldValue("BUTTON" + i);
    31. 

  31.         code += " <div class='row'><a class='btn' onclick=\\\"clickBtn('" + url + "', '" + button + "')\\\">" + button + "</a></div>"
    32. 

  32.     }
    33. 

  33.     code += "</div> </body> <script>    function clickBtn(url_ , btn) { var content = {'data':[ btn]};var contentTo_ = JSON.stringify(content);var xhr = new XMLHttpRequest();xhr.open('POST', url_);xhr.setRequestHeader('content-type','application/json'); xhr.send(contentTo_);}</script></html>"
    34. 

  34.     code += "\")\n";
    35. 

  35.     return code;
    36. 

  36. }
    37. 

  37. 

  38. Blockly.Python['webpage_colorpicker'] = function(block) {
    39. 

  39.     var text_webpage_colorpicker_path = block.getFieldValue('webpage_colorpicker_path');
    40. 

  40. 

  41.     var code = "server.send(200, \"text/html\", htmlContent())\n";
    42. 

  42.     Blockly.Python.addFunction("webpage_colorpicker-string", "" +
    43. 

  43.         "String htmlContent() {\n" +
    44. 

  44.         "  String data = \"<!DOCTYPE HTML><html><head> <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1, user-scalable=no\\\"></head><style>.color-picker,.color-picker *,.color-picker ::after,.color-picker ::before,.color-picker::after,.color-picker::before{box-sizing: border-box}.color-picker{position: absolute; top: 0; left: 0; z-index: 9999; box-shadow: 1px 5px 10px rgba(0, 0, 0, .5)}.color-picker-container{direction: rtl; display: flex; height: 10em; border: 1px solid #000; color: #000}.color-picker-container *{border-color: inherit; color: inherit}.color-picker i{font: inherit; font-size: 12px}.color-picker-h,.color-picker-sv{direction: ltr; background-size: 100% 100%; position: relative}.color-picker-h{width: 1.5em; border-left: 1px solid; background: transparent url(color-picker-h.png) no-repeat 50% 50%; background-image: linear-gradient(to top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%); cursor: ns-resize; overflow: hidden}.color-picker-h i{display: block; height: .5em; position: absolute; top: -.25em; right: 0; left: 0; z-index: 3}.color-picker-h i::before{display: block; content: \\\"\\\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: .25em solid; border-top-color: transparent; border-bottom-color: transparent}.color-picker-sv{width: 10em; background: transparent url(color-picker-sv.png) no-repeat 50% 50%; background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); cursor: crosshair}.color-picker-sv i{display: block; width: .8em; height: .8em; position: absolute; top: -.4em; right: -.4em; z-index: 3}.color-picker-sv i::after,.color-picker-sv i::before{display: block; content: \\\"\\\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid; border-color: inherit; border-radius: 100%}.color-picker-sv i::before{top: -1px; right: -1px; bottom: -1px; left: -1px; border-color: #fff}.color-picker-h,.color-picker-sv{-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent}#color-picker-show{text-align:center; display: inline-block; margin: auto 27% 10px 26.5%; background-color: rgb(255,0,0); height:180px; width:47%; border: 1px solid rgba(0,0,0,.1); -webkit-box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.36); -moz-box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.36); box-shadow: 0px 0px 13px -1px rgba(0,0,0,0.36);}#color-picker-header{font-size:18px; margin-bottom:-2px; font-weight: bolder;}input[type=\\\"text\\\"]{font-size: 18px; width: 185px; padding: 10px auto; margin-left: 10px; border: 1px solid rgba(0,0,0,.2); text-align:center;}</style><style>body{font-family: Arial; padding-top: 10px; background-color: white; user-select: none; --webkit-user-select: none; /* updated */}.row{margin-left: auto; margin-right: auto; font-weight: bolder !important; margin-bottom: 20px; text-align: center; z-index: 1001;}.header{padding: 5px 0; border-radius: 10px; background-color: rgba(0, 0, 0, .04); color: #111; border: 1px solid rgba(0,0,0,.1); width: 80%; margin-left: auto; margin-right: auto;}.content{padding: 20px 20px 20px 20px;}h1,h2,h3,h4,h5,h6{font-weight: 500; line-height: 1.1; z-index: 1001;}p{margin-bottom: 10px; text-align: center; z-index: 1001;}.btn{font-weight: bolder; /* added */ border-radius: 5px; display: inline-block; height: 36px; line-height: 36px; padding: 0.5rem 2rem; text-decoration: none; color: #444; /* updated */ border: 1px solid rgba(0, 0, 0, .2); /* updated */ background-color: rgba(255, 255, 255, 0); /* updated */ text-align: center; text-transform: uppercase; vertical-align: middle; -webkit-tap-highlight-color: transparent;}.btn.disabled,.btn[disabled]{pointer-events: none; background-color: rgba(44, 79, 205, 1) !important; -webkit-box-shadow: none; box-shadow: none; color: #9F9F9F !important; cursor: default;}.btn:hover{background-color: rgba(44, 79, 205, 1); border-radius: 5px; border: 1px solid #2c4fcd; color: #fff;}.btn:before{border-radius: 0;}</style><body> <div> <div class='row navbar'> <h1> CocoRobo IoT Project </h1> </div><div class='row header'> <h2> Web Dashboard </h2> </div><div class='content'> <div id=\\\"color-picker-show\\\"></div><p id=\\\"color-picker-header\\\">Pick a color below: (in RGB)</p><p> <input type=\\\"text\\\" readonly=\\\"true\\\"/> </p></div></body>\"\n" +
    45. 

  45.         "  data += \"<script>\"; data += \"\\r\\n\"\n" +
    46. 

  46.         "  data += \"! function(t, n, e) {\"; data += \"\\r\\n\"\n" +
    47. 

  47.         "  data += \"    function r(t) { return void 0 !== t }\"; data += \"\\r\\n\"\n" +
    48. 

  48.         "  data += \"\"; data += \"\\r\\n\"\n" +
    49. 

  49.         "  data += \"    function i(t) { return \\\"string\\\" == typeof t }\"; data += \"\\r\\n\"\n" +
    50. 

  50.         "  data += \"\"; data += \"\\r\\n\"\n" +
    51. 

  51.         "  data += \"    function o(t) { return \\\"object\\\" == typeof t }\"; data += \"\\r\\n\"\n" +
    52. 

  52.         "  data += \"\"; data += \"\\r\\n\"\n" +
    53. 

  53.         "  data += \"    function u(t) { return Object.keys(t).length }\"; data += \"\\r\\n\"\n" +
    54. 

  54.         "  data += \"\"; data += \"\\r\\n\"\n" +
    55. 

  55.         "  data += \"    function c(t, n, e) { return n > t ? n : t > e ? e : t }\"; data += \"\\r\\n\"\n" +
    56. 

  56.         "  data += \"\"; data += \"\\r\\n\"\n" +
    57. 

  57.         "  data += \"    function s(t, n) { return parseInt(t, n || 10) }\"; data += \"\\r\\n\"\n" +
    58. 

  58.         "  data += \"\"; data += \"\\r\\n\"\n" +
    59. 

  59.         "  data += \"    function a(t) { return Math.round(t) }\"; data += \"\\r\\n\"\n" +
    60. 

  60.         "  data += \"\"; data += \"\\r\\n\"\n" +
    61. 

  61.         "  data += \"    function f(t) {\"; data += \"\\r\\n\"\n" +
    62. 

  62.         "  data += \"        var n, e, r, i, o, u, c, s, f = +t[0],\"; data += \"\\r\\n\"\n" +
    63. 

  63.         "  data += \"            l = +t[1],\"; data += \"\\r\\n\"\n" +
    64. 

  64.         "  data += \"            h = +t[2];\"; data += \"\\r\\n\"\n" +
    65. 

  65.         "  data += \"        switch (i = Math.floor(6 * f), o = 6 * f - i, u = h * (1 - l), c = h * (1 - o * l), s = h * (1 - (1 - o) * l), i = i || 0, c = c || 0, s = s || 0, i % 6) {\"; data += \"\\r\\n\"\n" +
    66. 

  66.         "  data += \"            case 0:\"; data += \"\\r\\n\"\n" +
    67. 

  67.         "  data += \"                n = h, e = s, r = u;\"; data += \"\\r\\n\"\n" +
    68. 

  68.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    69. 

  69.         "  data += \"            case 1:\"; data += \"\\r\\n\"\n" +
    70. 

  70.         "  data += \"                n = c, e = h, r = u;\"; data += \"\\r\\n\"\n" +
    71. 

  71.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    72. 

  72.         "  data += \"            case 2:\"; data += \"\\r\\n\"\n" +
    73. 

  73.         "  data += \"                n = u, e = h, r = s;\"; data += \"\\r\\n\"\n" +
    74. 

  74.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    75. 

  75.         "  data += \"            case 3:\"; data += \"\\r\\n\"\n" +
    76. 

  76.         "  data += \"                n = u, e = c, r = h;\"; data += \"\\r\\n\"\n" +
    77. 

  77.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    78. 

  78.         "  data += \"            case 4:\"; data += \"\\r\\n\"\n" +
    79. 

  79.         "  data += \"                n = s, e = u, r = h;\"; data += \"\\r\\n\"\n" +
    80. 

  80.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    81. 

  81.         "  data += \"            case 5:\"; data += \"\\r\\n\"\n" +
    82. 

  82.         "  data += \"                n = h, e = u, r = c\"; data += \"\\r\\n\"\n" +
    83. 

  83.         "  data += \"        }\"; data += \"\\r\\n\"\n" +
    84. 

  84.         "  data += \"        return [a(255 * n), a(255 * e), a(255 * r)]\"; data += \"\\r\\n\"\n" +
    85. 

  85.         "  data += \"    }\"; data += \"\\r\\n\"\n" +
    86. 

  86.         "  data += \"\"; data += \"\\r\\n\"\n" +
    87. 

  87.         "  data += \"    function l(t) { return p(f(t)) }\"; data += \"\\r\\n\"\n" +
    88. 

  88.         "  data += \"\"; data += \"\\r\\n\"\n" +
    89. 

  89.         "  data += \"    function h(t) {\"; data += \"\\r\\n\"\n" +
    90. 

  90.         "  data += \"        var n, e = +t[0],\"; data += \"\\r\\n\"\n" +
    91. 

  91.         "  data += \"            r = +t[1],\"; data += \"\\r\\n\"\n" +
    92. 

  92.         "  data += \"            i = +t[2],\"; data += \"\\r\\n\"\n" +
    93. 

  93.         "  data += \"            o = Math.max(e, r, i),\"; data += \"\\r\\n\"\n" +
    94. 

  94.         "  data += \"            u = Math.min(e, r, i),\"; data += \"\\r\\n\"\n" +
    95. 

  95.         "  data += \"            c = o - u,\"; data += \"\\r\\n\"\n" +
    96. 

  96.         "  data += \"            s = 0 === o ? 0 : c / o,\"; data += \"\\r\\n\"\n" +
    97. 

  97.         "  data += \"            a = o / 255;\"; data += \"\\r\\n\"\n" +
    98. 

  98.         "  data += \"        switch (o) {\"; data += \"\\r\\n\"\n" +
    99. 

  99.         "  data += \"            case u:\"; data += \"\\r\\n\"\n" +
    100. 

  100.         "  data += \"                n = 0;\"; data += \"\\r\\n\"\n" +
    101. 

  101.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    102. 

  102.         "  data += \"            case e:\"; data += \"\\r\\n\"\n" +
    103. 

  103.         "  data += \"                n = r - i + c * (i > r ? 6 : 0), n /= 6 * c;\"; data += \"\\r\\n\"\n" +
    104. 

  104.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    105. 

  105.         "  data += \"            case r:\"; data += \"\\r\\n\"\n" +
    106. 

  106.         "  data += \"                n = i - e + 2 * c, n /= 6 * c;\"; data += \"\\r\\n\"\n" +
    107. 

  107.         "  data += \"                break;\"; data += \"\\r\\n\"\n" +
    108. 

  108.         "  data += \"            case i:\"; data += \"\\r\\n\"\n" +
    109. 

  109.         "  data += \"                n = e - r + 4 * c, n /= 6 * c\"; data += \"\\r\\n\"\n" +
    110. 

  110.         "  data += \"        }\"; data += \"\\r\\n\"\n" +
    111. 

  111.         "  data += \"        return [n, s, a]\"; data += \"\\r\\n\"\n" +
    112. 

  112.         "  data += \"    }\"; data += \"\\r\\n\"\n" +
    113. 

  113.         "  data += \"\"; data += \"\\r\\n\"\n" +
    114. 

  114.         "  data += \"    function p(t) { var n = +t[2] | +t[1] << 8 | +t[0] << 16; return n = \\\"000000\\\" + n.toString(16), n.slice(-6) }\"; data += \"\\r\\n\"\n" +
    115. 

  115.         "  data += \"\"; data += \"\\r\\n\"\n" +
    116. 

  116.         "  data += \"    function v(t) { return h(d(t)) }\"; data += \"\\r\\n\"\n" +
    117. 

  117.         "  data += \"\"; data += \"\\r\\n\"\n" +
    118. 

  118.         "  data += \"    function d(t) { return 3 === t.length && (t = t.replace(/./g, \\\"$&$&\\\")), [s(t[0] + t[1], 16), s(t[2] + t[3], 16), s(t[4] + t[5], 16)] }\"; data += \"\\r\\n\"\n" +
    119. 

  119.         "  data += \"\"; data += \"\\r\\n\"\n" +
    120. 

  120.         "  data += \"    function g(t) { return [+t[0] / 360, +t[1] / 100, +t[2] / 100] }\"; data += \"\\r\\n\"\n" +
    121. 

  121.         "  data += \"\"; data += \"\\r\\n\"\n" +
    122. 

  122.         "  data += \"    function y(t) { return [a(360 * +t[0]), a(100 * +t[1]), a(100 * +t[2])] }\"; data += \"\\r\\n\"\n" +
    123. 

  123.         "  data += \"\"; data += \"\\r\\n\"\n" +
    124. 

  124.         "  data += \"    function x(t) { return [+t[0] / 255, +t[1] / 255, +t[2] / 255] }\"; data += \"\\r\\n\"\n" +
    125. 

  125.         "  data += \"\"; data += \"\\r\\n\"\n" +
    126. 

  126.         "  data += \"    function H(t) {\"; data += \"\\r\\n\"\n" +
    127. 

  127.         "  data += \"        if (o(t)) return t;\"; data += \"\\r\\n\"\n" +
    128. 

  128.         "  data += \"        var n = /\\\\s*rgb\\\\s*\\\\\(\\\\s*(\\\\d+)\\\\s*,\\\\s*(\\\\d+)\\\\s*,\\\\s*(\\\\d+)\\\\s*\\\\\)\\\\s*$/i.exec(t),\"; data += \"\\r\\n\"\n" +
    129. 

  129.         "  data += \"            e = /\\\\s*hsv\\\\s*\\\\\(\\\\s*(\\\\d+)\\\\s*,\\\\s*(\\\\d+)%\\\\s*,\\\\s*(\\\\d+)%\\\\s*\\\\\)\\\\s*$/i.exec(t),\"; data += \"\\r\\n\"\n" +
    130. 

  130.         "  data += \"            r = \\\"#\\\" === t[0] && t.match(/^#([\\\\da-f]{3}|[\\\\da-f]{6})$/i);\"; data += \"\\r\\n\"\n" +
    131. 

  131.         "  data += \"        return r ? v(t.slice(1)) : e ? g([+e[1], +e[2], +e[3]]) : n ? h([+n[1], +n[2], +n[3]]) : [0, 1, 1]\"; data += \"\\r\\n\"\n" +
    132. 

  132.         "  data += \"    }\"; data += \"\\r\\n\"\n" +
    133. 

  133.         "  data += \"    var b = \\\"__instance__\\\",\"; data += \"\\r\\n\"\n" +
    134. 

  134.         "  data += \"        m = \\\"firstChild\\\",\"; data += \"\\r\\n\"\n" +
    135. 

  135.         "  data += \"        k = setTimeout;\"; data += \"\\r\\n\"\n" +
    136. 

  136.         "  data += \"    ! function(t) { t.version = \\\"1.4.2\\\", t[b] = {}, t.each = function(n, e) { return k(function() { var e, r = t[b]; for (e in r) n.call(r[e], e, r) }, 0 === e ? 0 : e || 1), t }, t.parse = H, t._HSV2RGB = f, t._HSV2HEX = l, t._RGB2HSV = h, t._HEX2HSV = v, t._HEX2RGB = function(t) { return x(d(t)) }, t.HSV2RGB = function(t) { return f(g(t)) }, t.HSV2HEX = function(t) { return l(g(t)) }, t.RGB2HSV = function(t) { return y(h(t)) }, t.RGB2HEX = p, t.HEX2HSV = function(t) { return y(v(t)) }, t.HEX2RGB = d }(t[e] = function(s, a, h) {\"; data += \"\\r\\n\"\n" +
    137. 

  137.         "  data += \"        function p(t, n, e) { t = t.split(/\\\\s+/); for (var r = 0, i = t.length; i > r; ++r) n.addEventListener(t[r], e, !1) }\"; data += \"\\r\\n\"\n" +
    138. 

  138.         "  data += \"\"; data += \"\\r\\n\"\n" +
    139. 

  139.         "  data += \"        function v(t, n, e) { t = t.split(/\\\\s+/); for (var r = 0, i = t.length; i > r; ++r) n.removeEventListener(t[r], e) }\"; data += \"\\r\\n\"\n" +
    140. 

  140.         "  data += \"\"; data += \"\\r\\n\"\n" +
    141. 

  141.         "  data += \"        function d(t, n) {\"; data += \"\\r\\n\"\n" +
    142. 

  142.         "  data += \"            var e = \\\"touches\\\",\"; data += \"\\r\\n\"\n" +
    143. 

  143.         "  data += \"                r = \\\"clientX\\\",\"; data += \"\\r\\n\"\n" +
    144. 

  144.         "  data += \"                i = \\\"clientY\\\",\"; data += \"\\r\\n\"\n" +
    145. 

  145.         "  data += \"                o = n[e] ? n[e][0][r] : n[r],\"; data += \"\\r\\n\"\n" +
    146. 

  146.         "  data += \"                u = n[e] ? n[e][0][i] : n[i],\"; data += \"\\r\\n\"\n" +
    147. 

  147.         "  data += \"                c = g(t);\"; data += \"\\r\\n\"\n" +
    148. 

  148.         "  data += \"            return { x: o - c.l, y: u - c.t }\"; data += \"\\r\\n\"\n" +
    149. 

  149.         "  data += \"        }\"; data += \"\\r\\n\"\n" +
    150. 

  150.         "  data += \"\"; data += \"\\r\\n\"\n" +
    151. 

  151.         "  data += \"        function g(n) { var e, r, i; return n === t ? (e = t.pageXOffset || M.scrollLeft, r = t.pageYOffset || M.scrollTop) : (i = n.getBoundingClientRect(), e = i.left, r = i.top), { l: e, t: r } }\"; data += \"\\r\\n\"\n" +
    152. 

  152.         "  data += \"\"; data += \"\\r\\n\"\n" +
    153. 

  153.         "  data += \"        function y(t, n) {\"; data += \"\\r\\n\"\n" +
    154. 

  154.         "  data += \"            for (;\"; data += \"\\r\\n\"\n" +
    155. 

  155.         "  data += \"                (t = t.parentElement) && t !== n;);\"; data += \"\\r\\n\"\n" +
    156. 

  156.         "  data += \"            return t\"; data += \"\\r\\n\"\n" +
    157. 

  157.         "  data += \"        }\"; data += \"\\r\\n\"\n" +
    158. 

  158.         "  data += \"\"; data += \"\\r\\n\"\n" +
    159. 

  159.         "  data += \"        function x(t) { t && t.preventDefault() }\"; data += \"\\r\\n\"\n" +
    160. 

  160.         "  data += \"\"; data += \"\\r\\n\"\n" +
    161. 

  161.         "  data += \"        function H(n) { return n === t ? { w: t.innerWidth, h: t.innerHeight } : { w: n.offsetWidth, h: n.offsetHeight } }\"; data += \"\\r\\n\"\n" +
    162. 

  162.         "  data += \"\"; data += \"\\r\\n\"\n" +
    163. 

  163.         "  data += \"        function w(t) { return j || (r(t) ? t : !1) }\"; data += \"\\r\\n\"\n" +
    164. 

  164.         "  data += \"\"; data += \"\\r\\n\"\n" +
    165. 

  165.         "  data += \"        function E(t) { j = t }\"; data += \"\\r\\n\"\n" +
    166. 

  166.         "  data += \"\"; data += \"\\r\\n\"\n" +
    167. 

  167.         "  data += \"        function S(t, n, e) { return r(t) ? r(n) ? (r(O[t]) || (O[t] = {}), r(e) || (e = u(O[t])), O[t][e] = n, $) : O[t] : O }\"; data += \"\\r\\n\"\n" +
    168. 

  168.         "  data += \"\"; data += \"\\r\\n\"\n" +
    169. 

  169.         "  data += \"        function X(t, n) { return r(t) ? r(n) ? (delete O[t][n], $) : (O[t] = {}, $) : (O = {}, $) }\"; data += \"\\r\\n\"\n" +
    170. 

  170.         "  data += \"\"; data += \"\\r\\n\"\n" +
    171. 

  171.         "  data += \"        function _(t, n, e) {\"; data += \"\\r\\n\"\n" +
    172. 

  172.         "  data += \"            if (!r(O[t])) return $;\"; data += \"\\r\\n\"\n" +
    173. 

  173.         "  data += \"            if (r(e)) r(O[t][e]) && O[t][e].apply($, n);\"; data += \"\\r\\n\"\n" +
    174. 

  174.         "  data += \"            else\"; data += \"\\r\\n\"\n" +
    175. 

  175.         "  data += \"                for (var i in O[t]) O[t][i].apply($, n);\"; data += \"\\r\\n\"\n" +
    176. 

  176.         "  data += \"            return $\"; data += \"\\r\\n\"\n" +
    177. 

  177.         "  data += \"        }\"; data += \"\\r\\n\"\n" +
    178. 

  178.         "  data += \"\"; data += \"\\r\\n\"\n" +
    179. 

  179.         "  data += \"        function B(t, n) { t && \\\"h\\\" !== t || _(\\\"change:h\\\", n), t && \\\"sv\\\" !== t || _(\\\"change:sv\\\", n), _(\\\"change\\\", n) }\"; data += \"\\r\\n\"\n" +
    180. 

  180.         "  data += \"\"; data += \"\\r\\n\"\n" +
    181. 

  181.         "  data += \"        function R() { return T.parentNode }\"; data += \"\\r\\n\"\n" +
    182. 

  182.         "  data += \"\"; data += \"\\r\\n\"\n" +
    183. 

  183.         "  data += \"        function V(e, r) {\"; data += \"\\r\\n\"\n" +
    184. 

  184.         "  data += \"            function i(t) {\"; data += \"\\r\\n\"\n" +
    185. 

  185.         "  data += \"                var n = t.target,\"; data += \"\\r\\n\"\n" +
    186. 

  186.         "  data += \"                    e = n === s || y(n, s) === s;\"; data += \"\\r\\n\"\n" +
    187. 

  187.         "  data += \"                e ? !R() && (V(), _(\\\"enter\\\")) : $.exit()\"; data += \"\\r\\n\"\n" +
    188. 

  188.         "  data += \"            }\"; data += \"\\r\\n\"\n" +
    189. 

  189.         "  data += \"\"; data += \"\\r\\n\"\n" +
    190. 

  190.         "  data += \"            function o(t) {\"; data += \"\\r\\n\"\n" +
    191. 

  191.         "  data += \"                var n = (f(I), f([I[0], 1, 1]));\"; data += \"\\r\\n\"\n" +
    192. 

  192.         "  data += \"                q.style.backgroundColor = \\\"rgb(\\\" + n.join(\\\",\\\") + \\\")\\\", E(I), x(t)\"; data += \"\\r\\n\"\n" +
    193. 

  193.         "  data += \"            }\"; data += \"\\r\\n\"\n" +
    194. 

  194.         "  data += \"\"; data += \"\\r\\n\"\n" +
    195. 

  195.         "  data += \"            function u(t) {\"; data += \"\\r\\n\"\n" +
    196. 

  196.         "  data += \"                var n = c(d(P, t).y, 0, L);\"; data += \"\\r\\n\"\n" +
    197. 

  197.         "  data += \"                I[0] = (L - n) / L, F.style.top = n - D / 2 + \\\"px\\\", o(t)\"; data += \"\\r\\n\"\n" +
    198. 

  198.         "  data += \"            }\"; data += \"\\r\\n\"\n" +
    199. 

  199.         "  data += \"\"; data += \"\\r\\n\"\n" +
    200. 

  200.         "  data += \"            function g(t) {\"; data += \"\\r\\n\"\n" +
    201. 

  201.         "  data += \"                var n = d(q, t),\"; data += \"\\r\\n\"\n" +
    202. 

  202.         "  data += \"                    e = c(n.x, 0, j),\"; data += \"\\r\\n\"\n" +
    203. 

  203.         "  data += \"                    r = c(n.y, 0, O);\"; data += \"\\r\\n\"\n" +
    204. 

  204.         "  data += \"                I[1] = 1 - (j - e) / j, I[2] = (O - r) / O, J.style.right = j - e - tn / 2 + \\\"px\\\", J.style.top = r - nn / 2 + \\\"px\\\", o(t)\"; data += \"\\r\\n\"\n" +
    205. 

  205.         "  data += \"            }\"; data += \"\\r\\n\"\n" +
    206. 

  206.         "  data += \"\"; data += \"\\r\\n\"\n" +
    207. 

  207.         "  data += \"            function b(t) { U && (u(t), on = [l(I)], K || (_(\\\"drag:h\\\", on), _(\\\"drag\\\", on), B(\\\"h\\\", on))), Z && (g(t), on = [l(I)], Q || (_(\\\"drag:sv\\\", on), _(\\\"drag\\\", on), B(\\\"sv\\\", on))), K = 0, Q = 0 }\"; data += \"\\r\\n\"\n" +
    208. 

  208.         "  data += \"\"; data += \"\\r\\n\"\n" +
    209. 

  209.         "  data += \"            function m(t) {\"; data += \"\\r\\n\"\n" +
    210. 

  210.         "  data += \"                var n = t.target,\"; data += \"\\r\\n\"\n" +
    211. 

  211.         "  data += \"                    e = U ? \\\"h\\\" : \\\"sv\\\",\"; data += \"\\r\\n\"\n" +
    212. 

  212.         "  data += \"                    r = [l(I), $],\"; data += \"\\r\\n\"\n" +
    213. 

  213.         "  data += \"                    i = n === s || y(n, s) === s,\"; data += \"\\r\\n\"\n" +
    214. 

  214.         "  data += \"                    o = n === T || y(n, T) === T;\"; data += \"\\r\\n\"\n" +
    215. 

  215.         "  data += \"                i || o ? o && (_(\\\"stop:\\\" + e, r), _(\\\"stop\\\", r), B(e, r)) : R() && a !== !1 && ($.exit(), B(0, r)), U = 0, Z = 0\"; data += \"\\r\\n\"\n" +
    216. 

  216.         "  data += \"            }\"; data += \"\\r\\n\"\n" +
    217. 

  217.         "  data += \"\"; data += \"\\r\\n\"\n" +
    218. 

  218.         "  data += \"            function k(t) { K = 1, U = 1, b(t), x(t), _(\\\"start:h\\\", on), _(\\\"start\\\", on), B(\\\"h\\\", on) }\"; data += \"\\r\\n\"\n" +
    219. 

  219.         "  data += \"\"; data += \"\\r\\n\"\n" +
    220. 

  220.         "  data += \"            function S(t) { Q = 1, Z = 1, b(t), x(t), _(\\\"start:sv\\\", on), _(\\\"start\\\", on), B(\\\"sv\\\", on) } e || ((h || r || C).appendChild(T), $.visible = !0), en = H(T).w, rn = H(T).h;\"; data += \"\\r\\n\"\n" +
    221. 

  221.         "  data += \"            var X = H(q),\"; data += \"\\r\\n\"\n" +
    222. 

  222.         "  data += \"                M = H(J),\"; data += \"\\r\\n\"\n" +
    223. 

  223.         "  data += \"                L = H(P).h,\"; data += \"\\r\\n\"\n" +
    224. 

  224.         "  data += \"                j = X.w,\"; data += \"\\r\\n\"\n" +
    225. 

  225.         "  data += \"                O = X.h,\"; data += \"\\r\\n\"\n" +
    226. 

  226.         "  data += \"                D = H(F).h,\"; data += \"\\r\\n\"\n" +
    227. 

  227.         "  data += \"                tn = M.w,\"; data += \"\\r\\n\"\n" +
    228. 

  228.         "  data += \"                nn = M.h;\"; data += \"\\r\\n\"\n" +
    229. 

  229.         "  data += \"            e ? (T.style.left = T.style.top = \\\"-9999px\\\", a !== !1 && p(a, s, i), $.create = function() { return V(1), _(\\\"create\\\"), $ }, $.destroy = function() { return a !== !1 && v(a, s, i), $.exit(), E(!1), _(\\\"destroy\\\"), $ }) : G(), A = function() { I = w(I), o(), F.style.top = L - D / 2 - L * +I[0] + \\\"px\\\", J.style.right = j - tn / 2 - j * +I[1] + \\\"px\\\", J.style.top = O - nn / 2 - O * +I[2] + \\\"px\\\" }, $.exit = function() { var e = R(); return e && (e.removeChild(T), $.visible = !1), v(N, P, k), v(N, q, S), v(W, n, b), v(Y, n, m), v(z, t, G), _(\\\"exit\\\"), $ }, A(), e || (p(N, P, k), p(N, q, S), p(W, n, b), p(Y, n, m), p(z, t, G))\"; data += \"\\r\\n\"\n" +
    230. 

  230.         "  data += \"        }\"; data += \"\\r\\n\"\n" +
    231. 

  231.         "  data += \"\"; data += \"\\r\\n\"\n" +
    232. 

  232.         "  data += \"        function G() { return $.fit() }\"; data += \"\\r\\n\"\n" +
    233. 

  233.         "  data += \"        var C = n.body,\"; data += \"\\r\\n\"\n" +
    234. 

  234.         "  data += \"            M = n.documentElement,\"; data += \"\\r\\n\"\n" +
    235. 

  235.         "  data += \"            $ = this,\"; data += \"\\r\\n\"\n" +
    236. 

  236.         "  data += \"            L = t[e],\"; data += \"\\r\\n\"\n" +
    237. 

  237.         "  data += \"            j = !1,\"; data += \"\\r\\n\"\n" +
    238. 

  238.         "  data += \"            O = {},\"; data += \"\\r\\n\"\n" +
    239. 

  239.         "  data += \"            T = n.createElement(\\\"div\\\"),\"; data += \"\\r\\n\"\n" +
    240. 

  240.         "  data += \"            N = \\\"touchstart mousedown\\\",\"; data += \"\\r\\n\"\n" +
    241. 

  241.         "  data += \"            W = \\\"touchmove mousemove\\\",\"; data += \"\\r\\n\"\n" +
    242. 

  242.         "  data += \"            Y = \\\"touchend mouseup\\\",\"; data += \"\\r\\n\"\n" +
    243. 

  243.         "  data += \"            z = \\\"orientationchange resize\\\";\"; data += \"\\r\\n\"\n" +
    244. 

  244.         "  data += \"        if (!($ instanceof L)) return new L(s, a);\"; data += \"\\r\\n\"\n" +
    245. 

  245.         "  data += \"        L[b][s.id || s.name || u(L[b])] = $, r(a) && a !== !0 || (a = N), E(L.parse(s.getAttribute(\\\"data-color\\\") || s.value || [0, 1, 1])), T.className = \\\"color-picker\\\", T.innerHTML = '<div class=\\\"color-picker-container\\\"><span class=\\\"color-picker-h\\\"><i></i></span><span class=\\\"color-picker-sv\\\"><i></i></span></div>';\"; data += \"\\r\\n\"\n" +
    246. 

  246.         "  data += \"        var A, D = T[m].children,\"; data += \"\\r\\n\"\n" +
    247. 

  247.         "  data += \"            I = w([0, 1, 1]),\"; data += \"\\r\\n\"\n" +
    248. 

  248.         "  data += \"            P = D[0],\"; data += \"\\r\\n\"\n" +
    249. 

  249.         "  data += \"            q = D[1],\"; data += \"\\r\\n\"\n" +
    250. 

  250.         "  data += \"            F = P[m],\"; data += \"\\r\\n\"\n" +
    251. 

  251.         "  data += \"            J = q[m],\"; data += \"\\r\\n\"\n" +
    252. 

  252.         "  data += \"            K = 0,\"; data += \"\\r\\n\"\n" +
    253. 

  253.         "  data += \"            Q = 0,\"; data += \"\\r\\n\"\n" +
    254. 

  254.         "  data += \"            U = 0,\"; data += \"\\r\\n\"\n" +
    255. 

  255.         "  data += \"            Z = 0,\"; data += \"\\r\\n\"\n" +
    256. 

  256.         "  data += \"            tn = 0,\"; data += \"\\r\\n\"\n" +
    257. 

  257.         "  data += \"            nn = 0,\"; data += \"\\r\\n\"\n" +
    258. 

  258.         "  data += \"            en = 0,\"; data += \"\\r\\n\"\n" +
    259. 

  259.         "  data += \"            rn = 0,\"; data += \"\\r\\n\"\n" +
    260. 

  260.         "  data += \"            on = [l(I)];\"; data += \"\\r\\n\"\n" +
    261. 

  261.         "  data += \"        return V(1), k(function() {\"; data += \"\\r\\n\"\n" +
    262. 

  262.         "  data += \"            var t = [l(I)];\"; data += \"\\r\\n\"\n" +
    263. 

  263.         "  data += \"            _(\\\"create\\\", t), B(0, t)\"; data += \"\\r\\n\"\n" +
    264. 

  264.         "  data += \"        }, 0), $.fit = function(n) {\"; data += \"\\r\\n\"\n" +
    265. 

  265.         "  data += \"            var e = H(t),\"; data += \"\\r\\n\"\n" +
    266. 

  266.         "  data += \"                i = H(M),\"; data += \"\\r\\n\"\n" +
    267. 

  267.         "  data += \"                u = e.w - i.w,\"; data += \"\\r\\n\"\n" +
    268. 

  268.         "  data += \"                a = e.h - M.clientHeight,\"; data += \"\\r\\n\"\n" +
    269. 

  269.         "  data += \"                f = g(t),\"; data += \"\\r\\n\"\n" +
    270. 

  270.         "  data += \"                l = g(s);\"; data += \"\\r\\n\"\n" +
    271. 

  271.         "  data += \"            if (tn = l.l + f.l, nn = l.t + f.t + H(s).h, o(n)) r(n[0]) && (tn = n[0]), r(n[1]) && (nn = n[1]);\"; data += \"\\r\\n\"\n" +
    272. 

  272.         "  data += \"            else {\"; data += \"\\r\\n\"\n" +
    273. 

  273.         "  data += \"                var h = f.l,\"; data += \"\\r\\n\"\n" +
    274. 

  274.         "  data += \"                    p = f.t,\"; data += \"\\r\\n\"\n" +
    275. 

  275.         "  data += \"                    v = f.l + e.w - en - u,\"; data += \"\\r\\n\"\n" +
    276. 

  276.         "  data += \"                    d = f.t + e.h - rn - a;\"; data += \"\\r\\n\"\n" +
    277. 

  277.         "  data += \"                tn = c(tn, h, v) >> 0, nn = c(nn, p, d) >> 0\"; data += \"\\r\\n\"\n" +
    278. 

  278.         "  data += \"            }\"; data += \"\\r\\n\"\n" +
    279. 

  279.         "  data += \"            return T.style.left = tn + \\\"px\\\", T.style.top = nn + \\\"px\\\", _(\\\"fit\\\"), $\"; data += \"\\r\\n\"\n" +
    280. 

  280.         "  data += \"        }, $.set = function(t) { return r(t) ? (i(t) && (t = L.parse(t)), E(t), A(), $) : w() }, $.get = function(t) { return w(t) }, $.source = s, $.self = T, $.visible = !1, $.on = S, $.off = X, $.fire = _, $.hooks = O, $.enter = function(t) { return V(0, t), _(\\\"enter\\\"), $ }, $\"; data += \"\\r\\n\"\n" +
    281. 

  281.         "  data += \"    })\"; data += \"\\r\\n\"\n" +
    282. 

  282.         "  data += \"}(window, document, \\\"CP\\\");\"; data += \"\\r\\n\"\n" +
    283. 

  283.         "  data += \"</script>\"; data += \"\\r\\n\"\n" +
    284. 

  284.         "\n" +
    285. 

  285.         "  data += \"<script>var picker=new CP(document.querySelector('input[type=\\\"text\\\"]'), \\\"click\\\");var globalRed, globalGreen, globalBlue;picker.on(\\\"change\\\", function(color){/* console.log(CP.HEX2RGB(color)); */ this.source.value=CP.HEX2RGB(color); document.getElementById('color-picker-show').style.backgroundColor='rgb(' + CP.HEX2RGB(color) + ')'; var colorString='rgb(' + CP.HEX2RGB(color) + ')', colorsOnly=colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,s*/), colorStringRed=colorsOnly[0], colorStringGreen=colorsOnly[1], colorStringBlue=colorsOnly[2]; /*console.log(colorStringRed); console.log(colorStringGreen); console.log(colorStringBlue);*/ globalRed=colorStringRed; globalGreen=colorStringGreen; globalBlue=colorStringBlue;});setInterval(function(){var content={'data': [globalRed + '|' + globalGreen + '|' + globalBlue]}; var contentTo_=JSON.stringify(content); var xhr=new XMLHttpRequest(); xhr.open('POST', 'http://192.168.4.1" + text_webpage_colorpicker_path + "'); xhr.setRequestHeader('content-type', 'application/json'); xhr.send(contentTo_); console.log(contentTo_);}, 500);</script></html>\"\n" +
    286. 

  286.         "  return data\n" +
    287. 

  287.         "}\n" +
    288. 

  288. 

  289.         "");
    290. 

  290. 

  291.     return code;
    292. 

  292. }
    293. 

  293. 

  294. Blockly.Python['webpage_buttoncontroller'] = function(block) {
    295. 

  295.     var text_webpage_buttoncontroller_top = block.getFieldValue('webpage_buttoncontroller_top');
    296. 

  296.     var text_webpage_buttoncontroller_top_path = block.getFieldValue('webpage_buttoncontroller_top_path');
    297. 

  297.     var text_webpage_buttoncontroller_left = block.getFieldValue('webpage_buttoncontroller_left');
    298. 

  298.     var text_webpage_buttoncontroller_left_path = block.getFieldValue('webpage_buttoncontroller_left_path');
    299. 

  299.     var text_webpage_buttoncontroller_center = block.getFieldValue('webpage_buttoncontroller_center');
    300. 

  300.     var text_webpage_buttoncontroller_center_path = block.getFieldValue('webpage_buttoncontroller_center_path');
    301. 

  301.     var text_webpage_buttoncontroller_right = block.getFieldValue('webpage_buttoncontroller_right');
    302. 

  302.     var text_webpage_buttoncontroller_right_path = block.getFieldValue('webpage_buttoncontroller_right_path');
    303. 

  303.     var text_webpage_buttoncontroller_bottom = block.getFieldValue('webpage_buttoncontroller_bottom');
    304. 

  304.     var text_webpage_buttoncontroller_bottom_path = block.getFieldValue('webpage_buttoncontroller_bottom_path');
    305. 

  305. 

  306.     var code = "server.send(200, \"text/html\",\" " +
    307. 

  307.         "<!DOCTYPE HTML><html><head>    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'></head><style>* {    box-sizing: border-box;}body {    font-family: Arial;    padding-top: 10px;    background-color: white;    user-select: none;    --webkit-user-select: none;    overflow: hidden;    margin: 0;}.row {    margin-left: auto;    margin-right: auto;    font-weight: bolder !important;    margin-bottom: 20px;    text-align: center;    z-index: 1001;}.header {    padding: 5px 0;    border-radius: 10px;    background-color: rgba(0, 0, 0, .04);    color: #111; border: 1px solid rgba(0,0,0,.1);    width: 80%;    margin-left: auto;    margin-right: auto;}.content {    width: 100%;    padding-top: 10px;    margin: auto 0px auto 9.5%;}.block {    background-color: rgba(0, 0, 0, 0);}/* Create three equal columns that floats next to each other */.column {    float: left;    width: 27%;    padding: 0px;    /* Should be removed. Only for demonstration */}/* Clear floats after the columns */.row:after {    content: '';    display: table;    clear: both;}#btn {    display: inline-block;    display: inline-block;    font-size: 20px;    cursor: pointer;    text-align: center;    text-decoration: none;    outline: none;    color: #fff;    background-color: rgba(44, 79, 205, .88);    border-radius: 10px;    border: none;    box-shadow: 0 9px rgba(24, 61, 195, .99);    width: 90%;    height: 80px;    margin: 5px 5% 0px 5%;} .blank { color: rgba(0,0,0,0); } /* .btn:hover {background-color: #3e8e41}*/#btn:active {    background-color: rgba(24, 61, 195, .99);    border: none;    box-shadow: 0 5px rgba(24, 61, 195, .99);    transform: translateY(4px);    cursor: pointer;}button:focus {    outline: 0;}h1,h2,h3,h4,h5,h6 {    font-weight: 500;    line-height: 1.1;    z-index: 1001;}p {    margin-bottom: 10px;    text-align: center;    z-index: 1001;}</style><body>    <div>        <div class='row navbar'>            <h1> CocoRobo IoT Project </h1>        </div>        <div class='row header'>            <h2> Web Dashboard </h2>        </div>        <div class='content'>            <div class='row'>                <div class='column block blank'>                    .                </div>                <div class='column block'>                    <button id='btn' onclick=\\\"clickBtn('http://192.168.4.1"+text_webpage_buttoncontroller_top_path+"', '"+text_webpage_buttoncontroller_top+"')\\\">"+text_webpage_buttoncontroller_top+"</button>                </div>                <div class='column block blank'>                    .                </div>            </div>            <div class='row'>                <div class='column block'>                    <button id='btn' onclick=\\\"clickBtn('http://192.168.4.1"+text_webpage_buttoncontroller_left_path+"', '"+text_webpage_buttoncontroller_left+"')\\\">"+text_webpage_buttoncontroller_left+"</button>                </div>                <div class='column block'>                    <button id='btn' onclick=\\\"clickBtn('http://192.168.4.1"+text_webpage_buttoncontroller_center_path+"', '"+text_webpage_buttoncontroller_center+"')\\\">"+text_webpage_buttoncontroller_center+"</button>                </div>                <div class='column block'>                    <button id='btn' onclick=\\\"clickBtn('http://192.168.4.1"+text_webpage_buttoncontroller_right_path+"', '"+text_webpage_buttoncontroller_right+"')\\\">"+text_webpage_buttoncontroller_right+"</button>                </div>            </div>            <div class='row'>                <div class='column block blank'>                    .                </div>                <div class='column block'>                    <button id='btn' onclick=\\\"clickBtn('http://192.168.4.1"+text_webpage_buttoncontroller_bottom_path+"', '"+text_webpage_buttoncontroller_bottom+"')\\\">"+text_webpage_buttoncontroller_bottom+"</button>                </div>                <div class='column block blank'>                    .                </div>            </div>        </div></body><script>function clickBtn(url_, btn) {    var content = { 'data': [btn] };    var contentTo_ = JSON.stringify(content);    var xhr = new XMLHttpRequest();    xhr.open('POST', url_);    xhr.setRequestHeader('content-type', 'application/json');    xhr.send(contentTo_);    console.log(btn);}</script></html>" +
    308. 

  308.         "\")\n";
    309. 

  309. 

  310.     return code;
    311. 

  311. }
    312.