My Home Screen Setup, May 2018 Edition

I thought perhaps I would make sharing my home screen setup a regular thing. Back in January, I posted my then-current setup. Four months later, my home screen is a bit different, so here’s an update.

My current home screen (select to view a larger version):

home screen

These are the apps I use the most or I want easy access to. As for my wallpaper, this is a wallpaper I’ve been using for years (I have no idea where I originally found it) (and actually it’s too small for iPhone X, but I’m using it anyway). The subtle grays and textures are pleasing and allow the icons to pop. Below are a few notes on some of the apps I have on my home screen.

tweetbot

Tweetbot
For me, this is the gold standard of what a Twitter app should be. With thoughtful design and interactions, timeline sync, and more, Tweetbot is an all-around terrific Twitter app. I hope Twitter’s recent API news doesn’t make Tweetbot—and all third-party Twitter clients—unusable.

timr

Timr
I use Toggl to track my time on various tasks and projects. I wrote previously how I used Workflow to start and stop time entries because the official Toggl app isn’t for me. Wanting more functionality like editing or deleting time entries, I decided to make my own Toggl app since their API is rather robust. I don’t know ultimately what the roadmap for Timr is, but for now it offers me a better way to interface with Toggl—and, unlike the official app, works natively on iPad and with iPad multitasking too!

partly sunny

Partly Sunny
I’m the developer and designer behind this app that shows your weather in quick glances and detailed looks. If you just want a quick glance at what’s happening, Partly Sunny can show that. If you want a more detailed look at what’s happening in the next hour, day, or week, Partly Sunny can show that too. Whichever you prefer, everything is meant to feel at home on iOS. Some of the key features include: customizable hourly graphs; customizable conditions in current, hourly, and daily forecasts; interactive radar; a widget; and a dark mode.

workflow

Workflow
This is an indispensable app for connecting and combining apps and actions to automate tasks—thus saving me time and effort. I have workflows for sharing photos, adding calendar entries and reminders, adding Trello cards and attachments, adding Apple device frames to screenshots, parsing email receipts, and more. Sure, I could do all those things without Workflow, but Workflow makes those things easier. Plus, I love making workflows. I wish I could find a job as a “Senior Workflow Builder”.

things

Things
I recently started using Things to keep track of my to-dos. Its design is striking for two reasons: it’s beautiful and it’s calming—meaning it doesn’t stress me out to use it. Plus, there’s no concept of overdue in Things, so it’s never shaming me for not completing a task. The cost of the apps may be a dealbreaker for many (there’s a separate app for iPad), but Things is more than enjoyable and useful enough to justify the price.

momento

Momento
This is a journaling app that collects manual thoughts and media and also automatically imports tweets, Instagram and Facebook posts, and other social-media feeds. I’ve been using Momento for several years now, and looking back at memories and what I was doing, thinking, and even tweeting years ago is something special.

transit

Transit
I enjoy trying different apps to see how they solve the same problems (see: Things), and transportation apps are no exception. In Los Angeles where many public-transportation lines run infrequently or have earlier-than-ideal-end-of-service times, Transit has some key features for me: its active-trip mode lets me know when to get off, whether or not I’ll make a connection, and what my ETA is.

lire

lire
In the previous post, I had just started using this RSS reader, and here I am four months later still using it. Still one of the most notable things for me is it feels at home in iOS 11 with its design choices. Another notable thing is it can fetch the full text of articles that get truncated in feeds.

apollo

Apollo
Here’s a bar graph comparing my Reddit usage before Apollo was released vs after: ▁ ▇. With its many customization options, gestures, and the jump bar, it’s such a delight to use (it’s easy to tell much thought and love has been poured into the app). And like lire, it feels at home on iOS.

trello

Trello
Trello helps me organize Partly Sunny to-do lists, feature requests, and bug reports as well as plan out future updates. I started using it beyond project tracking too. This year, I embarked on a 365-day photo project where I take and share a photo each day. I have a Trello board to save sort-of photo drafts; if I want to revisit something for a future photo, I take a photo and add it to this board so I don’t forget about it.

halide

Halide
A polished, powerful manual camera app. One of my favorite features is when in manual-focus mode, I can turn on highlighting of what’s in focus in the frame—immensely helpful when I’m trying to compose a shot with a particular thing in focus.

And in my Dock:

cesium

Cesium
Since iOS 9, the default iOS Music app hasn’t been for me. Thankfully, Cesium exists with its customizable tabbed navigation, powerful list sorting and grouping, track details, queue editing, dark theme, and more. (I’m using an alternate icon to match the iOS 7 Music app color.)

drafts 5

Drafts
This app is great for when I need to jot down a quick note. From there, I can decide what to do with it later or immediately perform an action or set of actions on the text and send it somewhere else like a message, a tweet, or elsewhere with a URL scheme. The recent Drafts 5 (I’m using an alternate icon) brought a powerful new scripting environment giving me further options for processing text—and giving me opportunities to brush up on my Javascript.

So that’s my home screen setup. May 2018 edition. As I said last time, I like to tinker, so no doubt this will get tweaked soon. What does your home screen look like? Come find me on Twitter and let me know!

Gesturing for User-Friendliness

With my iPhone X in my hand, I’m checking the weather for my current location in Partly Sunny, and I want to see my full locations list. What do I do? I swipe from the left edge of the screen to go back. I’m done checking the weather, and I want to go to my home screen. What do I do? I swipe up from the bottom.

I open Photos, swipe through my Camera Roll, favorite some photos, and now I want to go to the Favorites album. What do I do? I swipe down on the current photo to get back to the Camera Roll, I swipe from the left edge to go back, and now I can tap on the Favorites album. With all that navigating, I didn’t press any buttons. I only used gestures.

Gestures are an increasingly important part of iOS. Whether they’re a simple tap to dismiss, a swipe to go back, or a pinch to close, gestures not only offer shortcuts, they offer increased usability.

There is one particular place in iOS that hasn’t been given some gesture love but dearly needs some: modal form sheets. No doubt you’ve seen and interacted with form sheets in iOS before. On iPhone, they slide up from the bottom of the screen and fully cover the other view you were interacting with. On iPad, they slide up from the bottom and occupy a portion of the width and height of the screen. The area of the other view not covered by the form sheet is dimmed underneath.

App Store Apple ID

By default, when modal form sheets are displayed, there is one way to dismiss them: the Done button in the top-left or top-right corner. This can make dismissing form sheets user-unfriendly. On iPads, this button occupies a tiny portion of the screen—meaning there’s just a tiny portion of the screen that can dismiss the modal. And on taller iPhones, reaching for the Done button can be challenging. How can dismissing form sheets be made easier? Gestures!

Before we get to that, let’s define a few things. First, what’s a modal? In its basic definition, a modal is a view that covers up another view and prevents interaction with that other view (the parent view) until an action occurs on the modal view. What are some examples of modal views?

