Evening everyone.
I have a personal music website running on an ESP32 controlled by an IPAD.
I have 500 songs each one has a dedicated hyperlink website address
example 192.168.1.100/1 is song 1 192.168.1.100/2 is song 2 etc.
The /1 and /2 tells the ESP32 which song to play
Since there are 500 songs I have to scroll down several pages to find the one I want.
When I select the song, and hit the play button on the IPAD, the ESP32 server plays the song,
BUT it immediately refreshes the screen on the IPAD to the top of the list. So I then have
to scroll down many pages again to get to another song.
How do I go about having it update the page, but keep my current position on the page?
It's not a matter of refreshing the screen the PROBLEM
is that is refreshes with the first song listed, NOT where
on the list I selected the song. IF I selected song 400
I want the screen to refresh at song 400 NOT song 1
you can hit your URL ie: 192.168.1.100/path in async without refreshing the page
// this is like hitting 192.168.1.100/some_path?some_variable=variable_value
sendData('some_path?some_variable=variable_value',function(mm) {
// do something with mm returned response
});
function sendData ( url,gotResp ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
gotResp( this.responseText );
}
};
xhttp.open('GET', url , true);
xhttp.send();
} // end function
I need to have the page refresh on each song selected to show that it has been selected.
That way I can buffer up as many songs that I want knowing which songs have been selected.
Noiasca do you have sample code that you can show me how to implement the id?
Kassimsamji your thoughts on using id or other methods to fix my problem?
Noiasca, here is the HTML code that creates the webpages
void CreateWebPages()
{
int y; // Start of Creating Webpages, one page for each song
for (y = 0; y < i; y++) {
client.print("<a href='"); // create hyperlink
client.print(y); // subpage to 192.168.1.100
client.print("'>");
client.print(titlesbuffer[y]); // names of songs sent to client
client.print("</a><br><br>"); // end of hyperlink with two carriage returns
}
}
Also, all the songs titles (links) listed on the IPAD are underlined.
I tried using "text-decoration:none;" to eliminate the underlines with no success.
I'm sure that I'm not implementing it correctly. This statement is not shown in the posted code.
If anyone can show me in the code how to remove the underlines that would be terrific.
I can't use your c++ source code because I don't have your sd card reader with your sd card with your files. I will not get the same HTML like you and this is useless.
Therefore I asked for the HTML code generated from your program. The content generated by your ESP and sent to the browser. In lot of browsers this can be seen with something like a right mouse click and "Show Source Code" ....
before you post that to the forum I recommend you add at least a line break in your list of files
void CreateWebPages()
{
int y; // Start of Creating Webpages, one page for each song
for (y = 0; y < i; y++) {
client.print("<a href='"); // create hyperlink
client.print(y); // subpage to 192.168.1.100
client.print("'>");
client.print(titlesbuffer[y]); // names of songs sent to client
client.print("</a><br><br>\n"); // add a line end!!!
}
}
@zuelatak, you are creating a list of hypertext link, so you should change CSS properties of the HTML element <a>
However, in my opinion, HTML handling is way too brainy.
With this structure you will never get what you want because every time you click on one of the links it is in fact a new web page and therefore it is impossible to keep the position updated.
You have to change your approach, making AJAX requests to the webserver.
Speaking of webserver... why the hell did you use the poor WifiServer.h library instead of the much more complete WebServer.h (always included in core)
With this library you could avoid parsing the text file for the titles and pass it directly to the web page in order to build a dynamic and more performing web page
Hi cotestatnt, I'm a newbie at coding so I just took code from different places in order
to create what I needed. So WifiServer.h must have been part of one of the programs that I used.
Changing my approach making AJAX requests is way over my head. Do you have sample code
that shows how to implement what I'm trying to do with AJAX requests?
Also can you explain what I need to change in my code to get rid of the underlines for the links?
Hi noiasco, ryanasler asked me to post all the code thinking he could help me as well.
Now that you have explained how to get the HTML code then I can get it and post it.
Also What list of files are you referring to?
The first place where you should look before starting a new project is the included library examples!
You are using a SD for your tracks, so why don't use the same SD also for serving HTML sorurces files included the track list txt file?
In the library that I have already mentioned, for example, there is a ready to work example!
That example in addition has even a integrated file editor for runtime editing!
The sketch could be a little simpler without, but I think the web editor is very very helpful while you are coding your webpages.
Once you have a working webserver on your ESP32, your MP3 webpage could be created directly on the SD memory. Something like this file for example (renamed to txt for the forum):
On your sketch side, you should simply add the missing 2 handlers for the PLAY button and for the "track select" HTTP request. The homepage will be served directly from SD memory
void handlePlayTrack() {
if (server.hasArg("path")) {
String path = server.arg("path");
Serial.println(path);
// Do whatever you need to do with your mp3 track
}
returnOK();
}
void handlePlay() {
ShiftOutSong();
returnOK();
}
// inside setup() (like other handlers already defined)
server.on("/playTrack", HTTP_GET, handlePlayTrack);
server.on("/PLAY", HTTP_GET, handlePlay);