ওয়েবসাইট নিয়ন্ত্রিত ক্রিসমাস ট্রি (যে কেউ এটি নিয়ন্ত্রণ করতে পারে): 19 টি ধাপ (ছবি সহ)

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:56

আপনি জানতে চান একটি ওয়েবসাইট নিয়ন্ত্রিত ক্রিসমাস ট্রি কেমন দেখাচ্ছে?

এখানে আমার ক্রিসমাস ট্রি প্রকল্পটি দেখানো হয়েছে। লাইভ স্ট্রিম এখন শেষ হয়েছে, কিন্তু আমি একটি ভিডিও তৈরি করেছি, যা ঘটছে তা ক্যাপচার করে:

এই বছর, ডিসেম্বরের মাঝামাঝি সময়ে, আমি আমার বিছানায় শুয়ে ছিলাম, কাজের সপ্তাহের মাঝখানে ঘুমানোর চেষ্টা করছিলাম। এবং ঘুমানোর পরিবর্তে আমি ভাবছিলাম যে কি একটি বড় ক্রিসমাস প্রকল্প হবে। এবং তারপরে একটি দুর্দান্ত ধারণা আমাকে আঘাত করেছিল।

যেহেতু আমি ক্রিসমাসের সাজসজ্জা নিয়ে অলস, তাই অন্য কাউকে আমার ক্রিসমাস লাইট নিয়ন্ত্রণ করতে দেওয়া ভাল হবে, তাই আমাকে এটি সম্পর্কে চিন্তা করতে হবে না।

"যদি আমি একটি ক্রিসমাস ট্রি লাইট তৈরি করি যা কেউ একটি ওয়েবসাইট ইন্টারফেসের মাধ্যমে নিয়ন্ত্রণ করতে সক্ষম হয়?"

(দুই সপ্তাহের নিদ্রাহীন রাত োকান)

তাই আমি এটা তৈরি।

ESP8266 Arduino এর মাধ্যমে ইন্টারনেটে সংযুক্ত বিশটি RGB LEDs সহ একটি ক্রিসমাস ট্রি।

আমার একজন বন্ধু (ধন্যবাদ জেপি) আমাকে একটি ওয়েবসাইট সেট আপ করতে সাহায্য করেছে (যেহেতু আমি ওয়েবসাইট সম্পর্কিত জিনিসের জন্য সাবলীল প্রোগ্রামার নই)।

এবং আমরা আমার গাছের একটি 24/7 ইউটিউব লাইভ স্ট্রিম স্থাপন করি যাতে আপনি সব সময় কি চালু বা বন্ধ করছেন তা দেখতে পারবেন।

এই প্রকল্পটি এই বছরের জন্য আদর্শ, যেহেতু আমরা অনেকেই লকডাউনে ছিলাম, বন্ধুদের এবং পরিবারের সাথে দেখা করতে এবং সামাজিকীকরণ করতে পারিনি। ক্রিসমাস ট্রি দিয়ে কেন একত্রিত হবেন না:)

এই নির্দেশনায় আমি এই প্রকল্পটি কীভাবে তৈরি হয়েছিল তা বিস্তারিতভাবে ব্যাখ্যা করব।

ধাপ 1: দক্ষতার স্তর

এই প্রকল্পটি আরো সফটওয়্যার ভিত্তিক। কিন্তু ভয় পাবেন না কিছু ভাগ্য এবং চাচা গুগলের সাহায্য অনেক সাহায্য করবে:)

আপনার 3 টি দক্ষতার একটি সেট থাকতে হবে (অথবা আপনি তাদের কোন চিন্তা করবেন না): একটি ওয়েব সার্ভার অংশ, আরডুইনো অংশ এবং অবশ্যই ক্রিসমাস ট্রি!

প্রস্তাবিত জ্ঞান:

Computer বেসিক কম্পিউটার এবং প্রোগ্রামিং দক্ষতা

Linux বেসিক লিনাক্স টার্মিনাল জ্ঞান

Computer বেসিক কম্পিউটার নেটওয়ার্কিং জ্ঞান

Elect মৌলিক ইলেকট্রনিক্স জ্ঞান

Google গুগল এবং অন্যান্য "বিশেষ" ক্ষমতা ব্যবহার করার দক্ষতা

• জানতে হবে কিভাবে একটি ক্রিসমাস ট্রি স্থাপন করতে হয়:)

আপনার যদি প্রযুক্তি এবং প্রোগ্রামিং সম্পর্কে কিছু ধারণা থাকে তবে আপনি এই নির্দেশাবলী অনুসারে এই জিনিসটি সেট করতে শিখতে সক্ষম হবেন।

