Wifi ควบคุม 12v Led Strip โดยใช้ Raspberry Pi พร้อม Tasker, การรวม Ifttt: 15 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

ในโครงการนี้ ฉันจะแสดงวิธีควบคุมแถบนำอนาล็อก 12v แบบง่ายผ่าน wifi โดยใช้ raspberry pi

สำหรับโครงการนี้ คุณจะต้อง:

• 1x Raspberry Pi (ฉันใช้ Raspberry Pi 1 รุ่น B+)
• 1x RGB 12v Led Strip [อีเบย์ออสเตรเลีย]
• 3x IRFZ44N N-Channel Mosfet's [อีเบย์ ออสเตรเลีย]
• อะแดปเตอร์แจ็คไฟ DC หญิง 1x [อีเบย์ออสเตรเลีย]
• บางสาย
• จอแสดงผล คีย์บอร์ด (สำหรับการตั้งค่าเท่านั้น)

ขั้นตอนที่ 1: ติดตั้ง Raspbian OS โดยใช้ Windows

ในการติดตั้ง Raspbian ด้วย windows คุณจะต้อง:

• Win32 Disk Imager: [ดาวน์โหลด]
• Raspbian OS Lite: [Zip], [ฝนตกหนัก]

**ข้อสำคัญ หากทำผิด ข้อมูลอาจสูญหาย โปรดสำรองข้อมูลก่อนดำเนินการต่อ**

1. เสียบการ์ด SD ของคุณเข้ากับเครื่องอ่านการ์ดแล้วเปิด My Computer
2. มองหาอักษรระบุไดรฟ์
3. คลิกขวาที่ Win32DiskImager แล้วคลิก "เรียกใช้ในฐานะผู้ดูแลระบบ"
4. จากนั้นคลิกโฟลเดอร์สีน้ำเงินเล็ก ๆ และเรียกดูรูปภาพ RaspbianOS. ของคุณ
5. คลิกกล่องดรอปดาวน์ภายใต้อุปกรณ์และเปลี่ยนเป็นอักษรระบุไดรฟ์ของการ์ด SD
6. จากนั้นคลิก "เขียน"
7. กล่องโต้ตอบจะเปิดขึ้นก่อนที่จะกดใช่ตรวจสอบว่าอุปกรณ์เป้าหมายถูกต้อง
8. จากนั้นนำการ์ด SD ออกแล้วใส่ลงใน pi

ขั้นตอนที่ 2: ติดตั้ง Raspbian OS โดยใช้ Mac OS X

ในการติดตั้ง Raspbian ด้วย Mac คุณจะต้อง:

• ApplePi-Baker [ดาวน์โหลด]
• Raspbian OS Lite: [Zip], [ฝนตกหนัก]

**ข้อสำคัญ หากทำผิด ข้อมูลอาจสูญหาย โปรดสำรองข้อมูลก่อนดำเนินการต่อ**

1. เปิด Disk Utility แล้วมองหา SD Card ของคุณทางด้านซ้ายมือ จากนั้นคลิก
2. มองหา "อุปกรณ์" ที่ด้านล่างของหน้าต่าง คุณจะเห็นบางอย่างเช่น diskXsX โดยที่ x เป็นตัวเลข
3. จำหมายเลข "อุปกรณ์" แล้วเปิด ApplePi-Baker
4. มันจะถามรหัสผ่านของคุณเนื่องจากต้องฟอร์แมต SD-Card ของคุณ
5. คลิกหมายเลข "อุปกรณ์" ที่อยู่หลัง /dev/ ทางด้านซ้ายมือ
6. คลิก "กู้คืน-สำรองข้อมูล" เรียกดูรูปภาพ RaspbianOS ของคุณ
7. มันจะเริ่มลบ SD-Card และติดตั้ง Raspbian ลงไป
8. เมื่อเสร็จแล้วกล่องแจ้งเตือนจะปรากฏขึ้นเพื่อแจ้งให้คุณทราบว่าคุณสามารถนำการ์ด SD ออก นำออกแล้วใส่ลงใน pi ของคุณ

ขั้นตอนที่ 3: การตั้งค่า Pi

ก่อนเปิดเครื่อง pi คุณจะต้องเสียบจอแสดงผล HDMI, คีย์บอร์ด และสายอีเธอร์เน็ตหรือ usb wifi (เราจะตั้งค่านี้ในขั้นตอนต่อไป)

เพิ่มพลังให้กับ pi คุณจะเห็นข้อความจำนวนมากเต็มหน้าจอ ซึ่งถือเป็นเรื่องปกติและเป็นส่วนหนึ่งของการเริ่มต้นเคอร์เนล linux อดใจรอกันอีกนิดนะคะ

เข้าสู่ระบบราสเบอร์รี่:

ชื่อผู้ใช้ของคุณคือ pi และรหัสผ่านคือราสเบอร์รี่ (คุณจะไม่เห็นสิ่งที่พิมพ์บนหน้าจอแต่ยังถูกป้อนอยู่)

จากนั้นเมื่อคุณเข้าสู่ระบบ คุณจะเห็น:

จากนั้นคุณต้องป้อน:

sudo raspi-config

หน้าจอของคุณจะเต็มไปด้วยหน้าจอสีน้ำเงินพร้อมตัวเลือกในกล่องสีเทาตรงกลาง

1. ใช้ปุ่มขึ้นและลง ไฮไลต์แล้วกด Enter ที่ตัวเลือก "ขยายระบบไฟล์" หลังจากนั้นไม่กี่วินาที ระบบจะนำคุณไปยังการแจ้งเตือนว่า "ระบบไฟล์รูทได้รับการปรับขนาดแล้ว" คลิก Enter
2. จากนั้นกดลูกศรลงและไปที่ Boot Options แล้วคลิก Enter จากนั้นคลิก Enter เมื่อเลือก 'Desktop / CLI' จากนั้นเลือก 'Console Autologin' แล้วคลิก Enter
3. จากนั้นเลือก ตัวเลือกขั้นสูง แล้วคลิก Enter
4. จากนั้นเลื่อนลงไปที่ ssh แล้วคลิก Enter จากนั้นเลือกใช่
5. แล้วกดลูกศรขวาจนขึ้นเงาแล้วกด enter
6. จากนั้นไปที่ด้านล่างอีกครั้งแล้วคลิกเสร็จสิ้นแล้วพูดว่าใช่เพื่อรีบูต

หลังจากรีบูตหากคุณเชื่อมต่อผ่านอีเธอร์เน็ต คุณต้องป้อนคำสั่งนี้เพื่อค้นหาที่อยู่ IP ของคุณ เพื่อให้เราสามารถ ssh ลงใน pi ได้

ค้นหาไอพี:

ชื่อโฮสต์ -I

ขั้นตอนที่ 4: ตั้งค่า Wifi

ในการตั้งค่า wifi บน pi เราจำเป็นต้องแก้ไขไฟล์

1. เข้าสู่บรรทัดคำสั่ง

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

2. ไปที่ท้ายไฟล์และป้อน

เครือข่าย={

ssid="Your_Wifi_Name" psk="Your_wifi_password" }

3. จากนั้นรีบูต pi ของคุณด้วย

sudo รีบูต

หลังจากที่ pi ของคุณรีบูตแล้วจะได้รับที่อยู่ IP โดยพิมพ์

ชื่อโฮสต์ -I

คุณควรได้รับที่อยู่ IP ของคุณ แต่ถ้าข้อความที่ปรับแต่งใหม่ว่างเปล่าแสดงว่า pi ไม่สามารถเชื่อมต่อกับเครือข่ายของคุณได้ ตรวจสอบอีกครั้งว่าคุณได้ป้อนชื่อ wifi และรหัสผ่านถูกต้องหรือไม่ เนื่องจากต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

ขั้นตอนที่ 5: เชื่อมต่อกับ Pi ของคุณจากระยะไกลโดยใช้ Windows

ตอนนี้เรามี pi ที่เชื่อมต่อกับอินเทอร์เน็ตแล้ว เราสามารถลบเมาส์คีย์บอร์ดและจอแสดงผล และเชื่อมต่อจากระยะไกลโดยใช้ "ssh"

หากต้องการ ssh ลงใน pi ด้วย windows คุณต้องดาวน์โหลด

สีโป๊ว: [ดาวน์โหลด]

1. เปิด putty ในกล่องที่อยู่ IP ให้ป้อน raspberry pi ip จากนั้นกด open
2. จะได้กรอบข้อความตามรูปที่ 2 กด yes
3. จากนั้นคุณจะเห็นกล่องโต้ตอบใหม่ที่ระบุว่า "เข้าสู่ระบบในฐานะ" ป้อน "pi"
4. แล้วมันจะถามรหัสผ่านใส่ "ราสเบอร์รี่"

ตอนนี้คุณเชื่อมต่อกับ pi บน ssh. แล้ว

ขั้นตอนที่ 6: เชื่อมต่อกับ Pi ของคุณจากระยะไกลโดยใช้ Mac

ตอนนี้เรามี pi ที่เชื่อมต่อกับอินเทอร์เน็ตแล้ว เราสามารถลบแป้นพิมพ์และเมาส์และเชื่อมต่อจากระยะไกลโดยใช้ "ssh"

