add start fermentation to website

This commit is contained in:
Muhammad Izza Alfiansyah 2024-05-11 09:26:25 +07:00
parent c3953d7523
commit f91379ae5f
5 changed files with 392 additions and 314 deletions

View File

@ -1,18 +1,19 @@
// // #include <ESP32_Supabase.h> // #include <ESP32_Supabase.h>
// #include <LiquidCrystal_I2C.h> #include <LiquidCrystal_I2C.h>
// #include <DHT.h> #include <DHT.h>
// #include <WiFi.h> // #include <WiFi.h>
// #include <Arduino_JSON.h> #include <Arduino_JSON.h>
// #include <assert.h> #include <assert.h>
// #include <NTPClient.h> // #include <NTPClient.h>
// #include <WiFiUdp.h> // #include <WiFiUdp.h>
// #include <Callmebot_ESP32.h>
// #define BOARD "ESP-32" #define BOARD "ESP-32"
// #define MQPIN 34 #define MQPIN 34
// #define DHTPIN 4 #define DHTPIN 4
// #define LAMPPIN 26 #define LAMPPIN 26
// #define FANPIN 25 #define FANPIN 25
// #define BUZZERPIN 23 #define BUZZERPIN 23
// #define SUPABASE_URL "https://oxmfbobxmqldgthethlz.supabase.co" // #define SUPABASE_URL "https://oxmfbobxmqldgthethlz.supabase.co"
// #define SUPABASE_ANON_KEY "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im94bWZib2J4bXFsZGd0aGV0aGx6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDgwNjQ1NDksImV4cCI6MjAyMzY0MDU0OX0.pTDI9CsiN8wthOWhHjM1dONrRP_Hd7BcbwfKgeKGhtU" // #define SUPABASE_ANON_KEY "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im94bWZib2J4bXFsZGd0aGV0aGx6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDgwNjQ1NDksImV4cCI6MjAyMzY0MDU0OX0.pTDI9CsiN8wthOWhHjM1dONrRP_Hd7BcbwfKgeKGhtU"
@ -20,270 +21,297 @@
// #define WIFI_SSID "Vivo Y21c" // #define WIFI_SSID "Vivo Y21c"
// #define WIFI_PASSWORD "12346789" // #define WIFI_PASSWORD "12346789"
// // Supabase db; // Supabase db;
// LiquidCrystal_I2C lcd(0x27, 16, 2); LiquidCrystal_I2C lcd(0x27, 16, 2);
// DHT dht(DHTPIN, 22); DHT dht(DHTPIN, 22);
// // WiFiUDP ntpUDP; // WiFiUDP ntpUDP;
// // NTPClient timeClient(ntpUDP, "pool.ntp.org", 3600 * 7, 60000); // GMT +7 // NTPClient timeClient(ntpUDP, "pool.ntp.org", 3600 * 7, 60000); // GMT +7
// float suhu; float suhu;
// float kelembaban; float kelembaban;
// float persentaseKadarGas; float persentaseKadarGas;
// bool pengujian; bool pengujian;
// float kadarGasVoltase; float kadarGasVoltase;
// // JSONVar dataPengujian; String status = "Menunggu";
JSONVar dataPengujian;
// void setup(){ void setup(){
// pinMode(MQPIN, INPUT); pinMode(MQPIN, INPUT);
// pinMode(LAMPPIN, OUTPUT); pinMode(LAMPPIN, OUTPUT);
// pinMode(FANPIN, OUTPUT); pinMode(FANPIN, OUTPUT);
// pinMode(BUZZERPIN, OUTPUT); pinMode(BUZZERPIN, OUTPUT);
// digitalWrite(LAMPPIN, HIGH); digitalWrite(LAMPPIN, HIGH);
// digitalWrite(FANPIN, HIGH); digitalWrite(FANPIN, HIGH);
digitalWrite(BUZZERPIN, HIGH);
// Serial.begin(115200); Serial.begin(115200);
// // inisialisasi LCD // inisialisasi LCD
// lcd.init(); lcd.init();
// lcd.backlight(); lcd.backlight();
// lcd.setCursor(0, 0); lcd.setCursor(0, 0);
// lcd.print("Memuat.........."); lcd.print("Memuat..........");
// // inisialisasi DHT22 // inisialisasi DHT22
// dht.begin(); dht.begin();
// // inisialisasi WiFi // inisialisasi WiFi
// // Serial.print("Menghubungkan ke WiFi"); // Serial.print("Menghubungkan ke WiFi");
// // WiFi.begin(WIFI_SSID, WIFI_PASSWORD); // WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
// delay(20000); delay(20000);
// // menampilkan gagal terhubung ke jaringan pada LCD // menampilkan gagal terhubung ke jaringan pada LCD
// // if (WiFi.status() != WL_CONNECTED) { // if (WiFi.status() != WL_CONNECTED) {
// // lcd.setCursor(0, 0); // lcd.setCursor(0, 0);
// // lcd.print("Gagal terhubung"); // lcd.print("Gagal terhubung");
// // lcd.setCursor(0, 1); // lcd.setCursor(0, 1);
// // lcd.print("ke jaringan!"); // lcd.print("ke jaringan!");
// // } // }
// // inisialisasi waktu // inisialisasi waktu
// // timeClient.begin(); // timeClient.begin();
// // inisialisasi supabase // inisialisasi supabase
// // db.begin(SUPABASE_URL, SUPABASE_ANON_KEY); // db.begin(SUPABASE_URL, SUPABASE_ANON_KEY);
// // getDataPengujian(); // getDataPengujian();
// } }
// void loop(){ void loop(){
// // timeClient.update(); // timeClient.update();
// // mendapatkan nilai kadar gas // mendapatkan nilai kadar gas
// float kadarGas = getKadarGas(); float kadarGas = getKadarGas();
// kadarGasVoltase = kadarGas / 4095.0 * 3.3; kadarGasVoltase = kadarGas / 4095.0 * 3.3;
// persentaseKadarGas = getPersentaseKadarGas(kadarGasVoltase); persentaseKadarGas = getPersentaseKadarGas(kadarGasVoltase);
// // menampilkan kadar gas pada LCD // menampilkan kadar gas pada LCD
// lcd.clear(); lcd.clear();
// lcd.setCursor(0, 0); lcd.setCursor(0, 0);
// lcd.print("G : "); lcd.print("G : ");
// lcd.print(kadarGas); lcd.print(persentaseKadarGas, 1);
// lcd.setCursor(0,1); lcd.print("%-");
// lcd.print("PG : "); lcd.print(kadarGasVoltase, 2);
// lcd.print(persentaseKadarGas, 1); lcd.print("V");
// lcd.print(" %"); lcd.setCursor(0,1);
lcd.print("H : ");
lcd.print(status);
// delay(2000); delay(2000);
// // membaca nilai suhu dan kelembaban // membaca nilai suhu dan kelembaban
// suhu = dht.readTemperature(); suhu = dht.readTemperature();
// kelembaban = dht.readHumidity(); kelembaban = dht.readHumidity();
// // menampilkan suhu dan kelembaban pada LCD if (suhu != 25.5 && kelembaban != 25.5) {
// lcd.clear(); // menampilkan suhu dan kelembaban pada LCD
// lcd.setCursor(0, 0); lcd.clear();
// lcd.print("S : "); lcd.setCursor(0, 0);
// lcd.print(suhu, 1); lcd.print("S : ");
// lcd.print(" C"); lcd.print(suhu, 1);
// lcd.setCursor(0, 1); lcd.print(" C");
// lcd.print("K : "); lcd.setCursor(0, 1);
// lcd.print(kelembaban, 1); lcd.print("K : ");
// lcd.print(" %"); lcd.print(kelembaban, 1);
lcd.print(" %");
// // menyalakan lampu jika suhu di bawah 30 // menyalakan lampu jika suhu di bawah 30
// if (suhu <= 30) { if (suhu <= 30) {
// digitalWrite(LAMPPIN, LOW); digitalWrite(LAMPPIN, LOW);
// } else { } else {
// digitalWrite(LAMPPIN, HIGH); digitalWrite(LAMPPIN, HIGH);
// } }
// // menyalakan kipas jika suhu di atas 40 // menyalakan kipas jika suhu di atas 40
// if (suhu >= 40) { if (suhu >= 40) {
// digitalWrite(FANPIN, LOW); digitalWrite(FANPIN, LOW);
// } else { } else {
// digitalWrite(FANPIN, HIGH); digitalWrite(FANPIN, HIGH);
// } }
// // menentukan data masuk ke pengujian atau tidak berdasarkan jarak jam // menentukan data masuk ke pengujian atau tidak berdasarkan jarak jam
// // long unsigned epochTimeNow = timeClient.getEpochTime(); // long unsigned epochTimeNow = timeClient.getEpochTime();
// // if (dataPengujian.length() > 0) { // if (dataPengujian.length() > 0) {
// // JSONVar dataPengujianTerakhir = dataPengujian[dataPengujian.length() - 1]; // JSONVar dataPengujianTerakhir = dataPengujian[dataPengujian.length() - 1];
// // int created_time = dataPengujianTerakhir["created_time"]; // int created_time = dataPengujianTerakhir["created_time"];
// // int epochTimeDiff = epochTimeNow - created_time; // int epochTimeDiff = epochTimeNow - created_time;
// // int jam = epochTimeDiff / 3600; // 1 jam = 3600 detik; // int jam = epochTimeDiff / 3600; // 1 jam = 3600 detik;
// // if (jam >= 6) { // if (jam >= 6) {
// // pengujian = true; // pengujian = true;
// // } else { // } else {
// // pengujian = false; // pengujian = false;
// // } // }
// // } // }
// getDebugging(); getDebugging();
// // insertKondisiTapai(); // String dataHistoriJson = db.from("histori_fermentasi").select("*").order("created_at", "desc", true).limit(1).doSelect();
// // cekKematangan(); // JSONVar dataHistori = JSON.parse(dataHistoriJson);
// bool statusHistoriTerakhir = dataHistori[0]["selesai"];
// delay(2000); // if (statusHistoriTerakhir == false) {
// lcd.clear(); // digitalWrite(BUZZERPIN, LOW);
// }
// void getDebugging() { // bool historiTerakhirBerhasil = (bool) dataHistori[0]["berhasil"];
// Serial.println("Voltase Kadar Gas : " + String(kadarGasVoltase));
// Serial.println("Persentase Kadar Gas : " + String(persentaseKadarGas) + " %");
// Serial.println("Suhu : " + String(suhu) + " C");
// Serial.println("Kelembaban : " + String(kelembaban) + " %");
// }
// // mendapatkana nilai rata-rata kadar gas dari 100 data sampel yang diambil // if (historiTerakhirBerhasil) {
// float getKadarGas() { // status = "Matang";
// int total = 100; // } else {
// int valueTotal = 0; // status = "Gagal";
// }
// } else {
// digitalWrite(BUZZERPIN, HIGH);
// cekKematangan();
// cekKegagalan();
// insertKondisiTapai();
// }
// for (int i = 0; i < total; i++) { delay(2000);
// int value = analogRead(MQPIN); lcd.clear();
// valueTotal = valueTotal + value; }
// } }
// float valueAvg = valueTotal / total; void getDebugging() {
Serial.println("Voltase Kadar Gas : " + String(kadarGasVoltase));
Serial.println("Persentase Kadar Gas : " + String(persentaseKadarGas) + " %");
Serial.println("Suhu : " + String(suhu) + " C");
Serial.println("Kelembaban : " + String(kelembaban) + " %");
}
// return valueAvg; // mendapatkana nilai rata-rata kadar gas dari 100 data sampel yang diambil
// } float getKadarGas() {
int total = 100;
int valueTotal = 0;
// // konversi tegangan ke persen berdasarkan rumus yang telah ditentukan for (int i = 0; i < total; i++) {
// float getPersentaseKadarGas(float voltase) { int value = analogRead(MQPIN);
// float persentase = 0.2043 * pow(voltase, 2) + 0.0611 * voltase - 0.0249; valueTotal = valueTotal + value;
// float hasil = constrain(persentase * 100, 0, 100);
// return hasil;
// }
// // // menyimpan kondisi tapai pada database
// // void insertKondisiTapai() {
// // JSONVar req;
// // req["suhu"] = (float) suhu;
// // req["kelembaban"] = (float) kelembaban;
// // req["kadar_gas"] = (float) persentaseKadarGas;
// // req["pengujian"] = (bool) pengujian;
// // req["created_time"] = (int) timeClient.getEpochTime();
// // String json = JSON.stringify(req);
// // db.insert("kondisi_tapai", json, false);
// // if (pengujian == true) {
// // getDataPengujian();
// // }
// // }
// // // melakukan cek kematangan
// // void cekKematangan() {
// // String dataHistori = db.from("histori_fermentasi").select("*").order("created_at", "desc", true).limit(1).doSelect();
// // JSONVar dataHistoriTerakhir = JSON.parse(dataHistori)[0];
// // if (dataHistoriTerakhir["selesai"] == false) {
// // digitalWrite(BUZZERPIN, HIGH);
// // } else {
// // digitalWrite(BUZZERPIN, LOW);
// // if (persentaseKadarGas >= 5.3 && kelembaban >= 93) {
// // String dataAWalJson = db.from("kondisi_tapai").select("*").order("created_at", "asc", true).limit(1).doSelect();
// // String dataAkhirJson = db.from("kondisi_tapai").select("*").order("created_at", "desc", true).limit(1).doSelect();
// // JSONVar dataAwal = JSON.parse(dataAwalJson);
// // JSONVar dataAkhir = JSON.parse(dataAkhirJson);
// // JSONVar req;
// // req["berhasil"] = true;
// // req["waktu_awal"] = dataAwal[0]["created_time"];
// // req["waktu_akhir"] = dataAkhir[0]["created_time"]
// // String json = JSON.stringify(req);
// // db.insert("histori_fermentasi", json, false);
// // }
// // }
// // }
// // // mengambil data pengujian
// // void getDataPengujian() {
// // String json = db.from("kondisi_tapai").select("*").eq("pengujian", "TRUE").order("created_at", "asc", true).doSelect();
// // dataPengujian = JSON.parse(json);
// // }
/*
Rui Santos
Complete project details at https://RandomNerdTutorials.com/telegram-control-esp32-esp8266-nodemcu-outputs/
Project created using Brian Lough's Universal Telegram Bot Library: https://github.com/witnessmenow/Universal-Arduino-Telegram-Bot
Example based on the Universal Arduino Telegram Bot Library: https://github.com/witnessmenow/Universal-Arduino-Telegram-Bot/blob/master/examples/ESP8266/FlashLED/FlashLED.ino
*/
#include <WiFi.h>
#include <Callmebot_ESP32.h>
#define WEB_URL "http://localhost:5173";
const char* ssid = "Vivo Y21c";
const char* password = "12346789";
// Note :
// username : @username or phonenumber (Indonesia +62, Example: "+62897461238")
// You need to authorize CallMeBot to contact you using this link : https://api2.callmebot.com/txt/login.php.
// Or alternatively, you can start the bot sending /start to @CallMeBot_txtbot.
String username = "+6281231921351";
String text = "Hello from ESP32";
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
// Telegram Call
String text;
if (true) {
text = "Fermentasi tapai berhasil dan sudah matang.";
} else {
text = "Fermentasi tapai gagal.";
} }
text = text + " Lihat selengkapnya di " + WEB_URL + "."; float valueAvg = valueTotal / total;
Callmebot.telegramCall(username, text);
Serial.println(Callmebot.debug()); return valueAvg;
} }
void loop() { // konversi tegangan ke persen berdasarkan rumus yang telah ditentukan
float getPersentaseKadarGas(float voltase) {
float persentase = 0.2043 * pow(voltase, 2.0) + 0.0611 * voltase - 0.0249;
float hasil = constrain(persentase * 100, 0, 100);
return hasil;
} }
// void callUser(bool matang = true) {
// String pengaturanJson = db.from("pengaturan").select("*").limit(1).doSelect();
// JSONVar pengaturan = JSON.parse(pengaturanJson);
// String web_url = pengaturan[0]["web_url"];
// String text;
// if (matang == true) {
// text = "Fermentasi tapai berhasil dan sudah matang. ";
// } else {
// text = "Fermentasi tapai gagal. ";
// }
// text = text + "Lihat selengkapnya di " + web_url + ".";
// Callmebot.telegramCall(pengaturan[0]["telepon"], text, "id-ID-Standard-B");
// Serial.println(Callmebot.debug());
// }
// // menyimpan kondisi tapai pada database
// void insertKondisiTapai() {
// JSONVar req;
// req["suhu"] = (float) suhu;
// req["kelembaban"] = (float) kelembaban;
// req["kadar_gas"] = (float) persentaseKadarGas;
// req["pengujian"] = (bool) pengujian;
// req["created_time"] = (int) timeClient.getEpochTime();
// String json = JSON.stringify(req);
// db.insert("kondisi_tapai", json, false);
// if (pengujian == true) {
// getDataPengujian();
// }
// }
// // melakukan cek kematangan
// void cekKematangan() {
// if (persentaseKadarGas >= 5.28) {
// status = "Matang";
// String dataAwalJson = db.from("kondisi_tapai").select("*").order("created_time", "asc", true).limit(1).doSelect();
// String dataAkhirJson = db.from("kondisi_tapai").select("*").order("created_time", "desc", true).limit(1).doSelect();
// JSONVar dataAwal = JSON.parse(dataAwalJson);
// JSONVar dataAkhir = JSON.parse(dataAkhirJson);
// JSONVar req;
// req["berhasil"] = true;
// req["waktu_awal"] = (int) dataAwal[0]["created_time"];
// req["waktu_akhir"] = (int) dataAkhir[0]["created_time"];
// String json = JSON.stringify(req);
// callUser(true);
// db.insert("histori_fermentasi", json, false);
// pengujian = true;
// }
// }
// // mengecek kegagalan
// void cekKegagalan() {
// JSONVar dataPengujianAwal = dataPengujian[0];
// int epochTimeAwal = (int) dataPengujianAwal["created_time"];
// for (int i = 0; i < dataPengujian.length(); i++) {
// int epochTime = (int) dataPengujian[i]["created_time"];
// int epochTimeDiff = epochTime - epochTimeAwal;
// int lamaJam = epochTimeDiff / 3600;
// float kadarGas = (double) dataPengujian[i]["kadar_gas"];
// float regresiKadarGas = 0.0025 * pow(lamaJam, 2.0) - 0.0397 * lamaJam - 0.1222;
// float nilaiPerempat = regresiKadarGas / 4.0;
// if (lamaJam > 12) {
// if (kadarGas > (regresiKadarGas + nilaiPerempat) || kadarGas < (regresiKadarGas - nilaiPerempat)) {
// status = "Gagal";
// }
// }
// }
// if (status == "Gagal") {
// String dataAwalJson = db.from("kondisi_tapai").select("*").order("created_time", "asc", true).limit(1).doSelect();
// String dataAkhirJson = db.from("kondisi_tapai").select("*").order("created_time", "desc", true).limit(1).doSelect();
// JSONVar dataAwal = JSON.parse(dataAwalJson);
// JSONVar dataAkhir = JSON.parse(dataAkhirJson);
// JSONVar req;
// req["berhasil"] = false;
// req["waktu_awal"] = (int) dataAwal[0]["created_time"];
// req["waktu_akhir"] = (int) dataAkhir[0]["created_time"];
// String json = JSON.stringify(req);
// callUser(false);
// db.insert("histori_fermentasi", json, false);
// pengujian = true;
// }
// }
// // mengambil data pengujian
// void getDataPengujian() {
// String json = db.from("kondisi_tapai").select("*").eq("pengujian", "TRUE").order("created_time", "asc", true).doSelect();
// dataPengujian = JSON.parse(json);
// }