ধাপ 2: সরঞ্জাম এবং উপাদান

ক্রিসমাস ট্রি পাশে, আপনার প্রয়োজন হবে: • ক্রিসমাস ট্রি (d'oh …)

N একটি NodeMCU মাইক্রো-কন্ট্রোলার বোর্ড

(আপনি ESP32 বা অন্যান্য Wi-Fi বা ইথারনেট সক্ষম বোর্ড ব্যবহার করতে পারেন)

• ঠিকানাযোগ্য আরজিবি LED স্ট্রিপ ঠিকানাযোগ্য আরজিবি নেতৃত্বাধীন স্ট্রিপ অনেক Arduino জিপিআইও সংরক্ষণ করবে (https://www.sparkfun.com/products/11020)

N NodeMCU এর জন্য সফটওয়্যার (এই নির্দেশে প্রদান করা হয়েছে)

সার্ভারের পাশে আপনার প্রয়োজন হবে:

Public পাবলিক আইপি সহ একটি ভার্চুয়াল প্রাইভেট সার্ভার। এখানে আপনি DigitalOcean https://m.do.co/c/96d53c569fdb এ $ 100 বিনামূল্যে পাবেন

Domain একটি ডোমেইন (alচ্ছিক) আপনি যেকোন রেজিস্ট্রার সংস্থায় নিবন্ধন করতে পারেন, উদাহরণস্বরূপ

• ডেডিকেটেড কোড (এই নির্দেশের সাথে সরবরাহ করা)

ধাপ 3: ভার্চুয়াল মেশিন (কম্পিউটার) কনফিগার করুন অংশ 1

আসুন সরাসরি কোডিং এ যাই:)

আমাদের একটি সার্ভার দরকার, যা ওয়েবসাইট এবং NodeMCU- এর সাথে যোগাযোগ করবে।

ডিজিটাল ওশিয়ানের সার্ভারগুলি আমাদের একটি পাবলিক আইপি অ্যাড্রেস সহ একটি ভার্চুয়াল মেশিন রাখার অনুমতি দেয়, যার অর্থ, আমরা এতে পরিষেবাগুলি চালাতে পারি এবং বিশ্বব্যাপী সেগুলি অ্যাক্সেস করতে পারি।

একবার আপনি একটি ডিজিটালসিওন মাসিক সাবস্ক্রিপশন প্রদান করলে (আপনি 60 দিনের ফ্রি ট্রায়াল ব্যবহার করতে পারেন), একটি প্রজেক্ট তৈরি করুন এবং এর নাম দিন ক্রিসমাস ট্রি বা আপনি যা চান।

আপনি এখন "একটি ফোঁটা দিয়ে শুরু করুন" (যা মূলত একটি ভার্চুয়াল মেশিনের ডিজিটাল মহাসাগরের নাম) ক্লিক করে আপনার ভার্চুয়াল মেশিন (দূরবর্তী অ্যাক্সেসযোগ্য ভার্চুয়াল কম্পিউটার) তৈরি করতে পারেন।

একটি কনফিগারেশন পৃষ্ঠা আসবে এবং আপনি একটি ডিফল্ট সঙ্গে থাকতে পারেন: উবুন্টু ইমেজ, বেসিক প্ল্যান এবং কোন ব্লক স্টোরেজ (5 $ /মাস)

ধাপ 4: ভার্চুয়াল মেশিন (কম্পিউটার) কনফিগার করুন অংশ 2

একটি ডেটা সেন্টার অঞ্চল হল সেই জায়গা যেখানে আপনার সার্ভার তৈরি করা হবে।

আপনার এবং আপনার সম্ভাব্য ব্যবহারকারীদের নিকটতমটি বেছে নিন। এটি সর্বনিম্ন প্রতিক্রিয়া সময় প্রদান করবে।

আরও, প্রমাণীকরণ বিভাগে, আপনাকে আপনার ভার্চুয়াল মেশিন অ্যাক্সেস করার জন্য একটি পাসওয়ার্ড লিখতে বলা হবে।

চূড়ান্ত করুন এবং তৈরি করুন বিভাগে, 1 ফোঁটা ডিফল্ট রাখুন, একটি হোস্ট নাম নির্বাচন করুন (আবার ক্রিসমাস ট্রি), ডিফল্টরূপে নির্বাচিত না হলে পূর্বে তৈরি করা আপনার প্রকল্পটি নির্বাচন করুন এবং ড্রপলেট তৈরি করুন ক্লিক করুন। এটি কয়েক মিনিট সময় নেবে। বাম দিকে নেভিগেশন বিভাগে আপনার প্রকল্পে ক্লিক করে আপনি আপনার ফোঁটা দেখতে পাবেন।

ধাপ 5: ভার্চুয়াল মেশিন (কম্পিউটার) কনফিগার করুন অংশ 3

ফোঁটার ডানদিকে তিনটি বিন্দুতে ক্লিক করে আপনি অ্যাক্সেস কনসোল ক্লিক করতে পারেন, যা আপনাকে আপনার ভার্চুয়াল কম্পিউটার অ্যাক্সেস করতে দেবে।

একটি নতুন ছোট ব্রাউজার উইন্ডো খুলবে। এখন, এটি একটি ডেস্কটপ পরিবেশ নয়, যেমন আপনার উইন্ডোজ 10 বা গ্রাফিক্যাল ইন্টারফেস কম্পিউটারের সাথে উবুন্টু।

যাইহোক, সব একটি কনসোল ইন্টারফেসের মাধ্যমে করা যেতে পারে।

এটি দেখতে যতটা ভয়ঙ্কর নয়:)