1. เปิด "เทอร์มินัล"

2. พิมพ์

ssh pi@IP_ADDRESS

3. จากนั้นคุณอาจได้รับข้อความแจ้งว่าไม่ได้บันทึกรหัสโฮสต์ เพียงพิมพ์ "ใช่"

4. จากนั้นเมื่อเลื่อนขั้นให้ป้อนรหัสผ่าน raspberry pi ซึ่งก็คือ "Raspberry"

ตอนนี้คุณเชื่อมต่อกับ pi บน ssh. แล้ว

ขั้นตอนที่ 7: การติดตั้งซอฟต์แวร์

เนื่องจากตอนนี้เราสามารถเข้าถึง pi ได้จากระยะไกล เราจึงต้องติดตั้งซอฟต์แวร์บางตัวเพื่อควบคุมแถบนำ

เราจะต้องติดตั้ง

• pigpio (ซึ่งจะเปลี่ยนพิน GPIO ทั้งหมดจากดิจิตอลเป็น PWM)
• ขวด (สคริปต์ฝั่งเซิร์ฟเวอร์ที่คุยกับ pigpio และเว็บเซิร์ฟเวอร์)
• apache2 (เว็บเซิร์ฟเวอร์)

ติดตั้ง pigpio

1. ก่อนอื่น เราต้องดาวน์โหลดโฟลเดอร์ zip ที่มีซอฟต์แวร์ pigpio ที่ไม่ได้คอมไพล์ โดยใช้คำสั่งนี้

wget

2. จากนั้นเราต้องเปิดเครื่องรูดและไปที่ไดเร็กทอรี

เปิดเครื่องรูด pigpio.zip && cd PIGPIO

3.ตอนนี้เราอยู่ในไดเร็กทอรีแล้ว เราต้องคอมไพล์และติดตั้งซอฟต์แวร์

make -j4 && sudo ทำการติดตั้ง

4. ตอนนี้เปิด rc.local เพื่อให้เราสามารถบอก pi ให้เรียกใช้ pigpiod เมื่อเริ่มต้น

sudo nano /etc/rc.local

จากนั้นก่อนถึงเส้นทางออกเข้า

sudo pigpiod

คุณได้ติดตั้งซอฟต์แวร์ pigpio แล้ว

ติดตั้งขวด

ขั้นแรกเราต้องอัปเดตรายการซอฟต์แวร์เพื่อทำสิ่งนี้ เข้าสู่

sudo apt update && sudo apt upgrade -y

จากนั้นติดตั้ง pip

sudo apt-get ติดตั้ง python-pip

ตอนนี้เราสามารถติดตั้ง flask. ได้แล้ว

sudo pip ติดตั้งขวด

ติดตั้ง Apache2

sudo apt-get ติดตั้ง apache2 -y

sudo apt-get ติดตั้ง libapache2-mod-wsgi -y

ติดตั้ง git

sudo apt ติดตั้ง git -y

หลังจากที่ทุกอย่างเสร็จสิ้นการติดตั้ง ปิดระบบ pi ด้วย

sudo ปิดตอนนี้

ขั้นตอนที่ 8: การเดินสายไฟ

ก่อนอื่นเราต้องต่อสายไฟเข้ากับบอร์ดขนมปัง

1. ต่อสายสีดำเข้ากับขั้วลบของแจ็คไฟ
2. ต่อสายสีแดงเข้ากับขั้วบวกบนแจ็คไฟ
3. เชื่อมต่อปลายอีกด้านของสายสีแดงเข้ากับด้านบวกของเขียงหั่นขนม
4. เชื่อมต่อปลายอีกด้านของสายสีดำเข้ากับด้านบวกของเขียงหั่นขนม
5. จากนั้นเชื่อมต่อพินกราวด์จาก pi (ตามที่เห็นในภาพ) เข้ากับพินเชิงลบบนเขียงหั่นขนม

ตอนนี้เราต้องเชื่อมต่อ the mostfet

ขั้นตอนที่ 9: การเดินสาย Mosfets และเชื่อมต่อ Pi

Mosfet ช่วยให้คุณควบคุมปริมาณพลังงานที่สามารถเดินทางไปยังไฟ LED ได้ เราต้องใช้ mosfet สามตัว เนื่องจากเราจำเป็นต้องควบคุมไฟสีแดง สีเขียว และสีน้ำเงินแยกกัน

มอสเฟตมีสามพินทางด้านซ้ายมีพิน "เกต" ซึ่งจะเชื่อมต่อกับ pi เพื่อควบคุมปริมาณพลังงานที่สามารถไหลไปยังไฟ LED ได้

