Skip to content

Commit

Permalink
покращення прошивки: (Closes #30)
Browse files Browse the repository at this point in the history 
 - веб-сторінка керування мапою

покращення редактора:
 - налаштування для таймаута точки доступу мапи в режим втрати wifi
  • Loading branch information
@v00g100skr
v00g100skr committed Jun 13, 2023
1 parent 24b08dd commit ff95258
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 6 deletions.
29 changes: 28 additions & 1 deletion firmware.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ <h2>JAAM</h2>
char* apSSID = "<span id="ap-ssid">AlarmMap</span>"; //Назва точки доступу щоб переналаштувати WiFi
char* apPassword = "<span id="ap-password"></span>"; //Пароль від точки доступу щоб переналаштувати WiFi. Пусте - без пароля
bool wifiStatusBlink = <span id="wifi-status">true</span>; //Статуси wifi на дісплеі
int apModeConnectionTimeout = 120; //Час в секундах на роботу точки доступу
int apModeConnectionTimeout = <span id="ap-mode-connection-timeout">120</span>; //Час в секундах на роботу точки доступу

//Налштування яскравості
int brightness = <span id="brightness">100</span>; //Яскравість %
Expand Down Expand Up @@ -414,6 +414,20 @@ <h6 class="mb-1">Назва точкі доступу мапи для налаш
<input type="text" class="form-control" id="ap-password-input" placeholder="Пароль" value="" oninput=updateApPasswordValue()>
</div>

<div class="" id='ap-mode-connection-timeout-form'>
<label class="form-label">Час роботи точки доступу (секунди)</label>
<div class="row">
<div class="col-2">
<h4><span class="badge bg-dark" id="ap-mode-connection-timeout-form-value">120</span></h4>
</div>
<div class="col-10 mb-1 mt-1">
<input type="range" min="1" max="300" value="120" class="bg-white border rounded border-secondary form-range col-12" id="ap-mode-connection-timeout-input">
</div>
</div>
</div>

<div class="col-md-12 mb-2"></div>

<div id="wifi-status-form" class="mb-1">
<input type="checkbox" class="form-check-input" id="wifi-status-input" checked>
<label class="form-check-label">Візуальна індикація на мапі при підключенні</label>
Expand Down Expand Up @@ -819,6 +833,19 @@ <h4><span class="badge bg-dark" id="brightness-red-form-value">100</span></h4>
}
});


const apmodeconnectiontimeout = document.getElementById('ap-mode-connection-timeout');
const apmodeconnectiontimeoutform = document.getElementById('ap-mode-connection-timeout-form');
const apmodeconnectiontimeoutformvalue = document.getElementById('ap-mode-connection-timeout-form-value');
const apmodeconnectiontimeoutinput = document.getElementById('ap-mode-connection-timeout-input');

apmodeconnectiontimeoutinput.addEventListener('input', function() {
let value = parseInt(apmodeconnectiontimeoutinput.value);

apmodeconnectiontimeout.textContent = value;
apmodeconnectiontimeoutformvalue.textContent = value;
});

const mode = document.getElementById('mode');

const openstreetmap = document.getElementById('openstreetmap');
Expand Down
138 changes: 133 additions & 5 deletions src/firmware.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
#include <NTPClient.h>
#include <HTTPUpdate.h>
#include <WebServer.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_SSD1306.h>
#include <Wire.h>

Expand Down Expand Up @@ -204,7 +205,8 @@ Adafruit_SSD1306 display(DISPLAY_WIDTH, DISPLAY_HEIGHT, &Wire, -1);
StaticJsonDocument<250> jsonDocument;
char buffer[250];

WebServer server(80);
WebServer server(8080);
AsyncWebServer aserver(80);

DynamicJsonDocument doc(30000);
String baseURL = "https://vadimklimenko.com/map/statuses.json";
Expand Down Expand Up @@ -235,6 +237,131 @@ void setupRouting() {
server.on("/params", HTTP_POST, handlePost);
server.on("/params", HTTP_GET, getEnv);
server.begin();

aserver.on("/", HTTP_GET, handleRoot);
aserver.on("/save", HTTP_POST, handleSave);
aserver.begin();
}