In iOS, there are a variety of modal views. There are alerts (centered on the screen with usually a message and one more more buttons), action sheets (anchored to the bottom of the screen and usually show two or more choices to act on something), and activity sheets (commonly know as “share sheets” to copy, send, or share content).

Modals

These types of modal views are defined by iOS. One more type of modal view is defined by developers. When showing (called “presenting” in iOS parlance) a custom view—say a settings view with options and submenus—developers can choose to present the view modally. By default, the view will slide up from the bottom of the screen and cover the view the user was interacting with.

When presenting a view modally, developers can choose a few styles for the modal view. From the iOS Human Interface Guidelines, the styles are “full screen”, “page sheet”, and “form sheet”. On smaller screens, page sheets and form sheets cover the whole screen, but on larger screens, they cover a portion of the screen. The portion of the parent view not covered is dimmed underneath.

ModalPresentations

I’m going to focus specifically on form sheets though the improvements I discuss would also apply to page sheets and mostly to full screen modal views too.

What are some examples of form sheets? In App Store, viewing your Apple ID account presents a form sheet.

App Store Apple ID

In Settings > Apple ID, tapping “Set Up Family Sharing” presents a form sheet.

Family Sharing

And in Partly Sunny, viewing settings, editing the locations list, and viewing radar all present a form sheet.

Partly Sunny settings

Partly Sunny edit list

Partly Sunny radar

So how can dismissing form sheets be made easier with gestures? Here are two ways.

First, on iPad, tapping anywhere outside the form sheet where the parent view is dimmed underneath should dismiss it. Here’s the current active area of the screen where tapping will dismiss the form sheet: just the Done button.

Current tap area

And here’s what the active area to dismiss the form sheet should be: both the Done button AND the space outside the view (the status bar is still reserved for its interactions like scrolling a view to the top).

Proposed tap area

The space outside the form sheet currently is a touch dead zone; the dimmed area merely prevents taps to the view underneath. Why not use this space to dismiss the form sheet?

Tapping outside a view to dismiss it already exists elsewhere in iOS—even for dismissing modal views. When an action sheet or activity sheet is presented, tapping above or outside the buttons or view will dismiss the sheet.

Tap outside action sheet

In the iOS 11 App Store, tapping a Today story tile or list tile opens a sort-of page sheet where, on iPad, tapping to the left or right of the view in the blurred area will dismiss the view.

Tap outside App Store tile

This example isn’t a modal view per se, but it applies. On iPad when pulling down on a Messages notification banner to reply to the message, tapping to the left or right of the messages view in the blurred area will dismiss the view.

With the latter two examples, perhaps these relatively new interaction methods will inform an updated modal system in a future iOS version.

In the meantime, there’s a workaround to capture taps outside the form sheet and have them dismiss the modal. This Stack Overflow thread discusses the solution. Since I first discovered this workaround, there’s been an update for Swift 4. I’ve reproduced and tweaked it here:

import UIKit

class FormSheetViewController: UIViewController, UIGestureRecognizerDelegate {
    // gesture recognizer to test taps outside the form sheet
    var backgroundTapGestureRecognizer: UITapGestureRecognizer!
    
    // dismiss the modal and perform any other related actions (e.g. inform delegate)
    func done() {
        dismiss(animated: true, completion: nil)
    }
    
    // check if the tap was outside the form sheet
    @objc func handleTap(_ sender: UITapGestureRecognizer) {
        if sender.state == .ended {
            let location: CGPoint = sender.location(in: view)
            
            // if outside, dismiss the view
            if !view.point(inside: location, with: nil) {
                view.window?.removeGestureRecognizer(sender)
                done()
            }
        }
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // set up gesture recognizer
        if backgroundTapGestureRecognizer == nil {
            backgroundTapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
            backgroundTapGestureRecognizer.delegate = self
            backgroundTapGestureRecognizer.numberOfTapsRequired = 1
            backgroundTapGestureRecognizer.cancelsTouchesInView = false
            view.window?.addGestureRecognizer(backgroundTapGestureRecognizer)
        }
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // remove gesture recognizer
        if backgroundTapGestureRecognizer != nil {
            view.window?.removeGestureRecognizer(backgroundTapGestureRecognizer)
            backgroundTapGestureRecognizer = nil
        }
    }
    
    // don't forget the delegate method!
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
}

Partly Sunny uses this workaround, so in any of the previously mentioned form sheets, tapping outside the view will dismiss it.

Tap outside Partly Sunny settings

Tap outside Partly Sunny edit list

Tap outside Partly Sunny radar

This works for iPad, but what about iPhone where the form sheets cover the full screen and there isn’t any dimmed area? The second way to make dismissing form sheets easier is dragging. Once the view is dragged down a certain amount, the view should dismiss. This would work on iPads too.

Drag to dismiss

This idea of dragging down to dismiss something exists elsewhere in iOS. In Photos, when tapping on a photo in the Camera Roll or an album, the photo goes full screen. Tapping the back button goes back to the album, but also dragging down on the photo will shrink it and fade it to reveal the album—in other words, dragging down dismisses it.

Drag photo to dismiss

While Maps doesn’t use traditional modal views, the system it uses allows for dragging the cards down to get back to the content underneath.

Drag map card to dismiss

Third-party apps have started to employ dragging down modals to dismiss as well. I’m not sure where I first saw it, but I know of several apps that have this functionality. Partly Sunny is one of them. In any form sheet, dragging down on the view will dismiss it. Here it is in action:

Drag to dismiss

I added a sort-of guard to help prevent accidental dismissals. If you scroll the view and then scroll back to the top, if when you reach the top you’re still dragging down (so that the view is doing the iOS rubber-banding effect), the view won’t dismiss. But once you release, if you drag down again, the view will dismiss. I didn’t want anyone to be casually scrolling up and suddenly the view disappeared on them. Here’s what that code looks like added to the code above:

import UIKit

class FormSheetViewController: UIViewController, UIGestureRecognizerDelegate {
    // scroll view must be dragged down this distance to be dismissed
    var scrollDistanceToDismiss: CGFloat = 50
    
    // tracks whether or not the scroll view should be dismissed if dragged down from top boundary
    var dragScrollViewToDismiss = true
    
    // tracks whether or not dragScrollViewToDismiss is ready to be set
    var dragScrollViewToDismissIsReady = false
    
    // stores the initial offset of the scroll view
    var scrollViewInitialOffset: CGFloat = 0
    
    // stores if the scroll view was loaded; guards overwriting scrollViewInitialOffset
    var scrollViewLoaded = false
    
    
    
    // gesture recognizer to test taps outside the form sheet
    var backgroundTapGestureRecognizer: UITapGestureRecognizer!
    
    // dismiss the modal and perform any other related actions (e.g. inform delegate)
    func done() {
        dismiss(animated: true, completion: nil)
    }
    
    […]
}

