కోరిందకాయ పై ఉపయోగించి అయోట్ ఆధారిత వెబ్ నియంత్రిత ఇంటి ఆటోమేషన్

హాయ్ అబ్బాయిలు, నేటి ట్యుటోరియల్‌కు స్వాగతం, రాస్‌ప్బెర్రీ పై గురించి మంచి విషయాలలో ఒకటి గొప్ప సామర్థ్యం మరియు సౌలభ్యం, దీనితో పరికరాలను ఇంటర్నెట్‌కు ముఖ్యంగా హోమ్ ఆటోమేషన్ సంబంధిత ప్రాజెక్టుల కోసం కనెక్ట్ చేసే అవకాశం ఇస్తుంది. ఈ రోజు మనం ఇంటర్నెట్ ఉపయోగించి వెబ్‌పేజీలోని బటన్ల క్లిక్‌తో ఎసి ఉపకరణాలను నియంత్రించే అవకాశాన్ని అన్వేషించబోతున్నాం. ఈ IoT ఆధారిత గృహ ఆటోమేషన్ వ్యవస్థను ఉపయోగించి, మీరు మీ ఇంటి పరికరాలను ప్రపంచంలో ఎక్కడి నుండైనా నియంత్రించవచ్చు. స్మార్ట్ ఫోన్, టాబ్లెట్, కంప్యూటర్ మొదలైన HTML అనువర్తనాలను అమలు చేయగల ఏ పరికరం నుండి అయినా ఈ వెబ్ సర్వర్‌ను అమలు చేయవచ్చు.

అవసరమైన భాగాలు:

ఈ ప్రాజెక్ట్ కోసం, అవసరాలు హార్డ్‌వేర్ మరియు సాఫ్ట్‌వేర్ అనే రెండు వర్గాల పరిధిలోకి వస్తాయి:

I. హార్డ్వేర్ అవసరాలు:

1. రాస్ప్బెర్రీ పై 3 (మరేదైనా వెర్షన్ బాగుంటుంది)
2. మెమరీ కార్డ్ 8 లేదా 16 జిబి రస్పియన్ జెస్సీ నడుస్తోంది
3. 5 వి రిలేస్
4. 2n222 ట్రాన్సిస్టర్లు
5. డయోడ్లు
6. జంపర్ వైర్లు
7. కనెక్షన్ బ్లాక్స్
8. పరీక్షించడానికి LED లు.
9. పరీక్షించడానికి AC దీపం
10. బ్రెడ్‌బోర్డ్ మరియు జంపర్ కేబుల్స్
11. 220 లేదా 100 ఓంల రెసిస్టర్

II. సాఫ్ట్‌వేర్ అవసరాలు:

కోరిందకాయ పైలో నడుస్తున్న రాస్పియన్ జెస్సీ ఆపరేటింగ్ సిస్టమ్‌ను పక్కన పెడితే, మేము మీ PC లో నడుస్తున్న WebIOPi ఫ్రేమ్ వర్క్, నోట్‌ప్యాడ్ ++ మరియు ఫైల్‌జిలాను PC నుండి కోరిందకాయ పైకి, ముఖ్యంగా వెబ్ అనువర్తన ఫైల్‌లకు కాపీ చేయడానికి ఉపయోగిస్తాము.

ఈ హోమ్ ఆటోమేషన్ ప్రాజెక్ట్ కోసం మీరు పైథాన్‌లో కోడ్ చేయనవసరం లేదు, WebIOPi అన్ని పనులను చేస్తుంది.

రాస్ప్బెర్రీ పైని సిద్ధం చేస్తోంది:

ఇది నాకు ఒక విధమైన అలవాటు మరియు ఇది మంచిదని నేను భావిస్తున్నాను, నేను రాస్ప్బెర్రీ పైని ఉపయోగించాలనుకునే ప్రతిసారీ నేను చేసే మొదటి పని PI ని నవీకరించడం. ఈ ప్రాజెక్ట్ కోసం, ఈ విభాగం పై అప్‌డేటింగ్ విధానాలను కలిగి ఉంటుంది మరియు వెబ్‌ఐఓపి ఫ్రేమ్‌వర్క్‌ను ఇన్‌స్టాల్ చేస్తుంది, ఇది వెబ్‌పేజీ నుండి కోరిందకాయ పై వరకు కమ్యూనికేషన్‌ను నిర్వహించడానికి మాకు సహాయపడుతుంది. పైథాన్ ఫ్లాస్క్ ఫ్రేమ్ పనిని ఉపయోగించి ఇది నిస్సందేహంగా కూడా చేయవచ్చని నేను బహుశా చెప్పాలి, కాని DIY గురించి ఆసక్తికరమైన విషయం ఏమిటంటే, మీరు హుడ్ కింద పరిశీలించి కష్టమైన పనిని చేసినప్పుడు. DIY యొక్క అన్ని ఆనందం వస్తుంది.

