કોડ શોધો

ESP32-S3 RGB LED મેટ્રિક્સ પ્રોજેક્ટ 3 - મોબાઇલ ફોનમાંથી ટેક્સ્ટ

YouTube પર જુઓ

ESP32-S3 RGB LED મેટ્રિક્સ પ્રોજેક્ટ 3 - મોબાઇલ ફોનમાંથી ટેક્સ્ટ

પ્રોજેક્ટ 3 – તમારા ફોનથી મેટ્રિક્સ ટેક્સ્ટ નિયંત્રિત કરો (HTTP ટેક્સ્ટ)

આ પ્રોજેક્ટમાં ESP32-S3 RGB LED મેટ્રિક્સ એક નાનું વેબ પેજ હોસ્ટ કરે છે જેથી તમે સ્ક્રોલિંગ ટેક્સ્ટ, રંગ, દિશા અને ઝડપ સીધા તમારા ફોન અથવા કમ્પ્યુટરથી બદલી શકો. તમારે અલગ એપ્લિકેશનની જરૂર નથી – ફક્ત વેબ બ્રાઉઝરની જરૂર છે. આ મોડ્યુલને એક નાનું Wi-Fi ટેક્સ્ટ ડિસ્પ્લે બનાવે છે જે તમે રીઅલ-ટાઇમમાં અપડેટ કરી શકો છો.

આ શ્રેણીના તમામ છ પ્રોજેક્ટ્સ એક YouTube વિડિઓમાં સમજાવવામાં અને દર્શાવવામાં આવ્યા છે. આ જ વિડિઓ આ પેજ પર એમ્બેડ કરેલી છે, જેથી તમે બરાબર જોઈ શકો કે વેબ ઇન્ટરફેસ કેવું દેખાય છે અને ટેક્સ્ટ મેટ્રિક્સ પર તરત કેવી રીતે અપડેટ થાય છે. આ પ્રોજેક્ટનો સંપૂર્ણ સોર્સ કોડ લેખની નીચે આપમેળે લોડ થાય છે, અને તમે કોડ વિભાગ હેઠળ સૂચિબદ્ધ એફિલિએટ સ્ટોર્સમાંથી ESP32-S3 RGB LED મેટ્રિક્સ મોડ્યુલ ખરીદી શકો છો.

આ લેખમાં આપણે ધ્યાન કેન્દ્રિત કરીએ છીએ કે નેટવર્ક લોજિક કેવી રીતે કાર્ય કરે છે (હોમ Wi-Fi વિરુદ્ધ એક્સેસ પોઇન્ટ) અને વર્તણૂક કસ્ટમાઇઝ કરવા માટે તમે કોડમાં કઈ સેટિંગ્સ બદલી શકો છો.

ESP32-S3 RGB LED મેટ્રિક્સ મોડ્યુલ ઝાંખી

હાર્ડવેર આ શ્રેણીના અન્ય તમામ પ્રોજેક્ટ્સ જેવું જ છે: એક ESP32-S3 માઇક્રોકન્ટ્રોલર બોર્ડ જેમાં બિલ્ટ-ઇન 8×8 RGB LED મેટ્રિક્સ અને પાછળ QMI8658C મોશન સેન્સર છે. USB-C પોર્ટ પાવર અને પ્રોગ્રામિંગ માટે વપરાય છે, અને કિનારીઓની આસપાસના પિન અન્ય IO માટે હજુ પણ ઉપલબ્ધ છે.:contentReference[oaicite:0]{index=0}

  • ESP32-S3 – Wi-Fi અને બ્લૂટૂથ સક્ષમ માઇક્રોકન્ટ્રોલર.
  • 8×8 RGB મેટ્રિક્સ – ટેક્સ્ટ અને ગ્રાફિક્સ માટે 64 એડ્રેસેબલ RGB LED.
  • QMI8658C એક્સેલેરોમીટર – ટિલ્ટ અને ગેમ પ્રોજેક્ટ્સમાં વપરાય છે.
  • USB પોર્ટ – બોર્ડને પાવર આપે છે અને Arduino IDE થી સ્કેચ અપલોડ કરે છે.
  • ખુલ્લા પિન – જરૂર પડ્યે વધારાના સેન્સર અથવા એક્ટ્યુએટર્સ માટે પરવાનગી આપે છે.
  • બૂટ/રીસેટ બટનો – ફર્મવેર અપલોડ અને રીસ્ટાર્ટ માટે.

પ્રોજેક્ટ 3 માટે, સૌથી મહત્વપૂર્ણ સુવિધા ESP32 નું Wi-Fi છે, જે બોર્ડને ટેક્સ્ટ કંટ્રોલ પેજ માટે એક નાના વેબ સર્વર તરીકે કાર્ય કરવા દે છે.:contentReference[oaicite:1]{index=1}

વિડિઓમાં આવરી લેવાયેલા પ્રોજેક્ટ્સ (ટાઇમસ્ટેમ્પ્સ)

