2019年10月26日 星期六

影像辨識系統般筆記

簡介
環境布置
1.Opencvproject1資料夾於C
2.C:\Python27\Scripts 執行函數庫
 C:\Python27\Lib\site-packages  將cv2.pyd函數庫貼於此
到命令提示字元
C:\Python27\Lib\site-packages  執行
     pip install numpy      矩陣函數庫
     pip install scipy         科學函數庫
     pip install matplotlib  視覺化輸出函數
==========================
import cv2
import numpy as np

print("success")
測試\
Running script: "C:\Opencvproject1\print0.py"
success
==================================
basic1.py
import cv2
import numpy as np
from matplotlib import pyplot as plt

img=cv2.imread("pic1.jpg")

while(1):
cv2.imshow("image",img)

k=cv2.waitKey(1)
if k==ord('q'):
break


cv2.destroyAllWindows()
測視覺化 顯出圖片 按q停止
==============================
python基礎
from __future__ import print_function  #加可用3.0以上版本

a=350

print("a=",a)
================
# -*- coding:UTF-8 -*-   #引入中文化
from __future__ import print_function


print(100,"水果",60,sep="&")
====================
11/02
python-opencv架構

python                   numpy       scipy             matplotlib
基本程式語言      矩陣          科學運算      輸出平台
                opencv
影像識別
讀取影像/圖像/視訊
寫入影像/圖像/視訊
擷取影像/圖像/視訊
影像處理/視訊處理
幾何圖形/視訊處理
模糊 清晰銳利
感興趣區塊
直方圖(曝光分析圖)
機械學習
主焦點框板
多焦點框板
影像焦點追蹤
視訊焦點追蹤
影像/視訊焦點擷取
影像/視訊焦點辨識
文字識別
---------------------------------------

https://docs.opencv.org/3.0-beta/index.html
-------------------
參數化輸出:注意資料型態
print("參數" % 參數名)
print("參數1--參數2" % 參數名)
%d  整數
%s  字串
%f   浮點數

格式化輸出:注意順序
print("字串值:{0}".format("值1"))
print("字串1{0}字串2{1}".format("值1","值 2"))

脫逸字元
\t  --Tab    \n   換行   \b 倒退健    \r 回自首


# -*- coding:UTF-8 -*-
from __future__ import print_function

print(100,"水果",60,sep="&")

print("%s有%d隻小狗" % ("曉明",30))

print("溫度%.2f" % 35.7834)
print("溫度%f" % 35.7834)

print("五的名字是:{0}".format("古力娜砸"))

print("我是:{0},專長是:{1}".format("程式設計師","Java"))

print("{0}\t{1}\t{2}\t{3}\t{4}\n".format("s1001","bill","70/11/04","A","大學"))

-------------------------------------------------------------------
運算子
1.算術運算子  +,-,*,/,%,//,**
2.關係運算子>,<,>=,<=,!=,==
3.邏輯運算子and,or,not
4.指定運算子+=,-=,*=,/=

b=True
print(int(b))
-----------------------------------
from __future__ import print_function

name=raw_input("請輸入姓名:")

print("姓名:{0}".format(name))
----------------------------------------
x=int(raw_input("數值一:"))
y=int(raw_input("數值二:"))
total=x+y

print("%d+%d=%d" % (x,y,total))
--------------

a=10;b=50
x=(a>=20) and (b<=100)

print(x)
-------
a=30;b=50

if (a>=20) and (b<=100):
print("條件成立")
else:

print(x)
-----------------------------
a=30;b=50

if (a>=20) or (b<=100):
print("條件成立")
else:

print("條件不成立")
-------------------------
a=30;b=50

if not((a>=20) or (b<=100)):
print("條件成立")
else:

print("條件不成立")
----------------------------------
位元運算子&
1.數值轉2進制
2.參考真值表
3.再轉為數值
ex  x=5
y=3
sum=5|3
print(sum) #7
----------------------
from __future__ import print_function

sum=8>>2
print(sum,"\n")

total=8<<2

print(total)
--------------------------
from __future__ import print_function
x=int(raw_input("國文:"))
y=int(raw_input("英文:"))
z=int(raw_input("數學:"))

sum=x+y+z
avg=sum/3
print("國文\t英文\t數學\t總分\t平均\n")

print("%d\t%d\t%d\t%d%.2f" % (x,y,z,sum,avg))
--------------------------------------------------------
num=int(raw_input("請輸入0-100數值:"))
if (num>=0) and (num<=100):
print("正常範圍值")
else:

print("超出")
===========
score=int(raw_input("請輸入分數:"))

if score>=90:
print("A")
elif score>=80:
print("B")
elif score>=70:
print("c")
elif score>=60:
print("D")
else:

print("不及格")
-------------------------
id=raw_input("帳號:")
pas=raw_input("密碼:")

if id=="p1003" and pas=="chin":
print("登入系統")
else:

print("登入失敗")
---------------------------------
range
n1=range(5)
n2=range(1,5+1)
n3=range(1,10,2)
n4=range(2,10+1,2)
n5=range(5,1-1,-1)
print(list(n1))
print(list(n2))
print(list(n3))
print(list(n4))

print(list(n5))
[0, 1, 2, 3, 4]
[1, 2, 3, 4, 5]
[1, 3, 5, 7, 9]
[2, 4, 6, 8, 10]

[5, 4, 3, 2, 1]
---------------------
ASCII
97-122 小寫英文字母
65-90  大寫
chr()ASCII轉字母
ord()字母轉ASCII
int()
float()
str()
---------------------------
from __future__ import print_function
for i in range(1,10+1,1):

print(i,end="\t")
______________________________
from __future__ import print_function

for i in range(65,90+1,1):

print(chr(i),end="")
____________________________________
11/9  exercise
from __future__ import print_function
t100=0
t100o=0
t100e=0
t10037=0
for i in range(1,100+1)://ex1
t100=t100+i
print(t100)
for i in range(1,100+1)://ex2
if (i%2)!= 0:
t100o=t100o+i
print(t100o)

for i in range(1,100+1,2)://ex3
t100e=t100e+i
print(t100e)

for i in range(1,100+1,1)://ex4
if ((i%3)==0):
t10037=t10037+i
if ((i%7)==0):
t10037=t10037+i
if (((i%3)==0)and((i%7)==0)):
t10037=t10037-i

print(t10037)

for i in range(1,9+1,1)://ex5
for j in range(1,9+1,1):
print("%d*%d=" % (i,j),i*j,end=("\t"))
print()

for i in range(1,6)://break
if i==4:
break
print(i)
for i in range(1,11)://continue
if i==6:
continue
print(i)

n=0//ex6
str1=""
m=0
str2=""
for i in range(97,106,1):
if i%2==0:
n=n+1
str1+=chr(i)
if i%2!=0:
m=m+1
str2+=chr(i)

print("偶數字元:%s....%d個" % (str1,n))

print("偶數字元:%s....%d個" % (str2,m))
***********
5050//ex1
2500//ex2
2500//ex3
2208//ex4
//ex5
1*1= 1 1*2= 2 1*3= 3 1*4= 4 1*5= 5 1*6= 6 1*7= 7 1*8= 8 1*9= 9
2*1= 2 2*2= 4 2*3= 6 2*4= 8 2*5= 10 2*6= 12 2*7= 14 2*8= 16 2*9= 18
3*1= 3 3*2= 6 3*3= 9 3*4= 12 3*5= 15 3*6= 18 3*7= 21 3*8= 24 3*9= 27
4*1= 4 4*2= 8 4*3= 12 4*4= 16 4*5= 20 4*6= 24 4*7= 28 4*8= 32 4*9= 36
5*1= 5 5*2= 10 5*3= 15 5*4= 20 5*5= 25 5*6= 30 5*7= 35 5*8= 40 5*9= 45
6*1= 6 6*2= 12 6*3= 18 6*4= 24 6*5= 30 6*6= 36 6*7= 42 6*8= 48 6*9= 54
7*1= 7 7*2= 14 7*3= 21 7*4= 28 7*5= 35 7*6= 42 7*7= 49 7*8= 56 7*9= 63
8*1= 8 8*2= 16 8*3= 24 8*4= 32 8*5= 40 8*6= 48 8*7= 56 8*8= 64 8*9= 72
9*1= 9 9*2= 18 9*3= 27 9*4= 36 9*5= 45 9*6= 54 9*7= 63 9*8= 72 9*9= 81
//break
1
2
3
//continue
1
2
3
4
5
7
8
9
10
//ex6
偶數字元:bdfh....4個
偶數字元:acegi....5個

_____________________________
字串
str1="Hello Python!"
len1=len(str1)

print("字串長度;%d" % len1)
-----------------------
str1=" Hello Python! "

print(str1.strip())
print(str1.lstrip())

print(str1.rstrip())
//HELLO PYTHON!
hello python!
-1
6
---------------------------------
str1="Hello Python!"
print(str1.upper())
print(str1.lower())
s=str1.find('p')
print(s)
s=str1.find('P')

print(s)
----------
str1="Hello python"
s=str1.replace("python","Java")

print(s)
------------
str1="Hello Python"
len1=len(str1)

for i in range(0,len1,1):
if str1[i].isupper():
print(str1[i])
for i in str1:
print(i,type(i))


t=str1.startswith("He")
t1=str1.endswith("on")
print(t)

print(t1)
================
str1="Oracle Java Develement Studio"

n=0
for i in str1:
if i in 'a':
n+=1

print(n)
---------------------
Slice    ====
str1="AI Python Program"

s=str1[3:]
print(s)

s1=str1[:10]
print(s1)

s2=str1[3:10]
print(s2)

s3=str1[-1]

print(s3)
==
Python Program
AI Python
Python

m
-----------------------------------
import random as r

for i in range(1,5+1):
print("%.1f" % r.random())

for i in range(1,5+1):
v=r.randint(1,100)
print(v)
for i in range(1,5+1):
v1=r.randrange(1,100,3)

print(v1)
----------------------
串列
1.直接表示法
2.不定長度表示法
3.
a=[10,20,30,40,50]

print(a[0])
print(a[1])
print(a[2])
print(a[3])
print(a[4])

len1=len(a)
for i in range(0,len1,1):
print(a[i])

a1=[12,56,99,21,52]
len1=len(a1)
for i in range(len1-1,0-1,-1):
print(a[i])

print(max(a1))
print()
print(min(a1))
print()

c=sorted(a1)
c1=sorted(a1,reverse=True)
total=sum(a)
for i in range(0,len1):
print(c[i])
for i in range(0,len1):
print(c1[i])

print(total)
---------------------
list ex1
list1=[10,20,30,40,50]

num=int(raw_input("請輸入0-100數值:"))

if num in list1:
print("%d在串列中" % num)
else:

print("%d不在串列中" % num)
-------------------------------

mylist1=[]
qp="delphi"
mylist1.append("java")
mylist1.append("javascript")
mylist1.append("delphi")
mylist1.append(30)
mylist1.append("c++")
mylist1.append("A")
mylist1.append("jQuery")
mylist1.append(True)
mylist1.insert(2,"php")
mylist1.remove(qp)

for i in mylist1:

print(i)
======================
dict字典{}
dict1={"java":350,"c++":250,"html":150,"css":100,"lua":450}

len1=len(dict1)
print(len1)

print(dict1["java"])
print(dict1["c++"])
print(dict1["html"])
print(dict1["css"])
print(dict1["lua"])

k=list(dict1.keys())
print(k)
for i in range(0,len1):

print(k[i])

v=list(dict1.values())
len2=len(v)
for i in range(0,len2):

print(v[i])
_____________________
5
350
250
150
100
450
['lua', 'html', 'java', 'css', 'c++']
lua
html
java
css

c++
450
150
350
100

250
------
data={"java":350,"c++":250,"html":150,"css":100,"lua":450}

it=list(data.items())
len1=len(it)

for i in range(0,len1):

print(list(it[i]))
===============
['lua', 450]
['html', 150]
['java', 350]
['css', 100]
['c++', 250]
--------------------------
11/17
影像結構

二位陣列
import numpy as np

a=np.array([12,13,14])

len1=len(a)
print(len1)
print(a)

for i in range(0,len1):

print(a[i])
______________________
import numpy as np

b=np.array([[12,56],[34,78]])
len1=len(b)
len2=len(b[0])

for i in range (0,len1):
    for j in range(0,len2):

         print(b[i][j])  #12 56 34 78
_________________________

import numpy as np
a=np.array([[1,2,3],[4,5,6]])
print(a)
print()
b=a.reshape(3,2)
print(b)
len1=len(b)
len2=len(b[0])
for i in range(0,len1):
     for j in range(0,len2):
         print(b[i][j])
______________________
[[1 2 3]
[4 5 6]]

[[1 2]
[3 4]
[5 6]]
1
2
3
4
5
6

---------
import numpy as np

a=np.arange(9).reshape(3,3)
print(a)
b=np.arange(24)
print(b)
x=np.array([1,2,3,4,5],dtype=np.int64)

print(x)
#[[0 1 2]
[3 4 5]
[6 7 8]]
[ 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23]
[1 2 3 4 5]
--------------

import numpy as np

x=np.zeros((5),dtype=np.int)#一維
print(x)
y=np.zeros((5,5),dtype=np.uint8)#二維

print(y)
#[0 0 0 0 0]
[[0 0 0 0 0]
[0 0 0 0 0]
[0 0 0 0 0]
[0 0 0 0 0]
[0 0 0 0 0]]
-------------------------------

import numpy as np
import cv2


img=cv2.imread("pic1.jpg")
total=img.shape
print(total)

sum=img.size
print(sum)


print(img[100,100,1])
#(170, 255, 3)
130050
92
_____________________
_import numpy as np
import cv2


img=cv2.imread("x3.jpg")
total=img.shape
print(total)
rtotal=0
for i in range(0,170):
    for j in range(0,250):
          rtotal=rtotal+img[i,j,2]
print(rtotal)

gtotal=0
for i in range(0,170):
     for j in range(0,250):
          gtotal=gtotal+img[i,j,1]
print(gtotal)

btotal=0
for i in range(0,170):
     for j in range(0,250):
         btotal=btotal+img[i,j,0]
print(btotal)
#__(201, 251, 3)
1838463
4174231
7823176
__________________
import numpy as np

x=np.ones((2,3),dtype=np.uint8)
print(x)
print("")
x[0][0]=215
x[0][1]=115
x[0][2]=45
x[1][0]=32
x[1][1]=125
x[1][2]=200


print(x)
#[[1 1 1]
[1 1 1]]

