April 2015

You know how they say it’s good to keep a journal of things you do to see how far you’ve come, what you’ve achieved, where you’ve been, etc (the raison d’être for DayOne).

I’d like to try something new and decided to do just that here on my blog to keep a reference for my future self and for everyone else who’s interested.

What I…

… Did

Briefly 1.6 (or 2.0, haven’t decided yet; work in progress) (click)
I got a lot of work done on the next update for Briefly. Especially the new soundtrack option trimming (with a neat audio wave form) took a lot of time and only now is done. But I’m pretty proud of how it turned out and it was well worth the time investment.

Briefly's New Audio Wave Form

The Audio Wave Form View (aka ESSAudioWaveView, a separate blog post will follow) makes heave use of the AVFoundation framework for creating the audio wave form (AVAssetReader), playback (AVPlayer) and actual trimming of the audio asset (AVAssetExportSession) (which will not be used in Briefly, as the app already has a system in place for trimming and fading out the audio for the still motion video. Why implement it then? For completeness. I might use it in a different project and it might come in handy there. Plus, trimming is kind of the point of this view. In Briefly, however, I only use the range the user selected in ESSAudioWaveView and pass it into the system already in place).

Quartz 2D / Core Graphics (mostly NSBezierPath) is used to do its drawing, NSAnimation for the couple of subtle animations (fading in/out the timing information, moving the selection markers).

I also implemented Undo support, using NSUndoManager (a separate blog post will follow). It was far easier than I had anticipated – I only ever used it once in a private test project and it was a complete mess. But I was so much older then, I’m younger than that now. I’m sure there’s more complex scenarios, though. In ESSAudioWaveView, undo is supported for selections and zooming into them enabling more fine-grained selections. Undo comes in very handy when trying to find the right selection for later trimming. And because I had an animation system in place, all undos (except for zooming into/out of a selection) are animated, which makes it look more polished.

This upcoming new version is a major overhaul of the app, as it will also allow users to save their projects, opposed to the “one-shot” approach the app had until now.

Transloader 2.2 (Waiting for Developer Release) (click)
The next update for Transloader will bring a fix for iPhone 6 Plus and add a “Add to Transloader” button to Transloader’s Today Widget if a link is on the clipboard.

Transloader

This will make the app even more useful (in addition to the Action Extension accessible from the browser, which was part of the 2.1 update).

Website Branding, Corporate Identity (blog post)
I redesigned my website, this blog and plan to update my apps so they have a great new About – window (see the blog post linked above). The first to have it will be the next update of Briefly, but it will roll out to all my other apps as well.

SPRITEplayer (private project for my brother)
My brother is dead-set on developing a 2D adventure game. He needed an app to test his sprites and backdrops together, so I whipped up this app for him. He can add backdrops and sprites, scale them, change the speed of the character animation and make it move around by dragging the mouse. Bare-bones, but it gets the job done.

SPRITEplayer playing a sprite

I wish I had had the time to do it in SpriteKit. It would have been a perfect fit. But as I didn’t have the time to dive into a whole new framework I am not familiar with, I simply used two CALayers (one for the backdrop, one for the character/sprite) that draw an NSImage into their bounds rectangle and NSTimer for the character animation (which basically only increases the index of the character image to be drawn). Not much to it.

Open Source Code: ESSProgressIndicator (blog post; github)
ESSSquareProgressIndicator animating
I already blogged about this, so I’ll be quick – I open sourced an indeterminate, square progress indicator, developed for the iOS game Reach ZEN.

Open Source Code: Zoom-Transition between NSViews (blog post; github)

zoomtransition.gif

Another Open Source Project I already blogged about – this lets you easily transition between two NSViews with a nice zoom-animation as seen in OS X 10.10.3’s Photos.app.

… Downloaded

Torchlight 2Torchlight II (Mac)
I finally purchased Torchlight 2. I missed the release-sale when it was released for Mac so I waited for another sale, and sure enough, last week, it was on sale for $4.99 on the Mac Game Store. I loved the first game (although once you were done with the campaign, it got stale pretty rapidly), so to get the second game was a no-brainer for me. I don’t have a lot of time to play, but what I’ve seen so far, I like.

Review Times IconReview Times (Mac)
My fellow Austrian Frank Gregor (@thecocoanaut on twitter) recently released his app Review Times that puts a display of how long it’s currently taking Apple on average to review apps on the Mac- and iOS App Store (based on data from appreviewtimes.com) in the menu bar and Notification Center (which I prefer, as my menu status bar is terribly crowded).