కు రాస్ప్బెర్రీ పై అప్డేట్ ఆదేశాలను క్రింద ఆపై ఆర్పిఐ రీబూట్;

sudo apt-get update sudo apt-get update sudo reboot

ఇది పూర్తయిన తర్వాత , వెబ్‌ఐఓపి ఫ్రేమ్‌వర్క్‌ను ఇన్‌స్టాల్ చేయడం తదుపరి విషయం.

మీరు ఉపయోగించి హోమ్ డైరెక్టరీలో ఉన్నారని నిర్ధారించుకోండి;

cd ~

వారి సోర్స్‌ఫోర్జ్ పేజీ నుండి ఫైల్‌ను పొందడానికి wget ని ఉపయోగించండి;

wget

డౌన్‌లోడ్ పూర్తయినప్పుడు, ఫైల్‌ను సంగ్రహించి డైరెక్టరీలోకి వెళ్ళండి;

tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /

సెటప్‌ను అమలు చేయడానికి ముందు ఈ సమయంలో , వెబ్‌ఐఓపి యొక్క ఈ వెర్షన్ నేను ఉపయోగిస్తున్న కోరిందకాయ పై 3 తో ​​పనిచేయదు మరియు పై 3 తో ​​స్పష్టంగా పనిచేసే వెబ్‌ఐఓపి యొక్క సంస్కరణను నేను కనుగొనలేకపోయాను..

వెబ్‌ఐఓపి డైరెక్టరీలో ఉన్నప్పుడు ప్యాచ్‌ను ఇన్‌స్టాల్ చేయడానికి క్రింద ఆదేశాలు ఉపయోగించబడతాయి, రన్;

wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch

అప్పుడు మేము ఉపయోగించి వెబ్‌ఐఓపి కోసం సెటప్ ఇన్‌స్టాలేషన్‌ను అమలు చేయవచ్చు;

sudo./setup.sh

సెటప్ ఇన్‌స్టాలేషన్ సమయంలో ఏదైనా డిపెండెన్సీలను ఇన్‌స్టాల్ చేయమని అడిగితే అవును అని చెప్పండి. పూర్తయినప్పుడు, మీ పైని రీబూట్ చేయండి;

sudo రీబూట్

WebIOPi ఇన్‌స్టాలేషన్‌ను పరీక్షించండి:

స్కీమాటిక్స్ మరియు కోడ్‌లకు దూకడానికి ముందు, రాస్‌ప్బెర్రీ పై తిరిగి ప్రారంభించడంతో, ప్రతిదీ కోరుకున్నట్లుగా బాగా పనిచేస్తుందని నిర్ధారించుకోవడానికి మేము మా వెబ్‌ఐఓపి ఇన్‌స్టాలేషన్‌ను పరీక్షించాలి.

ఆదేశాన్ని అమలు చేయండి;

sudo webiopi -d -c / etc / webiopi / config

పై పై ఆదేశాన్ని జారీ చేసిన తరువాత, కోరిందకాయ పైకి కనెక్ట్ చేయబడిన మీ కంప్యూటర్ యొక్క వెబ్ బ్రౌజర్‌ను http: // raspberrypi కి సూచించండి . mshome.net:8000 లేదా http; // thepi'sIPaddress: 8000. సిస్టమ్ వినియోగదారు పేరు మరియు పాస్‌వర్డ్ కోసం మిమ్మల్ని అడుగుతుంది.

వినియోగదారు పేరు వెబ్‌యోపి పాస్‌వర్డ్ కోరిందకాయ

కావాలనుకుంటే ఈ లాగిన్ తరువాత తీసివేయబడుతుంది, అయితే మీ ఇంటి ఆటోమేషన్ సిస్టమ్ కూడా మీ ఇంటిలో IP నియంత్రించే ఉపకరణాలు మరియు IOT పరికరాలను కలిగి ఉన్నవారిని నిరోధించడానికి కొంత అదనపు స్థాయి భద్రతకు అర్హమైనది.

లాగిన్ అయిన తరువాత, చుట్టూ చూడండి, ఆపై GPIO హెడర్ లింక్‌పై క్లిక్ చేయండి.

