Lucid Weather Clock — part 2: 3D Touch, 12 hour precipitation and shake-to-share

Next steps to improve UX of the Lucid ☀️🕑 are to add possibility to see 60 minutes precipitation as well as 12 hour. Additionally I’ll add shake-to-share functionality.

In the previous part I brought together Forecast.io API libraries, Chart and Clock so you can follow in Lucid Weather Clock — developing open source hyper-local weather app with precipitation clock in Swift.

3D Touch

Introduced in iPhone 6s and iPhone 6s Plus it can provide the force of the user’s touch. It could be a good idea to show more information on hard press for the user. For example 12 hour forecast instead of 60 minutes. I still need to keep in mind users of older devices and let them see the data. I checked few things with UIGestureRecognizer and come up with an idea to use long press with short time for those without 3D Touch compatible devices.

Of course for long press gesture I could use UILongPressGestureRecognizer, but I need to recognise releasing the press to go back to previous state and for 3D Touch I’m using touch functions anyway. By touch functions I mean functions from UIResponder.

In touchesBegan:withEvent I’m checking whether the device is 3D Touch enabled using new in iOS 9 UITraitCollection if not then I’m starting new timer to start long press action:

touchesCancelled and touchesEnded are basically the same and are straightforward: they invalidate the timer (canceling action) and invoke function showForecastBest which I’ll describe in the next section.

And then the most elaborated function touchesMoved. I’m taking the first touch available and I’m making sure that the device is 3D Touch enabled. Then depending on the force of the touch I’m displaying 12 hour or 60 minutes chart touch.maximumPossibleForce / touch.force > 0.5. There is an additional flag for prevent redrawing the chart and the clock every touchesMoved call:

12 hour precipitation

I’ve created three helpers functions: showForecastBest, showForecastHourly and showForecastMinutely. Last one will show 60 minute precipitation, Hourly will show 12 hour precipitation and Best will show the best possible. What does it mean? Forecast.io may respond only with hourly data for some regions and this is a fallback to show the best available precipitation for the user.

I edited showPieData function to accept minutely boolean: showPieData(data: [DataPoint], minutely: Bool = true). It required a couple of other changes:

• checking for 12 vs 60 data entries — #1
• taking appropriate time component — #2
• calculating slices: 360/12° vs 360/60° — #3
• providing proper xVals for Chart library: 1–12 vs 1–59 — #4

And this is how it looks after long press of hard press with 3D Touch enabled device:

Shake-to-share

I’d be nice to share your current weather with others to let them now how are you or remind them that they need to take umbrella for the evening. I’ll prepare almost square image with clock in the centre, temperature on the top, background colour representing the temperature and copyright at the bottom. Very similar to current design, but more compact style.

To intercept shake of the device I need to check whether UIEvent subtype in motionEnded function is of type MotionShake, if so then I’m calling sharePrecipation() function which will take care of preparing the image and sharing the information.

And sharePrecipation:

It’s pretty self-explanatory. I’m capturing the image and then building the message with location if available. To keep user location private I’m using only locality property which is equivalent to the city.

For sharing I’m using build-in UIActivityViewController with activity items: image and text.

Most crucial and robust function is captureClockChart:

Firstly I create canvas that I’ll work on. This canvas is filled with background colour representing temperature. offsetX and offsetY are used while translating current context so that rendering will start in different point than (0,0) to save previous start point.

I’m rendering temperature label, then chart and clock. Last step is to create and render copyright label at the bottom.

Image is retrieved and returned using UIGraphicsGetImageFromCurrentImageContext.

That’s it 🎉 In the next tutorial I’ll add fastlane for automated builds and release process for iTunes Connect.

Project is open sourced and available on GitHub Lucid Weather Clock 👏

You can follow me on Twitter: @WojRutkowski and Medium.