By | 13/04/2020

Hello temen temen anakkendali

Pada kesempatan kali ini saya akan menuliskan artikel tentang Tutorial Dot Matrix 8×8 Wemos D1 Mini Input Teks Webserver

Dot Matrix 8×8 merupakan modul display led yang dapat menampilkan karakter maupun angka, dengan dibantu IC driver LED MAX7219 maka penggunaan PIN yang terhubung di Arduino hanya membutuhkan 5 pin saja. karena dengan bantuan IC MAX7219 kita dapat menggunakan fitur SPI dari mikrokontroler.

Keyword :

Wemos D1 mini WebServer Dot Matrix
Wemos RTC Alarm Webserver
Wemos ESP8266 Dot Matrix Webserver
NodeMCU Webserver Dot Matrix
ESP8266 Webserver Input Teks
Input Teks Dot matrix Website

Wemos D1 Mini merupakan modul Wifi yang support menjadi WIFI client maupun Access Point. sehingga kita dapat membuat SSID wifi dari modul Wemos D1 Mini ESP8266. selain itu Wemos D1 mini juga memiliki fitur yang mana bisa menjadikan dirinya sebagai webserver. fitur fitur inilah yang akan kita gunakan untuk memasukan atau input data berupa teks pada modul Wemos D1 mini sehingga dapat di tampilkan pada display Dot Matrix 8×8 IC Max7219.

Pada tutorial kali ini kita hanya menginput Teks saja dari halaman website yang dibuat oleh webserver wemos d1 itu sendiri.

tidak hanya dengan menggunakan Wemos D1 Mini, kita juga dapat membuat tutorial ini bisa di terapkan pada modul NodeMCU ESP8266, ataupun Keluarga ESP8266 lainya, selama memiliki pin SPI untuk antarmuka dengan display dot matrix 8×8.

kenapa saya tidak menggunakan modul NodeMCU untuk Input Teks dari Website, dan menjadikan NodeMCU sebagai Webserver nya ?

alasanya sangat sederhana, yaitu karena NodeMCU memiliki fisik yang lebih besar dari Wemos D1 mini, sehingga sangat efisien dalam tempat jika menggunakan modul Wemos D1 Mini

Rangkaian

berikut merupakan rangkaian Wemos D1 Mini, RTC DS3231 dan Modul Display Dot Matrix 8×8

Library

libarary yang wajib ada dalam program berikut adalah :

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <EEPROM.h>
#include <Wire.h>
#include "RTClib.h"
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>

jika kalian tidak bisa mencari library dan memasangnya pada Arduino IDE laptop kalian. maka saya sarankan silahkan belajar lagi dari dasar tentang bagaimana cara mendapatkan library dan menginstal nya. tutorial ini masih sangat jauh jika hal tersebut belum bisa kalian lakukan.

Program Arduino

Terdapat tiga buah tab yang memiliki program masing masing, tetapi dalam satu project. alasan saya membuat seperti ini untuk memudahkan dalam melakukan debugging, dan lebih rapih saja.

Program utama silahkan beri nama “Jam_digital_DS3231_arduino_DotMartrixParolla_webserver” dan isi program nya sebagai berikut :

/*
   visit : anakkendali.com
   2019
   admin : chaerul anam
   email : [email protected]
   wa : 083862832235
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <EEPROM.h>
#include "deklarasi.h"
#include <Wire.h>
#include "RTClib.h"
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
#include <SPI.h>

const char *ssid     = "anakkendali.com";
const char *password = "";

String message, webpage;

String version = "v1.0";
ESP8266WebServer server(80);
String SITE_WIDTH =  "1000";

#define HARDWARE_TYPE MD_MAX72XX::FC16_HW
#define MAX_DEVICES 4
#define CLK_PIN   D5
#define DATA_PIN  D7
#define CS_PIN    D0

int ajam, amenit;
int index1, index2, index3, index4;

MD_Parola P = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// Arbitrary output pins
// MD_Parola P = MD_Parola(HARDWARE_TYPE, DATA_PIN, CLK_PIN, CS_PIN, MAX_DEVICES);

#define ARRAY_SIZE(x)  (sizeof(x)/sizeof(x[0]))

// Global data
struct sCatalog
{
  textEffect_t  effect;   // text effect to display
  char *        psz;      // text string nul terminated
  uint16_t      speed;    // speed multiplier of library default
  uint16_t      pause;    // pause multiplier for library default
};
char newMessage[75];

sCatalog  catalog[] =
{
  { PA_PRINT, "PRINT", 1, 1 },
  { PA_SCROLL_UP, "SC_U", 5, 1 },
  { PA_SCROLL_DOWN, "SCR_D", 5, 1 },
  { PA_SCROLL_LEFT, "SCR_L", 5, 1 },
  { PA_SCROLL_RIGHT, "SCR_R", 5, 1 },
#if ENA_SPRITE
  { PA_SPRITE, "SPRIT", 5, 1 },
#endif
#if ENA_MISC
  { PA_SLICE, "SLICE", 1, 1 },
  { PA_MESH, "MESH", 20, 1 },
  { PA_FADE, "FADE", 20, 1 },
  { PA_DISSOLVE, "DSLVE", 7, 1 },
  { PA_BLINDS, "BLIND", 7, 1 },
  { PA_RANDOM, "RAND", 3, 1 },
#endif
#if ENA_WIPE
  { PA_WIPE, "WIPE", 5, 1 },
  { PA_WIPE_CURSOR, "WPE_C", 4, 1 },
#endif
#if ENA_SCAN
  { PA_SCAN_HORIZ, "SCNH", 4, 1 },
  { PA_SCAN_HORIZX, "SCNHX", 4, 1 },
  { PA_SCAN_VERT, "SCNV", 3, 1 },
  { PA_SCAN_VERTX, "SCNVX", 3, 1 },
#endif
#if ENA_OPNCLS
  { PA_OPENING, "OPEN", 3, 500 },
  { PA_OPENING_CURSOR, "OPN_C", 4, 1 },
  { PA_CLOSING, "CLOSE", 3, 1 },
  { PA_CLOSING_CURSOR, "CLS_C", 4, 1 },
#endif
#if ENA_SCR_DIA
  { PA_SCROLL_UP_LEFT, "SCR_UL", 7, 1 },
  { PA_SCROLL_UP_RIGHT, "SCR_UR", 7, 1 },
  { PA_SCROLL_DOWN_LEFT, "SCR_DL", 7, 1 },
  { PA_SCROLL_DOWN_RIGHT, "SCR_DR", 7, 1 },
#endif
#if ENA_GROW
  { PA_GROW_UP, "GRW_U", 7, 1 },
  { PA_GROW_DOWN, "GRW_D", 7, 1 },
#endif
};

// Sprite Definitions
const uint8_t F_PMAN1 = 6;
const uint8_t W_PMAN1 = 8;
static const uint8_t PROGMEM pacman1[F_PMAN1 * W_PMAN1] =  // gobbling pacman animation
{
  0x00, 0x81, 0xc3, 0xe7, 0xff, 0x7e, 0x7e, 0x3c,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c,
  0x3c, 0x7e, 0xff, 0xff, 0xff, 0xff, 0x7e, 0x3c,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c,
};

const uint8_t F_PMAN2 = 6;
const uint8_t W_PMAN2 = 18;
static const uint8_t PROGMEM pacman2[F_PMAN2 * W_PMAN2] =  // ghost pursued by a pacman
{
  0x00, 0x81, 0xc3, 0xe7, 0xff, 0x7e, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x7b, 0xf3, 0x7f, 0xfb, 0x73, 0xfe,
  0x3c, 0x7e, 0xff, 0xff, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
  0x24, 0x66, 0xe7, 0xff, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
  0x00, 0x42, 0xe7, 0xe7, 0xff, 0xff, 0x7e, 0x3c, 0x00, 0x00, 0x00, 0xfe, 0x73, 0xfb, 0x7f, 0xf3, 0x7b, 0xfe,
};

RTC_DS3231 rtc;

int count_h = 0;

char daysOfTheWeek[7][12] = {"Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"};

String data, mymsg;

void setup() {
  // put your setup code here, to run once:
#ifndef ESP8266
  while (!Serial); // for Leonardo/Micro/Zero
#endif

  Serial.begin(9600);
  delay(3000);
  
  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  Serial.print(F("Use this URL to connect: http://")); Serial.println(WiFi.softAPIP().toString() + "/");

  server.on("/", GetMessage);
  server.begin(); Serial.println(F("Webserver started..."));
  message = "Welcome...";
  
  if (! rtc.begin()) {
    Serial.println("Couldn't find RTC");
    while (1);
  }

  if (rtc.lostPower()) {
    Serial.println("RTC lost power, lets set the time!");
    // following line sets the RTC to the date & time this sketch was compiled
    rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
    // This line sets the RTC with an explicit date & time, for example to set
    // January 21, 2014 at 3am you would call:
    // rtc.adjust(DateTime(2014, 1, 21, 3, 0, 0));
  }
  P.begin();
#if ENA_SPRITE
  P.setSpriteData(pacman1, W_PMAN1, F_PMAN1, pacman2, W_PMAN2, F_PMAN2);
#endif

  for (uint8_t i = 0; i < ARRAY_SIZE(catalog); i++)
  {
    catalog[i].speed *= P.getSpeed();
    catalog[i].pause *= 500;
  }
  EEPROM.begin(512);
  ajam = EEPROM.read(0);
  amenit = EEPROM.read(1);
  pinMode (D6, OUTPUT);
  digitalWrite(D6, 1);
}

unsigned long lasttime = 0;
byte menu = 0;
long interval = 0;
boolean buz = 1;

void loop() {
  // put your main code here, to run repeatedly:
  DateTime now = rtc.now();
  ajam = EEPROM.read(0);
  amenit = EEPROM.read(1);
  
  server.handleClient();
  
  if (jam == ajam && menit == amenit) {
    digitalWrite (D6, 0);
  }

  while (Serial.available() > 0) {
    delay(10);
    char c = Serial.read();
    data += c;
  }

  if (data.length() > 0) {
    Serial.println(data);
    index1 = data.indexOf('|');
    index2 = data.indexOf('|', index1 + 1);
    index3 = data.indexOf('|', index2 + 1);
    index4 = data.indexOf('|', index3 + 1);

    mymsg = data.substring(index1 + 1, index2);
    ajam = data.substring(index2 + 1, index3).toInt();
    amenit = data.substring(index3 + 1, index4).toInt();

    EEPROM.write (0, ajam);
    EEPROM.write (1, amenit);
    EEPROM.put (2, mymsg);
    EEPROM.commit();
    Serial.println(ajam);
    Serial.println(amenit);
    Serial.println(mymsg);

    data = "";
  }

  static textPosition_t just = PA_CENTER;
  static uint8_t i = 2;

  if (P.displayAnimate()) // animates and returns true when an animation is completed
  {
    // rotate the justification if needed
    switch (i) {
      case 2:
        tampil(3);
        i = 3;
        break;
      case 3:
        tampil(2);
        i = 4;
        break;
      case 4: //fade
        tampil(1);
        i = 8;
        break;
      case 8: // slice
        tampil(1);
        i = 6;
        break;
      case 6: // sprit pacman
        tampil(5);
        i = 5;
        break;
      case 5: // open
        tampil(2);
        i = 4;
        break;
    }
    catalog[i].psz = newMessage;
    // set up new animation
    P.displayText(catalog[i].psz, just, catalog[i].speed, catalog[i].pause, catalog[i].effect, catalog[i].effect);

    delay(catalog[i].pause);  // wait a while to show the text ...
    digitalWrite(D6, 1);
  }
}

program kedua silahkan beri nama “deklarasi.h” dan isi programnya seperti berikut :

#define tahun now.year()
#define bulan now.month()
#define tanggal now.day()
#define hari daysOfTheWeek[now.dayOfTheWeek()]
#define jam now.hour()
#define menit now.minute()
#define detik now.second()

#define _jam 0
#define _tanggal 1
#define _pesan 2
#define _alarm 3

program ke tiga kasih nama “fungsi.ino” dan isi program berikut :

#include "deklarasi.h"

void tampil(int a) {
  // berikut ini program supaya jam tampil lebih bagus jika nilainya kurang dari 10
  // seharusnya tampil 1:12:23 >> 01:12:23
  DateTime now = rtc.now();

  switch (a) {
    case 0:
      sprintf (newMessage, "Made In Indramayu, anakkendali.com");
      break;
    case 1:
      if (jam  < 10 && menit < 10) {
        sprintf (newMessage, "0%d:0%d", jam, menit);
      }
      if (jam  < 10 && menit >= 10) {
        sprintf (newMessage, "0%d:%d", jam, menit);
      }
      if (jam  >= 10 && menit >= 10) {
        sprintf (newMessage, "%d:%d", jam, menit);
      }
      if (jam  >= 10 && menit < 10) {
        sprintf (newMessage, "%d:0%d", jam, menit);
      }
      break;
    case 2:
      sprintf (newMessage, "%s, %d-%d-%d", hari, tanggal, bulan, tahun);
      break;
    case 3:
      ajam = EEPROM.read(0);
      amenit = EEPROM.read(1);
      if (ajam  < 10 && amenit < 10) {
        sprintf (newMessage, "Alarm : 0%d:0%d", ajam, amenit);
      }
      if (ajam  < 10 && amenit >= 10) {
        sprintf (newMessage, "Alarm : 0%d:%d", ajam, amenit);
      }
      if (ajam  >= 10 && amenit >= 10) {
        sprintf (newMessage, "Alarm : %d:%d", ajam, amenit);
      }
      if (ajam  >= 10 && amenit < 10) {
        sprintf (newMessage, "Alarm : %d:0%d", ajam, amenit);
      }
      break;
    case 4:
      sprintf (newMessage, "For The Fairest");
      break;
    case 5:
      message.toCharArray(newMessage, 75);
      break;
  }
}

void GetMessage() {
  webpage = ""; // don't delete this command, it ensures the server works reliably!
  append_page_header();
  String IPaddress = WiFi.softAPIP().toString();
  webpage += F("<h3>Masukan Pesan Untuk Runing Teks</h3><br>");
  webpage += "<form action=\"http://" + IPaddress + "\" method=\"POST\">";
  webpage += F("Wajib Mengisi Teks untuk Ditampilkan:<br><br><input type='text' size='50' name='message' value='' >");
  webpage += F("</form><br/><br/>");
  append_page_footer();
  server.send(200, "text/html", webpage); // Send a response to the client to enter their inputs, if needed, Enter=defaults
  Serial.println(server.args());
  Serial.println("0:" + String(server.arg(0)));
  if (server.args()) { // Arguments were received
    String Argument_Name   = server.argName(0);
    String client_response = server.arg(0);
    if (Argument_Name == "message") message = client_response;
  }
}

void append_page_header() {
  webpage  = F("<!DOCTYPE html><html><head>"); // Change lauguage (en) as required
  webpage += F("<meta http-equiv='refresh' content='60'/>"); // 60-sec refresh time
  webpage += F("<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>");
  webpage += F("<title>anakkendali.com</title><style>");
  webpage += F("body {width:");
  webpage += SITE_WIDTH;
  webpage += F("px;margin:0 auto;font-family:arial;font-size:14px;text-align:center;color:#cc66ff;background-color:#F7F2Fd;}");
  webpage += F("ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#d8d8d8;font-size:14px;}");
  webpage += F("li{float:left;border-right:1px solid #bbb;}last-child {border-right:none;}");
  webpage += F("li a{display: block;padding:2px 12px;text-decoration:none;}");
  webpage += F("li a:hover{background-color:#FFFFFF;}");
  webpage += F("section {font-size:16px;}");
  webpage += F("p {background-color:#E3D1E2;font-size:16px;}");
  webpage += F("div.header,div.footer{padding:0.5em;color:white;background-color:gray;clear:left;}");
  webpage += F("h1{background-color:#d8d8d8;font-size:26px;}");
  webpage += F("h2{color:#9370DB;font-size:22px;line-height:65%;}");
  webpage += F("h3{color:#9370DB;font-size:16px;line-height:55%;}");
  webpage += F("table{font-family:arial,sans-serif;font-size:16px;border-collapse:collapse;width:100%;height:100%;}");
  webpage += F("td {border:0px solid black;text-align:center;padding:2px;}");
  webpage += F("th {border:0px solid black;text-align:center;padding:2px;font-size:22px;}");
  webpage += F(".style1 {text-align:center;font-size:50px;background-color:#D8BFD8;height:57px;}");
  webpage += F(".style2 {text-align:center;font-size:16px;background-color:#ADD8E6;color:#0066ff;height:25px;}");
  webpage += F(".style3 {text-align:center;font-size:78px;background-color:#FFE4B5;height:107px;}");
  webpage += F(".style4 {text-align:center;font-size:16px;background-color:#FFE4B5;height:30px;}");
  webpage += F(".style5 {text-align:center;font-size:20px;background-color:#D9BFD9;}");
  webpage += F(".style6 td {border:0px solid black;text-align:right;padding:0px;font-size:14px;background-color:#B0C4DE;color:#0066ff;height:20px;}");
  webpage += F(".style7 {text-align:center;font-size:12px;background-color:#F7F2Fd;width:100%;}");
  webpage += F(".style8 {text-align:center;border:0px solid black;padding:2px;color:#990099;}");
  webpage += F(".style9 {text-align:center;font-size:14px;color:blue;}");
  webpage += F("img.imgdisplay {display:block;margin-left:auto;margin-right:auto;}");
  webpage += F("sup {vertical-align:super;font-size:26px;}");
  webpage += F("sup1{vertical-align:super;font-size:10px;}");
  webpage += F("ul{list-style-type:none;display:flex;justify-content:center;}");
  webpage += F("ul li{display: list-item;background:black;padding: 5px 10px;color:white;margin: 0 3px;}");
  webpage += F("</style></head><body><h1>anakkendali.com DOT MATRIX 8x8 ");
  webpage += version + "</h1>";
}

void append_page_footer() { // Saves repeating many lines of code for HTML page footers
  webpage += F("<ul><li><a href='/' style=\"color:#FFFFFF;\">Press Enter Teks</a></li></ul>");
  webpage += F("<a href='https://www.anakkendali.com'>anakkendali.com</a>");
  webpage += F("</body></html>");
}

ketiga program di atas wajib dalam satu project folder, jangan di pisah karena akan menyebabkan program ERROR.

hubungkan komputer atau android pada wifi anakkendali.com atau jika kalian ubah nama ssid nya maka hubungkan ke nama tersebut kemudian silahkan buka ip 192.168.4.1 pada browser kalian, dan akan tampak halaman seperti pada gambar dibawah :

Tutorial selanjutnya akan membahas tentang bagaimana cara input data alarm dari website. jadi silahkan sebarkan artikel ini, jangan pelit !!! supaya saya juga semangat menulis dan mengembangkan website nya.

mungkin cukup sekian apa yang bisa saya bagikan kali ini, semoga bermanfaat dan jika ada yang ingin di tanyakan silahkan berkomentar di bawah.

One Reply to “Tutorial Dot Matrix 8×8 Wemos D1 Mini Input Teks Webserver”

  1. Veni

    kalo pake P10 sebanyak 3 panel (96 x 16) dibagian mana diubah kak ?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *