Տեղական եղանակային կայարան. 8 քայլ (նկարներով)

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:46

Երբ ես փնտրում էի մեծ նախագիծ իմ առաջին կուրսի նախագծի համար, ես շատ գաղափարներ ունեի, թե ինչ պետք է անեի, բայց դրանցից ոչ մեկը դժվար չգտա:

Հետագայում ես մտածեցի այնպիսի եղանակային կայան սարքել, որն իր մեջ առանձնահատուկ բան ունենար: Ես ուզում էի, որ կարողանայի պահել իմ բոլոր տվյալները և հետագայում դրանք օգտագործել վիճակագրության համար: Այս նախագիծը հատուկ կկազմվի այն մարդկանց համար, ովքեր հետաքրքրված են օդերևութաբանությամբ և ցանկանում են տանը ստեղծված եղանակային կայան, որը չի կարժենա այնքան, որքան շուկայում առկաները: Նախագիծը նաև արված է ցանկացած պահի սենսորներ ավելացնելու կամ հեռացնելու ունակությունը պահպանելու համար:

Ես իսկապես ուրախացա, երբ տեսա իմ վերջնական արդյունքը, որը սպասվածից լավ ստացվեց:

Այն պատրաստված է Raspberry Pi 4 աշխատող Linux- ից:

• Apache կայք (html css js)
• Eventlet (հետնապահ սերվերի կայք)
• MariaDB (տվյալների բազայի սերվեր)

Պարագաներ

• Ազնվամորի Pi 4:

  sd քարտ (նվազագույնը 16 գբ)

• Սենսորներ:

  1. Քամու արագության QS-FS տվիչ
  2. Wind Sensor Garden Signal Output Aluminium Alloy Wind Direction Sensor Wind Vane Speed Measuring Instrument https://www.banggood.com/Wind-Sensor-Garden-Signal-Output-Aluminium-Alloy-Wind-Direction-Sensor-Wind-Vane-Speed -Measuring-Instrument-p-1624988.html? Rmmds = myorder & cur_warehouse = CN
  3. DHT22 (խոնավություն)
  4. BMP280 (օդի ճնշում)
  5. DS18B20 (ջերմաստիճան)

• Էներգամատակարարում

  • 5 վ էլեկտրամատակարարում (RPi)
  • 9 վ էլեկտրամատակարարում (արտաքին տախտակի սնուցման սարքի վրա)

• Հացաթուղթ (x2)

  T-cobbler plus RPi 4-ի համար

• jumper լարերը

• IC- ները

  • MCP3008
  • PCF8574AN
