Web application to easily view financial information with Chart.js

Key Technologies: HTML, CSS, JavaScript, CSV, Chart.js

I really wanted a quick and secure way to get a breakdown of my spending without having to give up my banking details to a third-party. For the longest time I was using an excel spreadsheets and doing a lot of work manually to categorize transactions and compute totals. One day I decided to just build my own tool!

  • Chase’s developer API is invite only, so used their csv data dump option
  • Lots of pre-work happens before rendering the charts, data from csv is converted to objects, grouped by months, computed for totals/averages/etc., and then categorized by user inputted data
  • The transaction list allows me to flag what category a transaction should fall under – under similar transaction will automatically be assigned that category unless explicitly overwritten.
  • Using chart.js to render the charts – this framework is incredible and really easy to use

Below is a video of what I settled on for a v1. It does everything I need it to quickly, and makes understanding where I’m spending my money clear. Some future enhancements will include:

  • Monitor Chase’s API to see if it opens up for normal developers
  • Flag transactions that fall outside a specific variance (unexpected transactions)
  • Show top 5-10 places I’m spending money, e.g. how much money am I spending at Chipotle!
  • Add pagination for transactions list
  • Show YOY information and trends
  • Add ability to layer in a second account
  • Refactor code to reduce redundancies in calculations
Example with fake data.

Custom Urban Airship Message Center Templates

Key Technologies: HTML, CSS, JavaScript (with jQuery), UA Console

To make a better guest experience I was asked create some new html templates to be used in our app’s message center (powered by Urban Airship). Although this used technologies I already knew, there was a ton of specialized learning to understand how all the pieces fit together.

Some key callouts were: understanding how the html entities needed to be prepared/attributed in the template creation process so that the UA CMS sees them as editable fields, exploring how the UA webview creates a JS bridge and passes a UA object to be used by template at run-time, and how the template itself reaches out to UA for user specific data with the help of data passed in the CMS process.

End result
Original email
Custom editable fields within UA CMS

Ulta Smart Mirror kiosk app built on top of Electron

High-level overview:

  • Informative walk-by video
  • Browse products by featured category, add products to a collection and then text yourself that list
  • Scan products and get information/reviews quickly with the built in UPC scanner
  • Learn about our rewards program and text yourself a link to sign-up
  • Play around with the build in lights and lighting presets
  • Watch how-to tutorials videos
  • Try on virtual lipstick
  • When all else fails, use it as a mirror!
Video overview of features (screen capture over rendering)
Full view. Tap for larger view.

Porsche Paint to Sample Explorer (PTS) built with Bootstrap, Photoshop Scripting and AR QuickLook

Key Technologies: Bootstrap (HTML/CSS), JavaScript, JSON, and AR QuickLook

PTS Explorer is a quick way to find instagram photos of a given PTS (paint to sample) color. A few months ago I noticed there were many Instagram accounts centered around PTS colors – this worked well to see many examples of different colors, but what if you didn’t know all the colors, or wanted to see many examples of a certain color?

These questions prompted me to create PTS Explorer.

Responsive layout using Bootstrap. Tap image for larger view.
Filter colors by name. Tap image for larger view.
Filter colors by hue. Tap image for larger view.
View instagram photos tagged with color. Tap image for larger view.
Example 2. Tap image for larger view.
On iOS12 via Mobile Safari preview colors in AR QuickLook.
Use photoshop scripting to quickly generate swatches from JSON data file.

https://www.ptsexplorer.com

Command: a macOS app that interfaces with the NCE usb module via RS-232

Key Technologies: RS-232, Hex, and Cocoa (Mac)

Command for Mac is a [native] application I built to run DCC trains on my office layout. It works by using the USB Interface for Power Cab to bridge the gap from the computer to the NCE cab bus. The application uses the RS-232 serial interface to send hex commands to control the locomotives.

The application’s main interface can be accessed from the OS menu bar, this interface allows you to open the manage the connection, add/remove trains, and create new throttles.

Want to develop your own application? Hex command documentation can be found here.

Menu Bar Application. Tap image for larger view.
Manage Trains Window. Tap image for larger view.
Single Throttle. Tap image for larger view.
Multiple Throttles. Tap image for larger view.

HO DCS Wiring Guide

A simple approach to some DCS basics.

I started working on a small HO DCS layout about a year ago and found it pretty complicated to find clear answers on wiring best practices. I would ask simple questions in train forums and get back long, complicated answers filled with personal opinion (I also found out that most people are or think they are electrical engineers, which I am certainly not!) and more times than not the answer didn’t address my question completely.

So this site is my attempt to list out anything I’ve learned over the past few months, as simple as I can put it. I will be updating this website as I go along, please feel free to ask me any questions or suggest any additional information, we’re all in this together.

Imprortant Points:

  • • MTH HO PS3 engines require DC voltage.
  • • MTH TIU takes upto 24VDC, 10.0 AMPs. You can find a list of MTH recommened DC transformers here. I find it simpler to use a filtered DC power supply, right now I’m using a spare HP laptop power supply that puts out 19.5VDC 4.62A 90W (watts = volts * amps)
  • • Most Diesel engines take 0-24 VDC ~230 – 650mA, so look for a power supply with higher amperage output to run multiple trains at once.
  • • Only Fixed 1 and Fixed 2 can take DC power, and you must use Fixed 1 to power the TIU if you are not powering the TIU via the Auxiliary port. You can power the Auxiliary port with a power brick like Z-500 or Z-750 e.g. Variable Channels are AC only.
  • • PS3 Engines eliminate the need for a polarity switch on the engine and the engine can receive the command signal from either track (All MTH HO trains are PS3). Although the PS3 engine isn’t polarity sensitive, the TIU is, so make sure you have the right power connections at the TIU.
  • • PS3 engines require your TIU/Remote be upgraded to DCS version 4.20+
  • • You’ll often hear home run or star wiring in the DCS books, see the image below for a simple explanation:

Okay, let’s see some examples.

Simple Loop with Single Feeder

Large Loop with Multiple Feeders

Multiple Loops with 2 TIU Channels

Atlas Turnout with Circuitron Capacitor Discharge Unit

You can also skip the Capacitor Discharge Unit and hook the AC power right into the Snap Switch, however this is highly discouraged as it’s very common for the solenoid in the turnout to burnout if the switch is pressed for too long or gets stuck.

Atlas Turnout with Circuitron Capacitor Discharge Unit and Atlas Snap Relay controlling a NJI Dwarf

Visualizing lipstick virtually with ARKit! Our interns Summer project.

Key Technologies: Swift, ARKit 2, Cinema 4D

I had the distinct pleasure to help with this year’s intern project – a proof of concept app to test out viewing virtual makeup with augmented reality.

We chose to model a popular Nar’s lipstick that was visually interesting, and had some great colors.

  • Created the mesh and animation sequence in Cinema4D / took accurate measurements to endure model closely matched its real-world counterpart
  • Exported as Collada file
  • Imported into Xcode and converted to SceneKit file
  • Textured in SceneKit
  • Changing the mesh material at runtime to show off different lipstick shades
  • Added scene lights for realistic plane shadows