生活: 物聯網智慧機械遠端人機介面控制設計

2019/10/22/--2119/12/10
老師羅金榮
HTML 標記語言
CSS
JACASCRIPT
JQUERY
JQUERY UI

MCU
nodemcu-->GPIO-->模組

10/24

function fun1()

{

alert("程式已被驅動");

}

</script>

</head>

<body>

</ol>

<p></p>

</ul>

<p></p>

<a href="http://www.google.com">GOOGLE</a>

<p></p>

<p></p>

<p></p>

</a>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

=================================

hsub1.html

<body>

子網頁內容

<p></p>

</body>

++++++++++++++++++++++++++++++++++++++++++

10/29

<p></p>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

+++++++++++++++++++++++++++++++++++++++

<tr>

<td>姓名

</td>

<td>

</td>

</tr>

<input type="button" id="bt2" name="bt2" value="清除"

/> </td>

<tr>

</tr>

</table>

</form>

___________________________________________

10/31

排版元件

</div>

css宣告:

元件{

屬性:屬性值

}

</style>

-------------------------------

tag

p{ color:#0CF;

font-size:30px;

}

------------------

#p3,#p1{ color:#0CF;

font-size:30px;

border:#993;

border-style:double;

border-width:5px;

width:150px;

}

-----------------------------------

指定重複休市

------------

#dv1{

width:200px;

height:150px;

background-color:#F9C;

border-radius:50px 50px 50px 50px; /* 可用來製作按鈕 */

}

</style>

</head>

<body>

</div>

-------------------------------------

圓角修飾

border-radius:50px 50px 50px 50px

內部修飾

padding

外部修飾

margin

-----------------------------

#dv1{

width:80px;

height:30px;

background-color:#F9C;

border-radius:50px 50px 50px 50px;

text-align:center;

padding-top:10px;

}

</style>

</head>

<body>

開啟

</div>

---------------------------------

#ul1{
list-style:none;
width:500px;
background-color:#3CF;
}
#ul1 li{
display:inline;
margin-right:50px;
}
#ul1 li:hover{
font-size:24px;
color:#03F;
}
</style>
-------------------
11/05
javascript
資料型態
Integer,Float,Blooean,String,Array
變數宣告
var 變數名稱;
ui元件
alert("輸出資料");
promp("");
confirm("");
window.open("");

<script language="javascript">
function fun1()
{
alert("first javascript");
}
</script>
<body>
<a href="javascript:void" id="a1" onclick="fun1()" >執行</a>
</body>
________________________
DOM文件物件模型
<span>,<a>,<img>,<p>,<div>,<ol>,<ul>
1.以ID取值
取值　var k=document.getElementById("id").innerHTML
給值　document.getElementById("id").innerHTML=值
2.
一‧取單項值：文字框，下拉是選單，備忘框
取值　var k=document.getElementById("id").value
給值　document.getElementById("id")..value=值
二‧群組或複選取值
var klen=document.getElementByName("rd").length;
document.getElementByName("rd").item(i) 取得群組項目的物件
document.getElementByName("rd").item(i).checked ;判斷被選取
var kv=document.getElementByName("rd").item(i).value

trim() 左右去空白
ltrim()左
rtrim()右

<p id="p1">30</p>
<span id="sp1">80</span>
<div id="dv1"></div>

k=document.getElementById("p1").innerHTML //k=30取值
var t=80;
document.getElementById("sp1").innerHTML=t
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
<script language="javascript">
function fun1()
{
var score;
score=prompt("請輸入成績:");
var t=document.getElementById("sp1");
t.innerHTML=score
}
</script>
<body>
<span id="sp1"></span>
<p>
<a href="javascript:void" id="a1" onclick="fun1()" >執行</a>
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

變數資料來源
１指定
2.網路
3.網頁元件
4.表單
5.輸入對話方塊
資料型態轉換
parseInt()
parseFloat()
parseDouble()
Number()
String()
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
function fun1()
{
var t1=document.getElementById("sp1").innerHTML;
var t2=document.getElementById("sp2").innerHTML;
var total=parseInt(t1)+parseInt(t2);
alert(total);
document.getElementById("sp3").innerHTML=String(total);
}
</script>
<body>
<span id="sp1">36</span>
<p>
<span id="sp2">48</span>
<p>
相加總值；<span id="sp3">0</span>
<p>
<a href="javascript:void" id="a1" onclick="fun1()" >執行</a>
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
運算子
１算數
２關係
３邏輯
４指定
５位元&,|
６條件　(條件式)?"結果一":"結果二"
７遞增++
　遞減--
var t=76;
var k=(t>=60)?"及格":"不及格";

