mirror of
https://github.com/vincentvdwal/crust-craft.git
synced 2026-08-18 17:26:39 +02:00
initial commit
This commit is contained in:
Vincent van der Wal
@@ -0,0 +1,8 @@
|
||||
.pio
|
||||
.vscode
|
||||
|
||||
node_modules
|
||||
|
||||
src/secrets.h
|
||||
|
||||
data
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>CrustCraft</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/ico" href="favicon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="nav">
|
||||
<div class="nav-title">CrustCraft</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<p class="card-title">
|
||||
Temperature</p>
|
||||
<p class="reading"><span id="temperature"></span> °C</p>
|
||||
</div>
|
||||
<div class="card relais" id="relais_switch">
|
||||
<p>Relais</p>
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="relais_switch_input"
|
||||
tabindex="0">
|
||||
<label class="onoffswitch-label" for="relais_switch_input">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="oven" id="oven">
|
||||
<div class="oven-wrapper">
|
||||
<div class="oven-img-wrapper">
|
||||
<img src="/oven.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="graph">
|
||||
<div class="plot-wrapper">
|
||||
<div id="plot"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-grid settings">
|
||||
<div class="card">
|
||||
<p class="card-title">
|
||||
Target temperature</p>
|
||||
<p class="reading"><input type="number" min="0" max="600" placeholder="350" id="target_temperature">
|
||||
</input> <label for="target_temperature">
|
||||
°C
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Generated
+1049
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"highcharts": "^12.3.0",
|
||||
"typescript": "^5.9.2"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^7.1.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
; PlatformIO Project Configuration File
|
||||
;
|
||||
; Build options: build flags, source filter
|
||||
; Upload options: custom upload port, speed and extra flags
|
||||
; Library options: dependencies, extra library storages
|
||||
; Advanced options: extra scripting
|
||||
;
|
||||
; Please visit documentation for the other options and examples
|
||||
; https://docs.platformio.org/page/projectconf.html
|
||||
|
||||
[env:esp32doit-devkit-v1]
|
||||
platform = espressif32
|
||||
board = esp32doit-devkit-v1
|
||||
|
||||
framework = arduino
|
||||
lib_compat_mode = strict
|
||||
lib_ldf_mode = chain
|
||||
|
||||
lib_deps =
|
||||
adafruit/MAX6675 library@^1.1.2
|
||||
bblanchon/ArduinoJson@^7.4.2
|
||||
ayushsharma82/ElegantOTA@^3.1.7
|
||||
ESP32Async/AsyncTCP
|
||||
ESP32Async/ESPAsyncWebServer
|
||||
|
||||
board_build.filesystem = littlefs
|
||||
|
||||
build_flags =
|
||||
-D ELEGANTOTA_USE_ASYNC_WEBSERVER=1
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Vendored
+1
@@ -0,0 +1 @@
|
||||
declare module '*.css';
|
||||
+190
@@ -0,0 +1,190 @@
|
||||
#include <Arduino.h>
|
||||
#include <WiFi.h>
|
||||
#include <AsyncTCP.h>
|
||||
#include <ESPAsyncWebServer.h>
|
||||
#include "LittleFS.h"
|
||||
#include <ArduinoJson.h>
|
||||
#include "max6675.h"
|
||||
#include <ElegantOTA.h>
|
||||
|
||||
#include "secrets.h"
|
||||
|
||||
// Create AsyncWebServer object on port 80
|
||||
AsyncWebServer server(80);
|
||||
|
||||
// Create a WebSocket object
|
||||
AsyncWebSocket ws("/ws");
|
||||
|
||||
// Json Variable to Hold Sensor Readings
|
||||
JsonDocument readings;
|
||||
String jsonString;
|
||||
|
||||
// Timer variables
|
||||
unsigned long lastTime = 0;
|
||||
unsigned long timerDelay = 250;
|
||||
|
||||
int relay = 21;
|
||||
int thermoDO = 19;
|
||||
int thermoCS = 23;
|
||||
int thermoCLK = 5;
|
||||
|
||||
MAX6675 thermocouple(thermoCLK, thermoCS, thermoDO);
|
||||
|
||||
int targetTemp = 300;
|
||||
int overShoot = 10;
|
||||
int underShoot = 5;
|
||||
unsigned long lastSwitch = 0;
|
||||
unsigned long switchDelay = 60000;
|
||||
bool autoSwitch = true;
|
||||
|
||||
// Get Sensor Readings and return JSON object
|
||||
String getSensorReadings()
|
||||
{
|
||||
readings["temperature"] = thermocouple.readCelsius();
|
||||
if (digitalRead(relay) == HIGH)
|
||||
{
|
||||
readings["relais"] = 1;
|
||||
}
|
||||
else
|
||||
{
|
||||
readings["relais"] = 0;
|
||||
}
|
||||
serializeJson(readings, jsonString);
|
||||
return jsonString;
|
||||
}
|
||||
|
||||
// Initialize LittleFS
|
||||
void initLittleFS()
|
||||
{
|
||||
if (!LittleFS.begin(true))
|
||||
{
|
||||
Serial.println("An error has occurred while mounting LittleFS");
|
||||
}
|
||||
Serial.println("LittleFS mounted successfully");
|
||||
}
|
||||
|
||||
// Initialize WiFi
|
||||
void initWiFi()
|
||||
{
|
||||
|
||||
WiFi.mode(WIFI_STA);
|
||||
WiFi.begin(ssid, password);
|
||||
Serial.print("Connecting to WiFi ..");
|
||||
while (WiFi.status() != WL_CONNECTED)
|
||||
{
|
||||
Serial.print('.');
|
||||
delay(1000);
|
||||
}
|
||||
Serial.println(WiFi.localIP());
|
||||
}
|
||||
|
||||
void notifyClients(String sensorReadings)
|
||||
{
|
||||
ws.textAll(sensorReadings);
|
||||
}
|
||||
|
||||
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len)
|
||||
{
|
||||
AwsFrameInfo *info = (AwsFrameInfo *)arg;
|
||||
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT)
|
||||
{
|
||||
data[len] = 0;
|
||||
String message = (char *)data;
|
||||
if (strcmp((char *)data, "getReadings") == 0)
|
||||
{
|
||||
String sensorReadings = getSensorReadings();
|
||||
notifyClients(sensorReadings);
|
||||
};
|
||||
if (strcmp((char *)data, "switchRelais") == 0)
|
||||
{
|
||||
Serial.printf("\nSwitch Relais");
|
||||
if (digitalRead(relay) == HIGH)
|
||||
{
|
||||
digitalWrite(relay, LOW);
|
||||
lastSwitch = millis();
|
||||
}
|
||||
else
|
||||
{
|
||||
digitalWrite(relay, HIGH);
|
||||
lastSwitch = millis();
|
||||
}
|
||||
}
|
||||
if (message.startsWith("setTargetTemp"))
|
||||
{
|
||||
String target = message.substring(15, 18);
|
||||
targetTemp = target.toInt();
|
||||
Serial.printf("\nTarget temp set to ");
|
||||
Serial.print(targetTemp);
|
||||
Serial.printf("°C");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len)
|
||||
{
|
||||
switch (type)
|
||||
{
|
||||
case WS_EVT_CONNECT:
|
||||
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
|
||||
break;
|
||||
case WS_EVT_DISCONNECT:
|
||||
Serial.printf("WebSocket client #%u disconnected\n", client->id());
|
||||
break;
|
||||
case WS_EVT_DATA:
|
||||
handleWebSocketMessage(arg, data, len);
|
||||
break;
|
||||
case WS_EVT_PONG:
|
||||
case WS_EVT_ERROR:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
void initWebSocket()
|
||||
{
|
||||
ws.onEvent(onEvent);
|
||||
server.addHandler(&ws);
|
||||
}
|
||||
|
||||
void setup()
|
||||
{
|
||||
Serial.begin(9600);
|
||||
pinMode(relay, OUTPUT);
|
||||
|
||||
initWiFi();
|
||||
initLittleFS();
|
||||
initWebSocket();
|
||||
|
||||
// Web Server Root URL
|
||||
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
|
||||
{ request->send(LittleFS, "/index.html", "text/html"); });
|
||||
|
||||
server.serveStatic("/", LittleFS, "/");
|
||||
|
||||
ElegantOTA.begin(&server);
|
||||
|
||||
// Start server
|
||||
server.begin();
|
||||
}
|
||||
|
||||
void loop()
|
||||
{
|
||||
if ((millis() - lastTime) > timerDelay)
|
||||
{
|
||||
String sensorReadings = getSensorReadings();
|
||||
notifyClients(sensorReadings);
|
||||
if (((millis() - lastSwitch) > switchDelay) && thermocouple.readCelsius() >= (targetTemp - overShoot)) // >= 285°C
|
||||
{
|
||||
digitalWrite(relay, LOW);
|
||||
lastSwitch = millis();
|
||||
}
|
||||
if (((millis() - lastSwitch) > switchDelay) && thermocouple.readCelsius() < (targetTemp - underShoot)) // < 270°C
|
||||
{
|
||||
digitalWrite(relay, HIGH);
|
||||
lastSwitch = millis();
|
||||
}
|
||||
lastTime = millis();
|
||||
}
|
||||
|
||||
ws.cleanupClients();
|
||||
ElegantOTA.loop();
|
||||
}
|
||||
+345
@@ -0,0 +1,345 @@
|
||||
import Highcharts, { type DashStyleValue } from 'highcharts/highstock'
|
||||
|
||||
import 'highcharts/modules/accessibility'
|
||||
|
||||
import './styles.css'
|
||||
|
||||
export const pad = (n: string | number, amount = 2) => {
|
||||
if (amount == 2) {
|
||||
return ('0' + n).slice(-2);
|
||||
} else {
|
||||
return ('00' + n).slice(-3);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
let gateway = `ws://${window.location.hostname}/ws`;
|
||||
let ws: WebSocket;
|
||||
|
||||
const now = new Date()
|
||||
|
||||
let container: HTMLElement | null = document.querySelector('#plot')
|
||||
let temperatureData = [
|
||||
[now.getTime(), 25]
|
||||
]
|
||||
|
||||
let relais = 0
|
||||
let relaisData = [
|
||||
[now.getTime(), 0]
|
||||
]
|
||||
|
||||
let temp = 25;
|
||||
let targetTemp = 350
|
||||
|
||||
const oven = document.querySelector('#oven')
|
||||
const temperature = document.querySelector('#temperature')
|
||||
const relaisSwitch = document.querySelector('#relais_switch')
|
||||
const relaisSwitchInput: HTMLInputElement | null = document.querySelector('#relais_switch_input')
|
||||
const targetTempInput: HTMLInputElement | null = document.querySelector('#target_temperature')
|
||||
|
||||
let maxValues = 4 * 60 * 60 // 60 minutes (4 values/sec)
|
||||
|
||||
let hs: Highcharts.StockChart;
|
||||
let hsOptions: Highcharts.Options
|
||||
|
||||
const getRelaisBands = () => {
|
||||
let relaisBands = []
|
||||
let active = false;
|
||||
|
||||
for (let r of relaisData) {
|
||||
if (r[1] === 1 && !active) {
|
||||
active = true
|
||||
relaisBands.push({
|
||||
from: r[0],
|
||||
to: relaisData[relaisData.length - 1][0] + 1000,
|
||||
color: 'rgba(255, 0, 0, 0.25)'
|
||||
|
||||
})
|
||||
}
|
||||
if (r[1] === 0 && active) {
|
||||
relaisBands[relaisBands.length - 1]['to'] = r[0]
|
||||
active = false
|
||||
}
|
||||
}
|
||||
return relaisBands
|
||||
}
|
||||
|
||||
const dashStyle: DashStyleValue = 'Dash'
|
||||
const getTargetLine = () => {
|
||||
return [
|
||||
{ value: targetTemp, width: 3, dashStyle: dashStyle }
|
||||
]
|
||||
}
|
||||
|
||||
const createChart = () => {
|
||||
hsOptions = {
|
||||
chart: {
|
||||
animation: {
|
||||
duration: 250,
|
||||
easing: 'linear'
|
||||
},
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Temperature',
|
||||
align: 'left',
|
||||
},
|
||||
|
||||
rangeSelector: {
|
||||
enabled: false,
|
||||
inputDateFormat: '%H:%M:%S'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: '°C'
|
||||
},
|
||||
opposite: false,
|
||||
min: 0,
|
||||
max: 600,
|
||||
tickInterval: 100,
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 250,
|
||||
color: 'rgba(69, 171, 255, 0.34)'
|
||||
}, {
|
||||
from: 250,
|
||||
to: 420,
|
||||
color: 'rgba(0, 255, 60, 0.34)'
|
||||
},
|
||||
{
|
||||
from: 420,
|
||||
to: 530,
|
||||
color: 'rgba(255, 162, 0, 0.4)'
|
||||
},
|
||||
{
|
||||
from: 530,
|
||||
to: 600,
|
||||
color: 'rgba(255, 0, 0, 0.4)'
|
||||
}],
|
||||
plotLines: getTargetLine()
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
tickInterval: 30 * 1000, // 30 seconds
|
||||
labels: {
|
||||
rotation: -45,
|
||||
formatter: (f) => {
|
||||
let d = new Date(f.pos)
|
||||
return pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds())
|
||||
},
|
||||
style: {
|
||||
fontSize: '0.55em'
|
||||
}
|
||||
},
|
||||
plotBands: getRelaisBands(),
|
||||
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
let d = new Date(this.x)
|
||||
return [pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds()), `<b>${this.y?.toFixed(1)}°C</b>`]
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
valueDecimals: 2,
|
||||
},
|
||||
}
|
||||
},
|
||||
data: {
|
||||
enablePolling: true,
|
||||
dataRefreshRate: 0.5
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'areaspline',
|
||||
name: 'Temperature',
|
||||
data: temperatureData
|
||||
}],
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 1000
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
if (container && hsOptions)
|
||||
hs = Highcharts.stockChart(container, hsOptions)
|
||||
}
|
||||
|
||||
const onLoad = () => {
|
||||
initWebSocket();
|
||||
|
||||
|
||||
if (container) {
|
||||
createChart()
|
||||
|
||||
relaisSwitch?.addEventListener('click', switchRelais)
|
||||
targetTempInput?.addEventListener('change', changeTargetTemp)
|
||||
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
// spoof some test data
|
||||
setInterval(() => {
|
||||
if (temperatureData.length > maxValues) {
|
||||
temperatureData.shift()
|
||||
relaisData.shift()
|
||||
}
|
||||
let d = new Date()
|
||||
|
||||
if (temp < 150) {
|
||||
temp = temp + Math.random() * 4 - 1
|
||||
} else if (temp < 20) {
|
||||
temp = temp + Math.random() * 4 - 1.3
|
||||
} else if (temp < targetTemp) {
|
||||
temp = temp + Math.random() * 4 - 1.5
|
||||
} else if (temp >= targetTemp) {
|
||||
temp = temp + Math.random() * 3 - 1.6
|
||||
}
|
||||
if (relais) {
|
||||
temp = temp + 0.2
|
||||
} else {
|
||||
temp = temp - 0.1
|
||||
}
|
||||
|
||||
if (temperature)
|
||||
temperature.innerHTML = temp.toFixed(2);
|
||||
temperatureData.push([d.getTime(), temp])
|
||||
relaisData.push([d.getTime(), relais])
|
||||
|
||||
|
||||
hs.xAxis[0].update({ plotBands: getRelaisBands() })
|
||||
hs.yAxis[0].update({ plotLines: getTargetLine() })
|
||||
hs.series[0].setData(temperatureData, true)
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
|
||||
const getReadings = () => {
|
||||
ws.send("getReadings");
|
||||
}
|
||||
|
||||
const initWebSocket = () => {
|
||||
if (!import.meta.env.DEV) {
|
||||
console.log('Trying to open a WebSocket connection…');
|
||||
ws = new WebSocket(gateway);
|
||||
ws.onopen = onOpen;
|
||||
ws.onclose = onClose;
|
||||
ws.onmessage = onMessage;
|
||||
}
|
||||
}
|
||||
|
||||
// When websocket is established, call the getReadings() function
|
||||
const onOpen = () => {
|
||||
console.log('Connection opened');
|
||||
getReadings();
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
console.log('Connection closed');
|
||||
setTimeout(initWebSocket, 2000);
|
||||
}
|
||||
|
||||
// Function that receives the message from the ESP32 with the readings
|
||||
const onMessage = (event: MessageEvent) => {
|
||||
let myObj = JSON.parse(event.data);
|
||||
let keys = Object.keys(myObj);
|
||||
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
let key = keys[i];
|
||||
let element = document.getElementById(key)
|
||||
if (element) {
|
||||
element.innerHTML = myObj[key].toFixed(2);
|
||||
}
|
||||
let d = new Date()
|
||||
if (key === 'temperature') {
|
||||
if (temperatureData.length > maxValues) {
|
||||
temperatureData.shift()
|
||||
}
|
||||
temperatureData.push([d.getTime(), myObj[key]])
|
||||
|
||||
} else if (key === 'relais') {
|
||||
if (relaisData.length > maxValues) {
|
||||
relaisData.shift()
|
||||
}
|
||||
relaisData.push([d.getTime(), myObj[key]])
|
||||
if (myObj[key]) {
|
||||
oven?.classList.add('on')
|
||||
relaisSwitch?.classList.add('on')
|
||||
if (relaisSwitchInput)
|
||||
relaisSwitchInput.checked = true
|
||||
} else {
|
||||
oven?.classList.remove('on')
|
||||
relaisSwitch?.classList.remove('on')
|
||||
if (relaisSwitchInput)
|
||||
relaisSwitchInput.checked = false
|
||||
}
|
||||
}
|
||||
|
||||
hs.xAxis[0].update({ plotBands: getRelaisBands() })
|
||||
hs.yAxis[0].update({ plotLines: getTargetLine() })
|
||||
hs.series[0].setData(temperatureData, true)
|
||||
}
|
||||
}
|
||||
|
||||
const switchRelais = () => {
|
||||
console.log('Send switch relais')
|
||||
if (!import.meta.env.DEV) {
|
||||
ws.send("switchRelais");
|
||||
} else {
|
||||
// spoof some test data
|
||||
if (!relais) {
|
||||
relais = 1
|
||||
oven?.classList.add('on')
|
||||
relaisSwitch?.classList.add('on')
|
||||
if (relaisSwitchInput)
|
||||
relaisSwitchInput.checked = true
|
||||
} else {
|
||||
relais = 0
|
||||
oven?.classList.remove('on')
|
||||
|
||||
relaisSwitch?.classList.remove('on')
|
||||
if (relaisSwitchInput)
|
||||
relaisSwitchInput.checked = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const changeTargetTemp = (e: Event) => {
|
||||
const target = e.target as HTMLTextAreaElement;
|
||||
let value = Number(target?.value)
|
||||
targetTemp = value
|
||||
console.log('Changed target temp to ' + targetTemp)
|
||||
if (!import.meta.env.DEV) {
|
||||
ws.send("setTargetTemp: " + pad(targetTemp, 3));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
// Replace with your network credentials
|
||||
const char *ssid = "WIFI_SSID";
|
||||
const char *password = "WIFI_PWD";
|
||||
+204
@@ -0,0 +1,204 @@
|
||||
html,
|
||||
body {
|
||||
font-family:
|
||||
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
margin: 0
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: black;
|
||||
color: white;
|
||||
width: full;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.graph {
|
||||
height: 310px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plot-wrapper {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 25%;
|
||||
padding: 1em;
|
||||
min-height: 120px;
|
||||
box-shadow: 2px 2px 12px 1px rgba(140, 140, 140, .5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.reading {
|
||||
font-weight: bold;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
|
||||
@property --ovenColor1 {
|
||||
syntax: '<color>';
|
||||
initial-value: rgba(255, 0, 0, 0);
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
|
||||
@property --ovenColor2 {
|
||||
syntax: '<color>';
|
||||
initial-value: rgba(255, 0, 0, 0);
|
||||
inherits: false;
|
||||
}
|
||||
|
||||
.oven {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.oven-wrapper {
|
||||
background: radial-gradient(var(--ovenColor1), var(--ovenColor2), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
padding: 30px;
|
||||
transition: --ovenColor1 3s, --ovenColor2 3s;
|
||||
}
|
||||
|
||||
.oven.on .oven-wrapper {
|
||||
--ovenColor1: rgb(255, 60, 0);
|
||||
--ovenColor2: rgba(255, 60, 0, 0.4);
|
||||
}
|
||||
|
||||
.oven .oven-img-wrapper {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.oven img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.relais {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.onoffswitch {
|
||||
pointer-events: none;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 2px solid #999999;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.onoffswitch-inner {
|
||||
display: block;
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.onoffswitch-inner:before,
|
||||
.onoffswitch-inner:after {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
font-family: Trebuchet, Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.onoffswitch-inner:before {
|
||||
content: "ON";
|
||||
padding-left: 10px;
|
||||
background-color: #C43535;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.onoffswitch-inner:after {
|
||||
content: "OFF";
|
||||
padding-right: 10px;
|
||||
background-color: #EEEEEE;
|
||||
color: #999999;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.onoffswitch-switch {
|
||||
display: block;
|
||||
width: 18px;
|
||||
margin: 6px;
|
||||
background: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 56px;
|
||||
border: 2px solid #999999;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.settings input {
|
||||
max-width: 50px;
|
||||
font-size: larger;
|
||||
font-weight: bold;
|
||||
}
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
interface ImportMetaEnv {
|
||||
readonly DEV: boolean;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
outDir: 'data',
|
||||
chunkSizeWarningLimit: 1000
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user