2017年2月12日日曜日

ESP8266WebServerでballのswipeでポート制御

ESP8266WebServerでballのswipeでポート制御


下のサイトのxmlGET/PUTを参考に、データをやりとり。

serverへの送信は"key"="value"で送ってしまう。

ESP8266 GET/PUT XML
left position
center position
right position
1.データの送受信

参考サイトでxmlでデータの受信をしているサンプルがある。

サーバへの送信は、"key"="value"で送ると, String s = server.arg("position");でデータをとれるので、これで動かしてみる


var position = 0; /* -1 left:0%, 0 left:50%, 1 left:100% */
/*
 PUT 
*/
var xmlHttp=createXmlHttpObject();
/*
 create interface
*/
function createXmlHttpObject(){
 if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
 }else{
    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
 }
 return xmlHttp;
};
/*
 timerで周期実行。送信データは""
*/
function process(){
 if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
   xmlHttp.open('PUT','xml',true);
   xmlHttp.onreadystatechange=handleServerResponse;
   xmlHttp.send('');
 }
 setTimeout('process()',1000);
};
/*
 送信データ付き。position=-1 or 0 or 1
*/
function positionChnageRequest(updown){
 if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
   xmlHttp.open('PUT','xml',true);
   xmlHttp.onreadystatechange=handleServerResponse;
   xmlHttp.send('position='+ updown);
 }
};
/*
 PUTのcallback  受信データをpositionに格納
*/
function handleServerResponse(){
 if(xmlHttp.readyState==4 && xmlHttp.status==200){
   xmlResponse=xmlHttp.responseXML;
   //console.log(xmlResponse);
   xmldoc = xmlResponse.getElementsByTagName('position');
   message = xmldoc[0].firstChild.nodeValue;
   //document.getElementById('runtime').innerHTML=message;
   var newPosition = parseInt(message, 10);
   if(position === newPosition) return;
   else if(position < newPosition){
       position = newPosition;
       rightMove();
   }else {
       position = newPosition;
       leftMove();
   }
 }
};

      
2.esp8266ソースに変換
クライアント側のhtml, javascript, cssを作成し、esp8266ソース用にpythonでcの関数を作成。 pythonでテキスト編集した。

String webSite,javaScript,css,XML;
void buildWebsite(){
  buildJavascript();
  buildCss();
  webSite+="\n";
  webSite+="\n";
  ...
  webSite+=css;  //buildCss()でcssをStringに編集
  ...
  webSite+=javaScript;  //buildJavascript()でcssをStringに編集
  ...
      

な感じで、巨大なStringにhtml, javascript, cssを収める。

python3で編集時、元のcssファイルが作業中にBOMつきになって、テキストコピーしても、BOMのゴミがとれなかった。

clientでcssの動作が一部しなくなり、chromeの検証でElementをみると、文字は表示されないが、半角の空白ができ、mouseオーバーすると、0xfffeとかなんとか表示された

3.3d ballのswipe
3d cssをswipeで左右に移動させる。 tap, mouseのイベントを実装して、pcとスマホで動作するようにする。 こちらのblogに書いた。 css 3dをswipeしてみる

作成したinoファイル

wifiのないところで使うので、severをAPモードで起動している。

cdnを使えないので、javascriptで制御を書いた。

html,css,jsはpython3でcpp関数を書き出した。

python3でhtmlをcpp関数に書き出し

switcher.ino


#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);

const char* ssid="---your sever name---";
const char* password="---your password---";
const int RY1_PIN = 16;   // con2
const int RY2_PIN = 14;   // con3
const int RY3_PIN = 12;   // con4
const int RY4_PIN = 13;   // con5

String webSite,javaScript,css,XML;
void buildWebsite(){
buildJavascript();
buildCss();
webSite = "";
webSite+="<!doctype html>\n";
webSite+="<html>\n";
webSite+="<head>\n";
webSite+="<meta charset='utf-8'>\n";
webSite+="<meta name='viewport' content='width=device-width initial-scale=1 user-scalable=no'>\n";
webSite+="<title>bond switcher</title>\n";
webSite+="<style>\n";
webSite+=css;
webSite+="</style>\n";
webSite+="</head>\n";
webSite+="<body style='margin: 20px auto;background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);background-repeat: no-repeat;'>\n";
webSite+="<h1 style='text-align:center;color:#4b0082;'>Bond switcher</h1>\n";
webSite+="<div id='scene' style='margin-top:180px;'>\n";
webSite+="  <div class='wrapper'>\n";
webSite+="    <ul class='ball'>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="      <li class='ring'></li>\n";
webSite+="    </ul>\n";
webSite+="  </div>\n";
webSite+="</div>\n";
webSite+="<script>\n";
webSite+=javaScript;
webSite+="</script>\n";
webSite+="</body>\n";
webSite+="</html>\n";
}
void buildJavascript(){
javaScript = "";
javaScript+="//touch event\n";
javaScript+="document.addEventListener('touchstart', handleTouchStart, false);\n";
javaScript+="document.addEventListener('touchmove', handleTouchMove, false);\n";
javaScript+="var position = 0;  /* -1 left:0%, 0 left:50%, 1 left:100% */\n";
javaScript+="/*\n";
javaScript+="touch縺ョ蛻ゥ逕ィ蜿ッ閭ス蛻、蛻・\n";
javaScript+="*/\n";
javaScript+="var supportTouch = 'ontouchend' in document;\n";
javaScript+="console.log('supportTouch:', supportTouch);\n";
javaScript+="var position = 0;   // ball position\n";
javaScript+="/*\n";
javaScript+="PUT\n";
javaScript+="*/\n";
javaScript+="var xmlHttp=createXmlHttpObject();\n";
javaScript+="function createXmlHttpObject(){\n";
javaScript+="if(window.XMLHttpRequest){\n";
javaScript+="xmlHttp=new XMLHttpRequest();\n";
javaScript+="}else{\n";
javaScript+="xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');\n";
javaScript+="}\n";
javaScript+="return xmlHttp;\n";
javaScript+="};\n";
javaScript+="function process(){\n";
javaScript+="if(xmlHttp.readyState==0 || xmlHttp.readyState==4){\n";
javaScript+="xmlHttp.open('PUT','xml',true);\n";
javaScript+="xmlHttp.onreadystatechange=handleServerResponse;\n";
javaScript+="xmlHttp.send('');\n";
javaScript+="}\n";
javaScript+="setTimeout('process()',1000);\n";
javaScript+="};\n";
javaScript+="function positionChnageRequest(updown){\n";
javaScript+="if(xmlHttp.readyState==0 || xmlHttp.readyState==4){\n";
javaScript+="xmlHttp.open('PUT','xml',true);\n";
javaScript+="xmlHttp.onreadystatechange=handleServerResponse;\n";
javaScript+="xmlHttp.send('position='+ updown);\n";
javaScript+="}\n";
javaScript+="};\n";
javaScript+="function handleServerResponse(){\n";
javaScript+="if(xmlHttp.readyState==4 && xmlHttp.status==200){\n";
javaScript+="xmlResponse=xmlHttp.responseXML;\n";
javaScript+="//console.log(xmlResponse);\n";
javaScript+="xmldoc = xmlResponse.getElementsByTagName('position');\n";
javaScript+="message = xmldoc[0].firstChild.nodeValue;\n";
javaScript+="//document.getElementById('runtime').innerHTML=message;\n";
javaScript+="var newPosition = parseInt(message, 10);\n";
javaScript+="if(position === newPosition) return;\n";
javaScript+="else if(position < newPosition){\n";
javaScript+="position = newPosition;\n";
javaScript+="rightMove();\n";
javaScript+="}else {\n";
javaScript+="position = newPosition;\n";
javaScript+="leftMove();\n";
javaScript+="}\n";
javaScript+="}\n";
javaScript+="};\n";
javaScript+="var xDown = null;\n";
javaScript+="var yDown = null;\n";
javaScript+="/*\n";
javaScript+="touch\n";
javaScript+="*/\n";
javaScript+="function handleTouchStart(evt) {\n";
javaScript+="xDown = evt.touches[0].clientX;\n";
javaScript+="yDown = evt.touches[0].clientY;\n";
javaScript+="};\n";
javaScript+="var leftPos = '10%';\n";
javaScript+="var centerPos = '50%';\n";
javaScript+="var rightPos = '90%';\n";
javaScript+="function leftMove(){\n";
javaScript+="var elem = document.getElementById('scene');\n";
javaScript+="if (position === -1){\n";
javaScript+="elem.style.animationName = 'move_left2';\n";
javaScript+="elem.style.left = leftPos;\n";
javaScript+="}else if(position === 0){\n";
javaScript+="elem.style.animationName = 'move_left1';\n";
javaScript+="elem.style.left = centerPos;\n";
javaScript+="}\n";
javaScript+="};\n";
javaScript+="function rightMove(){\n";
javaScript+="var elem = document.getElementById('scene');\n";
javaScript+="if (position === 1){\n";
javaScript+="elem.style.animationName = 'move_right2';\n";
javaScript+="elem.style.left = rightPos;\n";
javaScript+="}else if(position === 0){\n";
javaScript+="elem.style.animationName = 'move_right1';\n";
javaScript+="elem.style.left = centerPos;\n";
javaScript+="}\n";
javaScript+="};\n";
javaScript+="function handleTouchMove(evt) {\n";
javaScript+="if ( ! xDown || ! yDown ) {\n";
javaScript+="return;\n";
javaScript+="}\n";
javaScript+="var xUp = evt.touches[0].clientX;\n";
javaScript+="var yUp = evt.touches[0].clientY;\n";
javaScript+="var xDiff = xDown - xUp;\n";
javaScript+="var yDiff = yDown - yUp;\n";
javaScript+="if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/\n";
javaScript+="if ( xDiff > 0 ) {\n";
javaScript+="/* left swipe */\n";
javaScript+="console.log('left!!!!!');\n";
javaScript+="positionChnageRequest('down');\n";
javaScript+="} else {\n";
javaScript+="/* right swipe */\n";
javaScript+="console.log('right!!!!!');\n";
javaScript+="positionChnageRequest('up');\n";
javaScript+="}\n";
javaScript+="} else {\n";
javaScript+="if ( yDiff > 0 ) {\n";
javaScript+="/* up swipe */\n";
javaScript+="} else {\n";
javaScript+="/* down swipe */\n";
javaScript+="}\n";
javaScript+="}\n";
javaScript+="/* reset values */\n";
javaScript+="xDown = null;\n";
javaScript+="yDown = null;\n";
javaScript+="};\n";
javaScript+="/*\n";
javaScript+="mouse\n";
javaScript+="*/\n";
javaScript+="document.addEventListener('mousedown', handleMouseDown, false);\n";
javaScript+="//document.addEventListener('mousemove', handleOnMouseMove, false);\n";
javaScript+="document.addEventListener('mouseup', handleMouseUp, false);\n";
javaScript+="// mouse\n";
javaScript+="var mouseMoveStart = 0;\n";
javaScript+="function handleOnMouseMove(evt) {\n";
javaScript+="if ( ! xDown || ! yDown ) {\n";
javaScript+="return;\n";
javaScript+="}\n";
javaScript+="if(mouseMoveStart === 1){\n";
javaScript+="mouseMoveStart = 0;\n";
javaScript+="return;\n";
javaScript+="}\n";
javaScript+="var xUp = evt.pageX;\n";
javaScript+="var yUp = evt.pageY;\n";
javaScript+="var xDiff = xDown - xUp;\n";
javaScript+="var yDiff = yDown - yUp;\n";
javaScript+="if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/\n";
javaScript+="if ( xDiff > 0 ) {\n";
javaScript+="/* left swipe */\n";
javaScript+="console.log('left!!!!!');\n";
javaScript+="positionChnageRequest('down');\n";
javaScript+="} else {\n";
javaScript+="/* right swipe */\n";
javaScript+="console.log('right!!!!!');\n";
javaScript+="positionChnageRequest('up');\n";
javaScript+="}\n";
javaScript+="} else {\n";
javaScript+="if ( yDiff > 0 ) {\n";
javaScript+="/* up swipe */\n";
javaScript+="} else {\n";
javaScript+="/* down swipe */\n";
javaScript+="}\n";
javaScript+="}\n";
javaScript+="/* reset values */\n";
javaScript+="xDown = null;\n";
javaScript+="yDown = null;\n";
javaScript+="//mouseClickOn = 0;\n";
javaScript+="};\n";
javaScript+="function handleMouseDown(evt) {\n";
javaScript+="xDown = evt.pageX;\n";
javaScript+="yDown = evt.pageY;\n";
javaScript+="mouseMoveStart = 1;\n";
javaScript+="document.addEventListener('mousemove', handleOnMouseMove, false);\n";
javaScript+="};\n";
javaScript+="function handleMouseUp(evt){\n";
javaScript+="handleOnMouseMove = null;\n";
javaScript+="document.removeEventListener('mousemove', handleOnMouseMove, false);\n";
javaScript+="};\n";
javaScript+="process(); // start process\n";
}
void buildCss(){
css = "";
css+="@keyframes roundandround {\n";
css+="to {transform: rotateX(360deg) rotateY(360deg);}\n";
css+="}\n";
css+="@keyframes show {\n";
css+="to {opacity: 1;}\n";
css+="}\n";
css+="#scene {\n";
css+="width:600px;\n";
css+="height:600px;\n";
css+="margin: 100px auto;\n";
css+="perspective: 1000px;\n";
css+="zoom: 0.2;   // 大きくするとswipeがもたつく\n";
css+="animation-name: start;\n";
css+="animation-duration: 1s;\n";
css+="display: inline-block;\n";
css+="position: relative;\n";
css+="margin-left: -300px;\n";
css+="left: 50%;\n";
css+="}\n";
css+=".wrapper {\n";
css+="width:100%;\n";
css+="height:100%;\n";
css+="transform: rotateX(45deg) rotateY(45deg);\n";
css+="-webkit-transform-style: preserve-3d;\n";
css+="-moz-transform-style: preserve-3d;\n";
css+="}\n";
css+=".ball {\n";
css+="position: relative;\n";
css+="width: 100%;\n";
css+="height: 100%;\n";
css+="margin:0 auto;\n";
css+="-webkit-transform-style: preserve-3d;\n";
css+="-moz-transform-style: preserve-3d;\n";
css+="animation: roundandround 7.5s 1.3s infinite linear;\n";
css+="}\n";
css+=".ball .ring {\n";
css+="position: absolute;\n";
css+="top: 0;\n";
css+="left: 0;\n";
css+="width: 100%;\n";
css+="height: 100%;\n";
css+="border:20px;\n";
css+="border-style: dotted;\n";
css+="border-radius: 50%;\n";
css+="opacity: 0.0;\n";
css+="animation: show 0.75s forwards ease-in-out;\n";
css+="display:block;\n";
css+="}\n";
css+="\n";
css+=".ring:nth-child(0) {   color:#b00083;   transform: rotateY(0deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(1) {   color:#b20185;   transform: rotateY(4deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(2) {   color:#b30286;   transform: rotateY(8deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(3) {   color:#b50388;   transform: rotateY(12deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(4) {   color:#b70589;   transform: rotateY(16deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(5) {   color:#b9068b;   transform: rotateY(20deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(6) {   color:#ba078d;   transform: rotateY(24deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(7) {   color:#bc088e;   transform: rotateY(28deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(8) {   color:#be0990;   transform: rotateY(32deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(9) {   color:#bf0a91;   transform: rotateY(36deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(10) {   color:#c10c93;   transform: rotateY(40deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(11) {   color:#c30d94;   transform: rotateY(44deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(12) {   color:#c50e96;   transform: rotateY(48deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(13) {   color:#c60f98;   transform: rotateY(52deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(14) {   color:#c81099;   transform: rotateY(56deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(15) {   color:#ca119b;   transform: rotateY(60deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(16) {   color:#cb129c;   transform: rotateY(64deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(17) {   color:#cd149e;   transform: rotateY(68deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(18) {   color:#cf15a0;   transform: rotateY(72deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(19) {   color:#d116a1;   transform: rotateY(76deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(20) {   color:#d217a3;   transform: rotateY(80deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(21) {   color:#d418a4;   transform: rotateY(84deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(22) {   color:#d619a6;   transform: rotateY(88deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(23) {   color:#d81ba8;   transform: rotateY(92deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(24) {   color:#d91ca9;   transform: rotateY(96deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(25) {   color:#db1dab;   transform: rotateY(100deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(26) {   color:#dd1eac;   transform: rotateY(104deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(27) {   color:#de1fae;   transform: rotateY(108deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(28) {   color:#e020af;   transform: rotateY(112deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(29) {   color:#e221b1;   transform: rotateY(116deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(30) {   color:#e423b3;   transform: rotateY(120deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(31) {   color:#e524b4;   transform: rotateY(124deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(32) {   color:#e725b6;   transform: rotateY(128deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(33) {   color:#e926b7;   transform: rotateY(132deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(34) {   color:#ea27b9;   transform: rotateY(136deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(35) {   color:#ec28bb;   transform: rotateY(140deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(36) {   color:#ee29bc;   transform: rotateY(144deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(37) {   color:#f02bbe;   transform: rotateY(148deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(38) {   color:#f12cbf;   transform: rotateY(152deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(39) {   color:#f32dc1;   transform: rotateY(156deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(40) {   color:#f52ec2;   transform: rotateY(160deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(41) {   color:#f62fc4;   transform: rotateY(164deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(42) {   color:#f830c6;   transform: rotateY(168deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(43) {   color:#fa32c7;   transform: rotateY(172deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(44) {   color:#fc33c9;   transform: rotateY(176deg);   animation-delay: 0s; }\n";
css+=".ring:nth-child(45) {   color:#fd34ca;   transform: rotateY(180deg);   animation-delay: 0s; }\n";
css+="/*\n";
css+="この下は左右スワイプのアニメーション\n";
css+="*/\n";
css+="@keyframes start {\n";
css+="0%   {}\n";
css+="100% {}\n";
css+="}\n";
css+="@keyframes move_right1 {\n";
css+="0%   {left: 10%;}\n";
css+="100% {left: 50%;}\n";
css+="}\n";
css+="@keyframes move_right2 {\n";
css+="0%   {left: 50%;}\n";
css+="100% {left: 90%;}\n";
css+="}\n";
css+="@keyframes move_left1 {\n";
css+="0%   {left: 90%;}\n";
css+="100% {left: 50%;}\n";
css+="}\n";
css+="@keyframes move_left2 {\n";
css+="0%   {left: 50%;}\n";
css+="100% {left: 10%;}\n";
css+="}\n";
}
void buildXML(){
XML="<?xml version='1.0'?>";
XML+="<position>";
XML+=getPosition();
XML+="</position>";
}


/*
 * position data
 */
 int position = 0;
/*
 * gen xml response data
 */
String getPosition(){
  String s;
  if(position == 1){
    s = "1";
  }else if(position == 0){
    s = "0";
  }else {
    s = "-1";
  }
  //Serial.println(s);
  return s;
}

void handleWebsite(){
  buildWebsite();
  server.send(200,"text/html",webSite);
}

void handleXML(){
  //Serial.println(server.arg("position"));
  String s = server.arg("position");
  if(s == "up"){
    if(position <= 0){
      position++;
    }
  }else if(s == "down") {
    if(position >= 0){
      position--;
    }
  }
  buildXML();
  server.send(200,"text/xml",XML);
}

void handleFAVICON(){
  Serial.println("favicon request!");
  server.send(404, "text/plane", "WTF Favicon!!\n");
}
/*
 * setup
 */
void setup() {
  Serial.begin(115200);
  pinMode(RY1_PIN, OUTPUT);
  pinMode(RY2_PIN, OUTPUT);
  pinMode(RY3_PIN, OUTPUT);
  pinMode(RY4_PIN, OUTPUT);
  digitalWrite(RY1_PIN, LOW);
  digitalWrite(RY2_PIN, LOW);
  digitalWrite(RY3_PIN, LOW);
  digitalWrite(RY4_PIN, LOW);
  /*
  WiFi.begin(ssid,password);
  while(WiFi.status()!=WL_CONNECTED)delay(500);
  WiFi.mode(WIFI_STA);
  Serial.println("\n\nBOOTING ESP8266 ...");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("Station IP address: ");
  Serial.println(WiFi.localIP());
  */
  // replace wifiAP
  Serial.println("");
  WiFi.mode(WIFI_AP);           //Only Access point
  WiFi.softAP(ssid, password);  //Start HOTspot removing password will disable security
  IPAddress myIP = WiFi.softAPIP(); //Get IP address
  Serial.print("HotSpt IP:");
  Serial.println(myIP);
  server.on("/",handleWebsite);
  server.on("/xml",handleXML);
  server.on("favicon.ico",handleFAVICON);  
  server.begin();
  Serial.println("HTTP server started");  
}
/*
 * loop
 */
void loop() {
  server.handleClient();
  /*
   * position check
   */
  if(position == -1){
    digitalWrite(RY1_PIN, HIGH);
    digitalWrite(RY2_PIN, LOW);
    digitalWrite(RY3_PIN, HIGH);
    digitalWrite(RY4_PIN, LOW);    
  }else if(position == 1){
    digitalWrite(RY1_PIN, LOW);
    digitalWrite(RY2_PIN, HIGH);
    digitalWrite(RY3_PIN, LOW);
    digitalWrite(RY4_PIN, HIGH);     
  }else{
    digitalWrite(RY1_PIN, LOW);
    digitalWrite(RY2_PIN, LOW);
    digitalWrite(RY3_PIN, LOW);
    digitalWrite(RY4_PIN, LOW);       
  }
}
    

なかなか長いけど、サーバに接続に接続しすると、画面が読み込まれ、ballのswipeでポートが動作する。

0 件のコメント:

コメントを投稿