Merge pull request #2 from gabrielmarcano/temperature-values

gabrielmarcano · Nov 17, 2023 · b8b841e · b8b841e
2 parents ba660d2 + da9043b
commit b8b841e
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -29,24 +29,25 @@
 
 All logic depends on the data given by the **Thermocouple** & **DHT22** sensors, and the selected mode in the **4 Position Rotary Switch**. It's intention is to control 3 motors, which will turn on or off based on the temperature that it reaches.
 
-When the temperature reaches 100ºC, 150ºC or 190ºC (depending on the mode) it feeds a relay that controls the first motor,
+When the temperature reaches 140ºC, 170ºC or 180ºC (depending on the mode) it feeds a relay that controls the first motor,
 and also starts a timer that can be 12, 15 or 18 minutes which also depends on the mode.
 
-When the timer stops, a buzzer starts making noise and also feeds the other 2 relays that controls the second & third motor.
+There will be two push buttons, one will add +1min to the time (and start the timer if there isn't one already), and the other will reduce -1min to the time.
 
-There will also be two buttons, one will add +1min to the time (and start the timer if it's stopped), and the other will substract -1min to the time.
+When the timer stops, a buzzer starts making noise and also feeds the other 2 relays that controls the second & third motor.
 
-> Motors can only be stopped manually by either the security button or through the web interface.
+> Motors can only be stopped manually by either the security button or through the web interface. If Motor 2 or Motor 3 are stopped via the web interface, they will stop any action taken after the timer stops.
 
 ### Modes
 
 | Position | Name   | Temperature | Time |
 | -------- | ------ | ----------- | ---- |
-| 1        | Peanut | 100ºC       | 12m  |
-| 2        | Coffee | 150ºC       | 15m  |
-| 3        | Cocoa  | 190ºC       | 18m  |
+| 0        | Off    | 0ºC         | 0m   |
+| 1        | Peanut | 180ºC       | 20m  |
+| 2        | Cocoa  | 140ºC       | 33m  |
+| 3        | Coffee | 170ºC       | 12m  |
 
-> The default state of the switch does not set a timer.
+> The default state of the switch does not set a timer. Timer response can also be turned off by setting the state of the switch to the position 0 (i.e. the default state.)
 
 ## Project structure
 
@@ -72,8 +73,6 @@ Use env vars to store your credentials and build the firmware locally.
 ```cpp
 #define WIFI_SSID "SSID"
 #define WIFI_PASSWORD "PASSWORD"
-#define HUSARNET_JOIN_CODE "XXXXXXXX"
-#define HUSARNET_HOSTNAME "DEVICE"
 ```
 
 ## Hardware
@@ -98,7 +97,7 @@ Use env vars to store your credentials and build the firmware locally.
 
 The ESP32 also act as a server for controlling the motor states, showing the temperature and humidity with gauges, and showing the remaining time in the timer. The server uses [SSE](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) to update the values on the web.
 
-The web interface can _read_ all values, and can only _write_ to the motor states values.
+The web interface can _read_ all values, and can only _write_ to the motor states and timer values.
 
 OTA updates are available thanks to [ElegantOTA](https://github.com/ayushsharma82/ElegantOTA).
 
@@ -107,15 +106,10 @@ OTA updates are available thanks to [ElegantOTA](https://github.com/ayushsharma8
 | /events  | Event Source with `readings`, `timer` & `states` events                                                                      |
 | /data    | **GET** - Request to update the temperature & humidity readings, timer remaining time and motors states on the web interface |
 | /motors  | **POST** - Request to control the state of the motors throught the web interface                                             |
+| /time    | **POST** - Request to increase or reduce the timer by 60 seconds                                                             |
 | /reset   | **POST** - Request to perform a remote software reset of the ESP32                                                           |
 | /update  | Firmware & Filesystem OTA updates                                                                                            |
 
-### VPN
-
-> TODO: This is not implemented yet
-
-The ESP32 is connected to a VPN using [Husarnet](https://github.com/husarnet/husarnet-esp32). With this, the web interface can be accessed remotely, and it also enables simple remote OTA updates.
-
 ## Wiring
 
 > **TODO**: Upload circuit, PCB design, 3D design, Gerber files & ESP32 pinout
diff --git a/data/events.js b/data/events.js
@@ -241,6 +241,7 @@ if (window.EventSource) {
 // handle update of motor status to the esp32
 document.querySelectorAll('[type="checkbox"]').forEach((sw) => {
   sw.addEventListener("click", () => {
+    if (navigator.vibrate) window.navigator.vibrate(50);
     fetch("/motors", {
       method: "POST",
       headers: {
@@ -252,3 +253,22 @@ document.querySelectorAll('[type="checkbox"]').forEach((sw) => {
     });
   });
 });
+
+// handle timer adder
+document.querySelectorAll(".timer-button").forEach((timer_button) => {
+  timer_button.addEventListener("click", () => {
+    if (navigator.vibrate) window.navigator.vibrate(50);
+    fetch("/time", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        time: 60,
+        action: timer_button.ariaLabel.includes("reduce-time")
+          ? "reduce"
+          : "add",
+      }),
+    });
+  });
+});
diff --git a/data/index.html b/data/index.html
@@ -2,7 +2,7 @@
 <html lang="es">
 
 <head>
-  <title>Tostador de Cacao</title>
+  <title>Tostador</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="utf-8">
   <link rel="icon" type="image/png" href="favicon.ico">
@@ -13,46 +13,63 @@
 </head>
 
 <body>
-  <header class="topnav">
-    <h1>PANEL DE CONTROL🍫</h1>
-  </header>
   <main class="card-grid">
     <article class="card">
-      <h2>Temperatura</h2>
-      <canvas id="gauge-temperature"></canvas>
+      <aside class="card-title" aria-label="temp-title">
+        <h2>Temperatura</h2>
+      </aside>
+      <section class="card-body">
+        <canvas id="gauge-temperature"></canvas>
+      </section>
     </article>
     <article class="card">
-      <h2>Humedad</h2>
-      <canvas id="gauge-humidity"></canvas>
+      <aside class="card-title" aria-label="humidity-title">
+        <h2>Humedad</h2>
+      </aside>
+      <section class="card-body">
+        <canvas id="gauge-humidity"></canvas>
+      </section>
     </article>
     <article class="card">
-      <h2>Controles</h2>
-      <section id="controls">
-        <section class="control-group">
-          <h3>Motor 1</h3>
-          <input class="tgl tgl-ios" id="switch1" type="checkbox" />
-          <label class="tgl-btn" for="switch1"></label>
-        </section>
-        <section class="control-group">
-          <h3>Motor 2</h3>
-          <input class="tgl tgl-ios" id="switch2" type="checkbox" />
-          <label class="tgl-btn" for="switch2"></label>
-        </section>
-        <section class="control-group">
-          <h3>Motor 3</h3>
-          <input class="tgl tgl-ios" id="switch3" type="checkbox" />
-          <label class="tgl-btn" for="switch3"></label>
+      <aside class="card-title" aria-label="motors-title">
+        <h2>Controles</h2>
+      </aside>
+      <section class="card-body">
+        <section id="controls">
+          <section class="control-group">
+            <h3>Motor 1</h3>
+            <input class="tgl tgl-ios" id="switch1" type="checkbox" />
+            <label class="tgl-btn" for="switch1"></label>
+          </section>
+          <section class="control-group">
+            <h3>Motor 2</h3>
+            <input class="tgl tgl-ios" id="switch2" type="checkbox" />
+            <label class="tgl-btn" for="switch2"></label>
+          </section>
+          <section class="control-group">
+            <h3>Motor 3</h3>
+            <input class="tgl tgl-ios" id="switch3" type="checkbox" />
+            <label class="tgl-btn" for="switch3"></label>
+          </section>
         </section>
       </section>
     </article>
     <article class="card">
-      <h2>Temporizador</h2>
-      <section id="timer">
-        <article role="timer" class="clock-wrap">
-          <section class="clock">
-            <time class="count">00:00</time>
-          </section>
-        </article>
+      <aside class="card-title" aria-label="time-title">
+        <h2>Temporizador</h2>
+      </aside>
+      <section class="card-body">
+        <section id="timer">
+          <article role="timer" class="clock-wrap">
+            <section class="clock">
+              <time class="count">00:00</time>
+            </section>
+          </article>
+        </section>
+        <section class="control-group">
+          <button class="timer-button" role="button" aria-label="reduce-time">-</button>
+          <button class="timer-button" role="button" aria-label="increase-time">+</button>
+        </section>
       </section>
     </article>
   </main>

diff --git a/data/style.css b/data/style.css
@@ -15,15 +15,9 @@ body {
   background-color: #d8f7e1;
 }
 
-h1 {
-  font-size: 1.8rem; 
-  color: white;
-}
-
 h2 { 
   font-size: 1.4rem;
   font-weight: bold;
-  color: #034078;
 }
 
 h3 {
@@ -33,11 +27,6 @@ h3 {
   color: #959fa4;
 }
 
-.topnav { 
-  overflow: hidden; 
-  background-color: #3abc5c;
-}
-
 #controls, #timer {
   display: grid;
   place-items: center;
@@ -48,6 +37,10 @@ h3 {
   margin-bottom: 1rem;
 }
 
+.control-group > button{
+  margin: 1rem;
+}
+
 .card-grid { 
   padding: 5%;
   max-width: 1200px; 
@@ -60,6 +53,24 @@ h3 {
 .card { 
   background-color: white; 
   box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+}
+
+.card-title {
+  border-radius: 10px 10px 0 0 ;
+  background-color: #67b37b;
+  color:white !important;
+  margin-bottom: 1.5rem;
+}
+
+.card-body {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 @media (max-width: 400px) {

diff --git a/data/timer.css b/data/timer.css
@@ -48,4 +48,36 @@
   position: relative;
   text-align: center;
   user-select: none;
+}
+
+.timer-button {
+  background-color: #ec366b;
+  border: 2px solid #c10c42;
+  border-radius: 30px;
+  box-shadow: #c10c42 4px 4px 0 0;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 600;
+  font-size: 24px;
+  padding: 0 25px;
+  line-height: 50px;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  min-width: 100px;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.timer-button:active {
+  box-shadow: #6f0d2a 2px 2px 0 0;
+  transform: translate(2px, 2px);
+}
+
+@media (min-width: 768px) {
+  .timer-button {
+    min-width: 120px;
+  }
 }
diff --git a/platformio.ini b/platformio.ini
@@ -23,6 +23,4 @@ lib_deps =
 
 build_flags = 
     '-D WSSID="${sysenv.SSID}"'
-    '-D WPASS="${sysenv.PASS}"'
-    '-D HN_HOSTNAME="${sysenv.HOSTNAME}"'
-    '-D HN_JOINCODE="${sysenv.JOINCODE}"'
+    '-D WPASS="${sysenv.PASS}"'