如何使用帶有fadecandy服務器的websocket來操作ws2812b led燈帶

Question

我們需要幫助我們如何使用帶有fadecandy服務器的websocket來映射64條led燈帶。

這是fadecandy服務器

服務器配置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 ] 
      ] 
     } 
    ] 
} 

我們如何使用fadecandy服務器映射到的WebSocket？

Answer 1

Fade Candy非常好地記錄和包裝的例子，你應該開始。

關於從webSockets控制64個LED燈條，玩mouse.html example。只要您的FadeCandy server正在運行，您應該能夠通過鼠標示例控制64個LED中的40個。 您可以輕鬆地調整的例子，例如var leds = 40;將成爲var leds = 40;

的關鍵要素是在代碼的底部：

1. 連接到WebSocket的服務器
2. 發送FadeCandy數據包

第一部分很簡單：

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比較簡單，因爲它向所有像素髮送一種顏色。從那裏開始可能會更簡單，然後進展到更改單個像素。

關於Java，FadeCandy有一個建立在TCP之上的簡單協議，稱爲OPC (Open Pixel Control)。

：開始可使用 Processing examples（你的情況strip64_dot，strip64_flames，strip64_unmapped將幫助很多）

更新 這是一個基本的代碼示例從攝像頭髮送的前64個像素FadeCandy最簡單的方法

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. 連接到FadeCandy經由的WebSockets
2. 發送FadeCandy像素數據