ఈ పరీక్ష కోసం, మేము LED ని GPIO 17 కి కనెక్ట్ చేస్తాము, కాబట్టి వెళ్లి GPIO 17 ను అవుట్‌పుట్‌గా సెట్ చేయండి.

ఇది పూర్తయిన తర్వాత, దిగువ స్కీమాటిక్స్లో చూపిన విధంగా మీ కోరిందకాయ పైకి దారి తీయండి.

కనెక్షన్ తరువాత, వెబ్‌పేజీకి తిరిగి వెళ్లి , పిన్ 11 బటన్‌ను క్లిక్ చేసి LED ని ఆన్ లేదా ఆఫ్ చేయండి. ఈ విధంగా మేము WebIOPi ని ఉపయోగించి రాస్ప్బెర్రీ పై GPIO ని నియంత్రించవచ్చు.

పరీక్ష తరువాత, ప్రతిదీ వివరించిన విధంగా పనిచేస్తే, మేము తిరిగి టెర్మినల్‌కు వెళ్లి CTRL + C తో ప్రోగ్రామ్‌ను ఆపివేయవచ్చు. మీకు ఈ సెటప్‌లో ఏదైనా సమస్య ఉంటే, వ్యాఖ్య విభాగం ద్వారా నన్ను కొట్టండి.

