cleanup, web interface

This commit is contained in:
Stefan Ostermann 2023-08-28 22:10:38 +02:00
parent 4fd7856736
commit d0f9f400f9
4 changed files with 23 additions and 29 deletions

View File

@ -226,15 +226,16 @@ String DirectoryNode::getDirectoryStructureHTML() const
{
String html;
html.reserve(1024); // Reserve memory for better performance
appendIndentation(html, 0);
html += "<ul>\n";
appendIndentation(html, 1);
html += "<li>" + name + "</li>\n";
if (name=="/") {
html += "<ul>\n";
}
if (name!="/") {
html += "<li><b>" + name + "</b></li>\n";
}
for (const String &mp3File : mp3Files)
{
appendIndentation(html, 2);
html += "<li>" + mp3File + "</li>\n";
}
@ -242,9 +243,9 @@ String DirectoryNode::getDirectoryStructureHTML() const
{
html += childNode->getDirectoryStructureHTML();
}
appendIndentation(html, 0);
html += "</ul>\n";
if (name=="/") {
html += "</ul>\n";
}
return html;
}

View File

@ -8,10 +8,13 @@ const char index_html[] PROGMEM = R"rawliteral(
</head>
<body>
<h1>HannaBox</h1>
<span id="state"></span><br/><br/>
<div>
<button class="prev-button" onmouseup="simpleGetCall('prev');" ontouchend="simpleGetCall('prev');"></button>
<button class="play-button" onmouseup="simpleGetCall('toggleplaypause');" ontouchend="simpleGetCall('toggleplaypause');"></button>
<button class="next-button" onmouseup="simpleGetCall('next');" ontouchend="simpleGetCall('next');"></button><br/><br/>
</div>
<div class="slidecontainer">
<label for="progress" id="progressLabel"></label>
<input name="progress" type="range" min="0" max="100" value="0" class="slider" id="progressSlider"
@ -23,24 +26,13 @@ const char index_html[] PROGMEM = R"rawliteral(
<input name="volume" type="range" min="0" max="21" value="12" class="slider" id="volumeSlider"
onmouseup="postValue('volume',document.getElementById('volumeSlider').value);"
ontouchend="postValue('volume',document.getElementById('volumeSlider').value);">
</div>
<button class="prev-button" onmouseup="simpleGetCall('prev');" ontouchend="simpleGetCall('prev');"></button>
<button class="play-button" onmouseup="simpleGetCall('toggleplaypause');" ontouchend="simpleGetCall('toggleplaypause');"></button>
<button class="next-button" onmouseup="simpleGetCall('next');" ontouchend="simpleGetCall('next');"></button><br/>
</div>
<!--
<button onmouseup="simpleGetCall('stop');" ontouchend="simpleGetCall('stop');">Stop</button>&nbsp;
<form action='playnamed' method='post'>
<div>
<label for="title">Song title to play</label>
<input name="title" id="titleid" value="music" />
</div>
<div>
<button>Submit</button>
</div>
</form>
-->
<p>
<h2>Content of SD Card:</h2>
<h2>Inhalt</h2>
%DIRECTORY%
</p>
@ -54,8 +46,6 @@ const char index_html[] PROGMEM = R"rawliteral(
liElements.forEach(function(li) {
li.addEventListener('click', function() {
var liText = this.innerText;
var inputField = document.getElementById('titleid');
inputField.value = liText;
playNamedSong(liText);
});
});

View File

@ -29,6 +29,7 @@ li {
.play-button.paused {
border-style: double;
border-width: 0px 0 0px 60px;
height: 74px;
}
.play-button:hover {
border-color: transparent transparent transparent darkgrey;

View File

@ -174,6 +174,8 @@ String getState()
jsonState["playing"] = audio.isRunning();
if (currentNode!=NULL)
jsonState["title"] = *currentNode->getCurrentPlaying();
else
jsonState["title"] = "Angehalten";
jsonState["time"] = audio.getAudioCurrentTime();
jsonState["volume"] = audio.getVolume();