Added an ESP8266 to my Mega for gauges project

Projects Networking, Protocols, and Devices
1

Hi

I added an ESP8266 to the Mega mounted in my truck. This already controls various things.

I know nothing of Java, HTML etc, but I have been teaching myself and got a reasonable way.
All written in/for Bootstrap 5.
I have managed to get OTA updates working, Websockets etc, plus live updating in both directions.

Also got a very good gauges library up and running using CDN

Image attached of a demo screen to try and iron out issues.

The whole lot is stored in Spiffs.
My issue is, that the webpage loads perfectly in a PC browser, but all the formatting, Java etc is missing when you load it on a mobile device. I cannot for the life of me see why the page will not load on a mobile device.

I have tried the usual name="viewport" content="width=320px, initial-scale=1" (and many variations of), which appears to be the go-to answer for this issue on Google..
The page loads, and scales correctly, just no graphics, Java, gauges etc.

I joined the ESP8266 forum, but literally nobody goes there. You guys are a bit more helpful.

I realise this is a HTML or formatting issue, rather than a Arduino issue. But, if I can get this up and running, I think the final addition to the Mega will be worth posting for others to use (as in, two way comms to webpage gauges, controls etc).

Any ideas where to start poking? Maybe its just an Android thing (although I thought Bootstrap was multi-platform)

Oh, and how come the Networking, Protocols and Devices forum doesn't work in Firefox, but all the other forums do?
Had to jump over to Chrome to post this.

Gauges.png
Gauges.png1323×909 75.5 KB

I should add that if I lift the HTML file, Java and CSS directly file over to my Android and then run the HTML file on the phone, it all loads fine. So this must be something to do with how it's delivering the Spiffs files to Android?

Gauges.png
Gauges.png1323×909 75.5 KB

2

do you have all files in SPIFF or you use js frameworks from CDN on Internet?

3

Now careful here... I am just learning!

The gauges library is imported (is that the correct term?) within the head of the HTML file. That all seems to work fine.
That saves me wasting SPIFFS space holding those files locally.

But, the actual HTML commands in Bootstrap are not working on the Android.

for instance...

<div class="container-fluid">
    <div class="jumbotron text-center container p-3 my-3 bg-dark text-white">      <!-- Create the grey box -->
        <img src="img/logo.png" alt="Logo image" width="300" height="100" class="mx-auto d-block">
        <h1>RGB CONTROLLER</h1>
        <p>Communications over WiFi between webpage and ESP8266</p>
     </div>   
</div>

This snippet of my code creates the header the header text on a PC, within a grey box with all the correct padding etc.
Works fine on the PC, but the jumbotron formatting is missing on the Android and it just shows the header text with no formatting.

4

so you have some style files loaded from Internet?
is the Android connected to Internet and to esp8266 at the same time?

5

Got it....

@import "~bootstrap/dist/css/bootstrap.min.css";

This needs to be in the CSS file.

No, it's only connected to the ESP8266, so yes, that is a point.... how is it loading the gauges from the CDN (which it appears to be doing).

Hmm

6

Right, my ESP8266 is connected to the internet, as well as providing an AP for my phone to connect to.

So, going forward, that might be a complicated way of doing it.

Maybe I need to host the contents of the CDN in SPIFFS after all (and therefore not needing an internet connection). Trouble is the CDN data is vast and I have no idea what parts I would need or how to host them correctly.

7

As a side note/question on this project, does anyone know why the ADC pin is not reading at all on my ESP8266?

Am I missing something?
New device, so it should be good.

Got a 10k pot. One end at 0v, the other at +3.3v. The wiper then goes through a 220R to the adc A0 pin, which is held to 0v with a 100R. That voltage divider should give me 0-1.031v I believe.

I read it with ADCVal = analogRead(A0);

But I just get garbage random figures that are anywhere between 50 and 200, and it doesn't respond to being held to ground at all.

Stumped on that one.

8

input of A0 is 0 to 1 V

9

Well the spec sheet I have here says 0-1.1v, so my voltage divider should be within that

10

I have very good two way comms now between my mega and a webpage. Voltages, RGB values etc are displaying nicely using these gauges...

But... the gauge animations work fine on my laptop, but there is no animation (just a jumping needle) when viewed on a mobile device.
I just cannot figure out what is missing. Any ideas?

11

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.