Breaking News: Grepper is joining You.com. Read the official announcement!

add my previous code in which dynamic display of node was there is it possible

Aditya Chavhan answered on September 13, 2023 Popularity 1/10 Helpfulness 1/10

answer add my previous code in which dynamic display of node was there is it possible

add my previous code in which dynamic display of node was there is it possible

Comment

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char *ssid = "your_SSID";
const char *password = "your_PASSWORD";

AsyncWebServer server(80);

String connectedPeers = "[]";
String nodesData = "[]";

void setup() {
  Serial.begin(115200);

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  // Define endpoints
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", getIndexPage());
  });

  server.on("/update-peers", HTTP_POST, [](AsyncWebServerRequest *request){
    String newData = request->arg("data");
    connectedPeers = newData;
    request->send(200, "text/plain", "Updated peers");
  });

  server.on("/update-nodes", HTTP_POST, [](AsyncWebServerRequest *request){
    String newData = request->arg("data");
    nodesData = newData;
    request->send(200, "text/plain", "Updated nodes");
  });

  server.begin();
}

void loop() {
}

String getIndexPage() {
  String page = "<!DOCTYPE html><html><head><script>";
  page += "function updatePeers() {";
  page += "  var xhr = new XMLHttpRequest();";
  page += "  xhr.open('POST', '/update-peers', true);";
  page += "  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');";
  page += "  xhr.send('data=' + JSON.stringify(getConnectedPeers()));";
  page += "}";
  page += "function updateNodes() {";
  page += "  var xhr = new XMLHttpRequest();";
  page += "  xhr.open('POST', '/update-nodes', true);";
  page += "  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');";
  page += "  xhr.send('data=' + JSON.stringify(getNodesData()));";
  page += "}";
  page += "function getConnectedPeers() { return " + connectedPeers + "; }";
  page += "function getNodesData() { return " + nodesData + "; }";
  page += "</script></head><body>";
  page += "<h1>Connected Peers</h1>";
  page += "<ul id='peerList'></ul>";
  page += "<button onclick='updatePeers()'>Update Peers</button>";
  page += "<h1>Nodes</h1>";
  page += "<canvas id='nodeCanvas' width='800' height='600'></canvas>";
  page += "<button onclick='updateNodes()'>Update Nodes</button>";
  page += "<script>";
  page += "function drawNodes() {";
  page += "  var canvas = document.getElementById('nodeCanvas');";
  page += "  var ctx = canvas.getContext('2d');";
  page += "  var nodes = getNodesData();";
  page += "  ctx.clearRect(0, 0, canvas.width, canvas.height);";
  page += "  nodes.forEach(function(node, index) {";
  page += "    ctx.beginPath();";
  page += "    ctx.arc(node.x, node.y, 20, 0, Math.PI * 2);";
  page += "    ctx.fillStyle = node.color;";
  page += "    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';";
  page += "    ctx.shadowBlur = 10;";
  page += "    ctx.fill();";
  page += "    ctx.closePath();";
  page += "    ctx.fillStyle = 'white';";
  page += "    ctx.textAlign = 'center';";
  page += "    ctx.textBaseline = 'middle';";
  page += "    ctx.font = 'bold 14px Arial';";
  page += "    ctx.fillText(`${index}`, node.x, node.y);";
  page += "  });";
  page += "}";
  page += "function displayPeers() {";
  page += "  var peers = getConnectedPeers();";
  page += "  var list = document.getElementById('peerList');";
  page += "  list.innerHTML = '';";
  page += "  peers.forEach(function(peer) {";
  page += "    var listItem = document.createElement('li');";
  page += "    listItem.appendChild(document.createTextNode(peer));";
  page += "    list.appendChild(listItem);";
  page += "  });";
  page += "} displayPeers(); drawNodes(); </script>";
  page += "</body></html>";
  return page;
}

Popularity 1/10 Helpfulness 1/10 Language cpp

Source: chat.openai.com

Tags: add c++ display dynamic was

Link to this answer
Share Copy Link

Contributed on Sep 13 2023

Aditya Chavhan

0 Answers Avg Quality 2/10

add my previous code in which dynamic display of node was there is it possible

Contents

More Related Answers

add my previous code in which dynamic display of node was there is it possible

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.