Software Project : Robotic Arm (3) - เขียน Web ครั้งที่ 1

   
     วันที่ 2 ตุลาคม พ.ศ.2562
 
      หลังการสามารถควบคุมแขนกลทั้ง 6 ตัว ผ่าน Python ได้แล้ว จึงทำการเขียนหน้าเว็บเพื่อทำการสั่งจากหน้าเว็บ โดยได้คิดหน้าเว็บไว้ 2 แบบ
     1.กดปุ่มที่กำหนดองศาได้เเล้ว
     2.กดปุ่มซ้าย-ขวา ขยับทีละ 5 องศา
โดยทำแบบเเรกก่อน

เขียนโค้ด HTML ให้ได้โครงเว็บก่อนหลังจากนั้นจะทำการตกเเต่งด้วย CSS 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet"  href="BEAUTIFUL.css">
  </head>
    <title>{{ Author }}'s app</title>
  <body>
    <h2> Servo </h2>


    <form  action="/" method="post">
      <input type="submit" name="submit" id="keys1" value="1/0">
      <input type="submit" name="submit" id="keys2" value="1/20">
      <input type="submit" name="submit" id="keys3" value="1/40">
      <input type="submit" name="submit" id="keys4" value="1/60">
      <input type="submit" name="submit" id="keys5" value="1/80">
      <input type="submit" name="submit" id="keys6" value="1/100">
      <input type="submit" name="submit" id="keys7" value="1/120">
      <input type="submit" name="submit" id="keys8" value="1/140">
      <input type="submit" name="submit" id="keys9" value="1/160">
      <input type="submit" name="submit" id="keys10" value="1/180"><p>
      <input type="submit" name="submit" id="keys11" value="2/0">
      <input type="submit" name="submit" id="keys12" value="2/20">
      <input type="submit" name="submit" id="keys13" value="2/40">
      <input type="submit" name="submit" id="keys14" value="2/60">
      <input type="submit" name="submit" id="keys15" value="2/80">
      <input type="submit" name="submit" id="keys16" value="2/100">
      <input type="submit" name="submit" id="keys17" value="2/120">
      <input type="submit" name="submit" id="keys18" value="2/140">
      <input type="submit" name="submit" id="keys19" value="2/160">
      <input type="submit" name="submit" id="keys20" value="2/180"><p>
      <input type="submit" name="submit" id="keys21" value="3/0">
      <input type="submit" name="submit" id="keys22" value="3/20">
      <input type="submit" name="submit" id="keys23" value="3/40">
      <input type="submit" name="submit" id="keys24" value="3/60">
      <input type="submit" name="submit" id="keys25" value="3/80">
      <input type="submit" name="submit" id="keys26" value="3/100">
      <input type="submit" name="submit" id="keys27" value="3/120">
      <input type="submit" name="submit" id="keys28" value="3/140">
      <input type="submit" name="submit" id="keys29" value="3/160">
      <input type="submit" name="submit" id="keys30" value="3/180"><p>
      <input type="submit" name="submit" id="keys31" value="4/0">
      <input type="submit" name="submit" id="keys32" value="4/20">
      <input type="submit" name="submit" id="keys33" value="4/40">
      <input type="submit" name="submit" id="keys34" value="4/60">
      <input type="submit" name="submit" id="keys35" value="4/80">
      <input type="submit" name="submit" id="keys36" value="4/100">
      <input type="submit" name="submit" id="keys37" value="4/120">
      <input type="submit" name="submit" id="keys38" value="4/140">
      <input type="submit" name="submit" id="keys39" value="4/160">
      <input type="submit" name="submit" id="keys40" value="4/180"><p>
      <input type="submit" name="submit" id="keys41" value="5/0">
      <input type="submit" name="submit" id="keys42" value="5/20">
      <input type="submit" name="submit" id="keys43" value="5/40">
      <input type="submit" name="submit" id="keys44" value="5/60">
      <input type="submit" name="submit" id="keys45" value="5/80">
      <input type="submit" name="submit" id="keys46" value="5/100">
      <input type="submit" name="submit" id="keys47" value="5/120">
      <input type="submit" name="submit" id="keys48" value="5/140">
      <input type="submit" name="submit" id="keys49" value="5/160">
      <input type="submit" name="submit" id="keys50" value="5/180"><p>
      <input type="submit" name="submit" id="keys51" value="6/0">
      <input type="submit" name="submit" id="keys52" value="6/20">
      <input type="submit" name="submit" id="keys53" value="6/40">
      <input type="submit" name="submit" id="keys54" value="6/60">
      <input type="submit" name="submit" id="keys55" value="6/80">
      <input type="submit" name="submit" id="keys56" value="6/100">
      <input type="submit" name="submit" id="keys57" value="6/120">
      <input type="submit" name="submit" id="keys58" value="6/140">
      <input type="submit" name="submit" id="keys59" value="6/160">
      <input type="submit" name="submit" id="keys60" value="6/180"><p>
    </form>

  </body>
