I bought my Apple Watch as a motivation to build my first iOS app. I knew that I didn’t really need one but I figured it was an investment that would push me to learn Swift, Apple’s programming language. I was not specifically looking to build a watch app, but I imagined that the constraints from a small screen would make the interface simple and limit functionality; therefore, making the app simple and easy to code.
I wanted to build something simple that I could build every aspect of it. I didn't want to rely on libraries or frameworks for my first app. I wanted to get my hands dirty and code everything myself. For this reason, I wanted to build an app that was self contained, no network connection or external data source. I thought about building a calculator. I didn’t think twice about it and started doing some research.
In the PCalc application, the operations are not displayed on the screen. They are available via a second page. Multiple ways of input are available. 15 buttons on the main screen.
Calcbot has 12 buttons visible on the main interface. It support four operations (+ âˆ’ âœ• Ã·) and they are available via a force touch menu.
Because of the small screen of the Apple Watch, the app should have as few buttons as possible to make the remaining buttons bigger. The app should also offer a fast way to input the operations.
- Remove operation buttons from main interface
- Main operations are done using swipes
- Least frequently used operations are done using force touch
- Offer a complication for quick access from the watch face
The main part of the watch app was done in 24h. The interface is pretty simple. I made it as simple as possible since I did not know a lot about layouts on the watch. The limitations were actually helpful since they guided me to build the interface. After day 1, the app was functional.
1.111111 â‰ 1.111111111111111
A big aspect of the calculator was precision. I wanted to have the highest precision that would fit in the screen. Float was perfect for the watch as the small number of decimals would fit in the screen. Double was problematic since it is has almost the double of decimal places. I wanted the best precision, so I picked double.
To have the highest precision possible on the watch screen, the precision (number of significant digits) varies based on the sign, number of actual digits, exponent sign and size. Basically, the number precision is reformatted to fit the screen. Although the precision change on the display, the actual double value is always used for calculations. Michel Chatmajian helped me implement this feature.
I found a gradient on webgradients.com and sent it to Michel. He proceeded to place an equal sign in the middle. This was the resulting icon:
Since the app calculator was only for the watch, I didn't bother making a phone calculator. The phone app would be used to explain how to use the watch app. This made my life much easier as I did not have to build a complex layout. It had two view: main view and instruction view. I also cheated by using a webview for the instruction view. I coded the whole thing in HTML/CSS #win.
MiniCalc was approved on the App Store March 23, 2017
If you want to try MiniCalc, you can download it on the App Store
For more information about my other projects, you can check my personal website justinleger.ca