Как использовать websocket с сервером fadecandy для управления полосами вождения ws2812b

Question

Нам нужна помощь в том, как мы можем использовать websocket с сервером fadecandy для отображения 64 светодиодных полосок.

Это отображение в 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 очень красиво документирован и упакован примерами, и вы должны начать с этого.

С точки зрения управления полосой из 64 светодиодов из web-камер, играйте с mouse.html example. Пока ваш FadeCandy server работает, вы должны иметь возможность управлять 40 из 64 светодиодов с помощью мыши. Вы можете легко настроить пример, например 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'); 
     } 

Часть данных немного сложнее, но не сильно. Полные спецификации пакета FadeCandy для веб-рассылки доступны here, однако вы можете посмотреть функцию writeFrame() в примерах html, чтобы увидеть, как пиксели отбираются, а затем упаковываются и отправляются. version used in the ganzfeld example проще, поскольку он отправляет один цвет всем пикселям. Это может быть проще начать там, а затем перейти к изменению отдельных пикселей.

Что касается Java, FadeCandy имеет простой протокол, построенный поверх TCP, называемый OPC (Open Pixel Control). Самый простой способ начать можно с помощью Processing examples (в вашем случае strip64_dot, strip64_flames, strip64_unmapped поможет много)

Update Вот основной пример кода отправки первых 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 пиксельные данные