</html>

หน้าเว็บที่ได้

หลังจากได้หน้าเว็บทำการเขียนโค้ด Python ในการสั่ง

Python

import serial
import time
servo = serial.Serial("COM4", 9600)

class Servo():
    def LA0(self):
        servo.write(bytearray([0]))
        time.sleep(0.05)
    def LA20(self):
        servo.write(bytearray([4]))
        time.sleep(0.05)
    def LA40(self):
        servo.write(bytearray([8]))
        time.sleep(0.05)
    def LA60(self):
        servo.write(bytearray([12]))
        time.sleep(0.05)
    def LA80(self):
        servo.write(bytearray([16]))
        time.sleep(0.05)
    def LA100(self):
        servo.write(bytearray([20]))
        time.sleep(0.05)
    def LA120(self):
        servo.write(bytearray([24]))
        time.sleep(0.05)
    def LA140(self):
        servo.write(bytearray([28]))
        time.sleep(0.05)
    def LA160(self):
        servo.write(bytearray([32]))
        time.sleep(0.05)
    def LA180(self):
        servo.write(bytearray([36]))
        time.sleep(0.05)
    def LB0(self):
        servo.write(bytearray([37]))
        time.sleep(0.05)
    def LB20(self):
        servo.write(bytearray([41]))
        time.sleep(0.05)
    def LB40(self):
        servo.write(bytearray([45]))
        time.sleep(0.05)
    def LB60(self):
        servo.write(bytearray([49]))
        time.sleep(0.05)
    def LB80(self):
        servo.write(bytearray([53]))
        time.sleep(0.05)
    def LB100(self):
        servo.write(bytearray([57]))
        time.sleep(0.05)
    def LB120(self):
        servo.write(bytearray([61]))
        time.sleep(0.05)
    def LB140(self):
        servo.write(bytearray([65]))
        time.sleep(0.05)
    def LB160(self):
        servo.write(bytearray([69]))
        time.sleep(0.05)
    def LB180(self):
        servo.write(bytearray([73]))
        time.sleep(0.05)
    def LC0(self):
        servo.write(bytearray([74]))
        time.sleep(0.05)
    def LC20(self):
        servo.write(bytearray([78]))
        time.sleep(0.05)
    def LC40(self):
        servo.write(bytearray([82]))
        time.sleep(0.05)
    def LC60(self):
        servo.write(bytearray([86]))
        time.sleep(0.05)
    def LC80(self):
        servo.write(bytearray([90]))
        time.sleep(0.05)
    def LC100(self):
        servo.write(bytearray([94]))
        time.sleep(0.05)
    def LC120(self):
        servo.write(bytearray([98]))
        time.sleep(0.05)
    def LC140(self):
        servo.write(bytearray([102]))
        time.sleep(0.05)
    def LC160(self):
        servo.write(bytearray([106]))
        time.sleep(0.05)
    def LC180(self):
        servo.write(bytearray([110]))
        time.sleep(0.05)
    def LD0(self):
        servo.write(bytearray([111]))
        time.sleep(0.05)
    def LD20(self):
        servo.write(bytearray([115]))
        time.sleep(0.05)
    def LD40(self):
        servo.write(bytearray([119]))
        time.sleep(0.05)
    def LD60(self):
        servo.write(bytearray([123]))
        time.sleep(0.05)
    def LD80(self):
        servo.write(bytearray([127]))
        time.sleep(0.05)
    def LD100(self):
        servo.write(bytearray([131]))
        time.sleep(0.05)
    def LD120(self):
        servo.write(bytearray([135]))
        time.sleep(0.05)
    def LD140(self):
        servo.write(bytearray([139]))
        time.sleep(0.05)
    def LD160(self):
        servo.write(bytearray([143]))
        time.sleep(0.05)
    def LD180(self):
        servo.write(bytearray([147]))
        time.sleep(0.05)
    def LE0(self):
        servo.write(bytearray([148]))
        time.sleep(0.05)
    def LE20(self):
        servo.write(bytearray([152]))
        time.sleep(0.05)
    def LE40(self):
        servo.write(bytearray([156]))
        time.sleep(0.05)
    def LE60(self):
        servo.write(bytearray([160]))
        time.sleep(0.05)
    def LE80(self):
        servo.write(bytearray([164]))
        time.sleep(0.05)
    def LE100(self):
        servo.write(bytearray([168]))
        time.sleep(0.05)
    def LE120(self):
        servo.write(bytearray([172]))
        time.sleep(0.05)
    def LE140(self):
        servo.write(bytearray([176]))
        time.sleep(0.05)
    def LE160(self):
        servo.write(bytearray([180]))
        time.sleep(0.05)
    def LE180(self):
        servo.write(bytearray([184]))
        time.sleep(0.05)
    def LF0(self):
        servo.write(bytearray([185]))
        time.sleep(0.05)
    def LF20(self):
        servo.write(bytearray([189]))
        time.sleep(0.05)
    def LF40(self):
        servo.write(bytearray([193]))
        time.sleep(0.05)
    def LF60(self):
        servo.write(bytearray([197]))
        time.sleep(0.05)
    def LF80(self):
        servo.write(bytearray([201]))
        time.sleep(0.05)
    def LF100(self):
        servo.write(bytearray([205]))
        time.sleep(0.05)
    def LF120(self):
        servo.write(bytearray([209]))
        time.sleep(0.05)
    def LF140(self):
        servo.write(bytearray([213]))
        time.sleep(0.05)
    def LF160(self):
        servo.write(bytearray([217]))
        time.sleep(0.05)
    def LF180(self):
        servo.write(bytearray([221]))
        time.sleep(0.05)

