fadecandyサーバーでwebsocketを使用してws2812bのLEDストリップを操作する方法

Question

fadecandyサーバーでwebsocketを使用して64個のLEDストリップをマップする方法については、ヘルプが必要です。

これはfadecandyサーバーでのマッピング

Server構成JSONです：

{ 
    "listen": [ null, 7890 ], 
    "verbose": true, 
    "color": { 
     "gamma": 2.5, 
     "whitepoint": [ 0.7, 0.7, 0.7 ] 
    }, 
    "devices": [ 
     { 
      "type": "fadecandy", 
      "serial": "YSEELLIWMMPNTTUT", 
      "map": [ 
       [ 0, 0, 0, 60 ], 
       [ 0, 60, 64, 60 ], 
       [ 0, 120, 128, 60 ], 
       [ 0, 180, 192, 60 ], 
       [ 0, 240, 256, 60 ], 
       [ 0, 300, 320, 60 ], 
       [ 0, 360, 384, 60 ], 
       [ 0, 420, 448, 60 ] 
      ] 
     }, 
     { 
      "type": "fadecandy", 
      "serial": "IMOQHJFLPHOVWJUD", 
      "map": [ 
       [ 0, 480, 0, 60 ], 
       [ 0, 540, 64, 60 ], 
       [ 0, 600, 128, 60 ], 
       [ 0, 660, 192, 60 ], 
       [ 0, 720, 256, 60 ], 
       [ 0, 780, 320, 60 ], 
       [ 0, 840, 384, 60 ], 
       [ 0, 900, 448, 60 ] 
      ] 
     }, 
     { 
      "type": "fadecandy", 
      "serial": "KEEODXMCGEVDJHIZ", 
      "map": [ 
       [ 0, 960, 0, 60 ], 
       [ 0, 1020, 64, 60 ], 
       [ 0, 1080, 128, 60 ], 
       [ 0, 1140, 192, 60 ], 
       [ 0, 1200, 256, 60 ], 
       [ 0, 1260, 320, 60 ], 
       [ 0, 1320, 384, 60 ], 
       [ 0, 1380, 448, 60 ] 
      ] 
     } 
    ] 
} 

はどのようにしてのWebSocketにfadecandyサーバーマッピングを使用することができますか？

Answer 1

フェードキャンディは非常にうまく文書化されていて、例で詰め込まれています。

webSocketからの64個のLEDのストリップを制御する点に関しては、mouse.html exampleで遊んでください。 FadeCandy serverが実行されている限り、マウスの例で64個のledのうち40個を制御できるはずです。 あなたは簡単に、例を微調整することができますたとえばvar leds = 40;ためvar leds = 40;

重要な要素は、コードの一番下にあるになります。

1. FadeCandyデータパケットを送信するのWebSocketサーバ
2. への接続

最初の部分は簡単です：

var socket = new WebSocket('ws://localhost:7890'); 

     socket.onclose = function(event) { 
      console.log('Not connected to fcserver'); 
     } 
     socket.onopen = function(event) { 
      console.log('Connected'); 
     } 

データ部分は多少トリッキーですが、あまり大きくはありません。完全なwebsocket FadeCandyパケット仕様はhereで利用できますが、htmlサンプル内のwriteFrame()関数を見れば、ピクセルがどのようにサンプリングされ、パックされて送信されたかを見ることができます。 version used in the ganzfeld exampleは、すべてのピクセルに1つの色を送信するので簡単です。そこから始めてから、個々のピクセルの変更に進む方が簡単かもしれません。

Javaに関しては、FadeCandyには、TCPの上に構築された簡単なプロトコルがOPC (Open Pixel Control)と呼ばれています。ここでProcessing examplesを使用している可能性を開始する最も簡単な方法は（あなたのケースでstrip64_unmapped strip64_dot、strip64_flamesは、多くのことを助けます）

更新 は、ウェブカメラからFadeCandyに最初の64個の画素を送信する基本的なコードサンプルです：

var webcam; 
 
var fadeCandy; 
 
//how many LEDs are on the strip 
 
var leds = 64; 
 

 
function setup() { 
 
    createCanvas(390, 240); 
 
    //setup cam 
 
    webcam = createCapture(VIDEO); 
 
    //hide capture html element 
 
    webcam.hide(); 
 
    //setup FC 
 
    // Connect to a Fadecandy server running on the same computer, on the default port 
 
    fadeCandy = new WebSocket('ws://localhost:7890'); 
 
    fadeCandy.onclose = onFCClose(); 
 
    fadeCandy.onopen = onFCOpen(); 
 
} 
 

 
function draw() { 
 
    background(255); 
 
    image(webcam, 0, 0, 320, 240); 
 
    writeFrame(); 
 
} 
 
function onFCOpen(event){ 
 
    console.log("FadeCandy connected!"); 
 
    console.log(event); 
 
} 
 
function onFCClose(event){ 
 
    console.log("FadeCandy disconnected!"); 
 
    console.log(event); 
 
} 
 

 
//write frame to FadeCandy 
 
function writeFrame() { 
 
\t var packet = new Uint8ClampedArray(4 + leds * 3); 
 

 
\t if (fadeCandy.readyState != WebSocket.OPEN) { 
 
\t \t // The server connection isn't open. Nothing to do. 
 
\t \t return; 
 
\t } 
 

 
\t if (fadeCandy.bufferedAmount > packet.length) { 
 
\t \t // The network is lagging, and we still haven't sent the previous frame. 
 
\t \t // Don't flood the network, it will just make us laggy. 
 
\t \t // If fcserver is running on the same computer, it should always be able 
 
\t \t // to keep up with the frames we send, so we shouldn't reach this point. 
 
\t \t return; 
 
\t } 
 

 
// \t // Dest position in our packet. Start right after the header. 
 
\t var dest = 4; 
 

 
    //sample pixels 
 
\t webcam.loadPixels(); 
 
\t /* 
 
\t  sample pixels for each led 
 
\t  i = counter for the led 
 
\t  j = counter for pixel 
 
\t  the j counter is incremented by 4 -> 4 channels (red,green,blue,alpha) 
 
\t */ 
 
\t for(var i = 0,j = 0; i < leds; i++,j+= 4){ 
 
\t packet[dest++] = webcam.pixels[j]; 
 
\t packet[dest++] = webcam.pixels[j+1]; 
 
\t packet[dest++] = webcam.pixels[j+2]; 
 
\t } 
 
\t 
 
\t fadeCandy.send(packet.buffer); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/addons/p5.dom.min.js"></script>

あなたは、異なるピクセルをサンプリングすることもできますが、これはあなたにどのようにのアイデアを与える必要があります。

1. 接続WebSocketを介しFadeCandyに
2. 送信FadeCandy画素データ