આ શ્રેણી માટેની એક વિડિઓ તમામ છ પ્રોજેક્ટ્સને આવરી લે છે. ઝડપી સંદર્ભ માટે:

  • 00:00 – પરિચય
  • 02:01 – ESP32 બોર્ડ્સ ઇન્સ્ટોલ કરવું
  • 03:32 – લાઇબ્રેરીઓ ઇન્સ્ટોલ કરવી
  • 05:32 – પ્રોજેક્ટ 1: મૂવિંગ ડોટ
  • 11:11 – પ્રોજેક્ટ 2: ટેક્સ્ટ સ્ક્રોલ
  • 12:59 – પ્રોજેક્ટ 3: HTTP ટેક્સ્ટ (આ પ્રોજેક્ટ)
  • 16:41 – પ્રોજેક્ટ 4: ટિલ્ટ ડોટ
  • 18:55 – પ્રોજેક્ટ 5: એરો અપ
  • 20:02 – પ્રોજેક્ટ 6: ટાર્ગેટ ગેમ

આ લેખ સાથે કામ કરતી વખતે તમને વિડિઓમાં HTTP ટેક્સ્ટ વિભાગ જોવા પ્રોત્સાહિત કરવામાં આવે છે. વિડિઓ બતાવે છે કે ESP32 દ્વારા વેબ પેજ કેવી રીતે જનરેટ થાય છે અને ટેક્સ્ટ, રંગ અને ઝડપ બદલવાથી LED મેટ્રિક્સ પર તરત કેવી રીતે પ્રતિબિંબિત થાય છે.:contentReference[oaicite:2]{index=2}

Arduino IDE માં ESP32 બોર્ડ્સ ઇન્સ્ટોલ કરવું

જો તમે પહેલાથી પ્રોજેક્ટ્સ 1 અથવા 2 પૂર્ણ કર્યા છે, તો બોર્ડ સેટઅપ થઈ ગયું છે અને તમે આ વિભાગ છોડી શકો છો. અન્યથા, Arduino IDE માં આ પગલાંઓ અનુસરો:

  1. ફાઇલ > પસંદગીઓ ખોલો અને “વધારાના બોર્ડ્સ મેનેજર URL” માં ESP32 બોર્ડ્સ URL ઉમેરો.
  2. ટૂલ્સ > બોર્ડ > બોર્ડ્સ મેનેજર… પર જાઓ, ESP32 શોધો અને સત્તાવાર ESP32 પેકેજ ઇન્સ્ટોલ કરો.
  3. ટૂલ્સ > બોર્ડ માંથી યોગ્ય ESP32-S3 RGB મેટ્રિક્સ બોર્ડ પસંદ કરો.
  4. મોડ્યુલને USB દ્વારા કનેક્ટ કરો અને ટૂલ્સ > પોર્ટ હેઠળ યોગ્ય સીરિયલ પોર્ટ પસંદ કરો.

યોગ્ય ESP32 બોર્ડ સપોર્ટ અને સાચા પોર્ટ વિના, વેબ-સર્વર સ્કેચ અપલોડ થશે નહીં.

NeoMatrix અને જરૂરી લાઇબ્રેરીઓ ઇન્સ્ટોલ કરવી

આ પ્રોજેક્ટ અગાઉના ટેક્સ્ટ સ્ક્રોલ પ્રોજેક્ટ જેવી જ લાઇબ્રેરીઓનો ઉપયોગ કરે છે:

  • Adafruit NeoMatrix
  • Adafruit NeoPixel
  • Adafruit GFX લાઇબ્રેરી

લાઇબ્રેરી મેનેજર દ્વારા ઇન્સ્ટોલ કરો:

  1. સ્કેચ > લાઇબ્રેરી શામેલ કરો > લાઇબ્રેરીઓ મેનેજ કરો… ખોલો.
  2. Adafruit NeoMatrix શોધો અને ઇન્સ્ટોલ પર ક્લિક કરો.
  3. ડિપેન્ડન્સીઝની ઇન્સ્ટોલેશન સ્વીકારો (Adafruit GFX અને Adafruit NeoPixel).

ઇન્સ્ટોલ થયા પછી, તમારે ફાઇલ > ઉદાહરણો હેઠળ NeoMatrix અને NeoPixel ઉદાહરણ સ્કેચ જોવા જોઈએ.

પ્રોજેક્ટ 3 માં બે Wi-Fi મોડ્સ

આ પ્રોજેક્ટમાં સૌથી મહત્વપૂર્ણ ખ્યાલ એ છે કે ESP32 બે અલગ મોડ્સમાં કાર્ય કરી શકે છે:

  1. સ્ટેશન (STA) મોડ – ESP32 તમારા હાલના હોમ Wi-Fi નેટવર્ક સાથે કનેક્ટ થાય છે.
  2. એક્સેસ પોઇન્ટ (AP) મોડ – જો હોમ Wi-Fi ઉપલબ્ધ ન હોય તો ESP32 પોતાનું Wi-Fi નેટવર્ક બનાવે છે.

