admin/pti-ledy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simple designed achived

Browse Source
This commit is contained in:
gitProtogen
2026-02-06 11:16:31 +01:00
parent 51d81c6780
commit c2f027f18f
4 changed files with 150 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.h
+68 -1
View File
@@ -126,6 +126,28 @@ const char index_html[] PROGMEM = R"rawliteral(
</div>
</div>
<div id="modify-multicolor-modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeMultiColorModal()">&times;</span>
<h3>Modify Multi-Color Text Node</h3>
<div class="text-input-group">
<input type="hidden" id="modifyMultiColorIdInput">
<b>Node ID:</b> <span id="modifyMultiColorIdDisplay"></span>
</div>
<div class="text-input-group">
<input type="text" id="modifyMultiColorTextInput" placeholder="New text...">
<div class="param-explanation">New text for the node.</div>
</div>
<div class="text-input-group">
<input type="text" id="modifyMultiColorColorInput" placeholder="e.g., #ff0000,#00ff00,#0000ff">
<div class="param-explanation">Comma-separated list of hex colors (max 4).</div>
</div>
<div class="text-buttons">
<button class="button" onclick="modifyMultiColorText()">Save Changes</button>
</div>
</div>
</div>
<div class="text-controls">
<h3>Add Text Node (Full Control)</h3>
<pre><code>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)</code></pre>
@@ -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';
if (node.type === 'text') {
var color = '#' + ('000000' + node.color.toString(16)).slice(-6);
nodeDiv.innerHTML = '<b>ID:</b> ' + node.id + ', <b>Text:</b> ' + node.text + ', <b>Color:</b> <span style="color:' + color + '">' + color + '</span>' +
'<button style="margin-left: 10px;" onclick="populateModifyForm(' + node.id + ', \'' + color + '\', \'' + node.text + '\', ' + node.slowness + ')">Modify</button>';
} 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 = '<b>ID:</b> ' + node.id + ', <b>Text:</b> ' + node.text + ', <b>Type:</b> Multi-Color' +
'<button style="margin-left: 10px;" onclick="populateMultiColorModifyForm(' + node.id + ', \'' + colorsStr + '\', \'' + node.text + '\')">Modify</button>';
}
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);
ledy.ino
+18
View File
@@ -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++)
prototypes.h
+1
View File
@@ -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);
server.ino
+59 -1
View File
@@ -237,7 +237,64 @@ void handleMulticolorText() {
{
server.send(400, "text/plain", "Invalid arguments for /modify-text");
}
} void handleGetNodes()
}
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<JsonArray>();
@@ -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, []() {