| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Skia WebTry</title> | 4 <title>Skia WebTry</title> |
| 5 <meta charset='utf-8' /> | 5 <meta charset='utf-8' /> |
| 6 <link rel="stylesheet" href="/css/" type="text/css" media="screen"> | 6 <link rel="stylesheet" href="/css/" type="text/css" media="screen"> |
| 7 </head> | 7 </head> |
| 8 <body> | 8 <body> |
| 9 <section id=title> | 9 {{template "titlebar.html"}} |
| 10 <a href="/">Home</a> | |
| 11 <a href="/recent">Recent</a> | |
| 12 <a href="https://github.com/google/skia/tree/master/experimental/webtry">Cod
e</a> | |
| 13 </section> | |
| 14 <section id=content> | 10 <section id=content> |
| 15 <pre><code>#include "SkCanvas.h" | 11 <pre><code>#include "SkCanvas.h" |
| 16 | 12 |
| 17 void draw(SkCanvas* canvas) { | 13 void draw(SkCanvas* canvas) { |
| 18 <textarea name='code' id='code' rows='15' cols='80'>{{.UserCode}}</textarea> | 14 <textarea name='code' id='code' rows='15' cols='80'>{{.UserCode}}</textarea> |
| 19 } | 15 } |
| 20 </code></pre> | 16 </code></pre> |
| 21 | 17 |
| 22 <input type='button' value='Run' id='run'> | 18 <input type='button' value='Run' id='run'> |
| 23 | 19 |
| 24 <p>Image appears here:</p> | 20 <p>Image appears here:</p> |
| 25 <img id='img' src=''/> | 21 <img id='img' src=''/> |
| 26 | 22 |
| 27 <pre><code id='output'></code></pre> | 23 <pre><code id='output'></code></pre> |
| 28 | 24 |
| 29 </section> | 25 </section> |
| 30 <script type='text/javascript' charset='utf-8'> | 26 <script type='text/javascript' charset='utf-8'> |
| 31 var run = document.getElementById('run'); | 27 // Not running in a workspace. |
| 32 var code = document.getElementById('code'); | 28 var workspaceName = ""; |
| 33 var output = document.getElementById('output'); | |
| 34 var img = document.getElementById('img'); | |
| 35 | |
| 36 function beginWait() { | |
| 37 document.body.classList.add('waiting'); | |
| 38 run.disabled = true; | |
| 39 } | |
| 40 | |
| 41 function endWait() { | |
| 42 document.body.classList.remove('waiting'); | |
| 43 run.disabled = false; | |
| 44 } | |
| 45 | |
| 46 function codeComplete(e) { | |
| 47 // The response is JSON of the form: | |
| 48 // { | |
| 49 // "message": "you had an error...", | |
| 50 // "img": "<base64 encoded image but only on success>" | |
| 51 // } | |
| 52 // | |
| 53 // The img is optional and only appears if there is a valid | |
| 54 // image to display. | |
| 55 endWait(); | |
| 56 console.log(e.target.response); | |
| 57 body = JSON.parse(e.target.response); | |
| 58 output.innerText = body.message; | |
| 59 if (body.hasOwnProperty('img')) { | |
| 60 img.src = 'data:image/png;base64,' + body.img; | |
| 61 } else { | |
| 62 img.src = ''; | |
| 63 } | |
| 64 window.history.pushState(null, null, "/c/" + body.hash); | |
| 65 } | |
| 66 | |
| 67 function codeError(e) { | |
| 68 endWait(); | |
| 69 alert('Something bad happened: ' + e); | |
| 70 } | |
| 71 | |
| 72 run.addEventListener('click', onSubmitCode); | |
| 73 function onSubmitCode() { | |
| 74 beginWait(); | |
| 75 var req = new XMLHttpRequest(); | |
| 76 req.addEventListener('load', codeComplete); | |
| 77 req.addEventListener('error', codeError); | |
| 78 req.overrideMimeType('application/json'); | |
| 79 req.open('POST', '.', true); | |
| 80 req.send(code.value); | |
| 81 } | |
| 82 </script> | 29 </script> |
| 30 <script src="/js/run.js" type="text/javascript" charset="utf-8"></script> |
| 83 </body> | 31 </body> |
| 84 </html> | 32 </html> |
| OLD | NEW |