extension FormSheetViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // store initial content offset of scroll view
        if !scrollViewLoaded {
            scrollViewLoaded = true
            scrollViewInitialOffset = scrollView.contentOffset.y
        }
        
        if dragScrollViewToDismiss {
            // if scrolling up, cancel dismiss
            if scrollView.contentOffset.y - scrollViewInitialOffset > -scrollView.contentInset.top {
                dragScrollViewToDismiss = false
                dragScrollViewToDismissIsReady = false
            }
            // if scrolling down, dismiss view controller
            else if scrollView.contentOffset.y - scrollViewInitialOffset <= -scrollView.contentInset.top - scrollDistanceToDismiss {
                done()
            }
        }
        
    }
    
    // if scroll view released beyond top boundary, set dismiss ready
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if scrollView.contentOffset.y <= -scrollView.contentInset.top {
            dragScrollViewToDismissIsReady = true
        }
    }
    
    // if scroll view drifts beyond top boundary, set dismiss ready
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        if scrollView.contentOffset.y <= -scrollView.contentInset.top {
            dragScrollViewToDismissIsReady = true
        }
    }
    
    // if scroll-to-top activated, set dismiss ready
    func scrollViewDidScrollToTop(_ scrollView: UIScrollView) {
        dragScrollViewToDismissIsReady = true
    }
    
    // when tapping again on scroll view, set dismiss active
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        if dragScrollViewToDismissIsReady {
            dragScrollViewToDismiss = true
        }
    }
}

Form sheets and modal views as a whole are important and useful tools for iOS app developers. Dismissing them could be a bit more user-friendly, and gestures—tapping outside the view and dragging down on the view—can accomplish that. I hope a future version of iOS gives developers out-of-the-box tools to do both and thus standardizes these interaction methods.

Until then, developers can use their own solutions like those above. If you have suggestions how I can improve tapping outside the view or dragging down on the view, please let me know. Now it’s time for me to swipe down on this and get back to work.

Tracking My Time with Workflow and Toggl

Thanks to Federico Viticci at MacStories, last year I started using Toggl to track the time spent on many of my tasks. I started initially for two reasons. First, the work I was doing at the time was hourly, and I punched in and out for the day and for lunch. Keeping an account of how long I had been working and how long I had been away at lunch ensured I didn’t end my day or my lunch too early or too late.

Second, there are sometimes long stretches of time when I’m doing something—from working on Partly Sunny to playing a game to just reading Twitter—where I have no idea how long I’ve been doing that something. Tracking my time has allowed me to, well, keep track of my time—it has allowed me to better understand what I’m spending my time on. And in the case of working on a project, it allows me to better understand how long something actually takes to complete.

When I started using Toggl, I made sure to not be militant with my time tracking. I’m not tracking everything I do to the point where I get so annoyed with it and want to print out the Toggl website and set fire to it. But things that are work related and tech related—the things I need to track or the things I’m most curious about tracking—I’ve been tracking.

To aid in this tracking, I’m using the indispensable (and hopefully long-lasting) Workflow. While the new Toggl app has improved over the previous version, it still is clunky to use and doesn’t offer ways to quickly start and stop time entries—like, for example, a widget or Apple Watch app or even 3D Touch shortcuts—and doesn’t have a native iPad app. This is where Workflow comes to the rescue. Federico discussed how he used workflows to start and stop Toggl timers when Workflow gained the ability to more powerfully work with web APIs. Later, in an edition of Club MacStories, he wrote about a new approach that used dedicated workflows for quickly starting and stopping timers.

Using his modified workflow idea, I created several workflows fashioned to how I use Toggl. For example, I have a Partly Sunny timer that when run asks what I’m working on (development, testing, replying to emails, etc.) and starts a time entry with that chosen thing as its description. I also have a Games timer that asks what game I’m playing. For this timer, I have several defaults (including Alto’s Odyssey, Really Bad Chess, Mini Metro, and Rodeo Stampede), but I also have an “Other” option. I built my workflows so that if I select “Other”, Workflow will prompt me to type in the other thing I’m doing that isn’t a preset in the list.

As I was creating my timer workflows, I kept pulling out portions of them that were the same in each and creating reusable workflows to embed with the Run Workflow action (I’m still happy this was added to Workflow. The Run Workflow action has allowed me to create many reusable workflows to run inside other workflows.). For example, the actions that create the encoded Toggl authentication became a separate workflow. The actions that processed the selected description choice and asked for input when “Other” was selected became a workflow. My goal was to pull out all the duplicate actions so that if I ever wanted to update these core actions I wouldn’t have to update them in ten or more places.

Eventually I reached the point where I thought creating a sort-of “super workflow” for starting time entries was the way to go. Rather than having several reusable workflows, could I have just one? Challenge accepted! For me, part of the joy of using Workflow is actually building the workflows and experimenting to see what I can do. It’s like visual programming—visual problem solving.

What I ended up creating is a workflow that takes as input a dictionary of project IDs and a list of descriptions. It does some parsing and starts a time entry accordingly. Here’s what the workflow looks like (select the image for a larger version):

super workflow

If I send the workflow more than one project ID or description, it asks which one I want to use for the time entry; if there is only one of either, it just uses that one project ID or description. And for the descriptions, if I select “Other”, the workflow prompts me to type in an other item. The workflow is also built to handle “None” for a description; choosing “None” starts a time entry with a blank description. Once this parsing and processing takes place, the workflow starts the time entry.

Because the super workflow does all the processing of IDs and descriptions and handles the Toggl API call that starts the time entry, I can more easily create other workflows that set up the timers or groups of timers. These timer-setup workflows then, with the Run Workflow action, run the super workflow. None of the timer-setup workflows contain any of the processing and handling actions, so if I need to adjust them in the future, I’m adjusting them in one place: the super workflow. Reusable code (sort of) for the win!

So what do the timer-setup workflows look like? They’re much simpler than the super workflow. Each timer-setup workflow contains a dictionary of project IDs and a list of possible time-entry descriptions associated with the project IDs. For example, my Partly Sunny timer workflow has one project ID—that for my Partly Sunny Toggl project—and a list of several possible descriptions: “Development”, “Testing”, “Replying to emails”, etc. The aforementioned games timer looks similar.

partly sunny timer

One of my other timers is a reading timer that has four project IDs in the projects dictionary (those for Twitter, Reddit, RSS, and Pocket) and one description in the list: “Reading”.

reading timer

You’ll notice there are a few more actions under the Nothing action. Each of these timer workflows do include a few more actions that package the projects dictionary and the descriptions list into a dictionary that gets sent to the super workflow, and then the super workflow is run. None of these actions are modified when duplicating a timer workflow or creating a new one.

So with this setup, how easy is it to create a new timer workflow for something new I want to track? Let’s do it. I’m working on a new app project (more on this later), so I’m going to create a timer workflow for it. First, since I don’t have a workflow for this, I create the project on the Toggl website (I suppose I could—should?—make a workflow to do this). Next, I get the Toggl project ID for it with another workflow (that I believe came from Federico at some point) that returns a list of all my projects and prompts me to choose the one I want the ID of. The workflow copies the project ID to the clipboard for easy pasting in the next step.

