masimaro blog

menu

home　>　電子工作:M5Stack　>　M5stackで2足歩行ロボットの作成⑤「micropythonで立てたWEBサーバーにブラウザでアクセスしてPCA9685を制御しロボットを操作する」

M5stackで2足歩行ロボットの作成⑤「micropythonで立てたWEBサーバーにブラウザでアクセスしてPCA9685を制御しロボットを操作する」


M5Stack
2021-07-23


今回は、第3回で作成したWIFI AP,WEBサーバーのプログラムに前回のプログラムを追加し、ブラウザからロボットのモーションを操作できるようにしてみます。

前回同様、サムネイルの写真の通りハードウェアを繋いでおきます。

　

server.py

import network
import machine
import time
import socket
import re
from machine import Pin,I2C
import servo
import pca9685

ESSID = 'M5stack' 
PASSWORD = '11223344'
IP = '192.168.5.1'

i2c = I2C(0, scl=Pin(22), sda=Pin(21))
sev = servo.Servos(i2c)

sv ="p"

#サーボモーター制御
def servoset():
    global sv
    if sv == "st":
        sev.position(0, 97)
        time.sleep_ms(1000)
        sev.position(1, 90)
        time.sleep_ms(1000)
        sev.position(2, 100)
        time.sleep_ms(1000)
        sev.position(3, 90)
        time.sleep_ms(1000)
    elif sv == "fw":
        sev.position(3, 70)
        sev.position(1, 70)
        time.sleep_ms(500)
        sev.position(0, 77)
        sev.position(2, 80)
        time.sleep_ms(500)
        sev.position(3, 90)
        sev.position(1, 90)
        time.sleep_ms(500)
        sev.position(3, 110)
        sev.position(1, 110)
        time.sleep_ms(500)
        sev.position(0,117)
        sev.position(2, 120)
        time.sleep_ms(500)
        sev.position(3, 90)
        sev.position(1, 90)
        time.sleep_ms(500)
    elif sv == "lt":
        sev.position(3, 40)
        sev.position(1, 60)
        time.sleep_ms(500)
        sev.position(0, 117)
        time.sleep_ms(500)
        sev.position(3, 90)
        time.sleep_ms(500)
        sev.position(1, 90)
        time.sleep_ms(500)
        sev.position(0, 97)
        time.sleep_ms(500)
    elif sv == "bk":
        sev.position(3, 110)
        sev.position(1, 110)
        time.sleep_ms(500)
        sev.position(0, 77)
        sev.position(2, 80)
        time.sleep_ms(500)
        sev.position(3, 90)
        sev.position(1, 90)
        time.sleep_ms(500)
        sev.position(3, 70)
        sev.position(1, 70)
        time.sleep_ms(500)
        sev.position(0,117)
        sev.position(2, 120)
        time.sleep_ms(500)
        sev.position(3, 90)
        sev.position(1, 90)
        time.sleep_ms(500)
    elif sv == "rt":
        sev.position(3, 120)
        sev.position(1, 140)
        time.sleep_ms(500)
        sev.position(2, 80)
        time.sleep_ms(500)
        sev.position(1, 90)
        time.sleep_ms(500)
        sev.position(3, 90)
        time.sleep_ms(500)
        sev.position(2, 100)
        time.sleep_ms(500)

#html 
def home_page():
    html = """<html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>サーボテスト</title>
    <meta name="viewport" content=
"width=
    device-width, initial-scale=1">
    <style>
    * { 
    margin: 0px; 
    padding: 0px; 
    }
    body {
    max-width: 600px;
    font-size: 25px;
    width: 100%;
    }
    main {
    height: 40vh;
    background: skyblue;
    }
    ul {
    display: block;
    height: 40vh;
    list-style: none;
    padding-top: 10px;
    }
    .bc {
    display: flex;
    }
    .a, .bc, .d {
    height: 12vh;
    }
    li {
    width: 100px ;
    height: 90% ;
    margin-left: auto;
    margin-right: auto;
    background: yellow;    
    }
    .b {
    margin-left: auto;
    }
    .c {
    margin-right: auto;
    }
    ul li {
    text-align: center;
    }
    .a li, .b li, .c
    li, .d li {
    border: solid 1px;
    }
    .n li {
    background: yellow;
    }
    a:active {
    color: #ff2020;
    }
    .a li, .b li, .c li, .d li, .n li {
    border: solid 1px;
    }
    .n {
    margin-right: 3px;
    margin-left: 3px;
    }
    </style>
    </head>　　　　　　　　　　
    <body>
    <main>
    <ul>
    <div class="a">
    <a href="/svm_aa">
    <li id="forward">前進</li>
    </a></div>
    <div class="bc">
    <div class="b">
    <a href="/svm_bb">
    <li id="left">左旋回</li>
    </a></div>
    <div class="n">
    <a href="/svm_ee">
    <li id="set">SET</li>
    </a></div>
    <div class="c">
    <a href="/svm_cc">
    <li id="right">右旋回</li>
    </a></div>
    </div>
    <div class="d">
    <a href="/svm_dd">
    <li id="backward">後退</li>
    </a></div>
    </ul>
    </main>
    </body>
    </html>"""
    return html     #テキストとして値を返す

#WIFI APの立ち上げ       
ap = network.WLAN(network.AP_IF)
ap.config(essid=ESSID, authmode=3, 
password=PASSWORD)
ap.ifconfig((IP,'255.255.255.0',IP,
'8.8.8.8'))
ap.active(True)  
print("AP OK")

#WEBサーバーの立ち上げ
s = socket.socket(socket.AF_INET,
socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
 
#クライアント接続
while True:
    conn, addr = s.accept()
    request = str(conn.recv(1024))
    m = re.search(r'svm_(\D\D\s)', request)
    #print(request)
  
#ボタン操作反映
    if m != None :
        svm = m.group(0)       
        if svm == 'svm_aa ':
            sv = "fw"
        elif svm == 'svm_bb ':
            sv = "lt"    
        elif svm == 'svm_cc ':
            sv = "rt"
        elif svm == 'svm_dd ':
            sv = "bk"
        elif svm == 'svm_ee ':
            sv = "st"
            
    servoset()       #サーボ関数呼び出し
    sv ="p"
    response = home_page() #html text格納
    conn.send(response) #htmlデータ送信
    conn.close()        #scket破棄
    print("Data Received")

importのモジュールと、サーボモーターの関数を追加しただけです。

それでは、このプログラムをPC上から実行してみます。

動作確認

M5stacのWIFI APに接続後、サーバーにアクセスします。

操作画面のhtmlが表示されるので、全てのボタンが正常に動作するか確認します。

問題なければ下のようになります。↓

次回は、M5stackの画面に表情をつけるプログラムを追加したいと思います。

前の記事:M5stackで2足歩行ロボットの作成④「micropythonでPCA9685を制御してロボットのモーションを作成」
次の記事:M5stackで2足歩行ロボットの作成⑥「micropythonで液晶画面に表情をつけてサーボモーターと連動させる」

コメントを残す

お名前

コメント



コメント一覧

コメントはまだありません
⇧
MENU