Fanbient
Made by Gabriela Rubio, Khanya Morolo and Andy Knapp
Ambient display that lets you visualize your monthly budget.
Created: February 3rd, 2016
0
Intention
Most millennials that enter the professional marketplace are usually overcome with student debt and financial strain. In an effort to financially prepare for the future and maintain an active social life, proper budget management is crucial. Throughout the month, these individuals might not pay enough attention to their spending habits and account balances. The ability for these individuals to effortlessly keep a watchful eye on their budget status in relation to progression of the month would be very powerful.
Process
At the beginning of this project, the team held a brainstorming session in order to determine some potential project concepts. A few of the ideas that emerged were: led status wallet, a tree with falling leaves, infinity mirror, and a Super Mario coin collector. The team decided that a tree with falling leaves as the source of the ambient financial information would align with our current skillsets and provide the most opportunity to develop additional IOT skills. The original concept consisted of dual DC servo motors that would unwind spools of string. At the end of the string, two leaves would be lowered to the bottom of the tree until they touched ground. One leaf’s displacement would translate to the progress through the month and the other would represent the amount of the budget that has been spent.
In order to input the financial information from the user, IFTTT and a HTML user interface will be utilized. At the beginning of the month, the user will input both the monthly budget and the current date. Google sheets will document the user’s credit card transactions throughout the month. Transaction information will be fed to the particle system through IFTTT on 15 minute increments. The system will then calculate how much to rotate both servos accordingly.
After numerous iterations of both particle code for servo motor control and prototype setup, the team was unable to achieve the desired level of control and functionality. We then decided to switch gears to another method of concept implementation. While the overall project concept did not change, we decided to alter the means of displaying the user’s financial information. The prototype now features two collapsible fan-like decorations. Each fan will rotate a total of 180 degrees according to budget balance or progress through the month. At the end of the month, the system will reset itself back to the starting position.
/* CONSTANTS & VARIABLES
------------------------------------------------------*/
Servo myServo1;
Servo myServo2;
int servoPin1 = D0;
int servoPin2 = D1;
int posS1 = 0;
int posS2 = 0;
int day=0;
int month=0;
int year=0;
String sDay;
String sMonth;
String sYear;
String sBudget;
String inUser;
int currentSpend = 0;
float time1 = 0;
float distance=0;
float budget=0;
int days;
float cdays=0;
int n=0;
int x=0;
/* SETUP
------------------------------------------------------*/
void setup(){
Particle.function("Spreadsheet", handleSpreadsheet);// function that pulls in credit card transactions from spreadsheet online
Particle.variable("Spend",currentSpend);
Particle.function("inData",inData);// function that pulls in users inputted budget and starting date
Particle.variable("inUser",inUser);
myServo1.attach(servoPin1);
myServo2.attach(servoPin2);
}
/* LOOP
------------------------------------------------------*/
void loop(){
while (budget!=0){
while(((cdays+day)/days*180)<=180){
myServo1.write((cdays+day)/days*180); // Blue fan moves some percentage of 180 degrees depending on how many days have passed in the month
}
while (((-currentSpend/budget)*180)<=180){
myServo2.write((-currentSpend/budget)*180);// Orange fan moves some percentage of 180 degrees depending on how much of your budget you have spent
}
cdays=cdays+0.5;// Display should only move twice a day, done to compensate for inaccuracies seen in servo motor; wanted only significant changes to be recognized
Serial.println((-currentSpend/budget)*180);// degrees orange fan should be moving
delay(1000);// delay put in place to allow for checking to occur twice a day
myServo2.write(0);// Done to match budget fan movement
myServo1.write(0);//Either currentSpend or fans needed to be reset because currentSpend accounted for all spending and would move the fan accordingly each time, thus counting the spend more than once
if (cdays==days)// at the end of the month the display should reset
{
myServo1.write(-180);
myServo2.write(-180);
cdays=0;
currentSpend=0;
}
}
}
/* CLOUD FUNCTIONS
------------------------------------------------------*/
int handleSpreadsheet (String command) {
//Serial.print("Recieved=");
//Serial.println(command);
int spend = command.toInt();
//Serial.println(spend);
currentSpend = currentSpend+spend; //calculate total spend
return 1;
}
int inData( String data ){
inUser = data;
int n = inUser.indexOf(':');
sBudget= inUser.substring(0,n); // extracts budget from string retrieved from html page
budget= sBudget.toFloat();
sMonth=inUser.substring(n+1,n+3); // extracts day from string received from html page
month= sMonth.toInt();
sDay= inUser.substring(n+4,n+6);// extracts month from string received from html page
day=sDay.toInt();
sYear= inUser.substring(n+7,n+11);// extracts year from string received from html page
year= sYear.toInt();
// if statements below are used to determine how many days there are in the month the budget is set to
if (month==1 or month==3 or month==5 or month==7 or month==8 or month==10 or month==12){
days=31;
}
if (month==4 or month==6 or month==9 or month==11){
days=30;
}
if (month==2 and year%4==0){
days=29;
}
else {days==28;}
cdays=day;
}<!DOCTYPE HTML>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<span id="tstamp"></span><br>
Enter budget: <input type= "text" bu="b1"><br>
Enter start date: <input type= "text" bu="b2”><br>
<button id="connectbutton" onclick="start()">Enter </button>
<script type="text/javascript">
function start(objButton) {
document.getElementById("tstamp").innerHTML ="";
var deviceID = “350035001547343339383037”;
var accessToken = "703a5e03e8ee64e4864fec7616f0f01b1236c3a0";
var varName = "budget";
var varName = “date”;
requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
$.getJSON(requestURL, function(json) {
document.getElementById("tstamp").innerHTML = json.coreInfo.last_heard;
document.getElementById("b1").value = parse(json.result);
document.getElementById("b2”).value = parse(json.result);
});
}
</script>
</body>
</html>
Outcome
The product works like this:
1. User specifies monthly budget and current date on HTML user interface
2. User’s credit card transactions are organized and documented on Google sheets
3. Transaction information is sent via IFTTT to Particle every 15 minutes.
4. Transaction amount totals are converted into percentage of monthly budget and converted into servo rotation
5. At the end of the month, the system resets back to its starting position.
Reflection
As a team, we are generally satisfied with the outcome of this project. Although we would have preferred if our first version of this ambient display had worked, the final concept provides a simple and subtle indication of the user’s budget balance. Simplicity was something that our team agreed was one of the main goals from the beginning of the project.
Share this Project
Found In
Courses
49-713 Designing for the Internet of Things
· 4 members
This course charts the emergence of the now "connected world" to explore the possibilities for future products and connected spaces.
Focused on
About
Ambient display that lets you visualize your monthly budget.