వెబ్యోపి గురించి మరింత సమాచారం దాని వికీ పేజీలో చూడవచ్చు (http://webiopi.trouch.com/INSTALL.html)

పరీక్ష పూర్తయిన తరువాత, మేము ప్రధాన ప్రాజెక్ట్ను ప్రారంభించడానికి సిద్ధంగా ఉన్నాము.

రాస్ప్బెర్రీ పై హోమ్ ఆటోమేషన్ కోసం వెబ్ అప్లికేషన్ను నిర్మించడం:

ఇక్కడ మేము WebIOPi సేవ యొక్క డిఫాల్ట్ కాన్ఫిగరేషన్‌ను సవరించాము మరియు పిలిచినప్పుడు అమలు చేయడానికి మా స్వంత కోడ్‌ను జోడిస్తాము. మన పిసిలో ఫైల్‌జిల్లా లేదా ఇంకొకటి ఎఫ్‌టిపి / ఎస్సిపి కాపీ సాఫ్ట్‌వేర్ ఇన్‌స్టాల్ చేయడమే మనం చేసే మొదటి పని. టెర్మినల్ ద్వారా పైపై కోడింగ్ చేయడం చాలా ఒత్తిడితో కూడుకున్నదని మీరు నాతో అంగీకరిస్తారు, కాబట్టి ఫైల్‌జిల్లా లేదా మరే ఇతర SCP సాఫ్ట్‌వేర్ ఈ దశలో ఉపయోగపడుతుంది. మేము ఈ IoT హోమ్ ఆటోమేషన్ వెబ్ అప్లికేషన్ కోసం html, css మరియు జావా స్క్రిప్ట్ కోడ్‌లను వ్రాయడం ప్రారంభించి, వాటిని రాస్‌ప్బెర్రీ పైకి తరలించడానికి ముందు, మా వెబ్ ఫైళ్లన్నీ ఉండే ప్రాజెక్ట్ ఫోల్డర్‌ను సృష్టించండి.

మీరు హోమ్ డైరెక్టరీలో ఉన్నారని నిర్ధారించుకోండి, ఆపై ఫోల్డర్‌ను సృష్టించండి, సృష్టించిన ఫోల్డర్‌లోకి వెళ్లి డైరెక్టరీలో html ఫోల్డర్‌ను సృష్టించండి:

cd ~ mkdir webapp cd webapp mkdir html

HTML ఫోల్డర్ లోపల స్క్రిప్ట్స్, CSS మరియు చిత్రాల కోసం ఫోల్డర్‌ను సృష్టించండి

mkdir html / css mkdir html / img mkdir html / scripts

సృష్టించిన మా ఫైళ్ళతో మా PC లో సంకేతాలను వ్రాయడానికి మరియు తరువాత ఫైల్జిల్లా ద్వారా పైకి వెళ్ళటానికి అనుమతిస్తుంది.

జావాస్క్రిప్ట్ కోడ్:

మేము వ్రాసే మొదటి కోడ్ జావాస్క్రిప్ట్. WebIOPi సేవతో కమ్యూనికేట్ చేయడానికి ఇది ఒక సాధారణ స్క్రిప్ట్.

ఈ ప్రాజెక్ట్ కోసం, మా వెబ్ అనువర్తనం నాలుగు బటన్లను కలిగి ఉంటుంది, అంటే కేవలం నాలుగు GPIO పిన్‌లను నియంత్రించాలని మేము ప్లాన్ చేస్తున్నాము, అయినప్పటికీ మేము మా ప్రదర్శనలో కేవలం రెండు రిలేలను నియంత్రిస్తాము. చివరిలో పూర్తి వీడియోను తనిఖీ చేయండి.

webiopi (). సిద్ధంగా (ఫంక్షన్ () {webiopi (). సెట్‌ఫంక్షన్ (17, "అవుట్"); వెబ్యోపి (). ().సెట్‌ఫంక్షన్ (23, "అవుట్"); var కంటెంట్, బటన్; కంటెంట్ = $ ("# కంటెంట్"); బటన్ = వెబ్పి (). button = webiopi (). createGPIOButton (18, "రిలే 2"); content.append (button); button = webiopi (). createGPIOButton (22, "Relay 3"); content.append (button); button = webiopi ().createGPIOButton (23, "రిలే 4"); content.append (బటన్);});

WebIOPi సిద్ధంగా ఉన్నప్పుడు పై కోడ్ నడుస్తుంది.

క్రింద మేము జావాస్క్రిప్ట్ కోడ్‌ను వివరించాము:

webiopi (). సిద్ధంగా (ఫంక్షన్ (): ఈ ఫంక్షన్‌ను సృష్టించడానికి మరియు వెబ్‌యోపి సిద్ధంగా ఉన్నప్పుడు దీన్ని అమలు చేయమని ఇది మా సిస్టమ్‌ను నిర్దేశిస్తుంది.

webiopi (). సెట్‌ఫంక్షన్ (23, "అవుట్"); GPIO23 ను అవుట్‌పుట్‌గా సెట్ చేయమని WebIOPi సేవకు చెప్పడానికి ఇది మాకు సహాయపడుతుంది. మాకు ఇక్కడ నాలుగు బటన్లు ఉన్నాయి, మీరు ఎక్కువ బటన్లను అమలు చేస్తుంటే మీకు ఎక్కువ ఉండవచ్చు.

var కంటెంట్, బటన్; ఈ పంక్తి మన సిస్టమ్‌కు వేరియబుల్ అనే కంటెంట్‌ను సృష్టించమని మరియు వేరియబుల్‌ను బటన్‌గా చేయమని చెబుతుంది.

కంటెంట్ = $ ("# కంటెంట్"); కంటెంట్ వేరియబుల్ ఇప్పటికీ మా html మరియు css లలో ఉపయోగించబడుతుంది. కాబట్టి మేము # కంటెంట్‌ను సూచించినప్పుడు, WebIOPi ఫ్రేమ్‌వర్క్ దానితో అనుబంధించబడిన ప్రతిదాన్ని సృష్టిస్తుంది.

button = webiopi (). createGPIOButton (17, "రిలే 1"); WebIOPi వివిధ రకాల బటన్లను సృష్టించగలదు. “రిలే 1” అని లేబుల్ చేయబడిన ఈ సందర్భంలో GPIO పిన్‌ను నియంత్రించే GPIO బటన్‌ను సృష్టించమని వెబ్‌ఐఓపి సేవకు చెప్పడానికి పై కోడ్ భాగం మాకు సహాయపడుతుంది. మిగతా వాటికి కూడా అదే జరుగుతుంది.

content.append (బటన్); ఈ కోడ్‌ను html ఫైల్‌లో లేదా మరెక్కడైనా సృష్టించిన బటన్ కోసం ఏదైనా ఇతర కోడ్‌కు జోడించండి. మరిన్ని బటన్లను సృష్టించవచ్చు మరియు ఈ బటన్ యొక్క ఒకే లక్షణాలను కలిగి ఉంటుంది. CSS లేదా స్క్రిప్ట్ రాసేటప్పుడు ఇది చాలా ఉపయోగకరంగా ఉంటుంది.

JS ఫైల్‌లను సృష్టించిన తరువాత, మేము దానిని సేవ్ చేసి, ఫైల్‌జిల్లా ఉపయోగించి వెబ్‌అప్ / html / స్క్రిప్ట్‌లకు కాపీ చేస్తాము.

ఇది పూర్తయిన తరువాత, మేము CSS ను సృష్టించడానికి వెళ్తాము. చివరికి కోడ్ విభాగంలో ఇచ్చిన లింక్ నుండి మీరు కోడ్‌ను పూర్తిగా డౌన్‌లోడ్ చేసుకోవచ్చు.

CSS కోడ్:

మా IoT రాస్ప్బెర్రీ పై హోమ్ ఆటోమేషన్ వెబ్‌పేజీ అందంగా కనిపించేలా చేయడానికి CSS మాకు సహాయపడుతుంది.

వెబ్‌పేజీ క్రింద ఉన్న చిత్రం లాగా ఉండాలని నేను కోరుకున్నాను, అందువల్ల దాన్ని సాధించడానికి smarthome.css స్టైల్ షీట్ రాయాలి .

క్రింద మేము CSS కోడ్‌ను వివరించాము:

CSS స్క్రిప్ట్ ఇక్కడ చేర్చడానికి చాలా పెద్దదిగా అనిపిస్తుంది, అందువల్ల నేను దానిలో కొంత భాగాన్ని ఎంచుకొని వాటిని విచ్ఛిన్నం కోసం ఉపయోగిస్తాను. మీరు పూర్తి CSS ఫైల్‌ను ఇక్కడ నుండి డౌన్‌లోడ్ చేసుకోవచ్చు. CSS సులభం మరియు మీరు CSS కోడ్ ద్వారా వెళ్ళడం ద్వారా దాన్ని అర్థం చేసుకోవచ్చు. మీరు ఈ భాగాన్ని సులభంగా దాటవేయవచ్చు మరియు మా CSS కోడ్‌ను వెంటనే ఉపయోగించవచ్చు.

స్క్రిప్ట్ యొక్క మొదటి భాగం వెబ్ అనువర్తనం యొక్క బాడీ కోసం స్టైల్షీట్ను సూచిస్తుంది మరియు దాని క్రింద చూపబడింది;

శరీరం {నేపథ్య-రంగు: #ffffff; background-image: url ('/ img / smart.png'); నేపథ్య-పునరావృతం: నో-రిపీట్; నేపథ్య స్థానం: కేంద్రం; నేపథ్య పరిమాణం: కవర్; font: bold 18px / 25px ఏరియల్, సాన్స్-సెరిఫ్; రంగు: లైట్‌గ్రే; }

పై కోడ్ స్వీయ వివరణాత్మకమైనదని నేను నమ్మాలనుకుంటున్నాను, మేము నేపథ్య రంగును #ffffff గా తెల్లగా సెట్ చేసాము, ఆ ఫోల్డర్ ప్రదేశంలో ఉన్న నేపథ్య చిత్రాన్ని మేము జోడిస్తాము (మా మునుపటి ఫోల్డర్ సెటప్ గుర్తుందా?), మేము చిత్రం చేయలేదని నిర్ధారిస్తాము. బ్యాక్ గ్రౌండ్-రిపీట్ ప్రాపర్టీని నో రిపీట్ గా సెట్ చేయడం ద్వారా రిపీట్ చేయండి, ఆపై నేపథ్యాన్ని కేంద్రీకరించడానికి CSS కు సూచించండి. మేము నేపథ్య పరిమాణం, ఫాంట్ మరియు రంగును సెట్ చేయడానికి వెళ్తాము.

శరీరం పూర్తయిన తరువాత, బటన్లు అందంగా కనిపించడానికి మేము css వ్రాసాము.

బటన్ {ప్రదర్శన: బ్లాక్; స్థానం: సాపేక్ష; మార్జిన్: 10 పిక్స్‌; పాడింగ్: 0 10 పిక్స్‌; టెక్స్ట్-అలైన్: సెంటర్; టెక్స్ట్-డెకరేషన్: ఏదీ లేదు; వెడల్పు: 130 పిక్స్‌; ఎత్తు: 40 పిక్స్‌; font: bold 18px / 25px ఏరియల్, సాన్స్-సెరిఫ్; నలుపు రంగు; text-shadow: 1px 1px 1px rgba (255,255,255,.22); -వెబ్కిట్-బోర్డర్-వ్యాసార్థం: 30 పిక్స్‌; -మోజ్-బోర్డర్-వ్యాసార్థం: 30 పిక్స్‌; సరిహద్దు-వ్యాసార్థం: 30 పిక్స్‌;

ఈ క్లుప్తంగా ఉంచడానికి, కోడ్‌లోని ప్రతి ఇతర విషయం కూడా అందంగా కనిపించేలా చేశారు. ఏమి జరుగుతుందో చూడటానికి మీరు వాటిని మార్చవచ్చు, దీనిని ట్రయల్ మరియు ఎర్రర్ ద్వారా నేర్చుకోవడం అని నేను అనుకుంటున్నాను, కాని CSS గురించి ఒక మంచి విషయం సాదా ఆంగ్లంలో వ్యక్తీకరించబడిన విషయాలు అంటే అవి అర్థం చేసుకోవడం చాలా సులభం. బటన్ బ్లాక్ యొక్క ఇతర భాగంలో బటన్ మరియు బటన్ నీడపై వచన నీడ కోసం కొన్ని అదనపు ఉన్నాయి. ఇది కొంచెం పరివర్తన ప్రభావాన్ని కలిగి ఉంటుంది, ఇది బటన్ నొక్కినప్పుడు చక్కగా మరియు వాస్తవికంగా కనిపించడానికి సహాయపడుతుంది. వెబ్‌కిట్, ఫైర్‌ఫాక్స్, ఒపెరా మొదలైన వాటి కోసం విడిగా నిర్వచించబడతాయి, వెబ్ పేజీ అన్ని ప్లాట్‌ఫామ్‌లలో ఉత్తమంగా పనిచేస్తుందని నిర్ధారించడానికి.

వెబ్‌ఐఓపి సేవకు ఇది వెబ్‌ఇఒపి సేవకు ఇన్‌పుట్ అని చెప్పడం కోసం కోడ్ యొక్క తదుపరి బ్లాక్.

i nput {display: block; వెడల్పు: 160 పిక్స్‌; ఎత్తు: 45 పిక్స్‌; }

బటన్ నొక్కినప్పుడు మనం చేయదలిచిన చివరి విషయం ఏమిటంటే ఒక విధమైన సూచన ఇవ్వడం. కాబట్టి మీరు స్క్రీన్‌ను చూడవచ్చు మరియు బటన్ల రంగు ప్రస్తుత స్థితిని మీకు తెలియజేస్తుంది. ఇది చేయుటకు, ప్రతి బటన్ కొరకు దిగువ కోడ్ యొక్క పంక్తి అమలు చేయబడింది.

# gpio17.LOW {background-color: గ్రే; నలుపు రంగు; } # gpio17.HIGH {నేపథ్య-రంగు: ఎరుపు; రంగు: లైట్‌గ్రే; }

పై సంకేతాల పంక్తులు దాని ప్రస్తుత స్థితి ఆధారంగా బటన్ యొక్క రంగును మారుస్తాయి. బటన్ ఆఫ్‌లో ఉన్నప్పుడు (తక్కువ) బటన్ల నేపథ్య రంగు దాని నిష్క్రియాత్మకంగా చూపించడానికి బూడిద రంగులోకి మారుతుంది మరియు దాని ఆన్ (హై) ఉన్నప్పుడు బటన్ యొక్క నేపథ్య రంగు RED అవుతుంది.

బ్యాగ్‌లోని CSS, smarthome.css గా సేవ్ చేద్దాం, ఆపై దాన్ని ఫైల్‌జిల్లా (లేదా మీరు ఉపయోగించాలనుకునే ఏదైనా SCP సాఫ్ట్‌వేర్) ద్వారా మా కోరిందకాయ పైలోని స్టైల్స్ ఫోల్డర్‌కు తరలించి, తుది భాగాన్ని, html కోడ్‌ను పరిష్కరించండి. పూర్తి CSS ను ఇక్కడ నుండి డౌన్‌లోడ్ చేసుకోవడం గుర్తుంచుకోండి.

HTML కోడ్:

HTML కోడ్ జావాస్క్రిప్ట్ మరియు స్టైల్ షీట్ అన్నింటినీ కలిసి లాగుతుంది.

నొక్కుడు మీట; బేకన్ స్వీకరించండి

హెడ్ ​​ట్యాగ్ లోపల కొన్ని చాలా ముఖ్యమైన లక్షణాలు ఉన్నాయి.

క్రోమ్ లేదా మొబైల్ సఫారిని ఉపయోగిస్తున్న వెబ్ అనువర్తనాన్ని మొబైల్ డెస్క్‌టాప్‌లో సేవ్ చేయడానికి పై కోడ్ యొక్క పంక్తి అనుమతిస్తుంది. ఇది క్రోమ్ మెను ద్వారా చేయవచ్చు. ఇది మొబైల్ డెస్క్‌టాప్ లేదా ఇంటి నుండి అనువర్తనానికి సులభమైన ప్రయోగ అనుభూతిని ఇస్తుంది.

దిగువ కోడ్ యొక్క తదుపరి పంక్తి వెబ్ అనువర్తనానికి ఒక విధమైన ప్రతిస్పందనను ఇస్తుంది. ఇది ప్రారంభించిన ఏ పరికరం యొక్క స్క్రీన్‌ను ఆక్రమించటానికి ఇది అనుమతిస్తుంది.

కోడ్ యొక్క తదుపరి పంక్తి వెబ్ పేజీ యొక్క శీర్షిక పట్టీలో చూపిన శీర్షికను ప్రకటిస్తుంది.

తరువాతి నాలుగు పంక్తి సంకేతాలు ప్రతి ఒక్కటి HTML కోడ్‌ను అనేక వనరులతో అనుసంధానించే పనిని చేస్తాయి.

మొదటి లైన్ కాల్స్ పై ప్రధాన WebIOPi ఫ్రేమ్ జావాస్క్రిప్ట్ హార్డ్ కోడెడ్ సర్వర్ రూట్ లో ఇది. WebIOPi ఉపయోగించాల్సిన ప్రతిసారీ దీనిని పిలవాలి.

రెండవ పంక్తి మా j క్వెరీ స్క్రిప్ట్ html పేజీ చూపాడు మూడో మా శైలి షీట్ దిశలో అది పాయింట్లు. చివరగా చివరి పంక్తి మొబైల్ డెస్క్‌టాప్‌లో ఉపయోగించడానికి ఒక చిహ్నాన్ని సెటప్ చేయడానికి సహాయపడుతుంది, మేము దానిని వెబ్ అనువర్తనంగా లేదా వెబ్‌పేజీకి ఫేవికాన్‌గా ఉపయోగించాలని నిర్ణయించుకున్నాము.

HTML కోడ్ యొక్క బాడీ విభాగం జావాస్క్రిప్ట్ ఫైల్‌లో వ్రాయబడిన వాటిని ప్రదర్శించమని మా HTML కోడ్‌కు చెప్పే దిగువ పంక్తితో బటన్లు సరిగ్గా సమలేఖనం అయ్యేలా చూడటానికి బ్రేక్ ట్యాగ్‌లను కలిగి ఉంది. Id = "కంటెంట్" జావాస్క్రిప్ట్ కోడ్ కింద ముందు మా బటన్ కోసం కంటెంట్ ప్రకటన యొక్క మీరు గుర్తు ఉండాలి.

మీకు డ్రిల్, html కోడ్ index.html అని తెలుసు మరియు ఫైల్జిల్లా ద్వారా పైలోని html ఫోల్డర్‌కు వెళ్లండి. మీరు అన్ని CSS, JS మరియు HTML ఫైల్‌లను ఇక్కడ నుండి డౌన్‌లోడ్ చేసుకోవచ్చు.

హోమ్ ఆటోమేషన్ కోసం WebIOPi సర్వర్ సవరణలు:

ఈ దశలో, మేము మా స్కీమాటిక్‌లను సృష్టించడం ప్రారంభించడానికి మరియు మా వెబ్ అనువర్తనాన్ని పరీక్షించడానికి సిద్ధంగా ఉన్నాము, కానీ దీనికి ముందు మేము వెబ్‌యోపి సేవ యొక్క కాన్ఫిగర్ ఫైల్‌ను సవరించాల్సిన అవసరం ఉంది, అందువల్ల దానితో వచ్చిన కాన్ఫిగర్ ఫైళ్ళకు బదులుగా మా HTML ఫోల్డర్ నుండి డేటాను ఉపయోగించాలని సూచించింది..

ఆకృతీకరణను సవరించడానికి కింది వాటిని రూట్ అనుమతితో అమలు చేయండి;

sudo nano / etc / webiopi / config

కాన్ఫిగర్ ఫైల్ యొక్క http విభాగం కోసం చూడండి, మీకు ఏమైనా ఉన్న విభాగం కింద తనిఖీ చేయండి, డిఫాల్ట్ HTML మరియు రిసోర్స్ ఫైల్స్ స్థానాన్ని మార్చడానికి # డాక్-రూట్ ఉపయోగించండి

# ను ఉపయోగించి దాని క్రింద ఏదైనా వ్యాఖ్యానించండి, అప్పుడు మీ ఫోల్డర్ నా లాంటి సెటప్ అయితే, మీ డాక్-రూట్‌ను మీ ప్రాజెక్ట్ ఫైల్ యొక్క మార్గానికి సూచించండి

doc-root = / home / pi / webapp / html

పొందుపరుచు మరియు నిష్క్రమించు. మీరు పోర్టును ఉపయోగించి 8000 నుండి పోర్టును కూడా మార్చవచ్చు. సేవ్ చేయకపోతే మరియు నిష్క్రమించండి, మేము ముందుకు వెళుతున్నప్పుడు.

మీరు ఆదేశాన్ని ఉపయోగించి WebIOPi సేవ యొక్క పాస్వర్డ్ను మార్చవచ్చని గమనించడం ముఖ్యం;

sudo webiopi-passwd

ఇది క్రొత్త వినియోగదారు పేరు మరియు పాస్‌వర్డ్ కోసం మిమ్మల్ని అడుగుతుంది. ఇది కూడా పూర్తిగా తొలగించబడుతుంది కాని భద్రత ముఖ్యం కాదా?

చివరగా క్రింద ఆదేశాన్ని ఇవ్వడం ద్వారా WebIOPi సేవను అమలు చేయండి:

sudo /etc/init.d/webiopi ప్రారంభం

ఉపయోగించి సర్వర్ స్థితిని తనిఖీ చేయవచ్చు;

sudo /etc/init.d/webiopi స్థితి

దీన్ని ఉపయోగించకుండా అమలు చేయకుండా ఆపవచ్చు;

sudo /etc/init.d/webiopi స్టాప్

బూట్ వద్ద అమలు చేయడానికి WebIOPi ని సెటప్ చేయడానికి, ఉపయోగించండి;

sudo update-rc.d webiopi డిఫాల్ట్‌లు

మీరు రివర్స్ చేసి, బూట్ వద్ద పనిచేయకుండా ఆపాలనుకుంటే, ఉపయోగించండి;

sudo update-rc.d webiopi remove

సర్క్యూట్ రేఖాచిత్రం మరియు వివరణ:

మా సాఫ్ట్‌వేర్ సెటప్ పూర్తయిన తర్వాత, ఈ వెబ్ నియంత్రిత గృహోపకరణాల ప్రాజెక్ట్ కోసం స్కీమాటిక్స్ సృష్టించడం ప్రారంభించడానికి మేము అందరం సిద్ధంగా ఉన్నాము.

నేను రిలే మాడ్యూళ్ళపై చేయి వేయలేకపోతున్నాను, ఇది అభిరుచి గలవారితో పనిచేయడం సులభం అని నేను భావిస్తున్నాను. నేను సాధారణ స్వతంత్ర సింగిల్ 5 వి రిలేల యొక్క స్కీమాటిక్స్ను ఇక్కడ గీస్తున్నాను.

పై ఫ్రిట్జింగ్ సర్క్యూట్లో చూపిన విధంగా మీ సర్క్యూట్‌ను కనెక్ట్ చేయండి. మీ స్వంత రిలే యొక్క COM, NO (సాధారణంగా తెరిచి ఉంటుంది) మరియు NC (సాధారణంగా మూసివేయి) వేర్వేరు వైపులా / పాయింట్ల వద్ద ఉండవచ్చని మీరు గమనించాలి. దీన్ని పరీక్షించడానికి దయచేసి ఒక మిల్లీమీటర్‌ను ఉపయోగించండి. రిలే గురించి ఇక్కడ మరింత తెలుసుకోండి.

మా భాగాలు కనెక్ట్ చేయబడినప్పుడు, వెబ్‌పేజీ నుండి మీ సర్వర్‌ను కాల్చండి, మీ రాస్‌ప్బెర్రీ పై యొక్క ఐపికి వెళ్లి, ముందుగా వివరించిన విధంగా పోర్ట్‌ను సూచించండి, మీ వినియోగదారు పేరు మరియు పాస్‌వర్డ్‌తో లాగిన్ అవ్వండి మరియు మీరు క్రింద ఉన్న చిత్రం వలె కనిపించే వెబ్‌పేజీని చూడాలి.

ఇప్పుడు మీరు బటన్లపై క్లిక్ చేయడం ద్వారా ఎక్కడైనా వైర్‌లెస్ లేకుండా నాలుగు ఎసి హోమ్ ఉపకరణాలను సులభంగా నియంత్రించవచ్చు. ఇది మొబైల్ ఫోన్, టాబ్లెట్ మొదలైన వాటి నుండి పని చేస్తుంది మరియు మరిన్ని పరికరాలను నియంత్రించడానికి మీరు మరిన్ని బటన్లు మరియు రిలేలను జోడించవచ్చు. క్రింద పూర్తి వీడియోను తనిఖీ చేయండి.

ఇది అబ్బాయిలు, ఈ కోసం ధన్యవాదాలు. మీకు ఏవైనా ప్రశ్నలు ఉంటే, వాటిని వ్యాఖ్య పెట్టెలో వదలండి.