બંને મોડ્સ સમાન વેબ ઇન્ટરફેસનો ઉપયોગ કરે છે: ESP32 થી જ સેવા અપાતું HTML પેજ, જ્યાં તમે ટેક્સ્ટ, રંગ, સ્ક્રોલ દિશા અને ઝડપ બદલી શકો છો.:contentReference[oaicite:3]{index=3}

મોડ 1 – હોમ Wi-Fi સાથે કનેક્ટ થાઓ (સ્ટેશન મોડ)

સ્ટેશન મોડમાં, ESP32 તમારા હોમ અથવા ઓફિસ Wi-Fi નેટવર્ક સાથે જોડાય છે. જ્યારે પણ તમારું રાઉટર ઉપલબ્ધ હોય ત્યારે આ પસંદગીનો મોડ છે કારણ કે:

  • તમારા ફોન અને કમ્પ્યુટર પહેલાથી જ સમાન Wi-Fi નેટવર્ક સાથે કનેક્ટેડ છે.
  • તમે તમારા બ્રાઉઝરને ESP32 ના IP સરનામા પર નિર્દેશ કરી શકો છો અને તે નેટવર્ક પરના કોઈપણ ઉપકરણથી ટેક્સ્ટ નિયંત્રિત કરી શકો છો.

સ્કેચના સેટિંગ્સ વિભાગમાં, તમે તમારું Wi-Fi SSID અને પાસવર્ડ પ્રદાન કરો છો:


// હોમ વાઇ-ફાઇ ઓળખપત્રો (સ્ટેશન મોડ)
const char* WIFI_SSID = "YourHomeWiFi";
const char* WIFI_PASS = "YourHomePassword";

બોર્ડ બૂટ થયા પછી, તે WIFI_SSID સાથે કનેક્ટ થવાનો પ્રયાસ કરે છે. જો સફળ થાય, તો કોડ સોંપેલ IP સરનામું સીરિયલ મોનિટર પર છાપે છે, ઉદાહરણ તરીકે:


Connected to WiFi
IP address: 192.168.1.16

ટેક્સ્ટ નિયંત્રિત કરવા માટે:

  1. ખાતરી કરો કે તમારો ફોન અથવા PC એ જ વાઇ-ફાઇ નેટવર્ક સાથે કનેક્ટેડ છે (ઉદાહરણ તરીકે, YourHomeWiFi).
  2. બ્રાઉઝર ખોલો અને છાપેલું IP સરનામું દાખલ કરો, જેમ કે http://192.168.1.16/.
  3. નિયંત્રણ પૃષ્ઠ દેખાશે, જે તમને ટેક્સ્ટ લખવા, રંગ પસંદ કરવા, દિશા પસંદ કરવા અને સ્ક્રોલ ઝડપ ગોઠવવાની મંજૂરી આપશે.

મોડ 2 – સ્ટેન્ડઅલોન એક્સેસ પોઇન્ટ (AP મોડ)

જો ESP32 તમારા હોમ વાઇ-ફાઇ સાથે કનેક્ટ થઈ શકતું નથી (ખોટો પાસવર્ડ, નેટવર્ક ઉપલબ્ધ નથી, અથવા તમે મોડ્યુલ બહાર ઉપયોગ કરી રહ્યા છો), તો સ્કેચ આપમેળે એક્સેસ પોઇન્ટ મોડમાં પાછું આવે છે. AP મોડમાં, ESP32 પોતે તેના પોતાના નેટવર્ક નામ અને પાસવર્ડ સાથે વાઇ-ફાઇ હોટસ્પોટ બને છે.

આ પ્રોજેક્ટમાં, AP સેટિંગ્સ નિશ્ચિત છે:


// એક્સેસ પોઇન્ટ (AP) ઓળખપત્રો (ફોલબેક મોડ)
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

જ્યારે સ્ટેશન મોડ નિષ્ફળ જાય છે, ત્યારે મોડ્યુલ AP મોડમાં સ્વિચ થાય છે અને ESP32 નામનું વાઇ-ફાઇ નેટવર્ક પ્રસારિત કરવાનું શરૂ કરે છે. મેટ્રિક્સ નિયંત્રિત કરવા માટે:

  1. તમારા ફોન અથવા કમ્પ્યુટર પર, વાઇ-ફાઇ સેટિંગ્સ ખોલો અને ESP32 નેટવર્ક સાથે કનેક્ટ થાઓ.
  2. પાસવર્ડ password દાખલ કરો (કોડમાં વ્યાખ્યાયિત મુજબ).
  3. કનેક્ટ થયા પછી, બ્રાઉઝર ખોલો અને http://192.168.4.1/ પર જાઓ (ESP32 AP મોડ માટે ડિફોલ્ટ IP).
  4. સમાન નિયંત્રણ પૃષ્ઠ દેખાય છે, જે તમને ટેક્સ્ટ, રંગ, ઝડપ અને દિશા બદલવાની મંજૂરી આપે છે.

