From c2f027f18fe768258ee01a8702b37ffad066e4f9 Mon Sep 17 00:00:00 2001 From: gitProtogen Date: Fri, 6 Feb 2026 11:16:31 +0100 Subject: [PATCH] simple designed achived --- index.h | 73 +++++++++++++++++++++++++++++++++++++++++++++++++--- ledy.ino | 18 +++++++++++++ prototypes.h | 1 + server.ino | 64 ++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 150 insertions(+), 6 deletions(-) diff --git a/index.h b/index.h index ed1bc56..961bcf8 100644 --- a/index.h +++ b/index.h @@ -126,6 +126,28 @@ const char index_html[] PROGMEM = R"rawliteral( + +

Add Text Node (Full Control)

void addNewTextNode(char text[TEXT_MAX_LENGTH + 1], uint32_t color, bool handle_pos_via_cursor = true, short pos_x = 0, short pos_y = 0, unsigned char scroll_slowness = 1, bool is_scrolling = true, bool is_small = true, short disappear_time = -1)
@@ -323,11 +345,17 @@ const char index_html[] PROGMEM = R"rawliteral( nodesList.innerHTML = ''; for (var i = 0; i < nodes.length; i++) { var node = nodes[i]; - var color = '#' + ('000000' + node.color.toString(16)).slice(-6); var nodeDiv = document.createElement('div'); nodeDiv.className = 'node-item'; - nodeDiv.innerHTML = 'ID: ' + node.id + ', Text: ' + node.text + ', Color: ' + color + '' + - ''; + if (node.type === 'text') { + var color = '#' + ('000000' + node.color.toString(16)).slice(-6); + nodeDiv.innerHTML = 'ID: ' + node.id + ', Text: ' + node.text + ', Color: ' + color + '' + + ''; + } else if (node.type === 'multi-color') { + var colorsStr = node.colors.map(c => '#' + ('000000' + ((c.r << 16) | (c.g << 8) | c.b).toString(16)).slice(-6)).join(','); + nodeDiv.innerHTML = 'ID: ' + node.id + ', Text: ' + node.text + ', Type: Multi-Color' + + ''; + } nodesList.appendChild(nodeDiv); } } @@ -348,10 +376,49 @@ const char index_html[] PROGMEM = R"rawliteral( document.getElementById('modify-modal').style.display = "none"; } + function populateMultiColorModifyForm(id, colors, text) { + document.getElementById('modifyMultiColorIdInput').value = id; + document.getElementById('modifyMultiColorIdDisplay').innerText = id; + document.getElementById('modifyMultiColorColorInput').value = colors; + document.getElementById('modifyMultiColorTextInput').value = text; + document.getElementById('modify-multicolor-modal').style.display = "block"; + } + + function closeMultiColorModal() { + document.getElementById('modify-multicolor-modal').style.display = "none"; + } + + function modifyMultiColorText() { + const id = document.getElementById('modifyMultiColorIdInput').value; + const colors = document.getElementById('modifyMultiColorColorInput').value; + const text = document.getElementById('modifyMultiColorTextInput').value; + + if (!id) { + alert('Please enter a node ID.'); + return; + } + + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/modify-multicolor-text", true); + xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + + let data = "id=" + id + "&colors=" + encodeURIComponent(colors) + "&text=" + encodeURIComponent(text); + xhr.onload = function() { + if (xhr.status === 200) { + fetchNodes(); + closeMultiColorModal(); + } + }; + xhr.send(data); + } + window.onclick = function(event) { if (event.target == document.getElementById('modify-modal')) { closeModal(); } + if (event.target == document.getElementById('modify-multicolor-modal')) { + closeMultiColorModal(); + } } setInterval(fetchNodes, 5000); diff --git a/ledy.ino b/ledy.ino index 7fbbc54..7228979 100644 --- a/ledy.ino +++ b/ledy.ino @@ -98,6 +98,24 @@ void modifyTextNodeById(unsigned char id, uint32_t new_color, char new_text[TEXT } } +void modifyMultiColorTextNodeById(unsigned char id, char new_text[TEXT_MAX_LENGTH + 1], RGBWithIndex new_colors[4], unsigned char new_color_count) +{ + for (unsigned char i = 0; i < MAX_TEXT_NODES_COUNT; i++) + { + if (multi_color_text_node[i].id == id && multi_color_text_node[i].disappear_time != 0) + { + strncpy(multi_color_text_node[i].content, new_text, TEXT_MAX_LENGTH); + multi_color_text_node[i].character_count = strlen(new_text); + multi_color_text_node[i].color_count = new_color_count; + for(int j = 0; j < new_color_count; j++) + { + multi_color_text_node[i].colors[j] = new_colors[j]; + } + break; + } + } +} + void scrollAllScrollableTexts(bool split_scroll_mode = false) { for (unsigned char i = 0; i < MAX_TEXT_NODES_COUNT; i++) diff --git a/prototypes.h b/prototypes.h index d5d3974..9ca92a1 100644 --- a/prototypes.h +++ b/prototypes.h @@ -27,6 +27,7 @@ short getTextNodeY2(TextNode *node); short getTextNodeX2(TextNode *node); short getMultiColorTextNodeX2(MultiColorTextNode *node); void modifyTextNodeById(unsigned char id, uint32_t new_color, char new_text[TEXT_MAX_LENGTH + 1], unsigned char new_slowness); +void modifyMultiColorTextNodeById(unsigned char id, char new_text[TEXT_MAX_LENGTH + 1], RGBWithIndex new_colors[4], unsigned char new_color_count); diff --git a/server.ino b/server.ino index 52cd456..126d39c 100644 --- a/server.ino +++ b/server.ino @@ -235,9 +235,66 @@ void handleMulticolorText() { } else { - server.send(400, "text/plain", "Invalid arguments for /modify-text"); - } - } void handleGetNodes() + server.send(400, "text/plain", "Invalid arguments for /modify-text"); + } + } + + void handleModifyMultiColorText() + { + if (server.hasArg("id") && server.hasArg("colors") && server.hasArg("text")) + { + unsigned char id = server.arg("id").toInt(); + String colors_str = server.arg("colors"); + String text_str = server.arg("text"); + char text[TEXT_MAX_LENGTH + 1]; + text_str.toCharArray(text, TEXT_MAX_LENGTH + 1); + + RGBWithIndex colors[4]; + int color_count = 0; + String color_part = ""; + int last_comma = -1; + for (int i = 0; i < colors_str.length() && color_count < 4; i++) { + if (colors_str.charAt(i) == ',') { + color_part = colors_str.substring(last_comma + 1, i); + last_comma = i; + if (color_part.length() > 0) { + long color_val = strtol(color_part.substring(1).c_str(), NULL, 16); + colors[color_count].r = (color_val >> 16) & 0xFF; + colors[color_count].g = (color_val >> 8) & 0xFF; + colors[color_count].b = color_val & 0xFF; + color_count++; + } + } + } + if (color_count < 4) { + color_part = colors_str.substring(last_comma + 1); + if (color_part.length() > 0) { + long color_val = strtol(color_part.substring(1).c_str(), NULL, 16); + colors[color_count].r = (color_val >> 16) & 0xFF; + colors[color_count].g = (color_val >> 8) & 0xFF; + colors[color_count].b = color_val & 0xFF; + color_count++; + } + } + + if (color_count > 0) { + int text_len = text_str.length(); + int part_len = text_len / color_count; + for (int i = 0; i < color_count; i++) { + colors[i].start_index = i * part_len; + } + } + + modifyMultiColorTextNodeById(id, text, colors, color_count); + server.send(200, "text/plain", "OK"); + } + else + { + server.send(400, "text/plain", "Invalid arguments for /modify-multicolor-text"); + } + } + + void handleGetNodes() { StaticJsonDocument<2048> jsonDoc; JsonArray nodes = jsonDoc.to(); @@ -299,6 +356,7 @@ void handleMulticolorText() { server.on("/text", HTTP_POST, handleText); server.on("/modify-text", HTTP_POST, handleModifyText); server.on("/multicolor-text", HTTP_POST, handleMulticolorText); + server.on("/modify-multicolor-text", HTTP_POST, handleModifyMultiColorText); server.on("/brightness", HTTP_POST, handleBrightness); server.on("/upload-page", HTTP_GET, handleUploadPage); server.on("/upload-bmp", HTTP_POST, []() {