หมุดตรงกลางเรียกว่า "Drain" ซึ่งจะไปที่ไฟ LED และจ่ายแรงดันไฟฟ้าที่ประตูอนุญาตให้ผ่านไปได้

และหมุดทางด้านขวาคือหมุด "แหล่งที่มา" พินนี้ลงไปที่พื้นบนเขียงหั่นขนม

การเชื่อมต่อไฟ Led สีแดง

1. ใส่มอสเฟตหนึ่งตัวลงในเขียงหั่นขนม
2. เชื่อมต่อสายสีดำจาก GND บนเขียงหั่นขนมกับแหล่งสัญญาณ (พินขวา)
3. จากนั้นต่อสายสีแดงจากพินตรงกลางของมอสเฟตกับพินสีแดงบนแถบไฟ LED
4. จากนั้นต่อสายสีแดงจากพินซ้ายเข้ากับ GPIO 17 บน pi

การเชื่อมต่อไฟ LED สีเขียว

1. ใส่มอสเฟตตัวที่ 2 ลงในเขียงหั่นขนม
2. จากนั้นเหมือนก่อนเชื่อมต่อสายสีดำจาก GND บนเขียงหั่นขนมกับแหล่งสัญญาณ (พินขวา)
3. จากนั้นต่อสายสีเขียวจากพินตรงกลางของมอสเฟตกับพินสีเขียวบนแถบไฟ LED
4. จากนั้นต่อสายสีเขียวจากพินซ้ายเข้ากับ GPIO 22 บน pi

การเชื่อมต่อไฟ LED สีน้ำเงิน

1. ใส่มอสเฟตตัวสุดท้ายลงในเขียงหั่นขนม
2. เชื่อมต่อสายสีดำอีกเส้นจาก GND บนเขียงหั่นขนมเข้ากับแหล่งสัญญาณ (พินขวา)
3. จากนั้นต่อสายสีน้ำเงินจากพินตรงกลางของมอสเฟตกับพินสีน้ำเงินบนแถบไฟ LED
4. จากนั้นต่อสายสีน้ำเงินจากพินซ้ายเข้ากับ GPIO 24 บน pi

จากนั้นคุณจะมีพินเพิ่มเติมบนแถบไฟ LED หนึ่งอันที่จะเป็นสีขาวหรือสีดำ เพียงแค่เชื่อมต่อสายจากพินที่เป็นบวกบนเขียงหั่นขนมกับพินพิเศษนั้นบนแถบไฟ LED

เมื่อเสร็จแล้วเราสามารถเริ่มทดสอบได้

ขั้นตอนที่ 10: ดาวน์โหลดและทดสอบ Led Strip

ในการดาวน์โหลดซอร์สโค้ดสำหรับควบคุมแถบไฟ LED

โคลน git https://github.com/DavidMontesin/Raspberry-PI-Wifi-Led-Strip.git && cd Raspberry-PI-Wifi-Led-Strip/

ในการทดสอบแถบไฟ LED ให้รันไฟล์ test.py

หลาม Test.py

หากสีบางส่วนไม่สว่างขึ้นด้วยเหตุผลบางประการ โปรดตรวจสอบว่าเสียบปลั๊กทุกอย่างถูกต้องหรือไม่

สคริปต์นี้ทำงานอย่างไร

หากคุณเปิดสคริปต์ python คุณอาจสงสัยว่ามันทำงานอย่างไร ในบรรทัดแรก คุณจะเห็น:

เวลานำเข้า

ห้องสมุดเล็กๆ แห่งนี้ช่วยให้เราหยุดสคริปต์ชั่วคราวเพื่อให้เปิดไฟได้เร็วขึ้น

นำเข้า pigpio

ห้องสมุดนี้ช่วยให้เราสื่อสารกับแถบนำ

pi = pigpio.pi()

ตั้งค่าตัวแปรเพื่อให้เราใช้ pi.set_pw… insted ของ pigpio.pi().set_pw…

RedPin = 17

กรีนพิน = 22

BluePin = 24

นี่เป็นเพียงตัวแปรที่ช่วยให้เราสามารถบอกสคริปต์ว่า led เชื่อมต่อกับอะไร

print("ทดสอบสีแดง")

นี่จะพิมพ์ข้อความไปยังบรรทัดคำสั่ง

pi.set_PWM_dutycycle (หมุดสีแดง, 255)

คำสั่งนี้เป็นส่วนหนึ่งของ pigpio libary และกำลังบอกให้ตั้งค่า "RedPin" ซึ่งจะค้นหาหมายเลขที่เราตั้งไว้ก่อนหน้านี้และตั้งค่าความสว่างเป็น "255" ซึ่งเป็นค่าสูงสุด

เวลานอน(2)