આ ફોલબેક વર્તન પ્રોજેક્ટને ગમે ત્યાં ઉપયોગી બનાવે છે: ઘરે, લેબમાં, અથવા ડેમો વાતાવરણમાં જ્યાં કોઈ રાઉટર ઉપલબ્ધ નથી.

પ્રોજેક્ટ 3 – કોડમાં મુખ્ય સેટિંગ્સ

સંપૂર્ણ HTTP ટેક્સ્ટ સ્કેચ આ લેખની નીચે વેબસાઇટ દ્વારા લોડ કરવામાં આવ્યો છે. અહીં અમે ફક્ત સૌથી મહત્વપૂર્ણ રૂપરેખાંકન વિકલ્પો દસ્તાવેજ કરીએ છીએ જે તમે સંપાદિત કરી શકો છો.

વાઇ-ફાઇ અને એક્સેસ પોઇન્ટ સેટિંગ્સ

સ્કેચની ટોચ પર તમને વાઇ-ફાઇ રૂપરેખાંકન વિભાગ મળશે. ફક્ત સ્ટેશન (હોમ વાઇ-ફાઇ) ઓળખપત્રો બદલો; AP સેટિંગ્સ સામાન્ય રીતે ડિફોલ્ટ તરીકે રાખવામાં આવે છે:


// ---------- વાઇ-ફાઇ સેટિંગ્સ ----------

// હોમ વાઇ-ફાઇ (સ્ટેશન મોડ)
const char* WIFI_SSID = "YourHomeWiFi";      // તમારું રાઉટર SSID અહીં મૂકો
const char* WIFI_PASS = "YourHomePassword";  // તમારો રાઉટર પાસવર્ડ અહીં મૂકો

// ફોલબેક એક્સેસ પોઇન્ટ (AP મોડ)
const char* AP_SSID = "ESP32";               // નિશ્ચિત AP નામ
const char* AP_PASS = "password";            // નિશ્ચિત AP પાસવર્ડ

વર્તન:

  • જો WIFI_SSID અને WIFI_PASS સાચા હોય અને નેટવર્ક ઉપલબ્ધ હોય → ESP32 સામાન્ય વાઇ-ફાઇ ઉપકરણ તરીકે કનેક્ટ થાય છે (સ્ટેશન મોડ).
  • જો ટાઇમઆઉટ પછી કનેક્શન નિષ્ફળ જાય → ESP32 AP_SSID અને AP_PASS નો ઉપયોગ કરીને પોતાનું AP શરૂ કરે છે.

મેટ્રિક્સ પિન, કદ અને તેજ

આ સેટિંગ્સ અગાઉના પ્રોજેક્ટ્સ જેવી જ છે:


// મેટ્રિક્સ રૂપરેખાંકન
const int MATRIX_PIN    = 14;   // RGB મેટ્રિક્સ ડેટા પિન
const int MATRIX_WIDTH  = 8;
const int MATRIX_HEIGHT = 8;

// એકંદર ડિસ્પ્લે તેજ (0–255)
uint8_t matrixBrightness = 40;  // તમારા વાતાવરણ માટે ગોઠવો

આ બોર્ડ માટે MATRIX_PIN ને 14 પર રાખો. જો તમને વધુ પ્રકાશની જરૂર હોય તો તમે matrixBrightness વધારી શકો છો, પરંતુ નજીકથી જોવા માટે ઓછા મૂલ્યો વધુ આરામદાયક છે.

ડિફોલ્ટ ટેક્સ્ટ અને સ્ક્રોલ સેટિંગ્સ

જ્યારે બોર્ડ શરૂ થાય છે, ત્યારે તે પ્રારંભિક સંદેશ દર્શાવે છે જ્યાં સુધી તમે વેબ પૃષ્ઠ ખોલીને નવું લખો નહીં. તમે રૂપરેખાંકનમાં ડિફોલ્ટ ટેક્સ્ટ બદલી શકો છો:


// શરૂઆતમાં દર્શાવેલ ડિફોલ્ટ સંદેશ
String currentText = "Robojax";   // પછીથી વેબ UI થી ઓવરરાઇટ કરો

બાકીનું સ્ક્રોલ વર્તન ચલોના સમૂહ દ્વારા નિયંત્રિત થાય છે જે વેબ ઇન્ટરફેસ દ્વારા અપડેટ થાય છે:


// સ્ક્રોલ વિલંબ મિલિસેકંડમાં (ઓછું = ઝડપી)
int scrollDelayMs = 50;

// સ્ક્રોલ દિશા: 0=ડાબે, 1=જમણે, 2=ઉપર, 3=નીચે
int scrollDirection = 0;   // ડિફોલ્ટ: ડાબે સ્ક્રોલ કરો

