@live-codes/browser-compilers 0.4.11 → 0.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,99 @@
1
+ // This is a minimal interface to the gnuplot worker. More sophisticated include virtual file-system lists and a reset function.
2
+
3
+ var Gnuplot = function (js_filename) {
4
+ this.worker = new Worker(js_filename);
5
+ this.output = [];
6
+ this.error = [];
7
+ this.isRunning = false;
8
+
9
+ // These two should be overwritten by application.
10
+ this.onOutput = function (text) {
11
+ console.log('Gnuplot output: ' + text);
12
+ };
13
+ this.onError = function (text) {
14
+ console.log('Gnuplot error: ' + text);
15
+ };
16
+
17
+ this.transaction = 1;
18
+ this.callbacks = [];
19
+ this.postCommand = function (cmd_block, callback) {
20
+ var id = this.transaction; // fresh id
21
+ cmd_block.transaction = id; // give data object a tag
22
+ this.callbacks[id] = callback;
23
+ this.worker.postMessage(cmd_block);
24
+ this.transaction++;
25
+ };
26
+
27
+ var that = this;
28
+ this.worker.addEventListener(
29
+ 'message',
30
+ function (e) {
31
+ // console.log('gnuplot: ', e.data); //enable for debug
32
+ var data = e.data;
33
+ if (data.transaction < 0) {
34
+ if (data.transaction == -1) {
35
+ that.output.push(data.content);
36
+ that.onOutput(data.content);
37
+ }
38
+ if (data.transaction == -2) {
39
+ that.error.push(data.content);
40
+ that.onError(data.content);
41
+ }
42
+ return;
43
+ }
44
+ if (data.content == 'FINISH') that.isRunning = false;
45
+ if (data.transaction && that.callbacks[data.transaction]) {
46
+ that.callbacks[data.transaction](data);
47
+ delete that.callbacks[data.transaction];
48
+ }
49
+ },
50
+ false,
51
+ );
52
+
53
+ this.worker.postMessage({}); // supposed to do this to start the worker?
54
+ };
55
+
56
+ Gnuplot.prototype.putFile = function (name_, contents, callback) {
57
+ var data = {
58
+ name: name_,
59
+ content: contents,
60
+ cmd: 'putFile',
61
+ };
62
+ this.postCommand(data, callback);
63
+ };
64
+
65
+ // to read output
66
+ Gnuplot.prototype.getFile = function (name_, callback) {
67
+ var data = {
68
+ name: name_,
69
+ cmd: 'getFile',
70
+ };
71
+ this.postCommand(data, callback);
72
+ };
73
+
74
+ Gnuplot.prototype.getFileList = function (callback) {
75
+ var data = {
76
+ cmd: 'getFileList',
77
+ };
78
+ this.postCommand(data, callback);
79
+ };
80
+
81
+ Gnuplot.prototype.removeFiles = function (files, callback) {
82
+ var data = {
83
+ name: files,
84
+ cmd: 'removeFiles',
85
+ };
86
+ this.postCommand(data, callback);
87
+ };
88
+
89
+ Gnuplot.prototype.run = function (script, onFinish) {
90
+ if (this.isRunning) return false;
91
+ this.putFile('foo', script);
92
+ var data = {
93
+ content: ['foo'],
94
+ cmd: 'run',
95
+ };
96
+ this.isRunning = true;
97
+ this.postCommand(data, onFinish);
98
+ return true;
99
+ };
@@ -0,0 +1,182 @@
1
+ <!doctype html>
2
+ <html lang="en-us">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
+ <title>Gnuplot compiled by Emscripten</title>
7
+ <style>
8
+ .emscripten { padding-right: 0; margin-left: auto; font-size: 10px; margin-right: auto; display: block; }
9
+ canvas.emscripten { border: 1px solid black; }
10
+ textarea.emscripten { font-family: monospace; width: 80%; }
11
+ div.emscripten { text-align: center; }
12
+ table.noborder { border: 0; vertical-align: text-top; }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <h1>Gnuplot 4.6.3 compiled to JS with <a href='https://github.com/kripken/emscripten'>Emscripten</a></h1>
17
+ <p>The API uses a web-worker to start gnuplot, a decent HTML5 browser like firefox (ASM_JS is on) or chrome is required. No feature checks are done here, so nothing happens if your browser
18
+ is incompatible.
19
+ Feel free to try other scripts from the
20
+ <a href='http://gnuplot.sourceforge.net/demo_svg_4.6/'>demo page</a>. Remember not to change the output / terminal line, this demo
21
+ is looking for a file named out.svg generated by gnuplot. Theoretically all browser formats are supported, even animated gif.
22
+ <b>The image is updated as soon as something changes in the script.</b><br>
23
+ The site uses local storage to remember your script in the text area, so when you visit the site again it is still there (your data files are not).<br>
24
+ <br> Author: Christian Huettig, <a href="mailto:chhu79@gmail.com?Subject=Gnuplot%20Site">
25
+ Send Mail</a><br><br>
26
+ <button onclick="localStorage.removeItem('gnuplot.script');
27
+ localStorage.removeItem('gnuplot.files');
28
+ window.location.reload(true)">Reset and delete local storage</button>
29
+ </p>
30
+ <hr/>
31
+ Optional: Grant the program read-access to a specific file on your local computer. This file is _not_ uploaded anywhere. Use it for data files that you want to use in your script.<br>
32
+ <input type="file" id="files" name="files[]" multiple />
33
+ <output id="list"></output>
34
+ <hr/>
35
+ <table class="noborder"><tr><td>
36
+ <img src="" id="gnuimg" type="image/svg+xml" width=600 height=400 class="float-right"/>
37
+ </td><td valign=top style="width:95%;">
38
+ <textarea class="emscripten" id="gnuplot" rows="35" onkeyup="scriptChange()">
39
+ set terminal svg enhanced size 1000,700
40
+ set output 'out.svg'
41
+ # set terminal svg size 600,400 dynamic enhanced fname 'arial' fsize 10 mousing name "heatmaps_3" butt solid
42
+ # set output 'heatmaps.3.svg'
43
+ set format cb "%4.1f"
44
+ set view 49, 28, 1, 1.48
45
+ set samples 70, 70
46
+ set isosamples 60, 60
47
+ set ticslevel 0
48
+ set cbtics border in scale 0,0 mirror norotate offset character 0, 0, 0 autojustify
49
+ set title "4D data (3D Heat Map)\nIndependent value color-mapped onto 3D surface"
50
+ set title offset character 0, 1, 0 font "" norotate
51
+ set xlabel "x"
52
+ set xlabel offset character 3, 0, 0 font "" textcolor lt -1 norotate
53
+ set xrange [ 5.00000 : 35.0000 ] noreverse nowriteback
54
+ set ylabel "y"
55
+ set ylabel offset character -5, 0, 0 font "" textcolor lt -1 rotate by -270
56
+ set yrange [ 5.00000 : 35.0000 ] noreverse nowriteback
57
+ set zlabel "z"
58
+ set zlabel offset character 2, 0, 0 font "" textcolor lt -1 norotate
59
+ set pm3d implicit at s
60
+ set colorbox user
61
+ set colorbox vertical origin screen 0.9, 0.2, 0 size screen 0.03, 0.6, 0 front noborder
62
+ Z(x,y) = 100. * (sinc(x,y) + 1.5)
63
+ sinc(x,y) = sin(sqrt((x-20.)**2+(y-20.)**2))/sqrt((x-20.)**2+(y-20.)**2)
64
+ color(x,y) = 10. * (1.1 + sin((x-20.)/5.)*cos((y-20.)/10.))
65
+ GPFUN_Z = "Z(x,y) = 100. * (sinc(x,y) + 1.5)"
66
+ GPFUN_sinc = "sinc(x,y) = sin(sqrt((x-20.)**2+(y-20.)**2))/sqrt((x-20.)**2+(y-20.)**2)"
67
+ GPFUN_color = "color(x,y) = 10. * (1.1 + sin((x-20.)/5.)*cos((y-20.)/10.))"
68
+ splot '++' using 1:2:(Z($1,$2)):(color($1,$2)) with pm3d title "4 data columns x/y/z/color"
69
+ </textarea>
70
+ </td></tr></table>
71
+ <br clear=all>
72
+ <hr>
73
+ <h2 style="float: left;">Output:</h2>
74
+ <textarea class="emscripten" id="output" rows="8">Loading, please wait. </textarea>
75
+ <hr>
76
+ Update 2013-06-23: Re-compiled with latest emscripten. Hidden surface removal bug fixed. Now at <a href="https://github.com/chhu/gnuplot-JS">github</a>.<br>
77
+ Update 2013-05-11: Update to 4.6.3, {} parser bug gone, files work now and remain in your browser storage! No need for repeated upload.<br>
78
+ Update 2012-12-28: Stack reset on re-run, no more out-of-memory. Bug found, no hidden surfaces working atm. Suspecting int64.<br>
79
+ Update 2012-12-29: Using of data files possible, local Storage remembers your script<br>
80
+ Update 2013-01-02: IE10 compatible now. Surprisingly just 10% slower than chrome.<br>
81
+ Update 2013-01-04: UTF8 fix. iOS6 compatible now. Stripped terminals. Enabled gzip compression in webserver, gnuplot.js is 460kb.<br>
82
+ Update 2013-01-06: Fallback to data-uri if Blob is not available, works now in a lot more older/mobile browsers.<br>
83
+ Update 2013-01-11: Proper reset implemented. Consecutive calls do not remember previous states.<br>
84
+ <script src='gnuplot_api.js'></script>
85
+ <script>
86
+ gnuplot = new Gnuplot('gnuplot.js');
87
+ gnuplot.onOutput = function(text) {
88
+ document.getElementById('output').value += text + '\n';
89
+ document.getElementById('output').scrollTop = 99999;
90
+ };
91
+ gnuplot.onError = function(text) {
92
+ document.getElementById('output').value += 'ERR: ' + text + '\n';
93
+ document.getElementById('output').scrollTop = 99999;
94
+ };
95
+ var lastTAContent = '';
96
+ function scriptChange() {
97
+ var val = document.getElementById("gnuplot").value;
98
+ if (lastTAContent == val)
99
+ return;
100
+ localStorage["gnuplot.script"] = val;
101
+ if (gnuplot.isRunning) {
102
+ setTimeout(scriptChange, 1000);
103
+ } else {
104
+ lastTAContent = val;
105
+ runScript();
106
+ }
107
+ }
108
+ ;
109
+ files = {};
110
+ if (localStorage["gnuplot.files"])
111
+ files = JSON.parse(localStorage["gnuplot.files"]);
112
+ for (var key in files)
113
+ gnuplot.onOutput("Found locally stored file: " + key + " with " + files[key].length + " bytes.");
114
+ var runScript = function() {
115
+ var editor = document.getElementById('gnuplot'); // textarea
116
+ var start = Date.now();
117
+ // "upload" files to worker thread
118
+ for (var f in files)
119
+ gnuplot.putFile(f, files[f]);
120
+
121
+ gnuplot.run(editor.value, function(e) {
122
+ gnuplot.onOutput('Execution took ' + (Date.now() - start) / 1000 + 's.');
123
+ gnuplot.getFile('out.svg', function(e) {
124
+ if (!e.content) {
125
+ gnuplot.onError("Output file out.svg not found!");
126
+ return;
127
+ }
128
+ var img = document.getElementById('gnuimg');
129
+ try {
130
+ var ab = new Uint8Array(e.content);
131
+ var blob = new Blob([ab], {"type": "image\/svg+xml"});
132
+ window.URL = window.URL || window.webkitURL;
133
+ img.src = window.URL.createObjectURL(blob);
134
+ } catch (err) { // in case blob / URL missing, fallback to data-uri
135
+ if (!window.blobalert) {
136
+ alert('Warning - your browser does not support Blob-URLs, using data-uri with a lot more memory and time required. Err: ' + err);
137
+ window.blobalert = true;
138
+ }
139
+ var rstr = '';
140
+ for (var i = 0; i < e.content.length; i++)
141
+ rstr += String.fromCharCode(e.content[i]);
142
+ img.src = 'data:image\/svg+xml;base64,' + btoa(rstr);
143
+ }
144
+ });
145
+ });
146
+ };
147
+ // set the script from local storage
148
+ if (localStorage["gnuplot.script"])
149
+ document.getElementById('gnuplot').value = localStorage["gnuplot.script"];
150
+ scriptChange();
151
+ function handleFileSelect(evt) {
152
+ var _files = evt.target.files; // FileList object
153
+
154
+ // files is a FileList of File objects. List some properties.
155
+ var output = [];
156
+ for (var i = 0, f; f = _files[i]; i++) {
157
+ output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
158
+ f.size, ' bytes, last modified: ',
159
+ f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
160
+ '</li>');
161
+ (function() {
162
+ var reader = new FileReader();
163
+ var fname = f.name;
164
+ reader.onloadend = function(e) {
165
+ if (e.target.result) {
166
+ gnuplot.onOutput(fname + ": Read success - storing in browser. " + e.target.result.length);
167
+ files[fname] = e.target.result;
168
+ localStorage["gnuplot.files"] = JSON.stringify(files);
169
+ }
170
+
171
+ };
172
+ reader.readAsText(f);
173
+ })();
174
+ }
175
+ document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
176
+ }
177
+ document.getElementById('files').addEventListener('change', handleFileSelect, false);
178
+
179
+ </script>
180
+
181
+ </body>
182
+ </html>