OS X 10.10.3 with Photos.app (Mac, duh)
I know, everybody downloads that one. But I thought I’d take the opportunity to quickly jolt down some notes on Photos.app. It’s especially interesting to me as I work on two photo-apps, flickery and Briefly. It’s very responsive, compared to iPhoto (I never used Aperture, aside from quickly testing flickery’s plugin for it from time to time). The interface is very clean with a clear, uncompromising focus on the content. I’ll be taking some clues from it for flickery 2.0 for sure.

What I didn’t like was the import process from iPhoto. I started off with a clean slate first for Photos.app (it started downloading photos from the iCloud Photo Stream immediately – plus points). But for an app that’s supposed to replace iPhoto (and Aperture), it’s surprisingly obscure to import the iPhoto library. The Import… menu item doesn’t help, it’ll only import photo and video files as far as I could tell, I couldn’t select the iPhoto Library, which was very odd to me.

What you have to do is press the option-key on your keyboard during launch. Yes, that’s very user-friendly (not). Then it takes the iPhoto library and turns it into a Photos.app library. And after that, you’re not done. Because for some reason, iCloud Photo Stream and iCloud features in general are disabled by default. You have to dig into Photo.app’s preferences to finally see that you have to make your newly created Photos.app library the default library for iCloud to work (why wouldn’t it be when I import all my iPhoto photos. And if it isn’t, why not ask me right away after the import?)

Borders around Buttons in Photos.appAlso, I find the borders around these buttons kind of weird. And they are only visible if there’s something blurred in the background.

Apart from that, I think the app is very well done and I haven’t had any trouble since. I like the icon, too. Would be nice if it imported Photo Booth’s photos, too.

… Read

The Gemini Program Book CoverBook “Das Gemini Programm”
In a fit of “I have to learn something about the Space Program”, I ordered a couple of books about Gemini and Apollo. The book is very interesting, albeit extremely technical, which I hadn’t anticipated.

Link: Writing a Great App Store Description (click)
App Store Descriptions are extremely important, without a doubt. I’m always trying new things to improve mine and this article has some interesting pointers of places of improvement.

Link: Create Space Invaders with Swift and SpriteKit (click)
Before I started work on SPRITEplayer for my brother (see above), I thought of implementing it on top of SpriteKit, as it definitely would be a perfect fit. However, for a side project that had to be done very quick (as I kept postponing for quite some time before actually doing any work) I didn’t have the time to learn a new framework. But if his game does make some progress and I do the programming, that link will come in very handy.

Link: Is Deus Ex Still the Best Game Ever (click)
I am a huge fan of (the first) Deus Ex and indeed think it’s the best game ever. I only played the first and the newest part (Human Revolution as of this writing).

… Listened To

Inquisitive Podcast #35 – Behind the App: Working with the Press (click)
I usually don’t listen to podcasts much, but this one interested me and is well worth 45 minutes of your time if you need to work with the press ;), featuring Federico Viticci (@viticci on twitter) of MacStories.

… Watched

PK Movie PosterPK (India 2014; Aamir Khan, Anushka Sharma) (click)
My girlfriend turned me on to Bollywood and I must say, I enjoy it quite a lot. It’s something different for a change. PK is about an alien (Aamir Khan) coming to Earth. A stranger robs his space ship remote control without which he can not get back to his home planet. So he has to adjust to life on Earth to retrieve it. People tell him he just has to turn to God and pray and he will receive what he is looking for. Not having a notion of what God is, thinking God is a person, he goes around and starts handing out Wanted-signs. A movie that has a nice message to make you think, and funny songs with dance numbers.

Rosemarys baby posterRosemary’s Baby (USA 1968; Mia Farrow, John Cassavetes) (click)
I’m probably late to the party, but I finally watched it. I found it entertaining, but it’s not a horror movie by today’s standards. It’s very creepy, though. The neighbors, the house, the husband… The scene I cringed the most was where Rosemary eats raw chicken liver. Eew. I rented it on AppleTV (the first time I did that) and it works very well. No hassle what-so-ever. Very enjoyable experience.

… Ate

Chicken Curry with Rice, NaanChicken Curry with Rice, Naan. Not as spicy/hot as I had feared.

… Went to See

Kurpark Oberlaa FlowersKurpark Oberlaa, a nice park at the edge of Vienna

Simmering Water ReservoirWater Reservoir Simmering, a new project to combat floods

Read more