[[215 115 45]
[ 32 125 200]]
_______________
np.asarray
import numpy as np

x=[1,2,3,4,5,6]
y=np.asarray(x)

print(y)
--------------------
import numpy as np
import cv2


img=cv2.imread("pic1.jpg")
total=img.shape
print(total)

sum=img.size
print(sum)


print(img[100,100,1])
#(170, 255, 3)
130050
92
===================
import numpy as np
import cv2


img=cv2.imread("x3.jpg")
total=img.shape
print(total)
rtotal=0
for i in range(0,170):
   for j in range(0,250):
       rtotal=rtotal+img[i,j,2]
print(rtotal)

gtotal=0
for i in range(0,170):
    for j in range(0,250):
           gtotal=gtotal+img[i,j,1]
print(gtotal)

btotal=0
for i in range(0,170):
            for j in range(0,250):
                   btotal=btotal+img[i,j,0]

print(btotal)
#(201, 251, 3)
1838463
4174231
7823176偏藍
=========================
11/23
import numpy as np

x=[1,2,3,4,5]
#y=np.asarray(x,dtype=np.float)     #1.0 2.0 3.0 4.0 5.0
y=np.asarray(x,dtype=np.uint8)  #1 2 3 4 5
len1=len(y)
for i in range(0,len1):
    print(y[i])
--------------------------------------
from __future__ import print_function
import numpy as np

s="Hello Opencv"
#y=np.asarray(x,dtype=np.float)
x=np.frombuffer(s,dtype="S1")
len1=len(x)
for i in range(0,len1):

print(x[i],end='')
#['H' 'e' 'l' 'l' 'o' ' ' 'O' 'p' 'e' 'n' 'c' 'v']
Hello Opencv
--------------------------
import numpy as np

n1=np.array([1,3,5,6,2,3])
n2=np.array([3,7,1,7,8,2])
n3=n1+n2

print(n3.reshape(3,2))
#[[ 4 10]
[ 6 13]
[10 5]]

import numpy as np

mydata=[]
n1=np.array([1,3,5,6,2,3])
n2=np.array([3,7,1,7,8,2])
len1=len(n1)
for i in range(0,len1):
       mydata.append(n1[i]+n2[i])
n3=np.array(mydata).reshape(3,2)

print(n3)
#[[ 4 10]
[ 6 13]
[10 5]]
=====================
https://www.geeksforgeeks.org/python-detect-polygons-in-an-image-using-opencv/
Open CV: Java/c/c++/python/android跨平台
1.cv2.__VERSION版本編號
2.cv2.imread(圖片路徑,1)
   cv2.imread(圖片路徑,0)
3.cv2.imshow("抬頭名稱",圖片元件)
4.cv2.waitKey(0)等候鍵盤按鍵
5.cv2.destropAllWindows()釋放記憶體空間

import cv2

print cv2.__version__
#image=cv2.imread("x1.jpg",1)
image=cv2.imread("x1.jpg",0)
cv2.imshow("demo",image)
k=cv2.waitKey(0)
if cv2.waitKey(0) & 0xFF == ord('q'):

cv2.destroyAllWindows()
====================
按q鍵結束
k=cv2.waitKey(0)
if  k==ord('q'):
      break
1.矩陣像素元件
image[i,j]
2.圖像大小解析度
shape==>[高,寬,通道數]
#imgread1.py
import cv2
import numpy as np

img=cv2.imread("pic1.jpg")
len1=img.shape
print(len1)

print("height:",len1[0])
print("width:",len1[1])

print("turnel:",len1[2])
#(170, 255, 3)
('height:', 170)
('width:', 255)
('turnel:', 3)
=========================
from __future__ import print_function
import numpy as np
import cv2


img=cv2.imread("x3.jpg")
for i in range(10,20+1):
for j in range(10,20+1):
img[i,j]=[255,255,255]
while (1):
cv2.imshow("image",img)
k=cv2.waitKey(0)
if k==ord('q'):
break

cv2.destroyAllWindows()
====================
from __future__ import print_function
import numpy as np
import cv2


img=cv2.imread("x3.jpg")
cv2.namedWindow("image",cv2.WINDOW_NORMAL)#openvc自訂視窗
cv2.resizeWindow("image",800,500)

len=img.shape #值不變
print(len)

len1=img.size #不變
print(len1)

while (1):
cv2.imshow("image",img)
k=cv2.waitKey(0)
if k==ord('q'):
break

cv2.destroyAllWindows()
#(201, 251, 3)
151353
----------------------------------------------
ex1
from __future__ import print_function
import numpy as np
import cv2

k=int(raw_input("選單(1)200*100(2)500*300(3)800*500,請選擇:"))

img=cv2.imread("x1.jpg")
cv2.namedWindow("image",cv2.WINDOW_NORMAL)

if k==1:
cv2.resizeWindow("image",200,100)
elif k==2:
cv2.resizeWindow("image",500,300)
elif k==3:
cv2.resizeWindow("image",800,500)

while (1):
cv2.imshow("image",img)
k1=cv2.waitKey(0)
if k1==ord('q'):
break

cv2.destroyAllWindows()
========================
ex2
from __future__ import print_function
import numpy as np
import cv2

k=int(raw_input("選單(1)圖一(2)圖二(3)圖三,請選擇:"))
if k==1:
img=cv2.imread("x1.jpg")
elif k==2:
img=cv2.imread("x2.jpg")
elif k==3:
img=cv2.imread("x3.jpg")

cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",800,500)

while (1):
cv2.imshow("image",img)
k1=cv2.waitKey(0)
if k1==ord('q'):
break

cv2.destroyAllWindows()
==============================
ex3
from __future__ import print_function
import numpy as np
import cv2

while (1):
k=int(raw_input("選單(1)圖片一(2)圖片二(3)圖片三(4)結束 請選擇:"))
if k==1:
img=cv2.imread("x1.jpg")
elif k==2:
img=cv2.imread("x2.jpg")
elif k==3:
img=cv2.imread("x3.jpg")
elif k==4:
break

cv2.imshow("image",img)
k1=cv2.waitKey(0)
if k1==ord('q'):
break

cv2.destroyAllWindows()
=================
正常程序
from __future__ import print_function
import numpy as np
import cv2

def menuitem():
try:
k=int(raw_input("選單(1)圖片一(2)圖片二(3)圖片三(4)結束 請選擇:"))
if k==1:
img=cv2.imread("x1.jpg")
elif k==2:
img=cv2.imread("x2.jpg")
elif k==3:
img=cv2.imread("x3.jpg")
elif k==4:
quit

showvalue(img)
except:
print("")

def showvalue(im):
try:
cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",800,500)

while (1):
cv2.imshow("image",im)
k1=cv2.waitKey(0)
if k1==ord('q'):
break
cv2.destroyAllWindows()
menuitem()
except:
print("")

if __name__=="__main__":

menuitem()
==================
https://www.geeksforgeeks.org/python-detect-corner-of-an-image-using-opencv/
=====================
同時秀兩張
from __future__ import print_function
import numpy as np
import cv2

