.: Papan Score DMD P10 ESP32 Olahraga Input via Browser

Papan Score DMD P10 ESP32 Olahraga Input via Browser

Pada kesempatan kali ini saya akan menjelaskan mengenai bagaimana cara membuat sebuah papan scoreboard sederhana dengan menggunakan ESP32 dan input via Aplikasi Browser seperti chrome atau mozilla. alat ini menggunakan input nama team dan score melalui browser serta bisa geser posisi untuk titik kemunculan text di dmd p10. berikut koding dan skemanya.

1. Skema

2. Interface

3. Program ESP32

/*
============================================================
SCOREBOARD SEPAK BOLA
ESP32 + P10 + DMD32
ESP32 sebagai ACCESS POINT / HOTSPOT
============================================================

WIFI
SSID : SCOREBOARD
PASSWORD : 12345678
IP : 192.168.4.1

FITUR
------------------------------------------------------------
- ESP32 sebagai Access Point
- Web browser melalui HP
- Nama Team A maksimal 3 huruf
- Nama Team B maksimal 3 huruf
- Score Team A
- Score Team B
- +1 / -1
- Reset score
- Posisi X
- Posisi Y
- Geser tampilan dari browser
- HOME untuk posisi awal
- P10 32x16
- Library DMD32
============================================================
*/

#include <WiFi.h>
#include <WebServer.h>
#include <SPI.h>
#include <DMD32.h>
#include "fonts/SystemFont5x7.h"

// ============================================================
// KONFIGURASI P10
// ============================================================

#define DISPLAYS_ACROSS 1
#define DISPLAYS_DOWN 1

DMD dmd(DISPLAYS_ACROSS, DISPLAYS_DOWN);

// ============================================================
// TIMER DMD32
// ============================================================

hw_timer_t *timer = NULL;

void IRAM_ATTR triggerScan()
{
dmd.scanDisplayBySPI();
}

// ============================================================
// WIFI ACCESS POINT
// ============================================================

const char* ssid = "SCOREBOARD";
const char* password = "12345678";

WebServer server(80);

// ============================================================
// DATA SCOREBOARD
// ============================================================

String teamA = "INA";
String teamB = "BRA";

int scoreA = 0;
int scoreB = 0;

// ============================================================
// POSISI TAMPILAN
// ============================================================

int posX = 0;
int posY = 0;

// ============================================================
// BATAS SCORE
// ============================================================

const int MAX_SCORE = 99;

// ============================================================
// TAMPIL SCORE KE P10
// ============================================================

void tampilScore()
{
dmd.clearScreen(true);

dmd.selectFont(SystemFont5x7);

// ========================================================
// BARIS ATAS
// TEAM A + SCORE A
// ========================================================

String barisA = teamA + " " + String(scoreA);

dmd.drawString(
posX,
posY,
barisA.c_str(),
barisA.length(),
GRAPHICS_NORMAL
);

// ========================================================
// BARIS BAWAH
// TEAM B + SCORE B
// ========================================================

String barisB = teamB + " " + String(scoreB);

dmd.drawString(
posX,
posY + 8,
barisB.c_str(),
barisB.length(),
GRAPHICS_NORMAL
);
}

// ============================================================
// HALAMAN WEB
// ============================================================

