Posted on

ウォーターフォールをパイプで

あなたの表示したい信号が、別のプロセスからパイプで与えられるとしましょう。

bash.sh

while :
 do
  echo "0.13456789"
  sleep 0.1
  echo "1234567890"
  sleep 0.1
  echo "2345678901"
  sleep 0.1
  echo "34567890.1"
  sleep 0.1
  echo "4567890.13"
  sleep 0.1
 done

% ./bash.sh | node index.js

index.js

var http  = require('http');
var fs    = require('fs');
var index = fs.readFileSync(__dirname + '/index12.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   = 10;
var myarray = new Array(ndata);

process.stdin.on('readable', function() {
  var buf = process.stdin.read();
  console.log(buf);
  for (var i = 0; i < ndata; i++) {
    myarray[i] = buf[i];
  }
  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 nxdata  = 32;
var nydata  = 32;                 
var myarray = Array(nxdata);      
var mytable = Array(nxdata * nydata);
var socket = io();
var count  = 0;

window.addEventListener("load", init);

function init() {
// anything you wish
}

function emitParticles(myarray) {
  for (var ix = 0; ix < nxdata; ix++) {
    mytable[ix] = myarray[ix % 10] - 48;
  }
  for (var iy = nydata - 1; iy > 0; iy--) {
    for (var ix = 0; ix < nxdata; ix++) {
      mytable[ix + nxdata * iy] = mytable[ix + nxdata * (iy - 1)];
    }
  }

  var canvas = document.getElementById('myCanvas');
  var ctx    = canvas.getContext('2d');
  for (var iy = 0; iy < nydata; iy++) {
    for (var ix = 0; ix < nxdata; ix++) {
      ctx.beginPath();
      var h         = (360 / 10) * mytable[ix + nxdata * iy] % 360;
      var hsl       = 'hsl(' + h.toString() + ', 100%, 50%)';
      ctx.fillStyle = hsl;
      ctx.arc(ix * (800 / nxdata), iy * (800 / nydata), 400 / nydata, 0,
              2 * Math.PI, true);
      ctx.fill();
    }
  }
}

socket.on('time', function(data) {
  myarray = data.buffer;
  emitParticles(myarray);
});
</script>
</head><body>
    <canvas id="myCanvas" width="800" height="800" style="background:white;">
    </canvas>
    <p id='messages'></p>
</body>
</html>
Posted on

IC-7410の制御をhttpで（２）

VFO周波数は、リモートホストによって１秒間に数回読み出され、ブラウザにプッシュされます。

remote host % node index.js

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
var SerialPort = require('serialport');
var serial = new SerialPort('/dev/ttyUSB0',{
    baudrate:19200
});

const bufa = new Buffer('fefe80e017'          , 'hex'); // preamble
const bufz = new Buffer('fd'                  , 'hex'); // postamble
const buf1 = new Buffer('fefe80e0174351fd'    , 'hex'); // CQ
const buf2 = new Buffer('fefe80e01751525a3ffd', 'hex'); // QRZ?
const buf3 = new Buffer('fefe80e003fd'        , 'hex'); // read freq

http.listen(3000,function(){
    console.log('now listening to the port 3000..');
});

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

serial.on('open',function(){
    console.log('serial port /dev/ttyUSB0 is opened.');
    serial.write(buf3);
});

serial.on('data',function(data){
    console.log('received data: ', data);
    if (data[3] == 0x80 &data[4] == 0x03) {
        console.log('received data: ', data[5], data[6], data[7], data[8]);
	var f10   = data[5]>>4 & 0x0f;
	var f1    = data[5]    & 0x0f;
	var f1k   = data[6]>>4 & 0x0f;
	var f100  = data[6]    & 0x0f;
	var f100k = data[7]>>4 & 0x0f;
	var f10k  = data[7]    & 0x0f;
	var f10m  = data[8]>>4 & 0x0f;
	var f1m   = data[8]    & 0x0f;
	var freq  = f10m.toString()+f1m.toString()+","+f100k.toString()+f10k.toString()+f1k.toString()+"."+f100.toString()+f10.toString()+f1+" kHz";
	console.log('freq: ' + freq);
        io.emit('recvmsg', 'VFO A: ' + freq);
    }
});

serial.on('error', function(err) {
  console.log('Error: ', err.message);
})

io.on('connection', function(socket){
    socket.on('message1', function(){
    serial.write(buf1);
  });
    socket.on('message2', function(){
    serial.write(buf2);
  });
  socket.on('your message', function(msg){
    serial.write(bufa);
    serial.write(msg);
    serial.write(bufz);
    io.emit('your message', msg);
  });
});

function sendTime() {
    serial.write(buf3);
}
setInterval(sendTime, 200);

index.html

<!doctype html>
<html>
  <head>
    <title>IC-7410 Rig Control</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 80%; margin-right: .5%; }
      form button { width: 15%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
      #messages { font-size: 2em }
      #frequency { position: fixed; top: 10px; left: 200px; font-size: 2em }
    </style>
  </head>
  <body>
    <button id="btn1"><font size="5">CQ</font></button>
    <button id="btn2"><font size="5">QRZ?</font></button>
    <div id="frequency"></div>
    <div id="messages"></div>

    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

    <script>
        var socket = io();
        $('#btn1').click(function(){
            socket.emit('message1');
        });
        $('#btn2').click(function(){
            socket.emit('message2');
        });
        socket.on('recvmsg',function(data){
            $('h1').text(data);
        });
    </script>

    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(){
          socket.emit('your message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('your message', function(msg){
          $('#messages').append($('<div>').text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
        socket.on('recvmsg', function(msg){
	  document.getElementById("frequency").innerHTML = msg;
        });
      });
    </script>
  </body>
</html>
Posted on

setInterval

ウォーターフォールを描画するためには、ホストからブラウザに、例えば一定間隔でデータを送る必要があります。

remote host % node index.js

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);

function sendTime() {
    io.emit('time', { message: 'test: ', number: count++ });
}

setInterval(sendTime, 5000);
app.listen(3000);

index.html

<!doctype html>
<html>
    <head>
        <script src='/socket.io/socket.io.js'></script>
        <script>
            var socket = io();
            socket.on('time', function(data) {
                addMessage(data.message + data.number);
            });
            function addMessage(message) {
                var text = document.createTextNode(message),
                    el = document.createElement('div'),
                    messages = document.getElementById('messages');
                el.appendChild(text);
                messages.appendChild(el);
            }
        </script>
    </head>
    <body>
        <h1>Test: setInterval</h1>
        <p id='messages'></p>
    </body>
</html>
Posted on

ウォーターフォールをパーティクルで

ウォーターフォールを描画する１つの方法は、パーティクルを使うことです。このサイト
http://spinorlab.matrix.jp/mytest4.html
を訪問すれば、デモを見ることができます。

約6,800個のパーティクルが、600 x 400画素のイメージのために使われています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
    window.addEventListener("load", init);
    function init() {
      var stage = new createjs.Stage("myCanvas");
      var particles = [];
      createjs.Ticker.setFPS(30);
      createjs.Ticker.addEventListener("tick", handleTick);
      function handleTick(event) {
        emitParticles();
        updateParticles();
        stage.update();
      }
      function emitParticles() {
        for (var i = 0; i < 100; i++) {
          var particle = new createjs.Shape();
          particle.graphics
                  .beginFill(createjs.Graphics.getHSL((i*3.6+20*Math.random())%360, 100, 50))
                  .drawCircle(0, 0, 2);
          stage.addChild(particle);
          particle.compositeOperation = "darker";
          particle.x  = i * 6 + 3;
          particle.y  = 0;
          particle.vy = 6;
          particle.life = 400/6 - 1;
          particles.push(particle);
        }
      }
      function updateParticles() {
        for (var i = 0; i < particles.length; i++) {
          var particle = particles[i];
          particle.y += particle.vy;
          if (particle.life-- <= 0) {
            stage.removeChild(particle);
            particles.splice(i, 1);
          }
        }
      }
    }
  </script>
</head>

<body>
  <canvas id="myCanvas"
          width="600"
          height="400"
          style="background:black;">
  </canvas>
</body>
</html>
Posted on

IC-7410の制御をhttpで

CWのメッセージ（固定文もしくは任意文）を、あなたのローカルPCから、リモートホストに接続されたIC-7410に送信します。

remote host % node index.js

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
var SerialPort = require('serialport');
var serial = new SerialPort('/dev/ttyUSB0',{
    baudrate:19200
});

const buf1 = new Buffer('fefe80e0174351fd'    , 'hex'); // CQ
const buf2 = new Buffer('fefe80e01751525a3ffd', 'hex'); // QRZ?
const buf3 = new Buffer('fefe80e017'          , 'hex'); // preamble
const buf4 = new Buffer('fd'                  , 'hex'); // postamble

http.listen(3000,function(){
    console.log('now listening to the port 3000..');
});

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

serial.on('open',function(){
    console.log('serial port /dev/ttyUSB0 is opened.');
});

io.on('connection', function(socket){
    socket.on('message1', function(){
    serial.write(buf1);
  });
    socket.on('message2', function(){
    serial.write(buf2);
  });
  socket.on('your message', function(msg){
    serial.write(buf3);
    serial.write(msg);
    serial.write(buf4);
    io.emit('your message', msg);
  });
});

index.html

<!doctype html>
<html>
  <head>
    <title>IC-7410 Rig Control</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
    </style>
  </head>
  <body>
    <h1>IC-7410 Rig Control</h1>
    <button id="btn1">CQ</button>
    <button id="btn2">QRZ?</button>
    <ul id="messages"></ul>

    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

    <script>
        var socket = io();
        $('#btn1').click(function(){
            socket.emit('message1');
        });
        $('#btn2').click(function(){
            socket.emit('message2');
        });
        socket.on('recvmsg',function(data){
            $('h1').text(data);
        });
    </script>

    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(){
          socket.emit('your message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('your message', function(msg){
          $('#messages').append($('<li>').text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
      });
    </script>
  </body>
</html>
Posted on

Node.JSとSocket.IOとsocket.io-serialport

socket.io-serailportを用いれば、あなたは容易にCV-Iコマンドをあなたのリグに送ることができます。

var app  = require('express')();
var http = require('http').Server(app);
var io   = require('socket.io')(http);
var SerialPort = require('serialport');
var serial = new SerialPort('/dev/ttyUSB0',{
    baudrate:19200
});

//send CW message, "CQ de JH1OOD"
const buf1 = new Buffer('fefe80e0174351204445204a48314f4f44fd', 'hex');
 
http.listen(3000,function(){
    console.log('now listening to the port 3000..');
});

serial.on('open',function(){
    console.log('serial port /dev/ttyUSB0 is opened.');
    serial.write(buf1);
});

serial.on('data',function(data){
	console.log(data);
});
Posted on

Node.JSとSocket.IO


Socket.IOは、イベントベースのリアルタイム双方向通信を可能にします。

このページ、https://socket.io/get-started/chat/は、非常に良い出発点になるでしょう。

私の意図としては、私のIC-7410制御プログラムを書き直して、ウェブベースのサービスを実現したいのです。