古人智慧

Just Do it!
上士聞道,勤而行之;中士聞道,若存若亡;下士聞道,大笑之。不笑,不足以爲道。
~ 道德經 41

搜尋此網誌

Translation

2016年7月24日 星期日

Spider Robot[ESP8266]蜘蛛robot-WebPage design

MiniPlan控制板是使用ESP8266當做電控板核心,優勢是可以把控制界面用HTML寫在software裡面。這HTML不僅可以跨任何平台,也可以用各種設備如手機平板筆電等等。
是非常棒的開發platform,值得推廣。

這是新一代蜘蛛robot部分的code,主要功能是用HTML在瀏覽器內產生前進、後退、左右與坐下的按鍵,這也是參考MiniPlan的設計。分享如下:


void setup()
{
  ....
  ....
  server.on("/ctrl", HTTP_GET, WebForm_Control);
  server.begin();
}
void WebForm_Control(void)
{
  Serial.println("----WebForm_Control----");
  String content = "";
  content += "<html>";
  content += "<head>";
  content += "<title>Spider Controller</title>";
  content += "<style type=\"text/css\">";
  content += "  body {";
  content += "  color: white;";
  content += "  background-color: #000000 }";

  content += "  .web_btn {";
  content += "  width: 140px;";
  content += "  -webkit-border-radius: 5;";
  content += "  -moz-border-radius: 5;";
  content += "  border-radius: 5px;";
  content += "  font-family: Arial;";
  content += "  color: #ffffff;";
  content += "  font-size: 24px;";
  content += "  background: #006666;";
  content += "  padding: 10px 20px 10px 20px;";
  content += "  text-decoration: none;";
  content += "}";
  content += "</style>";
  content += "</head>";

  content += "<body>";
  content += "<table>";
  content += "<tr>";
  content += "<td></td>";
  content += "<td><button  class=\"web_btn\" onclick=\"fn(1)\">Forward</button></td>";
  content += "<td></td>";
  content += "</tr>";

  content += "<tr>";
  content += "<td><button  class=\"web_btn\" onclick=\"fn(3)\">Left</button></td>";
  content += "<td><button  class=\"web_btn\" style=\"background: #ff6600\" onclick=\"fn(0)\">Sit</button></td>";
  content += "<td><button  class=\"web_btn\" onclick=\"fn(4)\">Right</button></td>";
  content += "</tr>";

  content += "<tr>";
  content += "<td></td>";
  content += "<td><button  class=\"web_btn\" onclick=\"fn(2)\">Backward</button></td>";
  content += "<td></td>";
  content += "</tr>";
  content += "</table>";

  content += "</body>";
  content += "<script>";
  content += "function fn(cmd) {";
  content += "var xhttp = new XMLHttpRequest();";
  content += "xhttp.open(\"GET\", \"move?c=\"+cmd+\"&v=1\", true);";
  content += "xhttp.send();";
  content += "}";
  content += "</script>";
  content += "</html>";

  server.send(200, "text/html", content);
}


用手機的browser連接蜘蛛robot,產生的畫面,然後就可以按鈕讓他前進後退左右轉了,讚啦!


沒有留言:

張貼留言