img=cv2.imread("x3.jpg")
cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",800,500)
img2=cv2.imread("x2.jpg")
cv2.namedWindow("image1",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image1",800,500)



while (1):
cv2.imshow("image",img)
cv2.imshow("image1",img2)
k=cv2.waitKey(0)
if k==ord('q'):
break
cv2.destroyAllWindows()

====================
模糊一
from __future__ import print_function
import numpy as np
import cv2

img=cv2.imread("x3.jpg")
cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",800,500)
blur=cv2.blur(img,(5,5))
cv2.namedWindow("blur",cv2.WINDOW_NORMAL)
cv2.resizeWindow("blur",800,500)

while (1):
cv2.imshow("image",img)
cv2.imshow("blur",blur)
k=cv2.waitKey(0)
if k==ord('q'):
break
cv2.destroyAllWindows()
============================


from __future__ import print_function
import numpy as np
import cv2


img=cv2.imread("x3.jpg",cv2.IMREAD_COLOR)
#img=cv2.imread("x3.jpg",1)
cv2.imwrite("hope1.jpg",img)
print("success")
while (1):
cv2.imshow("image",img)
k=cv2.waitKey(0)
if k==ord('q'):
break

cv2.destroyAllWindows()
==
matplotlib

import numpy as np
import cv2
from matplotlib import pyplot as plt

img=cv2.imread("pic3.jpg")
img_rgb=cv2.cvtColor(img,cv2.COLOR_BGR2RGB)

plt.imshow(img_rgb)

plt.show()
+++++++++++++++++++
灰白\
img=cv2.imread("pic3.jpg",cv2.IMREAD_GRAYSCALE)


plt.imshow(img,cmap="gray")

plt.show()
====================
import numpy as np
import cv2
from matplotlib import pyplot as plt

img=cv2.imread("pic3.jpg")
img_rgb=cv2.cvtColor(img,cv2.COLOR_BGR2RGB)



plt.imshow(img,cmap="gray")

plt.show()
+++++++++++++++++++++
import cv2
import numpy as np
from matplotlib import pyplot as plt

img=cv2.imread("pic1.jpg")
img_rgb=cv2.cvtColor(img,cv2.COLOR_BGR2RGB)
img2=cv2.imread("pic2.jpg")
img2_rgb=cv2.cvtColor(img2,cv2.COLOR_BGR2RGB)

plt.subplot(121)
plt.imshow(img_rgb)
plt.subplot(122)
plt.imshow(img2_rgb)


plt.show()
+++++++++++++++++++++++++
import cv2
import numpy as np
from matplotlib import pyplot as plt

img=cv2.imread("pic1.jpg")
img_rgb=cv2.cvtColor(img,cv2.COLOR_BGR2RGB)
img2=cv2.imread("pic2.jpg")
img2_rgb=cv2.cvtColor(img2,cv2.COLOR_BGR2RGB)
img3=cv2.imread("pic3.jpg")
img3_rgb=cv2.cvtColor(img3,cv2.COLOR_BGR2RGB)
img3_gray=cv2.cvtColor(img3,cv2.IMREAD_GRAYSCALE)

plt.subplot(221)#安排兩列兩行的排版
plt.imshow(img_rgb)
plt.subplot(222)
plt.imshow(img2_rgb)
plt.subplot(223)
plt.imshow(img3_rgb)
plt.subplot(224)
plt.imshow(img3_gray,cmap='gray')


plt.show()
-------------------------
https://kknews.cc/zh-tw/code/gg2bej8.html
11/30
import numpy as np
import cv2
from matplotlib import pyplot as plt

#讀取圖檔
img=cv2.imread("C:\\openCVproject1\\fish1.jpg")
#轉為灰階
gray=cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)
#計算質方圖每個bin數值[影像,通道,遮罩,區間數量質方圖,像素質範圍]
hist1=cv2.calcHist([img],[0],None,[256],[0,256])
hist2=cv2.calcHist([img],[1],None,[256],[0,256])
hist3=cv2.calcHist([img],[2],None,[256],[0,256])


#劃出分布圖
plt.plot(hist1)
plt.plot(hist2)
plt.plot(hist3)
plt.show()

https://blog.gtwang.org/programming/python-opencv-matplotlib-plot-histogram-tutorial/
https://morvanzhou.github.io/tutorials/data-manipulation/plt/2-3-axis1/
https://www.kancloud.cn/aollo/aolloopencv/263215
http://www2.nkfust.edu.tw/~shanhuen/PythonTutorialHtml/Matplotlib/Matplotlib1.html
---------------------------
12/07
import cv2

cv2.namedWindow("frame")
cap=cv2.VideoCapture(0)


while(True):
ret,img=cap.read()

if ret==True:
cv2.imshow("frame",img)
k=cv2.waitKey(1)

if k==ord("z") or k==ord("Z"):
cv2.imwrite("C:\\openCVproject1\\media\\ft.jpg",img)
break

cap.release()
cv2.waitKey(0)

cv2.destroyWindow("frame")
------------------------------------------------
opencv畫布
np.zeros((512,512,3.),np.uint8) 黑色畫布
線條
----------------------
import numpy as np
import cv2

img=np.zeros((512,512,3),np.uint8)
cv2.line(img,(10,30),(200,30),(0,0,255),5)
cv2.imshow("drawline",img)
cv2.waitKey(0)

cv2.destroyAllwindows()
---------------------------
import numpy as np
import cv2

img=np.zeros((512,512,3),np.uint8)+255
cv2.line(img,(10,30),(200,30),(0,0,255),5)
cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",500,250)
cv2.imshow("image",img)
cv2.waitKey(0)

cv2.destroyAllWindows()
-----------------------------
import numpy as np
import cv2
import time

k=1
img=cv2.imread("../x1.jpg")
total=img.shape

#img=np.zeros((512,512,3),np.uint8)+255
for i in range(0,total[0],20):
if ((k%2)==0):
cv2.line(img,(0,i),(total[1],i),(255,0,0),5)
else:
cv2.line(img,(0,i),(total[1],i),(0,255,0),5)
k=k+1

#cv2.line(img,(0,500),(500,0),(0,0,255),5)
#cv2.namedWindow("image",cv2.WINDOW_NORMAL)
#cv2.resizeWindow("image",500,250)
cv2.imshow("image",img)
cv2.waitKey(0)

cv2.destroyAllWindows()
-----------------------------------------------
cv2.rectangle(img,(100,100),(200,200),(0,0,255),5) #畫矩形

cv2.ellipse(img,(250,250),(100,100),0,0,360,(0,0,255),-1)
----------------------------------
import numpy as np
import cv2
import random as ra

src=cv2.imread("../x1.jpg")
res=cv2.resize(src,(512,512),interpolation=cv2.INTER_CUBIC)
img=np.zeros((512,512,3),np.uint8)+255

total=img.shape
for i in range(100+1):
x=ra.randint(0,512)
y=ra.randint(0,512)
b=ra.randint(0,255)
g=ra.randint(0,255)
r=ra.randint(0,255)
cv2.circle(img,(x,y),10,(b,g,r),1)

wimg=cv2.addWeighted(res,0.2,img,0.4,0)

cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",512,512)
cv2.imshow("image",img)
cv2.waitKey(0)

cv2.destroyAllWindows()
--------------------------
import numpy as np
import cv2

img=np.zeros((512,512,3),np.uint8)+255

