আমাদের ওয়েব সার্ভারের সাথে গত সপ্তাহে একটি ব্যবসায়িক কার্ডের চাকরির সাথে কী করেছে? এটি একটি দৈত্য নেতৃত্বে গ্রাফিতি প্রাচীর ক্ষমতা। অ্যানিমেশন ব্যবহারকারীদের ইন্টারনেট ডিজাইনার ব্যবহার করা যেতে পারে। আপনি পাশাপাশি পৃথক অ্যানিমেশন একটি অনলাইন ফিড দেখতে পারেন। ইন্টারনেট ইন্টারফেসে সর্বাধিক স্কেলেবিলিটি এবং স্থিতিস্থাপকতার জন্য Google App ইঞ্জিনে চলছে।
আজকের কিভাবে আমরা আপনার নিজের নেটওয়ার্কযুক্ত গ্রাফিতি প্রাচীর নির্মাণের বাইরে সমস্ত আইএনএসগুলি আচ্ছাদন করি।
ধারণা ওভারভিউ
গ্রাফিতি ক্রমগুলি জাভাস্ক্রিপ্ট অ্যানিমেশন ডিজাইনারের সাথে ইন্টারনেটে ডিজাইন করা হয়েছে। সম্পূর্ণ ক্রম যা একটি ডাটাবেস রাখা হিসাবে বৈধ করা হয়; আমরা পিএইচপি / মাইএসকিউএল এবং গুগল অ্যাপস (পাইথন) এর জন্য ডাটাবেস ব্যাকএন্ডস তৈরি করেছি। ক্রম একটি সহজ তথ্যফিড API থেকে সিন্ডিকেট করা হয়। আমাদের মিনি ওয়েব সার্ভারটি ফিড থেকে অ্যানিমেশন সিকোয়েন্সগুলি পুনরুদ্ধার করে, সেইসাথে একটি এসডি কার্ডে তাদের ক্যাশে করে। অবশেষে, ক্রম একটি দৈত্য LED ম্যাট্রিক্স প্রদর্শিত হয়।
বড়, কম রেজোলিউশন প্রদর্শন
আমাদের গ্রাফিতি পর্দা একটি 1 মিটার বর্গ, 5 × 5 এর LED এর ম্যাট্রিক্স। এটি কয়েক বছর আগে আবাসস্থল দ্বারা দেওয়া ড্যাফ্ট পাঙ্ক কফি টেবিল দ্বারা প্রভাবিত হয়। Daft Punk টেবিলটি একটি DAFT পঙ্ক টেবিল নির্মাণের উপর এই চমৎকার নির্দেশাবলম্বী সহ অনেক DIY প্রতিলিপি তৈরি করে। সময়ের সাথে সাথে, আমাদের “ডাফ্ট প্যাঙ্ক টেবিল” ওয়াল-ঝুলন্তের মতো ধরণের ধরণের প্যাটার্নটি morphed। বড়, জ্বলন্ত আসবাবপত্র সরবরাহ করে, আমরা “daft পাঙ্ক টেবিল” চেয়ে অনেক ভাল শব্দ চেয়েছিলাম। আমরা ‘বড়, নিম্ন রেজোলিউশন ডিসপ্লে “বা শর্ট (উচ্চারিত’ লার্ড ‘) এর সাথে এলএলআরডি দিয়ে এসেছি।
মূল daft পাঙ্ক টেবিল এলোমেলোভাবে flashed, অথবা সঙ্গীত সময়। [ম্যাথিউ রনচেউ] এর প্রতিরূপ টেবিল একটি EEEPROM মধ্যে অ্যানিমেশন ক্রম রাখা। আমাদের খুব প্রথম শৈলীটি একটি ফ্যাট ফরম্যাটেড এসডি কার্ডে অ্যানিমেশন ডেটা সংরক্ষণ করে এটি একটি ধাপ এগিয়ে নিয়েছে। এখন, আমরা ইন্টারনেটের উপর ব্যবহারকারী-জমা অ্যানিমেশন ক্রমগুলি আনতে পারি তা নিশ্চিত করার জন্য আমরা ডিজাইনারকে ইন্টারনেটে রাখি।
অনলাইন ইন্টারফেস
এলএলআরডি এর জন্য গ্রাফিতি অ্যানিমেশনগুলি একটি সহজ জাভাস্ক্রিপ্ট ক্রম নির্মাতার সাথে উত্পাদিত হয়। ব্যবহারকারী-জমা অ্যানিমেশনের একটি অনলাইন ফিড দেখুন, অথবা এটি নিজেকে চেষ্টা করুন। GRAFFITI ক্রম ডিজাইনার এবং সেইসাথে ডেটা ব্যাকেন্ডে পিএইচপি / মাইএসকিউএল এবং গুগল অ্যাপ ইঞ্জিনের জন্য লিখিত, কাজের সংরক্ষণাগারটিতে অন্তর্ভুক্ত রয়েছে।
জাভাস্ক্রিপ্ট গ্রাফিতি ক্রম ডিজাইনার ব্যবহার করা সহজ:
আপনার অ্যানিমেশনের প্রতিটি ফ্রেমে দেখানো LEDs টগল করতে বাক্সগুলিতে ক্লিক করুন।
ফ্রেমের মধ্যে নেভিগেট করতে তীর বোতামগুলি ব্যবহার করুন।
ব্যাকআপ পাশাপাশি ব্যাক সরঞ্জামগুলি আনতে একটি পাঠ্য ফাইলের মধ্যে আপনার ক্রমটি সংরক্ষণ করার জন্য একটি সহজ পদ্ধতি সরবরাহ করে।
“পাঠ্য ফ্রেম যোগ করুন” একটি বিটম্যাপড ফন্ট ব্যবহার করে অক্ষর ফ্রেম সন্নিবেশ করান। আপনি যদি ডিফল্ট ফন্টটি অপছন্দ করেন তবে এটি একটি নতুন তৈরি করুন:
বিদ্যমান ফন্ট টন করতে ‘ফন্ট সম্পাদনা করুন’ বোতামে ক্লিক করুন।
আপনার পরিবর্তন করুন।
নতুন ফ্রেমের সাথে ডিফল্ট ফন্ট স্টাইলটি প্রতিস্থাপন করতে ‘আপডেট ফন্ট’ ক্লিক করুন।
ফন্ট স্টাইল অ্যারে এলসিআইআই-এর অক্ষরগুলির মধ্যে ASCII এর অক্ষরগুলির জন্য বিটম্যাপগুলির একটি সন্ধানযোগ্য টেবিল (ASCII অক্ষর 32 থেকে 90, “!” # $% এবং ‘() * * +, -। / 0123456789: * =>? @Abcdefghijklmnopqrstuvwxyz “)। স্থায়ীভাবে একটি নতুন ফন্ট শৈলী যুক্ত করতে, জাভাস্ক্রিপ্ট কোডে আপডেট হওয়া ফন্টেটটিকে ‘ফন্ট =’ পরিবর্তনশীলের সাথে মেনে চলার জন্য পেস্ট করুন। ব্যাকআপ বাক্সে “ফন্ট ফরম্যাট” পছন্দটি বিদ্যমান ফন্টের উপর পেস্ট করার জন্য প্রস্তুত করা পরিবর্তনশীল বিন্যাসিত বিটম্যাপ তৈরি করবে।
আপনি যখন একটি অ্যানিমেশন সম্পন্ন করেন, তখন লেখক বক্সের পাশাপাশি প্রেস জমা দিনে আপনার নামে যান। ক্রম কোড হিসাবে পাশাপাশি সার্ভারে পাঠানো হবে।
ইন্টারনেটে জাভাস্ক্রিপ্ট ভিত্তিক গ্রাফিতি ডিজাইনার [ম্যাথিউ রনচেইউউউ] দ্বারা অফলাইন সংস্করণ দ্বারা প্রভাবিত। [Mathieu] এর Delphi সোর্স কোড পাশাপাশি এক্সিকিউটেবল এখানে সংরক্ষণাগারভুক্ত করা হয়। আমাদের জাভাস্ক্রিপ্ট-ভিত্তিক ডিজাইনারের কয়েকটি অতিরিক্ত বৈশিষ্ট্য রয়েছে, ব্রাউজার-ভিত্তিক, পাশাপাশি এটি আপনাকে অজানা .exe ফাইল চালানোর প্রয়োজন নেই। যদিও এটি ওয়েবে চালানোর অর্থ, ডিজাইনারটি একইভাবে আপনার কম্পিউটারে একটি আঞ্চলিক কপি থেকে কাজ করবে।
স্ক্রিপ্টটি কোনও ধরনের ইচ্ছাকৃত ম্যাট্রিক্সের জন্য কাজ করবে, কেবলমাত্র আপনার এলএলআরডি এর মাত্রাগুলিতে ডিপিটিওসোলস ভেরিয়েবলগুলি সংশোধন করবে।
অনলাইন ভিউয়ার ব্যবহারকারী-জমা দেওয়া গ্রাফিতি অ্যানিমেশনের স্ট্রিমিং ফিড দেখানোর জন্য অ্যাসিঙ্ক্রোনাস HTTP (AJAX-ISH) ব্যবহার করার অনুরোধগুলি ব্যবহার করে। এটি একটি কুকি সেট করার চেষ্টা করবে যাতে এটি পৃষ্ঠাটি লোড প্রতিটি সময় নতুন ক্রম দিয়ে শুরু করতে পারে। আপনি যদি কুকি সক্ষম না করেন তবে এটি আপনার পরবর্তী পরিদর্শন শেষে 0 এ শুরু হবে।
ক্রম বিটম্যাপ বিন্যাস
ক্রম নির্মাতা একটি ASCII ফর্ম্যাট করা বিটম্যাপ হিসাবে প্রতিটি কলাম আউটপুট। প্রতিটি কলামের জন্য বিটম্যাপটি একটি স্থান দ্বারা পৃথক করা হয়, সেইসাথে প্রতিটি সম্পূর্ণ ফ্রেমটি একটি লাইন ফিড (এনআর) দিয়ে বাতিল করা হয়। এই শৈলীটি [ম্যাথিউ রনচেইউউ] এর PC Sequencer প্রোগ্রাম দ্বারা সংজ্ঞায়িত করা হয়েছিল, আমরা এটি পিছনে সামঞ্জস্য সংরক্ষণ রাখতে এটি রেখেছি।
বিটম্যাপ ডেটা ফ্রেমের উপরের বাম দিকের কোণে শূন্য হয়ে গেছে। প্রতিটি কলামের উপরের কোষগুলি বিট 0, পাশাপাশি নীচের কোষগুলি বিট 4. মৌলিক গণিতের নোটেশনটি মেনে চলার পাশাপাশি মূল বাম কোষটি মূল হিসাবে মূল বাম সেলটি ব্যবহার করার জন্য যুক্তিসঙ্গত বলে মনে হয় তবে আমরা স্পেসিফিকেশনটি স্টাইল না ।
মূল্য জন্যR প্রতিটি কলামটি একটি বাইনারি নম্বরের মধ্যে 1 টি LEDs চিকিত্সা দ্বারা আবিষ্কৃত হয়, পাশাপাশি দশমিক রূপান্তর করা হয়। উদাহরণস্বরূপ, উপরে প্রথম কলাম 10000 বাইনারি, বা 1 দশমিক। শেষ কলাম 11111 বাইনারি, বা দশমিক 31. আপনি ইন্টারনেট বাইনারি-দশমিক ক্যালকুলেটরটিতে একটি ব্যবহার করার জন্য আমাদের রূপান্তর নিশ্চিত করতে পারেন।
উল্লেখ্য যে কলাম বিটম্যাপগুলি প্রকৃত দশমিক মূল্যের ASCII সমতুল্য দ্বারা উপস্থাপিত হয়। সংখ্যাসূচক সংখ্যা ASCII স্ট্যান্ডার্ড অনুযায়ী এনকোড করা হয়, যা প্রকৃত মূল্য প্লাস 0x30h হয়। উপরন্তু, মাল্টি-ডিজিটের সংখ্যা ব্যক্তিগত অক্ষর হিসাবে রাখা হয়; ২4 উদাহরণস্বরূপ 0x32h, 0x34h হিসাবে রাখা হয়।
সার্ভার পার্শ্ব
ব্যাকএন্ডটি এমন একটি সহজ অংশ যা অ্যানিমেশন ক্রমগুলি গ্রহণ করে, কিছু বৈধতা গ্রহণ করে, পাশাপাশি তাদের ডাটাবেসের কাছে সংরক্ষণ করে। KEPFEED API থেকে REPEDENCE অ্যাক্সেসযোগ্য।
ব্যাকএন্ড
আমরা ব্যাকএন্ডের দুটি সংস্করণ রচনা করেছি; উভয় কাজের আর্কাইভ হয়। ইন্টারনেট এলএলআরডিগুলিতে কম ভলিউমের জন্য খুব প্রথম একটি সহজ পিএইচপি / মাইএসকিউএল ব্যাকএন্ড, অন্যটি একটি Google App ইঞ্জিন / পাইথন সংস্করণ যা একটি দিন পাঠকদের অনেক হ্যাক পরিচালনা করতে সক্ষম হওয়া উচিত।
আপনার পছন্দের প্ল্যাটফর্মের জন্য একটি ব্যাকএন্ড রচনা করা সত্যিই সহজ। Graffiti ডিজাইনার এর জমা আপনার ব্যাকএন্ডে নির্দেশ করার জন্য টাইপ অ্যাকশন টাইপ করুন; উভয় সংস্করণ বর্তমানে backend.php প্রকাশ। এখন, আপনার সার্ভারে ‘লেখক’ এবং সেইসাথে ‘SEQ’ ভেরিয়েবলগুলি ধরুন এবং সেইসাথে তাদের একটি ডাটাবেসের কাছে সংরক্ষণ করুন।
আমাদের ব্যাকএন্ড সিস্টেমে আক্রমণ প্রতিরোধ করার জন্য বৈধতা একটি বিট সঞ্চালন করে। আমরা পর্যায়গুলিতে চেকগুলি প্রয়োগ করেছি যাতে তারা অনেকগুলি সম্পদ হিসাবে নষ্ট করে না। প্রথমত, জমা দেওয়ার সাধারণ আকারটি তার কারণে নিশ্চিত করার জন্য পরিদর্শন করা হয়। পরবর্তী, ক্রমটি ব্যক্তিগত ফ্রেমগুলিতে বিভক্ত এবং প্রতিটি ফর্মের জন্য পরিদর্শন করা হয়। এটি বৈধতা পাস করে, এটি ডাটাবেস সংরক্ষণ করা হয়।
ফিড API.
ক্রম একটি সহজ তথ্যফিড API সঙ্গে অ্যাক্সেসযোগ্য। API দুটি ভেরিয়েবল আছে:
.
সর্বোচ্চ – পাঠানোর জন্য সর্বাধিক সংখ্যা।
শেষ – শেষ ক্রম পড়তে, শুধুমাত্র নতুন তথ্য পাঠানো হয়।
Datefeed অক্ষর ‘#’ এর সাথে প্রতিটি অ্যানিমেশন ক্রম শুরু করে, একটি আইডি নম্বরের পাশাপাশি লাইন ফিড দ্বারা মেনে চলছে। ‘#’ একটি অবৈধ বিটম্যাপ মান যা ক্লায়েন্টদের একটি নতুন ক্রম শুরুতে সতর্ক করে। প্রতিটি পুলের উপর তাজা ক্রম পেতে API এর শেষ পরিবর্তনশীলের সাথে আইডি নম্বরটি ব্যবহার করতে পারেন।
হার্ডওয়্যার
মিনি ওয়েব সার্ভার
আমরা এই প্রকল্পের জন্য টিসিপি সক্ষম ক্লায়েন্ট হিসাবে আমাদের PIC24F মিনি ওয়েব সার্ভারটি ব্যবহার করেছি। ওয়েব সার্ভারটি কীভাবে বিকাশ করতে ঠিক তা আবিষ্কার করতে আমাদের পূর্ববর্তী নিবন্ধগুলি পরীক্ষা করে দেখুন।
Daft পঙ্ক টেবিল
[Mrgalleta] একটি daft পঙ্ক টেবিল প্রতিরূপ প্রকৃত টেবিল অংশ জন্য একটি চমত্কার বিল্ডিং টিউটোরিয়াল আছে। একটি এলএলআরডি অনেক ফর্ম নিতে পারে, যদিও, যেমন আমাদের প্রাচীর ঝুলন্ত।
ডাফ্ট পাঙ্ক টেবিল প্রতিরূপ শৈলীগুলির বেশিরভাগই 74hct595 (পিডিএফ) আউটপঞ্জের পাশাপাশি ULN2803A (পিডিএফ) ট্রানজিস্টার অ্যারে দ্বারা পরিচালিত হয়। এই শিক্ষামূলক থেকে ড্রাইভার বোর্ড উভয় একটি সহজ-টু-ইটচ, গর্ত পিসিবি মধ্যে একত্রিত করে। প্রতিটি ড্রাইভার বোর্ড দুটি 74htc595s, বা 16 আউটপুট আছে; আমাদের ২5 টি সেল এলএলআরডি-এর জন্য আমাদের দুটি ড্রাইভার বোর্ড দরকার।
74 HCT595 একটি সিরিয়াল আউটপুট Expander যা একটি SPI- মত ইন্টারফেস দ্বারা পরিচালিত হয়। একটি আপডেট ল্যাচ লাইন ড্রপ দ্বারা শুরু হয়। প্রতিটি LED (অন বা বন্ধ) নির্দিষ্ট করে ডাটা লাইনে রাখা হয়, ঘড়ির একটি পালস দ্বারা মেনে চলুন। ল্যাচ সংকেত উচ্চ ফিরে যখন বিট আউটপুট পিন করা হয়। ডেটা ডেটা-আউটপুট পিন থেকে 595 এর ডাটা-আউটপুট পিন থেকে, পরবর্তীটির ডাটা-ইনপুট পর্যন্ত। এই ডিভাইসটি ইন্টারফেসে একটি বিস্তারিত বর্ণন জন্য এই 74xx595 টিউটোরিয়ালটি পরীক্ষা করে দেখুন।
এটি উল্লেখ্য যে আমরা 74 hct595, সেইসাথে 74HC595 ব্যবহার করি না। “এইচটিসিটি” অংশটি বিভিন্ন ধরণের ভোল্টেজের উপর কাজ করে, যা মিনি ওয়েব সার্ভারের অপারেটিং ভোল্টেজ: 3.3 ভোল্টস।
74HCT595 উত্স বর্তমান, যার অর্থ আমরা সম্ভবত 3.3 ভল্টগুলিতে প্রতিটি আউটপুট থেকে সরাসরি একটি একক LED চালাতে পারি। যেহেতু বেশিরভাগ এলএলআরডিএস প্রতি কক্ষে 2-8 LEDs থাকে, তাই 5 পাশাপাশি ২4 ভল্টগুলির মধ্যে অপারেটিং হয়, আমরা বড় লোডটি স্যুইচ করতে একটি ULN2803A ট্রানজিস্টার অ্যারে ব্যবহার করি। Uln2803A এটি sourcing চেয়ে বরং বর্তমান sinks; এটি পাওয়ার পরিবর্তে LEDs এর স্থল সংযোগটি সুইচ করে।
আমাদের এলএলআরডি প্রতি কক্ষে দুটি LEDs আছে, একটি 5 ভোল্ট সরবরাহ পাশাপাশি 56hm প্রতিরোধক সঙ্গে 20mA এ চলমান। আমরা ২5 টি ছোট সার্কিট বোর্ডগুলি খোলার পরিবর্তে পিচবোর্ডের একটি অংশের চারপাশে LEDs বিক্রি করেছি।
সংযোগসমূহ
মিনি ওয়েব সার্ভারের মধ্যে একটি 5 তারের সংযোগ পাশাপাশি ড্রাইভার বোর্ডগুলি LLRD নিয়ন্ত্রণ করে।
সার্ভার
Llrd.
বর্ণনা
V +
Vsys.
3.395 এর জন্য 3.3volt সরবরাহ।
GND.
GND.
শেয়ার্ড স্থল সংযোগ।
RA0.
তথ্য মধ্যে তথ্য
তথ্য সংকেত।
RA1.
ঘড়ি
ঘড়ি সংকেত।
RB15.
ল্যাচ
ল্যাচ সংকেত।
–
Vled.
LED পাওয়ার সাপ্লাই।
ফার্মওয়্যার
আমাদের ফার্মওয়্যারটি এমপ্লাবের পাশাপাশি মাইক্রোচিপ সি 30 ডেমো কম্পাইলার ব্যবহার করে সিটিতে লেখা হয়। প্রোগ্রামিংয়ের পাশাপাশি PIC24F এর সাথে আমাদের প্রারম্ভিক টিউটোরিয়ালে কাজ করার সাথে সাথে আরও জানুন। দুই ফার্মওয়্যার সংস্করণ কাজ আর্কাইভ অন্তর্ভুক্ত করা হয়। খুব প্রথমটি কেবলমাত্র সব *। SD কার্ড থেকে SEQ ক্রম তথ্যটি পড়ুন, দ্বিতীয় সংস্করণটি ওয়েব সংযোগের জন্য মাইক্রোচিপ টিসিপি / আইপি স্ট্যাক যুক্ত করে। ডিscover more about the Microchip SD card as well as TCP/IP libraries in our mini web server tutorial.
All graphics functions, including the TCP client, can be discovered in graffitigfx.c. The TCP client is based on the generic TCP client example that’s included with the TCP/IP stack. We complied with Microchip’s cooperative multitasking approach as well as broke our code into little segments that share CPU time with the rest of the TCP/IP stack.
The client regularly links to the datafeed as well as requests new sequences. new sequences are parsed for ID numbers, as well as appended to a temporary data on the SD card. The last ID detected is written to the extremely end of the temporary data file, as well as is appended to the last variable of the URL on subsequent datafeed requests. We record the ID at the end of the data to prevent repeated composes to the exact same sector on the SD card. ideally wear leveling inside a 1GB SD card is adequate to prevent issues for the very first few decades of use. If no network connection is available, the gadget plays any type of *.seq data in the root directory of the SD card.
A parser function decodes frames as well as sends them to the LLRD. The parser is relatively robust to errors. poor data that makes it past the backend validation routine will be rejected at the gadget level without sick effect. If a few corrupt frames do handle to display, it’ll barely be noticed amongst the other abstract patterns playing on the wall.
1.
2.
3.
#define GFX_USE_TCP_CLIENT //include the TCP client
#define GFX_TCP_ONLY //only do TCP as well as checked out temp file, don’t checked out other data on the SD card.
#define GFX_CLEAR_TEMP_ON_RESET //optionally delete the temp data on reset. great for Google app Engine…
Three defines at the beginning of graffitigfx.c manage which features are included at compile time. GFX_USE_TCP_CLIENT compiles the firmware with the TCP client enabled, comment this meaning for a SD card only version of the firmware. GFX_TCP_ONLY ignores any type of .seq data on the SD card, as well as only plays sequences downloaded from the web. The GFX_CLEAR_TEMP_ON_RESET choice will delete the temporary sequence data on each reset; this is useful for databases that have non-sequential record IDs, like Google’s datastore. In the future, these definitions might be altered to variables that are set by a configuration data on the SD card.
Taking it further
Our simple firmware is a steady starting point for an on the internet graffiti wall. While we were working on this job we came up with a ton of extra features that didn’t make it into the prototype.
Display IP address on startup.
A configuration data on the SD card that sets the datafeed url, refresh frequency, as well as other variables.
A telnet or web interface for remote configuration.
A TCP server for direct gain access to to the display; push animation frames from a remote PC.
A mail client that reports errors as well as condition information.
Progress messages during startup as well as sequence downloads. SD card not present/full errors.
Scrolling Twitter feeds.
আপনার চিন্তাগুলো?
Don’t just checked out about this project, contribute some frames to the graffiti wall.
Next time we’ll introduce our final PIC24F project, an ethernet backpack for the small $20 color Nokia LCD knock-off from SparkFun Electronics.