Membangun RUNNING TEXT dengan ESP8266

Running text mungil serbaguna dan biaya murah menggunakan NodeMCU ESP8266 dan led matrix max7219 64x8. Mengganti teksnya melalui halaman web dapat langsung diakses dari smartphone karena memancarkan wifi atau dapat jg diakses secara otomatis menggunakan script di perangkat lain seperti raspberry pi atau mikrotik.

Adapun bahan dan alat yang dibutuhkan adalah sebuah PC yang terinstall Arduino IDE, kabel micro USB ESP8266 dan led matrix max7219 64x8 tentu berikut kabel penghubungnya.

Setelah Arduino IDE terinstall jangan lupa menambahkan Additional Board Manager di Preferences: https://arduino.esp8266.com/stable/package_esp8266com_index.json

Driver USB to serial CH340 harus diinstall agar PC kita dapat terhubung ke ESP8266

https://sparks.gogo.co.nz/ch340.html

/* ESP8266 plus MAX7219 LED Matrix that displays messages revecioved via a WiFi connection using a Web Server *#################################################################################################################################### This software, the ideas and concepts is Copyright (c) David Bird 2018. All rights to this software are reserved. Any redistribution or reproduction of any part or all of the contents in any form is prohibited other than the following: 1. You may print or download to a local hard disk extracts for your personal and non-commercial use only. 2. You may copy the content to individual third parties for their personal use, but only if you acknowledge the author David Bird as the source of the material. 3. You may not, except with my express written permission, distribute or commercially exploit the content. 4. You may not transmit it or store it in any other website or other form of electronic retrieval system for commercial purposes. The above copyright ('as annotated') notice and this permission notice shall be included in all copies or substantial portions of the Software and where the software use is visible to an end-user. THE SOFTWARE IS PROVIDED "AS IS" FOR PRIVATE USE ONLY, IT IS NOT FOR COMMERCIAL USE IN WHOLE OR PART OR CONCEPT. FOR PERSONAL USE IT IS SUPPLIED WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHOR OR COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. See more at http://www.dsbird.org.uk */ //################# LIBRARIES ########################## #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <DNSServer.h> #include <SPI.h> #include <Adafruit_GFX.h> #include <Max72xxPanel.h> const char *ssid = "Djatun-Siregar"; const char *password = ""; const char *ssidAP = "MTX1"; const char *passwordAP = "Jatrix2024"; int pinCS = D4; // Attach CS to this pin, DIN to MOSI and CLK to SCK (cf http://arduino.cc/en/Reference/SPI ) int numberOfHorizontalDisplays = 8; int numberOfVerticalDisplays = 1; char time_value[20]; String message, webpage; //################# DISPLAY CONNECTIONS ################ // LED Matrix Pin -> ESP8266 Pin // Vcc -> 3v (3V on NodeMCU 3V3 on WEMOS) // Gnd -> Gnd (G on NodeMCU) // DIN -> D7 (Same Pin for WEMOS) // CS -> D4 (Same Pin for WEMOS) // CLK -> D5 (Same Pin for WEMOS) //################ PROGRAM SETTINGS #################### String version = "2024"; // Version of this program ESP8266WebServer server(80); // Start server on port 80 (default for a web-browser, change to your requirements, e.g. 8080 if your Router uses port 80 // To access server from the outside of a WiFi network e.g. ESP8266WebServer server(8266) add a rule on your Router that forwards a // connection request to http://your_network_ip_address:8266 to port 8266 and view your ESP server from anywhere. // Example http://yourhome.ip:8266 will be directed to http://192.168.0.40:8266 or whatever IP address your router gives to this server Max72xxPanel matrix = Max72xxPanel(pinCS, numberOfHorizontalDisplays, numberOfVerticalDisplays); int wait = 75; // In milliseconds between scroll movements int spacer = 1; int width = 5 + spacer; // The font width is 5 pixels void setup() { Serial.begin(115200); // initialize serial communications // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting WiFi..."); } Serial.println(ssid); Serial.println(WiFi.localIP()); WiFi.softAP(ssidAP, passwordAP); // Start the access point Serial.print("Access Point \""); Serial.print(ssidAP); Serial.println("\" started"); Serial.print(F("Use this URL to connect: http://")); Serial.println(WiFi.softAPIP().toString() + "/"); // Print the IP address //---------------------------------------------------------------------- server.on("/",GetMessage); server.begin(); Serial.println(F("Webserver started...")); matrix.setIntensity(2); // Use a value between 0 and 15 for brightness matrix.setRotation(0, 1); // The first display is position upside down matrix.setRotation(1, 1); // The first display is position upside down matrix.setRotation(2, 1); // The first display is position upside down matrix.setRotation(3, 1); // The first display is position upside down matrix.setRotation(4, 1); // The first display is position upside down matrix.setRotation(5, 1); // The first display is position upside down matrix.setRotation(6, 1); // The first display is position upside down matrix.setRotation(7, 1); // The first display is position upside down wait = 25; message = "Selamat datang di Warung Madura buka 25Jam"; display_message(message); // Display the message wait = 50; message = "Password WiFi gratis segera ditampilkan di sini "; } void loop() { server.handleClient(); display_message(message); // Display the message } void display_message(String message) { for ( int i = 0 ; i < width * message.length() + matrix.width() - spacer; i++ ) { //matrix.fillScreen(LOW); int letter = i / width; int x = (matrix.width() - 1) - i % width; int y = (matrix.height() - 8) / 2; // center the text vertically while ( x + width - spacer >= 0 && letter >= 0 ) { if ( letter < message.length() ) { matrix.drawChar(x, y, message[letter], HIGH, LOW, 1); // HIGH LOW means foreground ON, background OFF, reverse these to invert the display! } letter--; x -= width; } matrix.write(); // Send bitmap to display delay(wait / 2); } } void GetMessage() { String IPaddress = WiFi.localIP().toString(); String html ="<!DOCTYPE html><html><head><meta http-equiv='refresh' content='60'/><meta http-equiv='content-type' content='text/html; charset=UTF-8'/><title>Message Board</title><style> :root { /* generic */ --gutterSm: 0.4rem; --gutterMd: 0.8rem; --gutterLg: 1.6rem; --gutterXl: 2.4rem; --gutterXx: 7.2rem; --colorPrimary400: #7e57c2; --colorPrimary600: #5e35b1; --colorPrimary800: #4527a0; --fontFamily: \"Dosis\", sans-serif; --fontSizeSm: 1.2rem; --fontSizeMd: 1.6rem; --fontSizeLg: 2.1rem; --fontSizeXl: 2.8rem; --fontSizeXx: 3.6rem; --lineHeightSm: 1.1; --lineHeightMd: 1.8; --transitionDuration: 300ms; --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1); /* floated labels */ --inputPaddingV: var(--gutterMd); --inputPaddingH: var(--gutterLg); --inputFontSize: var(--fontSizeLg); --inputLineHeight: var(--lineHeightMd); --labelScaleFactor: 0.8; --labelDefaultPosY: 50%; --labelTransformedPosY: calc( (var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) * var(--inputLineHeight)) ); --inputTransitionDuration: var(--transitionDuration); --inputTransitionTF: var(--transitionTF); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 10px; } body { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100vw; height: 100vh; color: #455A64; background-image: linear-gradient(to bottom right, black , gray); font-family: var(--fontFamily); font-size: var(--fontSizeMd); line-height: var(--lineHeightMd); } .Wrapper { flex: 0 0 80%; max-width: 80%; } .Title { margin: 0 0 var(--gutterXx) 0; padding: 0; color: #fff; font-size: var(--fontSizeXx); font-weight: 400; line-height: var(--lineHeightSm); text-align: center; text-shadow: -0.1rem 0.1rem 0.2rem var(--colorPrimary800); } .Input { position: relative; } .Input-text { display: block; margin: 0; padding: var(--inputPaddingV) var(--inputPaddingH); color: inherit; width: 100%; font-family: inherit; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); border: none; border-radius: 0.4rem; transition: box-shadow var(--transitionDuration); } .Input-text::placeholder { color: #505050; } .Input-text:focus { outline: none; box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600); } .Input-label { display: block; position: absolute; bottom: 50%; left: 1rem; color: #fff; font-family: inherit; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); opacity: 0; transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1); transform-origin: 0 0; transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF); } .Input-text:placeholder-shown + .Input-label { visibility: hidden; z-index: -1; } .Input-text:not(:placeholder-shown) + .Input-label, .Input-text:focus:not(:placeholder-shown) + .Input-label { visibility: visible; z-index: 1; opacity: 1; transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor)); transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms; } </style></head><body> <div class=\"Wrapper\"> <h1 class=\"Title\">LED Matrix " + version + "</h1> <div class=\"Input\"> <form action=\"http://" + IPaddress +"\" method=\"POST\"> <input type=\"text\" id=\"input\" class=\"Input-text\" name=\"message\" placeholder=\"Tulis sesuatu...\"> <label for=\"input\" class=\"Input-label\">...kemudian Enter</label> </form> </div> </div> </body></html>"; webpage = html; // don't delete this command, it ensures the server works reliably! 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; } }