var num;
num=prompt("請輸入成績:");
var k=num/2==0?"偶數":"奇數";
alert(k);

var score=parseInt(prompt("請輸入成績:"));
var k=(score>=90)?"甲級":(score>=80)?"乙級":(score>=70)?"丙級":(score>=60)?"丁級":"不及格";
//可巢狀判斷
k++
++k
++++++++++++++
11/07
and or not
var k=20;
var t=90;
z=(k>=60) && (t<=100);//false
z=(k>=60) || (t<=100);//true
z=!((k>=60) || (t<=100));//false
---------------------------------------
+= -= *= /= 複合運算子
位元運算子
var t=5;
var k=3;
var total=t | k; //var total=t & k; 為1 |為7
____________________________
if 指令
var k=confirm("清除資料嗎？；");
if(k==true)
{
document.getElementById("sp1").innerHTML="清除";

}
else
{
document.getElementById("sp1").innerHTML="不";
}

}
</script>
<body>
<input type="button" id="bt1" name="bt1" value="執行" onclick="fun1()" />
<p></p>結果；
<span id="sp1"></span>
+++++++++++++++++++++++++++

Number.isNaN(NaN) == true

-----------------------------------
switch
var ch=prompt("輸入1.春2.夏3.秋4.冬的花類.");
result="";
switch ((parseInt(ch)))
{
case 1:
{
result="梅花";
break;
}
case 2:
{
result="梅花";
break;
}
case 3:
{
result="梅花";
break;
}
case 4:
{
result="梅花";
break;
}
}
document.getElementById("sp1").innerHTML=result;
}
</script>
<body>輸入四季花類；
<input type="button" id="bt1" name="bt1" value="執行" onclick="fun1()" />
<p></p>結果；
<span id="sp1"></span>

______________________________________

for

_________________________________

架構二區域變數

function fun1()

{

var a=30

var b=80;

fun2(a,b)

}

function fun2(x,y)

{

var t=x+y;

document.getElementById("sp1").innerHTML=t;

}

</script>

<body>

<p></p>

__________________

架構三區域變數

function fun1()

{

var t=fun2();

document.getElementById("sp1").innerHTML=t;

}

function fun2(x,y)

{

var x=20;

var y=70;

var sum=x*y;

return sum;

}

</script>

<body>

<p></p>

______________________

架構四

_______________
<script language="javascript" src="funcom4.js"></script> //引入js檔
<script language="javascript">
function fun1()
{
var a=70;
var b=20
var t=fun2(a,b);
document.getElementById("sp1").innerHTML=t;
}

</script>
<body>
<a href="javascript:void;" id="a1" onclick="fun1()" >架構四</a>
<p></p>
<span id="sp1"></span>
_____________________________
_<script language="javascript">
function fun1()
{
var k=new Array(11,12,13,14,15);
fun2(k);

}
function fun2(b)
{
var blen=b.length;
var str="";
for (var u=0;u<blen;u++)
{
str=str+b[u]+"  ";
}
document.getElementById("sp1").innerHTML=str;
}

</script>
<body>
<a href="javascript:void;" id="a1" onclick="fun1()" >陣列傳值</a>
<p></p>
<span id="sp1"></span>

++++++++++++++++++++++
ESP8266 12E
1
C槽放ardunoIDE 從google下載arduino1.8.10 直接解壓縮
2.espdriver.7z解壓縮安裝cp210xvcpinstall_x64.exe
再到裝置管理員安driver 2l3combort
3.設資料夾IOTHMIproject1
4.開arduino.exe
a .檔案偏好設定
貼開發板管理員位址

http://arduino.esp8266.com/stable/package_esp8266com_index.json
b.工具-開發版管理員安裝2.3版
　　　ＮｏｄｅＭｃｕ１．０(ESP-12Emodule)
速度１１５２００
cpu 80MHz
flash 4m
===============================　
測試上網

#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();

}
+++++++++++++++++++++++++++++++++++++++
ESP8266-12E
c++
======
1205
hmibasic8 hmi UI
<!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;
});
});
</script>
<body class='default'>
<div id='knob'>
</div>
<p>
值:<span id="sp1"></span>
</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();
}

生活

2019年10月22日星期二

物聯網智慧機械遠端人機介面控制設計

沒有留言:

張貼留言

2019年10月22日 星期二

物聯網智慧機械遠端人機介面控制設計

沒有留言:

張貼留言

2019年10月22日星期二