void handleRoot()
{
String html = R"rawliteral(
<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1.0">

<title>Scoreboard ESP32</title>

<style>

* {
box-sizing:border-box;
}

body {
margin:0;
padding:15px;
background:#111;
color:white;
font-family:Arial,sans-serif;
text-align:center;
}

.container {
max-width:500px;
margin:auto;
}

h1 {
margin:5px;
font-size:30px;
}

.status {
background:#003b20;
color:#00ff66;
padding:10px;
border-radius:10px;
margin:15px 0;
}

.teams {
display:flex;
gap:10px;
}

.team {
background:#222;
width:50%;
padding:15px;
border-radius:15px;
}

.team h2 {
margin-top:0;
}

.nama {
width:100px;
padding:8px;
font-size:28px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
border:0;
border-radius:8px;
}

.score {
font-size:65px;
font-weight:bold;
margin:10px;
}

button {
border:0;
border-radius:10px;
padding:12px 20px;
margin:4px;
font-size:22px;
font-weight:bold;
}

.plus {
background:#00aa44;
color:white;
}

.minus {
background:#dd2222;
color:white;
}

.save {
width:100%;
background:#0066dd;
color:white;
margin-top:15px;
}

.reset {
width:100%;
background:#ff7700;
color:white;
margin-top:10px;
}

.position {
margin-top:20px;
padding:15px;
background:#222;
border-radius:15px;
}

.position button {
min-width:70px;
min-height:55px;
background:#444;
color:white;
}

.home {
background:#0066aa !important;
}

.posvalue {
font-size:20px;
margin:10px;
color:#00ff66;
}

@media(max-width:420px) {

.teams {
flex-direction:column;
}

.team {
width:100%;
}

}

</style>

<script>

// ========================================================
// SCORE TEAM A
// ========================================================

function scoreA(v)
{
fetch("/scoreA?v=" + v)
.then(() => {
updateScore();
});
}

// ========================================================
// SCORE TEAM B
// ========================================================

function scoreB(v)
{
fetch("/scoreB?v=" + v)
.then(() => {
updateScore();
});
}

// ========================================================
// UPDATE SCORE TANPA RELOAD
// ========================================================

function updateScore()
{
fetch("/data")
.then(response => response.json())
.then(data => {

document.getElementById("scoreA").innerHTML =
data.a;

document.getElementById("scoreB").innerHTML =
data.b;

document.getElementById("posX").innerHTML =
data.x;

document.getElementById("posY").innerHTML =
data.y;

});
}

// ========================================================
// RESET SCORE
// ========================================================

function resetScore()
{
if(confirm("Reset score?"))
{
fetch("/reset")
.then(() => {
updateScore();
});
}
}

// ========================================================
// SIMPAN NAMA TEAM
// ========================================================

function saveTeam()
{
let a =
document.getElementById("teamA").value;

let b =
document.getElementById("teamB").value;

a = a.toUpperCase().substring(0,3);

b = b.toUpperCase().substring(0,3);

fetch(
"/team?a=" +
encodeURIComponent(a) +
"&b=" +
encodeURIComponent(b)
)
.then(() => {

document.getElementById("teamA").value = a;

document.getElementById("teamB").value = b;

alert("Nama team disimpan");

});
}

// ========================================================
// POSISI
// ========================================================

function posisi(arah)
{
fetch("/position?direction=" + arah)
.then(() => {
updateScore();
});
}

</script>

</head>

<body>

<div class="container">

<h1>⚽ SCOREBOARD</h1>

<div class="status">

ESP32 ACCESS POINT<br>

SCOREBOARD<br>

192.168.4.1

</div>





<div class="teams">



<div class="team">

<h2>TEAM A</h2>

<input
class="nama"
id="teamA"
maxlength="3"
value=")rawliteral";

html += teamA;

html += R"rawliteral("
oninput="
this.value=this.value
.toUpperCase()
.substring(0,3)
">

<div
class="score"
id="scoreA">

)rawliteral";

html += String(scoreA);

html += R"rawliteral(

</div>

<button
class="minus"
onclick="scoreA(-1)">

-1

</button>

<button
class="plus"
onclick="scoreA(1)">

+1

</button>

</div>



<div class="team">

<h2>TEAM B</h2>

<input
class="nama"
id="teamB"
maxlength="3"
value=")rawliteral";

html += teamB;

html += R"rawliteral("
oninput="
this.value=this.value
.toUpperCase()
.substring(0,3)
">

<div
class="score"
id="scoreB">

)rawliteral";

html += String(scoreB);

html += R"rawliteral(

</div>

<button
class="minus"
onclick="scoreB(-1)">

-1

</button>

<button
class="plus"
onclick="scoreB(1)">

+1

</button>

</div>

</div>





<button
class="save"
onclick="saveTeam()">

SIMPAN NAMA TEAM

</button>





<button
class="reset"
onclick="resetScore()">

RESET SCORE

</button>





<div class="position">

<h2>POSISI SCORE</h2>

<div>

<button
onclick="posisi('up')">

▲

</button>

</div>

<div>

<button
onclick="posisi('left')">

◀

</button>

<button
class="home"
onclick="posisi('home')">

HOME

</button>

<button
onclick="posisi('right')">

▶

</button>

</div>

<div>

<button
onclick="posisi('down')">

▼

</button>

</div>

<div class="posvalue">

X =
<span id="posX">)rawliteral";

html += String(posX);

html += R"rawliteral(</span>

  

Y =
<span id="posY">)rawliteral";

html += String(posY);

html += R"rawliteral(</span>

</div>

</div>

</div>

</body>

</html>

)rawliteral";

server.send(
200,
"text/html",
html
);
}

// ============================================================
// DATA
// ============================================================

void handleData()
{
String json = "{";

json += "\"a\":";
json += String(scoreA);

json += ",";

json += "\"b\":";
json += String(scoreB);

json += ",";

json += "\"x\":";
json += String(posX);

json += ",";

json += "\"y\":";
json += String(posY);

json += "}";

server.send(
200,
"application/json",
json
);
}

