Caravan/motor-home leveler part 1 (hardware)

For an index to all my stories click this text

In a previous story on this weblog I showed how to get human readable x and y angle values from an MPU6050. You can read that story here:
http://lucstechblog.blogspot.com/2024/04/mpu6050-data-in-degrees-instead-of.html
And I build something really useful with this.

I made a project that helps with leveling your caravan or motorhome !!

The story.

Last summer we went on a holiday. And we always go camping. We camp with a tent. But on most camping sites nowadays lots of people have caravans or motorhomes.
The first thing you need to do with a caravan or motor-home is to set it level. If it is not things will roll from your table. Water will not go down the drain or you will tumble out of your bed. OK I know that last one is extreme.

I saw a lot of people that were struggling with getting their caravan/motorhome horizontal. They put a leveler in the doorway. Went to the blocks and adjusted them, then went back to the leveler to see if it was horizontal. Then they went back to the block, adjusted again and went back to look at the leveler etc.

Hey in a motorhome you can put the leveler on your dashboard and then just ride up the blocks till your horizontal?? No does not work that way because most dashboards are tilted.
Ok then put the leveler on a table. Well that does not work either as the table is behind the driver so he can't see if it's horizontal.

So then I got an idea.
Why not build an electronic device that you can put on your motorhome/caravan's table. And then that device sends it data to an app on your phone. Then you can go outside and look at your phone's screen while leveling your caravan/motorhome !!

The above picture shows a screendump of two versions of my caravan and motorhome leveling aid. The picture on the left shows a screendump from a JavaScript program which run's in your phone's browser. The picture on the right side shows the output from a dedicated app for your phone.

I made several versions of the software before I was satisfied and decided these were the final versions. Both will be published in the next story on this weblog so keep following. In this story I'll show you how to build the electronics.

And of course you can use this for many other things like DIY home improvement projects as this is not just a caravan leveler but a general remote leveling aid.

Here is a video that demonstrates how it functions. As you can see the device works on batteries and is wireless connected to a phone. There is a delay build in the app. Shortening the delay time will make the ball move smoother. That is expalined in the story about building the app.

What you'll need

To build this project you will need:
- A battery holder for 3 AA or 3 AAA batteries
- A small on-of switch
- A led (I used a clear red one)
- A 220 Ohm delimiting resistor
- Female headers for the MPU6050 and ESP8266
- A Wemos D1 Mini (ESP8266)
- An MPU6050
- An enclosure (I printed mine)

I used a clear red led as that gives  the best visibility in broad daylight.
The led and the switch were added because in de test phase I often forgot to switch set set off so the batteries got drained. The led reminds you that the power is still on.

Please be aware that you do need a microcontroller with Wifi. The controller will send it's data over Wifi to the mobile phone.

If you are very confident about soldering you can leave the female headers out, but I do not recommend that.

The program for the microcontroller is written in MicroPython.  This makes it easy to replace the Wemos D1 Mini by an ESP32 Dev board or a Raspberry Pi Pico W. You will just have to adjust the pin numbers in the program. And of course the enclosure I build will not fit as these controllers are larger.

The hardware setup

The first setup was made without the batteries. I tested everything while the Wemos was attached to my computer and powered over the USB connection.

This was the initial setup. This is the setup as described in the previous story. This was ok for testing while it was connected to my computer.

And this is the schematics for the setup with the battery.
For your convenience I give the connections verbally.

- The GND of a 3 pack AAA or AA batteries is connected to the GND of the ESP8266 and the GND of the MPU6050. Next to that it is connected to a 220 Ohm delimiting resistor that is connected to a led.

- The VCC (+) of the battery pack is connected to the common connection (middle) of an on-off switch.

- The ON pin of the on-of switch is connected to the led and to the 5V pin of the ESP8266

- The MPU6050 needs 3V3 and is powered from the 3V3 pin of the ESP8266

- The SCL pin of the MPU6050 is connected to D1 (pin 5) of the ESP8266

- The SDA pin of the MPU6050 is connected to D2 (pin 4) of the ESP8266

Be Carefull:
NEVER CONNECT THIS PROJECT TO YOUR COMPUTER WITH AN USB CONNECTION WHILE THERE ARE BATTERIES IN THE BATTERY HOLDER. YOU MIGHT DAMAGE YOUR WEMOS OR EVEN YOUR COMPUTER THAT WAY.

So for testing leave the batteries out and connect to the computer with USB. For real time use disconnect the computer and use the batteries.

And here is the stripboard setup.
Cut the stripboard so it is as large as actually needed otherwise it will not fit in the below presented enclosure. Even better (maybe): 3D print the enclosure and then make the stripboard fit before soldering the electronics to it. Or cut the stripboard to fit into your own enclosure.

Make sure the stripboard lines beneath the Wemos D1 Mini are cut as otherwise the upper and lower pins are connected and that is something you definitely don't want.

The enclosure

Like stated before I designed an enclosure for this project and 3D printed it.



This is how the complete setup looks. The left lid on the box is white and that is the battery compartment. The right side's lid is purple and that is where the electronics reside. Please note that this enclosure is not water tight so keep it away from rain and moisture.
When everything is build and tested you can glue the right-side lid on the enclosure. The left side needs to stay open, of course, to change the batteries.

This is a closeup on how I fitted the stripboard into the enclosure.

And this is how the complete setup looks.
I used hot glue to secure the switch and the led to the enclosures wall. And I used screw connectors for the connections of the switch and the led. That is not necessary but makes assembling and disassembling easier.

At the left side of the casing is a gap that makes the USB connector accessible.

Some notes:

- Make sure the headers for the MPU6050 are soldered completely vertical (90 degrees) to the stripboard. If they have an inclination that will influence your readings.
- I made some small strips of a few mm height and put these at the sides of the casing. The stripboard rests on these so the stripboard does not rest on the soldered spots which might incline the print and influence the readings.
- You could power the setup with a powerbank or from a computer with the usb connection on the Wemos. But an USB cable might put some tension on the Wemos and might give the stripboard an inclination and that influences the readings of the MCU6050.

Generally said: make sure that the stripboard is completely horizontal in the casing. And never power through the USB and with batteries at the same time.

The STL files.

There are 3 STL files. One for the box and 2 for the lids. Please be aware that the lid for the battery compartment is different from the lid for the electronics compartment. And yes, I forgot to make a hole for the led so I just drilled one.

Here is a link to the STL files so you can print your own casing.
You can however use any casing you like as long as the bottom is perfectly flat.

https://www.mediafire.com/folder/jpswchudmlwu5/Caravan-leveler

First test

You can use the program from the previous story to test if everything functions as it should. Here is the link to that program.

Next time: The software
For now you can build this, so you are well in time for the summer holliday.

So, that's it for now.
Have fun

Luc Volders

MPU6050 data in degrees instead of gibberish

For an index to all my stories click this text

Summary:
The MPU6050 is an Accelerometer & Gyroscope that measures movement and rotation. That all sounds great but the information you get from it is in my view pure gibberish. I want simple information like an angle in degrees. The program presented here takes the information from the MPU6050 and translates it in (for me) comprehendible information: just simple degrees.

Please follow this weblog if you go camping with a Caravan or Camper as I have a great story coming up on how this project can help you leveling your Caravan or Camper.

Last summer we went camping and looking at people with caravans and campers I had a great idea. After the holiday I immediately started building the project I had in mind. And then I stumbled upon a small problem.

The project uses an ESP8266 and an MPU6050. The programs used are written in MicroPython.

Wiring them up was no problem at all.



The wiring is so simple that I did not make a breadboard setup but soldered it direct on some stripboard. The final project will be different and battery powered. But let's start with this.

- The MPU6050 needs 3V3 and is powered from the 3V3 pin of the ESP8266

- The SCL pin of the MPU6050 is connected to D1 (pin 5) of the ESP8266

- The SDA pin of the MPU6050 is connected to D2 (pin 4) of the ESP8266

We are going to start with a test and for that connect the ESP8266 with a USB cable to your computer and start Thonny.

The MPU6050 Library

Thonny has a convenient tool to install libraries. But unfortunately that did not supply any library for the MPU6050 that works on a microcontroller. So I turned to the web for a search and there I found a nice library. The library was used by multiple websites but unfortunately I could not find the original developer. So I can not give credit to the developer. Neither can I point to a Github page where you can find that library.

However that library was too extensive for what I needed. Therefore I edited it heavily. I left a lot of things out that I did not need and rewrote a large part of the output. And here is the result:

'''
Luc Volders library for MPU6050
'''

from machine import Pin, I2C
import time
 
def init_mpu(i2c, address=0x68):
    i2c.writeto_mem(address, 0x6B, b'\x00')
    time.sleep_ms(100)
    i2c.writeto_mem(address, 0x19, b'\x07')
    i2c.writeto_mem(address, 0x1B, b'\x00')
    i2c.writeto_mem(address, 0x1B, b'\x00')
    i2c.writeto_mem(address, 0x1C, b'\x00')
 
def read_data(i2c, addr, address=0x68):
    high = i2c.readfrom_mem(address, addr, 1)[0]
    low = i2c.readfrom_mem(address, addr + 1, 1)[0]
    value = high << 8 | low
    if value > 32768:
        value = value - 65536
    return value
 
def get_data(i2c):
    readx = read_data(i2c, 0x3B) / 16384.0
    ready = read_data(i2c, 0x3B + 2) / 16384.0
    readz = read_data(i2c, 0x3B + 4) / 16384.0
    
    return readx, ready, readz

This library only returns the acceleration values as that is what I need.
The MPU6050 also has a Gyro inside and a temperature meter. I do not need the Gyro values so they are omitted. The temperature sensor only measures the temperature inside the chip and that is totally different from the temperature in your room. So I don't use that either.

How to use this library.

To use this library we need to copy it to the ESP8266's memory.

So copy the above code and paste it in Thonny.



Choose save as.



Then choose save to MicroPython Device



When the file selector opens choose to save in the lib folder with the name lucsmpulib.py

The library is now ready for use.

The standard MPU6050 program.

Here is the program that reeds the MPU6050 data and writes that data in the shell:

from machine import Pin, I2C
import time
import math
from lucsmpulib import init_mpu, get_data

i2c = I2C(scl=Pin(5), sda=Pin(4), freq=400000) # esp8266
init_mpu(i2c)

while True:
        val_x, val_y, val_z = get_data(i2c)
        print ("x = " ,val_x)
        print ("y = " ,val_y)
        print ("z = " ,val_z)
        time.sleep(1)

I will not go into the details as the program almost speaks for itself.
Just mind the pin connections:
- D1 (pin 5) to SCL
- D2 (pin 4) to SDA   

The standard output:

And here is a screenshot of the data we get from the MPU6050.



Like said: pure gibberish.
Not what we want. We want clear understandable data. 

MicroPython program that gives angles in degrees.

Like said before: the values mean nothing to me. I need human readable angle (x and y) values in degrees. And here is the program that provides that.

'''
Program for reading MPU6050 values
and convert them to x and y angles in degrees

From http://lucstechblog.blogspot.com/
'''

from machine import Pin, I2C
import time
import math
from lucsmpulib import init_mpu, get_data

i2c = I2C(scl=Pin(5), sda=Pin(4), freq=400000) # esp8266
init_mpu(i2c)

while True:
    readx, ready, readz = get_data(i2c)

    x = math.atan2(ready, math.sqrt(readx * readx + readz * readz)) * 180 / math.pi
    y = math.atan2(-readx, math.sqrt(ready * ready + readz * readz)) * 180 / math.pi
    z = math.atan2(readz, math.sqrt(readx * readx + ready * ready)) * 180 / math.pi
    
    print("=======================================================")
    
    if (x <= 0):
        x = math.floor(x)
    else:
        x = math.ceil(x)
    if (y <= 0):
        y = math.floor(y)
    else:
        y = math.ceil(y)
    print("x = ", x)
    print("y = ", y)
    time.sleep(2)

The program in itself is not complicated but the math is.

Let's have a look at some details.

from machine import Pin, I2C
import time
import math
from lucsmpulib import init_mpu, get_data

First step is to load the necessary libraries. All libraries are standard included when you install MicroPython except of course the lucsmpulib library. That's the one I discussed above.

i2c = I2C(scl=Pin(5), sda=Pin(4), freq=400000) # esp8266
init_mpu(i2c)

The i2c pins are defined for the ESP8266, and the mpu6050 is initialised.

while True:
    readx, ready, readz = get_data(i2c)

    x = math.atan2(ready, math.sqrt(readx * readx + readz * readz)) * 180 / math.pi
    y = math.atan2(-readx, math.sqrt(ready * ready + readz * readz)) * 180 / math.pi
    z = math.atan2(readz, math.sqrt(readx * readx + ready * ready)) * 180 / math.pi

The endless loop constant reads the values of the MPU6050. It gets the x, y and z values for the accellerator. These are the only values we need.

Then some complicated math is used to translate the received gibberish into human readable degrees. As the math is beyond the scope of this web-log I will not go into details. Just use it !!

    if (x <= 0):
        x = math.floor(x)
    else:
        x = math.ceil(x)
    if (y <= 0):
        y = math.floor(y)
    else:
        y = math.ceil(y)
    print("x = ", x)
    print("y = ", y)
    time.sleep(2)

If the x, y or z values are equal to 0 or less then zero the value is down-rounded to it's integer value. If the values are larger then 0 they are up-rounded to the nearest integer value.

If you need more accuracy then leave the rounding part out.

I left the z value out of he print sequence as I do not need it for my project. It can however be interesting for other projects. The drill is the same as for the x and y values.

The result

And this is what the output looks like:



I took a geo-triangle and held the setup against it and look there: right on the nose. Totally accurate on the x-values as the slope of the geo-triangle is indeed 45 degrees.



When I put the MPU6050 on the geo-triangle but on the Y side my y values where off. Why ???



Well look at that. When the MPU6050 was flat on the table it gave 4 degrees at the y value. So obviously my table was not completely level. When pressed to the geo-triangle it said 49 degrees. When flat on the table it said 4 degrees and the difference is 45 degrees which it should be.



So when I changed the orientation of the MPU6050 (just turned it 90 degrees) it gave the accurate angle again. So my table is indeed not leveled.

There you got it !! MPU6050 values in degrees !!! And accurate !!!

What now ??

Like stated in the beginning of this story I have a complete project coming up that helps you leveling your Caravan or Camper.

But you can use this for many more projects. Here are a few Ideas I came up with.

- How about using the MPU6050 as a directional control for a remote controlled car or boat. The x angles for forward and reverse and the y angles for left and right.
- How about using the MPU6050 to stabilise your cam or webcam, so no matter what angle your body is at, the camera always points forward
- How about a simple leveler for your DIY building projects.
- How about a tool for leveling your paintings.

That's it for now.
Till next time
Have fun


Luc Volders

Battery powering an ESP8266

For an index to all my stories click this text.

Upcoming is a fairly complicated project. The project needs a microcontroller with Wifi but just a few IO pins. The ESP8266, in the form of a Wemos D1 mini, was therefore the preferred choice.
Next to that the project needs to work outdoors so no router to connect to. And it needs to be compact and mobile.
No power supply available and solar panels would make the project less mobile.

One lucky aspect is that it just needs to work for a short time, like half an hour or so. After that it would shutdown and not be used for at least a day or so.

I could connect an external powerbank but that would make my project more bulky.

So I opted for batteries.

Battery holder

I knew an ESP286-01 works with batteries as I had done some projects with these. But I had never used a Wemos D1 mini with batteries so it was a bit of a challenge. It turned out much easier as I expected.

What you need is a battery holder for 3 AA or 3 AAA batteries. You can find them at your favorite supplier or build them yourself. I did this before for some projects with an ESP8266-01 and an Attiny 85.
If you are in the lucky position to own a 3D printer you can print battery holders in any type and size you like.



Here is my design for a 3 AA battery case. You can find a description and link to STL files here: http://lucstechblog.blogspot.com/2016/04/3d-printed-battery-holder-i-was.html


Powering the Wemos with batteries.

Actually this is really simple.



Just attach the + connector from the battery holder to the 5V pin of the Wemos D1 mini. Then connect the GND from the battery holder to the GND of the Wemos D1 mini and you're done. Just make sure the Wemos D1 mini is not connected through USB.

And actually it worked really well !!!
I had a sensor attached to the ESP8266 as a test and the tiny AAA batteries even lasted for several hours which was more than needed for this project.

Here is a picture of my setup.

And the good part is that you can still remove the batteries and attach an external powersupply or powerbank.

CAUTION:
DO NOT USE THE BATTERIES AND A POWERSUPPLY, POWERBANK OR A CONNECTION TO YOUR COMPUTER AT THE SAME TIME. THAT MIGHT CAUSE UNREPAIRABLE DAMAGE, CAUSE FIRE, OR EVEN BLOW UP YOUR COMPUTER

Till next time
have fun


Luc Volders

Turn a webpage into an app

For an index to all my stories click this text

In the previous story I showed you what was (by my own findings) the best web-service that can turn a web-page into an Android APP. You can re-read that story here.
http://lucstechblog.blogspot.com/2024/03/webservices-that-turn-website-into-app.html

Another story showed how to write a simple game in Javascript. Re-read that story here.
http://lucstechblog.blogspot.com/2024/03/javascript-reaction-game.html

For those more interested in a serious app you can follow the story on how to build a console for Freeboard:
http://lucstechblog.blogspot.com/2023/08/freeboard-revisited-2.html

And this story tells how to use Github not only as a safe storage for your source code but also to turn HTML files into a webserver. You can re-read that story here: http://lucstechblog.blogspot.com/2023/07/using-github-for-building-website.html

In this web-log entry I am going to show you how to combine these to turn any web page or even html code (with Javascript) on your harddisk into a dedicated Android App.

If you want to follow the steps to build an app I urge you to read those previous stories and make sure you have your own website up and running on Github Pages, or have the HTML code ready on your harddisk.

First step: register at webintoapp

To make an app you need an account with webintoapp. So point your browser to https://www.webintoapp.com/register and create an account.



Once you are logged in you are presented with the dashboard.



As you can see in the Apps List I already made some apps.



Next to the apps name there are three icons. Click the first one (the little cloud) to download an existing app. The second one allows for editing the apps info and settings. The third icon gives detailed info about the app and its home page on which details follow later on.

The icons at the top present the different possibillities. The settings show your activities, the way the apss are displayed and allows you to change your user name, password etc. Installs presents statistics about your app. Like how many times it has been downloaded, and from where (which country) it has been downloaded. This can be of value when you have a successfull app and you are planning to translate it into different languages.

The most important Icon however is the Maker. This is where it all happens.

Turn a web-page into an app

Click on the maker button/icon to start building your app from a webpage.



Let's look at the left part of the screen first.
At the top there is the choice of building an app from a website (Online URL) or HTML files. Default is building from an Online URL and we will start with this.

In the URL field fill in the name of the website. I used the Github Pages website which is https://lucvolders.github.io/htmltest02/ You may use that too as a test or use your own webpage.

Next give your App a name and a version number. I Choose Reaction as the name and did not alter the version number. You can alter the version number if you are publishing an update for your app.

As the Company/Brand name I choose my own name which resulted in the Package name com.luc.reaction.

Now let's have a look at the right part of the screen.



At the top you can see the icon that is choosen for the app. You can alter this by clicking on Set Icon or Find. Find opens a new browser window and directs it to flaticon, a website where you get access to thousands of free icons. Choose an appropriate one and download it to your computer.

You can also design your own icon. Make sure it is saved in the PNG format. I used an icon provided by Flaticon and downloaded that to my computer. Then I clicked on Set Icon and choose that file.



App Toolbar offers to alter the color of the App's toolbar.

The Splash Screen option is only for the premium version. A splash screen is a startup screen that is presented when your app starts. It can contain a logo and information about the maker or your company. The free version of Webintoapp does not provide for a splash screen.
I have not tried it by now but I presume you can make your own splash screen in HTML if you want one and are not willing to pay for Webintoapp.

Leave the Certification settings, Firebase settings and AdMob as they are.



The Settings icon at the bottom is what you might check into. The most important setting in the General tab is to enable Javascript (which is obvious) and if HTTP requests are allowed.



The permissions app is another important tab. For example if you really want to make sure that your app only works off-line you can set the Add Internet Permission off. Choose here what your app really needs. My reaction game for example needs none of these permissions so you could set them all off.

We are done with the settings for the app.



On the left side on the screen at the bottom click on Next.



The right side of the screen changes into the above.
If you need special features like a splash screen, an IOS version, Push notifications etc choose for the Dedicated Android and IOS App version and pay the fee.

If you do not need those extra's choose the Free Android APP and press Make App at the bottom.



And there is your app: Reaction V1.0

Click on the cloud icon next to the name and a small screen opens that allows to download the app. The Free app can be downloaded immediately. It is set into a zipped map. You'll need an unzip tool to access it.

The file is downloaded into your Download folder. Move the folder to a working directory and unzip it.

There are some files in the zipped
folder that link to the webintoapp website and to your (Author) home



The important files are in the android folder. There you will find the apk file. Transfer it with a USB cable to your phone and it is ready to be installed.

Easy installing your APP.

Besides transferring your app with an USB cable from your PC to your phone/tablet there is also an easier way.



Click on the settings icon next to your app. The drop-down menu has an entry called App Homepage. Click on that.



A new screen opens which gives the settings for a special dedicated homepage for this app. Set the Enable App Homepage switch to ON Choose an App Categgory and give a small description. at the top you can see the link to the homepage in this case it is: https://www.webintoapp.com/store/29818



And this is what the Reaction 1.0 webpage looks like. Access it with your phones browser and you can download and install it. Share the link with your relatives/friends/collegues etc so they can download the app themselves.


Turn HTML files into an app

If you did not make a webpage from your HTML files I presume you still have the files on the disk-drive of your PC.



I made a folder on my PC's hard disk that contains the Icon and the HTML file. The previous part showed how to set the icon for the app. Do that first.

Make sure you have some software on your PC that can zip a file. I use 7zip (https://www.7-zip.org/).
Click on the index.html file with your right mouse-button and zip the index.html file.



In the App maker screen choose HTML Files and click on the upload symbol with the text Select ZIP File. Select the zipped index folder on your harddisk and follow the steps described in the beginning of this story to make your app.

That's all.

That is indeed all there is to building an App for your phone from some HTML files or from an existing web-page.

Make sure to note the Apps dedicated web-page so you can easily distribute your app to those that need it.

Till next time
Have fun

Luc Volders