cv2.putText(img,'Hello OPENCV',(50,150),cv2.FONT_HERSHEY_SCRIPT_COMPLEX,1,(0,0,255),2)
cv2.putText(img,'Hello OPENCV',(50,180),cv2.FONT_HERSHEY_SCRIPT_SIMPLEX,1,(0,0,255),2)
cv2.putText(img,'Hello OPENCV',(50,210),cv2.FONT_HERSHEY_DUPLEX,1,(0,0,255),2)
cv2.putText(img,'Hello OPENCV',(50,240),cv2.FONT_HERSHEY_TRIPLEX,1,(0,0,255),2)
cv2.putText(img,'Hello OPENCV',(50,270),cv2.FONT_ITALIC,1,(0,0,255),2)

#cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",1000,500)
while True:
cv2.imshow("draweclips",img)
k=cv2.waitKey(0)
if k==ord('q'):
break


cv2.destroyAllWindows()
--------------------------------------------
import numpy as np
import cv2

str1="java,c++,delphi,javascript,pascal"
data=str1.split(',')
len1=len(data)
print(len1)
k=150
img=np.zeros((512,512,3),np.uint8)+255
for i in range(0,len1,1):
cv2.putText(img,str(i+1)+':'+data[i],(50,k),cv2.FONT_HERSHEY_SCRIPT_COMPLEX,1,(0,0,255),2)
k=k+30




#cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",1000,500)
while True:
cv2.imshow("putText",img)
k=cv2.waitKey(0)
if k==ord('q'):
break


cv2.destroyAllWindows()
------------------------
import numpy as np
import cv2

def nothing(x):
pass

img=np.zeros((512,512,3),np.uint8)+255
cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",600,500)
cv2.createTrackbar("R","image",0,255,nothing)
cv2.createTrackbar("G","image",0,255,nothing)
cv2.createTrackbar("B","image",0,255,nothing)



while True:
cv2.imshow("image",img)
r=cv2.getTrackbarPos("R","image")
g=cv2.getTrackbarPos("G","image")
b=cv2.getTrackbarPos("B","image")
img[:]=[b,g,r]
k=cv2.waitKey(1)
if k==ord('q'):
break


cv2.destroyAllWindows()
-------------------------------------------
import numpy as np
import cv2

def nothing(x):
r=cv2.getTrackbarPos("R","image")
g=cv2.getTrackbarPos("G","image")
b=cv2.getTrackbarPos("B","image")
img[:]=[b,g,r]
cv2.imshow("image",img)

img=np.zeros((512,512,3),np.uint8)
cv2.namedWindow("image",cv2.WINDOW_NORMAL)
cv2.resizeWindow("image",600,500)
cv2.createTrackbar("R","image",0,255,nothing)
cv2.createTrackbar("G","image",0,255,nothing)
cv2.createTrackbar("B","image",0,255,nothing)
cv2.imshow("image",img)



while True:
k=cv2.waitKey(0)
if k==ord('q'):
break


cv2.destroyAllWindows()
----------------------------------------
import numpy as np
import cv2

d=False
point1=()
point2=()

def draw_rect(event,x,y,flags,param):
global point1,point2,d
if event==cv2.EVENT_LBUTTONDOWN:
if d==False:
d=True
point1=(x,y)
else:
d=False

elif event==cv2.EVENT_RBUTTONDOWN:
if d==True:
point2=(x,y)



img=np.zeros((512,512,3),np.uint8)+255
cv2.namedWindow('image')
cv2.setMouseCallback("image",draw_rect)

while True:

if point1 and point2:
cv2.rectangle(img,point1,point2,(0,255,0),3)
point1=()
point2=()

cv2.imshow("image",img)
if cv2.waitKey(1)==ord('q'):
break


cv2.destroyAllWindows()
-----------------------
import dlib
import imutils
import cv2

img=cv2.imread("human01.jpg")
img=imutils.resize(img,width=1200)
detector=dlib.get_frontal_face_detector()
face_rects=detector(img,0)
for i ,d in enumerate(face_rects):
x1=d.left()
y1=d.top()
x2=d.right()
y2=d.bottom()
cv2.rectangle(img,(x1,y1),(x2,y2),(0,255,0),4)
cv2.imshow("Face-detection",img)
cv2.waitKey(0)

cv2.destroyAllWindows()
----------------------------------
12/14
http://www.kancloud.cn:8080/aollo/aolloopencv/261446
-------------
import cv2

cv2.namedWindow("frame")
cap=cv2.VideoCapture(0)


while(True):
ret,img=cap.read()

if ret==True:
cv2.imshow("frame",img)
k=cv2.waitKey(1)

if k==ord("z") or k==ord("Z"):
cv2.imwrite("C:\\openCVproject1\\1214\\media\\ft.jpg",img)
break

cap.release()
cv2.waitKey(0)

cv2.destroyWindow("frame")
-----------------------------
waitKey(1) 中的数字代表等待按键输入之前的无效时间,单位为毫秒,在这个时间段内按键 ‘q’ 不会被记录,在这之后按键才会被记录,并在下一次进入if语段时起作用。也即经过无效时间以后,检测在上一次显示图像的时间段内按键 ‘q’ 有没有被按下,若无则跳出if语句段,捕获并显示下一帧图像。

若此参数置零,则代表在捕获并显示了一帧图像之后,程序将停留在if语句段中一直等待 ‘q’ 被键入。

cv2.waitKey(1) 与 0xFF(1111 1111)相与是因为cv2.waitKey(1) 的返回值不止8位,但是只有后8位实际有效,为避免产干扰,通过 ‘与’ 操作将其余位置0。
__________________________
import cv2

cv2.namedWindow("frame")
cap=cv2.VideoCapture(0)
n=0

while(True):
ret,img=cap.read()

if ret==True:
cv2.imshow("frame",img)
k=cv2.waitKey(1)

if k==ord("w") or k==ord("W"):
n=n+1
d="C:\\Opencvproject1\\1214\\media\\ft"+str(n)+".jpg"
cv2.imwrite(d,img)

if k==ord("z") or k==ord("Z"):
break

cap.release()
cv2.waitKey(0)

cv2.destroyWindow("frame")
____________________________
import numpy as np
import cv2

cap=cv2.VideoCapture("vi.avi")
n=0

while(True):
try:
ret,img=cap.read()
cv2.imshow("frame",img)
if cv2.waitKey(0)==ord('q'):
break
except:
print("end.....")
cap.release()
cv2.destoryAllwindows()
break


cap.release()


cv2.destroyAllWindowsWindow()
---------------------
讀取喜歡的影格,並存下
import numpy as np
import cv2

cap=cv2.VideoCapture("vi.avi")
n=0

while(True):
try:
ret,img=cap.read()
if ret==True:
cv2.imshow("frame",img)
k=cv2.waitKey(50)
if k==ord('q'):
cap.release()
cv2.destoryAllwindows()
break

if k==ord('z') or k==ord("Z"):
cv2.imwrite("C:\\Opencvproject1\\1214\\media\\ft"+str(n)+".jpg",img)
n=n+1
else:
cap.release()
cv2.destoryAllwindows()
break


except:
print("end.....")
cap.release()
cv2.destoryAllwindows()
break


cap.release()

cv2.destroyAllWindowsWindow()
--------------------------
import cv2

cv2.namedWindow("frame")
cap=cv2.VideoCapture(0)
fourcc=cv2.VideoWriter_fourcc(*'DIB ')
out=cv2.VideoWriter("C:\\Opencvproject1\\1214\\media\\output7.avi",fourcc,3.0,(640,480))

while(True):
ret,img=cap.read()
if ret==True:
frame=cv2.flip(img,1)
out.write(frame)
cv2.imshow("frame",img)
k=cv2.waitKey(1)
if k==ord('q'):
break


cap.release()
out.release()

cv2.destroyWindow("frame")
-------------------------------
擷取送至網頁輸出
import numpy as np
import cv2
import os

cap=cv2.VideoCapture(0)
n=1

while(True):
try:
ret,img=cap.read()
if ret==True:
cv2.imshow("frame",img)
k=cv2.waitKey(1)
if k==ord('q'):
cap.release()
cv2.destroyAllWindows()
os.system('"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" C:\\Opencvproject1\\1214\\media\\chindata3.html')
break

if k==ord('z') or k==ord("Z"):
cv2.imwrite("C:\\Opencvproject1\\1214\\media\\chin"+str(n)+".jpg",img)
n=n+1
if n==6:
n=1
else:
cap.release()
cv2.destoryAllwindows()
break


except:
print("end.....")
cap.release()
cv2.destroyAllWindows()
break


cap.release()
cv2.destroyAllWindows()

------------------------------------
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
  $(document).ready(function()
  {
  $("a img").click(function()
  {
  var k=$(this).attr("src");
  $("#total").attr("src",k);
  });

  $("#tab1 tr td").mouseover(function()
  {
  $(this).css("background-color","pink");
  });

  $("#tab1 tr td").mouseleave(function()
  {
  $(this).css("background-color","transparent");
  });
  });
</script>
<body>
<div id="dv1" style="width:1050px;height:180px; background-color:#9CF;">
<table border="0" width="1050" id="tab1" height="180" >
  <tr>
    <td align="center">
      <a href="javascript:void;" id="a1" >
       <img id="img1" src="chin1.jpg" width="200" height="150" />
      </a>
    </td>
    <td align="center">
      <a href="javascript:void;" id="a2" >
       <img id="img2" src="chin2.jpg" width="200" height="150" />
      </a>
    </td>
    <td align="center">
      <a href="javascript:void;" id="a3">
       <img id="img3" src="chin3.jpg" width="200" height="150" />
      </a>
    </td>
    <td align="center">
      <a href="javascript:void;" id="a4">
       <img id="img4" src="chin4.jpg" width="200" height="150" />
      </a>
    </td>
    <td align="center">
      <a href="javascript:void;" id="a5">
       <img id="img5" src="chin5.jpg" width="200" height="150" />
      </a>
    </td>
  </tr>
</table>
</div>
<p>
<div id="dv1" style="width:1010px;height:570px; background-color:#000; padding:20px">
  <img id="total" src="chin1.jpg" width=1000 height=550 />
</div>
</body>
</html>
---------------------
import numpy as np
import cv2
import dlib
import imutils

cap=cv2.VideoCapture(0)
detector=dlib.get_frontal_face_detector()

while(cap.isOpened()):
ret,frame=cap.read()
face_rects=detector(frame,0)
for i,d in enumerate(face_rects):
x1=d.left()
y1=d.top()
x2=d.right()
y2=d.bottom()

cv2.rectangle(frame,(x1,y1),(x2,y2),(0,255,0),4)
        #text="Hello"
#cv2.putText(frame,text,(x1,y1),cv2.FONT_HERSHEY_PLAIN,0.7,(255,255,255),1)
cv2.imshow('frame',frame)
if cv2.waitKey(1)==ord('q'):
break

cap.release()


cv2.destroyAllWindows()

dlib.get_frontal_face_detector()
----------------------------
import numpy as np
import cv2
import dlib
import imutils

cap=cv2.VideoCapture(0)
detector=dlib.get_frontal_face_detector()

while(cap.isOpened()):
ret,frame=cap.read()
face_rects=detector(frame,0)
for i,d in enumerate(face_rects):
x1=d.left()
y1=d.top()
x2=d.right()
y2=d.bottom()

img=cv2.rectangle(frame,(x1,y1),(x2,y2),(0,255,0),4)
faceimg=frame[y1:y2,x1:x2]
k=cv2.waitKey(1)
if k==ord("z") or k==ord("Z"):
cv2.imwrite("C:\\Opencvproject1\\1214\\media\\face1.jpg",faceimg)

cv2.imshow('frame',frame)
#cv2.imread("C:\\Opencvproject1\\1214\\media\\face1.jpg",img)
if cv2.waitKey(1)==ord('q'):
break

cap.release()


cv2.destroyAllWindows()
-------------------------------------------

2019年10月22日 星期二

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

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

MCU
nodemcu-->GPIO-->模組

10/24
<script language="javascript">
function fun1()
{
alert("程式已被驅動");
}
</script>
</head>

<body>
<ol type="a">
<li><font color="#CC33FF">數位訊號</font></li>
    <li><b>類比訊號</b></li>
    <li><i>序列訊號</i></li>
</ol>
<p></p>
<ul type="disc">
<li>GPIO-2</li>
    <li>GPIO-4</li>
    <li>GPIO-5</li>
</ul>
<p></p>
<a href="http://www.google.com">GOOGLE</a>
<p></p>
<a href="hsub1.html">到子網頁</a>
<p></p>
<a href="javascript:void;" onclick="fun1()")>確定</a>
<p></p>
<a href="hsub1.html">
<img src="image/s1.jpg" width="80" height="50"  />
</a>
<table border="2" width="200" height="100" >
  <tr>
    <td align="center">A</td>
    <td align="center" valign="top">B</td>
  </tr>
  <tr>
    <td align="center" bgcolor="#FFFF00">C</td>
    <td  align="center" valign="bottom" bgcolor="#FFFFCC">D</td>
  
  </tr>
</table>
</body>
</html>
=================================
hsub1.html
<body>
子網頁內容
<p></p>
<a href="hchin1.html">回首頁</a>
</body>
++++++++++++++++++++++++++++++++++++++++++
10/29
<p></p>
<table border="2" width="500">
<tr>
<td colspan="5" bgcolor="#CC66FF">作品集一</td>
</tr>
<tr>
    <td>編號        </td>
        <td>作者        </td>
        <td>地點        </td>
        <td>日期        </td>
        <td rowspan="6">
        <img src="image/s2.jpg" width="200" height="150"/>
        </td>
     </tr>
    <td>S1001</td>
        <td>張三</td>
        <td>阿里山</td>
        <td>2019/8/3</td>
       
    <tr>
    <td>S1002</td>
        <td>李四</td>
        <td>合歡山</td>
        <td>2018/5/12</td>
       
    </tr>
    <tr>
    <td>S1003</td>
        <td>晨五</td>
        <td>系頂</td>
        <td>2104/9/3</td>
      
    </tr>
    <tr>
    <td>S1004</td>
        <td>人五</td>
        <td>墾丁</td>
        <td>2018/9/7</td>
    </tr>
    <tr>
    <td>S1005</td>
        <td>吳耿華</td>
        <td>合歡山</td>
        <td>2018/9/5</td>
     
    </tr>
    <tr>
<td colspan="5" align="right" bgcolor="#CC66FF">狀態列</td>
</tr>
</table>
+++++++++++++++++++++++++++++++++++++++

