Գովազդային արգելափակման նորագոյացություններ ՝ 11 քայլ

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

Ես ուզում էի մի պարզ վեբ կայք դարձնել հեռավոր ՝ իմ Raspberry Pi զրոյին միացված նեոպիքսելների շերտի համար և շարունակել օգտագործել այն ՝ Pi-Hole- ի միջոցով իմ ցանցում գովազդերի արգելափակման համար: Սկզբում ես պարզապես ուզում էի մի քանի լուսարձակներ ավելացնել իմ սենյակում, բայց ամեն ինչ լարելով ՝ հասկացա, որ ոչ մի կերպ չեմ կարող դրանք հարմար վերահսկել: Այսպիսով, ես որոշեցի ստեղծել մի պարզ վեբ կայք ՝ կառավարման որոշ հիմնական տարբերակներով ՝ օգտագործելով apache սերվերը, որն արդեն ստեղծել էր Pi-hole տեղադրիչը: Ես տրամադրեցի www- տվյալների արմատային թույլտվություններ, ինչը անվտանգության ռիսկ է, այնպես որ դուք պետք է արտաբերելի կերպով վեբ սերվերը հասանելի դարձնեք արտաքին աշխարհին: Սա սկսվեց հիմնականում իմ սեփական փաստաթղթերի համար և ինչ -որ կերպ դարձավ իմ առաջին հրահանգը;) Այսպիսով, ես իսկապես կգնահատեի, եթե կարողանայիք նշել, եթե ինչ -որ բան անհասկանալի է, կամ եթե ես ինչ -որ բան բաց եմ թողել:

Քայլ 1: Օգտագործված նյութեր

• Ազնվամորի Pi (ես սկսեցի Pi 2 -ով, այնուհետև փոխվեց WH- ով, gpio- ի կապումներն կարող են մի փոքր տարբեր լինել, բայց հակառակ դեպքում յուրաքանչյուր մոդել լավ է)

  • Եթե ունեք RPi առանց ներկառուցված wifi, wifi ադապտերը նույնպես օգտակար է:
  • Oանկության դեպքում պատյան ազնվամորի պիի համար
• 2 արու-էգ ցատկող լար (օրինակ)
• Neopixels ws2811 (ես դրանք օգտագործել եմ)
• RPi- ի համար 1 10W սնուցման աղբյուր (հին հեռախոսի լիցքավորիչը կանի)
• Neopixels- ի համար 1 ~ 50W էլեկտրամատակարարում (ես օգտագործել եմ այսպիսին, բայց, հավանաբար, ավելի փոքրը կբավարարեր, բայց եթե ավելի շատ լուսադիոդներ կցանկանայիք, ապա ձեզ ընդարձակվելու տարածք է մնացել):
• Իգական միակցիչի միակցիչ (այսպես)

Քայլ 2: Պատրաստեք օպերացիոն համակարգը

Ներբեռնեք Rasbian- ի վերջին տարբերակը raspberrypi.org- ից: Lite տարբերակը լավ է այս նախագծի համար, եթե նախատեսում եք օգտագործել ազնվամորի pi- ն այլ բանի համար, կարող եք մտածել ամբողջական տարբերակը gui- ով: Հետո ես այրել եմ պատկերը Etcher- ով: Դրանից հետո, որպեսզի համոզվեմ, որ այն կկապվի իմ wifi ցանցի հետ, ես ավելացրեցի wpa_supplicant.conf sd քարտի բեռնման գրացուցակում: Ֆայլի բովանդակությունը պետք է ունենա այս տեսքը.

~~~

ctrl_interface = DIR =/var/run/wpa_supplicant GROUP = netdev update_config = 1

ցանց = {

ssid = "SSID"

psk = "PASSWORD"

key_mgmt = WPA-PSK}

~~~

Ssh- ը միացնելու համար ես ստեղծեցի ssh անունով ֆայլ (առանց որևէ ընդլայնման) նույն գրացուցակում: Սա թույլ կտա համոզվել, որ դուք կարող եք կարգավորել ամեն ինչ ձեր ցանցի մեկ այլ համակարգչից:

Քայլ 3: Միացրեք նեոպիքսելները

Սկզբում ես հոսանքի աղբյուրը միացրի կանացի միակցիչի միակցիչին և RPi- ն դրեցի պատյանում: Ես պտուտակեցի լամպերից (կապույտ մալուխը) և ցատկող մետաղալարերի արական կողմը, ժապավենի միակցիչի բացասական կողմում: Թռիչքաձողի մյուս ծայրը, որը ես իսկապես միացրի gpio- ի վերնագրի գրունտային քորոցին, ես օգտագործեցի 6 -րդ կապը, սակայն ճշգրիտ կապումներն, որոնք կարող եք օգտագործել, կախված կլինի ձեր օգտագործած RPi ճշգրիտ մոդելից:

Երկրորդ, ես միակցիչի դրական ծայրին միացրի 5V մալուխը led- երից (կարմիր մալուխ): Իմ լուսարձակի վրա տեղադրված էր ցատկող մետաղալարերի միակցիչ լրացուցիչ հողային մալուխի և տվյալների մալուխի (սպիտակ մալուխի) վրա: Ես պարզապես անտեսեցի լրացուցիչ հողային մալուխը, այն ավելորդ էր իմ տեղադրման համար: Տվյալների մալուխի վրա ես արու և էգ jumper լարը միացրեցի gpio pin 12 -ի հետ, կրկին ճշգրիտ քորոցը, որը դուք պետք է օգտագործեք, կախված է ձեր RPi- ից: Հետո միացրեցի էներգիայի աղբյուրը RPi- ի և պիքսելների համար: Լեդերը մի փոքր լուսավորվեցին, եթե ամեն ինչ ճիշտ լարված է:

Քայլ 4: Սկսեք RPi- ն

Այն բանից հետո, երբ RPi- ն մեկ րոպե տևեց վերբեռնման համար, ես նայեցի ազնվամորիից IP հասցեն `nmap- ով: Բայց ցանկացած ցանցային սկաներ, ձեր երթուղղիչի տեղեկատվական վահանակը կամ շատ դեպքերում պարզապես «raspberrypi.local» կանի: Այդ տեղեկատվությամբ ես կապվեցի RPi- ի հետ ssh- ի միջոցով: Լռելյայն օգտվողը pi- ն է `ազնվամորու գաղտնաբառով: Այսպիսով, դա առաջին բանն է, որ ես փոխեցի `passwd` օգտագործելով առաջին մուտքից անմիջապես հետո: Եթե ցանկանում եք ձեր pi- ին մուտք գործել ssh- ի միջոցով ՝ ձեր տեղական ցանցից դուրս, ապա պետք է նայեք fail2ban- ի և բանալիների նույնականացմանը: Ես անձամբ դրա օգտագործման դեպք չունեմ, ուստի այն թողնում եմ միայն գաղտնաբառով:

Երկրորդ ՝ ես թարմացրի ծրագրակազմը ՝ օգտագործելով «sudo apt update && sudo apt upgrade -Y»: Ինձ անհրաժեշտ էր նաև լրացուցիչ ծրագրակազմ ՝ ազատագրման «sudo apt-get install scons swig git python-dev build-essential -Y» կազմելու համար: Հետո ես պատճենեցի remերեմի Գարֆի գերազանց ազատությունը github- ի վրա `git clone https:// github.com/jgarff/rpi_ws281x.git`: Դրանից հետո ազատագրումը կլոնավորվեց, ես գնացի rpi_ws281x գրացուցակ, օգտագործեցի scons և այնուհետև տեղադրեցի libary- ը `sudo python python/setup.py install` միջոցով: Python- ում/օրինակները գեղեցիկ ցուցադրական «strandtest.py» են ՝ իրոք կոկիկ անիմացիաներով, որոնք կարող եք սկսել `sudo python python/example/strandtest.py` - ով:

Քայլ 5: Pi-Hole

Wideանցի լայն լրացման արգելափակում ստեղծելու համար Pi-Hole- ը կատարյալ է: Այն տեղադրվում է պարզապես `sudo curl -sSL https://install.pi-hole.net | բաշ ` Գեղեցիկ մասն այն է, որ այն նաև կստեղծի վեբ սերվեր:

Տեղադրիչը գործարկելուց հետո կցանկանաք մուտք գործել ձեր երթուղղիչի ադմինիստրատորի կայք և տալ ձեր RPi- ին ստատիկ IP հասցե և տեղադրել այն որպես DHCP սերվեր: Եթե դուք սահմանել եք ցածր վարձակալության ժամկետ, ապա ձեր PI- անցքը պետք է աշխատի հիմա:

Քայլ 6: Կառավարեք լույսերը

Նեոպիքսելները վերահսկելու ամենահեշտ ձևը փոքր պիթոնային ծրագրերն են: Բայց ssh օգտագործել ամեն անգամ, երբ ցանկանում եք լույսերը միացնել, անհարմար է, հատկապես բջջային սարքի վրա: Այսպիսով, ես որոշեցի օգտագործել փոքր կայք ՝ որպես հեռակառավարման վահանակ: Սա ԱՆՎՏԱՆԳՈԹՅԱՆ ՌԻՍԿ Է, քանի որ ես www-data root- ին թույլտվություն եմ տվել առանց գաղտնաբառի ստուգման: Հավանաբար, դուք չպետք է այս կայքը հասանելի դարձնեք ձեր սահմաններից դուրս:

PI- անցքի կառավարման վահանակի և լույսի հեռակառավարման վահանակի միջև ընտրությունը դյուրին դարձնելու համար ես օգտագործողին pi գրելու թույլտվություն տվեցի/var/www/html `sudo chown -R pi/var/www.html` և ես ստեղծեցի index.php ֆայլը/var/www/html/. Մի պարզ բան, ինչպիսին է.

~~~

Index Pi անցք Լույսի հեռակառավարիչ

~~~

լավ է. Հետո ես ստեղծեցի նոր թղթապանակ լույսեր անունով, որպեսզի ունենանք ամեն ինչ նեոպիքսելներից միասին: Այստեղ ես ստեղծեցի colour.py հիմնված strandtest.py- ի վրա ՝ ազատությունից:

~~~

neopixel ներմուծումից * # Ներմուծեք որոշ գրադարաններ

ներմուծել համակարգեր

def led (շերտ, գույն, սկիզբ, ավարտ). # Ստեղծեք ֆունկցիա `լուսարձակներ կանչելու համար

միջակայքում i- ի համար (սկիզբ, ավարտ).

strip.setPixelColor (i, գույն)

strip.show ()

BRIGHTNESS = int (sys.argv [4]) # Հրամանի տողում չորրորդ պարամետրը կլինի պայծառությունը: (1-255)

COUNT = 50 # leds PIN = 12 # RPi- ում օգտագործվող քորոց

FREQ_HZ = 800000 # LED ազդանշանի հաճախականությունը հերցում (սովորաբար 800khz)

DMA = 5 # DMA ալիք `ազդանշան ստեղծելու համար օգտագործելու համար (փորձեք 5)

INVERT = Կեղծ # Trueիշտ է ազդանշանը շրջելու համար (NPN տրանզիստորի մակարդակ օգտագործելիս

շերտ = Adafruit_NeoPixel (COUNT, PIN, FREQ_HZ, DMA, INVERT, BRIGHTNESS)

strip.begin ()

R = int (sys.argv [1]) # Կարմիրի քանակը առաջին պարամետրն է

G = int (sys.argv [2]) # Կանաչի քանակը երկրորդ պարամետրն է

B = int (sys.argv [3]) # Կապույտի քանակը երրորդ պարամետրն է

փորձել:

leds (շերտ, Գույն (R, G, B), 0, 49) #Թողարկումները կսկսեն ընտրված գույնով և պայծառությամբ:

բացառությամբ Ստեղնաշարի

գույն (շերտ, գույն (0, 0, 0), 0, 49)

~~~

Եթե սա sudo- ով եք աշխատում տերմինալում, լույսերը պետք է վառվեն նշված գույնով: Www-data sudo թույլտվություն տալու համար ես ավելացրել եմ `www-data ALL = (ALL) NOPASSWD: ALL)` sudoers ֆայլին (/etc/sudoers) անմիջապես արմատային օգտագործողի տակ:

Քայլ 7: Միացրեք լույսերը զննարկչի միջոցով

Հետո ես ստեղծեցի մեկ այլ index.php, այս անգամ /լույսերում: ~~~

< ?php $R = 100; $G = 100; $B = 100; $BRIGHTNESS = 100; exec("sudo python colour.py $R $G $B $BRIGHTNESS"); ?>

~~~

Երբ ես այժմ այցելեմ raspberrypi.local/lights/index.php led- երը սպիտակ կդառնան: Չնայած սա լավ սկիզբ է, ես սիրում եմ հեռակառավարման վրա ունենալ գոնե մի քանի կոճակ:

Քայլ 8: Կառավարեք լույսերը զննարկիչից

Ես ստեղծեցի միջերես բութենսների հետ ՝ օգտագործելով html ձև: Ես չեմ սիրում անել այն, ինչն անհրաժեշտ չէ, այնպես որ ես ստեղծեցի մի թղթապանակ, որը կոչվում է կաղապարներ ՝ իմ վերնագրով, ստորոտով և հիմնական php կոդով: Իմ (առայժմ) վերջնական /lights/index.php- ն այս տեսքն ունի.

~~~

~~~

Կոճակները աշխատեցնելու համար ես պատրաստեցի BasicControl.php ձևանմուշ: Սրանում ես նշեցի այն կոդը, որը պետք է կատարվի կոճակը սեղմելիս: Քանի որ ինձ դուր եկան ամենաթանկարժեք անիմացիաները, ես ներառեցի նաև այդ մեկը: Ամենաթեժ փորձը կշարունակվի անվերջ երկար, այնպես որ ես պատրաստեցի մեկ այլ կոճակ ՝ գործընթացը երբևէ ցանկանամ դադարեցնելու համար:

~~~ <? php

$ I = 100;

$ R = 0;

$ G = 0;

$ B = 0;

if (isset ($ _ POST ['strandtest_start']))) {exec ("sudo python strandtest.py"); }

else if (isset ($ _ POST ['strandtest_stop']))) {exec ("sudo pkill -9 -f strandtest.py"); }

այլապես եթե (isset ($ _ POST ['կարմիր']))) {$ R = 255; $ G = 0; $ B = 0; exec ("sudo python colour.py $ R $ G $ B $ I"); }

այլապես եթե (isset ($ _ POST ['կանաչ']))) {$ R = 0; $ G = 255; $ B = 0; exec ("sudo python colour.py $ R $ G $ B $ I"); }

այլապես եթե (isset ($ _ POST ['կապույտ']))) {$ R = 0; $ G = 0; $ B = 255; exec ("sudo python colour.py $ R $ G $ B $ I"); }

այլապես եթե (isset ($ _ POST ['սպիտակ']))) {$ R = 255; $ G = 255; $ B = 255; exec ("sudo python colour.py $ R $ G $ B $ I"); }

այլապես if (isset ($ _ POST ['off']))) {shell_exec ('sudo python off.py'); }

այլապես if (isset ($ _ POST ['reboot']))) {shell_exec ('sudo reboot now'); }?>>

~~~

Քայլ 9: Ստեղծեք ձևանմուշ վերնագրի և ստորագրի համար

Այժմ ամեն ինչ աշխատում է, բայց նայելը այնքան էլ հաճելի չէ: Վերնագիրը և տողատակը ներմուծելուց հետո կայքի բոլոր տարրերը հասանելի են, պարզապես ոճավորված չեն:

Header.php:

~~~

Լույսեր

Լամպջես

Հիմնական վերահսկողություն

Ընդլայնված վերահսկում

~~~

Եվ ստորագիր. Php:

~~~

~~~

Քայլ 10. Որոշ CSS ՝ ամեն ինչ մի փոքր ավելի լավը դարձնելու համար

Ինչպես երևի նկատեցիք, ես օգտագործում եմ css ֆայլ ՝ դասավորությունը վերահսկելու համար: Որպեսզի համոզվեմ, որ իմ հեռակառավարվող սարքը օգտագործելի է նաև փոքր էկրանների վրա, ես օգտագործեցի որոշ css flexboxes ՝ autowrap- ով:

~~~

/ * Լույսի կառավարման ինտերֆեյսի ոճերի թերթիկ *

* Կիրառվում է յուրաքանչյուր էջում */

մարմին {ֆոն-գույն: f9fcfa; font-family: Arial; լուսանցք `0; }

h1 {գույնը ՝ սպիտակ; text-align: կենտրոն; }

p {font-family: verdana; տառատեսակի չափը `20px; }

ժ 2 {}

/ * Վերնագիրը */

.header {բարձրությունը `10%; ցուցադրում `ճկուն; հիմնավորել-բովանդակություն. flex-start; հավասարեցնել տարրերը `կենտրոն; լուսանցք ՝ 0 px; լիցք-ձախ `5%; ֆոն ՝#3F51B5; հավասարեցնել տարրերը `կենտրոն; }

. HeaderLinks {գույնը ՝ սպիտակ; }

.navbar {ցուցադրում: flex; ճկուն `30%; justify-content: space-around; ֆոնի գույնը ՝ #3F51B5; գույնը `սպիտակ; }

/ * Ստորոգյալը */

. ոտք {ֆոն-գույն: #3F51B5; բարձրություն `10%; text-align: կենտրոն; }

/ * Index.php */

.kuttons {display: flex; flex-direction: տող; flex-wrap: փաթաթել; justify-content: space-between; բարձրություն `80%; հավասարեցնել տարրերը ՝ flex-start; }

.buttons_index {լիցքավորում `0%; եզրագծի լայնությունը `բարակ; եզրային ոճ ՝ ամուր; եզրագիծը `սև; ֆոնի գույնը ՝ #3949ab; գույնը `սպիտակ; font-family: sans-serif; լայնությունը `24%; բարձրություն `20%; }

.buttons_index: hover {padding: 0%; եզրագծի լայնությունը `բարակ; եզրային ոճ ՝ ամուր; եզրագիծը `սև; ֆոնի գույնը ՝ #536DFE; գույնը `սպիտակ; font-family: sans-serif; լայնությունը `24%; բարձրություն `20%; }

~~~

Քայլ 11: Շնորհակալություն

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

Հուսով եմ, որ ձեզ դուր եկավ ամեն ինչ կարդալը: Եթե ունեք կարծիք, ես կցանկանայի լսել այն: