Cara Membuat running text dot Matrix dengan 74HC595 + NodeMCU + Android dengan penjelasan

Kita akan membuat tampilan dot matrix dengan 74HC595 dan dikontrol lewat android via WiFi dengan mikrokontroller NodeMCU, Lengkap dengan penjelasannya.
Silahkan langsung baca dibawah untuk lebih lengkapnya yah...

Daftar isi

---

• Skenario Project
• Sedikit Teori
• Implementasi
• Hasil

Skenario Project
Untuk membuat running text, komponen yang kita butuhkan adalah sebagai berikut :

• 1 x    NodeMCU
• 2 x    Dot Matrix 8x8
• 3 x    IC 74HC595
• 16 x  Resistor 220 Ohm
• Kabel jumper

Dan peralatan yang dibutuhkan pastinya seperti berikut : 

• Komputer (terinstall Arduino IDE dan Driver NodeMCU)
  Baca : Cara memasang / menggunakan NodeMCU pertama kali
• HP/Smartphone Android 

Pada project ini, kita gunakan 2 buah dot matrix yang dikontrol oleh mikrokontroller NodeMCU. Karena NodeMCU dapat mensupport WiFi, maka kita dorong lebih jauh lagi menjadi dikontrol lewat aplikasi android.

Setiap dot matrix membutuhkan setidaknya 16 pin agar dapat beroperasi, maka untuk 2 buah dot matrix membutuhkan 32 pin mikrokontroller. NodeMCU ataupun Arduino tidak memiliki pin sebanyak itu, oleh karena itu kita menggunakan shift register IC 74HC595. 

Skenario utamanya adalah, 

1. Mikrokontroller NodeMCU akan memancarkan sinyal WiFi atau disebut juga dengan Mode AP
2. Kemudian, perangkat android terhubung kedalam WiFi tersebut
3. Didalam perangkat android, terdapat aplikasi yang dapat merubah tulisan running text
4. Tulisan tersebut dikirimkan via protokol HTTP POST yang dapat didukung oleh NodeMCU
5. Kemudian diterapkan kedalam EEPROM NodeMCU sehingga perubahan teks tersebut dapat tersimpan meskipun dimatikan.

Sedikit Teori

Jika anda peduli tentang bagaimana cara kerja tampilan dot matrix ini, silahkan baca catatan dibawah ini, namun jika tidak, dan ingin langsung praktek, silahkan lewati bagian ini.

Dot Matrix
didalam dot matrix yang biasa dijual di pasaran adalah rangkaian lampu LED yang tersusun sebagai berikut :

Susunan tersebut memiliki 8 baris dan 8 kolom, ada yang kolom anoda dan ada yang katoda, jika kolom anoda maka pin kolom memiliki polaritas gnd agar hidup. Gambar diatas adalah contoh dot matrix kolom anoda.
Jika kita berikan 5v pada baris 1 dan gnd pada kolom 8 
maka, yang terjadi adalah lampu pojok kanan atas yang hidup

Sekarang anda mengetahui, bagaimana cara menghidupkan salah satu lampu tertentu. Namun, untuk membentuk suatu objek misalnya emotikon smile, maka akan ada masalah baru.

Saat ingin membentuk garis diagonal / miring, aliran arus di baris dan kolom akan menjadi satu dan mengakibatkan lampu led yang tidak diinginkan menjadi menyala.. lihat animasi berikut ini

Saat ingin menghidupkan lampu yang saya tandai dengan warna hijau (baris 6 kolom 2),  maka lampu-lampu di baris 6 yang sudah terkoneksi dengan gnd akan ikut menyala (pada gambar diatas, lampu di baris 6 kolom 3 ikut menyala).. sehingga kita tidak bisa membentuk wajah smile.. bagaimana solusinya?

Solusinya adalah dengan menggunakan metode scan. Scan display adalah teknik membentuk gambar dengan cara menampilkan baris lampu satu persatu dengan cepat sehingga mata kita seolah olah melihat lampu led yang menyala disetiap barisnya, padahal lampu led tersebut dinyalakan satu per satu setiap baris.

Sekarang, anda tahu bagaimana cara membentuk gambar dengan metode scan vertical seperti gambar diatas.

Mari kita rangkai dengan komponen lainnya.
Karena kita membutuhkan metode scan di bagian baris, maka kita dengan mudah menggunakan IC 74HC595 sebagai IC scan vertical yang bertugas untuk menghidupkan baris demi baris seperti animasi GIF diatas (garis merah) dengan keluaran arus plus / +5v.

