Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(313)

Side by Side Diff: experimental/webtry/index.html

Issue 228693002: Initial code for webtry, a web application for allowing users to try out Skia. (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: Don't add webtry to everything.gyp Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Skia WebTry</title>
5 <meta charset='utf-8' />
6 <style type="text/css" media="screen">
7 textarea {
8 margin-left: 0;
9 border: solid 1px #ccc;
10 color: green;
11 }
12 pre, code {
13 padding: 0;
14 color: green;
15 }
16 </style>
17 </head>
18 <body>
19 <pre><code>#include "SkCanvas.h"
20 #include "SkGraphics.h"
21 #include "SkImageEncoder.h"
22 #include "SkImageInfo.h"
23 #include "SkForceLinking.h"
24
25 int main() {
26 SkForceLinking(false);
27 SkGraphics::Init();
28
29 SkImageInfo info = SkImageInfo::MakeN32(300, 300, kPremul_SkAlphaType);
30 SkBitmap bitmap;
31 bitmap.setConfig(info);
32 bitmap.allocPixels();
33 SkCanvas c(bitmap);
34 c.drawColor(SK_ColorWHITE);
35
36 <textarea name='code' id='code' rows='20' cols='80'>SkPaint p;
37 p.setColor(SK_ColorRED);
38 p.setAntiAlias(true);
39 p.setStyle(SkPaint::kStroke_Style);
40 p.setStrokeWidth(10);
41
42 c.drawLine(20, 20, 100, 100, p);
43 </textarea>
44
45 if (!SkImageEncoder::EncodeFile("foo.png", bitmap, SkImageEncoder::kPNG_Type, 100)) {
46 printf("Failed to encode\n");
47 }
48 }
49 </code></pre>
50
51 <p>Image appears here:</p>
52 <img id='img' src=''/>
53
54 <pre><code id='output'></code></pre>
55
56 <input type='button' value='Run' id='run'>
57 <script type='text/javascript' charset='utf-8'>
58 var run = document.getElementById('run');
59 var code = document.getElementById('code');
60 var output = document.getElementById('output');
61 var img = document.getElementById('img');
62
63 function codeComplete(e) {
64 // The response is JSON of the form:
65 // {
66 // "message": "you had an error...",
67 // "img": "<base64 encoded image but only on success>"
68 // }
69 //
70 // The img is optional and only appears if there is a valid
71 // image to display.
72 console.log(e.target.response);
73 body = JSON.parse(e.target.response);
74 output.innerText = body.message;
75 if (body.hasOwnProperty('img')) {
76 img.src = 'data:image/png;base64,' + body.img;
77 } else {
78 img.src = '';
79 }
80 }
81
82 function codeError(e) {
83 alert('Something bad happened: ' + e);
84 }
85
86 run.addEventListener('click', onSubmitCode);
87 function onSubmitCode() {
88 var req = new XMLHttpRequest();
89 req.addEventListener('load', codeComplete);
90 req.addEventListener('error', codeError);
91 req.overrideMimeType('application/json');
92 req.open('POST', '.', true);
93 req.send(code.value + '\r\nEOF\r\n');
94 }
95 </script>
96 </body>
97 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698