Website

[Sander0542]

Hello,

I have created an website interface that looks better, I'll include a download once I'm done with testing.

Regards, Sander Jochems

[Sander0542]

I couldn't found any errors. here is the zip with all the files in the data folder data.zip

[g-zajac]

Hello Looks much better indeed. Any chance to get an offline version and ESP fs friendly please? Best wishes Grzegorz

[Sander0542]

Hello,

Could you tell me what you mean with an offline version? I don't know what a ESP fs friendly is.

Regards, Sander

[g-zajac]

Hi I use isolated network with local icecast server without internet access. It looks like your nice pages need access to internet. I was thinking if I could download external files down to ESP fs. Best Grzegorz

On 28 Dec 2016, at 10:36, Sander Jochems notifications@github.com wrote:

Hello,

Could you tell me what you mean with an offline version? I don't know what a ESP fs friendly is.

Regards, Sander

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[Sander0542]

Yes, i use some internet css for the style. I will include the css in the data map

[Sander0542]

I'll add a new download link in a few minutes

[g-zajac]

Amazing! Thank you, much apriciate. Best wishes Grzegorz

On 28 Dec 2016, at 10:43, Sander Jochems notifications@github.com wrote:

I'll add a new donwload link in a few minutes

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[Sander0542]

I'm done, it should work now data.zip

[Edzelf]

I like the looks! But 1.5 MB is quite a lot of space...

[Sander0542]

Yes, that is because the css is in the data map, if you take remove the css map and change te url its a lot smaller

[Sander0542]

I have two version now:

Internet CSS --> data.zip 20 kb Included CSS -->data.zip 1,5 mb

I would use the Internet CSS, becuase then you have more space left in your ESP8266.

[Edzelf]

I like the "Included" version for safety and independency. I will try to make a smaller version with the same looks. My aim is 95 percent of the looks for 1 percent of the size...

[Sander0542]

Yes, the best thing you should do is to remove all the parts from the css which are not used.

[Edzelf]

New interface now in data-directory (14 KB).

[Sander0542]

Nice work,

The page doesn't work good on a phone like the one I made. There are a few things I would change to make it even nicer:

• White background of the textboxes
• No URL in the "ESP Radio" title in the topbar
• 3 Links on every page, not 2

If you want, I can change it and send it for the next update

[Sander0542]

I'm done, data.zip (17,1 kB)

[thermo2016]

I think the white background & links etc can be fixed by editing the ESP-radio.ino file. Go to function String getContentType ( String filename ) and add this line:

else if ( filename.endsWith ( ".css" ) ) return "text/css" ;

Without this, the esp internal web sever returns ccs code as text/plain whereas it needs to be text/ccs. I hope this helps.

[Edzelf]

I added Sanders website to the data directory. I added the ContentType "text/css" to the sketch.

[Edzelf]

The webinterface is now in PROGMEM. More reliable than in SPIFFS.

[Edzelf]

I found out that the ESP8266 will not handle multiple connections to the async webserver. Most browsers will open multiple connections to get index.html, radio.css and favicon.ico simultaneously. In Mozilla I changed the "network.http.max-persistent-connections-per-server"to 1 (was 6).

[Pavulon87]

Edzelf, maybe replace <link rel="stylesheet" type="text/css" href="radio.css"> with <script type="text/javascript"> var stylesheet = document.createElement('link'); stylesheet.href = 'radio.css'; stylesheet.rel = 'stylesheet'; stylesheet.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(stylesheet); </script> and add <noscript><link rel="stylesheet" href="radio.css"></noscript> after </html> It should work.

[Edzelf]

I will try that. Can you explain the difference?

[Pavulon87]

radio.css should start loading after page is loaded, so multiple connections will not be needed. Tested in google chrome and firefox

[Pavulon87]

I'm also trying additional headers. changed(every file): request->send_P( 200, ct, index_html ); to: AsyncWebServerResponse *response = request->beginResponse_P( 200, ct, index_html ) ; and added: response->addHeader("Server","Esp-radio Web Server"); response->addHeader("Cache-Control","max-age=3600"); response->addHeader("Last-Modified","Sat, 07 Jan 2017 21:00:00 GMT"); request->send(response);

[Edzelf]

Pavulon87: I updated the project according to you suggestions.

[GabeHC]

What tool should I use to convert those resource files into C array? I had custom icon need to put into PROGMEM. Don't know how to do it.

[Edzelf]

I used "od" on a Linux machine, but Googling on "dump file in ascii" or "hexdump" will give you all the answers.