| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Skia WebTry</title> |
| <meta charset='utf-8' /> |
| <style type="text/css" media="screen"> |
| .waiting, .waiting * { |
| cursor: wait; |
| } |
| textarea { |
| margin-left: 0; |
| border: solid 1px #ccc; |
| color: green; |
| } |
| pre, code { |
| padding: 0; |
| color: green; |
| } |
| #output { |
| color: #333; |
| } |
| </style> |
| </head> |
| <body> |
| <pre><code>#include "SkCanvas.h" |
| |
| void draw(SkCanvas* canvas) { |
| <textarea name='code' id='code' rows='15' cols='80'>SkPaint p; |
| p.setColor(SK_ColorRED); |
| p.setAntiAlias(true); |
| p.setStyle(SkPaint::kStroke_Style); |
| p.setStrokeWidth(10); |
| |
| canvas->drawLine(20, 20, 100, 100, p); |
| </textarea> |
| } |
| </code></pre> |
| |
| <input type='button' value='Run' id='run'> |
| |
| <p>Image appears here:</p> |
| <img id='img' src=''/> |
| |
| <pre><code id='output'></code></pre> |
| |
| <script type='text/javascript' charset='utf-8'> |
| var run = document.getElementById('run'); |
| var code = document.getElementById('code'); |
| var output = document.getElementById('output'); |
| var img = document.getElementById('img'); |
| |
| function beginWait() { |
| document.body.classList.add('waiting'); |
| run.disabled = true; |
| } |
| |
| function endWait() { |
| document.body.classList.remove('waiting'); |
| run.disabled = false; |
| } |
| |
| function codeComplete(e) { |
| // The response is JSON of the form: |
| // { |
| // "message": "you had an error...", |
| // "img": "<base64 encoded image but only on success>" |
| // } |
| // |
| // The img is optional and only appears if there is a valid |
| // image to display. |
| endWait(); |
| console.log(e.target.response); |
| body = JSON.parse(e.target.response); |
| output.innerText = body.message; |
| if (body.hasOwnProperty('img')) { |
| img.src = 'data:image/png;base64,' + body.img; |
| } else { |
| img.src = ''; |
| } |
| } |
| |
| function codeError(e) { |
| endWait(); |
| alert('Something bad happened: ' + e); |
| } |
| |
| run.addEventListener('click', onSubmitCode); |
| function onSubmitCode() { |
| beginWait(); |
| var req = new XMLHttpRequest(); |
| req.addEventListener('load', codeComplete); |
| req.addEventListener('error', codeError); |
| req.overrideMimeType('application/json'); |
| req.open('POST', '.', true); |
| req.send(code.value); |
| } |
| </script> |
| </body> |
| </html> |