2019年11月26日 星期二

IOTESP8266架構學習

ESP8266012E
c
#include <stdio.h>
int main
{
  int a;
  a=30;

while(true)
  {
      printf("%d\n",a);
  }
   return 0;
}
arduino1.8.10
#include "Arduino.h"
void setup()
{
  [程式區塊]
}
 void loop()
{
   [程式區塊]
}
(1)只執行一次,變數初始值設定,腳位模式設定,運算一次的邏輯-->檔名.ino-->檔名.hex
(2)無限循環,無線訊號傳送,反覆運行的邏輯
++++++++++++++++++++++++++

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

ESP8266WebServer server(80);
char ssid[]="bsnet-1";
char pass[]="062230542";

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",fun1);
 
  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    Serial.println();
    server.send(200,"text/html","Hello Webserver");
}

void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
======================
wifi

   begin()
webserver-----------○localIP
伺服器啟動
       ||
     on()-------GET---> / --->send()
                                   /led1-->send()     HMI
                                   /led2-->send()
                       brower  http://

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

ESP8266WebServer server(80);
char ssid[]="bsnet-1";
char pass[]="062230542";

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",fun1);
  server.on("/led1",fun2);
  server.on("/led2",fun3);
  server.on("/led3",fun4);
    
  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    Serial.println();
    server.send(200,"text/html","Hello Webserver");
}
void fun2()
{
    Serial.println();
    server.send(200,"text/html","LED1 ON");
}
void fun3()
{
    Serial.println();
    server.send(200,"text/html","LED2 ON");
}
void fun4()
{
    Serial.println();
    server.send(200,"text/html","LED3 ON");
}

void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
http://192.168.0.152/led1
+++++++++++++++++++++++++++++
<style>
#bt1,#bt2,#bt3,#bt4,#bt5
{
 background-color:#FCF;
 height:50px;
}
</style>
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
function fun1()
{
$.get("http://192.168.0.152/led1",{},function(data)
{
alert(data);
});
}
function fun2()
{
$.get("http://192.168.0.152/led2",{},function(data)
{
alert(data);
});
}
function fun3()
{
$.get("http://192.168.0.152/led3",{},function(data)
{
alert(data);
});
}
function fun4()
{
$.get("http://192.168.0.152/allon",{},function(data)
{
alert(data);
});
}
function fun5()
{
$.get("http://192.168.0.152/alloff",{},function(data)
{
alert(data);
});
}
</script>
<body>
<input type="button" id="bt1" name="btn" value="LED1" onclick="fun1()"  />
<input type="button" id="bt2" name="btn" value="LED2" onclick="fun2()"  />
<input type="button" id="bt3" name="btn" value="LED3" onclick="fun3()" />
<input type="button" id="bt4" name="btn" value="ALL ON" onclick="fun4()"  />
<input type="button" id="bt5" name="btn" value="ALL OFF" onclick="fun5()" />
</body>
++++++++++++++++++++++++++++++++++++++++++++++++++++++
char ssid[]="bsnet-1";
char pass[]="062230542";

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/led1",fun1);
  server.on("/led2",fun2);
  server.on("/led3",fun3);
  server.on("/allon",fun4);
  server.on("/alloff",fun5);
 
  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    Serial.println("1");
    server.send(200,"text/html","LED1 ON");
}
void fun2()
{
    Serial.println("2");
    server.send(200,"text/html","LED2 ON");
}
void fun3()
{
    Serial.println("3");
    server.send(200,"text/html","LED3 ON");
}
void fun4()
{
    Serial.println("4");
    server.send(200,"text/html","ALL ON");
}
void fun5()
{
    Serial.println("5");
    server.send(200,"text/html","ALL OFF");
}

void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
#http://192.168.0.152/led1
===================

function fun1(x)
{
$.get("http://192.168.0.152/"+x,{},function(data)
{
alert(data);
});
}


</script>
<body>
<input type="button" id="bt1" name="btn" value="LED1" onclick="fun1('led1')"  />
<input type="button" id="bt2" name="btn" value="LED2" onclick="fun1('led2')"  />
<input type="button" id="bt3" name="btn" value="LED3" onclick="fun1('led3')" />
<input type="button" id="bt4" name="btn" value="ALL ON" onclick="fun1('allon')"  />
<input type="button" id="bt5" name="btn" value="ALL OFF" onclick="fun1('alloff')" />
</body>
======================
void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",HTTP_POST,fun1);

  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    String s=server.arg("t1");
    Serial.println(s);
    server.send(200,"text/html","Success");
}


void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
=========
<style>
#bt1,#bt2,#bt3,#bt4,#bt5
{
 background-color:#FCF;
 height:50px;
}
</style>
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
function fun1()
{
$.post("http://192.168.0.152/",{t1:1},function(data)
{
alert(data);
});
}
function fun2()
{
$.get("http://192.168.0.152/",{t2:2},function(data)
{
alert(data);
});
}
function fun3()
{
$.get("http://192.168.0.152/",{t3:3},function(data)
{
alert(data);
});
}
function fun4()
{
$.get("http://192.168.0.152/",{t3:4},function(data)
{
alert(data);
});
}
function fun5()
{
$.get("http://192.168.0.152/",{t5:5},function(data)
{
alert(data);
});
}
</script>
<body>
<input type="button" id="bt1" name="btn" value="LED1" onclick="fun1()"  />
<input type="button" id="bt2" name="btn" value="LED2" onclick="fun2()"  />
<input type="button" id="bt3" name="btn" value="LED3" onclick="fun3()" />
<input type="button" id="bt4" name="btn" value="ALL ON" onclick="fun4()"  />
<input type="button" id="bt5" name="btn" value="ALL OFF" onclick="fun5()" />
</body>
================
ESP8266WebServer server(80);
char ssid[]="bsnet-1";
char pass[]="062230542";

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",HTTP_POST,fun1);

  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    String s=server.arg("t1");
    int pwms=s.toInt();
    Serial.println(s);
    server.send(200,"text/html",s+":pwM值執行成功");
}


void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
==================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
function fun1()
{
var qs=document.getElementById("t1").value;
if (qs !="")
{
if (parseInt(qs)>=0  && parseInt(qs)<=255)
{
$.post("http://192.168.0.153/",{t1:qs},function(data)
{
$("#dv1").text("");
$("#dv1").text(data);
});
}
else
{
alert("請輸入0_255數值");
document.getElementById("t1").value="";
document.getElementById("t1").focus();

}
}
else
{
alert("不可為空請輸入0_255數值,");
}

}
function fun2()

document.getElementById("t1").value="";
$.post("http://192.168.0.153/",{t1:0},function(data)
{
$("#dv1").text("");
$("#dv1").text("無PWM值輸入");
});

}
</script>
<body>
<table width="200" height="200">
<tr>
<td>PWM值:</td>
<td><input type="text" id="t1" width="50"/>
</td>
</tr>
<tr>
<td height="73"><input type="button" id="bt1" name="btn" value="傳送" onclick="fun1()"  /></td>
<td><input type="button" id="bt2" name="btn" value="清除" onclick="fun2()"  /></td></tr>
<td colspan="2">
<div id="dv1"></div>
</td>
</table>
</body>
</html>
================
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
function fun1()
{
var sv2=document.getElementById("slider1").value;
document.getElementById("t1").value=sv2;

if (sv2 !="")
{

$.post("http://192.168.0.153/",{t1:qs},function(data)
{
$("#dv1").text("");
$("#dv1").text(data);
});

}

}
function fun2()

document.getElementById("t1").value="";
$.post("http://192.168.0.153/",{t1:0},function(data)
{
$("#dv1").text("");
$("#dv1").text("無PWM值輸入");
});

}
</script>
<body>
<table width="200" height="200" border="1">
<tr>
<td>馬達一:</td>
<td><input type="range" min="0" max="100" value="0" class="slider" id="slider1"></td>
<td><input type="text" id="t1" width="50" onchange="fun1()"/>
</td>
</tr>
<tr>
<td>馬達二:</td>
<td><input type="range" min="0" max="100" value="0" class="slider" id="slider2"></td>
<td><input type="text" id="t2" width="50" onchange="fun2()"/>
</td>
</tr>
<tr>
<td>馬達三:</td>
<td><input type="range" min="0" max="100" value="0" class="slider" id="slider3"></td>
<td><input type="text" id="t3" width="50" onchange="fun3()"/>
</td>
</tr>
<tr>
<td>馬達四:</td>
<td><input type="range" min="0" max="100" value="0" class="slider" id="slider4"></td>
<td><input type="text" id="t4" width="50"/ onchange="fun4()">
</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" id="bt1" name="btn" value="歸零"  onclick="fu5()"  /></td>
</tr>
<td colspan="3">
<div id="dv1"></div>
</td>
</table>
</body>
</html>
===
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",HTTP_POST,fun1);
  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    String s=server.arg("t1");
    int ch=s.toInt();
    if (ch==1))
    {
      int sv1=server.arg("t2").toInt();
      Serial.println("1:"+(s);
      server.send(200,"text/html","伺服馬達一執行"+(String)sv1+"度成功");
    }
}