project ID workflow

Next, I duplicate an existing timer workflow and delete any project IDs and descriptions I don’t need for this new timer. In the projects dictionary, I type in the name of my project and paste in the ID. Then, in the descriptions list, I add any descriptions I want shortcuts for.

toggl timer

And that’s it. My new timer workflow is done. And it works in both the Workflow widget and the Apple Watch app.

Thanks to the indispensable Workflow, tracking my time with Toggl is easy and convenient. And thanks to the Run Workflow action, I can create reusable workflows to embed in other workflows instead of having duplicate actions in multiple places.

And a big thank you goes to Federico for inspiring me to not only better track my time but better track my time efficiently and conveniently with Workflow and Toggl.

Here are links to the various workflows:

If you have ideas or suggestions to improve these workflows, please let me know!

Happy time tracking!

My Home Screen Setup

I enjoy seeing what apps people use and how they’re arranged. In the past, I’ve shared my home screen on sites like homescreen.me, but recently I learned about the iOSsetups subreddit which is more active than the websites I previously used.

Here’s my current home screen (select to view a larger version):

home screen

These are the apps I use the most or I want easy access to. As for my wallpaper, I’ve been enjoying the built-in multi-colored dynamic wallpaper. Below are a few notes on some of the apps I have on my home screen.

tweetbot

Tweetbot
For me, this is the gold standard of what a Twitter app should be. With thoughtful design and interactions, timeline sync, and more, Tweetbot is an all-around terrific Twitter app.

workflow

Workflow
This is an indispensable app for connecting and combining apps and actions to automate tasks to save time and effort. This helps make things a little more efficient.

partly sunny

Partly Sunny
I’m the developer and designer behind this app that shows your weather in quick glances and detailed looks. If you just want a quick glance at what’s happening, Partly Sunny can show that. If you want a more detailed look at what’s happening in the next hour, day, or week, Partly Sunny can show that too. Whichever you prefer, everything is meant to feel at home on iOS. Some of the key features include: customizable hourly graphs; customizable conditions in current, hourly, and daily forecasts; interactive radar; a widget; and a dark mode.

momento

Momento
A journaling app that collects manual thoughts and media and also automatically imports tweets, Instagram and Facebook posts, and other social-media feeds. I’ve been using Momento for several years now, and looking back at memories and what I was doing, thinking, and even tweeting years ago is something special.

transit

Transit
I’ve tried several apps for navigating cities’ public-transportation systems, and Transit has stuck. Thanks to its ability to show nearby stops with realtime train and bus times and its active-trip mode that lets me know when to get off, whether or not I’ll make a connection, and what my ETA is, Transit helps me get to where I need to go on public transportation. Also, they often have fun release notes—a welcomed thing in the age of “bug fixes and performance improvements”.

apollo

Apollo
I enjoyed using Alien Blue back in the day, but after it became the official Reddit app, it lost its charm and what made it a great app. Not being able to find a great replacement, I only occasionally browsed Reddit. But then Apollo came along. With its many customization options, the gestures, and the jump bar, it’s such a joy to use that I found myself browsing Reddit much more.

lire

lire
I recently started using this RSS reader, and one of the most notable things for me is it feels at home in iOS 11 with its design choices. Add to that it can fetch the full text of articles that get truncated in feeds, and this feels like an app with staying power.

clash royale

Clash Royale
I’m rather addicted to this game right now (send help?). Does anyone play? I’m looking for a more active clan.

halide

Halide
A polished, powerful manual camera app. One of my favorite features is when in manual-focus mode, you can turn on highlighting of what’s in focus in the frame—immensely helpful when trying to compose a shot where I need a particular thing in focus.

launch center pro

Launch Center Pro
A sort-of speed dial for apps and actions that uses apps’ URL schemes to launch or deep-dive into the apps more quickly and efficiently.

And in my Dock:

cesium

Cesium
Since iOS 9, the stock Music app has not been for me. Thankfully, Cesium exists with its customizable tabbed navigation, powerful list sorting and grouping, track details, queue editing, dark theme, and more. (I’m using an alternate icon to match the iOS 7 Music app color.)

drafts

Drafts
This app is great for when I need to jot down a quick note. From there, I can decide what to do with it later or immediately perform an action or set of actions on the text and send it somewhere else like a message, a tweet, or elsewhere with a URL scheme.

One other note about my Dock: since iOS 7 introduced Control Center with its shortcut to Camera, I had the app buried in a folder on another screen. When my phone was unlocked, I used this shortcut to launch Camera. But with Control Center’s less-than-convenient placement on iPhone X, I brought back Camera to my home screen—changing my Dock arrangement for the first time in years—to have easy, quick access to Camera. Here’s hoping iOS 11.x finds a better way to access Control Center on iPhone X.

So that’s my home screen setup. January 2018 edition. As I like to tinker, no doubt this will get tweaked soon.

Don’t Be the Product

Nicole Nguyen at BuzzFeed writes about the Uber/Unroll.me news and more generally on free apps and services.

The Unroll.me/Uber fury is a good reminder of the ol’ Internet adage, “if you’re not paying for it, you’re not the customer, you’re the product.”

But some sites are much more egregious than others. So here are some ways you can assess an app’s trustworthiness and find out if your free faves are problematic.

I don’t use either, but the Uber/Unroll.me news has me thinking about the “free” apps & services I do use.

If there’s only one thing you take away from this article, let it be this: there’s no such thing as a free lunch.

Partly Sunny: Design Notes

When I set out to make Partly Sunny, my weather app for iPhone and iPad, there were a few design and technical solutions I knew I wanted to include: things like making custom icons and using specific APIs. These solutions would go toward building the weather app I wanted to use and would help differentiate Partly Sunny from other weather apps on the App Store.

What follows is a sort-of behind-the-scenes look at Partly Sunny. I’ll start with discussing some of the design solutions and show some draft designs, and in a subsequent post, I’ll discuss some of the technical solutions. Select any image below for a larger version.

From the start, one thing I wanted to include in Partly Sunny was a view that gave summary information for both my current location and for any saved location. I wanted a way to quickly glance at the weather for these places. But I didn’t just want some basic information like the current temperature and an icon representing the current condition (e.g. “clear” or “light rain”). I wanted this view to be more useful, so in Partly Sunny, the list view includes the current temperature and condition for each location but also offers more: a sentence stating what’s happening over the next many hours at that location as well as the high and low temperatures and the chance of precipitation for the day.

locationsList

Whereas some weather apps might declare this to be too much information, I wanted this view to be useful for understanding what’s happening. A simple icon stating it’s clear right now doesn’t help in understanding a couple hours later it’s going to be pouring.

From this simpler-but-still-useful view, I wanted to be able to select any location to view more detailed information—what’s happening over the next hour, the next day, and the next week at that location.

locationView

And the key to help visualize this information was graphing it. While this isn’t a new solution to weather apps, some do it and some don’t, and I wanted Partly Sunny to do it. So looking ahead in the hour-by-hour forecast, there’s a visual representation of how temperature, chance of precipitation, humidity, wind speed, and more are changing.

features_hourlygraph

And looking ahead in the day-by-day forecast, there’s a visual representation of the high and low temperatures over the week. Reading, for example, that the high temperature will be 55° on Monday, 68° Tuesday, 75° Wednesday, 52° Thursday, and 48° Friday is one thing. Seeing it rising and falling on a graph is another.

dayByDay

This experience was something I wanted to have on both iPhone and iPad. Some of the weather apps I had been using previously were iPhone only, and some of the iPad-friendly apps weren’t the best. So for when my iPad is in-hand and I want to check the weather, having Partly Sunny run natively on both iPhone and iPad giving me the same experience on both devices was a must-have.

iphone_ipad

Also a must-have was making custom icons. I know of several apps that use Climacons by Adam Whitcroft. They’re great icons, and I could have used them as well. But I wanted Partly Sunny to use its own icons. So I learned how to use Sketch and made my own. Here they are:

Icons

For the navigation bar, I made a system of icons using a dots-and-dashes theme.

Dots and Dashes

Sure, my icons aren’t going to win any design awards, but they’re unique to Partly Sunny, and that’s what I wanted.

Icon design wasn’t all I used Sketch for. I also, uh, sketched drafts of the various views in Partly Sunny. For example, here’s my first pass at the location view, a subsequent pass, and what it looks like in the app:

locationViewDrafts

The list view went through a few explorations and largely ended up with version 4:

listViewDrafts

Sketch was also helpful in working out another design solution I wanted to include: a dark theme. I’m a proponent of having dark themes for apps so that in lower-light environments, the UI isn’t blinding me (I still wish iOS had some kind of system-wide dark theme).

darktheme

Not all the design solutions in Partly Sunny were planned out from the start, of course, but these were many that were. My goal was to build the weather app that I wanted to use, and that goal included a few specific design and technical solutions. I hope those solutions are useful to you as well and help make Partly Sunny the weather app you want to use too!

Partly Sunny is available on the App Store for $2.99.

Next time, I’ll discuss some of the technical solutions built into Partly Sunny. Stay tuned!

Partly Sunny

For the past several months, I’ve been learning Apple’s Swift language and how to build iOS apps. Learning this has been something I’ve wanted to do for a while, so it’s been both a fun and rewarding challenge.

To bring together everything I’ve learned, I built a weather app—not because the App Store doesn’t already have enough of them but because the apps I like don’t do exactly what I want them to do. So I made my own because now I can.

Meet Partly Sunny:

intro

Partly Sunny shows your weather in quick glances and detailed looks.

Some of the features of Partly Sunny:

Locations List
Quick glances of what’s happening in the sky at your current location and your favorite locations.

locationsList_black

Location View
Detailed looks at what’s happening throughout the hour, the day, and the week at your locations.

locationView_black

Day-By-Day
Swipe up in location view to show a day-by-day graph with the week’s high and low temperatures plotted.

dayByDay_black

Day View
On the day-by-day graph, tap any day to see a detailed forecast for that day.

dayView_black

iPhone and iPad
Partly Sunny runs natively on both devices.

ipad_right

Dark Theme
Toggle between Partly Sunny’s light theme and dark theme in the app’s settings or with a handy gesture.

darktheme

Hour-by-Hour Graphs
Tap on any hour-by-hour graph and choose to plot temperature, chance of precipitation, cloud cover, humidity, wind speed, or more.

features_hourlygraph

Rain Graph
For U.S. & U.K. locations, a rain-intensity graph for the next hour will appear when it’s raining.

features_raingraph

Pollen & NOAA Links
For U.S. locations, links will appear for pollen forecasts and the local NOAA weather office for winter-weather predictions, tropical forecasts, marine forecasts, and more.

features_pollen

Widget
Partly Sunny includes a widget to show both a quick glance and a detailed look at your current location’s forecast.

features_widget

3D Touch
3D Touch the app icon for the widget and shortcuts. Peek and Pop in the locations list; the location view’s severe-weather alerts, pollen-forecast, and NOAA buttons; and the day-by-day graph.

features_3dtouch

Dark Sky
Partly Sunny forecasts are powered by Dark Sky to give you super-accurate data.

While you may not always enjoy the weather, hopefully you enjoy checking the weather with Partly Sunny.

Of course there are things I want to tweak and more features I want to add, but I’m proud of what I’ve accomplished so far. I set out to do a thing, and I did it.

You can visit Partly Sunny on the web at partlysunnyapp.com and follow @partlysunnyapp on Twitter.

Partly Sunny will be available on the App Store tomorrow is available on the App Store for $2.99.

Microsoft Acquires Perceptive Pixel

Microsoft today announced the acquisition of the multi-touch-pioneering company Perceptive Pixel. This is a big get for Microsoft. Couple this with Microsoft now producing its own hardware, and these are exciting times for the company.

This news was striking to me because of my connection with Perceptive Pixel. While at ESPN, I worked with Perceptive Pixel multi-touch technology for three-and-a-half years creating broadcast touchscreen graphics for SportsCenter. On the SportsCenter set is a 103-inch multi-touch touchscreen for anchors and analysts to use during live broadcasts.

So why is this a big get for Microsoft? Two reasons: technology and customers.

First, the technology. When company founder Jeff Han gave his Perceptive Pixel demo at TED back in 2006, multi-touch technology was groundbreaking. The iPhone and its multi-touch technology wouldn’t be unleashed until the following year. And remember CNN’s Magic Wall during the 2008 presidential election? That was Perceptive Pixel technology.

Jump to 2012, and Microsoft is lagging behind Apple in the consumer space. Acquiring Perceptive Pixel marks a more concerted effort by Microsoft to keep up—not necessarily catch up—with Apple. No doubt the Surface will make use of Perceptive Pixel technology—if it already doesn’t. Why should Microsoft sink money and time into developing their own—perhaps not as good—multi-touch technology when they can use tried, tested, and successful technology from a company dedicated to producing said technology.

Second, the customers. Take a look at Perceptive Pixel’s customer list. The big industries on that list? Government, broadcast, and education. Microsoft just gained huge inroads with all those industries.

Microsoft hasn’t yet announced what their plans are for Perceptive Pixel, but the acquisition alongside their new hardware ventures make for interesting speculation. If nothing else, Steve Ballmer can take notes from Jeff Han on giving presentations.

Backboard Dribbble App Is Good But Could Use an Assist

(Note: I think this is the first time I’ve really reviewed an iPhone app. I don’t plan on making this a habit, but I had a few things to say that didn’t fit in a tweet or two.)

If you aren’t familiar with Dribbble, it’s a website/network for designers to showcase small screenshots (called “shots”) to get feedback (and depending on your popularity large amounts of praise, too) from others. In addition, the site is a great source for inspiration and for seeing what cool things others are working on.