View File

@ -1,4 +1,4 @@
import { A, useLocation } from "@solidjs/router"; import { A, useLocation, useNavigate } from "@solidjs/router";
import { createSignal, For, JSX, Match, onMount, Switch } from "solid-js"; import { createSignal, For, JSX, Match, onMount, Switch } from "solid-js";
import SettingIcon from "./icons/SettingIcon"; import SettingIcon from "./icons/SettingIcon";
import HomeIcon from "./icons/HomeIcon"; import HomeIcon from "./icons/HomeIcon";
@ -6,6 +6,7 @@ import ArchiveIcon from "./icons/ArchiveIcon";
import ClockIcon from "./icons/ClockIcon"; import ClockIcon from "./icons/ClockIcon";
import supabase from "./utils/supabase"; import supabase from "./utils/supabase";
import { Histori } from "./types/Histori"; import { Histori } from "./types/Histori";
import { Pengaturan } from "./types/Pengaturan";
export default function (props: JSX.HTMLAttributes<HTMLDivElement>) { export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
const menus = [ const menus = [
@ -34,6 +35,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
const [lastHistori, setLastHistori] = createSignal<Histori | null>(null); const [lastHistori, setLastHistori] = createSignal<Histori | null>(null);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate();
const getLastHistori = async () => { const getLastHistori = async () => {
const { data } = await supabase const { data } = await supabase
@ -95,7 +97,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
.order("created_time", { ascending: false }) .order("created_time", { ascending: false })
.limit(1); .limit(1);
if (lastHistori()?.selesai) { if (lastHistori()?.selesai != false) {
if (lastData1![0].created_time == lastData2![0].created_time) { if (lastData1![0].created_time == lastData2![0].created_time) {
alert("Device offline!"); alert("Device offline!");
} }
@ -104,9 +106,23 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
await checkStatusDevice(); await checkStatusDevice();
}; };
const checkPengaturan = async () => {
const { data } = await supabase.from("pengaturan").select("*").limit(1);
if (data) {
const item: Pengaturan = data[0];
if (!item.running) {
if (location.pathname != "/") {
navigate("/");
}
}
}
};
onMount(async () => { onMount(async () => {
await checkPengaturan();
await getLastHistori(); await getLastHistori();
await checkStatusDevice(); // await checkStatusDevice();
}); });
return ( return (

View File

@ -5,6 +5,7 @@ import { Chart, registerables } from "chart.js";
import supabase from "../utils/supabase"; import supabase from "../utils/supabase";
import { getTimes } from "../utils/dates"; import { getTimes } from "../utils/dates";
import { Histori } from "../types/Histori"; import { Histori } from "../types/Histori";
import { Pengaturan } from "../types/Pengaturan";
export default function () { export default function () {
let canvas: any; let canvas: any;
@ -15,6 +16,7 @@ export default function () {
const [timeStamps, setTimeStamps] = createSignal<any[]>([]); const [timeStamps, setTimeStamps] = createSignal<any[]>([]);
const [lastHistori, setLastHistori] = createSignal<Histori | null>(null); const [lastHistori, setLastHistori] = createSignal<Histori | null>(null);
const [pengaturan, setPengaturan] = createSignal<Pengaturan | null>(null);
const getLastHistori = async () => { const getLastHistori = async () => {
const { data } = await supabase const { data } = await supabase
@ -127,64 +129,95 @@ export default function () {
}, 4000); }, 4000);
}; };
const getPengaturan = async () => {
const { data } = await supabase.from("pengaturan").select("*").limit(1);
if (data) {
setPengaturan(data[0]);
}
};
const startFermentasi = async () => {
await supabase.from("pengaturan").update({ running: true }).eq("id", 1);
window.location.reload();
};
onMount(async () => { onMount(async () => {
await getPengaturan();
Chart.register(...registerables); Chart.register(...registerables);
await renderChart(); await renderChart();
await getLastHistori(); await getLastHistori();
}); });
return ( return (
<div class="space-y-5"> <Show
<Show when={!kadarGas()}> when={pengaturan()?.running}
<div class="bg-white rounded p-5 shadow">Data tidak terdeteksi</div> fallback={
<div class="bg-white rounded p-5 shadow flex items-center justify-center"> <div class="space-y-5">
<img <div class="bg-white rounded p-5 shadow h-[500px] flex items-center justify-center">
src="https://www.islandofworldpeace.ie/wp-content/uploads/2019/03/no-image.jpg" <button
alt="" class="bg-blue-500 px-4 py-2 uppercase text-white rounded hover:bg-blue-400 transition"
class="w-[300px] h-[300px]" type="button"
/> onClick={startFermentasi}
</div> >
</Show> MULAI FERMENTASI
<div class={"space-y-5" + (kadarGas().length > 0 ? "" : "hidden")}> </button>
<div class="flex flex-wrap gap-5">
<div
class={
(lastHistori()?.selesai == false
? lastHistori()?.berhasil
? "bg-green-500"
: "bg-red-500"
: "bg-orange-500") +
" lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center"
}
>
<div class="uppercase text-3xl">
{lastHistori()?.selesai == false
? lastHistori()?.berhasil
? "Matang"
: "Gagal"
: "Menunggu"}
</div>
</div> </div>
<div class="grid grid-cols-2 grow gap-5 "> </div>
<div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8"> }
<EyeDropperIcon class="w-12 h-12 inline-block" /> >
<div class="text-3xl mt-5"> <div class="space-y-5">
{suhu().toString().slice(0, 4)} °C <Show when={!kadarGas()}>
<div class="bg-white rounded p-5 shadow">Data tidak terdeteksi</div>
<div class="bg-white rounded p-5 shadow flex items-center justify-center">
<img
src="https://www.islandofworldpeace.ie/wp-content/uploads/2019/03/no-image.jpg"
alt=""
class="w-[300px] h-[300px]"
/>
</div>
</Show>
<div class={"space-y-5" + (kadarGas().length > 0 ? "" : "hidden")}>
<div class="flex flex-wrap gap-5">
<div
class={
(lastHistori()?.selesai == false
? lastHistori()?.berhasil
? "bg-green-500"
: "bg-red-500"
: "bg-orange-500") +
" lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center"
}
>
<div class="uppercase text-3xl">
{lastHistori()?.selesai == false
? lastHistori()?.berhasil
? "Matang"
: "Gagal"
: "Menunggu"}
</div> </div>
</div> </div>
<div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8"> <div class="grid grid-cols-2 grow gap-5 ">
<BeakerIcon class="w-12 h-12 inline-block" /> <div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">
<div class="text-3xl mt-5"> <EyeDropperIcon class="w-12 h-12 inline-block" />
{kelembaban().toString().slice(0, 4)} % <div class="text-3xl mt-5">
{suhu().toString().slice(0, 4)} °C
</div>
</div>
<div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">
<BeakerIcon class="w-12 h-12 inline-block" />
<div class="text-3xl mt-5">
{kelembaban().toString().slice(0, 4)} %
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="bg-white rounded shadow p-5">
<div class="bg-white rounded shadow p-5"> <div class="text-xl">Grafik Kadar Gas</div>
<div class="text-xl">Grafik Kadar Gas</div> <canvas ref={canvas}></canvas>
<canvas ref={canvas}></canvas> </div>
</div> </div>
</div> </div>
</div> </Show>
); );
} }

View File

@ -38,7 +38,7 @@ export default function () {
Kontak digunakan untuk mengirimkan notifikasi sistem kepada pemilik. Kontak digunakan untuk mengirimkan notifikasi sistem kepada pemilik.
</p> </p>
<div class="my-5"> <div class="my-5">
<div class="mb-3"> {/* <div class="mb-3">
<div class="mb-1">Email</div> <div class="mb-1">Email</div>
<input <input
type="text" type="text"
@ -47,13 +47,13 @@ export default function () {
value={req()?.email} value={req()?.email}
onInput={(e) => handleReqChange("email", e.target.value)} onInput={(e) => handleReqChange("email", e.target.value)}
/> />
</div> </div> */}
<div class="mb-3"> <div class="mb-3">
<div class="mb-1">No. Whatsapp</div> <div class="mb-1">Username / Nomor Telegram</div>
<input <input
type="text" type="text"
class="input" class="input"
placeholder="Masukkan No. Whatsapp" placeholder="Masukkan Username / Nomor Telegram"
value={req()?.telepon} value={req()?.telepon}
onInput={(e) => handleReqChange("telepon", e.target.value)} onInput={(e) => handleReqChange("telepon", e.target.value)}
/> />

View File

@ -4,4 +4,5 @@ export interface Pengaturan {
telepon: string; telepon: string;
suhu_min: number; suhu_min: number;
suhu_max: number; suhu_max: number;
running: boolean;
} }