ராஸ்பெர்ரி பை பயன்படுத்தி அயோட் அடிப்படையிலான வலை கட்டுப்பாட்டு வீட்டு ஆட்டோமேஷன்

வணக்கம் தோழர்களே, இன்றைய டுடோரியலுக்கு வருக, ராஸ்பெர்ரி பை பற்றிய நல்ல விஷயங்களில் ஒன்று சிறந்த திறனும் எளிமையும் ஆகும், இது குறிப்பாக வீட்டு ஆட்டோமேஷன் தொடர்பான திட்டங்களுக்கு இணையத்துடன் சாதனங்களை இணைக்க வாய்ப்பளிக்கிறது. இணையத்தைப் பயன்படுத்தி ஒரு வலைப்பக்கத்தில் உள்ள பொத்தான்களைக் கிளிக் செய்வதன் மூலம் ஏசி சாதனங்களைக் கட்டுப்படுத்தும் சாத்தியத்தை இன்று நாம் ஆராயப்போகிறோம். இந்த ஐஓடி அடிப்படையிலான வீட்டு ஆட்டோமேஷன் முறையைப் பயன்படுத்தி, உலகில் எங்கிருந்தும் உங்கள் வீட்டு உபகரணங்களை கட்டுப்படுத்தலாம். ஸ்மார்ட் போன், டேப்லெட், கணினி போன்ற HTML பயன்பாடுகளை இயக்கக்கூடிய எந்த சாதனத்திலிருந்தும் இந்த வலை சேவையகத்தை இயக்க முடியும்.

தேவையான கூறுகள்:

இந்த திட்டத்திற்கு, தேவைகள் வன்பொருள் மற்றும் மென்பொருள் என இரண்டு பிரிவுகளின் கீழ் வரும்:

I. வன்பொருள் தேவைகள்:

1. ராஸ்பெர்ரி பை 3 (வேறு எந்த பதிப்பும் நன்றாக இருக்கும்)
2. மெமரி கார்டு 8 அல்லது 16 ஜிபி இயங்கும் ராஸ்பியன் ஜெஸ்ஸி
3. 5 வி ரிலேக்கள்
4. 2n222 டிரான்சிஸ்டர்கள்
5. டையோட்கள்
6. ஜம்பர் கம்பிகள்
7. இணைப்பு தொகுதிகள்
8. சோதிக்க எல்.ஈ.டி.
9. சோதனைக்கு ஏசி விளக்கு
10. ப்ரெட்போர்டு மற்றும் ஜம்பர் கேபிள்கள்
11. 220 அல்லது 100 ஓம்ஸ் மின்தடை

II. மென்பொருள் தேவைகள்:

ராஸ்பெர்ரி பையில் இயங்கும் ராஸ்பியன் ஜெஸ்ஸி இயக்க முறைமையைத் தவிர, நாங்கள் உங்கள் கணினியில் இயங்கும் WebIOPi பிரேம் வேலை, நோட்பேட் ++ மற்றும் பைசிலா ஆகியவற்றைப் பயன்படுத்துவோம்.

இந்த முகப்பு ஆட்டோமேஷன் திட்டத்திற்காக நீங்கள் பைத்தானில் குறியிட தேவையில்லை, WebIOPi அனைத்து வேலைகளையும் செய்யும்.

ராஸ்பெர்ரி பை தயாரித்தல்:

இது எனக்கு ஒருவிதமான பழக்கம் மற்றும் இது ஒரு நல்ல விஷயம் என்று நான் நினைக்கிறேன், ஒவ்வொரு முறையும் நான் ராஸ்பெர்ரி பை பயன்படுத்த விரும்பும் போது PI ஐப் புதுப்பிப்பதே ஆகும். இந்த திட்டத்திற்காக, இந்த பிரிவில் பை புதுப்பித்தல் நடைமுறைகள் மற்றும் வெப்ஐஓபி கட்டமைப்பை நிறுவுதல் ஆகியவை அடங்கும், இது வலைப்பக்கத்திலிருந்து ராஸ்பெர்ரி பை வரை தகவல்தொடர்புகளை கையாள உதவும். பைத்தான் பிளாஸ்க் பிரேம் வேலையைப் பயன்படுத்தி இது விவாதிக்கக்கூடிய எளிதான வழியிலும் செய்யப்படலாம் என்று நான் சொல்ல வேண்டும், ஆனால் DIY பற்றிய சுவாரஸ்யமான விஷயம் என்னவென்றால், நீங்கள் பேட்டைக்குக் கீழே பார்த்து கடினமான வேலையைச் செய்யும்போது. DIY இன் அனைத்து மகிழ்ச்சியும் வரும் இடம்.

செய்ய ராஸ்பெர்ரி பை புதுப்பிக்க கட்டளைகளை கீழே பின்னர் RPI மறுதொடக்கம்;

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 உடன் வெளிப்படையாக வேலை செய்யும் வெப்ஐஓபியின் பதிப்பை என்னால் கண்டுபிடிக்க முடியவில்லை..

WebIOPi கோப்பகத்தில் இருக்கும்போது பேட்சை நிறுவ கீழே கட்டளைகள் பயன்படுத்தப்படுகின்றன, இயக்கவும்;

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

பின்னர் WebIOPi க்கான அமைவு நிறுவலை இயக்கலாம்;

sudo./setup.sh

அமைவு நிறுவலின் போது ஏதேனும் சார்புகளை நிறுவும்படி கேட்டால் ஆம் என்று சொல்லுங்கள். முடிந்ததும், உங்கள் பைவை மீண்டும் துவக்கவும்;

sudo மறுதொடக்கம்

WebIOPi நிறுவலை சோதிக்கவும்:

திட்டவட்டங்கள் மற்றும் குறியீடுகளுக்குச் செல்வதற்கு முன், ராஸ்பெர்ரி பை மீண்டும் இயங்கும்போது, ​​எல்லாவற்றையும் விரும்பியபடி சிறப்பாக செயல்படுவதை உறுதிசெய்ய எங்கள் WebIOPi நிறுவலை சோதிக்க வேண்டும்.

கட்டளையை இயக்கவும்;

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

மேலே உள்ள கட்டளையை pi இல் வழங்கிய பிறகு, ராஸ்பெர்ரி பை உடன் இணைக்கப்பட்ட உங்கள் கணினியின் வலை உலாவியை http: // raspberrypi க்கு சுட்டிக்காட்டவும். mshome.net:8000 அல்லது http; // thepi'sIPaddress: 8000. கணினி பயனர்பெயர் மற்றும் கடவுச்சொல்லை கேட்கும்.

பயனர்பெயர் வெபியோபி கடவுச்சொல் ராஸ்பெர்ரி

விரும்பினால் இந்த உள்நுழைவை பின்னர் அகற்றலாம், ஆனால் உங்கள் வீட்டில் ஐபி கட்டுப்படுத்தும் உபகரணங்கள் மற்றும் ஐஓடி சாதனங்களைக் கொண்ட எவரையும் தடுக்க உங்கள் வீட்டு ஆட்டோமேஷன் அமைப்பு கூட சில கூடுதல் பாதுகாப்புக்கு தகுதியானது.

உள்நுழைந்த பிறகு, சுற்றிப் பாருங்கள், பின்னர் GPIO தலைப்பு இணைப்பைக் கிளிக் செய்க.

இந்த சோதனைக்கு, நாங்கள் ஒரு எல்.ஈ.டியை GPIO 17 உடன் இணைப்போம், எனவே சென்று GPIO 17 ஐ ஒரு வெளியீடாக அமைக்கவும்.

இது முடிந்தவுடன், கீழே உள்ள திட்டங்களில் காட்டப்பட்டுள்ளபடி உங்கள் ராஸ்பெர்ரி பைக்கு வழிவகுத்தது.

இணைப்பு பிறகு, மீண்டும் வலைப்பக்கம் சென்று அல்லது எல்இடி அணைக்க முள் 11 பொத்தானை கிளிக். இந்த வழியில் WebIOPi ஐப் பயன்படுத்தி ராஸ்பெர்ரி பை GPIO ஐக் கட்டுப்படுத்தலாம் .

சோதனைக்குப் பிறகு, எல்லாம் விவரிக்கப்பட்டபடி வேலை செய்தால், நாங்கள் மீண்டும் முனையத்திற்குச் சென்று CTRL + C உடன் நிரலை நிறுத்தலாம். இந்த அமைப்பில் உங்களுக்கு ஏதேனும் சிக்கல் இருந்தால், கருத்துப் பிரிவு வழியாக என்னைத் தாக்கவும்.

வெபியோபி பற்றிய கூடுதல் தகவலை அதன் விக்கி பக்கத்தில் (http://webiopi.trouch.com/INSTALL.html) காணலாம்.

சோதனை முடிந்தவுடன், நாங்கள் முக்கிய திட்டத்தைத் தொடங்க உள்ளோம்.

ராஸ்பெர்ரி பை ஹோம் ஆட்டோமேஷனுக்கான வலை பயன்பாட்டை உருவாக்குதல்:

இங்கே நாம் WebIOPi சேவையின் இயல்புநிலை உள்ளமைவைத் திருத்துவோம், அழைக்கும்போது இயக்கப்படும் எங்கள் சொந்த குறியீட்டைச் சேர்ப்போம். எங்கள் கணினியில் ஃபைல்ஸில்லா அல்லது வேறு எஃப்டிபி / எஸ்சிபி நகல் மென்பொருளை நிறுவுவதே நாங்கள் செய்வோம். முனையத்தின் வழியாக பை குறியீடாக்குவது மிகவும் மன அழுத்தத்தை தருகிறது என்பதை நீங்கள் ஏற்றுக்கொள்வீர்கள், எனவே இந்த கட்டத்தில் ஃபைல்ஸில்லா அல்லது வேறு எந்த SCP மென்பொருளும் கைக்கு வரும். இந்த ஐஓடி ஹோம் ஆட்டோமேஷன் வலை பயன்பாட்டிற்கான HTML, CSS மற்றும் ஜாவா ஸ்கிரிப்ட் குறியீடுகளை எழுதி அவற்றை ராஸ்பெர்ரி பைக்கு நகர்த்துவதற்கு முன், எங்கள் எல்லா வலை கோப்புகளும் இருக்கும் திட்ட கோப்புறையை உருவாக்கலாம்.

நீங்கள் வீட்டு அடைவில் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள், பின்னர் கோப்புறையை உருவாக்கி, உருவாக்கிய கோப்புறையில் சென்று கோப்பகத்தில் html கோப்புறையை உருவாக்கவும்:

cd ~ mkdir webapp cd webapp mkdir html

HTML கோப்புறையில் ஸ்கிரிப்ட்கள், CSS மற்றும் படங்களுக்கான கோப்புறையை உருவாக்கவும்

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

எங்கள் கோப்புகளை உருவாக்கியதன் மூலம், எங்கள் கணினியில் குறியீடுகளை எழுதுவதற்கு நகர்த்தலாம், பின்னர் பைல்ஸில்லா வழியாக பைக்கு செல்லலாம்.

ஜாவாஸ்கிரிப்ட் குறியீடு:

நாம் எழுதும் குறியீட்டின் முதல் பகுதி ஜாவாஸ்கிரிப்ட் ஆகும். WebIOPi சேவையுடன் தொடர்புகொள்வதற்கான எளிய ஸ்கிரிப்ட் இது.

இந்த திட்டத்திற்காக, எங்கள் வலை பயன்பாடு நான்கு பொத்தான்களைக் கொண்டிருக்கும், அதாவது நான்கு ஜிபிஐஓ ஊசிகளைக் கட்டுப்படுத்த நாங்கள் திட்டமிட்டுள்ளோம், இருப்பினும் எங்கள் ஆர்ப்பாட்டத்தில் இரண்டு ரிலேக்களைக் கட்டுப்படுத்துவோம். முழு வீடியோவையும் இறுதியில் சரிபார்க்கவும்.

webiopi (). தயார் (செயல்பாடு () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). ().setFunction (23, "out"); var உள்ளடக்கம், பொத்தான்; உள்ளடக்கம் = $ ("# உள்ளடக்கம்"); பொத்தான் = வெபியோபி (). பொத்தான் = வெபியோபி (). createGPIOButton (18, "ரிலே 2"); content.append (பொத்தான்); பொத்தான் = வெபியோபி ().).createGPIOButton (23, "ரிலே 4"); content.append (பொத்தான்);});

WebIOPi தயாராக இருக்கும்போது மேலே உள்ள குறியீடு இயங்கும்.

ஜாவாஸ்கிரிப்ட் குறியீட்டை கீழே விளக்கினோம்:

webiopi (). தயார் (செயல்பாடு (): இந்த செயல்பாட்டை உருவாக்க மற்றும் வெபியோபி தயாராக இருக்கும்போது அதை இயக்க எங்கள் கணினிக்கு இது அறிவுறுத்துகிறது.

webiopi (). setFunction (23, "out"); GPIO23 ஐ வெளியீடாக அமைக்க WebIOPi சேவையைச் சொல்ல இது எங்களுக்கு உதவுகிறது. எங்களிடம் நான்கு பொத்தான்கள் உள்ளன, நீங்கள் அதிகமான பொத்தான்களை செயல்படுத்தினால், அதை நீங்கள் அதிகமாக வைத்திருக்கலாம்.

var உள்ளடக்கம், பொத்தான்; இந்த வரி எங்கள் கணினியை ஒரு பெயரிடப்பட்ட உள்ளடக்கத்தை உருவாக்கி, மாறியை ஒரு பொத்தானாக மாற்றச் சொல்கிறது.

உள்ளடக்கம் = $ ("# உள்ளடக்கம்"); உள்ளடக்க மாறி இன்னும் எங்கள் HTML மற்றும் CSS முழுவதும் பயன்படுத்தப்பட உள்ளது. எனவே நாம் # உள்ளடக்கத்தைக் குறிப்பிடும்போது, ​​WebIOPi கட்டமைப்பானது அதனுடன் தொடர்புடைய அனைத்தையும் உருவாக்குகிறது.

பொத்தான் = வெபியோபி (). createGPIOButton (17, "ரிலே 1"); WebIOPi பல்வேறு வகையான பொத்தான்களை உருவாக்க முடியும். “ரிலே 1” என்று பெயரிடப்பட்ட இந்த வழக்கில் ஜிபிஐஓ முள் கட்டுப்படுத்தும் ஜிபிஐஓ பொத்தானை உருவாக்க வெப்ஐஓபி சேவையைச் சொல்ல மேலே உள்ள குறியீடு நமக்கு உதவுகிறது. மற்றவர்களுக்கும் அதே போகிறது.

content.append (பொத்தான்); இந்த குறியீட்டை HTML கோப்பில் அல்லது வேறு இடங்களில் உருவாக்கப்பட்ட பொத்தானை வேறு எந்த குறியீட்டிலும் சேர்க்கவும். மேலும் பொத்தான்களை உருவாக்க முடியும் மற்றும் அனைவருக்கும் இந்த பொத்தானின் ஒரே பண்புகள் இருக்கும். CSS அல்லது ஸ்கிரிப்டை எழுதும் போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

ஜே.எஸ்.

இது முடிந்தவுடன், நாங்கள் CSS ஐ உருவாக்க நகர்கிறோம். குறியீடு பிரிவில் கொடுக்கப்பட்ட இணைப்பிலிருந்து குறியீட்டை முழுவதுமாக பதிவிறக்கம் செய்யலாம்.

CSS குறியீடு:

எங்கள் ஐஓடி ராஸ்பெர்ரி பை ஹோம் ஆட்டோமேஷன் வலைப்பக்கத்தை அழகாக மாற்ற CSS உதவுகிறது.

வலைப்பக்கம் கீழே உள்ள படத்தைப் போல இருக்க வேண்டும் என்று நான் விரும்பினேன், எனவே அதை அடைய smarthome.css நடை தாளை எழுத வேண்டியிருந்தது.

CSS குறியீட்டை கீழே விளக்கினோம்:

CSS ஸ்கிரிப்ட் இங்கே சேர்க்க மிகவும் பருமனாக உணர்கிறது, எனவே நான் அதன் ஒரு பகுதியை எடுத்து அவற்றை முறிவுக்கு பயன்படுத்துவேன். முழு CSS கோப்பையும் இங்கிருந்து பதிவிறக்கம் செய்யலாம். CSS எளிதானது மற்றும் CSS குறியீட்டைப் பார்ப்பதன் மூலம் நீங்கள் அதைப் புரிந்து கொள்ள முடியும். இந்த பகுதியை நீங்கள் எளிதாகத் தவிர்த்துவிட்டு, எங்கள் CSS குறியீட்டை நேராகப் பயன்படுத்தலாம்.

ஸ்கிரிப்ட்டின் முதல் பகுதி வலை பயன்பாட்டின் உடலுக்கான நடைதாள் மற்றும் அது கீழே காட்டப்பட்டுள்ளது;

உடல் {பின்னணி-வண்ணம்: #ffffff; பின்னணி-படம்: url ('/ img / smart.png'); பின்னணி-மீண்டும்: இல்லை மீண்டும்; பின்னணி-நிலை: மையம்; பின்னணி அளவு: கவர்; எழுத்துரு: தடித்த 18px / 25px ஏரியல், சான்ஸ்-செரிஃப்; நிறம்: லைட் கிரே; }

மேலே உள்ள குறியீடு சுய விளக்கமளிக்கும் என்று நான் நம்ப விரும்புகிறேன், பின்னணி நிறத்தை #ffffff என அமைத்துள்ளோம், இது வெள்ளை நிறத்தில் உள்ளது, பின்னர் அந்த கோப்புறை இடத்தில் அமைந்துள்ள ஒரு பின்னணி படத்தை சேர்க்கிறோம் (எங்கள் முந்தைய கோப்புறை அமைப்பை நினைவில் கொள்கிறீர்களா?), படம் இல்லை என்பதை உறுதிசெய்கிறோம். பின்னணி-மீண்டும் சொத்தை மறுபடியும் மறுபடியும் அமைப்பதன் மூலம் மீண்டும் செய்யவும், பின்னர் பின்னணியை மையப்படுத்த CSS க்கு அறிவுறுத்தவும். பின்னணி அளவு, எழுத்துரு மற்றும் வண்ணத்தை அமைக்க நாங்கள் நகர்கிறோம்.

உடல் முடிந்தவுடன், பொத்தான்கள் அழகாக இருக்க CSS ஐ எழுதினோம்.

பொத்தான் {காட்சி: தொகுதி; நிலை: உறவினர்; விளிம்பு: 10px; திணிப்பு: 0 10px; உரை-சீரமை: மையம்; உரை-அலங்காரம்: எதுவுமில்லை; அகலம்: 130px; உயரம்: 40px; எழுத்துரு: தடித்த 18px / 25px ஏரியல், சான்ஸ்-செரிஃப்; நிறம்: கருப்பு; உரை-நிழல்: 1px 1px 1px rgba (255,255,255,.22); -வெப்கிட்-எல்லை-ஆரம்: 30px; -moz-border-radius: 30px; எல்லை-ஆரம்: 30px;

இதைச் சுருக்கமாக வைத்திருக்க, குறியீட்டில் உள்ள மற்ற எல்லா விஷயங்களும் அழகாக இருக்கும்படி செய்யப்பட்டன. என்ன நடக்கிறது என்பதைப் பார்க்க நீங்கள் அவற்றை மாற்றலாம், சோதனை மற்றும் பிழை வழியாக கற்றல் என்று அழைக்கப்படுகிறது என்று நான் நினைக்கிறேன், ஆனால் CSS ஐப் பற்றிய ஒரு நல்ல விஷயம் எளிய ஆங்கிலத்தில் வெளிப்படுத்தப்படுவது, அதாவது அவை புரிந்துகொள்வது மிகவும் எளிதானது. பொத்தான் தொகுதியின் மற்ற பகுதியில் பொத்தான் மற்றும் பொத்தான் நிழலில் உரை நிழலுக்கான சில கூடுதல் அம்சங்கள் உள்ளன. இது ஒரு சிறிய மாற்றம் விளைவையும் கொண்டுள்ளது, இது பொத்தானை அழுத்தும்போது அழகாகவும் யதார்த்தமாகவும் தோற்றமளிக்க உதவுகிறது. வலைப்பக்கம் அனைத்து தளங்களிலும் உகந்ததாக செயல்படுவதை உறுதி செய்வதற்காக வெப்கிட், பயர்பாக்ஸ், ஓபரா போன்றவற்றுக்கு இவை தனித்தனியாக வரையறுக்கப்படுகின்றன.

குறியீட்டின் அடுத்த தொகுதி இது WebIOPi சேவைக்கான உள்ளீடு என்று WebIOPi சேவைக்குக் கூறுவதாகும்.

i nput {display: block; அகலம்: 160px; உயரம்: 45px; }

பொத்தானை அழுத்தும்போது ஒருவித அறிகுறியைக் கொடுப்பதே கடைசியாக நாம் செய்ய விரும்புகிறோம். எனவே நீங்கள் திரையைப் பார்க்க முடியும் மற்றும் பொத்தான்களின் நிறம் தற்போதைய நிலையை உங்களுக்குத் தெரிவிக்கும். இதைச் செய்ய, ஒவ்வொரு பொத்தானுக்கும் கீழே உள்ள குறியீட்டின் வரி செயல்படுத்தப்பட்டது.

# gpio17.LOW {பின்னணி-வண்ணம்: சாம்பல்; நிறம்: கருப்பு; } # gpio17.HIGH {பின்னணி-நிறம்: சிவப்பு; நிறம்: லைட் கிரே; }

மேலே உள்ள குறியீடுகளின் கோடுகள் அதன் தற்போதைய நிலையின் அடிப்படையில் பொத்தானின் நிறத்தை மாற்றும். பொத்தான் முடக்கப்பட்டிருக்கும் போது (குறைந்த) பொத்தான்கள் பின்னணி நிறம் அதன் செயலற்ற தன்மையைக் காட்ட சாம்பல் நிறமாக மாறும், மேலும் அது (உயர்) இயங்கும் போது பொத்தானின் பின்னணி நிறம் RED ஆகிறது.

பையில் உள்ள CSS, smarthome.css ஆக சேமிக்க உதவுகிறது, பின்னர் அதை ஃபைல்ஸில்லா வழியாக (அல்லது நீங்கள் பயன்படுத்த விரும்பும் வேறு எஸ்சிபி மென்பொருள்) எங்கள் ராஸ்பெர்ரி பையில் உள்ள ஸ்டைல்ஸ் கோப்புறையில் நகர்த்தி, இறுதி துண்டு, HTML குறியீட்டை சரிசெய்யவும். முழு CSS ஐ இங்கிருந்து பதிவிறக்கம் செய்ய நினைவில் கொள்க.

HTML குறியீடு:

HTML குறியீடு எல்லாவற்றையும் ஒன்றாக இழுக்கிறது, ஜாவாஸ்கிரிப்ட் மற்றும் நடை தாள்.

புஷ் பொத்தான்; பன்றி இறைச்சி பெற

நேரத்திற்குள் தலை டேக் சில மிகவும் முக்கியமான அம்சங்கள் உள்ளன.

மேலே உள்ள குறியீட்டின் வரி, வலை பயன்பாட்டை மொபைல் டெஸ்க்டாப்பில் சேமிக்க உதவுகிறது, இது குரோம் அல்லது மொபைல் சஃபாரிகளைப் பயன்படுத்துகிறது. இதை குரோம் மெனு வழியாக செய்யலாம். இது மொபைல் டெஸ்க்டாப் அல்லது வீட்டிலிருந்து பயன்பாட்டிற்கு எளிதான வெளியீட்டு உணர்வை வழங்குகிறது.

கீழேயுள்ள அடுத்த வரி குறியீடு வலை பயன்பாட்டிற்கு ஒருவித மறுமொழியை அளிக்கிறது. இது தொடங்கப்பட்ட எந்த சாதனத்தின் திரையையும் ஆக்கிரமிக்க உதவுகிறது.

குறியீட்டின் அடுத்த வரி வலைப்பக்கத்தின் தலைப்பு பட்டியில் காட்டப்பட்டுள்ள தலைப்பை அறிவிக்கிறது.

அடுத்த நான்கு வரி குறியீடுகள் ஒவ்வொன்றும் HTML குறியீட்டை பல ஆதாரங்களுடன் இணைக்கும் செயல்பாட்டைச் செய்கின்றன.

மேலே உள்ள முதல் வரி முக்கிய WebIOPi கட்டமைப்பை ஜாவாஸ்கிரிப்ட் என்று அழைக்கிறது, இது சேவையக ரூட்டில் கடுமையாக குறியிடப்பட்டுள்ளது. WebIOPi பயன்படுத்தப்பட வேண்டிய ஒவ்வொரு முறையும் இது அழைக்கப்பட வேண்டும்.

இரண்டாவது வரி எங்கள் JQuery ஸ்கிரிப்ட் HTML ஐ பக்கம் காட்டுகிறார் மூன்றாவது அது எங்கள் பாணியில் தாள் திசையில் புள்ளிகள். கடைசியாக கடைசி வரியானது மொபைல் டெஸ்க்டாப்பில் ஒரு ஐகானை ஒரு வலை பயன்பாடாக அல்லது வலைப்பக்கத்திற்கு ஒரு ஃபேவிகானாக பயன்படுத்த முடிவு செய்தால் அதைப் பயன்படுத்த உதவுகிறது.

HTML குறியீட்டின் உடல் பிரிவில், ஜாவாஸ்கிரிப்ட் கோப்பில் எழுதப்பட்டதைக் காண்பிக்க எங்கள் HTML குறியீட்டைக் கூறும் கீழேயுள்ள வரியுடன் பொத்தான்கள் சரியாக சீரமைக்கப்பட்டிருப்பதை உறுதிசெய்ய பிரேக் குறிச்சொற்கள் உள்ளன. ஐடி = "உள்ளடக்கம்" முந்தைய ஜாவா குறியீட்டின் கீழ் எங்கள் பொத்தானை உள்ளடக்கத்தை அறிவிப்பு உங்களுக்கு ஞாபகப்படுத்த வேண்டும்.

நீங்கள் துரப்பணம், 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 stop

துவக்கத்தில் இயக்க WebIOPi ஐ அமைக்க, பயன்படுத்தவும்;

sudo update-rc.d webiopi இயல்புநிலை

துவக்கத்தில் இயங்குவதைத் திருப்பி நிறுத்த விரும்பினால், பயன்படுத்தவும்;

sudo update-rc.d webiopi remove

சுற்று வரைபடம் மற்றும் விளக்கம்:

எங்கள் மென்பொருள் அமைக்கப்பட்டவுடன், இந்த வலை கட்டுப்பாட்டு வீட்டு உபயோக திட்டத்திற்கான திட்டங்களை உருவாக்க நாங்கள் அனைவரும் தயாராக உள்ளோம்.

ரிலே தொகுதிகளில் என் கைகளை வைக்க முடியவில்லை என்றாலும், பொழுதுபோக்கிற்காக வேலை செய்வது எளிது என்று நான் நினைக்கிறேன். எனவே சாதாரண தனித்த ஒற்றை 5 வி ரிலேக்களுக்கான திட்டங்களை இங்கே வரைகிறேன்.

மேலே உள்ள ஃப்ரிட்ஸிங் சர்க்யூட்டில் காட்டப்பட்டுள்ளபடி உங்கள் சுற்று இணைக்கவும். உங்கள் சொந்த ரிலேவின் COM, NO (பொதுவாக திறந்த) மற்றும் NC (பொதுவாக மூடு) வெவ்வேறு பக்கங்களில் / புள்ளிகளில் அமைந்திருக்கலாம் என்பதை நீங்கள் கவனிக்க வேண்டும். தயவுசெய்து ஒரு மில்லிமீட்டரைப் பயன்படுத்தவும். ரிலே பற்றி இங்கே மேலும் அறிக.

எங்கள் கூறுகள் இணைக்கப்பட்டுள்ளதால், ஒரு வலைப்பக்கத்திலிருந்து உங்கள் சேவையகத்தை நீக்குங்கள், உங்கள் ராஸ்பெர்ரி பையின் ஐபிக்குச் சென்று, முன்னர் விவரித்தபடி துறைமுகத்தைக் குறிக்கவும், உங்கள் பயனர்பெயர் மற்றும் கடவுச்சொல்லுடன் உள்நுழைக, மேலும் கீழேயுள்ள படத்தைப் போலவே ஒரு வலைப்பக்கத்தையும் நீங்கள் காண வேண்டும்.

பொத்தான்களைக் கிளிக் செய்வதன் மூலம் எங்கிருந்தும் வயர்லெஸ் முறையில் நான்கு ஏசி வீட்டு உபகரணங்களை இப்போது எளிதாகக் கட்டுப்படுத்தலாம். இது மொபைல் போன், டேப்லெட் போன்றவற்றிலிருந்து செயல்படும், மேலும் சாதனங்களைக் கட்டுப்படுத்த அதிக பொத்தான்கள் மற்றும் ரிலேக்களைச் சேர்க்கலாம். காசோலை முழு வீடியோ கீழே.

அது தான் தோழர்களே, நன்றி இதை ஒட்டிக்கொண்டது. உங்களிடம் ஏதேனும் கேள்விகள் இருந்தால், அவற்றை கருத்து பெட்டியில் விடுங்கள்.