Food Timer Prototype

As described in the previous proposal before, I made a food timer that helps people to keep track of the food that's easily rotting like groceries. It contains two parts: the application that manages the food info in the server, and a hardware timer attached on your fridge to remind.

Front-end code is hosted in this GIthub, deployed on Glitch; Arduino code is here. You can test the application by opening this link in your browser on you phone (It's available on the desktop browser as well but the format is bizarre).

Let's check the demo first.

The screenshots of the browser application, where you can add and delete the food info.

Left: Main screen; Right: Add food screen (you can manually input the data for now, scanning will be available in the future)

Hardware side:

A pretty compact device that can be held in your hand

Circuit Diagram

Rotary encoder, Adafruit SSD1306, Arduino nano 33 IoT
System diagram

Arduino Side

I had to admit that I cheated in that I used Wifi instead of BLE. The reasons of using WiFi were two-fold:

1) WiFi is the best solution for my project since my data formats are JSON arrays while Bluetooth characteristics only allows transmitting one data every time (and it didn't support JSON format characteristics);

2) The logic of using BLE to transmitting food info was quite complicated - you have to let BLE device send characteristics first to fetch specific data that the user asks for and write characteristics back to BLE to show. It was even harder to sync data between hardware and the software.

So I looked into Tom's week 9 materials and learnt how to connect device to my WiFi network and get data from http server. And now it's sync.

Browser Side

i skipped the scanning part for now because I thought the scanning method and the manually inputting data should be mutually exclusive. If the user scans the food qr-code or bar-code, he/she shouldn't be bothered to manually set the time unless the user is not satisfied with the preset setting. Otherwise the scanning would be a redundant step for user from their perspective.

I only designed the responsive web below 479px screen size, so it looked pretty messy on the desktop. Would improve that!