oster
/
hannabox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

webinterface

This commit is contained in:
Stefan Ostermann 2023-08-28 14:28:35 +02:00
parent 183c17c37c
commit 37f11de98a
3 changed files with 94 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/WebContent.h
View File

@ -4,50 +4,26 @@ const char index_html[] PROGMEM = R"rawliteral(
<head> <head>
<title>HannaBox</title> <title>HannaBox</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <link rel='stylesheet' href='/style.css' type='text/css' media='all' />
body { font-family: Arial; margin:5px auto; padding: 30px;}
.button {
padding: 10px 20px;
font-size: 24px;
outline: none;
color: #fff;
background-color: #2f4468;
border: none;
border-radius: 5px;
box-shadow: 0 6px #999;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.button:hover {background-color: #1f2e45}
.button:active {
background-color: #1f2e45;
box-shadow: 0 4px #666;
transform: translateY(2px);
}
</style>
</head> </head>
<body> <body>
<h1>HannaBox</h1> <h1>HannaBox</h1>
<span id="state">%PLAYING%</span><br/><br/> <span id="state">%PLAYING%</span><br/><br/>
<button class="button" onmouseup="toggleCheckbox('start');" ontouchend="toggleCheckbox('start');">Start</button><br/><br/>
<button class="button" onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Stop</button><br/><br/> <button class="prev-button" onmouseup="toggleCheckbox('prev');" ontouchend="toggleCheckbox('prev');"></button>
<button class="button" onmouseup="toggleCheckbox('next');" ontouchend="toggleCheckbox('next');">Next</button><br/><br/> <button class="play-button" onmouseup="toggleCheckbox('start');" ontouchend="toggleCheckbox('start');"></button>
<button class="next-button" onmouseup="toggleCheckbox('next');" ontouchend="toggleCheckbox('next');"></button><br/>
<button onmouseup="toggleCheckbox('stop');" ontouchend="toggleCheckbox('stop');">Stop</button>&nbsp;
<form action='playnamed' method='post'> <form action='playnamed' method='post'>
<div>
<div> <label for="title">Song title to play</label>
<label for="title">Song title to play</label> <input name="title" id="titleid" value="music" />
<input name="title" id="titleid" value="music" /> </div>
</div> <div>
<div> <button>Submit</button>
<button>Submit</button> </div>
</div>
</form> </form>
<p> <p>
<h2>Content of SD Card:</h2> <h2>Content of SD Card:</h2>
@ -82,6 +58,7 @@ const char index_html[] PROGMEM = R"rawliteral(
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { if (xhr.readyState === 4) {
displayState(xhr.response); displayState(xhr.response);
} }
} }
@ -91,6 +68,13 @@ const char index_html[] PROGMEM = R"rawliteral(
function displayState(state) { function displayState(state) {
document.getElementById("state").innerHTML = state; document.getElementById("state").innerHTML = state;
var elements = document.getElementsByClassName('play-button');
var btn = elements[0];
if (state=='-') {
btn.classList.remove('paused');
} else {
btn.classList.add('paused');
}
} }
function playNamedSong(song) { function playNamedSong(song) {

67
src/css.h Normal file
View File

@ -0,0 +1,67 @@
const char css[] PROGMEM = R"rawliteral(
body {
font-family: Arial;
margin: 5px auto;
padding: 30px;
}
li {
cursor: pointer;
}
.play-button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
margin: 5%;
height: 74px;
border-color: transparent transparent transparent grey;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 37px 0 37px 60px;
margin-right: 10%;
margin-left: 10%;
margin-top: 5%;
margin-bottom: 5%;
}
.play-button.paused {
border-style: double;
border-width: 0px 0 0px 60px;
}
.play-button:hover {
border-color: transparent transparent transparent darkgrey;
}
.next-button {
background: transparent;
padding: 0;
margin: -6px;
border-style: solid;
border-width: 18px 0 18px 30px;
border-color: transparent grey transparent grey;
box-shadow: 10px 0 0 0 grey;
}
.next-button:hover {
border-color: transparent darkgrey transparent darkgrey;
box-shadow: 10px 0 0 0 darkgrey;
}
.prev-button {
background: transparent;
padding: 0;
margin: 0;
border-style: solid;
border-width: 18px 30px 18px 0;
border-color: transparent grey transparent grey;
box-shadow: -10px 0 0 0 grey;
}
.prev-button:hover {
border-color: transparent darkgrey transparent darkgrey;
box-shadow: -10px 0 0 0 darkgrey;
}
)rawliteral";

6
src/main.cpp
View File

@ -32,6 +32,7 @@
#include "globals.h" #include "globals.h"
#include "WebContent.h" #include "WebContent.h"
#include "css.h"
#include "DirectoryNode.h" #include "DirectoryNode.h"
File root; File root;
@ -175,7 +176,7 @@ String getState()
} }
else else
{ {
state += "Stopped "; return "-";
} }
if (currentNode) if (currentNode)
{ {
@ -304,6 +305,9 @@ void setup()
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{ request->send_P(200, "text/html", index_html, processor); }); { request->send_P(200, "text/html", index_html, processor); });
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request)
{ request->send_P(200, "text/css", css); });
server.on("/state", HTTP_GET, [](AsyncWebServerRequest *request) server.on("/state", HTTP_GET, [](AsyncWebServerRequest *request)
{ {
String state = getState(); String state = getState();