右側の窓はsprigです。Cプログラムで、IC-7410がUSB接続されたリモートホストの上で走ります。
左側の窓はブラウザで、同じウォーターフォール画像を表示しています。
これは、ローカルホスト上の4つの異なるブラウザです。それらは、Chrome, Firefox, Opera, Safariですが、どれがどれだか分かりますか?
Remote host:
% sprig /dev/ttyUSB0 HW:2,0 |& node index.js
sprig.c
for(int j=0;j<WATERFALL_XSIZE;j++) { double tmp = audio_signal_ffted[j]; int iii = 10.0*tmp; fprintf(stderr, "%1d", iii); *p++ = *q++ = colormap_r(tmp); *p++ = *q++ = colormap_g(tmp); *p++ = *q++ = colormap_b(tmp); }
index.js
var http = require('http'); var fs = require('fs'); var index = fs.readFileSync(__dirname + '/index.html'); var count = 0; var app = http.createServer(function(req, res) { res.writeHead(200, {'Content-Type' : 'text/html'}); res.end(index); }); var io = require('socket.io').listen(app); app.listen(3000); var ndata = 512; var pos = 0; var myarray = new Array(ndata); process.stdin.on('readable', function() { var buf = process.stdin.read(); for (var i = 0; i < buf.length; i++) { myarray[pos++] = buf[i]; if(pos == ndata) { pos = 0; console.log(myarray[0], myarray[1], myarray[2]); io.emit('time', {buffer : myarray}); } } });
index.html
<!doctype html> <html> <head> <script src='/socket.io/socket.io.js'></script> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script> var myarray = Array(); var socket = io(); var canvas; var ctx; var imgData; function init() { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); imgData = ctx.createImageData(512, 512); for (i = 0; i < 512; i++) { for (j = 0; j < 512; j++) { imgData.data[0 + j * 4 + i * imgData.width * 4] = j % 256; imgData.data[1 + j * 4 + i * imgData.width * 4] = i % 256; imgData.data[2 + j * 4 + i * imgData.width * 4] = 0; imgData.data[3 + j * 4 + i * imgData.width * 4] = 255; } } ctx.putImageData(imgData, 0, 0); } function emitParticles(myarray) { ctx.putImageData(imgData, 0, 1); imgData = ctx.getImageData(0, 0, 512, 512); for (j = 0; j < 512; j++) { var index = (myarray[j] - 48) * 32 % 256; imgData.data[0 + j * 4] = index; imgData.data[1 + j * 4] = 256 - index; imgData.data[2 + j * 4] = 0; imgData.data[3 + j * 4] = 255; } } socket.on('time', function(data) { myarray = data.buffer; emitParticles(myarray); console.log(count); }); </script> </head> <body> <canvas id="myCanvas" width="512" height="512" style="background:white;"></canvas> <p id='messages'></p> </body> </html>