Adapun kode di atas sebagian besar diambil dari https://github.com/G6EJD/ESP8266-Remote-Message-Board dengan penambahan fungsi esp8266 sebagai wifi station dan merangkap sebagai access point juga.

Berhubung tidak semua board esp8266 itu sama jadi kita harus pilih-pilih yang sesuai denga board kita. Sebagian besar menggunakan generic tapi terakhir yang kami beli cocoknya menggunakan board LOLIN(WEMOS) D1 mini (Clone)

Begitu juga degan halaman webnya sudah diganti sesuai selera. Untuk menggantinya juga cukup mudah tinggal cari saja template css gratisan di google dengan kata kunci "input css template" nanti ada bbrp situs yang menyediakan puluhan template gratis. tinggal edit sesuai selera kemudian satukan menjadi sebuah 1 halaman web  dan convert menjadi kode arduino di https://davidjwatts.com/youtube/esp8266/esp-convertHTM.html#

Ini baru buat lagi halaman inputnya https://djatun.w3spaces.com/MessageBoard2024.html

ssid adalah nama wifi kita di rumah sedangkan ssidAP adalah wifi yang dipancarkan ulang oleh esp8266 secara default akan memberikan ip 192.168.4.xxx dan dapat diakses melalui hape ke ip 192.168.4.1 atau menggunakan aplikasi  NodeMCU di android.

Untuk mengirim teks dari mikrotik bisa menggunakan script seperti di bawah ini:

/tool fetch url="http://192.168.12.56/?message=Test%20Kirim%20Pesan%20aja" keep-result=no;

jadi kita bisa membuat password wifi kita ditampilkan di running teks. untuk mendapatkan random teks kita bisa menggunakan script mikrotik dari logam.id