ধাপ 6: ভার্চুয়াল মেশিন (কম্পিউটার) কনফিগার করুন অংশ 4

আপনি ডিজিটাল মহাসাগরের ক্লাউডে সফলভাবে আপনার নিজস্ব ভার্চুয়াল মেশিন তৈরি করেছেন।

পরবর্তী ধাপে, আপনি অ্যাপাচি নামে একটি ওয়েব সার্ভার সেট আপ করবেন এবং আপনার নিজস্ব ওয়েব পেজ সেট আপ করবেন।

ফাইলজিলা ক্লায়েন্টটি এখানে ডাউনলোড করুন https://filezilla-project.org/download.php?platfo… (অথবা 32 বিট সংস্করণ 32 বিট অপারেটিং সিস্টেমের জন্য খুঁজুন) এবং এটি ইনস্টল করুন। এটি একটি FTP (ফাইল ট্রান্সফার প্রোটোকল) ক্লায়েন্ট।

আপনি আপনার ভার্চুয়াল মেশিন থেকে এবং ফাইলগুলি অ্যাক্সেস এবং স্থানান্তর করতে সক্ষম হবেন।

একবার ইনস্টল হয়ে গেলে, ফাইল → সাইট ম্যানেজার → নতুন সাইটে ক্লিক করুন এবং উপরের ছবির মতো ডেটা লিখুন।

প্রোটোকল: এসএফটিপি (নিরাপদ ফাইল ট্রান্সফার প্রোটোকল)

হোস্ট: আপনার সার্ভারের আইপি, আপনার ডিজিটাল ওশান প্রকল্পে খুঁজুন।

ব্যবহারকারী হল রুট এবং পাসওয়ার্ড যা আপনি আপনার ফোঁটা তৈরির সময় সেট করেন।

ঠিক আছে ক্লিক করুন এবং আপনার ভার্চুয়াল মেশিনের সাথে সংযোগ করুন।

আপনাকে সতর্ক করা হবে, হোস্ট কী অজানা। দ্বিতীয় ছবিটি অনুসরণ করুন।

প্রকল্পের জন্য একটি স্থানীয় ফোল্ডার তৈরি করুন এবং আপনার প্রকল্পের ফাইলগুলি বের করুন যা আপনি এখানে ডাউনলোড করবেন।

আপনি আপনার কম্পিউটারে আপনার ফাইলগুলি সম্পাদনা করবেন এবং প্রতিবার আপনি কোডটি পরীক্ষা বা আপডেট করতে চাইলে আপনার ভার্চুয়াল মেশিনে স্থানান্তর করবেন।

ধাপ 7: একটি ওয়েব সার্ভার ইনস্টল করুন

ব্যবহারকারীর নাম রুট এবং আপনার পাসওয়ার্ড দিয়ে আপনার ড্রপলেট কনসোলে লগইন করুন।

যেহেতু আমাদের গ্রাফিক্যাল ইন্টারফেস নেই, তাই আমরা আপনার ভার্চুয়াল মেশিন নিয়ন্ত্রণ করতে কমান্ড ব্যবহার করি। এখানে কিছু সাধারণ কমান্ড রয়েছে যা আপনি উবুন্টু (লিনাক্স) এ ব্যবহার করবেন:

• pwd - আমার বর্তমান ডিরেক্টরি মুদ্রণ করুন

S ls - আমার বর্তমান ডিরেক্টরিতে ফাইল এবং ফোল্ডার তালিকা করুন

• সিডি / - / ডিরেক্টরিতে যান

রান দ্বারা, মানে, কমান্ড লিখুন এবং এন্টার টিপুন।

