Added position plot to HTML.

dhebbeker · dhebbeker · commit 3651a656c240 · 2021-05-11T16:42:38.000+02:00
HTML source is now rendered in background using buffering.
diff --git a/remote-website/robot-control.php b/remote-website/robot-control.php
@@ -2,9 +2,7 @@
 $image = imagecreatetruecolor(1000, 1000);
 $default_color = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
 
-$data_server = "http://kps32.ddns.net/?positions";
-$positionString = file_get_contents($data_server);
-
+$positionString = $_GET["positions"];
 
 $positions = array();
 if($positionString === FALSE) {
diff --git a/robot-control-src/control-mask.html b/robot-control-src/control-mask.html
@@ -3,7 +3,7 @@
   <head>
     <title>Robot Control</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.6">
   </head>
   <body>
   <main>
@@ -16,6 +16,7 @@
     </tbody>
     </table>
   </form>
+  <img style="max-width:90vw; max-height:100vh;" src="https://david.hebbeker.info/robot-control.php?positions=%s" />
   </main>
   </body>
-</html>
+</html>
diff --git a/robot-control-src/robot-control-src.ino b/robot-control-src/robot-control-src.ino
@@ -1,8 +1,10 @@
 #include "board.hpp"
 #include "Drives.hpp"
 #include "wifi_ap.hpp"
+#include "library_extension.hpp"
 #include <assert.h>
 #include <ESP8266WebServer.h>
+#include <atomic>
 
 static ESP8266WebServer server(80);
 
@@ -19,28 +21,53 @@ static constexpr std::size_t numberOfPositions = 50;
 static Position positions[numberOfPositions] = { {0,0} };
 static std::size_t positionIndex = 0;
 
-constexpr auto htmlSource = 
-    "<!DOCTYPE html>\n"
-    "<html lang=\"en\">\n"
-    "  <head>\n"
-    "    <title>Robot Control</title>\n"
-    "    <meta charset=\"utf-8\" />\n"
-    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.6\">\n"
-    "  </head>\n"
-    "  <body>\n"
-    "  <main>\n"
-    "  <form method=\"post\" action=\"/\">\n"
-    "    <table>\n"
-    "    <tbody align=center valign=middle>\n"
-    "      <tr><td></td><td><button type=\"submit\" name=\"forwards\" value=\"10\" title=\"+37,70mm\">&#8593;</button></td><td></td></tr>\n"
-    "      <tr><td><button type=\"submit\" name=\"left\" value=\"5\" title=\"-86,4&deg;\">&#8634;</button></td><td>&#x1F916;</td><td><button type=\"submit\" name=\"right\" value=\"5\" title=\"+86,4&deg;\">&#8635;</button></td></tr>\n"
-    "      <tr><td></td><td><button type=\"submit\" name=\"backwards\" value=\"10\" title=\"-37,70mm\">&#8595;</button></td><td></td></tr>\n"
-    "    </tbody>\n"
-    "    </table>\n"
-    "  </form>\n"
-    "  </main>\n"
-    "  </body>\n"
-    "</html>";
+static constexpr char htmlSourceTemplate[] =
+		"<!DOCTYPE html>\n"
+		"<html lang=\"en\">\n"
+		"  <head>\n"
+		"    <title>Robot Control</title>\n"
+		"    <meta charset=\"utf-8\" />\n"
+		"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.6\">\n"
+		"  </head>\n"
+		"  <body>\n"
+		"  <main>\n"
+		"  <form method=\"post\" action=\"/\">\n"
+		"    <table>\n"
+		"    <tbody align=center valign=middle>\n"
+		"      <tr><td></td><td><button type=\"submit\" name=\"forwards\" value=\"10\" title=\"+37,70mm\">&#8593;</button></td><td></td></tr>\n"
+		"      <tr><td><button type=\"submit\" name=\"left\" value=\"5\" title=\"-86,4&deg;\">&#8634;</button></td><td>&#x1F916;</td><td><button type=\"submit\" name=\"right\" value=\"5\" title=\"+86,4&deg;\">&#8635;</button></td></tr>\n"
+		"      <tr><td></td><td><button type=\"submit\" name=\"backwards\" value=\"10\" title=\"-37,70mm\">&#8595;</button></td><td></td></tr>\n"
+		"    </tbody>\n"
+		"    </table>\n"
+		"  </form>\n"
+		"  <img style=\"max-width:90vw; max-height:100vh;\" src=\"https://david.hebbeker.info/robot-control.php?positions=%s\" />\n"
+		"  </main>\n"
+		"  </body>\n"
+		"</html>";
+
+
+constexpr std::size_t maxCharPerPosition = (5+1)*2; //!< when serializing the position, the number of characters maximum used per position
+constexpr std::size_t positionsStringMaxLength = maxCharPerPosition*numberOfPositions+1; 
+
+static char htmlSourceBackBufferA[size(htmlSourceTemplate) + positionsStringMaxLength] = {0};
+static char htmlSourceBackBufferB[size(htmlSourceTemplate) + positionsStringMaxLength] = {0};
+static std::atomic<const char *> htmlSourceFrontBuffer(htmlSourceTemplate);
+
+void updateHtmlSource()
+{
+	char * const backBuffer = (htmlSourceFrontBuffer.load() == htmlSourceBackBufferA) ? htmlSourceBackBufferB : htmlSourceBackBufferA;
+	char positionStringBuffer[positionsStringMaxLength] = { 0 };
+	std::size_t charPos = 0;
+	for(std::size_t i=0; i<positionIndex; i++)
+	{
+	  const int writtenCharacters = snprintf(&(positionStringBuffer[charPos]), maxCharPerPosition+1, "%i;%i;", positions[i].x, positions[i].y);
+	  assert(writtenCharacters>0);
+	  charPos += writtenCharacters;	  
+	}
+	const int writtenCharacters = snprintf(backBuffer, size(htmlSourceBackBufferA), htmlSourceTemplate, positionStringBuffer);
+	assert(writtenCharacters>0);
+	htmlSourceFrontBuffer = backBuffer;
+}
 
 static void handleRoot() 
 {
@@ -73,23 +100,9 @@ static void handleRoot()
     newTarget.isTargetNew = true;
     Serial.printf("Got right by %u!\n", newTarget.newRotate);
   }
-  if(server.hasArg("positions"))
-  {
-	  constexpr std::size_t charPerEntry = (5+1)*2;
-	  constexpr std::size_t bufferLength = charPerEntry*numberOfPositions+1; 
-	  char positionStringBuffer[bufferLength] = { 0 };
-	  std::size_t charPos = 0;
-	  for(std::size_t i=0; i<positionIndex; i++)
-	  {
-		  const int writtenCharacters = snprintf(&(positionStringBuffer[charPos]), charPerEntry+1, "%i;%i;", positions[i].x, positions[i].y);
-		  assert(writtenCharacters>0);
-		  charPos += writtenCharacters;	  
-	  }
-	  server.send(200, "text/plain", positionStringBuffer);
-  }
   else
   {
-	  server.send(200, "text/html", htmlSource);
+	  server.send(200, "text/html", htmlSourceFrontBuffer.load());
   }
   digitalWrite(board::debugLed, HIGH);
 }
@@ -151,4 +164,5 @@ void loop()
     }
     newTarget = { };
   }
+  updateHtmlSource();
 }