// ============================================================
// SCORE A
// ============================================================

void handleScoreA()
{
if (server.hasArg("v"))
{
scoreA +=
server.arg("v").toInt();
}

if (scoreA < 0)
scoreA = 0;

if (scoreA > MAX_SCORE)
scoreA = MAX_SCORE;

tampilScore();

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

// ============================================================
// SCORE B
// ============================================================

void handleScoreB()
{
if (server.hasArg("v"))
{
scoreB +=
server.arg("v").toInt();
}

if (scoreB < 0)
scoreB = 0;

if (scoreB > MAX_SCORE)
scoreB = MAX_SCORE;

tampilScore();

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

// ============================================================
// RESET SCORE
// ============================================================

void handleReset()
{
scoreA = 0;
scoreB = 0;

tampilScore();

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

// ============================================================
// NAMA TEAM
// ============================================================

void handleTeam()
{

if (server.hasArg("a"))
{

teamA =
server.arg("a");

teamA.toUpperCase();

if (teamA.length() > 3)
{
teamA =
teamA.substring(0,3);
}

}

if (server.hasArg("b"))
{

teamB =
server.arg("b");

teamB.toUpperCase();

if (teamB.length() > 3)
{
teamB =
teamB.substring(0,3);
}

}

tampilScore();

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

// ============================================================
// POSISI SCORE
// ============================================================

void handlePosition()
{

if (!server.hasArg("direction"))
{
server.send(
400,
"text/plain",
"NO DIRECTION"
);

return;
}

String arah =
server.arg("direction");

// -----------------------------------------
// KIRI
// -----------------------------------------

if (arah == "left")
{
posX--;

// batas kiri
if (posX < -31)
posX = -31;
}

// -----------------------------------------
// KANAN
// -----------------------------------------

if (arah == "right")
{
posX++;

// batas kanan
if (posX > 31)
posX = 31;
}

// -----------------------------------------
// ATAS
// -----------------------------------------

if (arah == "up")
{
posY--;

if (posY < -15)
posY = -15;
}

// -----------------------------------------
// BAWAH
// -----------------------------------------

if (arah == "down")
{
posY++;

if (posY > 15)
posY = 15;
}

// -----------------------------------------
// HOME
// -----------------------------------------

if (arah == "home")
{
posX = 0;
posY = 0;
}

tampilScore();

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

// ============================================================
// SETUP
// ============================================================

void setup()
{

Serial.begin(115200);

delay(1000);

Serial.println();
Serial.println("==============================");
Serial.println(" SCOREBOARD ESP32");
Serial.println("==============================");

// ========================================================
// ACCESS POINT
// ========================================================

Serial.println("Membuat Access Point...");

WiFi.mode(WIFI_AP);

delay(500);

bool apOK =
WiFi.softAP(
ssid,
password
);

if (apOK)
{

Serial.println("ACCESS POINT OK");

Serial.print("SSID : ");
Serial.println(ssid);

Serial.print("PASSWORD : ");
Serial.println(password);

Serial.print("IP : ");
Serial.println(
WiFi.softAPIP()
);

}
else
{

Serial.println(
"ACCESS POINT GAGAL!"
);

}

// ========================================================
// TIMER DMD32
// ========================================================

Serial.println(
"Memulai DMD32..."
);

timer =
timerBegin(
0,
80,
true
);

timerAttachInterrupt(
timer,
&triggerScan,
true
);

timerAlarmWrite(
timer,
300,
true
);

timerAlarmEnable(timer);

// ========================================================
// DMD
// ========================================================

dmd.clearScreen(true);

dmd.selectFont(
SystemFont5x7
);

tampilScore();

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

server.on(
"/",
handleRoot
);

server.on(
"/data",
handleData
);

server.on(
"/scoreA",
handleScoreA
);

server.on(
"/scoreB",
handleScoreB
);

server.on(
"/reset",
handleReset
);

server.on(
"/team",
handleTeam
);

server.on(
"/position",
handlePosition
);

server.begin();

Serial.println();
Serial.println("==============================");
Serial.println(" WEB SERVER AKTIF");
Serial.println("==============================");

Serial.print(
"Buka browser: http://"
);

Serial.println(
WiFi.softAPIP()
);

Serial.println("==============================");

}

// ============================================================
// LOOP
// ============================================================

void loop()
{

server.handleClient();

}

4. VIDEO HASILNYA

.

HOME

Translate

Papan Score DMD P10 ESP32 Olahraga Input via Browser

No comments:

Post a Comment