นี่เป็นส่วนหนึ่งของไลบรารีเวลาและจะหยุดสคริปต์ชั่วคราวเป็นเวลา 2 วินาที

คำสั่งที่นุ่มนวลเหล่านี้จะทำซ้ำสำหรับไฟ LED อื่น ๆ จนกระทั่ง

pi.stop()

ซึ่งจะหยุดพูดคุยกับแถบนำและปิดสีทั้งหมด

ขั้นตอนที่ 11: การเขียนโปรแกรมสคริปต์ฝั่งเซิร์ฟเวอร์

**ก่อนที่คุณจะเริ่ม ฉันแนะนำให้คุณอ่านเกี่ยวกับ python และ flask:

นี่คือคำแนะนำบางส่วน:

www.pythonforbeginners.com

docs.python-guide.org/en/latest/intro/learn…

flask.pocoo.org

เนื่องจาก Main.py อยู่ใน git โดยตรง ขั้นตอนนี้เป็นเพียงการอธิบายโค้ด

อันดับแรกเรามีห้องสมุด

จากขวดนำเข้า Flask, render_template, ขอ

นำเข้า pigpio จากการนำเข้าเธรด start_new_thread

จากนั้นเราต้องตั้งค่าตัวแปรบางตัว

แอพ = ขวด (_name_)

CurrentColour = "สีขาว" RedColourCode = 0 BlueColourCode = 0 GreenColourCode = 0 RedBeforeEffect = 0 BlueBeforeEffect = 0 GreenBeforeEffect = 0 pi = pigpio.pi ()

ตัวแปรแรกคือสำหรับ flask ซึ่งเป็นเว็บเซิร์ฟเวอร์ของเรา เราจะเรียกมันว่า app เพื่อให้เรียกใช้และเรียกใช้ได้ง่ายขึ้น จากนั้นมีตัวแปร 6 ตัวที่ 3 ตัวแรกจะประกอบด้วยสีอะไรที่จะเปลี่ยน 2 และอีก 3 ตัวจะมีสีก่อนหน้า

@app.route('/', วิธี=['GET'])

บรรทัดนี้บอกว่าถ้ามีคนพิมพ์ที่อยู่ IP ของ pi ในเว็บเบราว์เซอร์ มันจะเรียกใช้สคริปต์ด้านล่าง มันยังมีเมธอด GET เมื่อหมายความว่าข้อความใด ๆ หลังจาก ?Colour= จะถูกส่งต่อไปยังเว็บเซิร์ฟเวอร์และจะเป็น ใช้ในการเปลี่ยนสีของแถบนำ

def หลัก ():

ทั่วโลก CurrentColour

ข้อความ def Main() หมายความว่าจะสร้างฟังก์ชันที่เรียกว่า main ซึ่งสามารถเรียกได้จากทุกที่ในสคริปต์ และเส้นโกลบอลหมายความว่าจะอัปเดตตัวแปรในสคริปต์ทั้งหมด

ถ้า request.args.get('สี'):

CurrentColour=request.args.get('Colour') ถ้า CurrentColour == "White": FadeTORGB(255, 255, 255) elif CurrentColour == "Red": FadeTORGB(255, 0, 0) elif CurrentColour == "สีเขียว ": FadeTORGB(0, 255, 0) elif CurrentColour == "DarkBlue": FadeTORGB(0, 0, 255) elif CurrentColour == "LightBlue": FadeTORGB(0, 255, 255) elif CurrentColour == "สีส้ม": FadeTORGB(255, 15, 0) elif CurrentColour == "Pink": FadeTORGB(255, 0, 192) elif CurrentColour == "Yellow": FadeTORGB(255, 157, 0) elif CurrentColour == "สีม่วง": FadeTORGB(123, 0, 255) elif CurrentColour == "Black": FadeTORGB(0, 0, 0) ส่งคืน render_template('index.html')

สคริปต์นี้จะได้รับชื่อตามหลังเมธอด GET "Colour" และบันทึก จากนั้นจะตรวจสอบชื่อนั้นและจะเรียกใช้ฟังก์ชันที่จะสามารถ 3 ฟังก์ชันอื่น ๆ เพื่อเปลี่ยนไฟสีแดง สีเขียว และสีน้ำเงินได้พร้อมกัน

def FadeTORGB (RedNum, BlueNum, GreenNum):

start_new_thread(FadeUpRed, (RedNum,)) start_new_thread(FadeUpBlue, (BlueNum,)) start_new_thread(FadeUpGreen, (GreenNum,))

สิ่งนี้จะเรียกฟังก์ชันอื่นอีกสามฟังก์ชันที่จะเปลี่ยนปริมาณพลังงานที่ส่งไปยังแต่ละอันที่นำด้วยเอฟเฟกต์จาง