void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
++++++++++++++++++++++++++
var url="";
function funload()
{
document.getElementById("uconn1").disabled=true;
}
function funconn()
{
url="http://"+document.getElementById("ip1").value;
document.getElementById("ip1").disabled=true;
document.getElementById("conn1").disabled=true;
document.getElementById("uconn1").disabled=false;
}
function funuconn()
{
url="";
document.getElementById("ip1").value="";
}

function fun1()
{
var ipa=document.getElementById("ip1").value;
if (ipa=="")
{
alert("請輸入IP位址");
document.getElementById("t1").value="";
}
else
{
var sv1=document.getElementById("slider1").value;
document.getElementById("t1").value=sv1;

if (sv1 !="")
{

$.post("http://192.168.0.153/",{t2:1,t1:sv1},function(data)
{
$("#sp1").text("");
$("#sp1").text(data);
});

}
}
}
---------------------
<body onload="funload()">
<table width="200" height="200" border="1">
<tr>
<td>WiFiIp:</td>
<td colspan="2"><input type="text" id="ip1" /></td>
</tr>
<tr>
<td><input type="button" id="conn1" value="連線" onclick="funconn()" /></td>
  <td><input type="button" id="uconn1" value="斷線" onclick="funuconn" /></td>
</tr>
<tr>
=====================================
var time;
var i=1;
function fun1()
{
var t=document.getElementById("a1").innerHTML;
if (t=="啟動")
{
time=setInterval(fun2,1000);
document.getElementById("a1").innerHTML="修止"
}
else
{
clearInterval(time);
document.getElementById("a1").innerHTML="啟動";
}

}
function fun2()

document.getElementById("sp1").innerHTML=i;
i=i+1;
if (i>=10)
{
i=1;
}


}
</script>
<body>
<a href="javascript:void;" id="a1"  onclick="fun1()" >啟動</a>
<p></p>
<span id="sp1>"</span>
</body>
</html>
++++++++++++++++++++++++++++++++++
7
#include<ESP8266WiFi.h>
#include<ESP8266WebServer.h>

ESP8266WebServer server(80);
char ssid[]="bsnet-1";
char pass[]="062230542";
int count=0;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",HTTP_POST,fun1);
  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
    
    String s=server.arg("t1");
    int p=s.toInt();
    
    if (p==1)
    {
      count=count+1;
      if (count>=10)
      {
        count=0;
      }
      Serial.println(count);
      server.send(200,"text/html",(String)count+"_類比值讀取成功");
    }
    else
    {
      server.send(200,"text/html","類比值讀取不進行");
    }
}


void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
+++++++++++++++++++++++++++++
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
var time;
var i=1;
function fun0()
{
time=setInterval(fun1,1000);
}
function fun1()
{   
$.post("http://192.168.0.153/",{t1:1},function(data)
{
var tdata=data.split("-")
$("#sp1").text(tdata[0]);
$("#sp2").text(tdata[1]);
});
}
</script>
<body onload="fun0()">
類比值;<span id="sp1" ></span>
<p></p>
狀態;<span id="sp2"></span>
</body>
+++++++++++++++++++++++++++

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

ESP8266WebServer server(80);
char ssid[]="bsnet-1";
char pass[]="062230542";
int count=0;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",HTTP_POST,fun1);

  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
 
    String s=server.arg("t1");
    int p=s.toInt();
    int rv=random(0,9);
    Serial.println(rv);
    server.send(200,"text/html",rv);
 
}


