Three short years ago Widgetsmith came out and changed my life in a dramatic fashion. I never thought (or really dreamed) that I’d make something which would have the reach and impact Widgetsmith has. It has been quite the ride and today, as we start its fourth year, Widgetsmith is getting a very major update.

Interactivity

This past June while I was sitting at Apple Park listening to the announcements it seemed like every few minutes they announced something to do with widgets. We had clock face widgets on watchOS, desktop widgets on macOS, and Lock Screen widgets on iPadOS. But the real star of the show (for me at least) was the announcement of Interactive Widgets for iOS.

Widgets are at their core about extracting parts of an application and elevating them onto your iPhone’s Home Screen. This can be for utility or aesthetic reasons but in either case it lets you personalize your iPhone in a way which makes it uniquely yours. Up until now, however, these little windows into your app were entirely static. There was no animation, no variety, no anything. They were both technically and practically static snapshots.

Now in iOS 17 instead we can bring life to them and enrich their utility and beauty as a result.

I’ve spent the summer exploring as widely and creatively as I can the implications of allowing widgets to be interacted with. At WWDC Apple’s examples were typically small button pushes and fleeting interactions, but I thought I could do much, much more than that. I have no idea if the directions I’ve come up with are going to be popular, but I hope that at the very least the variety of options I’ve come up with will allow for us to find what is the ultimately successful use case.

Here are the ideas I came up with

Interactive Photo Galleries

By far the most popular widget configured in Widgetsmith is the Single Photo widget. This lets you put a favorite image right on your Home Screen, aligned and filtered exactly how you want it. So the first area I wanted to explore adding interactivity to was Photos. The logical place to start was allowing you to flip between multiple photos in a single widget.

To start with I have three gallery views:

• A “Gallery” collection, where you get a horizontal bar along the bottom showing previews of the photographs which you can tap on to switch between.
• A “Carousel” collection, where each photo takes up the full widget frame and you navigate by tapping on the next arrow.
• A “Flow” collection, where the photos are stacked in a horizontal flip layout very similar to the old iTunes Cover Flow look.

The collections shown in these widgets can be created independently of the Photos app which lets you avoid needing to create an Album in two places.

Photo + Widget

The next idea I had for photo widgets was to combine them with another widget. This could be another single photograph, but more helpfully you could put one of the more informational style widgets as the alternate widget. For example, you can put your step count or the weather behind the photo.

Tap on the widget to flip between the modes.

Photo Locket

Next up was a way to take a special photo and give it a special prominence on your Home Screen. So I came up with the concept of a a photo locket. You can take your photo and choose a frame shape. Tap on it to close the locket, tap again to open.

Music Flow

Moving on from photos I wanted to see what I could do with Music. The most obvious thing here was to provide a way to virtually thumb through your favorite music albums and playlists and then play them right from your Home Screen.

So I created a beautiful flow layout for your album artwork, including an optional mirrored effect. Tap through and when you find the perfect album for the moment, tap on it and it will play without needing to open Widgetsmith.

I also have added the option to play the song using the main Music app rather than within Widgetsmith if that is your preference.

Weather Station

My weather widgets got a massive improvement in their utility with the addition of interactivity. The nature of weather reports is that they have a timeline of data reported, through which you want to browse. So now you can browse through the forecast timeline from within the widget itself.

Additionally, you can toggle between the forecast mode: Current, Hourly, or Daily.

I also went a little overboard with a “Weather Station” widget which essentially brings the entire main weather tool from within Widgetsmith into the widget. You can toggle the graph between temperature, wind, UV Index and cloud cover. All smoothly animated and immediately loading.

Calendar

Similar to how a weather forecast’s timeline nature lends itself to interactive navigation, similarly I found that bringing interactivity to a calendar widget dramatically increased its utility. Rather than just showing you the events for the coming day, you can browse arbitrarily through the upcoming days and see what events are on each day.

Just for Fun

And last but certainly not least I’ve also added a tile game to the options for the Large widget style. This can be paired with another alternate widget which will typically display, but then when you have a moment and want a quick game you tap on it to open the game.

