2019年12月3日 星期二

[ MicroPython ] ESP32/ESP8266 MicroPython Web Server – Control Outputs 網頁中文化

MicroPython是以Python為基礎，可以內嵌到系統晶片上，以ESP32/ESP8266為例，可以參考：ESP32/ESP8266 MicroPython Web Server – Control Outputs的文章，本文將介紹如何將畫面中文化。

以上程式請存檔成為boot.py，並下載到ESP32/ESP8266中。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Complete project details at https://RandomNerdTutorials.com

try:
  import usocket as socket
except:
  import socket

from machine import Pin
import network

import esp
esp.osdebug(None)

import gc
gc.collect()

ssid = '您的熱點'
password = '熱點的密碼'

station = network.WLAN(network.STA_IF)

station.active(True)
station.connect(ssid, password)

while station.isconnected() == False:
  pass

print('Connection successful')
print(station.ifconfig())

led = Pin(2, Pin.OUT)

以下請儲存成main.py，文字中黃色底為修改部份，特別是meta標籤中，屬性chartset設定utf-8，即可以中文化。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# Complete project details at https://RandomNerdTutorials.com

def web_page():
  if led.value() == 1:
    gpio_state="開"
  else:
    gpio_state="關"
  
  html = """<html><head> <title>ESP Web Server</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,"> <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
  h1{color: #0F3376; padding: 2vh;}p{font-size: 1.5rem;}.button{display: inline-block; background-color: #e7bd3b; border: none; 
  border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
  .button2{background-color: #4286f4;}</style></head><body> <h1> 敏哥的家 </h1> 
  <p>客廳的電燈: <strong>""" + gpio_state + """</strong></p><p><a href="/?led=on"><button class="button">ON</button></a></p>
  <p><a href="/?led=off"><button class="button button2">OFF</button></a></p></body></html>"""
  return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)

while True:
  conn, addr = s.accept()
  print('Got a connection from %s' % str(addr))
  request = conn.recv(1024)
  request = str(request)
  print('Content = %s' % request)
  led_on = request.find('/?led=on')
  led_off = request.find('/?led=off')
  if led_on == 6:
    print('LED ON')
    led.value(1)
  if led_off == 6:
    print('LED OFF')
    led.value(0)
  response = web_page()
  conn.send('HTTP/1.1 200 OK\n')
  conn.send('Content-Type: text/html\n')
  conn.send('Connection: close\n\n')
  conn.sendall(response)
  conn.close()

請記得用手機打開瀏覽器，輸入網址，即可以看到控制資訊，以下是在uPyCraft執行的資訊：

Connection successful
('192.168.43.127', '255.255.255.0', '192.168.43.120', '192.168.43.120')


Got a connection from ('192.168.43.120', 37436)
Content = b'GET /?led=off HTTP/1.1\r\nHost: 192.168.43.127\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nSave-Data: on\r\nUser-Agent: Mozilla/5.0 (Linux; Android 9; ASUS_I01WD) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\nReferer: http://192.168.43.127/?led=off\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-TW,zh;q=0.9\r\n\r\n'
LED OFF
Got a connection from ('192.168.43.120', 37438)


Content = b'GET /?led=on HTTP/1.1\r\nHost: 192.168.43.127\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nSave-Data: on\r\nUser-Agent: Mozilla/5.0 (Linux; Android 9; ASUS_I01WD) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\nReferer: http://192.168.43.127/?led=off\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-TW,zh;q=0.9\r\n\r\n'
LED ON
Got a connection from ('192.168.43.120', 37450)


Content = b'GET /?led=off HTTP/1.1\r\nHost: 192.168.43.127\r\nConnection: keep-alive\r\nUpgrade-Insecure-Requests: 1\r\nSave-Data: on\r\nUser-Agent: Mozilla/5.0 (Linux; Android 9; ASUS_I01WD) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3\r\nReferer: http://192.168.43.127/?led=on\r\nAccept-Encoding: gzip, deflate\r\nAccept-Language: zh-TW,zh;q=0.9\r\n\r\n'

執行結果：



張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)