Ähnliche Beiträge: The unglaubliche ᴏɴᴇʙɪᴛ:ɢᴀʟʟᴇʀʏ – the most minimalistic digital art gallery THE SOLAR CONSOLE quick balance board building with …
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waveshare e-Paper Simulator</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
margin: 20px;
color: #333;
}
h1 {
color: #1a202c;
margin-bottom: 10px;
font-size: 2em;
}
p {
margin-bottom: 20px;
color: #4a5568;
}
#canvasContainer {
margin: 20px 0;
border: 2px solid #a0aec0;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden; /* Sicherstellen, dass nichts über den Rand geht */
}
.controls {
display: flex;
flex-wrap: wrap; /* Ermöglicht Umbruch auf kleineren Bildschirmen */
gap: 15px;
margin-bottom: 25px;
justify-content: center;
}
textarea {
width: 90%;
max-width: 600px; /* Max. Breite für bessere Lesbarkeit */
height: 180px;
border: 1px solid #cbd5e0;
padding: 15px;
font-family: monospace;
font-size: 0.9em;
background-color: #f7fafc;
border-radius: 6px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
resize: vertical; /* Ermöglicht vertikales Ändern der Größe */
overflow: auto;
}
button {
padding: 12px 25px;
font-size: 1em;
cursor: pointer;
background-color: #4c51bf;
color: white;
border: none;
border-radius: 6px;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
button:hover {
background-color: #434190;
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
h1 {
font-size: 1.8em;
text-align: center;
}
p {
text-align: center;
padding: 0 10px;
}
#canvasContainer {
width: 100%; /* Volle Breite auf kleinen Bildschirmen */
box-sizing: border-box; /* Padding und Border berücksichtigen */
}
textarea {
width: calc(100% - 30px); /* 100% minus Padding */
}
.controls {
flex-direction: column; /* Buttons untereinander auf kleinen Bildschirmen */
align-items: center;
gap: 10px;
}
button {
width: 80%; /* Buttons nehmen mehr Platz ein */
max-width: 300px;
}
}
</style>
</head>
<body>
<h1>Waveshare 4.2" e-Paper Simulator</h1>
<p>Male auf der Zeichenfläche (Linksklick für Schwarz, Rechtsklick für Weiß). Klicke dann auf "Code generieren".</p>
<div id="canvasContainer"></div>
<div class="controls">
<button onclick="clearCanvas()">Löschen</button>
<button onclick="generateCode()">Code generieren</button>
</div>
<textarea id="outputCode" readonly placeholder="Generierter C-Array-Code erscheint hier..."></textarea>
<script>
let epdCanvas;
const EPD_WIDTH = 400;
const EPD_HEIGHT = 300;
let pixelSize = 1; // Größe eines Pixels auf dem Canvas. 1:1 Abbildung.
// Setup-Funktion von p5.js, wird einmal aufgerufen
function setup() {
epdCanvas = createCanvas(EPD_WIDTH * pixelSize, EPD_HEIGHT * pixelSize);
epdCanvas.parent('canvasContainer'); // Platziere den Canvas im Div
background(255); // Hintergrund weiß
noStroke(); // Keine Umrandung für die Pixel
pixelDensity(1); // Sicherstellen, dass jeder Canvas-Pixel einem Hardware-Pixel entspricht
}
// Draw-Funktion von p5.js, wird kontinuierlich aufgerufen
function draw() {
// Nur zeichnen, wenn die Maus gedrückt wird und innerhalb des Canvas ist
if (mouseIsPressed && mouseX >= 0 && mouseX < width && mouseY >= 0 && mouseY < height) {
// Berechne die x,y-Koordinate des Pixels basierend auf der Mausposition
let x = floor(mouseX / pixelSize);
let y = floor(mouseY / pixelSize);
// Bestimme die Farbe basierend auf dem Mausklick (links=schwarz, rechts=weiß)
let color = (mouseButton === LEFT) ? 0 : 255;
fill(color); // Setze die Füllfarbe
rect(x * pixelSize, y * pixelSize, pixelSize, pixelSize); // Zeichne ein Rechteck für den Pixel
}
}
// Wird aufgerufen, wenn eine Maustaste gedrückt wird
function mousePressed() {
// Verhindert das Standard-Kontextmenü beim Rechtsklick, damit man weiß zeichnen kann
if (mouseButton === RIGHT) {
return false;
}
}
// Setzt den Canvas zurück auf Weiß
function clearCanvas() {
background(255);
document.getElementById('outputCode').value = ''; // Löscht auch den generierten Code
}
// Generiert den C-Array-Code aus den Canvas-Pixeldaten
function generateCode() {
// Holt die aktuellen Pixeldaten des Canvas
let img = get();
img.loadPixels(); // Lädt die Pixel in das pixels-Array
let c_array_content = "const unsigned char IMAGE_DATA[] = {\n ";
let bytesPerLine = 50; // 400 Pixel / 8 Bit pro Byte = 50 Bytes pro Zeile
let byteCount = 0;
// Iteriert durch jede Zeile des Displays
for (let y = 0; y < EPD_HEIGHT; y++) {
// Iteriert durch jede 8-Pixel-Gruppe in einer Zeile (ein Byte)
for (let x = 0; x < EPD_WIDTH; x += 8) {
let byteValue = 0; // Das aktuelle Byte, das erstellt wird
// Iteriert durch die 8 Pixel, die ein Byte bilden
for (let i = 0; i < 8; i++) {
// Berechne den Index des Pixels im img.pixels-Array
// Jeder Pixel hat 4 Werte (RGBA), daher * 4
let pixelIndex = (y * EPD_WIDTH + (x + i)) * 4;
let r = img.pixels[pixelIndex]; // Den Rotwert des Pixels abrufen (Schwarz-Weiß-Bild, also ist R,G,B gleich)
let isBlack = (r < 128); // Bestimme, ob der Pixel als schwarz interpretiert wird (Schwellenwert 128)
if (isBlack) {
// Wenn der Pixel schwarz ist, setze das entsprechende Bit im Byte
// (7 - i) da Big-Endian-Format (MSB zuerst)
byteValue |= (1 << (7 - i));
}
}
// Füge das generierte Byte zum C-Array-String hinzu (hexadezimal formatiert)
c_array_content += `0x${byteValue.toString(16).toUpperCase().padStart(2, '0')}, `;
byteCount++;
// Nach bytesPerLine Bytes einen Zeilenumbruch für bessere Lesbarkeit einfügen
if (byteCount % bytesPerLine === 0) {
c_array_content += "\n ";
}
}
}
// Entferne das letzte Komma und Leerzeichen
c_array_content = c_array_content.slice(0, -2);
c_array_content += "\n};"; // Schließe den C-Array ab
// Gib den generierten Code im Textbereich aus
document.getElementById('outputCode').value = c_array_content;
}
</script>
</body>
</html>