For Briefly, I needed a nice, subtle animation for switching between the detail soundtrack view and the reorderable list view. In OS X Yosemite 10.10.3’s Photos.app, I noticed something I liked very much.
When going into an album, for example, the current view is zoomed out of focus and the new view is zoomed in.

Zoomtransition Animation Gif

NSView+ESSViewCategory

I wrote a little category on NSView to do just that, it’s a one liner (ironically, in this pic, it’s more than one line) :

Line of code

It’s pretty self-explanatory. You pass in the view you want to transition from and the one you want to transition to, the type of transition (zooming in or out), the duration and an optional completionHandler that’s called when the animation ends.

Alternatively, it’s also available as an instance method where the view you call this on will be passed into the class method as fromView:

Instancemethod

The Views

For the transition to work, fromView has to be in a view hierarchy, toView shouldn’t. They should be the same size, otherwise more work on your part is necessary (which I had to do in Briefly because the NSPopover the views reside in resizes before / after the transition), but either way the code provided should give you a nice head start.

fromView’s superview is temporarily set to have a CALayer to make use of Core Animation during the transition. After the animation ends, the superview’s wantsLayer – state is reset to what it was before the animation. If we didn’t do this, the animation would appear sluggish.

ESSViewZoomTransition

As you can see in the gif above, there are two types of the transition:

– ESSViewZoomTransitionZoomOut – the transition from the textView to the view with the checkboxes.
– ESSViewZoomTransitionZoomIn – the transition from the checkbox-view to the textView

How To Use NSView+ESSViewCategory

You’ll have to first add the NSView+ESSViewCategory.h and *.m files to your project.
Please note that the category imports <Quartz/Quartz.h> for Core Animation’s CAMediaTiming class, so you might have to add that framework to your project, too.

fromView
It has to be inside of a view hierarchy. Fades out during the transition.

toView
Can be in a different xib file (for example, a NSViewController) or in the same as fromView. It’s important that it is not already on screen somewhere. Fades in during the transition.

Once you have set up your views, either call the class method and pass fromView and toView as well as the other parameters or call the instance method on fromView.

How It Works

The method creates an NSImage of both toView and fromView, puts them into two NSImageViews that have the same frame as the views and animates those two NSImageViews accordingly (calling imageView.animator.frame = …; and imageView.animator.alphaValue = …; )
Because fromView’s superview temporarily gets a CALayer, .animator is powered by Core Animation, which makes for a much smoother animation than doing the same without a layer-backed view.

ImagecreationCreating an NSImage of toView.

So the views themselves aren’t actually resized, they’re just screenshotted, removed from view as we place the NSImageView on top of it, creating the illusion that nothing happened. Then we animate the NSImageViews and insert toView after the animation is done, removing both NSImageViews.

The Source Code

The repository (a sample OS X app) is available on Github.

It was developed (and tested) on OS X Yosemite 10.10.3 using Xcode 6.3.1, but should work on earlier versions of the operating system.

I have some more source code available here (or directly on my github profile page) if you’re interested. If you have any questions or feedback regarding my open source projects, please be sure to mail or tweet me – I’m looking forward to your feedback!

Enjoy!

Read more

In an effort to bring some personality to my apps, website and blog and make them easily recognizable by “connecting” them visually I rolled out a minor re-”design” of my website and blog yesterday.

The Color Scheme

The entire color scheme is based off the Eternal Storms Software logo.
Up until now, neither the website nor this blog reflected those colors. As a matter of fact, the only place that had some of this personality was the iOS part of Transloader. In its “About” screen, you’d see this:

IMG 9025Screenshot of Transloader on iOS

It’s immediately recognizable – and not only by the logo.

The Website and Blog

It was about time I brought that over to the website, because it looked like this (please excuse the missing text and bezels, I took this from the Wayback Machine as I stupidly don’t keep old websites around):

Old eternalstorms.at websiteeternalstorms.at before the re-“design”

At the time, I had a good reason for it. I wanted the user to be able to see all my apps at once, without any distraction. But it lacks a certain “je-ne-sais-quoi”. It has no identity. You don’t know who it’s from. Heck, there’s not even a logo anywhere to be seen.

Lo and behold, the new website looks like this:

Untitledeternalstorms.at after the re-“design”

It’s probably not the best website you’ve ever seen, but it’s certainly an improvement over the old one.

The Apps

Now I can’t go in and make all my apps purple. That would look ludicrous (or would it?). But I still want to carry over some of this into my apps, and I believe the best place to do this is in the apps’ About windows. Currently, they look like this:

Briefly's old About WindowBriefly’s About window before the re-design

It has all the necessary information in there, but it could be more personal, more fun, if you will. Here’s what the new one will look like:

Briefly's new about windowBriefly’s About window after the re-design

It will roll out in all apps with future updates. The nice thing is that it’s very much a drop-in replacement for the standard about panel Apple’s providing in Cocoa. It takes all its information from the app’s Info.plist file and additional information (like twitter, Facebook, Acknowledgements, Credits) can be provided in a strings file which will then be used in the about panel. So I just drop it in, change some strings in the strings file and I’m done, I don’t need to touch the xib in Interface Builder. Perhaps I’ll do a blog post about it some other time.

App Store Screenshots

All this kind of raises the question – should I brand my App Store screenshots as well? I’m leaning toward “no”. Definitely no logo or slogan, though. That would just distract from the product. Perhaps I could color explanation text accordingly, or put them in colored overlays. Or create an Eternal Storms Software Desktop Background Image that will be present in all App Store screenshots, that would definitely be a more subtle way of doing it. I might try it out on an app and see how it does.

But in general, I am against branding of App Store Screenshots. They should present the app. A description of the company could always be put into the last paragraph of the App Store App description. That’s a nice place for it.

Read more

ESSSquareProgressIndicator animating

What Is ESSSquareProgressIndicator?

It’s an indeterminate progress indicator originally developed for the iOS game ZEN.

It uses Core Animation (specifically, CAShapeLayers) to do its job and it’s pretty straight forward.

CGPathRefs, CAShapeLayer

CAShapeLayer has two animatable properties – -strokeStart and -strokeEnd (with a minimum value of 0.0 – start of path – and 1.0 – end of path). Going beyond 1.0 or below 0.0 doesn’t work.

So when trying to animate those values along a rectangular path – which was the first thing I tried when creating this – you do get a nice animation, but it ends at the 0.0/1.0 (which is, basically, the same) mark. So you end up with something like this:

glitchy progress indicator animation

The goal, then, was to animate beyond 1.0. The solution I came to – I’m sure there are other ways – was to use a second CAShapeLayer that animated alongside the first for the last/first part of the animation.

For a square, the values of the CAShapeLayer’s -strokeStart and -strokeEnd are as follows (starting at the top left corner):

CAShapeLayer strokeStart strokeEnd values

The CGPath begins and ends in the top left corner because I drew the path that way (you could make it start in the lower left corner or in the middle of a side, it all depends on where you start the CGPath with CGPathMoveToPoint).

The progress indicator starts at the middle of the left line and reaches to the middle of the top line. These are the two CAShapeLayers at work. The left part is one shape layer, the top line is another. I’ll do this in pictures I drew in code so it’s simpler to understand (the lines represent where the layer animated to, the dots are the invisible rest of the square).

Animating

Animation Part 1We start at this position. The line to the left is layer2(strokeStart:0.875, strokeEnd:1.0), the line at the top is layer1(strokeStart:0.0, strokeEnd:0.125).

Animation Part 2The transition to this is the reason we need two layers as we can not animate one layer beyond the 1.0 value.
So we animate layer2 to (1.0, 1.0) and at the same time animate layer1 to (0.0, 0.25) which makes it look like one line moving.

Animation Part 3This next part is easy. We animate layer1 to (0.75, 1.0).

Animation Part 4Lastly, we animate with two layers again to get to the initial position so we can repeat the whole thing from there on.
We animate layer2 from (0.75, 1.0) to (0.875, 1.0) and layer1 from (0.0, 0.0) to (0.0, 0.125) at the same time, again making it look like one line moving.

The Source Code

The repository (a sample iOS app, but the class works the same on OS X) is available on Github.

It was developed for iOS 7.1 but should work on earlier systems, and has been tested on OS X Yosemite, but should work on earlier systems as well.

You just drop in an ordinary UIView or NSView and set its class to ESSSquareProgressIndicator. Done. You can then set the color and stroke width right within Interface Builder thanks to the fairly new Xcode macros IB_Designable and IBInspectable.

Open Source

I have some more source code available here (or directly on my github profile page) if you’re interested. If you have any questions or feedback regarding this progress indicator, please be sure to mail or tweet me 😉

Enjoy!

—-
My name is Matt, I’m the developer of Eternal Storms Software. If you’d like to comment, you can catch me on twitter here: [twitter-follow screen_name=’eternalstorms’ show_count=’yes’] or by eMail.

Read more