વેબ પૃષ્ઠ સ્લાઇડર અને બટન પસંદગીઓના આધારે નવા મૂલ્યો મોકલે છે. આર્ડુઇનો બાજુથી, તમારે ફક્ત જાણવાની જરૂર છે કે:

  • scrollDelayMs ઘટાડવાથી ટેક્સ્ટ ઝડપથી ખસે છે.
  • scrollDelayMs વધારવાથી તે ધીમું ખસે છે.
  • scrollDirection બદલવાથી ડાબે, જમણે, ઉપર અથવા નીચે સ્ક્રોલ મોડ્સ વચ્ચે સ્વિચ થાય છે.

ટેક્સ્ટ રંગ (વેબ પૃષ્ઠથી નિયંત્રિત)

ટેક્સ્ટનો રંગ ત્રણ 0–255 મૂલ્યો (લાલ, લીલો, વાદળી) દ્વારા નિયંત્રિત થાય છે. જ્યારે પણ તમે વેબ પૃષ્ઠ પર નવો રંગ પસંદ કરો ત્યારે તે અપડેટ થાય છે:


// વર્તમાન ટેક્સ્ટ રંગ (R, G, B)
uint8_t textRed   = 255;
uint8_t textGreen = 255;
uint8_t textBlue  = 255;

જ્યારે તમે બ્રાઉઝરમાં રંગ પસંદ કરો અને લાગુ કરો પર ક્લિક કરો, ત્યારે ESP32 RGB મૂલ્યો પાર્સ કરે છે અને આ ત્રણ ચલો અપડેટ કરે છે; ટેક્સ્ટ તરત જ મેટ્રિક્સ પર રંગ બદલે છે. વિડિઓમાં, આ વર્તન બહુવિધ રંગ ફેરફારો સાથે દર્શાવવામાં આવ્યું છે, જેમાં લાલ, લીલો અને વાદળી ઉદાહરણો શામેલ છે.

સારાંશ

પ્રોજેક્ટ 3 તમારા ESP32-S3 RGB LED મેટ્રિક્સને સંપૂર્ણ વાયરલેસ ટેક્સ્ટ ડિસ્પ્લેમાં ફેરવે છે જે તમે વેબ બ્રાઉઝર ધરાવતા કોઈપણ ઉપકરણથી નિયંત્રિત કરી શકો છો. સ્કેચ મજબૂત બનાવવા માટે ડિઝાઇન કરવામાં આવ્યું છે:

  • તે પહેલા તમારા ઘરના Wi-Fi સાથે જોડાવાનો પ્રયાસ કરે છે, જે SSID અને પાસવર્ડનો ઉપયોગ કરીને તમે ગોઠવ્યા છે.
  • જો તે નિષ્ફળ જાય, તો તે આપમેળે ESP32 નામ અને password પાસવર્ડ સાથે એક એક્સેસ પોઈન્ટ બની જાય છે.
  • બંને સ્થિતિઓમાં, બ્રાઉઝરમાં યોગ્ય IP સરનામું ખોલવાથી ટેક્સ્ટ, રંગ, દિશા અને ઝડપ માટે સમાન નિયંત્રણ પૃષ્ઠ દેખાય છે.

સંપૂર્ણ HTTP ટેક્સ્ટ કોડ આ લેખની નીચે ઉપલબ્ધ છે (વેબસાઇટ પર આપમેળે લોડ થાય છે). ટેક્સ્ટ કેવી રીતે રીઅલ ટાઇમમાં અપડેટ થાય છે તેની સંપૂર્ણ પગલું-દર-પગલાની સમજૂતી અને લાઇવ પ્રદર્શન માટે, વિડિયોના પ્રોજેક્ટ 3 વિભાગને ચોક્કસપણે જુઓ. જો તમે આ પ્રોજેક્ટ જાતે બનાવવા માંગો છો, તો તમે કોડની નીચે સૂચિબદ્ધ એફિલિએટ લિંક્સનો ઉપયોગ કરીને ESP32-S3 RGB LED મેટ્રિક્સ મોડ્યુલ પણ ખરીદી શકો છો.

છબીઓ

ESP32 S3 Matrix
ESP32 S3 Matrix
ESP32 S3 Matrix pin out
ESP32 S3 Matrix pin out
ESP32-S3_RGB_8x8_matrix-3
ESP32-S3_RGB_8x8_matrix-3
ESP32 S3 Matrix displaying rainbow heart
ESP32 S3 Matrix displaying rainbow heart
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3 RGB Matrix- Mobile Phone Text
ESP32-S3 RGB Matrix- Mobile Phone Text

આ ટ્યુટોરિયલ આનો ભાગ છે: ESP32-S3 RGB LED મેટ્રિક્સ

