LED 64x32 HUB75 介面燈板是一種常見的顯示模組，主要用於顯示圖片、文字和動畫等。
顯示解析度：
顯示技術：
連接介面：
控制方式：
電源需求：
應用範圍：
其他特點：
DDLab P5A LED 燈板是古豆哥科技教育推出的 LED 燈板控制程式開發版。您可以透過 Arduino IDE 的開發介面，進行各式的 LED 燈光程式開發。透過豐富的範例程式，學校教師可0已經過適度的修改範例程式碼，協助學生進行燈板程式實習與廣告跑馬燈應用等實驗。
主要的範例程式有:
執行 Arduino IDE 編譯程式碼:
今日，我們使用第二個 Web Draw 無線即時繪圖範例程式來進行教學。針對範例程式做了一些修改:
# 簡單WebServer 程式
import socket
from machine import Pin, PWM
import wifi
from time import sleep
import os
import network
# 設定 WiFi 連線參數
SSID = 'DoraHome300M'
PASSWORD = '0975393503@'
# 其他主程式邏輯
# 例如：啟動網頁伺服器或其他應用
# 讀取 index.html 檔案的內容
def read_html_file():
try:
with open('webDraw.html', 'r') as file:
return file.read()
except Exception as e:
print("無法讀取 index.html 檔案:", e)
return "<h1>500 Internal Server Error</h1>"
# 建立套接字
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
print('伺服器啟動，等待連接...')
station = wifi.connect(SSID, PASSWORD)
while True:
cl, addr = s.accept()
print('客戶端連接來自', addr)
# 接收 HTTP 請求
request = cl.recv(1024)
print('請求內容:', request)
# 讀取並發送 index.html 檔案的內容
response = read_html_file()
cl.send('HTTP/1.1 200 OK\r\n')
cl.send('Content-Type: text/html\r\n')
cl.send('Connection: close\r\n\r\n')
cl.sendall(response)
# 關閉連接
cl.close()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玩學機網頁控制燈板畫圖程式 Web Drawing LED Panel</title>
<style type="text/css">
.divTable { display: table; }
.divTableRow { display: table-row; }
.divTableCell { border: 1px solid #444444; display: table-cell; height: 10px; width: 10px; }
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<h1>玩學機網頁控制 DDLab P5A 燈板即時繪圖程式</h1>
<hr />
<b>選擇顏色:</b>
<hr />
<input id="colorPicker" type="color" value="#ffffff">
<button id="clearButton">清除圖像 Clear</button>
<b> 連線到 DDLab P5A 燈板 IP 位址:</b>
<input type="text" id="IP" value="192.168.1.107">
<button id="connectButton">Connect</button>
<div class="divTable" style="border: 1px solid #000;">
<div class="divTableBody" id="divTableBody"></div>
</div>
<script type="text/javascript">
var exampleSocket;
var displayWidth = 64;
var displayHeight = 32;
function createGrid(columns, rows) {
var divTableBody = document.getElementById('divTableBody');
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
var row = document.createElement('div');
row.className = 'divTableRow';
row.setAttribute('data-ycord', rowIndex);
divTableBody.appendChild(row);
for (var columnIndex = 0; columnIndex < columns; columnIndex++) {
var cell = document.createElement('div');
cell.className = 'divTableCell unselectable';
cell.setAttribute('id', 'cell' + (rowIndex * columns + columnIndex));
cell.setAttribute('data-xcord', columnIndex);
cell.style.backgroundColor = 'rgb(0, 0, 0)';
cell.addEventListener('mousedown', handleMouseDown);
cell.addEventListener('mouseenter', handleMouseEnter);
row.appendChild(cell);
}
}
}
function handleMouseDown(e) {
if (e.buttons == 1) {
handleCellChange(this, document.getElementById('colorPicker').value);
} else if (e.buttons == 2) {
handleCellChange(this, "#000000");
}
}
function handleMouseEnter(e) {
if (e.buttons == 1) {
handleCellChange(this, document.getElementById('colorPicker').value);
} else if (e.buttons == 2) {
handleCellChange(this, "#000000");
}
}
function handleCellChange(element, colorVal) {
element.style.backgroundColor = colorVal;
sendWebsocketMessage(element, colorVal);
}
function sendWebsocketMessage(element, colorVal) {
var xCord = element.getAttribute('data-xcord');
var yCord = element.parentElement.getAttribute('data-ycord');
var convertedColour = convertColourToRGB565(colorVal);
var message = '0:' + xCord + ',' + yCord + ',0x' + convertedColour;
if (exampleSocket && exampleSocket.readyState === WebSocket.OPEN) {
exampleSocket.send(message);
} else {
console.error("WebSocket is not open.");
}
}
function convertColourToRGB565(colour) {
var r = parseInt(colour.slice(1, 3), 16);
var g = parseInt(colour.slice(3, 5), 16);
var b = parseInt(colour.slice(5, 7), 16);
var colourInt = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
return colourInt.toString(16).padStart(4, '0').toUpperCase();
}
document.getElementById("clearButton").addEventListener("click", function() {
if (exampleSocket && exampleSocket.readyState === WebSocket.OPEN) {
exampleSocket.send("CLEAR");
}
var cells = document.getElementsByClassName('divTableCell');
for (var i = 0; i < cells.length; i++) {
cells[i].style.backgroundColor = "rgb(0, 0, 0)";
}
});
document.getElementById("connectButton").addEventListener("click", function() {
var ipAddress = document.getElementById("IP").value;
exampleSocket = new WebSocket("ws://" + ipAddress + ":81");
exampleSocket.onopen = function () {
console.log("Connected to " + ipAddress);
};
exampleSocket.onclose = function () {
console.log("Disconnected from " + ipAddress);
};
exampleSocket.onerror = function (error) {
console.error("WebSocket Error: ", error);
};
});
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
createGrid(displayWidth, displayHeight);
});
function rgbToHex(rgb) {
var result = rgb.match(/\d+/g);
var r = parseInt(result[0]).toString(16).padStart(2, '0');
var g = parseInt(result[1]).toString(16).padStart(2, '0');
var b = parseInt(result[2]).toString(16).padStart(2, '0');
return '#' + r + g + b;
}
</script>
</body>
</html>
iThome鐵人賽
看影片追技術