Adding images on swift playgrounds for ipad
Now switch back to the Playgrounds project and delete all the code related to Text. And, then start writing the code to overlay the two images like this:
To display an image using SwiftUI, you use an Image view. It’s a bit tricky to import the image into the Playgrounds project. Instead of loading the image using the filename, we initialize it with uiimage. Once you type the code above, you should see the image icon on the software keyboard.
Swift Playgrounds will then import the image into the project. And, you should see that UIImage is now replaced with a thumbnail of the selected image. Continue to type the following code to add some modifiers and overlay the second image over the first one:
In SwiftUI, you use a ZStack to overlay one image on top of the other. The resizable and scaleToFill modifiers are used to resize the image to fit the preview pane. If you run the code, you will only see the second image. The first image is actually there but just covered by the second one.
Building the demo app
As mentioned earlier, we would create a simple app that demonstrates the effect of blend modes. First, we need to prepare two images. In fact, any images would work but I’d recommend you to download the following images and save them to your photo album.
Create swift playgrounds content for ipad and mac — wwdc20 — videos — apple developer
Download
Hello and welcome to WWDC. Hi everyone and welcome to WWDC. My name is Lizzy and I’m excited to talk about how to create awesome content for Swift Playgrounds on iPad and Mac. We all know Swift Playgrounds as the app that brought Swift coding to iPad, and now, but with Mac Catalyst, the same app is available on Mac too. Your users will get the same experience they’ve come to know and love on their iPads now customized for the Mac platform. In this session we’d like to share some of the ways that you can customize your content, so it’s a great experience on both platforms. After that we’ll show a demo of a book that behaves differently on Mac and iPad. First let’s discuss some updates in the Swift Playgrounds user interface. There are a few key parts of the Swift Playgrounds app that have been adapted to better fit the Mac platform. One of these areas is code completion.
On iPad you’ll recognize this as the area where you can browse code completion options for your current state. On Mac there’s a new expandable area for code completion that can include quick help for each token. These descriptions can be localized which creates a better code completion experience for users in different languages. To add quick help to your token use three forward slashes directly above your declaration. You can also add descriptions to parameters. Here we added a description to the changeTurtleEyes function. You’ll see this turtle again later on in our demo and in this once Quest series.
This text will now appear below your token in the expanded code completion view.
Even if your users won’t be on a Mac these descriptions will still be displayed on iPad as well, in the quick help popovers in the sauce editor and over the original code completion bar. Next let’s talk about how your content can be adapted to each platform. There are two new optional keys in the playground book document format, supportedDevices and requiredCapabilities. You can use these keys to specify what your book requires from the device to run. If the current device doesn’t support a book it won’t show up in the feed to specify that your document only runs on Mac or iPad, you can use the supportedDevices key. The valid values for this are «iPad» and «Mac». We’ll need to add this key to the book level manifest and to the feed JSON file. For example if your book supports both platforms you’ll want to add iPad and Mac with the supportedDevices key in the book level manifest.
Then add the same values to the supportedDevices key in the feed JSON file as well. This book is now available on both platforms. If Mac is removed from the supportedDevices keys then it will no longer be available on that platform. Instead of only supporting a particular device we can require specific capabilities which can make your content available to more users. The values for the required capabilities key can be anything from the UIRequiredDeviceCapabilities keys available to look at on ipad-mobile.ru. This includes things like ARKit, microphone and Wi-Fi which you can use to specify what your book requires. To use this key add RequiredCapabilities and an array of each capability to the book level manifest.
Then add requiredCapabilities and the same array to the feed JSON file as well. In this example the book requires use of a microphone and ARKit. In general it’s best to support as many configurations as possible even if some functionality is different between platforms. To do this we can determine if the playground is being compiled for Mac or for iPad by checking the target environment. It’s a good idea to go through the language in your book to make sure it makes sense for both platforms. Some things to look out for are uses of click or touch. Generic language like tap or select is recommended instead. Next let’s talk about how content can conform to device settings. When building content, it’s important to respect the device system settings such as accent color and dark mood. System provided colors like label or assist in background will automatically respond correctly to changes in dark mode and system accent. You can also add your own adaptive colors, by adding them to the books asset catalog. It’s important to be aware of the live view safe area constraints when developing cross-platform content. These constraints ensure that your content won’t be hidden by any controls over the live view. The constraints are different on Mac since there are toolbar buttons over the top right of the Mac live view. You may have code that uses the liveViewSafeAreaGuide property of a playground live view safe area container.
Now you can just access the safe area using a standard UI layout guide. Next I’d like to introduce my teammate Grace who will be showing you a demo. Thanks Lizzy. My name is Grace and I’ll be walking through a demo of a playground that we’ve customized to work on both iPad and Mac. I’ll open this playground in the Mac app first. You may recognize this turtle from the Swans Quest series. Pretty cute right. The goal of this book is to customize the look of your character. Once you’ve done that you can save it as an image and use it in the Swans Quest book. The prose here says to try starting with change turtle skin. I’ll start by typing that. And code completion shows me quick help for lots of different customization methods. Let’s look at how that’s implemented. The customization methods are in my turtle edits file. The text here preceded by three forward slashes is what I see in the code completion area for this method. I think this is a little vague so let’s change this to «change the turtle’s skin color to the color provided». And once we go back to our main page. That’s the text that shows up in the code completion area. So let’s add some customization and see what happens. I’ll run my code.
All right. This is a pretty good looking turtle. I can use the UIColor popovers to quickly change up some of the colors. I think I want the lighter area of the shell to be more of a yellow. I’ll run my code again. Perfect. I’ll go ahead and save this image. Notice the use and prose of tap not click to use in other books. I also see in the prose, it looks like we can play with AR for on an iPad that supports it. I just so happened to have an iPad with me so I want to check that out. Here’s my same document on iPad.
I’ve got dark mode on so let’s make sure it still looks good. OK, hmm, when I run my code I have a pretty garish white background. That’s because I set the background color of my drawing to UIColor.white instead of using a system background. Let’s try fixing that and run again. OK awesome. So now the background matches my theme and if I switch to light mode it’ll be white again. I also noticed a new button here. That’s because of my color Grid view controller. I have a target environment check. If I’m not running on macOS then show this button. Since Mac doesn’t have the required ARKit capabilities, I won’t show it there. All right. So if I tap this button I can check out this turtle In AR. There’s lots of ways to create great content that works on both iPad and Mac. When you’re creating or updating your Swift Playground’s content, keeps these things in mind. Check out the UI on both iPad and Mac. You can take advantage of the updated code completion design on Mac by providing quick help in your content.
Use #if target environment checks to create different experiences on iPad and Mac. If you’re content requires things like a AR or the microphone, specify these as required capabilities. If you can only support one device use the supportedDevices key. Lastly respect the platform settings like dark mode, system colors and layout guidelines. And be sure to pay attention to the accessibility experience on all devices that you support. You can download our sample content along with this video and reference the playground documentation online. Also make sure to check out the Swans quest. You don’t want to miss it. Thanks for watching
and have a great rest of your WWDC.
Error handling and print to console
There are a couple of things that are worth to mention about coding on iPad:
- How does Swift Playgrounds handle coding errors?
- Where is the console message?
When a compilation error is detected, Swift Playgrounds indicates the line of code with a red dot. Tapping the red dot will give you some more information about the error. In some cases, it even suggests the possible fix, similar to that on Xcode. To reveal all the issues in the Playgrounds file, you can also tap the red dot at the top-right corner.
It’s very common to use the print() function to output the value for debugging purpose. In Xcode, the message appears in the console. So, how about Swift Playgrounds for iPad? Where is the console?
There is no console for Swift Playgrounds. But you can still reveal the output by using a built-in viewer. If you want to give it a try, open the SharedCode.swift file and run the code. There is a print statement in the next() function.
While running the app, you should see a counter at the end of the print statement. Tap the counter and then you’ll see the output value. Optionally, you can choose the Add viewer option to place a viewer right below the print statement.
Since Swift Playgrounds is designed for educational purpose, sometimes you don’t even need to use the print function to reveal the value of a variable. Say, if you don’t understand what Self.allCases means, you can tap the counter and find out what’s in allCases.
The demo app
First, what are we going to build? It’s a very simple demo that showcases some of the blend modes. We will overlay two images together and apply different blend modes to see the effect. If you’ve used Photoshop or other photo editing apps before, blend modes shouldn’t be new to you. By blending two layers together, you can easily create some amazing image effects.
SwiftUI provides built-in support for various blend modes such as hardlight, multiply, darken, and saturation. The demo app will showcase some of them.
Writing swiftui apps using swift playgrounds
Assuming you’ve installed Swift Playgrounds on your iPad, let’s start by creating a blank project to try out SwiftUI. If you haven’t installed Swift Playgrounds for iPad, please first download and install it from here.
Note: Though all these procedures are written for iPad, most of them apply to Swift Playgrounds for Mac.
Once you open Swift Playgrounds, it provides you with various lessons and templates. We will start with the Blank template (under the Starting Points section).
After you install the template, the app creates a blank project for you with the default name “My Playground” (or something like that). Tap to open the project and you will see a blank editor. Simply tap the screen to start coding and type the following code:
Thanks for Paul for the tip. The trick to run and preview SwiftUI is to import the PlaygroundSupport module and write the last line of code. This allows you to set the live view and show the visual results of running the code on the playground page.
Applying blend modes
SwiftUI provides a modifier called blendMode to control how these two images are blended with each other. Let’s do a quick test and you will understand what this means.
Insert the blendMode modifier for the second image and then hit Run My Code to see the effect:
