Index: experimental/webtry/index.html |
diff --git a/experimental/webtry/index.html b/experimental/webtry/index.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b3903e675fbf003894dac743db07f5cdc3c06ef8 |
--- /dev/null |
+++ b/experimental/webtry/index.html |
@@ -0,0 +1,97 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <title>Skia WebTry</title> |
+ <meta charset='utf-8' /> |
+ <style type="text/css" media="screen"> |
+ textarea { |
+ margin-left: 0; |
+ border: solid 1px #ccc; |
+ color: green; |
+ } |
+ pre, code { |
+ padding: 0; |
+ color: green; |
+ } |
+ </style> |
+</head> |
+<body> |
+ <pre><code>#include "SkCanvas.h" |
+#include "SkGraphics.h" |
+#include "SkImageEncoder.h" |
+#include "SkImageInfo.h" |
+#include "SkForceLinking.h" |
+ |
+int main() { |
+ SkForceLinking(false); |
+ SkGraphics::Init(); |
+ |
+ SkImageInfo info = SkImageInfo::MakeN32(300, 300, kPremul_SkAlphaType); |
+ SkBitmap bitmap; |
+ bitmap.setConfig(info); |
+ bitmap.allocPixels(); |
+ SkCanvas c(bitmap); |
+ c.drawColor(SK_ColorWHITE); |
+ |
+ <textarea name='code' id='code' rows='20' cols='80'>SkPaint p; |
+p.setColor(SK_ColorRED); |
+p.setAntiAlias(true); |
+p.setStyle(SkPaint::kStroke_Style); |
+p.setStrokeWidth(10); |
+ |
+c.drawLine(20, 20, 100, 100, p); |
+</textarea> |
+ |
+ if (!SkImageEncoder::EncodeFile("foo.png", bitmap, SkImageEncoder::kPNG_Type, 100)) { |
+ printf("Failed to encode\n"); |
+ } |
+} |
+</code></pre> |
+ |
+ <p>Image appears here:</p> |
+ <img id='img' src=''/> |
+ |
+ <pre><code id='output'></code></pre> |
+ |
+ <input type='button' value='Run' id='run'> |
+ <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 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. |
+ 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) { |
+ alert('Something bad happened: ' + e); |
+ } |
+ |
+ run.addEventListener('click', onSubmitCode); |
+ function onSubmitCode() { |
+ var req = new XMLHttpRequest(); |
+ req.addEventListener('load', codeComplete); |
+ req.addEventListener('error', codeError); |
+ req.overrideMimeType('application/json'); |
+ req.open('POST', '.', true); |
+ req.send(code.value + '\r\nEOF\r\n'); |
+ } |
+ </script> |
+</body> |
+</html> |