IndexScript.cpp

00001 /*
00002  * IndexScript.cpp
00003  * Copyright (c) 2017, ZHAW
00004  * All rights reserved.
00005  *
00006  *  Created on: 07.07.2017
00007  *      Author: Marcel Honegger
00008  */
00009 
00010 #include "IndexScript.h"
00011 
00012 using namespace std;
00013 
00014 /**
00015  * Creates a custom http script.
00016  */
00017 IndexScript::IndexScript() : HTTPScript() {}
00018 
00019 IndexScript::~IndexScript() {}
00020 
00021 /**
00022  * This method contains the logic to be executed when this http script is called.
00023  */
00024 string IndexScript::call(vector<string> names, vector<string> values) {
00025     
00026     // create response
00027     
00028     string response;
00029     
00030     response += "  <script type=\"text/javascript\">\r\n";
00031     response += "  var xmlhttp = null;\r\n";
00032     response += "  var task = window.setInterval(\"update()\", 500);\r\n";
00033     response += "  function update() {\r\n";
00034     response += "    if (window.XMLHttpRequest) {\r\n";
00035     response += "      xmlhttp = new XMLHttpRequest();\r\n";
00036     response += "    } else if (window.ActiveXObject) {\r\n";
00037     response += "      try {\r\n";
00038     response += "        xmlhttp = new ActiveXObject(\"Msxml2.XMLHTTP\");\r\n";
00039     response += "      } catch (exception) {\r\n";
00040     response += "        try {\r\n";
00041     response += "          xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n";
00042     response += "        } catch (exception) {}\r\n";
00043     response += "      }\r\n";
00044     response += "    }\r\n";
00045     response += "    xmlhttp.onreadystatechange = refresh;\r\n";
00046     response += "    xmlhttp.open(\"GET\", \"/cgi-bin/controller\");\r\n";
00047     response += "    xmlhttp.send(null);\r\n";
00048     response += "  }\r\n";
00049     response += "  function refresh() {\r\n";
00050     response += "    if (xmlhttp.readyState == 4) {\r\n";
00051     response += "      var xml = xmlhttp.responseXML;\r\n";
00052     response += "      var intValues = xml.getElementsByTagName(\"int\");\r\n";
00053     response += "      var floatValues = xml.getElementsByTagName(\"float\");\r\n";
00054     response += "      document.getElementById(\"counter\").innerHTML = intValues[0].childNodes[0].nodeValue;\r\n";
00055     response += "      document.getElementById(\"value\").innerHTML = floatValues[0].childNodes[0].nodeValue;\r\n";
00056     response += "      drawCoordinates(intValues[0].childNodes[0].nodeValue,intValues[0].childNodes[0].nodeValue);\r\n";
00057     response += "    }\r\n";
00058     response += "  }\r\n";
00059     response += "  function drawCoordinates(x,y){ \r\n";
00060     response += "      var ctx = document.getElementById(\"canvas\").getContext(\"2d\");\r\n";
00061     response += "      ctx.clearRect(0, 0, 600, 600);\r\n";
00062     response += "      ctx.fillStyle = \"#ff2626\"; // Red color\r\n";
00063     response += "      ctx.beginPath();\r\n";
00064     response += "      ctx.arc(x, y, 3, 0, Math.PI * 2, true);\r\n";
00065     response += "      ctx.fill();\r\n";
00066     response += "  }\r\n"; 
00067 
00068     response += "  </script>\r\n";
00069     
00070     response += "  <iframe src=\"dummy.html\" width=\"0\" height=\"0\" name=\"dummy\" scrolling=\"no\" frameborder=\"0\"></iframe>";
00071     response += "  <h1>Controller</h1>\r\n";
00072     response += "  <table>\r\n";
00073     response += "    <tr>\r\n";
00074     response += "      <td style=\"font-size: 28px;\">Counter:</td>\r\n";
00075     response += "      <td id=\"counter\" width=\"100\" style=\"font-size: 28px; text-align: right;\">0</td>\r\n";
00076     response += "    </tr>\r\n";
00077     response += "    <tr>\r\n";
00078     response += "      <td style=\"font-size: 28px;\">User button:</td>\r\n";
00079     response += "      <td id=\"value\" width=\"100\" style=\"font-size: 28px; text-align: right;\">0.000</td>\r\n";
00080     response += "    </tr>\r\n";
00081     response += "  </table>\r\n";
00082     response += "  <form><input type=\"button\" id=\"Forward\" value=\"Forward\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Forward_on=true'; return false\" ontouchend=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Forward_off=true'; return false\" style=\"font-size: 30px; position: absolute; top: 200px; left: 50px; width: 200px; height: 100px;\"></input></form>";
00083     response += "  <form><input type=\"button\" id=\"Backward\" value=\"Backward\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Backward_on=true'; return false\" ontouchend=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Backward_off=true'; return false\" style=\"font-size: 30px; position: absolute; top: 400px; left: 40px; width: 200px; height: 100px;\"></input></form>";
00084     response += "  <form><input type=\"button\" id=\"Right\" value=\"Right\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Right_on=true'; return false\" ontouchend=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Right_off=true'; return false\" style=\"font-size: 30px; position: absolute; top: 300px; left: 1250px; width: 100px; height: 200px;\"></input></form>";
00085     response += "  <form><input type=\"button\" id=\"Left\" value=\"Left\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Left_on=true'; return false\" ontouchend=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?Left_off=true'; return false\" style=\"font-size: 30px; position: absolute; top: 300px; left: 1100px; width: 100px; height: 200px;\"></input></form>";
00086     
00087     /*
00088     // camera buttons
00089     response += "  <form><input type=\"button\" id=\"C_UP\" value=\"up\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?CAM_up=true'; return false\" ontouchend=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?CAM_up_off=true'; return false\" style=\"font-size: 30px; position: absolute; top: 200px; left: 700px; width: 100px; height: 100px;\"></input></form>";
00090     response += "  <form><input type=\"button\" id=\"C_DOWN\" value=\"down\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?CAM_down=true'; return false\"  style=\"font-size: 30px; position: absolute; top: 400px; left: 700px; width: 100px; height: 100px;\"></input></form>";
00091     response += "  <form><input type=\"button\" id=\"C_RIGHT\" value=\"Right\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?CAM_left=true'; return false\"  style=\"font-size: 30px; position: absolute; top: 300px; left: 800px; width: 100px; height: 100px;\"></input></form>";
00092     response += "  <form><input type=\"button\" id=\"C_LEFT\" value=\"Left\"   ontouchstart=\"parent.frames[0].location.href='http://192.168.0.100/cgi-bin/controller?CAM_right=true'; return false\"  style=\"font-size: 30px; position: absolute; top: 300px; left: 600px; width: 100px; height: 100px;\"></input></form>";
00093     */
00094     
00095     // Lidar points in canvas
00096     response += "  <canvas id=\"canvas\" width=\"300\" height=\"300\" style=\"cursor:crosshair; position: absolute; top: 200px; left: 600px;\"></canvas>";
00097     
00098     return response;
00099 }
00100