Baca : Cara kerja IC 74HC595

Kemudian untuk membentuk gambar, dibutuhkan pin kolom / horizontal untuk mengeluarkan output berupa GND sesuai dengan baris scan yang aktif (lihat animasi diatas). Dan lagi, kita bisa gunakan IC 74HC595 untuk melakukan ini.

Dari alur teori diatas, kurang lebih membentuk skematik seperti dibawah :


Pada skema diatas, ada 2 IC yang dikontrol oleh mikrokontroller, yaitu IC 74HC595 di bagian vertikal (bagian baris lampu), dan IC dibagian horizontal.
Untuk IC ketiga, juga termasuk IC horizontal sama dengan IC kedua, oleh karena itu pin data pada IC ini cukup mengambil dari pin QH (Carry Out) pada pin 9 di IC kedua.

Kemudian, perhatikan juga pada pin latch dari kedua IC horizontal dan vertikal terhubung menjadi 1, itu karena kita membutuhkan output di masing-masing IC dikeluarkan secara bersamaan

Anda juga dapat menambahkan lebih dari 2 dot matrix dengan maksimal 8 dot matriks, (karena IC shift register vertical memiliki output 5v dengan arus terbatas)
Jika anda ingin lebih dari itu, gunakan mosfet di setiap keluaran ic vertical scan agar distribusi arus dapat mencukupi keseluruhan led.
dan jangan lupa untuk merubah konfigurasi lebar dan tinggi di bagian sketch arduino IDE. Misalnya anda menggunakan 6 buah dot matrix sejajar satu sama lain, berarti lebar = (6 x 8) = 48 dan tinggi = 8.
Namun saya sarankan anda cukup menggunakan 2 dot matrik untuk saat ini agar mencegah error, jika berhasil menggunakan 2 dotmatriks anda dapat bereksperimen lebih lanjut.

O iya, saat pemasangan jangan lupa, tentukan pin pin dari dot matrix dengan benar.. lihat gambar dibawah ini

Nama package selalu berada di posisi bawah, dan tonjolan casing selalu berada di atas,

urutan pin dimulai dari pojok bawah kiri sampai kanan diteruskan pojok kanan atas sampai pojok kiri atas seperti membentuk huruf U dari samping

(Sumber : https://mazbeny.wordpress.com/2015/11/19/menentukan-kaki-led-dot-matriks/)

Anda bisa gunakan Arduino dengan mengatur pin sesuai dengan konfigurasi yang ada di sketch dibawah. dan hapus fungsi fungsi yang berhubungan dengan WiFi (karena arduino tidak mendukung WiFi)

Silahkan komentar dibawah jika ingin mencari source code untuk arduino
(gratis kok gan, dibalas secepatnya, cuma ingin liat feedback pembaca aja, hehe)


Implementasi Project

• Silahkan atur wiring anda sesuai dengan skema dibawah ini : 

Versi schematic : 


Versi Breadboard : 

Jika bingung skema breadboardnya, anda bisa download file Fritzing dibawah
(Disarankan untuk menggunakan resistor di setiap kolomnya -- lihat versi skematik)

(File Schematic breadboard Fritzing    |   ~ 41 Kb)

Dan ini versi saya (Mbulet bukan wkwk):

• Pastikan anda telah menginstall board & library untuk ESP8266
  Baca: Cara memasang / menggunakan NodeMCU ESP8266 Pertama kali

• Kita akan menggunakan library Font5x7 untuk array acuan font yang digunakan pada script project ini. Download library font5x7 lalu extract dan taruh di documents/arduino/libraries/

Font5x7.rar | ~ 2KB

• Kemudian, buka Arduino IDE. gunakan source code dibawah ini 

/*
 * Kode Ditulis oleh  : Moh. Badar Wildanie
 * Sub routine        : Hardware API dot matrix untuk HTTP dan WS
 * Client             : APK Android
 */

#include <font5x7.h>

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include <EEPROM.h>

// Setting SSID dan Password WiFi (Mode AP)
const char *ssid = "WnNetAP ESP";
const char *pass = "qweqweqwe";
IPAddress IP(192,168,1,1);
IPAddress NETMASK(255,255,255,0);
IPAddress NETWORK (192,168,1,1);
IPAddress DNS(192,168,1,1);

// Pendeklarasian variabel objek server dan websocket
ESP8266WebServer server(80);
WebSocketsServer ws(81);

// Penentuan PIN
byte verticalData = D0;
byte verticalClock = D1;
byte horizontalData = D2;
byte horizontalClock = D3;
const byte latch = D5;

// Penentuan lebar dan tinggi
const byte lebar = 24;
const byte tinggi = 8;

// Penentuan tulisan / running text
String tulisan = "MENGAPA KENAPa        ";

// Perhitungan jumlah modul untuk dibuatkan array bitmap
const byte jumlahModul = lebar/8;
byte bitmap[tinggi][jumlahModul];

// Cuma ngetes aja sih
byte smiley[] = {0x00, 0x04, 0x72, 0x02, 0x02, 0x72, 0x04, 0x00};

void setup() {
  // Setting pin yang digunakan sebagai output
  pinMode(horizontalData, OUTPUT);
  pinMode(horizontalClock, OUTPUT);
  pinMode(verticalData, OUTPUT);
  pinMode(verticalClock, OUTPUT);
  pinMode(latch, OUTPUT);

  // Memulai WiFi sebagai AP
  WiFi.mode(WIFI_AP);
  WiFi.softAP(ssid, pass);
  WiFi.config(IP, NETWORK, NETMASK, DNS); 

  // Memulai Server
  server.on("/setText", HTTP_POST, setText);
  server.begin();

  // Memulai Web Socket
  ws.begin();
  ws.onEvent(wsEvent);

  // Mengambil data teks EEPROM
  tulisan = readString();
}

// Penentuan konfigurasi scrolling dan variabelnya
int scrollSpeed = 70; // Atur ini untuk mengubah kecepatan
unsigned long scrollTiming = 0;
int scrollStep = 0;

// Fungsi untuk melakukan scrolling text
void scrollingText() {

  // Melakukan pergeseran bitmap kekiri disetiap [scrollSpeed] milidetik
  if (millis() - scrollTiming >= scrollSpeed) {
    scrollTiming = millis();
    scrollStep++;

    // Mereset scroll step jika melebihi jumlah lebar karakter (6 kolom + jarak antar karakter)
    // (Scroll step digunakan untuk mengetahui karakter mana yang akan di print berdasarkan sejauh mana pergeseran)
    if (scrollStep > tulisan.length() * 6) scrollStep = 1;
    uint8_t charIndexScreen = floor((scrollStep - 1) / 6);  // Indeks karakter dari variabel tulisan
    uint8_t charIndex = tulisan[charIndexScreen] - 32;  // Indeks karakter berdasarkan kode ASCII yang ada di library font5x7
    uint8_t col = (scrollStep - 1) % 6; // Kolom dari setiap karakter yang akan di print (juga berdasarkan pergeseran / scrollstep) pastinya

    // Melakukan pergeseran bitmap ke arah kiri 
    // selagi menambahkan bit baru berdasarkan [col] untuk membentuk huruf baru
    for (int row = 0; row < tinggi; row++) {

      // melakukan perulangan setiap modul, agar pada modul 1 dapat bergeser ke modul 2 dst..
      for (int col = 1; col < jumlahModul; col++) {
        bitmap[row][col] <<= 1; // Ini gan pergeserannya
        bitWrite(bitmap[row][col], 0, bitRead(bitmap[row][col-1], 7));
      }

      // Menambahkan bit baru untuk huruf baru di kanan
      bitmap[row][0] <<= 1;
      if (col >= 5) {
        bitmap[row][0] |= 0; // Jika col lebih dari 5, maka kita gunakan untuk spasi antar huruf
      }
      else {
        bitmap[row][0] |= bitRead(pgm_read_byte(&Font5x7[charIndex*5+col]), row); // Jika tidak, berarti kita tambahkan bit baru tsb..
      }
    }
  }
}
void loop() {
  server.handleClient(); // mendengarkan permintaan client berulang-ulang (bawaan dari ESP8266)
  ws.loop();  // mendengarkan permintaan client bidang web socket berulang-ulang (bawaan dari ESP8266)
  scrollingText(); // Melakukan scrolling text ALIAS pergeseran bit ke kiri
  refresh(); // menampilkan bitmap ke dot matrix
}

// Fungsi untuk menampilkan array bitmap ke dot matrix
void refresh() {
  // perulangan untuk melakukan scan baris (Vertical Scan dan Vertical sync / V-Sync)
  // pada dasarnya, setiap baris led dihidupkan kemudian berganti kebaris berikutnya dst..
  for (byte row = 0; row < tinggi; row++) {
    digitalWrite(latch, LOW);
    // menampilkan bitmap berdasarkan baris yang terdapat pada array bitmap
    for (int modul = jumlahModul-1; modul >= 0; modul--){
      shiftOut(horizontalData, horizontalClock, LSBFIRST, ~bitmap[row][modul]);
    }
    shiftOut(verticalData, verticalClock, MSBFIRST, 1 << row);  // ini gan pergeseran vscan nya
    digitalWrite(latch, HIGH); // setelah semua bit terkirim, ditampilkan ke output led
    delay(1);
  }
}


// API EEPROM untuk setting tulisan
// kalau bingung komen di artikel aja ya gan..
void writeString(String text) {
  int textLength = text.length();
  byte a = textLength & 0xFF;
  byte b = (textLength >> 8) & 0xFF;
  
  EEPROM.begin(1024);
  EEPROM.write(0, a);
  EEPROM.write(1, b);
  for (int i = 0; i < text.length(); i++) {
    EEPROM.write(2+i, text[i]);
  }
  EEPROM.commit();
}
String readString() {
  EEPROM.begin(1024);
  byte a = EEPROM.read(0);
  byte b = EEPROM.read(1);
  
  if (a != 255 || b != 255) {
    long res = b;
    res = res << 8;
    res = res | a;
    char abjad[res + 1];
    for (int i = 0; i < res; i++) {
      abjad[i] = EEPROM.read(2+i);
    }
    abjad[res] = '\0';
    EEPROM.end();
    return String(abjad);
  }
  else {
    EEPROM.end();
    return "Teks kosong    ";
  }
}

// Fungsi yang dijalan saat ada HTTP POST dari client dengan path "/setText" dan membawa data argumen "text"
// Kemudian, teks tersebut disimpan di eeprom untuk ditampilkan ke dotmatriks
void setText() {
  if (server.hasArg("text")) {
    tulisan = server.arg("text");
    writeString(tulisan); // Ini gan, baris kode untuk nyimpan di EEPROM
    scrollStep = 0;
    server.send(200, "text/plain", "Perintah berhasil dieksekusi");
  }
}

// Fungsi ini digunakan untuk menangani permintaan websocket
// websocket ini digunakan untuk broadcast teks ke seluruh client saat ada perubahan
void wsEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED :
      break;
    case WStype_CONNECTED : 
      Serial.println("Somebody connected");
      break;
    case WStype_TEXT :
      String command = String((char *) &payload[0]);
      if (command == "getTulisan") {
        String tulisanRe = "{\"command\": \"getTulisan\", \"response\": \"" +tulisan+ "\"}";
        char tulisanChar[tulisanRe.length()];
        tulisanRe.toCharArray(tulisanChar, tulisanRe.length()+1);
        Serial.println(tulisanChar);
        ws.sendTXT(num, tulisanChar, tulisanRe.length());
      }
      break;
  }
}

Untuk penjelasannya, saya sudah memberikan comment / catatan didalam kode tersebut, namun jika anda masih bingung, anda bisa menuliskan komentar dan saya akan menjawabnya secepat mungkin.

• Kemudian Upload ke mikokontroller NodeMCU
  Pastikan board terpilih NodeMCU 12E (atau jika anda gunakan board lain, pilih sesuai board anda)
  Baca : Menyiapkan NodeMCU pertama kali

• Untuk aplikasi android nya silahkan download APK berikut ini 

(JwsControl.apk    |    ~ 3.1 MB)

• Letakkan di smartphone anda dan install.
  (mungkin anda akan ditanyai tentang sumber tidak dikenal, jika ya aktifkan sumber tidak dikenal tersebut/unknown sources)
  (dan mungkin anda akan diberikan peringatan google play protect tidak mengenal developer ini, jika ya tekan tetap install / install anyway)
  Karena saya memang belum daftar ke google play

Hasil Project

• Hubungkan dengan Wifi kemudian buka aplikasi

• Coba lakukan perubahan tulisan running text

Jika mendapati masalah, silahkan tuliskan komentar di bawah ya..

dan ngomong-ngomong, kenapa namanya adalah JWSControl..
Project ini adalah bagian dari project saya untuk membuat jadwal sholat yang secara keseluruhan menggunakan seven segmen dan dot matrix. Namun saat ini belum saya sempurnakan dan hanya dot matriks yang selesai, jadi tidak terlalu kompleks untuk dijadikan tutorial di blog ini.

Semoga bermanfaat.