এখন, আমরা সিস্টেম আপডেট করার জন্য apt -get update -y চালাব।

Apache ওয়েব সার্ভার ইনস্টল করতে apt install apache2 -y চালান।

আপনার অ্যাপাচি ওয়েলকাম স্ক্রিনটি আপনার ব্রাউজার থেকে আপনার https:// ভার্চুয়াল-মেশিন-আইপি তে অ্যাক্সেসযোগ্য হওয়া উচিত।

আপনার ভার্চুয়াল মেশিন আইপি দিয়ে ভার্চুয়াল-মেশিন-আইপি প্রতিস্থাপন করুন, উদাহরণস্বরূপ 165.12.45.123। আপনি https:// এড়িয়ে যেতে পারেন কারণ এটি স্বয়ংক্রিয়ভাবে যোগ হবে।

অভিনন্দন!

বিঃদ্রঃ:

আপনি যদি চান যে আপনার ওয়েবসাইট আইপি ঠিকানার পরিবর্তে একটি নামের মাধ্যমে অ্যাক্সেসযোগ্য হোক (যেমন আমি https://blinkmytree.live/ ব্যবহার করেছি), ডোমেন সরবরাহকারী সাইট GoDaddy বা অনুরূপ (namecheap.com ইত্যাদি) এ যান এবং নির্দেশাবলী অনুসরণ করুন এখানে:

কিছু ডোমেইন নাম খুবই সস্তা। আমার ডোমেইন প্রতি বছর মাত্র 2 ডলার খরচ করেছে। অবশ্যই অর্থের মূল্য:)

ধাপ 8: একটি ওয়েব অ্যাপ্লিকেশন ফ্রেমওয়ার্ক ইনস্টল করুন

আমাদের কনসোলে ফিরে আসুন। ভয় পাবেন না:)

Filezilla ব্যবহার করুন অ্যাপ /নামের ভিতরে একটি ফোল্ডার তৈরি করুন, তাই /home /app আপনার ফোল্ডার হবে

সিডি /হোম /অ্যাপ চালান ভিতরের অ্যাপ ফোল্ডারে যেতে।

Npm প্যাকেজ ম্যানেজার ইনস্টল করার জন্য apt install npm -y চালান। এটি কয়েক মিনিট সময় নেবে।

একটি ফাইল package.json তৈরি করতে npm init -y চালান, যা একটি অ্যাপের প্রধান প্যাকেজ ডেটা ট্র্যাক/মনে রাখবে।

চালান npm --save install cors express to modules cors, express

Cors হল ক্রস সাইট অ্যাক্সেস কনফিগার করার জন্য মডিউল এবং এক্সপ্রেস একটি ওয়েব অ্যাপ্লিকেশন ফ্রেমওয়ার্ক।

এনপিএম একটি প্যাকেজ ম্যানেজার যা আমরা ব্যবহার করেছি এবং আমরা আমাদের অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস (এপিআই) প্রোগ্রাম করার জন্য node.js জাভাস্ক্রিপ্ট রানটাইম ব্যবহার করব, যা একটি HTTP সার্ভারের সাথে মিলিত হয়ে LEDs তে রং প্রয়োগের জন্য HTTP অনুরোধ গ্রহণ করবে, তাদের মান চিহ্নিত করবে (রং) মেমরিতে, এবং NodeMcu- এ মানগুলি পাস করুন, যখন এটি অনুরোধ করে।

দ্রষ্টব্য: NodeMcu এর নোডের সাথে node.js এর নোডের কোন সম্পর্ক নেই। NodeMcu যেকোন ইন্টারনেট সংযুক্ত arduino উন্নয়ন বোর্ড, NXP উন্নয়ন বোর্ড, অথবা একটি কাস্টম মাইক্রোচিপ/NXP/Renesas/STM/Atmel PCB দিয়ে প্রতিস্থাপিত হতে পারে। Node.js. Net ফ্রেমওয়ার্ক, পিএইচপি বা অন্য কোন প্ল্যাটফর্ম দিয়ে প্রতিস্থাপিত হতে পারে। কিন্তু সরলতার জন্য, আমরা NodeMCU এবং Node.js ব্যবহার করছি।

এখন, একটি পরীক্ষা করা যাক, যদি আমরা node.js এ একটি ছোট প্রোগ্রাম চালাতে পারি

আপনার স্থানীয় ফোল্ডারে নোটপ্যাড/নোটপ্যাড ++ বা অন্য এডিটর বা সমন্বিত উন্নয়ন পরিবেশ (ভিজ্যুয়াল স্টুডিও কোড https://code.visualstudio.com/) দিয়ে index.js নামে একটি ফাইল তৈরি করুন।

এই কোডটি এতে রাখুন:

var http = প্রয়োজন ('http');

http.createServer (ফাংশন (req, res) {

res.writeHead (200, {'Content-Type': 'text/plain'});

res.end ('হ্যালো ওয়ার্ল্ড!');

})। শুনুন (8080);

এটি সংরক্ষণ করুন এবং FileZilla এ ফাইলে ডাবল ক্লিক/ড্র্যাগ-ড্রপ সহ index.js হিসাবে ফোল্ডার/হোম/অ্যাপে স্থানান্তর করুন।

নোড index.js চালান, এবং এটি চলমান ছেড়ে দিন।

এখন, আমরা আমাদের ব্রাউজার থেকে https:// ভার্চুয়াল-মেশিন-আইপি: 8080 এ আমাদের পৃষ্ঠাটি অ্যাক্সেস করতে পারি। হ্যালো ওয়ার্ল্ড টেক্সট সহ একটি সাদা পাতা আসবে।

অভিনন্দন, আপনি শুধু node.js এ একটি ওয়েব সার্ভার তৈরি করেছেন!

ধাপ 9: সফ্টওয়্যার প্রস্তুত করুন

কনসোলে যান এবং ctrl+C চেপে প্রোগ্রামটি বন্ধ করুন।

আপনার index.js ফাইলটি/home/app/এ প্রতিস্থাপন করুন এবং আমাদের index.js এর সাথে এটি প্রতিস্থাপন করুন।

আপনি এখানে ওয়েবসাইটের জন্য সমস্ত ফাইল ডাউনলোড করতে পারেন:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

আমাদের ক্রিসমাস ট্রি কোডটি html ফোল্ডার থেকে দূরবর্তী ডিরেক্টরি/var/www/html/Filezilla এর সাথে অনুলিপি করুন। এটা কিছু সময় লাগতে পারে। যদি এটি আপনাকে জিজ্ঞাসা করে, index.html কে নতুন দিয়ে প্রতিস্থাপন করুন।

আপনার আইপি আবার আপনার প্রিয় ওয়েব ব্রাউজারে রাখুন।

আপনি শুধু আপনার ওয়েব অ্যাপ্লিকেশনটি ফ্রন্ট-এন্ড https:// ভার্চুয়াল-মেশিন-আইপি-এ উপলব্ধ করেছেন।

ধাপ 10: ব্যাক-এন্ড কোডটি বোঝা এবং এটি কাজ করা

দ্রষ্টব্য: আপনার ব্যাক-এন্ড কোডটি হোম /অ্যাপে রয়েছে

মনে রাখবেন, স্থানীয়ভাবে আপনার কোড সম্পাদনা করার পরে, ফাইলজিলা ব্যবহার করে আপনার সার্ভারে এটি আপলোড করতে ভুলবেন না এবং আপনার নোড অ্যাপ্লিকেশনটি পুনরায় চালু করুন (কনসোল: ctrl+c, তীর উপরে (শেষ কমান্ড নোড index.js দেখায়), প্রবেশ করুন)

কোড কাজ করার জন্য, আপনাকে প্রথমে কয়েকটি ডেটা প্রবেশ করতে হবে।

প্রথমত, আপনাকে index.js এ আপনার নিজের ডোমেইন বা আইপি তে হোস্টনাম ভেরিয়েবল পরিবর্তন করতে হবে, (এমন কিছু যা দেখতে: 165.13.45.123)।

দ্বিতীয়ত, আমি এটি বোঝার জন্য কোডের মাধ্যমে আপনাকে গাইড করব। আমি কোডে করা মন্তব্য এড়িয়ে যাবেন না তা নিশ্চিত করুন।

আপনি index.js ফাইলে দেখতে পারেন, আমরা এক্সপ্রেস মডিউল ব্যবহার করে একটি অ্যাপ তৈরি করি। তারপরে, আমরা এতে CORS নিয়ম প্রয়োগ করি, APIs যুক্ত করি এবং একটি http সার্ভার শুরু করি। এই সার্ভারটি GET http অনুরোধের মাধ্যমে একটি ওয়েব-পৃষ্ঠা পরিবেশন করবে না, তবে এটি GET http অনুরোধের মাধ্যমে নেতৃত্বাধীন রাজ্যগুলিকে পরিবেশন করবে এবং প্রাপ্ত PUT http অনুরোধগুলিতে নেতৃত্বাধীন রাজ্যগুলি আপডেট করবে।

অ্যাপ্লিকেশনগুলির মধ্যে তথ্য বিনিময় করার জন্য API গুলি একটি সাধারণ অভ্যাস। আমরা যেসব সাধারণ ব্যবহার করি তা হল REST API গুলি যা আমরা নিজেরাই ব্যবহার করি। তারা রাষ্ট্রহীন এবং তাদের স্থায়ী সংযোগ নেই (shorturl.at/aoBC3, PUT অনুরোধগুলি কেবল অ্যাপ অ্যারে ভেরিয়েবল (মেমরি) -এ নেতৃত্বাধীন রাজ্যগুলিকে আপডেট করে, GET অনুরোধগুলি কেবল একটি ক্লায়েন্টকে নেতৃত্বাধীন রাজ্য পাঠায়।

ক্লায়েন্টের উত্তর সাধারণত JSON স্বরলিপিতে থাকে, কিন্তু 30 টি LED রাজ্যের এই সাধারণ প্রতিক্রিয়ার জন্য, আমরা কেবল 30 টি কমা দ্বারা পৃথক মানের একটি স্ট্রিং পাঠাই।

ধাপ 11: ফ্রন্ট-এন্ড কোড বোঝা এবং এটিকে কাজ করা পার্ট 1

দ্রষ্টব্য: আপনার ফ্রন্ট-এন্ড কোডটি/var/www/html এ রয়েছে

মনে রাখবেন, স্থানীয়ভাবে আপনার কোড সম্পাদনা করার পরে, ফাইলজিলা ব্যবহার করে আপনার সার্ভারে এটি আপলোড করতে ভুলবেন না। Node.js এর বিপরীতে, Apache স্বয়ংক্রিয়ভাবে পুনরায় চালু হয়, কিন্তু আপনাকে আপনার ব্রাউজারে আপনার পৃষ্ঠাটি পুনরায় লোড করতে হবে। রিফ্রেশ করতে এবং আপনার পৃষ্ঠার ক্যাশে মুছে ফেলার জন্য ctrl+f5 ব্যবহার করুন।

কোড কাজ করার জন্য, আপনাকে কয়েকটি ডেটা প্রবেশ করতে হবে। প্রথমে, আপনাকে index.html এর ভিতরে send_request ফাংশনে url ভেরিয়েবল পরিবর্তন করতে হবে blinkmytree.live থেকে আপনার নিজের ডোমেইন বা আইপি তে, উদাহরণস্বরূপ: 165.13.45.123।

দ্বিতীয়ত, এটা বোঝার জন্য আমি আপনাকে কোডের মাধ্যমে গাইড করব। আমি কোডে করা মন্তব্য এড়িয়ে যাবেন না তা নিশ্চিত করুন। পৃষ্ঠা একটি HTML নথি। সমস্ত CSS নিয়ম (পৃষ্ঠা শৈলী এবং বিষয়বস্তু অবস্থান) একপাশে রেখে, আমরা কার্যকারিতা গুরুত্বপূর্ণ বিষয়বস্তু দেখব। CSS সম্পর্কে আরো জানতে, https://www.w3schools.com/css/ দেখুন।

আমরা পৃষ্ঠায় এই প্রধান বৈশিষ্ট্যগুলি (চটপটে পদ্ধতির বিশেষজ্ঞরা ব্যবহারকারীর গল্প বলবেন) চেয়েছিলেন:

• লাইভ ভিডিও পৃষ্ঠায় এম্বেড করা

A একটি ক্রিসমাস ট্রি -তে একটি ক্লিকযোগ্য LEDs, যা জিম্প ইমেজ এডিটর (https://www.gimp.org/) এ ব্যবহার করা হয়েছিল।

A একটি সার্ভারের সাথে প্রকৃত যোগাযোগ, নেতৃত্বাধীন অবস্থার পরিবর্তনের অপেক্ষায়।

ধাপ 12: ফ্রন্ট-এন্ড কোড বোঝা এবং এটিকে কাজ করা অংশ 2

যখন আমাদের ক্রিসমাস ট্রিতে LEDs এবং রঙের সংখ্যা আছে, বাছাই করার জন্য, আমাদের এলাকা তৈরি করতে হবে এবং তাদের উপর ক্রিয়া প্রয়োগ করতে হবে, তাই একবার আমরা একটি ছবির একটি পিকার অংশে রঙিন LED এ ক্লিক করলে, একটি রং নির্বাচন করা হবে এবং একটি আমরা একটি LED তে ক্লিক করি, কমান্ডটি সার্ভারে পাঠানো হবে, যেখানে Arduino তার মানটি বেছে নেবে।

এইচটিএমএল 5 তে, নতুন এইচটিএমএল স্ট্যান্ডার্ড, ইমেজ ম্যাপ নামে কিছু আছে। এটি আমাদের একটি চিত্রের ক্ষেত্রগুলি সংজ্ঞায়িত করার অনুমতি দেয়, যা আমরা এটিতে অ্যাকশন শ্রোতাদের প্রয়োগ করতে পারি।

যেহেতু আমাদের সংজ্ঞায়িত করার জন্য অনেকগুলি এলাকা রয়েছে, তাই আমরা এই ক্ষেত্রগুলি সংজ্ঞায়িত করার জন্য অনলাইনে https://www.image-map.net/ একটি টুল ব্যবহার করেছি এবং আমাদের পৃষ্ঠায় HTML কোড অনুলিপি করেছি।

একবার আমরা তা করলে, আমরা অনক্লিক ইভেন্টকে একটি ফাংশন দিয়ে কল করতে পারি এবং এই প্রতিটি এলাকায় একটি LED নম্বর প্যারামিটার। উপরের স্ক্রিনশট দেখুন।

ধাপ 13: ফ্রন্ট-এন্ড কোড বোঝা এবং এটি কাজ করা অংশ 3

এইচটিএমএল বডির শেষের ভিতরে, একটি অঞ্চলে, আমরা কিছু জাভাস্ক্রিপ্ট রাখি, যা আমরা অনক্লিক ইভেন্টে যে ফাংশনগুলিকে কল করি তা সংজ্ঞায়িত করতে। বিশ্বব্যাপী, আমরা একটি XMLHttpRequest সংজ্ঞায়িত করি, যা আমরা PUT অনুরোধ পাঠাতে ব্যবহার করি

আমাদের দুটি ফাংশন আছে:

ফাংশন set_color (val)

ফাংশন send_request (আইডি)

এপিআই অনুরোধ পরীক্ষার জন্য, আমি পোস্টম্যান https://www.postman.com/ নামে একটি সাধারণভাবে ব্যবহৃত সফটওয়্যার টুল সুপারিশ করি। এটি আমাদের প্রোগ্রামিং দক্ষতা ছাড়াই কেবল সার্ভারে API অনুরোধ পাঠাতে দেয়। এটি একটি সার্ভারকে উপহাস করতে এবং অনুরোধগুলি গ্রহণ করার অনুমতি দেয়।

ধাপ 14: ফ্রন্ট-এন্ড কোড বোঝা এবং এটিকে কাজ করা অংশ 4

আপনার আবেদন কাজ করে।

সচেতন হোন, সংখ্যাগুলি বিপরীত, অর্থাৎ, 20 হল 1 এবং 1 হল 20, এর কারণ হল গাছের এলইডিগুলি নীচে শুরু হয়, কিন্তু ব্যবহারকারীর ভাল অভিজ্ঞতার জন্য, আমরা একটি শুরুকে শীর্ষের দিকে নিয়ে যাই।

আপনি চাইলে ইউটিউবে একটি লাইভ স্ট্রিম তৈরি করতে পারেন এবং ইউটিউব ভিডিওর এম্বেড কোডটি আপনার নিজের সাথে প্রতিস্থাপন করুন।

ধাপ 15: Arduino কোড

ESP8266 একটি মৌলিক HTTP ক্লায়েন্ট উদাহরণ স্কেচ চালায় যা সামান্য পরিবর্তিত হয়, একটি API কলের মাধ্যমে আমার ওয়েবসাইট থেকে ডেটা গ্রহণ করে।

LED স্ট্রিপ নিয়ন্ত্রণের জন্য আপনাকে লাইব্রেরি ইনস্টল করতে হবে যদি আপনি একই ঠিকানা RGB স্ট্রিপ ব্যবহার করতে চান যা আমি করেছি।

github.com/adafruit/Adafruit-WS2801-Librar…

আমি যে স্কেচটি সংযুক্ত করেছি তাতে আপনাকে আপনার ওয়াই-ফাই নাম এবং পাসওয়ার্ড আপনার ওয়েবসাইটে একটি ইউআরএল (োকানো দরকার (মন্তব্যগুলি দেখুন)

আমরা মূলত একটি http রেসপন্সকে একটি C- টাইপ করা স্ট্রিং-এ রূপান্তর করি, তাই আমরা C ফাংশন strtok ব্যবহার করে স্ট্রিংটিকে কমা দ্বারা বিভক্ত করতে পারি এবং একটি সার্ভার থেকে পড়া মানগুলির সাথে leds টেবিলটি পূরণ করতে পারি। আমরা একটি ফাংশন কল করি যেখানে আমরা টেবিলের মধ্য দিয়ে যাই, এবং মানগুলির উপর ভিত্তি করে, আমরা ব্যবহারকারীর প্রত্যাশা অনুযায়ী সঠিক রঙটি চালু করি।

এটাই!

অভিনন্দন, আপনি এটি তৈরি করেছেন!

ধাপ 16: RGB LED চেইন

আহ ওহ. এখন সময় এসেছে সব কোডিং থেকে একটু বিরতি নেওয়ার:)

যেহেতু ESP8266- এ আলাদাভাবে LEDs নিয়ন্ত্রণ করার জন্য অনেক GPIO পিন নেই, তাই আমি এই ঠিকানা RGB LED চেইন ব্যবহার করেছি:

www.sparkfun.com/products/11020

এইভাবে, সমস্ত 20 আরজিবি এলইডি (মোট 60 টি এলইডি) শুধুমাত্র দুটি পিন - "ডেটা" এবং "ক্লক" এবং 5V পাওয়ার দ্বারা সরাসরি ESP8266 থেকে নিয়ন্ত্রণ করা যায়।

স্ট্রিপটিকে NodeMcu এর সাথে সংযুক্ত করা সহজ। NodeMcu এ 5V থেকে Vin (USB থেকে 5V), হলুদ তারের 12 টি পিন, 14 টি পিনের জন্য সবুজ তারের, স্থল থেকে মাটিতে।

আপনি পৃথক আরজিবি রঙ এবং উজ্জ্বলতা সেট করতে পারেন। কিছু রঙের মিশ্রণের সাথে, আপনি প্রতিটি LED এর জন্য প্রচুর রঙ তৈরি করতে পারেন।

এই এলইডিগুলির সাথে সব ধরণের শীতল এফএক্স প্রভাবের জন্য একটি খুব দুর্দান্ত লাইব্রেরিও রয়েছে। আপনি চাইলে এটি ব্যবহার করে দেখুন:

github.com/r41d/WS2801FX

ধাপ 17: ক্রিসমাস ট্রি সাজান

এটি সুন্দর করুন এবং নিশ্চিত করুন যে সমস্ত LEDs দৃশ্যমান এবং সুন্দরভাবে গাছের উপর ছড়িয়ে আছে।

ধাপ 18: চূড়ান্ত স্পর্শ

যখন আপনার গাছ প্রস্তুত থাকে, একটি সুন্দর ছবি তুলুন এবং ক্লিকযোগ্য অবস্থানের চিত্র মানচিত্র তৈরির ধাপটি পুনরাবৃত্তি করুন (LED অবস্থান)

এটি এলইডিগুলির সাথে ইন্টারফেস করার সবচেয়ে স্বজ্ঞাত উপায়।

আপনি যদি জটিল জিনিসগুলি করতে না চান তবে আপনি নিয়মিত বোতামগুলি ব্যবহার করতে পারেন।

আপনার ইউটিউবে আপনার গাছের একটি লাইভ স্ট্রিমও শুরু করা উচিত (যদি আপনি রিয়েল টাইমে কি হয় তা দেখতে চান) এবং আপনার সাইটে স্ট্রিমটি এম্বেড করুন।

ধাপ 19: আপনার ওয়েবসাইটের প্রশংসা করুন

আপনি যদি এতদূর তৈরি করেন তবে আপনি দুর্দান্ত:) আপনার বন্ধুদের (এবং অবশ্যই আমাকে: P) আমন্ত্রণ জানান এবং তাদের যতটা সম্ভব আপনার গাছে ক্লিক করুন:)

n

এটি একটি মোটামুটি জটিল প্রকল্পের জন্য একটি খুব দীর্ঘ নির্দেশযোগ্য ছিল। কিন্তু শেষ পর্যন্ত এটি মূল্যবান: ডি

ধন্যবাদ! আপনি যে বিষয়ে কাজ করছি তার সাথে যদি আপনি যোগাযোগ রাখতে চান:

আপনি আমার ইউটিউব চ্যানেলে সাবস্ক্রাইব করতে পারেন:

www.youtube.com/c/JTMakesIt

আপনি আমাকে ফেসবুক এবং ইনস্টাগ্রামেও অনুসরণ করতে পারেন

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

পর্দার আড়ালে এবং অন্যান্য এক্সট্রাগুলির জন্য আমি বর্তমানে যা কাজ করছি তার জন্য স্পয়লারদের জন্য! PS:।:)

www.buymeacoffee.com/JTMakesIt

এবং "যেকোনো কিছু যায়" প্রতিযোগিতায় এই নির্দেশের জন্য ভোট দিতে ভুলবেন না:)