from flask import  Flask,render_template,request
import time
app = Flask(__name__)#Webapptime.sleep(3)#delay 3 วินาที@app.route('/', methods=['POST', 'GET'])
def CS():
    Author = "Gram"    if request.method == "POST":
        import BA
        A = BA.Servo()
        if request.form['submit']=='1/0':
            A.LA0()
        elif request.form['submit']=='1/20':
            A.LA20()
        elif request.form['submit']=='1/40':
            A.LA40()
        elif request.form['submit']=='1/60':
            A.LA60()
        elif request.form['submit']=='1/80':
            A.LA80()
        elif request.form['submit']=='1/100':
            A.LA100()
        elif request.form['submit']=='1/120':
            A.LA120()
        elif request.form['submit']=='1/140':
            A.LA140()
        elif request.form['submit']=='1/160':
            A.LA160()
        elif request.form['submit']=='1/180':
            A.LA180()
        elif request.form['submit']=='2/0':
            A.LB0()
        elif request.form['submit']=='2/20':
            A.LB20()
        elif request.form['submit']=='2/40':
            A.LB40()
        elif request.form['submit']=='2/60':
            A.LB60()
        elif request.form['submit']=='2/80':
            A.LB80()
        elif request.form['submit']=='2/100':
            A.LB100()
        elif request.form['submit']=='2/120':
            A.LB120()
        elif request.form['submit']=='2/140':
            A.LB140()
        elif request.form['submit']=='2/160':
            A.LB160()
        elif request.form['submit']=='2/180':
            A.LB180()
        elif request.form['submit']=='3/0':
            A.LC0()
        elif request.form['submit']=='3/20':
            A.LC20()
        elif request.form['submit']=='3/40':
            A.LC40()
        elif request.form['submit']=='3/60':
            A.LC60()
        elif request.form['submit']=='3/80':
            A.LC80()
        elif request.form['submit']=='3/100':
            A.LC100()
        elif request.form['submit']=='3/120':
            A.LC120()
        elif request.form['submit']=='3/140':
            A.LC140()
        elif request.form['submit']=='3/160':
            A.LC160()
        elif request.form['submit']=='3/180':
            A.LC180()
        elif request.form['submit']=='4/0':
            A.LD0()
        elif request.form['submit']=='4/20':
            A.LD20()
        elif request.form['submit']=='4/40':
            A.LD40()
        elif request.form['submit']=='4/60':
            A.LD60()
        elif request.form['submit']=='4/80':
            A.LD80()
        elif request.form['submit']=='4/100':
            A.LD100()
        elif request.form['submit']=='4/120':
            A.LD120()
        elif request.form['submit']=='4/140':
            A.LD140()
        elif request.form['submit']=='4/160':
            A.LD160()
        elif request.form['submit']=='4/180':
            A.LD180()
        elif request.form['submit']=='5/0':
            A.LE0()
        elif request.form['submit']=='5/20':
            A.LE20()
        elif request.form['submit']=='5/40':
            A.LE40()
        elif request.form['submit']=='5/60':
            A.LE60()
        elif request.form['submit']=='5/80':
            A.LE80()
        elif request.form['submit']=='5/100':
            A.LE100()
        elif request.form['submit']=='5/120':
            A.LE120()
        elif request.form['submit']=='5/140':
            A.LE140()
        elif request.form['submit']=='5/160':
            A.LE160()
        elif request.form['submit']=='5/180':
            A.LE180()
        elif request.form['submit']=='6/0':
            A.LF0()
        elif request.form['submit']=='6/20':
            A.LF20()
        elif request.form['submit']=='6/40':
            A.LF40()
        elif request.form['submit']=='6/60':
            A.LF60()
        elif request.form['submit']=='6/80':
            A.LF80()
        elif request.form['submit']=='6/100':
            A.LF100()
        elif request.form['submit']=='6/120':
            A.LF120()
        elif request.form['submit']=='6/140':
            A.LF140()
        elif request.form['submit']=='6/160':
            A.LF160()
        elif request.form['submit']=='6/180':
            A.LF180()



    return render_template('index.html',Author=Author,value = 100)
if __name__ == "__main__":
    app.run(debug=True)

เมื่อเขียนเสร็จจะควบคุม Servo ได้ทุกตัวเเบบกำหนดองศา โดยโค้ดจะทำการปรับปรุงเรื่อยๆ

อุปสรรค
 - ปัญหาในการเขียนโค้ด
 - ปัญหาการ รับ - ส่ง ข้อมูลของ Arduino
 - โค้ดยาวไป อาจจะทำให้สั้นกว่านี้ได้

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แขนกล (Robot Arm)

Software Project : Robotic Arm (5) - อุปสรรคในปัจจุบันเเละเเผนการต่อจากนี้

Software Project : Robotic Arm (8) - ปัญหาที่พบเจอ วิธีเเก้ปัญหา และ ภาพรวมของ Project