hexianglong/snapclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sliders to ui http server

Browse Source 
Signed-off-by: Karl Osterseher <karli_o@gmx.at>
This commit is contained in:
Karl Osterseher
2023-08-15 14:34:40 +02:00
Unverified
parent 54490f8259
commit b3695f70e0
5 changed files with 204 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
components/ui_http_server/html/index.html
View File

@@ -8,29 +8,106 @@
h1 {font-size: 2.9rem;}
h2 {font-size: 2.1rem;}
p {font-size: 1.9rem;}
body {max-width: 500px; margin:0px auto; padding-bottom: 30px;}
.slider { -webkit-appearance: none; margin: 14px; width: 400px; height: 15px; border-radius: 5px; background: #39a6de; outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 12px; background: #f74d4d; cursor: pointer;}
.slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 12px; background: #F74D4D; cursor: pointer; }
.slider {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
margin: 14px;
width: 15px;
height: 200px;
border-radius: 5px;
background: #39a6de;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 12px;
background: #f74d4d;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 12px;
background: #F74D4D;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DSP processor filter configuration</h1>
<!-- Displays the range of the slider from -6 to 6 in steps of 0.1 -->
<h2>base gain</h2>
<div class="headline_container">
<h1>DSP processor filter configuration</h1>
</div>
<div class="body_container" style="max-width: 500px; margin:0px auto; padding-bottom: 30px;">
<div class="range_container">
<div class="range_1_container" style="float:left; margin:10px">
<div class="sliders_labels">
<label for="BaseGainSlider">Base</label>
</div>
<div class="sliders_control">
<input id="BaseGainSlider" type="range" orient="vertical" onchange="sendUpdateSlider()" oninput="updateSlider('baseSliderValue', this.value)" min="-6.00" max="6.00" value="0.00" step="0.01" class="slider">
</div>
<div class="slider_value" style="width: 100px;">
<span id="baseSliderValue">0.00</span> dB
</div>
</div>
<div class="range_2_container" style="float:left; margin:10px">
<div class="sliders_labels">
<label for="MidGainSlider"">Mids</label>
</div>
<div class="sliders_control">
<input id="MidGainSlider" type="range" orient="vertical" onchange="sendUpdateSlider()" oninput="updateSlider('midsSliderValue', this.value)" min="-6.00" max="6.00" value="0.00" step="0.01" class="slider">
</div>
<div class="slider_value" style="width: 100px;">
<span id="midsSliderValue">0.00</span> dB
</div>
</div>
<div class="range_3_container" style="float:left; margin:10px">
<div class="sliders_labels">
<label for="heightsGainSlider">Heights</label>
</div>
<div class="sliders_control">
<input id="heightsGainSlider" type="range" orient="vertical" onchange="sendUpdateSlider()" oninput="updateSlider('heightsSliderValue', this.value)" min="-6.00" max="6.00" value="0.00" step="0.01" class="slider">
</div>
<div class="slider_value" style="width: 100px;">
<span id="heightsSliderValue">0.00</span> dB
</div>
</div>
</div>
<!-- Displays the range of the slider from 0 to 100 in steps of 1 -->
<p><span id="textSliderValue">50</span> &#37</p>
<p><input type="range" onchange="updateSlider(this)" id="BaseGainSlider" min="0" max="100" value="50" step="1" class="slider"></p>
<script>
function updateSlider(element) {
var sliderValue = document.getElementById("BaseGainSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
function sendUpdateSlider() {
var gain_1 = document.getElementById('BaseGainSlider').value;
var gain_2 = document.getElementById('MidGainSlider').value;
var gain_3 = document.getElementById('heightsGainSlider').value;
console.log(gain_1 + ", " + gain_2 + ", " + gain_3);
console.log("/post?gain_1=" + gain_1 + "&gain_2= " + gain_2 + "&gain_3=" + gain_3 );
var httpRequest = new XMLHttpRequest();
httpRequest.open("POST", "/post?value="+sliderValue, true);
httpRequest.open("POST", "/post?gain_1=" + gain_1 + "&gain_2= " + gain_2 + "&gain_3=" + gain_3, true);
httpRequest.send();
}
function updateSlider(id, val) {
var output = document.getElementById(id);
output.innerHTML = val;
}
</script>
</body>
</html>

5
components/ui_http_server/include/ui_http_server.h
View File

@@ -4,8 +4,11 @@
void init_http_server_task(char *key);
typedef struct {
char str_value[4];
char str_value[8];
long long_value;
float gain_1;
float gain_2;
float gain_3;
} URL_t;
#endif // __UI_HTTP_SERVER_H__

74
components/ui_http_server/ui_http_server.c
View File

@@ -8,6 +8,8 @@
CONDITIONS OF ANY KIND, either express or implied.
*/
#include "ui_http_server.h"
#include <inttypes.h>
#include <math.h>
#include <mbedtls/base64.h>
@@ -15,19 +17,16 @@
#include <string.h>
#include <sys/stat.h>
#include "freertos/FreeRTOS.h"
#include "freertos/queue.h"
#include "freertos/task.h"
#include "dsp_processor.h"
#include "esp_err.h"
#include "esp_http_server.h"
#include "esp_log.h"
#include "esp_spiffs.h"
#include "esp_vfs.h"
#include "esp_wifi.h"
#include "dsp_processor.h"
#include "ui_http_server.h"
#include "freertos/FreeRTOS.h"
#include "freertos/queue.h"
#include "freertos/task.h"
static const char *TAG = "HTTP";
@@ -198,7 +197,7 @@ static esp_err_t root_get_handler(httpd_req_t *req) {
Text2Html(req, "/html/index.html");
/* Send Image */
Image2Html(req, "/html/ESP-LOGO.txt", "png");
// Image2Html(req, "/html/ESP-LOGO.txt", "png");
/* Send empty chunk to signal HTTP response completion */
httpd_resp_sendstr_chunk(req, NULL);
@@ -212,14 +211,48 @@ static esp_err_t root_get_handler(httpd_req_t *req) {
static esp_err_t root_post_handler(httpd_req_t *req) {
// ESP_LOGI(TAG, "root_post_handler req->uri=[%s]", req->uri);
URL_t urlBuf;
find_key_value("value=", (char *)req->uri, urlBuf.str_value);
// ESP_LOGD(TAG, "urlBuf.str_value=[%s]", urlBuf.str_value);
urlBuf.long_value = strtol(urlBuf.str_value, NULL, 10);
// ESP_LOGD(TAG, "urlBuf.long_value=%ld", urlBuf.long_value);
int ret = -1;
// Send to http_server_task
if (xQueueSend(xQueueHttp, &urlBuf, portMAX_DELAY) != pdPASS) {
ESP_LOGE(TAG, "xQueueSend Fail");
memset(&urlBuf, 0, sizeof(URL_t));
if (find_key_value("gain_1=", (char *)req->uri, urlBuf.str_value)) {
ESP_LOGD(TAG, "urlBuf.str_value=[%s]", urlBuf.str_value);
urlBuf.gain_1 = strtof(urlBuf.str_value, NULL);
ESP_LOGD(TAG, "urlBuf.float_value=%f", urlBuf.gain_1);
ret = 0;
} else {
ESP_LOGD(TAG, "key 'gain_1=' not found");
}
if (find_key_value("gain_2=", (char *)req->uri, urlBuf.str_value)) {
ESP_LOGD(TAG, "urlBuf.str_value=[%s]", urlBuf.str_value);
urlBuf.gain_2 = strtof(urlBuf.str_value, NULL);
ESP_LOGD(TAG, "urlBuf.float_value=%f", urlBuf.gain_2);
ret = 0;
} else {
ESP_LOGD(TAG, "key 'gain_2=' not found");
}
if (find_key_value("gain_3=", (char *)req->uri, urlBuf.str_value)) {
ESP_LOGD(TAG, "urlBuf.str_value=[%s]", urlBuf.str_value);
urlBuf.gain_3 = strtof(urlBuf.str_value, NULL);
ESP_LOGD(TAG, "urlBuf.float_value=%f", urlBuf.gain_3);
ret = 0;
} else {
ESP_LOGD(TAG, "key 'gain_3=' not found");
}
if (ret >= 0) {
// Send to http_server_task
if (xQueueSend(xQueueHttp, &urlBuf, portMAX_DELAY) != pdPASS) {
ESP_LOGE(TAG, "xQueueSend Fail");
}
}
/* Redirect onto root to see the updated file list */
@@ -367,18 +400,15 @@ static void http_server_task(void *pvParameters) {
// Waiting for post
if (xQueueReceive(xQueueHttp, &urlBuf, portMAX_DELAY) == pdTRUE) {
filterParams_t filterParams;
float scale, gainMax = 6.0;
// ESP_LOGI(TAG, "str_value=%s long_value=%ld", urlBuf.str_value,
// urlBuf.long_value);
scale = ((float)(2 * urlBuf.long_value - 50) / 100.0);
ESP_LOGI(TAG, "str_value=%s gain_1=%f, gain_2=%f, gain_3=%f",
urlBuf.str_value, urlBuf.gain_1, urlBuf.gain_2, urlBuf.gain_3);
filterParams.dspFlow = dspfEQBassTreble;
filterParams.fc_1 = 300.0;
filterParams.gain_1 = gainMax * scale;
filterParams.gain_1 = urlBuf.gain_1;
filterParams.fc_3 = 4000.0;
filterParams.gain_3 = gainMax * 0;
filterParams.gain_3 = urlBuf.gain_3;
#if CONFIG_USE_DSP_PROCESSOR
dsp_processor_update_filter_params(&filterParams);