જો કોડ દેખાતો નથી, તો કૃપા કરીને આ પૃષ્ઠ અંગ્રેજીમાં જુઓ. અસુવિધા માટે અમે દિલગીર છીએ.
801-ESP32-S3 RGB LED Matrix Project 3 - Text from mobile phone
ભાષા: C++
/*
  Project 4: HTTP Text Scroll – ESP32-S3 RGB LED Matrix (Waveshare)

  - Connects to your home WiFi (station mode, with AP fallback).
  - Serves a web page where you can set:
      * Text
      * Color
      * Display ON/OFF
      * Scroll direction (Left / Right / Up / Down)
      * Scroll delay (speed)
  - Supports 8×8 RGB LED matrix using Adafruit_NeoMatrix.

  ▶️ Video Tutorial:
  https://youtu.be/JKLuYrRcLMI

  📄 Resources & Code Page:
  https://robojax.com/your-resources-page-here

  HTTP_Text_Scroll
*/

#include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>

#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

// ======================= WIFI SETTINGS =========================
// Home WiFi (change these to your router credentials)
const char* WIFI_SSID = "Biseem";
const char* WIFI_PASS = "wan9&Jang~";

// Fallback Access Point
const char* AP_SSID = "ESP32";
const char* AP_PASS = "password";

// ======================= MATRIX SETTINGS =======================

#define MATRIX_PIN    14
#define MATRIX_WIDTH  8
#define MATRIX_HEIGHT 8

// 0, 1, 2, or 3 – adjust if text orientation is wrong with USB up
#define MATRIX_ROTATION 0
#define BRIGHTNESS 15

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(
  MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN,
  NEO_MATRIX_TOP + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB + NEO_KHZ800
);

// ======================= SCROLL STATE ==========================

enum ScrollDir {
  DIR_LEFT = 0,
  DIR_RIGHT,
  DIR_UP,
  DIR_DOWN
};

String   scrollText  = "Robojax";
uint16_t textColor   = 0xFFFF;  // default white
bool     displayOn   = true;
ScrollDir currentDir = DIR_LEFT;

// 1 step every this many ms (lower = faster)
unsigned long scrollInterval = 80;
unsigned long lastScrollTime = 0;

// Horizontal scroll position
int scrollX = MATRIX_WIDTH;
int scrollY = 0;              // top row

// State for vertical per-letter scroll
int vertCharIndex = 0;        // which character of the string
int vertY         = MATRIX_HEIGHT;    // vertical position of that character

// ======================= WEB SERVER ============================

WebServer server(80);

// ======================= HTML PAGE ============================

const char MAIN_page[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ESP32 Text Scroll</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #111;
    color: #eee;
    text-align: center;
    margin: 0;
    padding: 10px;
  }
  .container {
    max-width: 360px;
    width: 100%%;
    margin: 0 auto;
    background: #222;
    padding: 12px;
    border-radius: 10px;
    box-sizing: border-box;
  }
  input[type="text"] {
    width: 100%%;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #444;
    background: #111;
    color: #eee;
    margin-bottom: 10px;
  }
  .row {
    margin: 10px 0;
  }
  .label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
  }
  .toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .arrow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 50px);
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
  }
  .arrow-btn {
    background: #333;
    border: 1px solid #555;
    color: #eee;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%%;
    height: 100%%;
  }
  .arrow-btn.active {
    background: #0a84ff;
  }
  .arrow-btn:disabled {
    opacity: 0.5;
    cursor: default;
  }
  button#applyBtn {
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #0a84ff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
  button#applyBtn:active {
    transform: scale(0.97);
  }
</style>
</head>
<body>
  <div class="container">
    <h2>Robojax ESP32-S3 Matrix Text Scroll</h2>

    <div class="row">
      <span class="label">Text to scroll:</span>
      <input type="text" id="text" value="Hello" />
    </div>

    <div class="row">
      <span class="label">Color:</span>
      <input type="color" id="color" value="#ffffff" />
    </div>

    <div class="row">
      <span class="label">Scroll Delay (fast → slow):</span>
      <input
        type="range"
        id="speed"
        min="20"
        max="300"
        value="80"
        oninput="document.getElementById('speedVal').innerText = this.value + ' ms';"
      />
      <div id="speedVal" style="text-align:right;font-size:12px;margin-top:4px;">
        80 ms
      </div>
    </div>

    <div class="row">
      <label class="toggle">
        <input type="checkbox" id="power" checked />
        <span>Display ON</span>
      </label>
    </div>

    <div class="row">
      <span class="label">Scroll Direction:</span>
      <div class="arrow-grid">
        <div></div>
        <button class="arrow-btn" id="btnUp" onclick="setDir('up')">&#9650;</button>
        <div></div>

        <button class="arrow-btn" id="btnLeft" onclick="setDir('left')">&#9664;</button>
        <div></div>
        <button class="arrow-btn" id="btnRight" onclick="setDir('right')">&#9654;</button>

        <div></div>
        <button class="arrow-btn" id="btnDown" onclick="setDir('down')">&#9660;</button>
        <div></div>
      </div>
    </div>

    <button id="applyBtn" onclick="sendUpdate()">Apply</button>
    <p id="status"></p>
  </div>

