Order your Christmas presents now !!

 For an index to all my stories click this text

Now is the time !!

Just a shameless plug.

IF you have any friends, loved ones or relatives that are stepping into the wonderful world of Microcontrollers, electronics or the Internet Of Things please consider buying one of my books. And now is the time so it will arrive in time before Christmas

And by ordering these books you also support this weblog which allows me to buy new sensors etc. to build new projects and write about them.

These books are aimed at beginners to this hobby and are clearly written with many examples and projects that get you started right away.

This book was written several years ago and is still a bestseller.
It explains working with a breadboard, the C++ (Arduino) language and explains the workings of many sensors. Next to that the book shows how to work with cloud based services. It also shows how to build a simple webserver that allows to get sensor (like your home temperature etc) data from anywhere in the world.
Click here to buy this book.

The Raspberry Pi Pico was the first microcontroller from the Raspberry Pi Org. that is well known for its small Linux computers. The Pico took the IOT world by storm because of it's low price, worldwide availability, many IO pins, great speed and the availability of the MicroPython language that makes programming this chip really easy. This book shows how to install MicroPython, and covers the basic syntax of this easy to learn language. Next to that the book shows how to work with all kinds of sensors, motor, buttons etc. etc. All projects are well documented and breadboard based so no soldering !! The projects in this book will also work on the Pico2.
Click here to buy this book.

The Raspberry Pi Pico W is the successor of the Pico and adds Wifi to its capabilities. The book shows how to install the MicroPython language and the basic syntax. Then it focus on working with many sensors, motors, buttons etc. The book shows how to use wifi to get access to internet services. And a lot of attention is paid to building webservers in MicroPythoin that allow you to read sensors (like your home temperature) and set lights on or off from anywhere in the world. The projects in this book will also work on the Pico 2W
Click here to buy this book.

Javascript is without a doubt the most used computer language in the world. Anytime you click a button on a webpage or see some interactive action on a webpage Javascript is involved.
This book does not learn how to program in Javascript but gives you hundreds of tips while programming in this language. It covers topics like sorting of data, date manipulation like calculating the number of days between days, rounding figures, hding and showing hidden elements on a webpage, acting on key presses etc. etc. etc. There are hundreds of tips covering almost any aspect of building interactive webpages and working with the data on these pages.
This book might also be a valuable asset when building webservers with microcontrollers like the ESP32 and Raspberry Pi Pico series.
Click here to buy this book

Have a good Christmas
and have fun

Luc Volders

Caravan/Motor-home leveler part 5 - build the app

For an index to all my stories click this text

This is the fifth story in the series about building a device that aids with leveling your caravan or mobile-home. I am sure you will find other purposes for this tool to.

The previous stories in this series are important if you want to build this project yourself.

- The first story discussed building the hardware and a casing for the caravan/mobile-home leveling aid. You can find that story here: http://lucstechblog.blogspot.com/2024/04/caravanmotor-home-leveler-part-1.html
- The second story discussed the MicroPython program for the ESP8266 and how to test the setup. You can read that story here:
http://lucstechblog.blogspot.com/2024/05/caravanmotor-home-leveler-part-2.html
- The third story is about building an HTML file with Javascript that can be opened like a web-page on your mobile-phone and is the actual program that displays the data from the leveling aid. You can find that story here: http://lucstechblog.blogspot.com/2024/05/caravanmotor-home-leveler-part-3.html
- Story 4 showed how to run the software on your PC instead of on your phone. You can read that story here:
http://lucstechblog.blogspot.com/2024/05/caravanmotor-home-leveler-part-4-run-on.html

This story tells how to build a dedicated app from the HTML file. I already mentioned that you could do this in the third story. And I wrote a story some time ago about how to turn an HTML file into a dedicated app. You can read that story here if you missed it:
http://lucstechblog.blogspot.com/2024/04/turn-webpage-into-app.html

As I had some requests from readers that wanted a complete tutorial on how to turn the caravan/mobile-home leveling aid into an app I am happy to oblige. You can use this tutorial for any HTML page with Javascript that you want to turn into a dedicated app.

Description of the app

The app I am going to make is a simple app.
- It has it's own icon so you can find it between all the other icons on your phone's home screen.
- The app has a splash screen. That is a welcoming screen, shown when you start the app.
- After clicking the splash screen the app starts.
- The app gets the data from the ESP8266 and displays it graphically. This is just the Javascript program inside the HTML file.
- The app has an Exit button at the top-right side of the screen that, obviously, exitst the app.

