-
Notifications
You must be signed in to change notification settings - Fork 0
/
budgie.html
167 lines (153 loc) · 8.7 KB
/
budgie.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Budgie</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<a class="hidden" href="">Skip to Main Content</a>
<nav>
<li><a href="/">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</nav>
<a class='h1-link' href="/"><h1>Abby Starnes</h1></a>
<p class="tagline">front-end developer</p>
<ul class="links">
<li><a class="" href="https://jsfiddle.net/user/ordette/fiddles"><i class="fa fa-jsfiddle "></i> JSFiddle</a></li>
<li><a class="" href="https://github.com/abbystarnes"><i class="fa fa-github "></i> GitHub</a></li>
<li><a href="https://medium.com/@abbymstarnes/" class=""><i class="fa fa-medium "></i> Blog Posts</a></li>
<li><a href="https://www.linkedin.com/in/abbystarnes" class=""><i class="fa fa-linkedin "></i> LinkedIn</a></li>
</ul>
</div>
</header>
<main>
<div class="wrapper wrapper-max-width">
<h2>Budgie</h2>
<p class="subtitle">A Receipt Scanning & Expense Tracking Application</p>
<article class="project">
<!-- <img class="logo" src="" alt="IBM Analytics Platform Style Guide"> -->
<h3>Technologies</h3>
<ul class='tech-list'>
<li><img class='tech' src="img/technologies/angularjs.png" alt="">
<p>Angular 1.6</p>
</li>
<li><img class='tech' src="img/technologies/cordova.png" alt="">
<p>Cordova</p>
</li>
<li><img class='tech' src="img/technologies/ionic.png" alt="">
<p>Ionic 1</p>
</li>
<li><img class='tech' src="img/technologies/aws.png" alt="">
<p>Amazon Web Services</p>
</li>
<li><img class='tech' src="img/technologies/postgresql.png" alt="">
<p>PostgreSQL</p>
</li>
<li><img class='tech' src="img/technologies/tesseract.png" alt="">
<p>Tesseract</p>
</li>
<li><img class='tech' src="img/technologies/d3.png" alt="">
<p>D3</p>
</li>
<li><img class='tech tech-express' src="img/technologies/express.svg" alt="">
<p>Express</p>
</li>
<li><img class='tech' src="img/technologies/nodejs.png" alt="">
<p>NodeJS</p>
</li>
<li><img class='tech' src="img/technologies/sketch.png" alt="">
<p>Sketch</p>
</li>
<li><img class='tech' src="img/technologies/mocha.svg" alt="">
<p>Mocha</p>
</li>
</ul>
</article>
<article class="project">
<h3>Overview</h3>
<p>Budgie is a cross-platform mobile application that allows users to track their food expenses using receipt scanning and data visualization. It is built on Cordova using Ionic. This is a week-long group project from quarter 3 of Galvanize's
24-week web development immersion course. My contributions included OCR image-to-text recognition, wireframing, and cross-platform styling.</p>
</article>
<article class="project">
<h3>Code</h3>
<a class='code-link' target="_blank" href="https://github.com/shhanson/budgie/tree/master/www">Front-End <i class="fa fa-external-link" aria-hidden="true"></i></a>
<a class='code-link' target="_blank" href="https://github.com/shhanson/budgie/tree/database">Database <i class="fa fa-external-link" aria-hidden="true"></i></a>
</article>
<article class="project">
<h3>Demo</h3>
<img class='screencast' src="img/screenshots/budgie.gif" alt="">
</article>
<article class="project">
<h3>Wireframes</h3>
<p>I created the wireframes in Sketch. It was a helpful way visualize the project, plan routes, and account for mobile gestures.</p>
<div class="wireframe">
<img src="img/wireframes.jpg" alt="wireframes for Budgie application">
</div>
</article>
<article class="project">
<h3>OCR Optical Character Recognition</h3>
<p class="text">This was my first time experimenting with OCR, and it was a lot of fun. I chose to use Tesseract because it is free and has substantial documentation.</p>
<div class="screenshots">
<div class="screenshot">
<img src="img/screenshots/ios-2.png" alt="wireframes for Budgie application">
<p class="caption">User clicks camera icon to select receipt photo from device camera.</p>
</div>
<div class="screenshot">
<img src="img/screenshots/ios-4.png" alt="wireframes for Budgie application">
<p class="caption">Device camera opens, allowing user to select a receipt photo.</p>
</div>
<div class="screenshot">
<img src="img/screenshots/ios-6.png" alt="wireframes for Budgie application">
<p class="caption">Receipt entry is autopopulated with items and prices from selected photo.</p>
</div>
</div>
<script src="https://gist.github.com/abbystarnes/d0e57b2f39d9325e46fbfc43e6e38f6b.js"></script>
<p class="text">The controller's takePicture() function requests access to mobile device's camera and returns selected image in base64 format. The image is then processed server-side, returning a list of receipt items and prices detected by Tesseract
OCR.
</p>
<script src="https://gist.github.com/abbystarnes/2c0debcfdf0f46c8ba64756cfe12b679.js"></script>
<p class="text">On the server side, the base64 image is uploaded and written to a temporary PNG file. The image is then preprocessed with <a href="http://www.fmwconcepts.com/imagemagick/textcleaner/">an ImageMagick script</a> to increase accuracy, and
the resulting TIF file is processed using Tesseract OCR. This returns a string of text, which is then parsed into receipt items and prices using a regular expression. The resulting lines are returned to the front-end as JSON.</p>
</article>
</div>
</main>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>