Skip to content

Commit

Permalink
tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfwilliams
gfwilliams committed May 7, 2015
1 parent f12c026 commit 14e7eec
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions tutorials/Interactive Web UI.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,14 @@ When you have something like this, make sure you right-click on each item, go to
If you load up this HTML file, it should display your image. Now to make some changes...

* Add a 'head' tag with `<head><meta name="viewport" content="width=device-width,initial-scale=1"></head>` - this will ensure that is displays fullscreen on mobile devices
* Make sure the`<body` tag contains `<body style="width:100%;height:100%;">` - again, this will ensure fullscreen display
* Make sure the`<body` tag contains `<body style="width:100%;height:100%;overflow:hidden;">` - again, this will ensure fullscreen display
* And make sure the SVG itself can stretch to the new size. Replace the `<svg width="500" height="500" id="svg">` tag with `<svg style="width:100%;height:100%;" viewbox="0 0 500 500" id="svg">`
* Now, we need to add some JavaScript code that will help to make your SVG interactive. This will vary depending on what you've drawn, but I've included the code I used below:

```HTML
<html>
<head><meta name="viewport" content="width=device-width,initial-scale=1"></head>
<body style="width:100%;height:100%;">
<body style="width:100%;height:100%;overflow:hidden;">
<svg style="width:100%;height:100%;"
viewbox="0 0 500 500" id="svg">
<path
Expand Down Expand Up @@ -221,7 +221,7 @@ Save it all to disk, and then use the [[File Converter]] page to convert it to a
Finally, you just need to write some code for Espruino that will serve up the webpage and will do something when data is POSTed back via HTTP.

```JavaScript
var page = "<html>\n<head><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"></head>\n<body style=\"width:100%;height:100%;\">\n<svg style=\"width:100%;height:100%;\"\n viewbox=\"0 0 500 500\" id=\"svg\">\n <path\n style=\"fill:#80e5ff;fill-opacity:1;fill-rule:nonzero;stroke:none\"\n d=\"M 250 0 C 111.92882 3.7895613e-14 0 111.92882 0 250 C -1.249508e-14 341.05067 48.689713 420.72528 121.4375 464.4375 L 154.625 409.40625 C 100.50052 376.95218 64.28125 317.69934 64.28125 250 C 64.28125 147.43284 147.43284 64.28125 250 64.28125 C 352.56716 64.28125 435.71875 147.43284 435.71875 250 C 435.71875 317.53896 399.66155 376.65256 345.75 409.15625 L 378.71875 464.34375 C 451.37991 420.61135 500 340.98541 500 250 C 500 111.92882 388.07118 -1.8947806e-14 250 0 z \" id=\"ring\"/>\n <rect\n style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none\"\n id=\"needle\"\n width=\"16\"\n height=\"80\"\n x=\"242\"/>\n <text\n xml:space=\"preserve\"\n style=\"font-size:122.59261322px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica;-inkscape-font-specification:Helvetica\"\n x=\"250.01915\"\n y=\"845.31812\"\n id=\"text\"><tspan\n id=\"label\"\n x=\"250.01915\"\n y=\"292.95594\">0</tspan></text>\n <path\n style=\"fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none\"\n id=\"up\"\n d=\"m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z\"\n transform=\"matrix(0.61903879,0,0,0.61903879,95.682477,91.16682)\"\n />\n <path\n transform=\"matrix(0.61903879,0,0,-0.61903879,95.682477,408.80767)\"\n d=\"m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z\"\n id=\"dn\"\n style=\"fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none\" />\n</svg>\n\n<script>\n// Convert touch to mouse event for mobile devices\nfunction touchHandler(event) {\n var touches = event.changedTouches,\n first = touches[0], type = \"\";\n switch(event.type) {\n case \"touchstart\": type=\"mousedown\"; break;\n case \"touchmove\": type=\"mousemove\"; break; \n case \"touchend\": type=\"mouseup\"; break;\n default: return;\n }\n var simulatedEvent = document.createEvent(\"MouseEvent\");\n simulatedEvent.initMouseEvent(type, true, true, window, 1, \n first.screenX, first.screenY, \n first.clientX, first.clientY, false, \n false, false, false, 0/*left*/, null);\n first.target.dispatchEvent(simulatedEvent);\n event.preventDefault();\n}\ndocument.addEventListener(\"touchstart\", touchHandler, true);\ndocument.addEventListener(\"touchmove\", touchHandler, true);\ndocument.addEventListener(\"touchend\", touchHandler, true);\ndocument.addEventListener(\"touchcancel\", touchHandler, true); \n\n// rotate needle to correct position\nvar pos = 50;\nfunction setPos(p) {\n if (p<0) p=0;\n if (p>100) p=100;\n pos = p;\n document.getElementById(\"label\").textContent = pos; \n var a = (pos-50)*2.8;\n document.getElementById(\"needle\").setAttribute(\"transform\",\"rotate(\"+a+\" 250 250)\"); \n}\nsetPos(pos);\n\n// handle events\nvar dragging = false;\nfunction dragStart() {\n dragging = true;\n document.getElementById(\"ring\").style.fill = \"#ff0000\";\n}\ndocument.addEventListener(\"mousemove\", function(e) {\n if (dragging) {\n e.preventDefault();\n var svg = document.getElementById(\"svg\");\n var ang = Math.atan2(e.clientX-(svg.clientWidth/2),(svg.clientHeight/2)-e.clientY)*180/Math.PI;\n setPos(Math.round((ang/2.8)+50));\n }\n});\ndocument.addEventListener(\"mouseup\", function(e) {\n dragging = false;\n document.getElementById(\"ring\").style.fill = \"#80e5ff\";\n document.getElementById(\"up\").style.fill = \"#d5f6ff\";\n document.getElementById(\"dn\").style.fill = \"#d5f6ff\";\n // POST data to Espruino\n var req=new XMLHttpRequest();\n req.open(\"POST\",\"?pos=\"+pos, true);\n req.send();\n});\ndocument.getElementById(\"ring\").onmousedown = dragStart;\ndocument.getElementById(\"needle\").onmousedown = dragStart;\ndocument.getElementById(\"up\").onmousedown = function(e) { e.preventDefault(); this.style.fill = \"#ff0000\"; };\ndocument.getElementById(\"dn\").onmousedown = function(e) { e.preventDefault(); this.style.fill = \"#00ff00\"; };\ndocument.getElementById(\"up\").onmouseup = function(e) { setPos(pos+10); };\ndocument.getElementById(\"dn\").onmouseup = function(e) { setPos(pos-10); };\n</script>\n</body>\n</html>";
var page = "<html>\n<head><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"></head>\n<body style=\"width:100%;height:100%;overflow:hidden;\">\n<svg style=\"width:100%;height:100%;\"\n viewbox=\"0 0 500 500\" id=\"svg\">\n <path\n style=\"fill:#80e5ff;fill-opacity:1;fill-rule:nonzero;stroke:none\"\n d=\"M 250 0 C 111.92882 3.7895613e-14 0 111.92882 0 250 C -1.249508e-14 341.05067 48.689713 420.72528 121.4375 464.4375 L 154.625 409.40625 C 100.50052 376.95218 64.28125 317.69934 64.28125 250 C 64.28125 147.43284 147.43284 64.28125 250 64.28125 C 352.56716 64.28125 435.71875 147.43284 435.71875 250 C 435.71875 317.53896 399.66155 376.65256 345.75 409.15625 L 378.71875 464.34375 C 451.37991 420.61135 500 340.98541 500 250 C 500 111.92882 388.07118 -1.8947806e-14 250 0 z \" id=\"ring\"/>\n <rect\n style=\"fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none\"\n id=\"needle\"\n width=\"16\"\n height=\"80\"\n x=\"242\"/>\n <text\n xml:space=\"preserve\"\n style=\"font-size:122.59261322px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica;-inkscape-font-specification:Helvetica\"\n x=\"250.01915\"\n y=\"845.31812\"\n id=\"text\"><tspan\n id=\"label\"\n x=\"250.01915\"\n y=\"292.95594\">0</tspan></text>\n <path\n style=\"fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none\"\n id=\"up\"\n d=\"m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z\"\n transform=\"matrix(0.61903879,0,0,0.61903879,95.682477,91.16682)\"\n />\n <path\n transform=\"matrix(0.61903879,0,0,-0.61903879,95.682477,408.80767)\"\n d=\"m 294.75099,133.39225 -90.93056,0 45.46528,-78.748173 z\"\n id=\"dn\"\n style=\"fill:#d5f6ff;fill-opacity:1;fill-rule:nonzero;stroke:none\" />\n</svg>\n\n<script>\n// Convert touch to mouse event for mobile devices\nfunction touchHandler(event) {\n var touches = event.changedTouches,\n first = touches[0], type = \"\";\n switch(event.type) {\n case \"touchstart\": type=\"mousedown\"; break;\n case \"touchmove\": type=\"mousemove\"; break; \n case \"touchend\": type=\"mouseup\"; break;\n default: return;\n }\n var simulatedEvent = document.createEvent(\"MouseEvent\");\n simulatedEvent.initMouseEvent(type, true, true, window, 1, \n first.screenX, first.screenY, \n first.clientX, first.clientY, false, \n false, false, false, 0/*left*/, null);\n first.target.dispatchEvent(simulatedEvent);\n event.preventDefault();\n}\ndocument.addEventListener(\"touchstart\", touchHandler, true);\ndocument.addEventListener(\"touchmove\", touchHandler, true);\ndocument.addEventListener(\"touchend\", touchHandler, true);\ndocument.addEventListener(\"touchcancel\", touchHandler, true); \n\n// rotate needle to correct position\nvar pos = 50;\nfunction setPos(p) {\n if (p<0) p=0;\n if (p>100) p=100;\n pos = p;\n document.getElementById(\"label\").textContent = pos; \n var a = (pos-50)*2.8;\n document.getElementById(\"needle\").setAttribute(\"transform\",\"rotate(\"+a+\" 250 250)\"); \n}\nsetPos(pos);\n\n// handle events\nvar dragging = false;\nfunction dragStart() {\n dragging = true;\n document.getElementById(\"ring\").style.fill = \"#ff0000\";\n}\ndocument.addEventListener(\"mousemove\", function(e) {\n if (dragging) {\n e.preventDefault();\n var svg = document.getElementById(\"svg\");\n var ang = Math.atan2(e.clientX-(svg.clientWidth/2),(svg.clientHeight/2)-e.clientY)*180/Math.PI;\n setPos(Math.round((ang/2.8)+50));\n }\n});\ndocument.addEventListener(\"mouseup\", function(e) {\n dragging = false;\n document.getElementById(\"ring\").style.fill = \"#80e5ff\";\n document.getElementById(\"up\").style.fill = \"#d5f6ff\";\n document.getElementById(\"dn\").style.fill = \"#d5f6ff\";\n // POST data to Espruino\n var req=new XMLHttpRequest();\n req.open(\"POST\",\"?pos=\"+pos, true);\n req.send();\n});\ndocument.getElementById(\"ring\").onmousedown = dragStart;\ndocument.getElementById(\"needle\").onmousedown = dragStart;\ndocument.getElementById(\"up\").onmousedown = function(e) { e.preventDefault(); this.style.fill = \"#ff0000\"; };\ndocument.getElementById(\"dn\").onmousedown = function(e) { e.preventDefault(); this.style.fill = \"#00ff00\"; };\ndocument.getElementById(\"up\").onmouseup = function(e) { setPos(pos+10); };\ndocument.getElementById(\"dn\").onmouseup = function(e) { setPos(pos-10); };\n</script>\n</body>\n</html>";


// Define our 'pos' variable
Expand Down

0 comments on commit 14e7eec

Please sign in to comment.