void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
+++++++++++++++++++++++++++++
12/05
hmi ui 引入
Javascript
jquery           ]==> UI==>body==>Javacript自訂程式==>設計
css 
++++++++++++++++
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<link rel="stylesheet" href="./hmili/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./hmili/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./hmili/jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="./hmili/jqwidgets/jqxknob.js"></script>
<script type="text/javascript">
        $(document).ready(function () {

            $('#knob').jqxKnob({
                value: 60,
                min: 0,
                max: 255,
                startAngle: 150,
                endAngle: 510,
                snapToStep: true,
                rotation: 'clockwise',
                style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } },
                marks: {
                    colorRemaining: '#333',
                    colorProgress: '#333',
                    type: 'line',
                    offset: '71%',
                    thickness: 1,
                    size: '6%',
                    majorSize: '9%',
                    majorInterval: 10,
                    minorInterval: 2
                },
                labels: {
                    offset: '88%',
                    step: 10
                },
                progressBar: {
                    style: { fill: { color: '#00a644', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a644' },
                    background: { fill: { color: '#ff8b1e', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#ff8b1e' },
                    size: '9%',
                    offset: '60%'
                },
                spinner: {
                    style: { fill: { color: '#00a4e1', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' },
                    innerRadius: '45%', // specifies the inner Radius of the dial
                    outerRadius: '60%', // specifies the outer Radius of the dial
                    marks: {
                        colorRemaining: '#fff',
                        colorProgress: '#fff',
                        type: 'line',
                        offset: '46%',
                        thickness: 2,
                        size: '14%',
                        majorSize: '14%',
                        majorInterval: 10,
                        minorInterval: 10
                    },
                },
                dial:
                    {
                        style: { fill: { color: '#dfe3e9', gradientType: "linearHorizontal", gradientStops: [[0, 0.9], [50, 1], [100, 1]] }, stroke: '#dfe3e9' },
                        innerRadius: '0%', // specifies the inner Radius of the dial
                        outerRadius: '45%'
                    },
                pointer:
                    {
                        type: 'circle',
                        style: { fill: '#ef6100', stroke: '#ef6100' },
                        size: '5%',
                        offset: '38%',
                        thickness: 20
                    }
            });

            var lastValue;
            var newValue = 0;
            var min = 0;
            var max = 255;
            $('#knob').on('change', function (event) {
                lastValue = newValue;
                newValue = event.args.value;
                if (newValue >= min && newValue <= min + 10 && lastValue <= max && lastValue >= max - 10){
                    min = max;
                    max += 100;
                    $('#knob').jqxKnob({ value: max, max: max, min: min });
                } else if (newValue >= max - 10 && newValue <= max && lastValue >= min && lastValue <= min + 10){
                    max = min;
                    min -= 100;
                    $('#knob').jqxKnob({ value: min, min: min, max: max });
                }

document.getElementById("sp1").innerHTML=newValue;
            });
$("#bt1").click(function()
{
var rv=document.getElementById("sp1").innerHTML;
alert(rv);
$.post("http://192.168.0.113/",{t1:1,t2:rv},function(data)
{
//$("#sp2").text("");
$("#sp2").text(data);
});
});
        });
function fun2()
{



$.post("http://192.168.0.113/",{t1:1,t2:rv},function(data)
{
$("#sp2").text("");
$("#sp2").text(data[1]);
});

}
</script>
<body class='default'>
<div id='knob'>
</div>
<p>
<table width="400" rules="rows">
<tr>
<td >
調整值 :</td><td ><span id="sp1" size="30" ></span></td>
<td> <input type="button"  id="bt1" value="確定" onclick="fun1" />
</td>
</tr>
<tr>
<td colspan="3" >
狀態列:<span id="sp2"  >&nbsp;&nbsp;</span>脈衝值瀉入成功
</td>
</tr>
</table>
</body>
</html>
___________________
  #include<ESP8266WiFi.h>
#include<ESP8266WebServer.h>

ESP8266WebServer server(80);
char ssid[]="bsnet-1";
char pass[]="062230542";
int count=0;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  WiFi.begin(ssid,pass);
  delay(3000);

  server.on("/",HTTP_POST,fun1);

  server.begin();
  Serial.println();
  Serial.println(WiFi.localIP());
}

void fun1()
{
   
    String s=server.arg("t1");
    int p=s.toInt();
    if (p==1)
    {
      int rv=server.arg("t2").toInt();
      Serial.println(rv);
      server.send(200,"text/html",(String)rv+"-脈衝值傳送成功");
   
    }
    //int rv=random(0,9);
    else
    {
      server.send(200,"text/html","未進行脈衝值傳送成功");
      }
 
   
}


void loop() {
  // put your main code here, to run repeatedly:
  server.handleClient();
}
________________________
        

沒有留言:

張貼留言