DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues 14 Pull requests Projects 1 Releases 2 Packages Wiki Activity

playground output add dialog, add cangrow.js

Browse source
This commit is contained in:
Marcus 2024-10-25 23:40:20 +02:00
parent 98ef3de395
commit dadaf09232
5 changed files with 107 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Arduino/CanGrow/include/CanGrow.h
View file

@ -76,8 +76,6 @@ struct GPIO_Index {
const byte Max_Outputs = 16;
const char[] Output_Types= { "GPIO" , "I2C", "URL" }
byte Output_Types_len = 3;
/*
*

2
Arduino/CanGrow/include/CanGrow_Webserver.h
View file

@ -31,6 +31,7 @@
* include static files files
*/
#include "Webserver/File_cangrow_CSS.h"
#include "Webserver/File_cangrow_JS.h"
#include "Webserver/File_favicon_ico.h"
/*
@ -86,6 +87,7 @@ void Webserver_Init() {
/* url handler definition */
webserver.on("/", HTTP_GET, WebPage_root);
webserver.on("/cangrow.css", HTTP_GET, WebFile_cangrow_CSS);
webserver.on("/cangrow.js", HTTP_GET, WebFile_cangrow_JS);
webserver.on("/favicon.ico", HTTP_GET, WebFile_favicon_ico);
webserver.on("/wifi/", HTTP_GET, WebPage_wifi);

61
Arduino/CanGrow/include/Webserver/File_cangrow_JS.h Normal file
View file

@ -0,0 +1,61 @@
/*
*
* include/Webserver/File_cangrow_JS.h - /cangrow.js header file
*
*
* MIT License
*
* Copyright (c) 2024 DeltaLima
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", 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 AUTHORS OR COPYRIGHT HOLDERS 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.
*
*/
const char* File_cangrow_JS PROGMEM = R"(function toggleDisplay(id) {
let el = document.getElementById(id);
let el_cs = getComputedStyle(el);
if (el_cs.getPropertyValue('display') === 'none') {
el.style.display = 'inline';
} else {
el.style.display = 'none';
}
}
function hideAllClass(classname) {
const el = document.getElementsByClassName(classname);
for(let i = 0; i < el.length ; i++) {
el[i].style.display = '';
}
}
function showSelect(selectId, prefix, hideClass = '') {
if(hideClass != '') {
hideAllClass(hideClass);
}
let selVal = document.getElementById(selectId).value;
toggleDisplay(prefix + selVal);
})";
void WebFile_cangrow_JS(AsyncWebServerRequest *request) {
request->send_P(200, "text/css", File_cangrow_JS);
}

1
Arduino/CanGrow/include/Webserver/Header.h
View file

@ -34,6 +34,7 @@ const char* Header_HTML PROGMEM = R"(<!DOCTYPE html>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>%GROWNAME% - CanGrow v%CGVER%</title>
<link rel='stylesheet' href='/cangrow.css'>
<link rel='script' href='/cangrow.js'>
</head>
<body>
<ul class='nav'><li><a href='/'>&#x1F331; %GROWNAME%</a></li>

93
playground/html/root/index.html
View file

@ -5,6 +5,40 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>CanGrow - CanGrow v0.2-dev</title>
<link rel='stylesheet' href='cangrow.css'>
<style>
.outputSel {
display: none;
}
</style>
<script>
function toggleDisplay(id) {
let el = document.getElementById(id);
let el_cs = getComputedStyle(el);
if (el_cs.getPropertyValue('display') === 'none') {
el.style.display = 'inline';
} else {
el.style.display = 'none';
}
}
function hideAllClass(classname) {
const el = document.getElementsByClassName(classname);
for(let i = 0; i < el.length ; i++) {
el[i].style.display = '';
}
}
function showSelect(selectId, prefix, hideClass = '') {
if(hideClass != '') {
hideAllClass(hideClass);
}
let selVal = document.getElementById(selectId).value;
toggleDisplay(prefix + selVal);
}
</script>
</head>
<body>
<ul class='nav'><li><a href='/'>&#x1F331; CanGrow</a></li>
@ -23,58 +57,15 @@
<li><a class='' href='/system/restart' >&#x1F501; CanGrow restart</a></li>
<li><a class='' href='/system/wipe' >&#x1F4A3; Factory reset</a></li>
</ul>
<a class='button' href='/system/output/add'>&#10133; Add output</a>
<table class='centered'>
<tr>
<th>ID</th>
<th>Name</th>
<th>Type</th>
<th>Device</th>
<th>Action</th>
</tr>
<tr>
<td>0</td>
<td>LED main</td>
<td>GPIO</td>
<td>Light</td>
<td><a href="#">✏️</a> <a href="#">❌</a> </td>
</tr>
<tr>
<td>1</td>
<td>LED red</td>
<td>GPIO</td>
<td>Light</td>
<td><a href="#">✏️</a> <a href="#">❌</a> </td>
</tr>
<tr>
<td>2</td>
<td>Fan out</td>
<td>GPIO</td>
<td>Fan</td>
<td><a href="#">✏️</a> <a href="#">❌</a> </td>
</tr>
<tr>
<td>3</td>
<td>Fan inside</td>
<td>GPIO</td>
<td>Fan</td>
<td><a href="#">✏️</a> <a href="#">❌</a> </td>
</tr>
<tr>
<td>4</td>
<td>Tasmota pump</td>
<td>URL</td>
<td>Pump</td>
<td><a href="#">✏️</a> <a href="#">❌</a> </td>
</tr>
</table>
<h3>&#10133; Add output</h3>
<p>Add a new output to CanGrow.</p>
<form method='post' action='/system/output/add'>
<u>Type</u>:<br>
<select name='config.system.httpLogSerial' required>
<select id='type_sel' name='config.system.httpLogSerial' onchange="showSelect('type_sel', 'type_', 'outputSel');" required>
<option disabled value='' selected hidden>---</option>
<option value='1'>GPIO</option>
<option value='2'>I2C</option>
@ -103,7 +94,7 @@
</select><br>
<div class='outputSel' id='gpio'>
<div class='outputSel' id='type_1'>
<u>GPIO</u>:<br>
<select name='config.system.httpLogSerial' required>
<option disabled value='' selected hidden>---</option>
@ -124,12 +115,12 @@
</div>
<div class='outputSel' id='gpio'>
<div class='outputSel' id='type_2'>
<u>I2C</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
</div>
<div class='outputSel' id='gpio'>
<div class='outputSel' id='type_3'>
<u>Host</u>:<br>
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
@ -140,11 +131,13 @@
<input type='text' name='esp32camIp' maxlength='16' value='' ><br>
</div>
<br>
<input type='submit' value='&#x1F4BE; Save settings'>
</form>
<script>
</script>