For an index to all my stories click this text.
This is the third part of my project on building a caravan/mobile-home leveling aid.
The video shows how this device works. You put the box on the table or floor of your caravan/mobile-home and outside you can level the caravan by looking at the screen of your phone/tablet. The devices are connected by Wifi. No need to walk back and forth to see if your camper is level.
The first story in this series showed how to build the hardware. You can read that here:
http://lucstechblog.blogspot.com/2024/04/caravanmotor-home-leveler-part-1.html
The second story discussed the MicroPython program for the ESP8266 and the MPU6050. You can find that story here:
http://lucstechblog.blogspot.com/2024/05/caravanmotor-home-leveler-part-2.html
This story tells how to build the program for your mobile phone.
The structure of the (Javascript) program
The program is written as a web page with Javascript.
This makes it very small (about 7k) and portable. It will work on a computers screen, a tablet and on your phone.
There are some tricks in the program.
- It will automatically adjust to the width and height of your screen.
- If you resize your screen (on a notebook) it will adjust automatically
- There is a text that is made visible on the screen and then disappear
- Clicking the window/screen resizes it to full screen
- Received data from the ESP8266 is text the program converts it into a floating point number
- The floating point number is converted to an integer value
- The horizontal and vertical lines are made with CSS
- The centre circle and the bubble are created in CSS
The program itself is fairly complicated and more than 300 lines of code. And to tell the thruth: I was fairly proud of myself when I got it all working.
- It starts with CSS code to draw the lines, the centre circle and the red bubble.
- Every second it fetches the x and y values from the ESP8266
- These values are put at the bottom of the screen
- It tests if the values are positive or negative so it knows where to position the bubble
- The x value is then converted to the position on the half of the screen height.
- The width of the bubble is halved and with the converted x value determines the place of the bubble on the length axis.
- The y value is converted to the position on the half of the screen width.
- The height of the bubble is halved and together with the converted y value determines the location of the bubble on the width axis
As stated the program is an HTML file. So it is a website with Javascript that fetches the data from your ESP8266 and displays that graphically.
This means that there is no quit button. To stop the program you will have to close your browser.
Click here to locate the book on Amazon
The code uses some neat tricks that come from my book Javascript tips. That book is not a tutorial about programming in Javascript but just a book chock-full of tips and tricks that show how to get things done in Javascript.
The program.
Like said above the program consists of more than 300 lines of CSS, HTML and Javascript code. So it is far to large to discuss here in detail.
I also do not want to publish it here as that would make this page too bulky. Therefore I herebye give you two options to download the code.
Point your QR-code reader program here and you will get a link to the download location.
https://www.mediafire.com/file/7q2vlg55gs0ctk5/caravan-level.html/file
This is the download link. Click this link and you will be directed to the download location. You can also copy this link and then open it in your browser to visit the download location.
Click the light-blue part where it says caravan-level-html
At the bottom of your screen a message will appear and click on the Download button.
After a very short time a new message will appear telling that the file has been downloaded and that you can open it. Don't do that at.
With your file manager on your phone open the downloads folder. And there is the file caravan-level.html
Click that file.
The file has (of course) the name caravan-level.html
The file is now permanent on your phone/tablet.
So when on the camping site just go to the phones settings. Select the wifi settings and connect to the caravan-leveler accesspoint.
The previous story in this series showed how you can connect to the hardware device with an Android phone. The procedure for a tablet is of course likewise. On a notebook you will need to find the Caravan-Leveler accesspoint and then connect to it's IP address with your browser. I presume the procedure for an Apple notebook/Ipad or Iphone is likewise but unfortunately I do not own these devises so I can not test that.
Please read that story so you know how the procedure works. You can find it here:
http://lucstechblog.blogspot.com/2024/05/caravanmotor-home-leveler-part-2.html
Then open the file manager, go to the downloads folder and click the caravan-level.html file.
And there it is. And the caravan is on a steep slope in this picture !!!
All files for this project (until now)
https://app.mediafire.com/jpswchudmlwu5
This link is useful on your PC as it directs you to the folder on Mediafire where you can download all files for this project: the hardware schematic, the STL files for the case, the MicroPython file for the ESP8266 and the HTML file.
That is all.
Well just one more thing.
On this weblog I discussed a nice web-service that allows you to turn a web-page into an app. Just search this weblog and you will find it.
Till next time.
Have fun
Luc Volders
