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 |