15. Interface and application programming¶
This week I worked on my final project, specifically the third object Willo. Willo is an emergency device, which through a capacitive proximity sensor perceives the touch or proximity of a body and sends a message via wifi to an app. I did not want to use a button as for some people with motor difficulties it can be complicated both to center the button and to apply the strength to activate it. In this case, a simple movement of any part of the body will be enough to send the alarm. This device will allow people to be more independent, because they can be left alone, knowing that in any moment of emergency they can ask for help from their doctor, health worker or caregiver via a notification from the app.
To make that I used RemoteMe, a free, customizable system which helps you to communicate with your IoT devices. They provide coding wizards to automatically generate webPages and sketch so you don’t have to code everything from scratch. This is the video-tutorial to Send Push notification to android app from ESP.
Now we can customize the interface of our app.
This is a mockup I did on Illustrator:
It was just a test, but in this case I will focus on the home page, since I am new to the html language it already seems to me a great achievement.
Since we already connected a device to it, we can start from there.
By opening index, script and syles we can start customizing our home page, as you can see here.
This is the logo I’m going to use:
First of all I added the logo to my fabacademy website, so that I could take the link from that and insert it in the app. Then I added some text and edited the font, px and color.
Here I was trying to make communicate the device with my phone.
And once again we have our hero shot!