I have a number of other games planned but this seemed a great place to start and see how well they are received. Have fun!

StandBy Widgets

While all the existing widgets look and work well in the new StandBy mode introduced in iOS 17 (which displays a large print widget view while your iPhone is charging in a horizontal dock), I also added a new widget which I’ve found particularly useful for this mode. BIG TIME!

This docked mode is perfect for using your iPhone as a clock, however, the built in options don’t include a digital clock that you can pair with another widget, so I fixed this by adding a digital clock option which is positively massive.

Conclusions

This summer has been a wild ride. These widget represent the ideas which ultimately were good enough to ship. Believe me I tried a lot of whacky ideas along the way…and indeed have many ideas which will be coming out over the next few weeks & months. Interactivity opens a wide range of possibilities and even with this broad a collection of options I feel like I’m still only scratching the surface of what is possible.

Widgetsmith is free on the App Store.

watchOS 10 features a radical redesign throughout all Apple’s apps.

Now that we have transitioned away from the rectangular screen of the original series of Apple Watches, we can fully embrace the edge-to-edge rounded screen of modern displays. This lets apps take full advantage of every millimeter of their small displays.

watchOS 10 Redesign

Today I’m launching an update to Pedometer++ which fully embraces this design. My recent Version 5 major update to Pedometer++ had already started moving in this direction but now that transition is complete.

You’ll first see this new design on the Home Screen of the app, where you are greeted by a rich interface letting you know if you’re on track for the day. The central ring glows as your gain steps and the background completes the look with a subtle corresponding gradient that makes it very clear at a glance how close you are to your goal.

Tapping on the workouts button in the lower right corner will let you start a workout.

Here I have pushed the workout controls into the corners to give maximal visibility to the content. This is particularly helpful on the map screen where you can really use the whole display.

Complications

The complications provided by Pedometer++ have also been overhauled to better fit in with the new watchOS 10 system. While all the previously offered widgets are still available within the app, some are now available in the brand new widget drawer which watchOS 10 emphasizes. By swiping up from the bottom (or scrolling the Digital Crown) on any watch face you can now bring up this new customizable widget view.

This gives you quick access to your current step count in a variety of appearance options, even on watch faces which don’t support complications.

Stand By

While the main focus of the update was watchOS, there are a few little improvements that are arriving alongside iOS 17. Most notably the step counting widgets have been updated to provide a clearer display when in StandBy mode.

When you dock your iPhone in landscape mode you can now choose to display your steps in a large, highly legible display.

More to Come

I hope you enjoy this update, and look forward to more meaningful improvements coming later this fall.

Pedometer++ is free on the App Store.

We’ve just had the announcement of the Apple Vision Pro developer labs. These one day, hands-on experiences will take place around the world over the next few months and allow developers to refine and enhance their apps for visionOS based on real-life usage.

I’ve applied to attend one of these and hope to get the chance to work on Widgetsmith there. While I wait to see if I was selected, I figured I’d put together a list of tips for getting the most out of experiences like this. Over my career I’ve been to several similar things and have learned a few things about maximizing your time.

If I’m fortunate enough to get one of the slots for a visionOS lab I’ll update this article if there are any additional tips I learn from it, but I think most of this advice is pretty universal regardless of the specifics.

Sharpen your tools

Your enemy at a lab like this is running out of time. You’ll only have a set period from when the lab begins to when it ends and expect those deadlines to be firmly enforced. So the last thing you need is for your tools to hold you back. Ensure that your computer is completely ready for this experience.

• The latest toolsets all downloaded and unzipped
• Plenty of hard disk space
• All the necessary files downloaded (while you likely will have internet access, consider if you didn’t what you’d want to have with you)
• If you need additional things to be maximally efficient (notebooks, pencils, etc.) bring them.

Do a trial run in the simulator

I’d recommend doing as much work as possible in the run up to your lab in the simulator. You can get a long way towards your goal there. Ideally you’ve done all the annoying ground work ahead of time so that when you get your hands on the physical device you are working from a solid foundation. There are certainly going to be things you can’t do without real hardware but ideally you’ve done a lot of foundational work already.