def FadeUpRed (REDUpNum):

Global RedColourCode ถ้า RedColourCode < REDUpNum: while RedColourCode REDUpNum: while RedColourCode > REDUpNum: RedColourCode -=1 pi.set_PWM_dutycycle(RedPin, RedColourCode)

def FadeUpBlue (BlueUpNum):

Global BlueColourCode ถ้า BlueColourCode < BlueUpNum: ในขณะที่ BlueColourCode BlueUpNum: ในขณะที่ BlueColourCode > BlueUpNum: BlueColourCode - = 1 pi.set_PWM_dutycycle (BluePin, BlueColourCode)

def FadeUpGreen (GreenUpNum):

Global GreenColourCode ถ้า GreenColourCode < GreenUpNum: while GreenColourCode GreenUpNum: while GreenColourCode > GreenUpNum: GreenColourCode -=1 pi.set_PWM_dutycycle (GreenPin, GreenColourCode)

ถ้า _name_ == "_main_":

app.run(host="0.0.0.0")

ขั้นตอนที่ 12: การเขียนโปรแกรมเว็บเซิร์ฟเวอร์

ตอนนี้เรามีเซิร์ฟเวอร์แล้ว เราต้องออกแบบเว็บไซต์

เนื่องจากเซิร์ฟเวอร์อยู่ในเทมเพลตและโฟลเดอร์สแตติกใน git โดยตรง ขั้นตอนนี้เป็นเพียงการอธิบายโค้ด

ฉันยังแนะนำให้คุณอ่านเกี่ยวกับ html, css, javascript

HTML

ขั้นแรกเราต้องเขียนโปรแกรม html ซึ่งเป็นที่ที่เนื้อหาทั้งหมดจะถูกจัดรูปแบบโดยใช้ css

1. การสร้างส่วนหัว (ชื่อ, ลิงก์ไฟล์,)

Wifi Led Strip

แท็กสองแท็กแรกบอกเว็บเบราว์เซอร์ว่าเป็นหน้าเว็บ จากนั้นบรรทัดที่สามบอกให้เบราว์เซอร์ซ่อนข้อความใด ๆ ในบล็อกและใต้นั้นเป็นชื่อที่จะปรากฏในแท็บ

ทำให้หน้าเว็บเต็มหน้าจอบน iOS

หากต้องการให้หน้าเต็มหน้าจอ ให้ป้อนรหัสนี้ใต้แท็ก

ต่อไปเราจะเพิ่มการอ้างอิงไปยังไฟล์ css ที่เราจะทำในภายหลังซึ่งจะเป็นวิธีที่แตกต่างไปจากปกติเนื่องจากขวดเป็นวิธีการจัดการไฟล์

หลังจากนี้คุณต้องปิดแท็กและสร้างแท็กเนื้อหา

แท็กเนื้อความหมายความว่าแท็กใด ๆ ที่อยู่ภายในนั้นจะปรากฏบนหน้าเว็บ

ตอนนี้เรากำลังจะสร้างปุ่มสีที่สามารถเปลี่ยนแถบไฟ LED ได้

เราจะสร้างหนึ่งสีสำหรับแต่ละสีและใส่ไว้ในตาราง

ตัวสร้างนี้เป็นกรอบนอกของตาราง

สิ่งนี้จะสร้างแถวสำหรับตาราง

มาสร้างปุ่มสีส้มกัน

แท็ก td สร้างเซลล์ จากนั้นฟังก์ชัน "onClick" จะเรียกใช้ฟังก์ชันจาวาสคริปต์ที่เราจะสร้างหลัง ฟังก์ชัน "คลาส" ใช้เพื่อจัดรูปแบบปุ่ม และรูปแบบเป็นเพียงการลงสี

เราจะต้องเปลี่ยนข้อความ sendColor และสไตล์ของปุ่มซึ่งกันและกัน แต่หลังจากทุกปุ่มที่ 2 เราจะปิดแถวและสร้างแถวใหม่

ฯลฯ…

หลังจากใส่สีครบแล้วก็ต้องปิดโต๊ะ

Javascript

ตอนนี้ เราต้องเพิ่มฟังก์ชัน "SendColour" ที่เราเคยอ้างอิงมาก่อนเพื่อทำสิ่งนี้ ก่อนอื่นเราต้องเพิ่มแท็กที่บอกเว็บเบราว์เซอร์ว่ามีจาวาสคริปต์อยู่บ้าง

แล้วสร้างฟังก์ชัน

ฟังก์ชัน SendColour (ClickedColour) {

ฟังก์ชันนี้จะส่งคำขอ Ajax ไปยัง raspberry pi เพื่อบอกให้เปลี่ยนเป็นสีที่คุณคลิก

xhttp = XMLHttpRequest ใหม่ ();

xhttp.open("GET", "?Colour=" + ClickedColour, false); xhttp.send(); }

