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)
@@ -172,6 +245,11 @@ const char index_html[] PROGMEM = R"rawliteral(
}
if(fontSize) data += "&fontSize=" + fontSize;
+ xhr.onload = function() {
+ if (xhr.status === 200) {
+ fetchNodes();
+ }
+ };
xhr.send(data);
}
@@ -202,8 +280,82 @@ const char index_html[] PROGMEM = R"rawliteral(
if(y) data += "&y=" + y;
if(fontSize) data += "&fontSize=" + fontSize;
+ xhr.onload = function() {
+ if (xhr.status === 200) {
+ fetchNodes();
+ }
+ };
xhr.send(data);
}
+
+ function modifyText() {
+ const id = document.getElementById('modifyIdInput').value;
+ const color = document.getElementById('modifyColorPicker').value;
+ const text = document.getElementById('modifyTextInput').value;
+ const slowness = document.getElementById('modifySlownessInput').value;
+
+ if (!id) {
+ alert('Please enter a node ID.');
+ return;
+ }
+
+ var xhr = new XMLHttpRequest();
+ xhr.open("POST", "/modify-text", true);
+ xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+ let data = "id=" + id + "&color=" + encodeURIComponent(color) + "&text=" + encodeURIComponent(text) + "&slowness=" + slowness;
+ xhr.onload = function() {
+ if (xhr.status === 200) {
+ fetchNodes();
+ closeModal();
+ }
+ };
+ xhr.send(data);
+ }
+
+ function fetchNodes() {
+ var xhr = new XMLHttpRequest();
+ xhr.open("GET", "/nodes", true);
+ xhr.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ var nodes = JSON.parse(this.responseText);
+ var nodesList = document.getElementById('nodes-list');
+ 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 + '' +
+ '
';
+ nodesList.appendChild(nodeDiv);
+ }
+ }
+ };
+ xhr.send();
+ }
+
+ function populateModifyForm(id, color, text, slowness) {
+ document.getElementById('modifyIdInput').value = id;
+ document.getElementById('modifyIdDisplay').innerText = id;
+ document.getElementById('modifyColorPicker').value = color;
+ document.getElementById('modifyTextInput').value = text;
+ document.getElementById('modifySlownessInput').value = slowness;
+ document.getElementById('modify-modal').style.display = "block";
+ }
+
+ function closeModal() {
+ document.getElementById('modify-modal').style.display = "none";
+ }
+
+ window.onclick = function(event) {
+ if (event.target == document.getElementById('modify-modal')) {
+ closeModal();
+ }
+ }
+
+ setInterval(fetchNodes, 5000);
+ window.onload = fetchNodes;