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
+70 -3
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';
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>';
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);