Our old cat felt a bit lonely after his friend passed away, so we decided to get him some refreshing new company. However, the younglings are eating a whole lot of cat food and this gives me the opportunity to realize a little hardware project with some circuits I had lying around for too long.
THE IDEA
I have a 3D printer, an ESP8266 with WIFI connectivity, a stepper motor with driver and I am an engineer. What could possibly go wrong?
The cat feeder is based on a simple bucket wheel blue print. A reservoir which holds the fodder on top and a cylinder with a pocket to pick up a portion while it rotates. To enjoy the full excitement of being technologically advanced is it imperative that the ESP8266 runs a web socket server to start and stop the feeding from anywhere (especially my couch 😀).
CREATING THE CAD MODEL
Building models for my FDM Prusa Mini comes with some limitations in terms of design if functionality is a focus. They cannot be larger than 180mm in all dimensions and to a) resist the hangry cat and b) be warp free, they have to be of appropriate thickness and size. A good guide for 3D printing model creation is e.g. available from the University of Louisville.
While waiting for all the prints to finish, it is time to take care of the software and electronics
ELECTRONIC HARDWARE
In order to minimize development time and avoid custom designing of PCBs the following four components will be the core of the built:
- ESP8266 NodeMCU board. Its a microcontroller board with integrated WiFi. It can be programmed with the Arduino framework and tools.
- 5V stepper motor
- ULN2003 stepper driver board
- 9V battery
Wiring can be taken from the following diagram. And yes, the 9V battery won't grill the ESP8266 since the datasheet says that you can apply up to 9V even if it says 5V.
CODING FOR NUTRITION
As a prerequisite for this project should you start with installing the LittleFS on the ESP8266. This will enable you to properly structure your project into files as you would do it on an ordinary computer. For details please take a look at the documentation. To actually use it, start with downloading the files and then unpack them into a folder called Tools right in your Arduino directory.
After restarting Arduino you will have the uploader available under the Tools menu.
Last step is to create a folder called data right underneath the folder in which you are going to store your sketch. All files which you want to upload need to be stored into this folder.
In our case this folder is going to have just one file for starters. This file will be the homepage through which the user is going to interact with the pet feeder.
<!DOCTYPE html>
<html>
<head>
<title>Cat Feeder V1</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>Cat Feeder V1</h1>
<table>
<tr>
<td>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Feeder Status</h5>
<p class="card-text" id="stat">Idling</p>
<a href="#" class="btn btn-primary" onclick="sendMyMessages()">Start</a>
</div>
</div>
</tr>
</table>
<script type="text/javascript">
var gateway = `ws://${window.location.hostname}/ws`;
var websocket = new WebSocket(gateway);
function getReadings() {
websocket.send("getReadings");
}
// When websocket is established, call the getReadings() function
websocket.onopen = function(event) {
console.log('Connection opened');
getReadings();
}
websocket.onclose = function (event) {
console.log('Connection closed');
}
// Function that receives the message from the ESP8266 with the readings
websocket.onmessage = function (event) {
console.log(event.data);
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}
}
function sendMyMessages() {
websocket.send("start");
}
</script>
</body>
</html>
Open the file in a browser of your choice and take a look at the result. A card with a button showing an idling pet feeder.
To help
you understand the script which is communicating with the server, can you read the docs available at Mozilla or other knowledge bases. A quick, yet detailed enough descripition follows now:
The head tag does two things.
It setst the title "Cat Feeder V1" of the homepage. And the css style of the table is defined here. Setting the border-collapse to collapse shows the border as one solid line instead of two separate ones.
<!DOCTYPE html>
<html>
<head>
<title>Websocket Table Update</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>Now in the body part of the HTML file happen two things. First a table with only one cell is defined. That cell holds a card. A card is a common design element where you have an image on top followed by some text or information below. We add a button to the text part which will be used to start the feeder by running the sendMyMessages() function which is defined further down int the script part of the code.
<h1>Cat Feeder V1</h1>
<table>
<tr>
<td>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Feeder Status</h5>
<p class="card-text" id="stat">Idling</p>
<a href="#" class="btn btn-primary" onclick="sendMyMessages()">Start</a>
</div>
</div>
</tr>
</table>The very first part of the script simply creates a new WebSocket() object. The variable gateway contains the IP adress of the homepage, respectively our server.
var gateway = `ws://${window.location.hostname}/ws`;
var websocket = new WebSocket(gateway);
First Test
The first assembly of the housing and the gears should now be ready to move for the first time and reveal whatever went wrong in the design