This is also a good way to double check your toolset is ready. Ensure you can build-and-run your project for the simulator on the latest Xcode version ahead of time.

Make a list of goals in order

Go into your session with a plan of action. While there is some value in spending a bit of time at the start just exploring the device and familiarizing yourself with it, don’t let your time just slip away by aimlessly poking around. I tend to go into something like this with a list of 3-4 things I want to verify/experience/develop and then work through them in order. This keeps me on track and helps me to be mindful of the short time available.

Expect to get done less than you hope

One of the less than ideal realities of a time limited experience like this is that you will almost certainly finish the experience feeling like you wished it was longer. A day just isn’t all that long to get super stuck in. Also, remember that there will likely be some setup and administration time when you aren’t able to do the work itself, which will eat into your slot.

Avail yourself of the staff, they are there to help

At a lab experience like this there will likely be several members of staff who are in the room with your for the express purpose of helping you; avail yourself of this help. They are there to help you get the most out of your experience. Don’t feel like you are being annoying or wasting their time. If you have a question, or are hitting an issue which you think they could help with. Ask!

Don’t get bogged down

In the course of development it is often possible to run into situations where you are getting stuck on an issue. Maybe an animation just doesn’t fire right, or there is a little glitchy transition between things. Or even something more fundamental like you can’t seem to get a feature to work. Unless that feature is the main purpose of your lab and you are specifically there to solve that problem, consider moving on to the next goal on your list if you get stuck. Otherwise it can be easy to look up several hours later and realize you’ve spent all your time on one issue and the rest of your list will go untouched. You can always come back to a sticky issue at the end of your list if time allows.

Have a plan B in case your ideas are dead ends

This one is a bit awkward, but comes from personal experience. It is possible that you will get into the lab and discover that your idea doesn’t really work well when you see it on device. Some concepts work in the simulator but don’t really translate to the device. In this case the lab is extremely useful in showing you this, but then makes the rest of you time at the lab a bit tricky. Consider having a backup plan of your “next best” idea for the platform in the back of your mind. That way you aren’t just sitting there idling the time away.

Obey the rules; don’t put staff in a a tricky spot

Inevitably at an event like this there are going to be a number of very specific rules you are expected to follow. You likely had to agree to a list of contractual requirements when you signed up and then on the day the staff running the event may have additional guidelines for the session. Obey these rules, and don’t put the staff in the awkward position of having to call you on things. If they say no photos, don’t try to take a photo on the sly. If you aren’t to talk about things, don’t talk about things. Part of how events like this are able to happen at all is that they can be conducted within a constrained, trusted environment. Realize that if rule breaking is a common occurrence they likely won’t be able to happen at all, or you won’t be selected for one in the future.

Consider staying close to the venue

This is a bit more of a logistical tip, but consider staying as close to the venue as possible. Because the events have a firm start and end time if you get stuck in traffic or your train is late, you’ll just be out of luck. My plan (if I get a lab slot) is to stay at a hotel the night before and after as close as I possibly can to the event. The night before so that I can avoid travel delays (ideally it will just be a short walk to the venue). The night after so that I don’t feel rushed afterwards and won’t need to deal with luggage on the day.

Pay attention to permitted items

On the topic of luggage pay attention to any lists of items which are permitted in the event itself. Expect there to be a security process on the day and realize that as a result somethings might not be allowed to be brought into the venue. Similarly to my approach at WWDC I try to consolidate into the essentials for the day while also being thoughtful of comfort items which might be useful. For example, I ensure I have some headache medicine with me to make sure that an ill timed headache doesn’t derail my day. Also, consider if there are accessory computer items which would make you more efficient (for example, an external mouse or AirPods). Also, double check you have all the chargers you’ll need for the day with plugs correct for the country you’ll be attending in.

Good Luck!

It is hard to guess how oversubscribed the labs will be and how difficult it will be to get a slot, but I hope that if you are the kind of developer who has read through a list this long with ideas for how to maximize your time you’ll get one.. Have fun and enjoy the time there. Experiences like this are very special and don’t come around too often.