<form id="f1" name="f1" method="post">
<table border="2" width="200">
<tr>
        <td>姓名
        </td>
        <td>
        <input type="text" id="t1" name="t1" size="20" />
        </td>
    </tr>
    <td colspan="2">
        <input type="button" id="bt1" name="bt1" value="確定" />&nbsp;&nbsp; &nbsp;&nbsp;  
               &nbsp;&nbsp; &nbsp;&nbsp; 
               &nbsp;&nbsp; &nbsp;&nbsp; 
               &nbsp;&nbsp; &nbsp;&nbsp; 
                &nbsp;&nbsp;
            <input type="button" id="bt2" name="bt2" value="清除" 
            
/>        </td>
    <tr>
    </tr>
</table>
</form>
___________________________________________
10/31
排版元件   
<div id="">

</div>
css宣告:
<style type="text/css">
  元件{
     屬性:屬性值
  }
</style>
-------------------------------
tag
p{ color:#0CF;
  font-size:30px;
}
------------------
id
#p3,#p1{ color:#0CF;
  font-size:30px;
  border:#993;
  border-style:double;
  border-width:5px;
  width:150px;
}
-----------------------------------
指定重複休市

------------
<style type="text/css">
#dv1{
width:200px;
height:150px;
background-color:#F9C;
border-radius:50px 50px 50px 50px; /* 可用來製作按鈕  */
}
</style>
</head>

<body>
<div id="dv1">

</div>
-------------------------------------
圓角修飾
 border-radius:50px 50px 50px 50px
內部修飾
padding
外部修飾
margin
-----------------------------
<style type="text/css">
#dv1{
width:80px;
height:30px;
background-color:#F9C;
border-radius:50px 50px 50px 50px;
text-align:center;
padding-top:10px;
}
</style>
</head>

<body>
<div id="dv1">
開啟
</div>
---------------------------------
<style type="text/css">
#dv1{
width:80px;
height:30px;
background-color:#F9C;
border-radius:50px 50px 50px 50px;
text-align:center;
padding-top:10px;
font-size:14px;

}
#dv1:hover{
background-color:#33F;
}
a{
text-decoration:none;
}
</style>
</head>
<script language="javascript">
function fun1()
{
alert("bt被執行")
}
</script>

<body>
<a href="javascript:void;" onclick="fun1()" />
<div id="dv1">
開啟
</div>
</body>
________________________________
overflow:scroll
出現卷軸
------------
製作水平選單
<style type="text/css">
#ul1{
list-style:none;
}
#ul1 li{
display:inline;
margin-left:50px;
}
</style>
</head>

<body>
<ul type="disc" id="ul1">
<li>LED!</li>
    <li>LED2</li>
<li>LED3</li>
    <li>LED4</li>
    <li>LED5</li>
</ul>
</body>
_______________

#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>
______________________________

變數資料來源
1指定
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>
__________________
運算子
1算數
2關係
3邏輯
4指定
5位元&,|
6條件 (條件式)?"結果一":"結果二"
7遞增++
 遞減--
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
<script language="javascript">
function fun1()
{

var str="";
for(var i=1;i<=10;i++)
{
str=str+i+"&nbsp;&nbsp;&nbsp;&nbsp;"
}
//alert(str);
document.getElementById("sp1").innerHTML=str;
}
</script>
<body>
<a href="javascript:void;" id="a1" onclick="fun1()" >執行</a>
<p></p>
<span id="sp1"></span>
----------------------------------
array
重點
1.總長度;陣列名稱.length,回整數值
2.輸出正迴圈,逆迴圈
3.輸入
      HTML元件,表單,網路元件
4.邏輯
   最大,最小,排序,搜尋
<script language="javascript">
function fun1()
{
var a=new Array(66,55,3,99,50);//直接表示法
a.sort();
a.reverse();//逆排序(sort(),reverse()一起)
str="";
for(var i=0;i<a.length;i++)
{
str=str+a[i]+" ";
}
alert(str);
}
</script>
<body>
<a href="javascript:void" id="a1" onclick="f
__________________________
<script language="javascript">
function fun1()
{

var a=[];//間接表示法,先決定記憶體空間再給值
var len1=document.getElementsByTagName("span").length;
for (var i=0;i<len1;i++)
{
a[i]=parseInt(document.getElementById("sp"+(i+1)).innerHTML);
}
var max=0;
for(var i=0;i<len1;i++)
{
if(max<a[i])
{
max=a[i];
}
}
alert("最大值"+max);
//alert(a);
}
</script>
<body>
<span id="sp1">66</span>
<p></p>
<span id="sp2">55</span>
<p></p>
<span id="sp3">3</span>
<p></p>
<span id="sp4">99</span>
<p></p>
<span id="sp5">50</span>
<p></p>
<a href="javascript:void;" id="a1" onclick="fun1()" >執行</a>
</body>
___________________________
<script language="javascript">
function fun1()
{
var a=new Array(10,20,30,40,50);
var len1=a.length;
var str="";
for (var i=0;i<len1;i++)
{

str+=a[i]+"&nbsp;&nbsp;&nbsp;&nbsp;";
}
document.getElementById("sp1").innerHTML=str;
}
function fun2()
{

var a=new Array(10,20,30,40,50);

var len1=a.length;
var str="";
for (var i=len1-1;i<0;i--)
{
str+=a[i]+"&nbsp;&nbsp;&nbsp;&nbsp;";
}
document.getElementById("sp1").innerHTML=str;
}
</script>
<body>
<a href="javascript:void" id="a1" onclick="fun1()" >正迴圈取值</a>
<a href="javascript:void" id="a2" onclick="fun2()" >逆迴圈取值</a>
<p></p>
<span id="sp1"></span>
</body>
___________________
<script language="javascript">
function fun1()
{

var a=[];

a.push(parseInt(document.getElementById("sp1").innerHTML));
a.push(parseInt(document.getElementById("sp2").innerHTML));
a.push(parseInt(document.getElementById("sp3").innerHTML));
a.push(parseInt(document.getElementById("sp4").innerHTML));
a.push(parseInt(document.getElementById("sp5").innerHTML));
str="";
for(var i=0;i<a.length;i++)
{
str=str+a[i]+" ";
}
alert(str);
var max=0;
for(var i=0;i<a.length;i++)
{
if(max<a[i])
{
max=a[i];
}
}
alert("最大值"+max);
//alert(a);
}
</script>
<body>
<span id="sp1">66</span>
<p></p>
<span id="sp2">55</span>
<p></p>
<span id="sp3">3</span>
<p></p>
<span id="sp4">99</span>
<p></p>
<span id="sp5">50</span>
<p></p>
<a href="javascript:void;" id="a1" onclick="fun1()" >執行</a>
</body>
----------------------
11/14
函數
1.架構無參數無回傳值  變數為全域
2.架構二 有參數無回傳值
3.架構 無參數有回傳值
4架構四有參數有回傳值
5.學習重點
    1.程式易於維護
    2.元件撰寫和設計\
    3功能整理

DOM文件物件模型
1.以id方式取值
<span id-"sp2">程式</span>
a.取值
document.getElementById("sp1").innerHTML;
b.給值
document.getElementById('sp1").innerHTML=
.
架構一;全域變數
<script language="javascript">
var t=50;
function fun1()
{
var t=20;
document.getElementById("sp1").innerHTML=t;
fun2()
}
function fun2()
{
document.getElementById("sp2").innerHTML=t;
}
</script>
<body>
<a href="javascript:void;" id="a1" onclick="fun1()" >執行</a>
<p></p>
<span id="sp1"></span>
<p></p>
<span id="sp2"></span>
_________________________________
架構二  區域變數
<script language="javascript">
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>
<a href="javascript:void;" id="a1" onclick="fun1()" >架構二</a>
<p></p>
<span id="sp1"></span>
__________________
架構三  區域變數
<script language="javascript">
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>
<a href="javascript:void;" id="a1" onclick="fun1()" >架構三</a>
<p></p>
<span id="sp1"></span>
______________________
架構四 
<script language="javascript">
function fun1()
{
var a=70;
var b=20
var t=fun2(a,b);
document.getElementById("sp1").innerHTML=t;
}
function fun2(x,y)
{
var sum=x+y;
return sum;
}
</script>
<body>
<a href="javascript:void;" id="a1" onclick="fun1()" >架構四</a>
<p></p>
<span id="sp1"></span>
_______________________________________
funcom4.js
// JavaScript Document
function fun2(x,y)
{
var sum=x*y+100;
return sum;
}
_______________
<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]+"&nbsp;&nbsp;";
}
document.getElementById("sp1").innerHTML=str;
}

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


<script language="javascript">
function fun1()
{
var a=fun2();
var alen=a.length;
alert(a);
var str="";
for (var u=0;u<alen;u++)
{
str=str+a[u]+"&nbsp;&nbsp;";
}
document.getElementById("sp1").innerHTML=str;


}
function fun2()
{
var t=new Array(12,34,56,78,10);
return t;
}

</script>
<body>
<a href="javascript:void;" id="a1" onclick="fun1()" >陣列回傳值</a>
<p></p>
<span id="sp1"></span>
_________________________
DOM表單元件取值
一.取單項值:文字框/下拉式選單
二群組或複選取值  單選鈕 /核取方塊

var klen=document.getElementsByName("rd").length;
計算長度
docment.getElementsByName("rd").item(i)
取得群組項目
docment.getElementsByName("rd").item(i).checked
判斷是否被選取
docment.getElementsByName("rd").item(i).value
向項目取選取的值

<script language="javascript">
function fun1()
{
var n=document.getElementById("t1").value.trim();
if (n !="")
{
alert(n)
}
else
{
alert("請輸入姓名")
document.getElementById("t1").value="";
document.getElementById("t1").focus();
}


}
function fun2()
{
document.getElementById("t1").value="";
document.getElementById("t1").focus();
}

</script>
<body>
<form id="f1" name="f1">
<input type="text" id="t1" name="t1" size="20" ? />
<p></p>
<input type="button" id="bt1" value="確定" onclick="fun1()" />
<input type="button" id="bt2" value="清除" onclick="fun2()" />
</form>
______________________

11/19
<script language="javascript">
function fun1()
{
var str="";
var s=document.getElementsByName("chk").length;
for (var i=0;i<s;i++)
{
if (document.getElementsByName("chk").item(i).checked=true)
{
str=str+document.getElementsByName("chk").item(i).value+"  ";
}
}
alert(str);
}
function fun2()
{
var s=document.getElementsByName("chk").length;
for (var i=0;i<s;i++)
{
document.getElementsByName("chk").item(i).checked=false;
}

}

</script>

<body>
<form id="f1" name="f1" >
<table border="2" width="500" id="tbl1">
<tr>
<td>
<input type="checkbox" name="chk" id="chk1" value="英文" />英文
<input type="checkbox" name="chk" id="chk2" value="國文" />國文
<input type="checkbox" name="chk" id="chk3" value="數學" />數學
<td>
<input type="button" id="bt1" name="bt1" value="確定" onclick="fun1()" />
<input type="button" id="bt2" name="bt2" value="清除"
onclick="fun2()" />
</td>
</tr>

</table>
</form>
---------------------
function fun1()
{
var k=document.getElementById("ta1").value.trim();
if (k!="")
{
var len=k.length;
if (k<=50)
{
alert(k);
}
else
{
alert("超出長度");
}
}
else
{
alert("輸入備忘資料")
}
}
function fun2()
{
document.getElementById("ta1").value=" ";
}
function fun3()
{
var k=document.getElementById("ta1").value.trim();
var klen=k.length;
document.getElementById("sp1").innerHTML=klen;
}
</script>
<body>
<form>
  <fieldset>
    <legend>備忘資料:</legend>
<table border="1" width="300">
<tr><td></td></tr>
<tr><td>備忘錄:只限50個字</td></tr>
  <tr><td ><textarea id="ta1" cols="80" rows="15" oninput="fun3()"></textarea>
  </td>
  </tr>
  <tr>
  <td>
  <input type="button" id="bt1" name="bt1" value="確定" onclick="fun1()" />
<input type="button" id="bt2" name="bt2" value="清除"
onclick="fun2()" />
  </td>
  </tr>

</table>
<span id="sp1"></span>
  </fieldset>
</form>
------------
Jquery基本使用方法和傳輸
一、引入函數庫
<<script language="javascript" src="jquery-3.4.1.min.js"></script>
二、架構
$(document).ready(function()
{
   [程式區塊]
});
$(document)==>選擇器
三、選擇器
a.id-->$("#id")
b.class-->$(".class")
c.tagname-->$("tagname")

<a>            onclick         func1()==========>javascript
物件           事件             函數
#選擇器      click           function()========>Jquery
下載Jquery compress檔,放於相關資料夾
一、text()===>靜態元件取值
以text()函數取值和給值 
<a>,<span>,<ol>,<ul>,<div>,<p>,<table>....
(a)取值var k=$("選擇器").text()
(b)給值 $("選擇器").text(值)
二、val()==>表單元件
text,textarea,select,radio,checkbox..
以val()函數取值和給值
(a)取值var k=$("選擇器").val()
(b)給值 $("選擇器").val(值)
三、attr()-->元件屬性

<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
function fun1()
{

var q=$("#a1").text();
var s=confirm("確定要上嗎?");
if (s==true)
{
location.href="https://www.microsoft.com/taiwan/about/";
}

}
</script>

<body>
<input type="button" id="btn1" value="指向網站" onclick="fun1()" />
<p></p>
<a href="" id="a1" >台灣微軟</a>
</body>
-----------------------------------
<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#btn1").click(function()
{
var q=$("#a1").text();
var s=confirm("確定要上嗎?");
if (s==true)
{
location.href="https://www.microsoft.com/taiwan/about/";
}
});
});
</script>

<body>
<input type="button" id="btn1" value="指向網站" />
<p></p>
<a href="" id="a1" >台灣微軟</a>
</body>
------------------------------------------------

<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#btn1").click(function()
{
$("#a1").attr("href","https://www.microsoft.com/taiwan/about/");
alert("網址設定完成");
});
});
</script>

<body>
<input type="button" id="btn1" value="設網站" />
<p></p>
<a href="#" id="a1" >台灣微軟</a>
</body>
====

<script language="javascript" src="jquery-3.4.1.min.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#btn1").click(function()
{
$("#ol1").each(function(i,e)
{
alert($(this).text());
});
});
});
</script>

<body>
<input type="button" id="btn1" value="取ol值" />
<p></p>
<ol id="ol1" >
<li>程式設計</li>
    <li>美工設計</li>
    <li>系統設計</li>
    <li>繪圖設計</li>
    <li>資料庫設計</li>
</ol>

++++++++++++++++++++++
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版
   NodeMcu1.0(ESP-12Emodule)
             速度115200
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();
}