Dribbble doesn’t have its own native iPhone app, so numerous third-party developers have stepped in to fill the void. The Dribbble app I’ve been using is Balllin’; the app looks great and is easy to use.

This week, I tried out Backboard. Like Balllin’, the app looks great. Backboard also makes some improvements on user interaction with its reliance on gestures over buttons (I’m a sucker for gesture UI).

What I like about Backboard:

THE DESIGN. (I’m a sucker for minimal design, too.) The design of the app is simple and flat and as a result allows the artwork it features to shine with no distracting or unnecessary chrome.

THE GESTURES. When in a list, swipe right to reveal the menu of lists. When on a shot page, swipe right to return to the list. No buttons taking up precious screen real-estate and browsing time (like in Balllin’).

THE LARGE SHOT. Tap a shot in a list to see a larger version on the shot page (much larger than is available on the shot page in Balllin’). (In both apps, rotating iPhone displays the shot fullscreen.)

What I don’t like about Backboard:

ALL THE TAPS. With simplicity exuding from so many other aspects of the app, liking or commenting on a shot is anything but simple. When in a list, if I want to like a shot, I have to tap FIVE times to like it. 1: tap the shot in the list to go to the shot page. 2: tap the shot image on the shot page to reveal the iOS arrow-actions button. 3: tap the action button. 4: tap “View on Dribbble” from the slide-up menu to launch the in-app browser. 5: tap like on the mobile page. If Dribbble ever opens their API to allow third-party apps to access liking and commenting, this process could be simpler. But it could be simpler before that as Balllin’ demonstrates: liking a shot in Balllin’ only takes THREE taps.

PAGINATION (aka more taps). There is no continuous-scrolling in a list. Instead, at the bottom of a list are buttons for the previous and next pages. Again, if the app is otherwise touting simplicity, this seems out of place. Or if the pagination must stay, why not continue with the gesture theme and allow swiping left or right on the page bar to switch pages?

ICON INCONSISTENCY. When in a list, views, likes, and responses are written out:

When on a shot page, views and likes are icons:

Why not have the icons on the list view, too (again for simplicity)?

In the end, the app’s minimal design and gesture-based UI allow me to overlook the annoyances for now, and I hope future updates make this a slam-dunk Dribbble app. If you’re looking to draft a new iPhone Dribbble app and you appreciate clean design and gestures, take a shot at Backboard.

Bluebird Blues

I don’t have much to add to what’s already been said about the Twitter.com and Twitter for iPhone redesign/restructure; I don’t often use either (I do most of my tweeting from Tweetbot).

But while I was looking around the new Twitter.com last night, something jumped out at me. Looking at the Twitter logo, the verified logo, the compose-a-tweet button, the following button, the home button, and the follow-this-person button, I noticed almost all of those elements use a different blue a blue other than the official Twitter blue. Here they are for comparison (click for larger version):

twitter blues

Was this on purpose? Or was someone just being lazy? If this wasn’t a mistake, it sure looks like one.  I’m assuming Twitter has an internal identity guide that their designers are supposed to follow. And if the designers didn’t have that guide, they could have easily gone to Twitter’s public logo page, downloaded the bird, grabbed the RGB color, and designed the buttons using the official Twitter blue.

Details matter. The consensus is that Twitter struck out with the redesign/restructure. They even seem to have struck out with their own color. Twitter has the blues. And they’re using too many of them.

Browsing Refresh

Henrik Eneroth reimagines the web browser in the era of widescreen monitors and fullscreen apps:

Of course, screen sizes do still mat­ter when browsing the web. Since many web sites will be longer than your screen is tall, the less user inter­face we put vertically, the bet­ter. But most screens today are widescreens, so why are we not put­ting the left- and right-hand sides of the screen to better use, instead of for­cing everything into a bar on the top of the window?

His solution:

eneroth_browser

(Via Cameron Moll)

“Give My Regards to King Tut”

President Obama this week gave a speech in Schenectady NY. And apparently he also opened the Stargate?

(Photo: http://www.timesunion.com/).

GOOOOOLden Graphics

I’ve talked about the music of ESPN’s World Cup coverage, but what about some of the graphics?   Motionographer recently posted a montage of Prologue’s graphics package for ESPN.   Great stuff.   Check it out!

prologue espn

NBA Free Agents

On SportsCenter yesterday, my NBA free agents touchscreen graphic debuted with NBA analyst Chris Broussard:

I still have a few tweaks and updates to work on, so the graphic isn’t finished, but after spending two months working on it, finally seeing it on TV is a great feeling.

What’s special about this graphic is the on-the-fly calculations of NBA team salaries based on several factors: signed player salaries, free agent cap holds if they have Bird rights, and team roster charges if the team has less than 12 players.   Each time a player is moved to or from a roster or a team renounces all or individual free agents, the graphic runs through a series of calculations to determine the team’s new salary total and their available cap room.

Because of this graphic, I now know more about the NBA free agency process than 1.) I care to know and 2.) I ever thought I would all thanks to this year’s big story: LeBron James.

Here was my view in the studio yesterday:

free agents graphic

free agents graphic

Earth! Wind! Water!

When these powers combine… they’re gonna take pollution down to zero!

Well that’s the idea, at least, behind a recent study. From Wired:

A 1,550-mile-long network of offshore wind stations could provide power from Massachusetts to North Carolina with minimal threat of outages, according to a new study.

Scientists had considered offshore wind as a potentially limitless source of power. Compared to land, the ocean has stronger and more constant winds, though still not constant enough to be a primary energy supply. This study indicates that offshore wind deserves more serious consideration as an energy alternative.

“The technology’s there, the materials are there, we have the willpower to reduce carbon emissions, we have a reliable power supply that doesn’t lead to fuel shortage,” said Mark Jacobson, a civil and environmental engineer at Stanford University. “The next step is really to start implementing this on a large scale.”

There are currently no commercial offshore wind stations, though companies have started developing six wind farms along the east coast. Together, the developments could produce as much energy as a large coal or nuclear power plant.

These seems very promising.   Couple this with developing super-efficient solar panels, and, well, we might just make that green-haired captain proud.

The Difference 40 Years Make

Via The Daily Dish, here’s the “Internet” in 1969:

1969 technology, meet 2010 technology:

http://www.youtube.com/watch?v=nZ-yNISb54k

How do you like them Apples?

The last 50-ish years have been remarkable period of human achievement.   Look at the entire timeline of human existence and then look at the last 50 years or so.   At no time in human existence has technology not just electronic/computer technology advanced so rapidly and so robustly.   Truly remarkable.

Silent Running

News from the helicopter world via Wired: Eurocopter is developing technology to reduce the noise generated by helicopters.   The first technology is a different blade design.   Instead of a straight-edge blade, angles are built-in to the blades:

eurocopter

In addition to the Blue Edge rotor blade, the company also introduced something called Blue Pulse technology. Also designed to reduce helicopter noise, the Blue Pulse system uses three flap modules in the trailing edge of each rotor blade. Piezoelectric motors move actuate the flaps 15 to 40 times per second in reduce the “slap noise” often heard when a helicopter is descending.

Both of these technologies are able to reduce noise by minimizing the blade-vortex interaction of the main rotor on a helicopter. Blade-vortex interaction is the source of the pulsating sound most of us are familiar with when helicopters fly overhead. The noise is created when a rotor blade hits the wake vortex left behind from the blade in front of it.

Here’s a demo:

Pretty amazing.   I’d say look for this technology in those unmarked black helicopters, but you won’t hear them coming.

A Facelift for The Facebook on iPhone

facebook on iphone

Now THIS is good news!   The much-anticipated and much-needed Facebook 3.0 iPhone app has been submitted to Apple by developer Joe Hewitt.   TechCrunch notes:

Facebook has submitted v. 3.0 of their iPhone application to Apple, Joe Hewitt says via Twitter: “Just uploaded Facebook for iPhone 3.0 to the App Store for review. :)”

Hewitt also says he’ll post screen shots and more detais on this Facebook page for the iPhone app next week, and that he’s looking forward to getting started on v. 3.1 tomorrow.

Previously, TechCrunch reported Hewitt posted this list of new features:

1. The “new” News Feed
2. Like
3. Events (including the ability to RSVP)
4. Notes
5. Pages
6. Create new photo albums
7. Upload photos to any album
8. Zoom into photos
9. Easier photo tagging
10. Profile Pictures albums
11. A new home screen for easy access to all your stuff, search, and notifications
12. Add your favorite profiles and pages to the home screen
13. Better Notifications (they link to the comments so you can reply)
14. Quickly call or text people right from the Friends page
15. Messages you are typing will be restored if you quit or are interrupted by a phone call

For avid users of Facebook (Joe = guilty), having features currently available on the web-version of the site soon-to-be-available on the iPhone-version of the site is a huge victory for usability and consistency.   Woo!

(Nod: Just Another iPhone Blog)

Double Click through the City

Google Maps recently made a huge usability improvement to their Street View technology.   To “drive” along the street, you had to continuously click an arrow that moved them incrementally along the street.   Now, you can double click an area on the street and fly to that location (or even double click on something along the street to zoom in).   A huge usability improvement.

(Nod: Fumin)

NBA Mock Draft With ESPN’s Magic Box

I was on-hand yesterday to observe Doug Gottlieb making his NBA Draft predictions on SportsCenter using the Perceptive Pixel box.   This graphic is a modified version of the graphic I developed for the NFL Draft.

doug gottlieb with the perceptive pixel box

Here’s the video of his top seven picks (don’t mind the small technical difficulty I fixed it in time for the next segment):

http://www.youtube.com/watch?v=alYFDma97YY

Speaking of the NFL Draft, I snapped some photos during the NFL Draft with Michael Smith using the Perceptive Pixel box, but I never posted them.   Well, here they are:

michael smith with the perceptive pixel box

michael smith with the perceptive pixel box

michael smith with the perceptive pixel box

And here’s one of me with my project:

me with the perceptive pixel box

Making Long-Distance Not So Long

Ars technica reports:

Skype might not be performing quite as well as parent company eBay would prefer a $2.6 billion acquisition to perform, but that hasn’t dampened worldwide enthusiasm for the VoIP service. Skype is so popular, in fact, that new numbers out from TeleGeography suggest that it has become the “largest provider of cross-border voice communications in the world.”

When I went to France last year, my parents and I used Skype to keep in contact.   For anyone traveling overseas and wishing to keep in contact with people here in the States, or for those who are here and wish to keep in contact with someone overseas, I highly recommend using Skype because the service is convenient and it’s FREE!.   Just download the free Skype application on your computer, setup your free account, and have the other party download and setup also, and you’re on your way to free audio and video chats.   Did I mention it was free?

(Nod: Just Another iPhone Blog)

ESPN’s Magic Box

I’m late in commenting on this, but last month, SportsCenter on ESPN launched a new touchscreen graphic on their in-studio Perceptive Pixel touchscreen.   While they have been using their touchscreen since sometime in December, most notably with a telestrator graphic, this NFL Draft graphic marks their first appropriate (and cool) use of the technology.   I imagine we’ll be seeing more of this as the draft approaches.

16 February:

http://espn.go.com/broadband/player.swf?mediaId=3910857

11 March:

http://espn.go.com/broadband/player.swf?mediaId=3970534

New CNN Graphics Are Just Ok

Earlier this month, CNN launched new lower-third graphics for all of their shows.   On CNN, lower-third graphics (so named because they occupy the lower-third region of the television screen) display what story is being shown as well as the name and titles of anchors, reporters, interviewees, etc., the location of the report, and any other flags, such as breaking news, developing story, etc.   The new graphics on CNN give a unified look across each show, but while they are an improvement on the old look, they have faults of their own.

To start off, here are the old lower third graphics (via Media Matters):

old cnn lower-third

old cnn lower-third

One of my biggest issues with these graphics was when the story topic was long and would run into the show logo on the right there were visual proximity issues:

old cnn lower-third

And here are the new graphics (all via Newscaststudio.com):

new cnn lower-third

Here are the graphics in action:

As you can see, the CNN logo has moved to the bottom right corner to the left of the show logo, a story topic is now only one line, and, as you’ll see below, a story flag color change occurred.   What makes the new graphics partly successful is the simplicity a bordered, solid black rounded rectangle, and the animation is quick and simple, too.   What makes the new graphics undesirable, however, is much more.

(But before I list the faults of the new graphics, I first have to issue a disclaimer.   Anything I may say is wrong with the graphics could very well been proposed or discussed internally at CNN but shot down by the creative team or some higher-up-the-totem-pole executive.   A coworker of mine recently completed work on a major update to a popular weekly sports event, and there were some creative elements that were ridiculed in online forums.   What forum users suggested had internally been suggested to higher-ups by my coworker but were dismissed.   So, for all I know, anything I comment on here may very well have been discussed at CNN.)

First, the show logo and CNN logo bug is too huge.   Do we need to be constantly reminded what show were watching?   I’m assuming veteran watchers of Larry King Live or The Situation Room or Lou Dobbs Tonight know what show they’re watching by a) the host of the show and b) the time the show is airing.   Taking out the show logo would give story titles and other information more horizontal room to be displayed.   What happens now is any text is horizontally-scaled to fit inside the space allotted.   For example, in the Wolf Blitzer “Pres. Bush & Flying Shoes” image above, if president were spelled out instead of abbreviated, since the text would be longer, it would horizontally-scale to fit inside the same black rectangle.

Second, the CNN logo carrier (black, rounded rectangle) needs some work.   Here is the CNN logo with “Live”:

cnn live

The left edge of the ‘L’ hangs slightly over the left edge of the ‘C.’   The discrepancy is hard to see in this image, but on TV, it’s definitely there.   And because of this hang-over, when the “Live” text disappears, there’s another discrepancy:

cnn logo

The CNN logo carrier shrinks down to the logo’s size (plus padding), but there is more padding on the left side of the logo than there is on the right side.   If you look at the previous image with the “Live” text and compare with the above image, you can see the padding on the left and right of the CNN logo is the same in both images.   If the “Live” text were scaled down to fit exactly over the CNN logo, the padding could be uniform on both sides whether or not the “Live” were there.

Third, the displaying of someone’s name and title, for example being interviewed for a story or for commentary, can be excessive. Here’s someone’s name and title displayed:

fonted

If the story caption is displayed, for instance the “Pres. Bush & Flying Shoes” text, and the next shot is a commentator, the story caption wipes off and the person’s name and title wipes on.   After a while, the name and title wipes off and the story caption wipes back on.   This part is fine.   Where the problem creeps in is when the person commenting has more than one title.   For instance, a show I was watching last week had someone on who was a “CNN Contributor,” “Republican Strategist,” and the author of some book (the YouTube clip above has this many-titles problem, too).   Well, the director of the show thought, rightfully, all three titles needed displaying.   So, the story caption wiped off, his name and the first title wiped on and off, his name and the second title wiped on and off, his name and the third title wiped on and off, and finally, the story caption wiped back on.   The amount of animation for the small change of text (the name was the same each time) was excessive.   Even just animating from the story caption to a commentator’s name and title back to the story caption is a bit much.   Adding one or two extra titles is way too much.

To fix this excessiveness, the carrier for the story caption and the name and title of a commentator should never fully wipe off if it merely is switching text inside of it.   Instead, text should wipe off like it currently does but the carrier should remain with the same dimensions.   Once the text is fully animated off, the carrier should morph to the size of the new text and then the new text should wipe on.   Let’s look at an example to make this clearer.   Let’s say our story caption is “Pres. Bush & Flying Shoes” and we want to then display “Brad Simon / Fmr. Fed. Prosecutor” next.   The name/title text is horizontally shorter than the story caption.   The caption text would wipe off, but the carrier would remain the same size.   When the caption text finished wiping off, the carrier would adjust its horizontal and vertical size to fit the invisible name/title text.   When this animation finishes, the name/title text would wipe on.   This approach would give greater fluidity to the transitions and eliminate the excessive animation that is currently in place.   This approach would also eliminate the noticeable hitch when a carrier wipes off and a new carrier of a different vertical size wipes on.

Because CNN uses the real-time 3D rendering program Viz Artist to create their graphics, these new graphics likely employ the Viz technology called Transition Logic.   Basically, Transition Logic allows certain elements to remain or animate into new elements when other elements change.   So, using Transition Logic, the approach outlined above could be accomplished with a Noggi geometrical shape adjusted to be a rounded rectangle and with a center point in the lower left corner.   The width and height properties of the Noggi plugin could be adjusted and animated using Viz scripts (I know this because I’ve done it before).

Finally, this isn’t really a problem but rather a curiosity:

breaking news

The “Breaking News” text now receives a yellow background, changed from red in the older graphics.   I’m curious how the creative decision came to be to change the color.   Red is now for “Developing Story.”   Red seems like a more urgent color for a more urgent breaking story, not an ongoing, developing story.

In addition to the new lower-third graphics, the bottom of the screen received a major update.   Instead of the egregiously annoying news ticker that served to only distract viewers from watching, listening, and focusing on the story being aired, there is a “flipper” that displays more information on the current story and periodically switches to updates on top stories.   A fabulous and much needed change.

Overall, the new CNN lower-third graphics are an improvement on their predecessors.   The simplicity of the design and animations are excellent examples for other broadcast graphics developers.   But while they enjoy success in their simplicity, they have several faults that detract from an overall success.

Four Inches

gps

Wired yesterday had a cool brief history of GPS.   I learned a couple of cool things:

The GPS story starts with Sputnik, the first artificial satellite. The night after it was launched by the Soviet Union in 1957, researchers at MIT were able to track Sputnik’s orbit by its radio signal. And if you can track satellites from Earth, you can figure out how to locate objects on (or just above) Earth from the positions of satellites. […]

[Today,] GPS augmentation and precise monitoring techniques known as carrier-phase enhancement, differential GPS and relative kinematic positioning can now provide accuracy down to 4 inches.

4 inches! Incredible!   Hmm, if I were 4 inches to the right of where I’m sitting now, I’d fall off the couch.

(Photo: Wired article via NASA)

The F-35 Lightning

Ever since I attended an air show when I was young, I’ve been fascinated with military aircraft.   While I regret not following aircraft development as closely as I used to, yesterday while reading Patrick Appel, filling in for Andrew Sullivan, I learned something new: the Pentagon has a new plane, the F-35 Lightning.

The stealth-technology-equipped F-35 comes in three flavors normal runway takeoff and landing, short takeoff and vertical landing (like the Harrier), and aircraft carrier takeoff and landing and is a little brother to the stealthy F-22 Raptor.

Scheduled to enter service in 2011, the F-35 is aimed at replacing the Air Force’s F-16 Fighting Falcon and the Marines’ AV-8A Harrier and aimed at complementing the Navy’s F/A-18E/F Super Hornet.

The name “Lightning” is in honor of Lockheed Martin’s World War II fighter, the P-38 Lightning.

The F-35 Lightning:

F-35

F-35

The F-22:

F-22

F-22

In my excitement to see some awesome new military hardware, I did a little more poking around, and I learned the F-117 was sadly retired in April.   The F-117 Nighthawk stealth fighter along with the B-2 Spirit stealth bomber are two of the most kick-ass aircraft ever developed.   The former is an angular harbinger of doom; the latter is an uber-sleek, bat-like phantom of the skies.

The F-117:

F-117

F-117

The B-2:

B-2

B-2

A few more F-35 views:

F-35

F-16, F-35, F-22 comparison:

F-16, F-35, F-22 comparison

And finally, an interesting tidbit about the development of the F-35:

[The F-35, also known as the Joint Strike Fighter (JSF)] evolved to an international co-development program. The United Kingdom, Italy, The Netherlands, Canada, Norway, Denmark, Australia and Turkey have formally joined the U.S. and contributed money toward the program. These partners are either NATO countries and/or close US allies, and peacekeeping and war fighting more recently have been done by coalitions. The reason to have all of these countries in co-development with the US is that there is currently a big difference in the type of equipment that they fly. Although some countries fly equipment similar to the US’s, others fly equipment that is less capable. With JSF, they can all fly the same airplane; as a coalition, they can all be the same. With this in mind, the U.S. invited these eight countries to participate in developing the airplanes. That is to say, they are not just participants to buy the airplanes. They will participate in the design, build, and test of the airplanes. This is a marked difference from past programs.

(Image credits: F-35 comparison and F-35 three-view from Aerospaceweb.org; all other photos from Wikimedia and the United States Air Force in the public domain)