C3MA/LED-BOARD
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compiling

Browse Source
This commit is contained in:
Ollo 2023-04-24 21:52:33 +02:00
parent e711668f90
commit 0c7b6b9e16
6 changed files with 121 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

385
WebGUI.html
View File

@ -1,385 +0,0 @@
<!DOCTYPE html>
<html lang=de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LED Board</title>
<style>
body {background-color: #ccc; margin: 0; padding: 0; text-align: center;}
input {background-color: #ccc; border-radius: 2px;}
.menu { background-color: rgb(4, 0, 59); color: #ccc; padding: 1.2em; width: 100%; box-sizing: border-box; margin-bottom: 1em;}
.btn { background-color: #005; border-radius: 2px; color:#ccc; box-shadow: 5px, 5px, 5px, #000; padding: 5px;}
</style>
</head>
<body>
<div class="menu">
IP: <input type="text" id="ip" value="10.23.42.24">
<div style="width: 2em; display: inline-block;" ></div>
Port: <input type="text" id="port" value="81" style="width: 2.5em;">
<div style="width: 2em; display: inline-block;" ></div>
Panel width: <input type="text" id="width" value="32" style="width: 2.5em;" onchange="creatGUI()">
height: <input type="text" id="height" value="40" style="width: 2.5em;" onchange="creatGUI()">
<div style="width: 1em; display: inline-block;" ></div>
Connection state: <div id="connectionState" onclick="toggleConnection()" style="background-color: red; display: inline-block; width: 1em; height: 1em; border-radius: 0.5em;"></div>
</div>
<input class="btn" type="button" value="clear" onclick="clearCanvas()">
<input type="file" id="fileupload" value="upload file" style="display: none;" />
<label class="btn" for="fileupload">upload a file</label>
<br />
<canvas id="can" style="background-color:#000; margin: 1em;"></canvas> <br />
<textarea id="textInput"></textarea><br />
<input type="button" value="print" onclick="textInputChanged()" />
<script type="text/javascript">
var socket;
document.onload = openWebSocket();
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
var canvas, ctx = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dragMode = false;
var onColor = "#fd0";
var offColor = "#310";
var pixelBuffer = new Array(0);
var scaling;
var xMax, yMax;
var changeFlag = false;
var frameRate = 3; //frames per second
creatGUI();
setTimeout(frameRefresh, 1000 / frameRate);
function openWebSocket()
{
ip = document.getElementById('ip').value;
port = document.getElementById('port').value;
panelWidthElement = document.getElementById('width');
panelHeightElement = document.getElementById('height');
displayView = document.getElementById("can");
console.log("connect to " + ip + ":" + port);
socket = new WebSocket('ws://' + ip + ':'+port+'', ['arduino']);
socket.onopen = function ()
{
console.log('connected');
document.getElementById('connectionState').style.backgroundColor = "#3d3";
};
socket.onerror = function (error)
{
console.log('WebSocket Error ', error);
document.getElementById('connectionState').style.backgroundColor = "#dd3";
};
socket.onclose = function ()
{
console.log('WebSocket connection closed');
document.getElementById('connectionState').style.backgroundColor = "#d33";
};
}
function frameRefresh()
{
if(changeFlag==true && socket.readyState === WebSocket.OPEN)
{
changeFlag = false;
sendPixelBuffer();
console.log("refreshed");
}
setTimeout(frameRefresh, 1000 / frameRate);
}
function toggleConnection()
{
if(socket.readyState === WebSocket.CLOSED)
{
openWebSocket();
}
else
{
socket.close();
}
}
function sendPixelBuffer()
{
header = new Uint8Array(6);
header[0] = Math.floor(xMax / 255);
header[1] = xMax % 255;
header[2] = Math.floor(yMax / 255);
header[3] = yMax % 255;
header[4] = 0;
header[5] = 0;
socket.send(header);
buf = new Uint8Array((xMax * yMax) / 8);
group = 0;
n = 0;
shift = 7;
for (pixel of pixelBuffer) {
group |= (pixel << shift);
shift--;
if (shift < 0) {
buf[n] = group;
group = 0;
shift = 7;
n++;
}
}
socket.send(buf);
}
function creatGUI()
{
scaling = 10;//(document.width / 2) / panelWidthElement.value;
xMax = panelWidthElement.value;
yMax = panelHeightElement.value;
displayView.width = panelWidthElement.value*scaling;// + "px";
displayView.height = panelHeightElement.value*scaling;// + "px";
pixelBuffer = new Uint8Array(xMax*yMax);
initCanvas();
}
function clearCanvas()
{
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, displayView.width, displayView.height);
for(x = 0; x < xMax; x++)
{
for(y = 0; y < yMax; y++)
{
pixelBuffer[x, xMax*y] = 0;
drawDot(x*scaling+1, y*scaling +1, true);
}
}
}
function initCanvas() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
clearCanvas();
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
drawDot(currX, currY);
dragMode = true;
}
if (res == 'up' || res == "out") {
dragMode = false;
}
if (res == 'move') {
if (dragMode) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
drawDot(currX, currY);
}
}
}
function drawDot(x, y, forceOff=false)
{
x = Math.floor(x / scaling);
y = Math.floor(y / scaling);
if((pixelBuffer[x+xMax*y] == 0 || dragMode==true) && forceOff==false)
{
ctx.fillStyle = onColor;
if(pixelBuffer[x+xMax*y] != 1)
{
changeFlag = true;
}
pixelBuffer[x+xMax*y] = 1;
}
else
{
ctx.fillStyle = offColor;
if(pixelBuffer[x+xMax*y] != 0)
{
changeFlag = true;
}
pixelBuffer[x+xMax*y] = 0;
}
ctx.beginPath();
ctx.arc(x * scaling + scaling/2, y * scaling + scaling/2, scaling/2, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
}
function displayBufferContent()
{
dragMode = true;
for(x = 0; x < xMax; x++)
{
for(y = 0; y < yMax; y++)
{
if(pixelBuffer[x + xMax*y] != 0)
{
drawDot(x*scaling+1, y*scaling +1);
}
else
{
drawDot(x*scaling+1, y*scaling +1, true);
}
}
}
dragMode = false;
changeFlag = true;
}
//====================================================================
//========= image upload functione... ==========
//====================================================================
document.getElementById("fileupload").addEventListener('change', imageChanged, false);
hiddenCanvas = document.createElement("canvas");
hiddenCtx = hiddenCanvas.getContext('2d');
function imageChanged(evt)
{
var file = evt.target.files[0];
if (!file.type.match('image.*'))
{
alert("wrong file format");
return;
}
var reader = new FileReader();
reader.onload = function (event)
{
var img = new Image();
img.src = event.target.result;
img.onload = function()
{
width = img.width;
height = img.height;
if (width > height)
{
if (width > xMax)
{
height *= xMax / width;
width = xMax;
}
}
else
{
if (height > yMax)
{
width *= yMax / height;
height = yMax;
}
}
hiddenCanvas.width = width;
hiddenCanvas.height = height;
hiddenCtx.drawImage(img, 0, 0, width, height);
showHiddenCanvas();
}
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
function showHiddenCanvas()
{
var threasholdRGB = 200;
var threasholdAlpha = 100;
for(var y = 0; y < yMax; y++)
{
for(var x = 0; x < xMax; x++)
{
var p = hiddenCtx.getImageData(x, y, 1, 1).data;
if((p[0] < threasholdRGB || p[1] < threasholdRGB || p[2] < threasholdRGB) && p[3] > threasholdAlpha)
{
pixelBuffer[x+xMax*y] = 1;
}
else
{
pixelBuffer[x+xMax*y] = 0;
}
}
}
displayBufferContent();
}
function printText(texttodraw)
{
hiddenCanvas.width = xMax;
hiddenCanvas.height = yMax;
var lines = texttodraw.split('\n');
hiddenCtx.clearRect(0, 0, hiddenCanvas.width, hiddenCanvas.height);
hiddenCtx.font = '10px Verdana';
hiddenCtx.textBaseline="top";
var lineheight = 10;
for (var j = 0; j<lines.length; j++)
{
hiddenCtx.fillText(lines[j], 0, 0 + (j*lineheight));
}
showHiddenCanvas();
}
function textInputChanged()
{
var text = document.getElementById("textInput").value;
printText(text);
}
</script>
</body>
</html>

199
src/LED-Board.cpp
View File

@ -1,117 +1,121 @@
#include <Arduino.h>
#include <Ethernet.h>
#include <EthernetUdp.h>
#include "src/WebSocketsServer.h"
#include "src/image.hpp"
#include "src/panel.hpp"
#include "src/ProtocolDL.hpp"
#include "image.hpp"
#include "panel.hpp"
#define USE_SERIAL Serial
// An EthernetUDP instance to let us send and receive packets over UDP
EthernetUDP Udp;
byte mac[] = { 0xBE, 0xB7, 0x5C, 0x30, 0xC3, 0x04 };
IPAddress ip(10, 23, 42, 24);
IPAddress router(10, 23, 42, 1);
IPAddress subnet(255, 255, 254, 0);
WebSocketsServer webSocket = WebSocketsServer(81);
Image image;
Panel panel1(22, 24, 23, 0 * PANEL_WIDTH, 0 * PANEL_HEIGHT); //data, clock, load
Panel panel2(28, 29, 31, 1 * PANEL_WIDTH, 0 * PANEL_HEIGHT);
ProtocolDL protocol = ProtocolDL(image);
Panel panel1(23, 27, 25, 0 * PANEL_WIDTH, 0 * PANEL_HEIGHT); //data, clock, load
Panel panel2(29, 33, 31, 1 * PANEL_WIDTH, 0 * PANEL_HEIGHT);
Panel panel3(35, 39, 37, 2 * PANEL_WIDTH, 0 * PANEL_HEIGHT);
Panel panel4(41, 45, 43, 3 * PANEL_WIDTH, 0 * PANEL_HEIGHT);
Panel panel5(47, 53, 49, 4 * PANEL_WIDTH, 0 * PANEL_HEIGHT);
#define BITS_OF_BYTE 8
unsigned long last_activity = 0;
#define UDP_IMAGE_PORT 4242
/**
* 800 Byte describing all 5 panels in bits
*/
/* uint8_t packetBuffer[(PANEL_WIDTH * PANEL_HEIGHT * MAXIMUM_PANELSIZE) / sizeof(uint8_t)]; // buffer to hold incoming packet,*/
uint8_t packetBuffer[(PANEL_WIDTH * PANEL_HEIGHT * MAXIMUM_PANELSIZE) / BITS_OF_BYTE];
/* Reply with error messages*/
char ReplyBuffer[UDP_TX_PACKET_MAX_SIZE]; // a string to send back
bool someOneIsConnected = false;
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
static bool in_header = true;
switch(type) {
case WStype_DISCONNECTED:
USE_SERIAL.print("[");
USE_SERIAL.print(num);
USE_SERIAL.println("] Disconnected!");
someOneIsConnected = false;
break;
case WStype_CONNECTED:
{
//IPAddress ip = webSocket.remoteIP(num);
USE_SERIAL.print("[");
USE_SERIAL.print(num);
USE_SERIAL.print("] Connected ");
USE_SERIAL.print(" url: ");
//USE_SERIAL.println(payload);
// send message to client
webSocket.sendTXT(num, "Connected");
someOneIsConnected = true;
}
break;
case WStype_TEXT:
USE_SERIAL.print("[");
USE_SERIAL.print(num);
USE_SERIAL.print("] get Text: ");
//USE_SERIAL.println(payload);
// send message to client
// webSocket.sendTXT(num, "message here");
// send data to all connected clients
// webSocket.broadcastTXT("message here");
break;
case WStype_BIN:
USE_SERIAL.print("[");
USE_SERIAL.print(num);
USE_SERIAL.print("] get binary length: ");
USE_SERIAL.println(length);
for(uint16_t i = 0; i < length; i++)
{
protocol.newByte(payload[i]);
}
/*FIXME hande image
if(protocol.isComplete())
{
Serial.println("complete");
panel1.send_image(&image);
panel2.send_image(&image);
panel3.send_image(&image);
panel4.send_image(&image);
panel5.send_image(&image);
}
break;
}
*/
void receiveUDP() {
int packetSize = Udp.parsePacket();
if (packetSize) {
Serial.print("Received packet of size ");
Serial.println(packetSize);
Serial.print("From ");
IPAddress remote = Udp.remoteIP();
for (int i=0; i < 4; i++) {
Serial.print(remote[i], DEC);
if (i < 3) {
Serial.print(".");
}
}
Serial.print(", port ");
Serial.println(Udp.remotePort());
if (packetSize < ((int) sizeof(packetBuffer)) ) {
// read the packet into packetBufffer
Udp.read(packetBuffer, UDP_TX_PACKET_MAX_SIZE);
}
if (packetSize == sizeof(packetBuffer)) {
} else {
sprintf(ReplyBuffer, "Wrong packet size %d", packetSize);
// send a reply to the IP address and port that sent us the packet we received
Udp.beginPacket(Udp.remoteIP(), Udp.remotePort());
Udp.write(ReplyBuffer);
Udp.endPacket();
}
}
}
void setup() {
// USE_SERIAL.begin(921600);
USE_SERIAL.begin(115200);
//Serial.setDebugOutput(true);
//USE_SERIAL.setDebugOutput(true);
Ethernet.init(10);
Ethernet.begin(mac, ip, router, router, subnet);
USE_SERIAL.println();
USE_SERIAL.println();
USE_SERIAL.println();
for(uint8_t t = 4; t > 0; t--) {
USE_SERIAL.print("[SETUP] BOOT WAIT ");
USE_SERIAL.print(t);
USE_SERIAL.println("...");
USE_SERIAL.flush();
delay(1000);
}
webSocket.begin();
webSocket.onEvent(webSocketEvent);
Serial.begin(115200);
panel1.init();
panel2.init();
panel3.init();
panel4.init();
panel5.init();
Serial.print(F("Activate all LEDs\r\n"));
for (int x = 0; x < IMAGE_WIDTH; x++) {
for (int y = 0; y < IMAGE_HEIGHT; y++) {
image.set_pixel(x, y, 1);
}
}
panel1.send_image(&image);
panel2.send_image(&image);
panel3.send_image(&image);
panel4.send_image(&image);
panel5.send_image(&image);
Serial.println("setup done");
Ethernet.init();
Ethernet.begin(mac);
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
if (Ethernet.hardwareStatus() == EthernetNoHardware) {
Serial.println(F("Ethernet shield was not found. Sorry, can't run without hardware. :("));
} else if (Ethernet.linkStatus() == LinkOFF) {
Serial.println(F("Ethernet cable is not connected."));
}
// no point in carrying on, so do nothing forevermore:
while (true) {
delay(1);
}
}
Serial.print(F("My IP address: "));
Serial.println(Ethernet.localIP());
// start UDP
Udp.begin(UDP_IMAGE_PORT);
}
@ -119,30 +123,33 @@ void setup() {
// 0x00 0x00 0x00 0x00 0x00 0x00 0x00...
// Width Height Delay Pixel
void default_image(Image* p) {
void default_image(Image* i) {
static int offset = 0;
// reset image to maximum size
p->set_size(32767, 32767);
// maximum size of image defined in constructor
// toggle all pixels in tilted bars
int dim = max(p->getWidth(), p->getHeight());
int dim = max(IMAGE_WIDTH, IMAGE_HEIGHT);
for (int n = 0; n < dim; n++) {
int x = (n + offset) % p->getWidth();
int y = n % p->getHeight();
int x = (n + offset) % IMAGE_WIDTH;
int y = n % IMAGE_HEIGHT;
byte pixel = p->get_pixel(x, y);
p->set_pixel(x, y, !pixel);
byte pixel = i->get_pixel(x, y);
i->set_pixel(x, y, !pixel);
}
offset++;
}
void loop() {
webSocket.loop();
receiveUDP();
delay(10);
if (someOneIsConnected == false) {
default_image(&image);
panel1.send_image(&image);
panel2.send_image(&image);
panel3.send_image(&image);
panel4.send_image(&image);
panel5.send_image(&image);
Serial.println(F(".\n"));
}
}

25
src/image.cpp
View File

@ -6,7 +6,7 @@ bool Image::check_bounds(int x, int y) {
return false;
}
if ((x >= width) || (y >= height)) {
if ((x >= IMAGE_WIDTH) || (y >= IMAGE_HEIGHT)) {
return false;
}
@ -15,33 +15,20 @@ bool Image::check_bounds(int x, int y) {
byte Image::get_pixel(int x, int y) {
if (check_bounds(x, y) == false) {
return 0;
Serial.print(F("get_pixel outOfBound\n"));
return 1;
}
return data[y * width + x];
return data[y * IMAGE_WIDTH + x];
}
void Image::set_pixel(int x, int y, byte value) {
if (check_bounds(x, y) == false) {
Serial.print(F("set_pixel outOfBound\n"));
return;
}
data[y * width + x] = value;
data[y * IMAGE_WIDTH + x] = value;
}
void Image::clear_pixels() {
memset(data, 0, sizeof(data));
}
void Image::set_size(int w, int h) {
width = min(w, MAX_WIDTH);
height = min(h, MAX_HEIGHT);
}
uint16_t Image::getWidth()
{
return width;
}
uint16_t Image::getHeight()
{
return height;
}

19
src/image.hpp
View File

@ -3,25 +3,24 @@
#include <Arduino.h>
#define MAX_WIDTH 64
#define MAX_HEIGHT 40
#define MAXIMUM_PANELSIZE 5
#define PANEL_WIDTH 32
#define PANEL_HEIGHT 40
#define IMAGE_WIDTH (PANEL_WIDTH * MAXIMUM_PANELSIZE)
#define IMAGE_HEIGHT PANEL_HEIGHT
class Image
{
public:
byte get_pixel(int x, int y);
void set_pixel(int x, int y, byte value);
uint8_t get_pixel(int x, int y);
void set_pixel(int x, int y, uint8_t value);
void clear_pixels();
void set_size(int w, int h);
uint16_t getWidth();
uint16_t getHeight();
private:
bool check_bounds(int x, int y);
int width;
int height;
byte data[MAX_WIDTH * MAX_HEIGHT];
uint8_t data[IMAGE_WIDTH * IMAGE_HEIGHT];
};

3
src/panel.cpp
View File

@ -15,6 +15,7 @@ void Panel::init()
pinMode(pinData, OUTPUT);
pinMode(pinClock, OUTPUT);
pinMode(pinLoad, OUTPUT);
Serial.println(F("Panel init"));
}
void Panel::send_image(Image* img) {
@ -23,7 +24,7 @@ void Panel::send_image(Image* img) {
for (int y = posY; y < endY; y += 8) {
for (int x = posX; x < endX; x += 4) {
send_block(img, x, y);
send_block(img, x, y);
}
}

2
src/panel.hpp
View File

@ -3,8 +3,6 @@
#include "image.hpp"
#define PANEL_WIDTH 32
#define PANEL_HEIGHT 40
class Panel
{