void handleRoot(AsyncWebServerRequest* request){
String html = "<html><head>";
html += "<meta charset='UTF-8'>";
html += "<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>";
html += "<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>";
html += "</head><body>";
html += "<div class='container'>";
html += "<h1 class='mt-4'>Параметри конфігурації</h1>";
html += "<form id='configForm' action='/save' method='POST'>";
html += "<div class='form-group'>";
html += "<label for='brightness'>Яскравість:</label>";
html += "<input type='range' class='form-control-range' id='brightness' name='brightness' min='0' max='100' value='" + String(brightness) + "'>";
html += "<div class='slider-value'>" + String(brightness) + "</div>";
html += "</div>";
html += "<div class='form-group'>";
html += "<label for='mapMode'>Режим мапи:</label>";
html += "<select class='form-control' id='mapMode' name='map_mode'>";
html += "<option value='1'";
if (mapModeInit == 1) html += " selected";
html += ">Вимкнена</option>";
html += "<option value='2'";
if (mapModeInit == 2) html += " selected";
html += ">Тривоги</option>";
html += "<option value='3'";
if (mapModeInit == 3) html += " selected";
html += ">Погода</option>";
html += "<option value='4'";
if (mapModeInit == 4) html += " selected";
html += ">Прапор</option>";
html += "</select>";
html += "</div>";
html += "<div class='form-group'>";
html += "<label for='displayMode'>Режим дісплея:</label>";
html += "<select class='form-control' id='displayMode' name='display_mode'>";
html += "<option value='1'";
if (displayMode == 1) html += " selected";
html += ">Вимкнений</option>";
html += "<option value='2'";
if (displayMode == 2) html += " selected";
html += ">Поточний час</option>";
html += "</select>";
html += "</div>";
html += "<div class='form-group'>";
html += "<label for='modulationMode'>Режим модуляції:</label>";
html += "<select class='form-control' id='modulationMode' name='modulation_mode'>";
html += "<option value='1'";
if (modulationMode == 1) html += " selected";
html += ">Вимкнений</option>";
html += "<option value='2'";
if (modulationMode == 2) html += " selected";
html += ">Модуляція</option>";
html += "<option value='3'";
if (modulationMode == 3) html += " selected";
html += ">Пульсація</option>";
html += "</select>";
html += "</div>";
html += "<button type='submit' class='btn btn-primary'>Зберегти налаштування</button>";
html += "</form>";
html += "</div>";
html += "<div class='modal fade' id='confirmationModal' tabindex='-1' role='dialog' aria-labelledby='confirmationModalLabel' aria-hidden='true'>";
html += "<div class='modal-dialog' role='document'>";
html += "<div class='modal-content'>";
html += "<div class='modal-header'>";
html += "<h5 class='modal-title' id='confirmationModalLabel'>Підтвердження</h5>";
html += "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>";
html += "<span aria-hidden='true'>&times;</span>";
html += "</button>";
html += "</div>";
html += "<div class='modal-body'>";
html += "<p>Налаштування збережено успішно.</p>";
html += "</div>";
html += "</div>";
html += "</div>";
html += "</div>";
html += "<script src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>";
html += "<script src='https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js'></script>";
html += "<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>";
html += "<script>";
html += "$(document).ready(function() {";
html += "var slider = $('#brightness');";
html += "var sliderValue = $('.slider-value');";
html += "slider.on('input', function() {";
html += "sliderValue.text(slider.val());";
html += "});";
html += "$('#configForm').on('submit', function(e) {";
html += "e.preventDefault();";
html += "var form = $(this);";
html += "var modal = $('#confirmationModal');";
html += "modal.modal('show');";
html += "setTimeout(function() {";
html += "modal.modal('hide');";
html += "form.unbind('submit').submit();";
html += "}, 3000);";
html += "});";
html += "});";
html += "</script>";
html += "</body></html>";

request->send(200, "text/html", html);
}

void handleSave(AsyncWebServerRequest* request){
if (request->hasParam("brightness", true)){
autoBrightness = false;
brightness = request->getParam("brightness", true)->value().toInt();
FastLED.setBrightness(2.55 * brightness);
FastLED.show();
}
if (request->hasParam("map_mode", true)){
mapModeInit = request->getParam("map_mode", true)->value().toInt();
}
if (request->hasParam("display_mode", true)){
displayMode = request->getParam("display_mode", true)->value().toInt();
}
if (request->hasParam("modulation_mode", true)){
modulationMode = request->getParam("modulation_mode", true)->value().toInt();
}

request->redirect("/");
}

void handlePost() {
Expand All @@ -248,10 +375,6 @@ void handlePost() {
int set_brightness = jsonDocument["brightness"];
int auto_brightness = jsonDocument["auto_brightness"];
int map_mode = jsonDocument["map_mode"];
int green_states_on = jsonDocument["green_states_on"];
int green_states_off = jsonDocument["green_states_off"];
int map_enable = jsonDocument["map_enable"];
int map_disable = jsonDocument["map_disable"];
int modulation_mode = jsonDocument["modulation_mode"];
int set_new_alarm_period = jsonDocument["new_alarm_period"];

Expand Down Expand Up @@ -568,6 +691,9 @@ void displayInfo() {
display.setTextSize(4);
DisplayCenter(time);
}
} else {
display.clearDisplay();
display.display();
}
}

Expand Down Expand Up @@ -631,6 +757,8 @@ void alamsUpdate() {
response = http.getString();
}
else {
Serial.print("Fetch fail: ");
Serial.println(httpResponseCode);
return;
}
http.end();
Expand Down

0 comments on commit ff95258

Please sign in to comment.