Categories
Programming Side Projects

Dashboard

A while ago, I wanted to build a data aggregation service that’d allow its users to fetch data from a set of data sources defined by them. I wanted to allow the users to configure the data fetch interval for each source. This led to the birth of the Dashboard project.

Dashboard is a data aggregating web application that provides a way to customize and display the aggregated data. It’s an open source project. The code is hosted on GitHub.

Dashboard UI

Features

  • Webhook support to receive data
  • Fetch data from various sources at different intervals
  • Plugin support to enable extensibility

Use Cases

Dashboard can be used to display any arbitrary updates from various sources. Some specific use cases of Dashboard can be –

  • Keeping track of health of endpoints
  • Display data received from Git hooks
  • Monitor blogs for updates

The possibilities are endless.

Stack

The application backend is written in Go. For this use case, Go fits perfectly well and I really like Go. The current implementation of frontend is in vanilla JS (I feel primitive just saying that 😜). However, I do plan on using Vue or Preact.

For details regarding the future of the project and more, please check out the README file of the project.

Focus

Before I started working on this project, I made sure I focused on 3 things:

  1. Simplicity
  2. Extensibility
  3. Data parsing/display

Every time I took a decision around a particular feature implementation, I went through this list to ensure none of these aspects were sacrificed.

Simplicity: I wanted to make the app very simple to setup, configure, and use. I put in a lot of emphasis on the simplicity of the application. There is no database. The installation is pretty straight forward. Just download the binary file and run it. Thank you, Go!

Extensibility: I made sure to allow users to write their own plugins. These plugins are shareable. Users can display data from whichever source they want to via these plugins.

Data parsing/display: Once we fetch the data from a source, we need to have control over which parts of it we want to display in the UI. The user should be able to display only the data that matters. Right now, this is static. But, I’m working on a solution to allow users to map data.

Development

The project is under development and is still in Alpha stage. I plan on working on it in my free time. Any contribution to the project is welcome.

License

As always, I’ve open sourced the project under the standard MIT license. GitHub: https://github.com/mohnish/dashboard.

Hope you like my project. Feel free to contribute to the project. Cheers! 🍺

Categories
IoT Side Projects

Building a Coffee Pot Monitor using Raspberry Pi

I love coffee and side projects. I wanted to solve a coffee related annoyance that I faced on a regular basis. This post is about how I built a Coffee Pot Monitor, to track the coffee level in a coffee pot, remotely, using a Load Cell, HX711 amplifier, and a Raspberry Pi.

The Annoyance

Imagine yourself being busy with something important. You take a quick break to grab some coffee and walk over to the break room only to find an empty coffee pot.

Oh, the horror

There’s no way for me to know the amount of coffee left in the pot, without walking over to the break room and checking it out. The coffee pots we have at work are opaque. So, it’s not possible to know the amount of coffee left in the pot by looking at it.

Initial Solution

I came up with a solution to my problem. A camera mounted near the coffee pot would stream the video data to a Raspberry Pi. Using Computer Vision on this stream, I can identify when someone uses the coffee pot. When someone pumps the coffee from the pot, my algorithm decreases the coffee level in the coffee pot by a static value (one cup). A dashboard, which can be accessed via a URL, displays this data in realtime.

There’re several drawbacks to this approach. For starters, my algorithm assumes that every person pumps exactly one cup of coffee. Now, consider the case of an empty, opaque coffee pot. A person tries to pump coffee and realizes there’s no coffee left. In this case, my algorithm still decreases the coffee level by a cup even though no coffee is pumped.

To say the least, it is a convoluted approach.

I knew it was a convoluted idea. I wanted to build it anyway.

One fine day, I shared the idea with a friend from work, Rajesh. He liked the thought behind the project and suggested an improvement.

Improved Solution

Rajesh suggested using the coffee pot’s weight to calculate the coffee level. That was it. Suddenly, it became obvious. It’s a great way to track the volume of the coffee in a coffee pot.

The potential of the project got us both excited. We submitted the idea to the quarterly Hackathon at work. Long story short, we won the first prize for our implementation of this idea.

Tools

After some research, it became clear that we needed a Load Cell along with a Hx711 load cell amplifier. I immediately ordered it from Amazon along with the Raspberry Pi 3 B+.

Setup

First, hook up the Load Cell to the HX711 as shown in the image below:

Connecting a Load Cell to a HX711 amplifier

Next, connect the HX711 amplifier to Raspberry Pi as follows:

  • VCC to Raspberry Pi Pin 2 (5V)
  • GND to Raspberry Pi Pin 6 (GND)
  • DT to Raspberry Pi Pin 29 (GPIO 5)
  • SCK to Raspberry Pi Pin 31 (GPIO 6)
Connecting a HX711 to a Raspberry Pi

That finishes our hardware setup. Let’s move on to the software side.