This morning I again spent some time trying to develop my visionOS design skills. I find the best way for this is to just get started with development and then learn along the way.

Today I decided it would be interesting to work through updating the weather app from Widgetsmith for the Vision Pro.

To start with I just took the code unmodified and saw how it would run.

That’s actually better than I would have feared it would be. There is no background and the Button elements which make up the graph view are weird but overall the structure actually lends itself pretty well here.

So the first thing to do is to give it a glassy background and then move the tab based approach I had before into a lower ornament.

The iOS version didn’t really constrain the width of the display because this isn’t necessary on a smaller screen, but now since the whole world is my canvas I need to let the system know how wide a display is useful.

Next I need to do something about those buttons. Because you can tap on each hour of the day to see a detailed view of what to expect then I have a horizontal array of buttons here. But for visionOS I need to hide them from view, or at least make them less visually loud. I’ll still want to keep the hover/glow effect active but when at rest the view should be simpler.

This now illuminates an issue which I don’t run into on iOS but is a big problem on visionOS. In iOS whenever I want to cut out a hole in a view so that a lower view is masked out I can just fill its background with the background color of the current display mode (white or black). This isn’t actually doing the correct layer masking but since the colors are opaque the result is identical.

On visionOS the background is transparent so this doesn’t work. Instead I need to actually do the correct masking of the view hierarchy. This isn’t too difficult in SwiftUI.

If I use a .blendMode of .destinationOut on my backing view then I get the correct transparent cut outs.

Next is a relatively subtle change, but the secondary labels in the iOS version used the system Color.gray as their tint. This doesn’t look nearly so good on visionOS, so instead I need to swap over to using the Color.secondary.

This gives them a nice semi-translucent look which picks up on the colors of their surroundings.

Next I need to do something about that bottom picker view. It is currently completely translucent which makes it super hard to read. Let’s fix that by giving it a proper glassy background.

This process is then repeated for the Daily weather view.

The radar map view required a bit more help.

It was created for a rectangular screen so it needs to be masked off at the corners to fit better in this new rounded world.

That clips off the timeline bar, so I need to now inset that from the top of the view.

I find the way the timeline capsules are rendered to be a bit hard to see in the ‘dark’ mode of the vision UI so instead let’s make them more solid and clear what is going on.

Much better.

Now for a finishing touch on the bottom ornament. When I originally added it, I had put it into a .toolbar to avoid it being semi-translucent, however this introduced an unnecessary border around the picker. I was posting about this on Mastodon and was super helpfully suggested to instead use .glassBackgroundEffect(in: Capsule()) behind the picker and put it back into an .ornament.

That looks much cleaner.

Overall I’m pretty happy with this UI. It is legible and seems to fit pretty well within the overall visionOS design language.

Owing to a variety of personal commitments I’ve not really been able to get started working like I typically would have by this point in the summer. The period directly after WWDC has often been my most productive, where I return home full of ideas and excitement for the summer ahead. Not so much this year as I’m only now really able to get stuck into work.

Marco and I discussed the feeling I now have of being “behind” on last week’s Under the Radar, if you’re interested in more detail on how to navigate this feeling.

Regardless of where I am in relation to what typically happens each year, today is the start of the period when I expect to get back to regular work and hopefully some good productivity.

Like I’ve said before, I often find it tricky to know where to start after a break in work. My mind is spinning from all the possibilities and unfocused from lack of use. As such my typical “trick” to get started again is to pick a small concrete problem to solve and work on that to warm up.

Today I decided a reasonable task for my mental warm up was to see how Widgetsmith might look in visionOS and then choose a screen to update to better fit in there.

Recompiling Widgetsmith

First off I created a branch of Widgetsmith and then spent about 30 minutes sorting through compiler errors and generally getting the project to run on visionOS. Mostly this was just cleaning up warnings about unavailable methods or restructuring the Project file to adopt a visionOS target.

After this I then was able to run Widgetsmith for the first time on visionOS (which was quite exciting to see).

It isn’t much to look at, but it is progress. The app runs essentially as an iPad app if I don’t do anything to make it properly adopt visionOS.