<script>
  let currentDir = 'left';

  function setDir(dir) {
    currentDir = dir;
    document.querySelectorAll('.arrow-btn').forEach(b => b.classList.remove('active'));
    if (dir === 'up')    document.getElementById('btnUp').classList.add('active');
    if (dir === 'down')  document.getElementById('btnDown').classList.add('active');
    if (dir === 'left')  document.getElementById('btnLeft').classList.add('active');
    if (dir === 'right') document.getElementById('btnRight').classList.add('active');
    sendUpdate();
  }

  function sendUpdate() {
    const text  = document.getElementById('text').value;
    const color = document.getElementById('color').value;
    const power = document.getElementById('power').checked ? '1' : '0';
    const speed = document.getElementById('speed').value;

    const url = `/update?text=${encodeURIComponent(text)}&color=${encodeURIComponent(color)}&power=${power}&dir=${currentDir}&speed=${speed}`;

    fetch(url)
      .then(r => r.text())
      .then(t => {
        document.getElementById('status').innerText = t;
      })
      .catch(err => {
        document.getElementById('status').innerText = 'Error sending update';
      });
  }

  // Set default active
  setDir('left');
</script>
</body>
</html>
)rawliteral";

// ======================= HELPERS ===============================

bool isHexChar(char c) {
  return (c >= '0' && c <= '9') ||
         (c >= 'a' && c <= 'f') ||
         (c >= 'A' && c <= 'F');
}

String urlDecode(const String &src) {
  String result;
  result.reserve(src.length());
  for (size_t i = 0; i < src.length(); i++) {
    char c = src[i];
    if (c == '+') {
      result += ' ';
    } else if (c == '%' && i + 2 < src.length()) {
      char h1 = src[i + 1];
      char h2 = src[i + 2];
      if (isHexChar(h1) && isHexChar(h2)) {
        char hex[3] = {h1, h2, 0};
        int val = (int)strtol(hex, nullptr, 16);
        result += (char)val;
        i += 2;
      } else {
        result += c;
      }
    } else {
      result += c;
    }
  }
  return result;
}

uint16_t colorFromHex(const String &hex) {
  // Expect "#RRGGBB" or "RRGGBB"
  String c = hex;
  if (c.startsWith("#")) c.remove(0, 1);
  if (c.length() != 6) {
    // default white
    return matrix.Color(255, 255, 255);
  }
  long value = strtol(c.c_str(), NULL, 16);
  uint8_t r = (value >> 16) & 0xFF;
  uint8_t g = (value >> 8) & 0xFF;
  uint8_t b = (value) & 0xFF;
  return matrix.Color(r, g, b);
}

void resetScrollPosition() {
  int textWidth  = scrollText.length() * 6;  // default font ~6 px per char
  int textHeight = 8;                        // 5x7 font fits in 8

  switch (currentDir) {
    case DIR_LEFT:
      // Start from just outside the right edge
      scrollX = MATRIX_WIDTH;
      scrollY = 0;
      break;

    case DIR_RIGHT:
      // Start from just outside the left edge
      scrollX = -textWidth;
      scrollY = 0;
      break;

    case DIR_UP:
      // Per-letter vertical scroll, starting with first character below matrix
      vertCharIndex = 0;
      vertY = MATRIX_HEIGHT;   // 8 → enters from bottom
      break;

    case DIR_DOWN:
      // Per-letter vertical scroll, starting with first character above matrix
      vertCharIndex = 0;
      vertY = -textHeight;     // -8 → enters from top
      break;
  }
}

// ======================= HTTP HANDLERS =========================

void handleRoot() {
  server.send_P(200, "text/html", MAIN_page);
}

void handleUpdate() {
  if (server.hasArg("text")) {
    String txt = urlDecode(server.arg("text"));
    if (txt.length() == 0) {
      scrollText = " ";
    } else {
      scrollText = txt;
    }
  }

  if (server.hasArg("color")) {
    String hex = server.arg("color");
    textColor = colorFromHex(hex);
  }

  if (server.hasArg("power")) {
    String p = server.arg("power");
    displayOn = (p == "1");
  }

  if (server.hasArg("dir")) {
    String d = server.arg("dir");
    if (d == "left")      currentDir = DIR_LEFT;
    else if (d == "right") currentDir = DIR_RIGHT;
    else if (d == "up")    currentDir = DIR_UP;
    else if (d == "down")  currentDir = DIR_DOWN;
  }

  if (server.hasArg("speed")) {
    String s = server.arg("speed");
    int val = s.toInt();

    // simple safety clamp
    if (val < 10)   val = 10;    // very fast
    if (val > 1000) val = 1000;  // 1 second max

    scrollInterval = (unsigned long)val;
    // Serial.print("Scroll interval set to ");
    // Serial.print(scrollInterval);
    // Serial.println(" ms");
  }

  resetScrollPosition();
  server.send(200, "text/plain", "Updated");
}