ตอนนี้เราต้องปิดจาวาสคริปต์และ html

CSS

ตอนนี้เรากำลังจะออกแบบเว็บไซต์

cd แรกออกจากโฟลเดอร์ templates และไปที่โฟลเดอร์สแตติก

cd.. && cd คงที่

ตอนนี้สร้างไฟล์ Style.css

นาโน Style.css

ขั้นแรกให้ทำให้ตารางเต็มหน้าจอ

.สี {

ความกว้าง: 100%; }

.ปุ่ม {

ช่องว่างภายใน: 25px 35px; รัศมีเส้นขอบ: 4px; }

ทดสอบเซิฟเวอร์

เพื่อทดสอบเซิร์ฟเวอร์ให้ไปที่โฟลเดอร์เว็บเซิร์ฟเวอร์

ซีดี..

แล้วป้อน

หลาม Main.py

นี่จะเป็นการเริ่มต้นเซิร์ฟเวอร์ จากนั้นบนคอมพิวเตอร์ของคุณให้เปิดเว็บเบราว์เซอร์และไปที่

YOUR_PI_PI:5000ส่วนท้าย:5000 มีความสำคัญสำหรับตอนนี้ เนื่องจากเป็นพอร์ตที่เว็บเซิร์ฟเวอร์ทำงานอยู่

หากคุณไปที่หน้าเว็บและได้รับ "Internal Server Error" ให้ดูที่คอนโซล (putty หรือ terminal) และคุณจะเห็นข้อความจำนวนมาก เพียงแค่ดูที่บรรทัดสุดท้ายและควรเป็น บอกคุณว่าเกิดอะไรขึ้น คุณสามารถ google เพื่อค้นหาคำตอบ

แต่ถ้าเห็นสีบนหน้าจอ คุณสามารถคลิกได้หนึ่งสีและคุณจะเห็นแถบไฟ LED ไปที่สีนั้น หากไม่เป็นเช่นนั้นให้ตรวจสอบว่าเสียบปลั๊กและเปิดเครื่องแล้วหรือป้อนรหัส html ถูกต้อง.

ขั้นตอนที่ 13: ทำให้มันใช้งานได้กับ Apache2

ตอนนี้เราได้ทดสอบแล้ว เราต้องให้มันคุยกับ apache เพื่อให้สามารถทำงานเมื่อเริ่มต้นและบนพอร์ต 80 (เว็บพอร์ตมาตรฐาน)

1. ภายในโฟลเดอร์ WebServer ของคุณ สร้างไฟล์ wsgi

nano wifiled.wsgi

จากนั้นในไฟล์ให้ป้อน

นำเข้าsys

sys.path.insert(0, '/home/pi/Webserver/') จากแอปนำเข้าหลักเป็นแอปพลิเคชัน

จากนั้นเพิ่มผู้ใช้ pi ในกลุ่มชื่อ www-data ซึ่งจะทำให้ apache สามารถดูในโฟลเดอร์เว็บเซิร์ฟเวอร์ได้

sudo usermod -a -G www-data pi

จากนั้นลบการกำหนดค่าเริ่มต้น

sudo a2dissite 000-default

จากนั้นสร้างไฟล์ในโฟลเดอร์กำหนดค่า Apache

sudo nano /etc/apache2/sites-available/wifiled.conf

และป้อน

ชื่อเซิร์ฟเวอร์ WifiLed ServerAdmin [email protected] WSGIScriptAlias / /home/pi/Webserver/wifiled.wsgi สั่งอนุญาต ปฏิเสธ อนุญาตจากทั้งหมด ต้องการ ErrorLog ${APACHE_LOG_DIR}/error.log LogLevel เตือน CustomLog ${APACHE_LOG_DIR}/access.log รวมกัน

จากนั้นบอก apache ให้อ่านการกำหนดค่าโดยป้อน

sudo a2ensite wifiled.conf

ตอนนี้รีสตาร์ท pi เมื่อรีบูตเข้าสู่เว็บเบราว์เซอร์ของคุณ

YOUR_PI_IP

ขั้นตอนที่ 14: การตั้งค่า Tasker และ Ifttt และบริการอื่นๆ

ก่อนที่เราจะติดตั้งโปรแกรมเหล่านี้ คุณต้องตั้งค่าพอร์ต fording บนเราเตอร์ของคุณ เนื่องจากเราเตอร์แต่ละตัวมีความแตกต่างกัน คุณสามารถอ่านวิธีการได้ที่นี่

ทาซเคอร์

