'use strict';
goog.provide('Blockly.Python.webpage');
goog.require('Blockly.Python');
/*
sed 's/^/START/; s/$/END/' target.html >> target_NEW.html
*/
Blockly.Python['webpage_label'] = function(block) {
var code = "server.send(200, \"text/html\",\"";
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'>"
for (var i = 0; i < block.itemCount_; i++) {
var item_label = block.getFieldValue("LABLE" + i);
var item_value = Blockly.Python.valueToCode(block, "ADD" + i, Blockly.Python.ORDER_ATOMIC);
code += " <div class='row label'>" + item_label + ": <span class='value'>\"+String(" + item_value + ")+\"</span> </div>";
}
code += " </div></body></html>"
code += "\");\n";
return code;
}
Blockly.Python['webpage_button'] = function(block) {
var code = "server.send(200, \"text/html\",\"";
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'>"
for (let i = 0; i < block.itemCount_; i++) {
var url = block.getFieldValue("URL" + i);
// url = url.replace(/\"/g, "");
url = "http://192.168.4.1" + url;
var button = block.getFieldValue("BUTTON" + i);
code += " <div class='row'><a class='btn' onclick=\\\"clickBtn('" + url + "', '" + button + "')\\\">" + button + "</a></div>"
}
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>"
code += "\");\n";
return code;
}
Blockly.Python['webpage_colorpicker'] = function(block) {
var text_webpage_colorpicker_path = block.getFieldValue('webpage_colorpicker_path');
var code = "server.send(200, \"text/html\", htmlContent());\n";
Blockly.Python.addFunction("webpage_colorpicker-string", "" +
"String htmlContent() {\n" +
" 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" +
" data += \"<script>\"; data += \"\\r\\n\";\n" +
" data += \"! function(t, n, e) {\"; data += \"\\r\\n\";\n" +
" data += \" function r(t) { return void 0 !== t }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function i(t) { return \\\"string\\\" == typeof t }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function o(t) { return \\\"object\\\" == typeof t }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function u(t) { return Object.keys(t).length }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function c(t, n, e) { return n > t ? n : t > e ? e : t }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function s(t, n) { return parseInt(t, n || 10) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function a(t) { return Math.round(t) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function f(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n, e, r, i, o, u, c, s, f = +t[0],\"; data += \"\\r\\n\";\n" +
" data += \" l = +t[1],\"; data += \"\\r\\n\";\n" +
" data += \" h = +t[2];\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" case 0:\"; data += \"\\r\\n\";\n" +
" data += \" n = h, e = s, r = u;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case 1:\"; data += \"\\r\\n\";\n" +
" data += \" n = c, e = h, r = u;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case 2:\"; data += \"\\r\\n\";\n" +
" data += \" n = u, e = h, r = s;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case 3:\"; data += \"\\r\\n\";\n" +
" data += \" n = u, e = c, r = h;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case 4:\"; data += \"\\r\\n\";\n" +
" data += \" n = s, e = u, r = h;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case 5:\"; data += \"\\r\\n\";\n" +
" data += \" n = h, e = u, r = c\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \" return [a(255 * n), a(255 * e), a(255 * r)]\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function l(t) { return p(f(t)) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function h(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n, e = +t[0],\"; data += \"\\r\\n\";\n" +
" data += \" r = +t[1],\"; data += \"\\r\\n\";\n" +
" data += \" i = +t[2],\"; data += \"\\r\\n\";\n" +
" data += \" o = Math.max(e, r, i),\"; data += \"\\r\\n\";\n" +
" data += \" u = Math.min(e, r, i),\"; data += \"\\r\\n\";\n" +
" data += \" c = o - u,\"; data += \"\\r\\n\";\n" +
" data += \" s = 0 === o ? 0 : c / o,\"; data += \"\\r\\n\";\n" +
" data += \" a = o / 255;\"; data += \"\\r\\n\";\n" +
" data += \" switch (o) {\"; data += \"\\r\\n\";\n" +
" data += \" case u:\"; data += \"\\r\\n\";\n" +
" data += \" n = 0;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case e:\"; data += \"\\r\\n\";\n" +
" data += \" n = r - i + c * (i > r ? 6 : 0), n /= 6 * c;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case r:\"; data += \"\\r\\n\";\n" +
" data += \" n = i - e + 2 * c, n /= 6 * c;\"; data += \"\\r\\n\";\n" +
" data += \" break;\"; data += \"\\r\\n\";\n" +
" data += \" case i:\"; data += \"\\r\\n\";\n" +
" data += \" n = e - r + 4 * c, n /= 6 * c\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \" return [n, s, a]\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function v(t) { return h(d(t)) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function g(t) { return [+t[0] / 360, +t[1] / 100, +t[2] / 100] }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function y(t) { return [a(360 * +t[0]), a(100 * +t[1]), a(100 * +t[2])] }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function x(t) { return [+t[0] / 255, +t[1] / 255, +t[2] / 255] }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function H(t) {\"; data += \"\\r\\n\";\n" +
" data += \" if (o(t)) return t;\"; data += \"\\r\\n\";\n" +
" data += \" var n = /\\\\s*rgb\\\\s*\\\\\(\\\\s*(\\\\d+)\\\\s*,\\\\s*(\\\\d+)\\\\s*,\\\\s*(\\\\d+)\\\\s*\\\\\)\\\\s*$/i.exec(t),\"; data += \"\\r\\n\";\n" +
" data += \" e = /\\\\s*hsv\\\\s*\\\\\(\\\\s*(\\\\d+)\\\\s*,\\\\s*(\\\\d+)%\\\\s*,\\\\s*(\\\\d+)%\\\\s*\\\\\)\\\\s*$/i.exec(t),\"; data += \"\\r\\n\";\n" +
" data += \" r = \\\"#\\\" === t[0] && t.match(/^#([\\\\da-f]{3}|[\\\\da-f]{6})$/i);\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \" var b = \\\"__instance__\\\",\"; data += \"\\r\\n\";\n" +
" data += \" m = \\\"firstChild\\\",\"; data += \"\\r\\n\";\n" +
" data += \" k = setTimeout;\"; data += \"\\r\\n\";\n" +
" 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" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function d(t, n) {\"; data += \"\\r\\n\";\n" +
" data += \" var e = \\\"touches\\\",\"; data += \"\\r\\n\";\n" +
" data += \" r = \\\"clientX\\\",\"; data += \"\\r\\n\";\n" +
" data += \" i = \\\"clientY\\\",\"; data += \"\\r\\n\";\n" +
" data += \" o = n[e] ? n[e][0][r] : n[r],\"; data += \"\\r\\n\";\n" +
" data += \" u = n[e] ? n[e][0][i] : n[i],\"; data += \"\\r\\n\";\n" +
" data += \" c = g(t);\"; data += \"\\r\\n\";\n" +
" data += \" return { x: o - c.l, y: u - c.t }\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function y(t, n) {\"; data += \"\\r\\n\";\n" +
" data += \" for (;\"; data += \"\\r\\n\";\n" +
" data += \" (t = t.parentElement) && t !== n;);\"; data += \"\\r\\n\";\n" +
" data += \" return t\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function x(t) { t && t.preventDefault() }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function H(n) { return n === t ? { w: t.innerWidth, h: t.innerHeight } : { w: n.offsetWidth, h: n.offsetHeight } }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function w(t) { return j || (r(t) ? t : !1) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function E(t) { j = t }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function X(t, n) { return r(t) ? r(n) ? (delete O[t][n], $) : (O[t] = {}, $) : (O = {}, $) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function _(t, n, e) {\"; data += \"\\r\\n\";\n" +
" data += \" if (!r(O[t])) return $;\"; data += \"\\r\\n\";\n" +
" data += \" if (r(e)) r(O[t][e]) && O[t][e].apply($, n);\"; data += \"\\r\\n\";\n" +
" data += \" else\"; data += \"\\r\\n\";\n" +
" data += \" for (var i in O[t]) O[t][i].apply($, n);\"; data += \"\\r\\n\";\n" +
" data += \" return $\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function B(t, n) { t && \\\"h\\\" !== t || _(\\\"change:h\\\", n), t && \\\"sv\\\" !== t || _(\\\"change:sv\\\", n), _(\\\"change\\\", n) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function R() { return T.parentNode }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function V(e, r) {\"; data += \"\\r\\n\";\n" +
" data += \" function i(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n = t.target,\"; data += \"\\r\\n\";\n" +
" data += \" e = n === s || y(n, s) === s;\"; data += \"\\r\\n\";\n" +
" data += \" e ? !R() && (V(), _(\\\"enter\\\")) : $.exit()\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function o(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n = (f(I), f([I[0], 1, 1]));\"; data += \"\\r\\n\";\n" +
" data += \" q.style.backgroundColor = \\\"rgb(\\\" + n.join(\\\",\\\") + \\\")\\\", E(I), x(t)\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function u(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n = c(d(P, t).y, 0, L);\"; data += \"\\r\\n\";\n" +
" data += \" I[0] = (L - n) / L, F.style.top = n - D / 2 + \\\"px\\\", o(t)\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function g(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n = d(q, t),\"; data += \"\\r\\n\";\n" +
" data += \" e = c(n.x, 0, j),\"; data += \"\\r\\n\";\n" +
" data += \" r = c(n.y, 0, O);\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function m(t) {\"; data += \"\\r\\n\";\n" +
" data += \" var n = t.target,\"; data += \"\\r\\n\";\n" +
" data += \" e = U ? \\\"h\\\" : \\\"sv\\\",\"; data += \"\\r\\n\";\n" +
" data += \" r = [l(I), $],\"; data += \"\\r\\n\";\n" +
" data += \" i = n === s || y(n, s) === s,\"; data += \"\\r\\n\";\n" +
" data += \" o = n === T || y(n, T) === T;\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function k(t) { K = 1, U = 1, b(t), x(t), _(\\\"start:h\\\", on), _(\\\"start\\\", on), B(\\\"h\\\", on) }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" var X = H(q),\"; data += \"\\r\\n\";\n" +
" data += \" M = H(J),\"; data += \"\\r\\n\";\n" +
" data += \" L = H(P).h,\"; data += \"\\r\\n\";\n" +
" data += \" j = X.w,\"; data += \"\\r\\n\";\n" +
" data += \" O = X.h,\"; data += \"\\r\\n\";\n" +
" data += \" D = H(F).h,\"; data += \"\\r\\n\";\n" +
" data += \" tn = M.w,\"; data += \"\\r\\n\";\n" +
" data += \" nn = M.h;\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \"\"; data += \"\\r\\n\";\n" +
" data += \" function G() { return $.fit() }\"; data += \"\\r\\n\";\n" +
" data += \" var C = n.body,\"; data += \"\\r\\n\";\n" +
" data += \" M = n.documentElement,\"; data += \"\\r\\n\";\n" +
" data += \" $ = this,\"; data += \"\\r\\n\";\n" +
" data += \" L = t[e],\"; data += \"\\r\\n\";\n" +
" data += \" j = !1,\"; data += \"\\r\\n\";\n" +
" data += \" O = {},\"; data += \"\\r\\n\";\n" +
" data += \" T = n.createElement(\\\"div\\\"),\"; data += \"\\r\\n\";\n" +
" data += \" N = \\\"touchstart mousedown\\\",\"; data += \"\\r\\n\";\n" +
" data += \" W = \\\"touchmove mousemove\\\",\"; data += \"\\r\\n\";\n" +
" data += \" Y = \\\"touchend mouseup\\\",\"; data += \"\\r\\n\";\n" +
" data += \" z = \\\"orientationchange resize\\\";\"; data += \"\\r\\n\";\n" +
" data += \" if (!($ instanceof L)) return new L(s, a);\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" var A, D = T[m].children,\"; data += \"\\r\\n\";\n" +
" data += \" I = w([0, 1, 1]),\"; data += \"\\r\\n\";\n" +
" data += \" P = D[0],\"; data += \"\\r\\n\";\n" +
" data += \" q = D[1],\"; data += \"\\r\\n\";\n" +
" data += \" F = P[m],\"; data += \"\\r\\n\";\n" +
" data += \" J = q[m],\"; data += \"\\r\\n\";\n" +
" data += \" K = 0,\"; data += \"\\r\\n\";\n" +
" data += \" Q = 0,\"; data += \"\\r\\n\";\n" +
" data += \" U = 0,\"; data += \"\\r\\n\";\n" +
" data += \" Z = 0,\"; data += \"\\r\\n\";\n" +
" data += \" tn = 0,\"; data += \"\\r\\n\";\n" +
" data += \" nn = 0,\"; data += \"\\r\\n\";\n" +
" data += \" en = 0,\"; data += \"\\r\\n\";\n" +
" data += \" rn = 0,\"; data += \"\\r\\n\";\n" +
" data += \" on = [l(I)];\"; data += \"\\r\\n\";\n" +
" data += \" return V(1), k(function() {\"; data += \"\\r\\n\";\n" +
" data += \" var t = [l(I)];\"; data += \"\\r\\n\";\n" +
" data += \" _(\\\"create\\\", t), B(0, t)\"; data += \"\\r\\n\";\n" +
" data += \" }, 0), $.fit = function(n) {\"; data += \"\\r\\n\";\n" +
" data += \" var e = H(t),\"; data += \"\\r\\n\";\n" +
" data += \" i = H(M),\"; data += \"\\r\\n\";\n" +
" data += \" u = e.w - i.w,\"; data += \"\\r\\n\";\n" +
" data += \" a = e.h - M.clientHeight,\"; data += \"\\r\\n\";\n" +
" data += \" f = g(t),\"; data += \"\\r\\n\";\n" +
" data += \" l = g(s);\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" else {\"; data += \"\\r\\n\";\n" +
" data += \" var h = f.l,\"; data += \"\\r\\n\";\n" +
" data += \" p = f.t,\"; data += \"\\r\\n\";\n" +
" data += \" v = f.l + e.w - en - u,\"; data += \"\\r\\n\";\n" +
" data += \" d = f.t + e.h - rn - a;\"; data += \"\\r\\n\";\n" +
" data += \" tn = c(tn, h, v) >> 0, nn = c(nn, p, d) >> 0\"; data += \"\\r\\n\";\n" +
" data += \" }\"; data += \"\\r\\n\";\n" +
" data += \" return T.style.left = tn + \\\"px\\\", T.style.top = nn + \\\"px\\\", _(\\\"fit\\\"), $\"; data += \"\\r\\n\";\n" +
" 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" +
" data += \" })\"; data += \"\\r\\n\";\n" +
" data += \"}(window, document, \\\"CP\\\");\"; data += \"\\r\\n\";\n" +
" data += \"</script>\"; data += \"\\r\\n\";\n" +
"\n" +
" 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" +
" return data;\n" +
"}\n" +
"");
return code;
}
Blockly.Python['webpage_buttoncontroller'] = function(block) {
var text_webpage_buttoncontroller_top = block.getFieldValue('webpage_buttoncontroller_top');
var text_webpage_buttoncontroller_top_path = block.getFieldValue('webpage_buttoncontroller_top_path');
var text_webpage_buttoncontroller_left = block.getFieldValue('webpage_buttoncontroller_left');
var text_webpage_buttoncontroller_left_path = block.getFieldValue('webpage_buttoncontroller_left_path');
var text_webpage_buttoncontroller_center = block.getFieldValue('webpage_buttoncontroller_center');
var text_webpage_buttoncontroller_center_path = block.getFieldValue('webpage_buttoncontroller_center_path');
var text_webpage_buttoncontroller_right = block.getFieldValue('webpage_buttoncontroller_right');
var text_webpage_buttoncontroller_right_path = block.getFieldValue('webpage_buttoncontroller_right_path');
var text_webpage_buttoncontroller_bottom = block.getFieldValue('webpage_buttoncontroller_bottom');
var text_webpage_buttoncontroller_bottom_path = block.getFieldValue('webpage_buttoncontroller_bottom_path');
var code = "server.send(200, \"text/html\",\" " +
"<!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>" +
"\");\n";
return code;
}