// ======================= SCROLL LOGIC ==========================

void drawScroll() {
  if (!displayOn) {
    matrix.fillScreen(0);
    matrix.show();
    return;
  }

  int textWidth  = scrollText.length() * 6;
  int textHeight = 8;

  matrix.fillScreen(0);
  matrix.setTextSize(1);
  matrix.setTextWrap(false);
  matrix.setTextColor(textColor);

  // -------- HORIZONTAL SCROLL (LEFT / RIGHT) --------
  if (currentDir == DIR_LEFT || currentDir == DIR_RIGHT) {
    matrix.setCursor(scrollX, 0);
    matrix.print(scrollText);
    matrix.show();

    if (currentDir == DIR_LEFT) {
      scrollX--;
      if (scrollX < -textWidth) {
        scrollX = MATRIX_WIDTH;
      }
    } else { // DIR_RIGHT
      scrollX++;
      if (scrollX > MATRIX_WIDTH) {
        scrollX = -textWidth;
      }
    }
    return;
  }

  // -------- VERTICAL SCROLL (UP / DOWN) – PER LETTER --------

  if (scrollText.length() == 0) {
    matrix.show();
    return;
  }

  // Current character
  char c = scrollText[vertCharIndex];

  int charWidth  = 6;
  int baseX = (MATRIX_WIDTH - charWidth) / 2;  // center horizontally

  matrix.setCursor(baseX, vertY);
  matrix.print(c);
  matrix.show();

  if (currentDir == DIR_UP) {
    // Move character upwards
    vertY--;
    if (vertY < -textHeight) {
      // This character is fully passed, go to next
      vertY = MATRIX_HEIGHT;
      vertCharIndex++;
      if (vertCharIndex >= scrollText.length()) {
        vertCharIndex = 0; // loop back to first character
      }
    }
  } else if (currentDir == DIR_DOWN) {
    // Move character downwards
    vertY++;
    if (vertY > MATRIX_HEIGHT) {
      // This character is fully passed, go to next
      vertY = -textHeight;
      vertCharIndex++;
      if (vertCharIndex >= scrollText.length()) {
        vertCharIndex = 0; // loop back
      }
    }
  }
}

// ======================= WIFI INIT =============================

void startAPFallback() {
  Serial.println("Starting AP fallback...");
  WiFi.mode(WIFI_AP);
  bool apOk = WiFi.softAP(AP_SSID, AP_PASS);
  if (apOk) {
    Serial.print("AP started. SSID: ");
    Serial.print(AP_SSID);
    Serial.print("  IP: ");
    Serial.println(WiFi.softAPIP());
  } else {
    Serial.println("Failed to start AP.");
  }
}

void connectWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASS);

  Serial.print("Connecting to WiFi ");
  Serial.print(WIFI_SSID);

  unsigned long startAttempt = millis();
  const unsigned long timeout = 10000; // 10s

  while (WiFi.status() != WL_CONNECTED && (millis() - startAttempt) < timeout) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();

  if (WiFi.status() == WL_CONNECTED) {
    Serial.print("Connected. IP address: ");
    Serial.println(WiFi.localIP());
  } else {
    Serial.println("WiFi connect failed, starting AP fallback.");
    startAPFallback();
  }
}

// ======================= SETUP & LOOP ==========================

void setup() {
  Serial.begin(115200);
  delay(500);

  // Matrix init
  matrix.begin();
  matrix.setRotation(MATRIX_ROTATION);
  matrix.setBrightness(BRIGHTNESS);
  matrix.fillScreen(0);
  matrix.show();

  // WiFi
  connectWiFi();

  // Web server routes
  server.on("/", handleRoot);
  server.on("/update", handleUpdate);
  server.onNotFound([]() {
    server.send(404, "text/plain", "Not found");
  });
  server.begin();
  Serial.println("HTTP server started.");

  resetScrollPosition();
}

void loop() {
  server.handleClient();

  unsigned long now = millis();
  if (now - lastScrollTime >= scrollInterval) {
    lastScrollTime = now;
    drawScroll();
  }
}

તમને જોઈતી વસ્તુઓ

સંસાધનો અને સંદર્ભો

ફાઇલો📁

Fritzing ફાઇલ

સંબંધિત Amazon ઉત્પાદનો

સંબંધિત eBay યાદીઓ

સંબંધિત AliExpress ઉત્પાદનો

ટૅગ્સ

ESP32-S3 MatrixESP32-S3 RGB LED Matrix
કોડ શોધો

તાજેતરની ટ્યુટોરિયલ્સ

YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
YouTube થંબનેલ
વધુ જુઓ