Wie man WebSocket mit fadecandy Server benutzt, um ws2812b LED-Streifen zu manipulieren

Question

Wir brauchen Hilfe, wie wir Websocket mit fadecandy Server benutzen können, um 64 geführte Streifen abzubilden.

Dies ist die Abbildung in fadecandy Server

Server-Konfiguration 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 ] 
      ] 
     } 
    ] 
} 

Wie können wir die fadecandy Server Zuordnung zum websocket verwenden?

Answer 1

Fade Candy ist sehr schön dokumentiert und mit Beispielen gepackt und Sie sollten damit beginnen.

In Bezug auf die Steuerung eines Streifens von 64 LEDs von webSockets, spielen Sie mit der mouse.html example. Solange Ihre FadeCandy server läuft, sollten Sie 40 der 64 LEDs mit dem Maus-Beispiel steuern können. Sie können ganz einfach das Beispiel optimieren, zum Beispiel var leds = 40;var leds = 40;

Die Schlüsselelemente sind am unteren Rande des Codes werden werden:

1. Verbindung mit dem websocket Server
2. Senden FadeCandy Datenpakete

Der erste Teil ist einfach:

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

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

Der Datenteil ist etwas trickreich, aber nicht viel. Die vollständigen WebSocket-FadeCandy-Paketspezifikationen sind verfügbar here, jedoch können Sie die writeFrame()-Funktion innerhalb der HTML-Beispiele betrachten, um zu sehen, wie Pixel abgetastet, dann gepackt und gesendet werden. Die version used in the ganzfeld example ist einfacher, da sie eine Farbe an alle Pixel sendet. Es könnte einfacher sein, dort zu beginnen und dann mit dem Ändern einzelner Pixel fortzufahren.

In Bezug auf Java hat FadeCandy ein einfaches Protokoll, das auf dem TCP-Code OPC (Open Pixel Control) basiert. Der einfachste Weg, um die Processing examples mit (in Ihrem Fall strip64_dot, strip64_flames wird viel strip64_unmapped helfen) kann zu beginnen, ist ein Beispiel für ein einfaches Code

aktualisieren Hier die ersten 64 Pixel von der Webcam FadeCandy Senden:

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>

Sie möchten Pixel anders probieren, aber das sollte Ihnen eine Vorstellung davon, wie man:

1. Connect zu FadeCandy über WebSockets
2. senden FadeCandy Pixeldaten