Of particular interest for today was the situation when I opened the widget editor.

This screen is a disaster on visionOS. Essentially an iPhone window which uses none of the idioms of visionOS. So updating this screen became my project for the morning to warm up for work again.

Updating for visionOS

The first thing I need to do is to move the editor into a full width view.

visionOS tells any app running in it that it is dark mode, so all my controls appear in the darkened state. This looks good on iOS but on visionOS it is stark and very out of place.

Let’s start off my removing some of the separators and generally flatten down the UI.

Next let’s see what we can do about that horizontal chooser in the middle. My general sense is that adopting the “Glassy” material approach is best on visionOS, so the first thing I tried was to change my horizontal selector to instead now use that.

This looks better but still is a bit weird and lacks a sense of “place” in the UI. Next I try switching this from a custom horizontal picker to using a standard system picker view. This then gains a nice inset shading and rounded appearance.

Much better, but now I’m seeing how the vertical layout is very inefficient. visionOS windows are nearly always in a landscape orientation, with a roughly 4:3 ratio. As such my UI needs to be more thoughtful about how it uses vertical space to avoid the user having to scroll to see content.

From my brief experience with the visionOS hardware at WWDC I’d say that scrolling was the least natural gesture I tried. It requires the largest physical hand movement and as such was more awkward than the gestures which can be done with your hand resting in your lap.

So the next thing I wanted to do was to see how much of the main window content I could remove as possible to maximize the usable space in the window. So I tried moving the picker into an ornament at the bottom of the window.

I like the general feel of this. It operates like a tab bar would but by using a segmented control I feel like can more logically show how each selection is related to the same top widget view (rather than an actual tab view which would imply separate operations in each tab).

Now to remove all the custom row coloring and make the app a bit more ‘native’ in its appearance.

That’s better, but what to do about the section separators? I want there to be a clear, logical separation of the widget categories but don’t want something big and heavy here.

Typically when I face something like this I’d go look at Apple’s own apps or the HIG to get a sense of the best practice. The simulator doesn’t have a full app experience, but all the same I could find an example of a similar UI goal in the Settings app.

The general approach seems to be to put the section headers into the base material, and then distinguish the content with an alternate material inset.

Next I want to tackle the scrolling problem again with the main contents of the view. A single row for each option seems very wasteful with my vertical space. Instead, let’s switch over to a 3-wide grid of elements.

Something I noticed when using the headset at WWDC was how because you navigate by looking at what you want to select (rather than say mousing over to it on a Mac) this kind of UI felt really efficient. I don’t need to ‘steer’ a cursor to what I want to select, I just look at it.

Now I need to do something about the index buttons along the right hand side. These let you easily jump to different categories of widgets. On iOS they fit well next to the main list, but here that feels unnecessarily constraining, and leads to some awkward layout concerns if I want to make them big enough to adopt the tap target goals of the platform.

So again let’s try to solve this by using an ornament.

That’s actually looking pretty reasonable. I’m not totally convinced by the double ornament approach but conceptually I like it.

Next I need to hookup the hover effects on the main selection buttons so that they shimmer when you look at them. This is as easy as adding a .hoverEffect() to the relevant view and setting its contentShape.

This is then repeated for the category chooser.

Next I need to do something to make the selected item stand out in the list. For now I’m going to go with a thin border and different material background. I’m not very sure about this one, but for now it works and feels generally “native” for visionOS.

Lastly I need to add a bit of visual separation between the preview at the top and the ‘active’ portion below. They are visually quite similar but logically very different, so I don’t want to create confusion between them.

There we go, not bad for a first attempt.

I don’t really think this is a “good” design yet. It will take a ton of time to with the platform to really have a good sense of that, but it is a solid starting point and having gone through the exercise of creating it I feel much more comfortable on visionOS generally. It will likely take creating dozens of “bad” designs on the platform before I can develop an intuition for what a “good” one is.

Furthermore, it will take months of working on the platform and then (hopefully) using the device in practice to really understand it. However, starting now with the simulator and documentation should hopefully give me a good head start for when those opportunities may come later this year.