This app is for Android Phones. The Webintoapp service we are going to use offers a possibility for building an app for Apple Phones. Due to the extreme price tags of Apple Phones I do not (want not) own an Apple Phone. Next to that the Webintoapp service charges a sum for building the Apple App while the Android app is free !!!

Download the Javascript file to your computer.

First step is to download the HTML file with the Javascript program to your computer. You can use the download link provided here.

https://app.mediafire.com/jpswchudmlwu5

This link directs your browser to the directory on Mediafire where you can find all files for this project.



There are 2 files we need for building the app:
- caravan-ico.png
- caravan-level.html

The other files are of course necesary for the other stories in this series.

Make a zip file from the html file.

Webinto app needs the HTML file to have a special name. That name is index.html so start with renaming the caravan-level.html file into index.html.
There are loads of programs that run under Windows or Linux that can create a zip file from any files you throw at it.



If you do not have such a program at hand you can use a webservice. I used compress2go.com You can find it here: https://www.compress2go.com/create-zip-file

Just drag the HTML file from your disk to the orange field on the screen and then press the start button at the bottom. After a few moments a new screen opens on which you can download the zip file.


The icon

You can use the caravan-ico.jpg for which I just provided the download link.



You can of course design your own icon. I made mine in The Gimp and it has a resolution of 512 x 512 pixels. This is the maximum size for icons that Webintoapp accepts and gives the best results.

Webintoapp

Now we have gathered everything we need we can visit the service that makes the app.

https://www.webintoapp.com/

Copy this link and put it in your browser to visit the site.

Register or if you already have done so, log in.



As you can see I had already made some apps for previous stories on this weblog.

As we are going to make a new app choose App Maker at the top of the screen.

Standard Webintoapp is set for making a website into an app. We are going to make an HTML file into an app. So choose that option (where the red arrow points).

Then click on select zip file and upload your freshly made index.zip file that contains the index.html file and nothing else.

Fill the next fields in. So give your app a name (I chose Caravan-Leveler) and fill in your Company/Brand name. I just used my own name here.
When you are making updates to an app you can fill in the Major version and Minor version fields. Just leave them as they are at this moment.

In the adjacent column first choose set icon and then upload the caravan-ico.png icon you previously downloaded.

Then chose the colors you want for the toolbar (the top of your screen). I did not make any alterations here. But you can chose another color setting if you want. Click OK when done.

There is a Splash-screen option. Unfortunately that is only usable by Premium developers. If you need a Spalsh screen with your company logo or whatever the consider becoming a Premium developer.
The other options like Certification, Firebase and Admob I left unchanged.

Then click on the last option: Settings.

Make sure you enable JavaScript in the settings menu. Without Javascript our program will not run. Important is also that you Allow HTTP requests as our ESP8266 does not allow HTTPS requests.
And chose the Screen ON option so the app stays active.

Click on the Advanced tab and chose the apps orientation. Set this (for this app) to Portrait.

And in the last tab (Permissions) make sure that the Internet Permission is set on. Our app will not communicate over the internet but direct to the ESP8266. But this option is needed to make sure Wifi is enabled.

Then click on the OK button to save your choices.

Then go back to the right part of the screen and click on the Next button.

A screen opens with the complete overview of your settings. Check if everything is ok and then press Make App on the left-bottom side of the screen.

When the app has been made a new pop-up screen emerges. Here you can fill in some details about the app. As Category I chose Auto & Vehicles but there are many more categories to choose from.

You can also give a short description here about your app.

This information will be shown on a special home-page for this app.
You can find the URL of that homepage in the first field in this pop-up screen.

Click OK, and you're done !!!

The App's homepage.

And this is how the homepage looks.

Save it's URL so you can use it on your phone to download the app, or to send it to friends to share.
From this page you can also download the app to your computer and transfer it from the computer to your phone.

If you lost the URL to the App's homepage you can always go to the dashboard and click on the most right icon next to the App's name and Icon. There is a drop-down menu in which there is a link to the homepage.

If you are lazy, and do not want to build the app yourself, you can use my app's homepage:

https://www.webintoapp.com/store/313868


Transfer the app from your PC to your Phone

There is an easy way to transfer the APK file from your PC to your phone. In fact there are several ways to do that.

- Drive
If you use Google Drive you can upload the App to that service and download it on your phone.

- Telegram
If you use Telegram on your Phone you can use the Telegram web-app and transfer the file from the web-app to your phone. I have demonstrated how to do that in this story on this web-log:

http://lucstechblog.blogspot.com/2023/03/file-transfer-with-telegram.html



Installing the App

If you downloaded the App on your phone with a web-browser from the app's home-page. The APK file will be in the download folder and called app-release. Just click on it and give permission to install it. And again: for lazy people that not build the app themselves can download it from my app's download page: https://www.webintoapp.com/store/313868

If you downloaded the app from Telegram you need to point your file manager to the Telegram folder/directory on your phone. There you will find the APK file with the name app-release. Click on it and give permission to install the App.

That's the complete story.
I hope this project helps you in any way.

Till next time
Have fun

Luc Volders

Caravan/Motor-home leveler part 4 - Run on your PC

For an index to all my stories click this text

As a reaction to my previous stories on the caravan/mobile-home leveler I received mail from a few readers that wanted to know if they could test the caravan/mobile-home leveler on a PC.

The previous stories on this project showed how to install the software on your mobile phone. Installing it on your PC for testing at home is actually easy to do.

The MicroPython program for the ESP8266

First thing to do is to adapt the program for the ESP8266.
In the project the program creates an access point. For using it at home you need to start the program as a wifi device.

To adapt the program, connect the ESP8266 to your computer with an USB cable and start Thonny to Edit the program.

MAKE SURE TO REMOVE THE BATTERIES BEFORE CONNECTING THE ESP8266 TO YOUR COMPUTER. NEVER USE BATTERIES AND THE USB CONNECTION AT THE SAME TIME AS THAT MIGHT DAMAGE YOUR ESP8266 OR EVEN WORSE: DAMAGE YOUR COMPUTER BEYOND REPAIR.

I will give here the part of the original program we need to change. It looks like this

'''
Caravan and Mobile Home leveling aid
http://lucstechblog.blogspot.com/

Version with http server
The x and y values are rounded
ESP is configured as Access Point
'''

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

import socket
import network

ssid = 'Caravan-Leveler'
password = '123456789'

ap = network.WLAN(network.AP_IF)
ap.active(True)
ap.config(essid=ssid, password=password)

while ap.active() == False:
  pass

print('Connection successful')
print(ap.ifconfig())

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

 

This is the part where the libraries are imported and the Accesspoint is activated. Replace this part with the following code:

'''
Version with http server
version where the x and y values are rounded
ESP is station
'''

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

import socket
import network

ssid = "YOUR-ROUTERS-NAME"
pw = "PASSWORD"

print("Connecting to wifi...")

# wifi connection
wifi = network.WLAN(network.STA_IF)
wifi.active(True)
wifi.connect(ssid, pw)
print('Waiting for connection.',end="")
while wifi.isconnected() == False:
    utime.sleep(1)
    print('', end='.')
print("")

ip = wifi.ifconfig()[0]

print("Connected with IP adress : "+ip)

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

And this is what you should replace it with. The program now acts as a standard wifi device (station), makes contact with your browser, and gets an IP address. The reswt of the program stays the same.

Make sure that you replace YOUR-ROUTERS-NAME and PASSWORD with your routers credentials.

You need to run the adapted program with a USB connection to your computer as we need to get the IP address the ESP8266 has gotten from your router. Your's will of course be different.

And now we have the IP address.

The Javascript program.

The Javascript program is more than 300 lines long.
Use a text editor like notepad to load the program. An HTML file is just a plain ASCII text.
Use the search function in the editor to find this line:

fetch(`http://192.168.4.1`).then(function(response) {

Replace the IP address 192.168.4.1 with the address Thonny showed. In my example it should look like this:

fetch(`http://192.168.178.231`).then(function(response) {

Then save the file with exact the same name in a directory on your PC.
Open that directory and click on the HTML file.

And here is the caravan/mobile-home leveler running in my browsers screen on my PC.

Clicking anywhere in the screen with your mouse will open the program full-screen. Clicking the red exit button in the top-right corner makes the screen smaller again. You can resize it to any size you like and the program will adjust automatically.

Several parts of the program were taken from my book on Javascript: Javascript tips. This book does not teach how to program in Javascript but gives more than 500 tips that can make programming in Javascript a lot easier.

Click this line (or the book) to find the book on Amazon.

That's it for now
Have fun

Luc Volders

Caravan/Motor-home leveler part 3 - Software for your mobile

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

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

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