บนอุปกรณ์ Android ของคุณ open taker

จากนั้นสร้างโปรไฟล์ใหม่ตามเหตุการณ์ คุณสามารถเลือกทริกเกอร์ใดก็ได้ ฉันเลือก "เสียงเรียกเข้าโทรศัพท์" และตั้งค่าสีให้ใครก็ได้ "C:ANY" จากนั้นระบบจะขอให้คุณเลือกงาน คลิก "งานใหม่" และตั้งชื่อตามการกระทำของคุณ ฉันจะเรียกมันว่า "การโทร" จากนั้นกดเพิ่มการกระทำแล้วมองหา "HTTP Head" และตั้งค่า Server:Port เป็น your_raspberry_pi_IP จากนั้นภายใต้เส้นทางคุณสามารถตั้งค่าสีทึบด้วย "/?Colour=Green" หรือคุณสามารถสร้าง ผลที่เราจะทำในขั้นตอนต่อไป จากนั้นคลิกย้อนกลับและย้อนกลับอีกครั้ง

IFTTT

ไปที่ ifttt ก่อนแล้วสร้างแอปเพล็ตใหม่ เลือกทริกเกอร์ใดๆ (ฉันเลือกปุ่ม) จากนั้นสำหรับการดำเนินการ ให้เลือกช่องผู้ผลิตและบอกว่าเราจะขอ จากนั้นสำหรับ URL ให้ป้อน YOUR_PUBLIC_PI/?Colour=LightBlue หากคุณไม่รู้จักสาธารณะของคุณ ip เพียงป้อน "My Ip" บน google จากนั้นสำหรับวิธีการป้อน HEAD จากนั้นคลิก "สร้างการกระทำ" ตอนนี้เมื่อการกระทำของคุณเกิดขึ้น ifttt ขอให้ pi ของคุณเปลี่ยนสี

บริการอื่นๆ

คุณยังสามารถเชื่อมต่อบริการอื่นๆ ที่สร้างคำขอ HTTP HEAD หรือ GET

ขั้นตอนที่ 15: การสร้างเอฟเฟกต์แบบกำหนดเอง

ใน Main.py เพิ่มคำสั่งนำเข้าภายใต้การนำเข้าระบบปฏิบัติการ enter

เวลานำเข้า

ก่อนที่เราจะสร้างเอฟเฟกต์ เราจำเป็นต้องเพิ่มตัวแปรภายใต้ GreenBeforeEffect add

CanChangeColour = จริง

จากนั้นเปลี่ยนถ้า request.args.get('Colour'):

ถึง

ถ้า request.args.get('Colour') และ CanChangeColour:

ส่วนภายใต้การส่งคืน render_template('Main.html') add

@app.route('/Effect', วิธี=['GET'])

def ผลกระทบ ():

จากนั้นตั้งค่าตัวแปรเป็น global

x = 0

RedColourCode ทั่วโลก Global BlueColourCode ทั่วโลก GreenColourCode

มาสร้างเอฟเฟกต์แรกของเรากันเถอะ

ถ้า request.args.get('Call'):

RedBeforeEffect = RedColourCode สีน้ำเงินBeforeEffect = BlueColourCode GreenBeforeEffect = GreenColourCode FadeTORGB(0, 0, 0) time.sleep(2)

การดำเนินการนี้จะทำงานเมื่อ pi ได้รับคำขอเช่น "/?Effect=Call" และจะบันทึกสีปัจจุบันเพื่อให้เราสามารถโทรกลับได้ จากนั้นเราจะทำให้แถบนำเป็นสีดำและรอจนกว่าจะเกิดขึ้น

ตอนนี้เรากำลังจะทำให้ไฟ LED จางจากสีดำเป็นสีเขียวแล้วเป็นสีดำอีกครั้งและฉันต้องการทำสิ่งนี้ห้าครั้ง

ขณะที่ x <= 5: FadeTORGB(0, 255, 0) x +=1 time.sleep(1) FadeTORGB(0, 0, 0) time.sleep(1) CanChangeColour = True time.sleep(2) FadeTORGB(RedBeforeEffect, BlueBeforeEffect, GreenBeforeEffect)

จะนับถึงห้า แต่ทุกครั้งที่สีจะจางลงเป็นสีเขียว จากนั้นรอสักครู่แล้วเปลี่ยนเป็นสีดำ จากนั้นสิ่งที่ทำเสร็จแล้วจะเปลี่ยนสีกลับเป็นสีที่คุณมีก่อนที่จะเปลี่ยน

ตอนนี้เราเพิ่งสร้างการตอบสนอง

กลับ ""

ยังรีบูตคุณราสเบอร์รี่pi

sudo รีบูต