We use the HX711 python library in Raspberry Pi to read the Load Cell data from the Hx711 amplifier. Every three seconds, the Raspberry Pi posts the data to Firebase. A simple static HTML page serves as the dashboard by displaying the realtime data from Firebase.

The build

We need two pieces of wood. One of the pieces, acts as a base to place the coffee pot. The other acts as a stand for the Load Cell. These are placed on either sides of the Load Cell. In my case, a colleague of mine, Vijay, helped with cutting out these two pieces of wood.

  • Top view of the equipment
  • Side view from an angle
  • Load Cell positioned between two wooden planks
  • Load Cell zoomed in
  • Load Cell connected to the HX711 amplifier and Raspberry Pi
  • Another view of the Load Cell

Architecture

Data flow from Load Cell to the user’s browser
  1. The Load Cell reads the weight of the coffee pot
  2. HX711 module amplifies the Load Cell data and sends it to Raspberry Pi
  3. Raspberry Pi posts the data to Firebase
  4. Firebase publishes this data to all the clients
  5. The browser displays the updates

How it works

There is a one time setup process. First, weigh the empty pot on the Load Cell. Let this weight be w1 (min). Next, weigh the coffee filled pot on the Load Cell. Let this weight be w2 (max). At any given point of time, the weight of the coffee pot ranges from w1 to w2.

Every time someone pumps (or pours) coffee from the pot, the weight of the coffee pot decreases. This data is published to all the clients using Firebase. It’s as simple as that.

Here’s the final product:

Coffee Pot placed on the wooden platform
Coffee Pot placed on the wooden platform

Here’s an animation of the dashboard getting updated in realtime:

Conclusion

The entire cost of setting this up is approx. $45. It’d be great if we could build this at a much lower price. That way, it can be more affordable and practical. I’ll soon open source the code behind the project and provide the GitHub link to the repository.

Featured image courtesy: https://unsplash.com/photos/KixfBEdyp64

Categories
Programming Side Projects

Hack

I love building things for fun and lately I’ve been thinking about building a text editor. I’ve used a lot of text editors and IDEs in the past. Here’s the list in a chronological order:

  • vi/vim: my very first code editor. Used it back in my earlier C/C++/Java days
  • Dreamweaver: started using it once I moved to web development for HTML, CSS & JS
  • Eclipse: IDE of choice for Java development later
  • Netbeans: switched to it when Eclipse started becoming a memory hog
  • Visual Studio: used it whenever I wrote C# code
  • Emacs: php/javascript development back in school
  • TextMate: started using it after moving to Ruby
  • Sublime Text: absolutely loved the perf, extensibility (plugins) and liked it better than TextMate. I even bought a license 🙂
  • Atom: liked the idea of an open source text editor built in JS/CS

Atom

Currently, I use Atom on a daily basis. I’ve been using it since the day GitHub started distributing it in invite-only private beta (before open souring it) mode. After 3+ years, I think I am done with Atom. I am tired of using an editor that feels slow even when typing. Since, Atom is an open source project, I can’t really complain. It’s a wonderful initiative and I really appreciate the idea and motivation behind the project. For now, I will switch to Sublime Text. If my text editor proves to be better than Sublime Text, I will switch to using my text editor full time.

Hacking on Hack

I am going to start working on a text editor and I’m calling it Hack 🎉.

It aims to be:

  • Fast
  • Light Weight
  • Easy to use

I’m going to start working on the project and my goal is to have fun and learn a lot while I hack on Hack 😜. As I progress with the project, I’ll try to talk about interesting aspects/problems that I come across, architectural decisions, design and implementation details.

This will be a very highly experimental project and chances are that Hack is not something for you. If you’re interested in tracking the progress of the project, you can follow along on GitHub at https://github.com/mohnish/hack.

Categories
Side Projects

Two Years on Chrome Webstore

Exactly 2 years ago (Mar 22nd, 2015), on a Sunday afternoon, I wrote and open sourced Rearrange Tabs. I use it every single day. I find it pretty useful.

The extension got featured on LifeHacker & Changelog 🎉

Here are a few interesting stats about the project:

  • Active Users: 1000+
  • No. of Reviews on Chrome Webstore: 28
  • Rating on Chrome Wesbtore: 5 stars
  • Stars on GitHub: 39
  • Forks on GitHub: 10

Clearly, these are not mind blowing. But they’re not bad either. Also, this is my first project where the code written by my contributors is more than the code I’d initially written. I hope more people use it and find it useful. :cheers:

Categories
Programming Side Projects

Rearrange Tabs

OCD is weird. It makes a person do weird things. For instance, I find it annoying to have tabs not grouped by their purpose. When I’m working, I usually have the documentation opened in one tab (which usually is the left tab) and the tab to its right, absolutely, has to be the tab that’s running my local copy of the app that I’m currently working on.

I’m used to using the mouse to rearrange my tabs all the time. Sometimes, I have multiple windows open (if I’m at work, since I have a dual-monitor setup) at the same time. I’ve always wanted to have keyboard shortcuts that did all this. That’s the reason I wrote a new Google Chrome Extension called Rearrange Tabs.

Rearrange Tabs

Rearrange Tabs is a tiny Google Chrome Extension that you can install right now to use keyboard shortcuts to move your tabs around in your Google Chrome browser.

  • To move a tab to its left
    Windows: Shift+Alt+Left
    Mac: Ctrl+Shift+Left
    
  • To move a tab to its right
    Windows: Shift+Alt+Right
    Mac: Ctrl+Shift+Right
    

Edit: Previously the shortcut to move the tab on Mac was Alt+Shift+<Arrow>. I had to update this since it was overriding the word highlight shortcut and made it hard to edit text inside the browser. That is fixed now.

Edit 2: You can now customize your keyboard shortcuts to move the tabs.

To customize your keyboard shortcut by following these steps:

  1. Open your extensions page (or visit chrome://extensions from your URL bar)
  2. Scroll to the bottom
  3. Click on Keyboard Shortcuts
  4. Under the “Rearrange Tabs” section, you can configure whichever shortcut you want

Update: The extension got featured on Lifehacker & Changelog 🎉

Here’s how it looks like:

You can find it here.

Rearrange Tabs can

  • Move tabs around in a window using keyboard shortcuts
  • Duplicate current tab to a new window [this is WIP]
  • Separate active tab out from the current window into a new window using keyboard shortcuts [this is also WIP]

As always, I’ve open sourced Rearrange Tabs. ❤️

You can find it here https://github.com/mohnish/rearrange-tabs

Feel free to open an issue or a pull request 🙂

Categories
Programming Side Projects

Money

A year ago, I was trying to organize my bank accounts and found that it was really hard for me to understand where I was spending most of my money. So I started doing some research in order to find a good tool/application which would do this for me.

Mint, of course, was my first tool of choice. Mint is a pretty good application, but not the right one for me. I’ve been a Mint user since a long time and never found it to be really helpful for me in organizing and understanding my expenditures. Every single time I logged in to Mint, it complained about Bank Account Authentication Failures™. I’ve tried re-connecting my bank accounts over a 100 times and it still never works. Moreover, I’m not really comfortable letting a 3rd party access my bank details anymore. Also, it’s not that great at auto-categorizing my bills/expenses anyway and it still lacks some of the features that I thought would be cool and helpful for me.

So I moved on to a few other solutions and tried them. Some needed me to sell one of my kidneys to buy the app, while others just lacked features. Almost every single time, I ended up having a 50% positive impression of the apps. None of them were feature rich or flexible enough for me to find them actually useful.

I was frustrated and gave up on the search. The only thing that was left for me to do was to write an app that would basically have all the features I wished to have.

Introducing Money

🎉 💵 Money is a simple web application that helps you keep track of your expenses/bills and gives you insights on where your money went. Currently, the app is under active development and lacks features. But the idea is to eventually have all the awesome features I’ve dreamt of, implemented in the application.

Stack

Money is built using Ruby on Rails and BackboneJS. It uses Bootstrap for the UI.

Implementation details

My initial goal was to have a native mobile app (and eventually that’s what I want to do). Since I don’t have the time to do that, I chose to go ahead and implement a web app with mobile-first approach. The current app itself is a JSON API, which is consumed by the Backbone frontend (that ships with the app) client using the OAuth2 client credentials flow. The API can be used to build native clients on various platforms.

The best part about Money app is that it’s open source ❤️ and licensed under the awesome MIT License. It is available at https://github.com/mohnish/money. Feel free to fork it or deploy your own instance or build your own features or extend it to whatever the way you want it to be or build your own client or file issues. I already have an instance deployed and running.

I will keep you guys posted about the updates. Current version of Money app is 1.7.1.

Thank you

Shoutout 🎉 to Sindhu Monica and Sandeep Appikonda for helping me test the app and improving the UX of the app.

Categories
Programming Side Projects

Open Source

Up until a few years ago, I never really understood the value of Open Source Software (OSS). I used to think of it as something really lame because the quality that comes out of such software is usually “low”. Now why was I under such an impression? Linux. As a Windows user, I’ve always loved the OS for its ease of use and support for games. I found Linux to be a half-assed OS just because it didn’t support the games I played and it was relatively “difficult” to use. I couldn’t wrap my head around why Linux was such a big deal.

Web development

I started web development using WYSIWYG tools like Adobe Dreamweaver. I loved Dreamweaver. It was fantastic. It had every single feature that I wanted and more. I was happy.

Soon, I had to move from static HTML web sites to dynamic content serving websites using PHP. I thought PHP was awesome and powerful. I got serious with PHP development and started using software like Apache, MySQL etc. WAMP was pretty much my setup to start working on any new web app. I slowly switched to Eclipse for PHP (I was already an Eclipse for Java user). There were many tools that I needed which worked only on Linux. As a result, I had to “compromise” and switch to LAMP as my default development stack. At this point, everything I was using was OSS.

After a while, I moved on to Ruby. Moving to Ruby from Java/PHP was delightful. Ruby makes programming fun. My love for ruby got me thinking about how awesome open source is. The very concept of someone writing a beautiful programming language and giving it away for free was something that I couldn’t comprehend. Also, by this point of time, I started liking Linux. Linux felt powerful and easy to use especially for development.
It felt really good using Linux. If you’re a ruby developer and you’re into web development, you’re bound to use Sinatra or Rails at some point. It was when I started using Rails I understood the true value of OSS. I was making money by using tools that were written by others and given away for free.

<3 Open Source

Linux, Ruby and Rails convinced me as a developer that open source is really cool. There are many other pieces of OSS such as jQuery, NodeJS etc that contributed to it.

Licensing

The most important aspect of an open source project is the license under which it’s being distributed. A license grants/restricts usage rights to an open source project. A good open source license gives its users the flexibility to use/modify/distribute it. Hence, having a license in an open source project is very important.

For this very purpose I’ve created a ruby gem called “opensource”.

Opensource

opensource is a ruby gem that you can install and use to add a license to your open source project. You can install it by running the following command (assuming you have ruby 2.0+ installed)

gem install opensource

Once you have it installed, you can setup your credentials and start using the gem to create licenses.

The gem is open sourced under MIT license and you can find the source code at https://github.com/mohnish/opensource. You can find more information about the usage of the gem there. Please feel free to contribute back to the project. Contributions are always welcome <3.

I encourage each and everyone of you to contribute to open source software. It’s wonderful and satisfying.

Categories
Programming Side Projects

Hi5

The first thing I do every morning immediately after I wake up is, check my mobile for any emails/messages/updates etc. Today was no different. I was skimming through the updates and found an interesting blog post. I was impressed by the post and started scrolling the page to find the usual Like/G+/Save-to-my-swiss-bank-account buttons. That’s when I realized that there was no existing solution that was efficient and needed no authentication.

Dustin Curtis solved this problem by implementing the “kudos” feature in Svbtle. Unfortunately, Svbtle is not Open Source. So I decided to implement the feature myself and make it available as a reusable component that anybody could use by including the corresponding code. As a result, I created hi5!

hi5

hi5” is a component that adds a hi5 button to your web page/blog. You should be able to see the circular button floating on the right side of this page. Yeah, that’s the hi5 button.

Note: The hi5 button is not mobile compatible yet. So I had to disable it on mobile till I fix it. I’ve opened an issue on GitHub about this specific requirement. Also, it’s not exactly a button. It’s a div element faked to appear like a button by means of CSS.

How it works

When the user hovers over the hi5 button and holds the mouse on the hi5 button for one full second, a callback is fired which increments the hi5 count exactly by 1 on the persistence layer. This update is now “pushed” to all the other open instances of the page. The count is updated on all the open instances in realtime.

Video showing the updates

In the above video, I have Chrome and Firefox browsers open and you can see how the count is incremented in realtime.

What was hi5 built with?

The hi5 component uses Firebase for persisting the hi5 counts and is built totally on client side JavaScript. It uses MD5.js and Cookie.js internally.

hi5 is available on GitHub at https://github.com/mohnish/hi5/. hi5 is licensed under MIT. Please feel free to use/contribute/report issues.

PS: The setup instructions in the README file need to be updated. Will do it as soon as I find time.

Categories
Programming Side Projects

CareerTrackr v0.4

I have been actively looking for jobs since the past few days and I couldn’t find an efficient way to properly keep track of all the jobs I’ve applied and the resumes I’ve used for each of the jobs. I tried using some applications but in vain. None of them suited my needs. I even tried using Dropbox to keep track of all the resumes and the job applications. Even that didn’t go well. All of these had their own problems. I needed a powerful and robust solution.

As a result, I developed a new Web Application as a weekend hack, which does exactly what I need, keeps track of all the jobs that I’ve applied to along with the respective resumes. It’s called “CareerTrackr”. I don’t even know if the name is apt to the product that I’ve developed. The only thing that matters to me at the moment is its functionality. A lot of my effort went into designing the interface for the application. As always, I believe in a good UI/UX.

Currently the project is not open to the public. I am testing the project on my own. If I find any bugs (which I am eventually bound to), I’ll fix them and then open it up to the public. Also, I will Open Source the code once I am done with the testing. Once the project is full-fledged, I will post the link and the screenshots. If that sounds interesting to you, wait for my next post on CareerTrackr.