• LCD էկրան 16x2
• LED (կարմիր

• Պատյան (օպտիկական)

  • գինու արկղեր
  • փայտե սյուն (2 մ)
  • փայտե տախտակ (1 մ)

Քայլ 1: Իրերի պատրաստում

Միշտ կարևոր է ձեռք բերել բոլոր անհրաժեշտ իրերը ՝ նախքան քայլի վրա աշխատել սկսելը: Սա կխնայի ձեզ շատ ժամանակ դրա ընթացքում աշխատելիս:

Այսպիսով, նախ, Ինչ է ձեզ անհրաժեշտ.

• Ազնվամորի Pi 4:

  sd քարտ (նվազագույնը 16 գբ)

• Սենսորներ:

  1. Քամու արագության տվիչ QS-FS
  2. Wind Sensor Garden Signal Output Aluminium Alloy Wind Direction Sensor Wind Vane Speed Measuring Instrument
  3. DHT22 (խոնավություն)
  4. BMP280 (օդի ճնշում)
  5. DS18B20 (ջերմաստիճան)

• Էներգամատակարարում

  • 5 վ էլեկտրամատակարարում (RPi)
  • 9 վ էլեկտրամատակարարում (արտաքին տախտակի սնուցման սարքի վրա)
• Հացաթուղթ (x2)
• T-cobbler plus RPi 4-ի համար
• jumper լարերը

• IC- ները

  • MCP3008
  • PCF8574AN
• LCD էկրան 16x2
• LED (կարմիր)

• Պատյան (օպտիկական)

  • գինու crateswooden
  • փայտե տախտակ (1 մ)
  • սյուն (2 մ)

Բոլոր հղումները, որտեղից ես դրանք գնել եմ, կարող եք գտնել ներածության ներքո գտնվող մատակարարումների բաժնում:

Քայլ 2: RPi- ի կարգավորում

Մեր նախագծի համար մեզ անհրաժեշտ է RPi ՝ տվյալ ծրագրաշարը տեղադրված:

• Apache կայք (html css js)
• Flask Socket-IO (հետնապահ սերվերի կայք)
• MariaDB (տվյալների բազայի սերվեր)

Տեղադրելուց առաջ միշտ ձեռնտու է համոզվել, որ RPi- ի վրա տեղադրված է վերջին ծրագրաշարը: Դա անելու համար պարզապես կատարեք հետևյալ հրամանը.

sudo apt թարմացում

Apache:

Նախ եկեք խոսենք Apache- ի մասին: Apache- ը վեբ սերվեր է, որն օգտագործվում է ամբողջ աշխարհում: Այն վարում է ձեր կայքը անթերի: Միակ բանը, որ դուք պետք է անեք, այն տեղադրելն է և ձեր կայքը ճիշտ թղթապանակում դնելը և այնտեղ:

sudo apt տեղադրել apache2 -y

Վերջ!

Համոզվելու համար, որ ամեն ինչ ճիշտ է տեղադրված, դիտեք ձեր ազնվամորի pi Ip- հասցեն ձեր դիտարկիչում և տեսեք, արդյոք ստացե՞լ եք կանխադրված կայքը: Եթե այս քայլի հետ կապված որևէ խնդիր ունեք, կարող եք ստուգել RPi կայքը այստեղ:

Իրադարձություն

Այժմ եկեք տեղադրենք Eventlet- ը: Այն գործարկելու է մեր հետևի սերվերը և կապ է հաստատելու մեր տվիչներից դեպի մեր կայքը: Դրա համար մեզ պետք է մի քանի փաթեթ:

Flask-socketIO:

pip3 տեղադրել flask-socketio

Eventlet:

pip3 տեղադրեք իրադարձություն

Gevent:

pip3 տեղադրել gevent

Մարիադբ:

Mariadb- ը MySQL- ի վրա հիմնված տվյալների շտեմարան է, որը կազմում է հարաբերական շտեմարաններ: Այն հաճախ օգտագործվում է RPi- ում և, հետևաբար, շատ օգնություն կա, որը կարող եք գտնել ինտերնետում: Լրացուցիչ տեղեկությունների համար կարող եք անցնել այս հղումով:

apt install mariadb-server

Քայլ 3. Սենսորների միացում և կոդի ավելացում

Սենսորները մեր RPi- ին միացնելու համար կարող ենք օգտագործել T-Cobbler plus: Սա հարմար փոքր գործիք է, որը հնարավորություն է տալիս օգտագործել ձեր բոլոր կապումներն ձեր RPi- ի վրա տախտակի վրա:

Իմ նախագծում ես ունեմ 5 տվիչ.

1. Քամու արագության տվիչ QS-FS
2. Wind Sensor Garden Signal Output Aluminium Alloy Wind Direction Sensor Wind Vane Speed Measuring Instrument
3. DHT22 (խոնավություն)
4. BMP280 (օդի ճնշում)
5. DS18B20 (ջերմաստիճան)

Քամու արագության տվիչ

Առաջին հերթին ես սկսեցի քամու արագության սենսորից, քանի որ հիմնականում ոգևորված էի այս սենսորով: Այն 0-5 վ ելքային անալոգային ազդանշան ունեցող սենսոր է և աշխատելու համար անհրաժեշտ է նվազագույնը 7 վոլտ լարման: Ես ընտրում եմ 9 վոլտ ադապտեր `այն սնուցելու համար:

Այս սենսորում կարդալու համար ես օգտագործել եմ MCP3008, որը IC է անալոգային ազդանշաններում կարդալու համար: IC- ն կարող է աշխատել 3.3V կամ 5V- ի վրա, բայց ես ընտրում եմ 3.3V ՝ այն RPi- ի հետ համատեղելի դարձնելու համար: Սա նշանակում էր, որ ես պետք է փոխեի ելքային լարումը 5 Վ -ից մինչև 3.3 Վ: Ես դա արեցի `ավելացնելով լարման բաժանարար, որը ստեղծվել է 2 դիմադրիչով (2k և 1k ohm):

Քամու ուղղության ցուցիչ

Քամու ուղղությունը նույնքան կարևոր է, որքան քամու արագությունը, ուստի ես դա կկապեմ հաջորդիվ:

Այս սենսորն ունի նույն բնութագիրը, ինչ քամու արագության տվիչը: Այն կաշխատի նաև 9 Վ լարման վրա և ունի 5 վոլտ ելքային լարում: Նաև այս սենսորը մենք միացնելու ենք MCP3008- ին լարման բաժանարարի միջոցով:

DHT22 (խոնավություն):

DHT22- ը կարդում է խոնավությունը: Այն ձեզ տալիս է տոկոսային արժեք, և դրա արժեքը կարելի է կարդալ ՝ օգտագործելով RPi- ի վրա I2C արձանագրությունը: Հետևաբար, դուք պետք է միացնեք I2C նավահանգիստները Raspi-config- ում: Լրացուցիչ տեղեկություններ այստեղ:

BMP280 (օդի ճնշում):

BMP280- ը օգտագործվում է օդի ճնշումը կարդալու համար: Դրա արժեքը կարդացվում է SPI ավտոբուսի միջոցով RPi- ում: Այս արձանագրությունը նույնպես պետք է միացված լինի Raspi-config- ում: Իմ ծածկագրի համար ես օգտագործել եմ Adafruit գրադարանը:

DS18B20 (ջերմաստիճան):

Վերջին սենսորը չափում է ջերմաստիճանը: այս սենսորը Դալլասից է, և եթե դուք փոքր փորձ ունեք Դալլասի հետ, ապա հավանաբար արդեն պետք է իմանաք, որ նրանք օգտագործում են 1Wire ավտոբուսը: Մի զարմացեք, եթե ասեմ, որ այս արձանագրությունը նույնպես պետք է միացված լինի Raspi-config- ում:

Ինչպես միացրեցի սենսորները

Որպես pdf ես վերբեռնեցի էլեկտրական և տախտակի սխեման, որպեսզի այն մի փոքր ավելի հեշտ լինի:

Սենսորները հաջողությամբ միացնելուց և բոլոր սենսորները կարդալու համար անհրաժեշտ կոդը ավելացնելուց հետո կարող եք առաջ գնալ և գնալ հաջորդ քայլին: Եթե ցանկանում եք սենսոր թողնել կամ ուզում եք ավելին ավելացնել, կարող եք դա անել:

Քայլ 4: Վեբ Ui նախագծում

Այժմ մենք միացրեցինք մեր կայքի համար դիզայնի կարիք ունեցող տվիչները:

Մենք ցանկանում ենք, որ կայքը հեշտ տեսք ստեղծի ՝ միաժամանակ ցուցադրելով տվիչների բոլոր իրական ժամանակի տվյալները:

Նաև մենք ցանկանում ենք, որ կարողանանք տեսնել այս չափված արժեքների պատմությունը մեկ միջակայքում:

Այսպիսով, Սկզբում ես սկսեցի փնտրել ոստայնում ՝ որոշ ոգեշնչման համար: Ամենից շատ այնտեղ, որտեղ պարզապես ջրհորի տեղեկատվական կայքերն են, առանց իրական դիզայնի, որը ես փնտրում էի: Եղանակային կայանները, որոնք արդեն շուկայում էին, ամենայն հավանականությամբ ցուցադրում էին: Եվ այդ ցուցադրությունից դուրս եկավ իմ ոգեշնչումը: Դիսփլեյների մեծ մասն ունի դիզայն ՝ ցանցային տեսքով: Սա ինձ գաղափար տվեց ստեղծել գլխավոր էջ, որտեղ կցուցադրվեին բոլոր սենսորները:

Բայց, ես նաև ասացի, որ ուզում եմ մի էջ կազմել, որտեղ դուք կարող եք տեսնել յուրաքանչյուր սենսորի պատմությունը դրա արժեքների մասին:

Այդ պատճառով ես նաև պատրաստեցի 2 -րդ էջը, որը պարունակում էր սա: Այս էջում ես կարող եմ տեսնել իմ սենսորի մասին լրացուցիչ տեղեկություններ, որոնք չեն ցուցադրվի իմ առաջին էջում և, իհարկե, պատմության հատվածում:

Մի քանի ժամ անց իմ ամբողջ դիզայնը մշակվեց:

Դիզայնը կատարվել է Adobe XD- ի միջոցով:

Քայլ 5: Տվյալների բազայի ստեղծում

Դիզայնի մասից ընդմիջում ստանալու համար ես սկսեցի իմ տվյալների բազայում:

Այս տվյալների բազան կպարունակի բոլոր տվիչները (5), բոլոր գործարկիչները (2) և այն արժեքները, որոնք ունեին այդ տվիչները:

Տվյալների բազան բավականին հեշտ է և ունի մի քանի հարաբերություններ:

Դուք կարող եք տեսնել տվյալների բազայի մոդելը լուսանկարում:

Քայլ 6: Կայքի կոդավորում. Frontend (html Css)

Վերադառնալ կայք:

Այժմ ես ունեմ դիզայն, որով կարող եմ սկսել այն կոդավորել որպես html css, որպեսզի այն իսկապես օգտագործվի:

Գլխավոր էջում ՝

Ես սկսեցի յուրաքանչյուր սենսոր դիտարկել որպես իմ վեբ կայքի տարր: Որպեսզի հետագայում կարողանամ թույլ տալ, որ այս հատվածը գեներացվի իմ Javascript ծածկագրով:

Ես նաև տարրերի մեջ տեղադրեցի պատահական JS- տիրապետող դասեր: Դրանք հնարավորություն կտային փոխել այդ տարրի բովանդակությունը

Սա ինձ շատ ժամանակ տևեց, քանի որ ես այնքան էլ լավ չեմ այս կոնկրետ լեզվով:

Հիմնական էջն ավարտելուց հետո ժամանակն էր սկսել պատմության էջից:

Պատմության էջում

Այս էջը մի փոքր ավելի հեշտ էր վերստեղծել: Այս էջում կային նաև js- կրողներ ՝ սենսորի մասին տեղեկությունները ստանալու համար, իրական ժամանակի արժեքի բնիկ և ցուցադրելու աղյուսակը չափված արժեքներով:

Իմ վեբ էջում ներդիր-տարբերակ ստեղծելու համար ՝ Աղյուսակ կամ Գծապատկեր ընտրելու համար, ես պետք է մի քիչ Javascript ավելացնեի, որպեսզի տարրերը չցուցադրվեին կամ չցուցադրվեին:

Այժմ մենք ունենք ցնցող կայք, բայց ոչինչ չե՞ք կարող ցույց տալ դրա վրա: Եկեք դա շտկենք:

Դուք կարող եք գտնել իմ կոդը իմ github պահոցում ՝

Քայլ 7: Կայքի կոդավորում. Հետընթաց (իրադարձություն) + Կոդավորման առաջընթաց (javascript)

Հետնապահ:

Մինչ հետընթացի սերվերն արդեն տեղադրված է, մենք դեռ պետք է դա իրականացնենք մեր նախագծում: Նախ պետք է ավելացնել որոշ ներմուծումներ, որպեսզի ամեն ինչ ճիշտ աշխատի:

տափաշիշի ներմուծումից Ֆլասկ, պահանջ, jsonify- ից flask_socketio ներմուծում SocketIO- ից flask_cors ներմուծում CORS

Սերվերը գործարկելու համար մենք պետք է ավելացնենք հետևյալը.

socketio.run (ծրագիր, կարգաբերում = Կեղծ, հյուրընկալող = '0.0.0.0')

Այժմ սերվերը առցանց է, բայց այն չի կարողանա խոսել ֆրոնտենդի հետ:

Այն ոչինչ չի ստանում և չի վերադարձնում: Եկեք փոխենք դա:

Տվյալների բազայի բոլոր սենսորները խնդրելու համար մենք կավելացնենք երթուղի.

@app.route (վերջնակետ + '/տվիչներ', մեթոդներ = ['GET']) def get_sensors (): if request.method == 'GET': s = DataRepository.get_sensors () վերադարձնել jsonify (տվիչներ = ներ), 200

Այս կոդը օգտագործում է DataRepository կոչվող դաս և խոսում է տվյալների բազայի հետ: Այստեղ այն մեզ վերադարձնում է մեր պահանջած տվիչները:

Մեզ անհրաժեշտ է նաև երթուղի ՝ 1 կոնկրետ սենսորի և մեկ այլ տվյալ սենսորի արժեքների մասին տեղեկությունները հարցնելու համար:

Սրանք բոլորը երթուղիներ են, բայց իրական ժամանակի տվյալները հնարավոր դարձնելու համար: Մենք պետք է յուրաքանչյուր ընդմիջում ուղարկենք այն տվյալները, որոնք սենսորները պարզապես կարդում են: Դա անելու համար մենք օգտագործում ենք Socket-IO կապը: Դա կապ է, որը ստեղծվել է այն պահից, երբ ինչ -որ մեկը կայք է ներբեռնում JS- ով և այն բաց է պահում: Սա լիարժեք երկկողմանի կապ է, ինչը նշանակում է, որ այն կապ է, որը միաժամանակ աշխատում է երկու եղանակով (ուղարկել և ստանալ): Սա օգտագործելու համար մենք պետք է ավելացնենք հետևյալ ծածկագիրը:

@socketio.on ('Connect') def initial_connection (): print ('A new client connect') socketio.send ("U bent geconnecteerd") # # Ուղարկել հաճախորդին:

Կոդի այս հանգստությունը գործարկվում է, երբ հաճախորդը միանում է:

Ֆրոնտենդից որևէ հաղորդագրություն ստանալու համար կարող եք օգտագործել այս ծածկագիրը:

@socketio.on ('հաղորդագրություն') def message_recived (): pass

Կարող եք նաև հաղորդագրություններ ուղարկել: Դա կատարվում է հետևյալի միջոցով.

socketio.emit ('Update_RTD', dict_results, broadcast = True)

Առաջին տրված փաստարկը կարող է լինել այն, ինչ ցանկանում եք, բայց կհամապատասխանի այն, ինչ դուք տեղադրել եք ձեր JS- ում, և դրանով կարող եք նաև օբյեկտներ ուղարկել: Սա ընտրովի չէ:

Javascript:

Կարևոր է մի փոքր JS ավելացնել, որպեսզի սերվերը հետադարձ սերվերի հետ կապ ունենա, որպեսզի կարողանա ցուցադրել ընթացիկ տվյալները և տեղեկատվություն ստանալ տվյալների բազայից:

Մենք կկոչենք socketIO- ի գործառույթները, որոնք մենք կատարել ենք տվյալների ստացման և ուղարկման համար:

Երբ մենք ստանում ենք տվյալներ որպես Json օբյեկտ, մենք այն կապամոնտաժենք ՝ մեր ուզած տեղեկությունները ստանալու համար, այնուհետև դրանք կդնենք JS- կրիչների մեջ, որոնք մենք տեղադրում ենք մեր կայքում:

Դուք կարող եք գտնել իմ կոդը իմ github պահոցում ՝

Քայլ 8: Պատյան պատրաստելը

Պարկուճը շատ աշխատանք տևեց և կարող է կատարվել ցանկացած ձևով, ինչպես ցանկանում եք: Այսպես արեցի:

Ես վերցրեցի գինու տուփեր:

Նրանցից մեկը ես օգտագործում էի որպես տուփ `պարունակելու համար իմ RPi- ն և իմ տվիչների մեծ մասը:

Քամու արագության սենսորը և քամու ուղղության սենսորը, իհարկե, տեղադրված չէին ներսում, այլ ձողի վրա տեղադրված խաչմերուկի վերևում: Այս ձողի վրա ես կախեցի այդ գինու արկղը, որտեղ ես նույնպես դուռ էի պատրաստում:

Դուք կարող եք տեսնել, թե ինչպես ավարտեցի իմ նախագիծը ՝ նայելով լուսանկարներին:

Սա, իհարկե, օրինակ է, թե ինչպես կարող եք դա անել: Դուք կարող եք անել այն, ինչ ուզում եք: