The Doodling Workshop #3
Having a self-coded app on the iPad Pro for doodling and handwritten text recognition is great! But wouldn’t it be more awesome to put everything in a playground and share this fun with your friends and fans? Definitely yes! :)
This last session wants to accomplish exactly this: doodling support for your Apple Pencil and handwritten text recognition in your own playground!
if (you want to know how to put app content into a playground 🎈) {
//go on reading :)
break
} else if (you want to learn how doodling works ✏️) {
//have a look at the first part of the series first
https://medium.com/@codeprincess/the-doodling-workshop-1-ae955e351f7b
} else if (you want to learn how handwritten recognition works ✍️) {
https://medium.com/@codeprincess/the-doodling-workshop-2-9c763c21c92b
} else {
//have a great day and bye! ☀️👋
}A little bit of background theory ☀️😎
Basically a playground is like a light weighted app. There is no AppDelegate and therefore no RootViewController because you don’t code a ViewController itself. What’s there then that the playground can run your code? It’s a implicit REPL application in combination with a built in simulator.
The REPL (Read, Eval, Print — repeat!) concept is everything else than new and was used in the old days as it used nowadays for different learning- and quick prototyping systems. Swift Playgrounds is the most recent system using REPL, but services like https://repl.it/ are around for a bit longer and support various programming languages.
As already mentioned before you don’t have the standard skeleton of an iOS app around a playground. It’s basically just one unnamed class. The code in there is constantly read, evaluated and then “printed”. The printing is done literally in the log window and with the execution of the code in the embedded simulator.
To be able to structure your code neatly for better readability and maintenance a playground can consist of different pages. Moreover not all the code needs to be located in the playground file. You can create your own classes as you are used to and pack it into the Source folder in the playground so you can reference them from within the playground like any other class.
Keep in mind: just the code you place directly into the playground page will be modifiable for your iPad Swift Playground users. As soon as you put the code into a separate file and save it in the Source folder, it can be read but not modified on the iPad.
In terms of teaching make sure to put everything important for a specific lesson into the very playground page’s file.
Squeeze the app into the playground 🎈🎊
Let’s get started! We will create three different playground pages as we want to deliver a step by step manual for our later users.
- The first page will just be a basic doodling implementation
- The second one will contain a smooth doodling experience
- And the third will deal with the ability to recognise your handwriting and show the text right in place on your drawing canvas
The basic doodling implementation ✏️
Let’s create a new playground page by right clicking the playground main entry in the left navigator panel in Xcode. And as we are doing this, just create two more pages. We need them later on.
Then select the first created page — I called mine “Get Started” — and go find the code from the very first session of this workshop into the playground. We need to copy the content of the MyDoodleCanvas.swift. The whole class definition. So now the playground nows how to doodle, but the timeline within the Assistant Editor doesn’t show anything. Why? Because we didn’t tell the playground what it shall display. It now just nows the implementation of a class named MyDoodleCanvas.
So make sure, you add the following lines to your playground after the class implementation. It creates an instance of the class and attaches it to the live view of the current playground page. Very important :) As soon as you did this wait a moment until the playground is compiled and run again. Then it should immediately gets displayed in your Assistent Editor. Yey!
If anything went wrong just have a look at the final implementation here: https://github.com/codePrincess/playgrounds/blob/master/GreatStuffWithThePencil.playground/Pages/Get%20Started.xcplaygroundpage/Contents.swift
Do the coalesced touchy dance! 👉👇👈👆
In our second playground we add just a bit of code for making our doodling smoother and not that edgy when drawing circles and arcs.
So open the second playground page — I called it “Smooth Doodeling” — and add the same code as in the previous playground page to it. And right afterwards replace the touchesMoved function with the following content
Now you be able to draw way smoother in your second playground canvas. Wonderful!
Why the separation and not put the smooth doodling in there right away? Playgrounds — at least for me, and some people will agree on this — is for exploring and learning. So to give your users or “students” a easy to understand learning path you have to make your key points quite clear. In this very case it’s important to understand why the drawing is not smoothened in the first place. Which is again important to understand how the drawing “engine” under the hood works and which touches are when generated and delivered.
Handwriting… What did you say — eeeh write? ✍️
The best always comes at the end. Now we want to add the whole functionality around handwritten text recognition to the playground. Actually you can throw all REST API related calling code into the playground as well. It would work.
But keep in mind, that all code in the playground page will be compiled and executed with each run loop cycle. And you run loop get’s called a lot! So just put code into the page which the user needs to see in this very moment. If you have a too big load for compile&execution in your page your executed app within the simulator will get unresponsive, hangs or just crashes.
That’s why we put the whole networking REST API related code in a separate class as well as the drawing code. Now we have a CognitiveServices.swift file for all the network related logic and a MyDoodleCanvas.swift for the doodling canvas itself — which is exactly the class we added to our playground page before + the new handwritten text recognition stuff.
So our last playground page is rather empty in terms of lines of code.
The rest is packed into the MyDoodlingCanvas.swift and CognitiveServices.swift and it’s the very same code as you already had running in the second session of this workshop.
If anything went wrong 😩
Just in case you missed anything — here you can find the whole playground’s source code to get kick started: https://github.com/codePrincess/playgrounds/tree/master/GreatStuffWithThePencil.playground
YES — You did it!
Congratulations! You just packed an iOS app in a Swift Playground which can be easily executed 1:1 in your iPad’s Swift Playground app. No changes on the source code needed. Just airdrop the playgrounds file over to your iPad and choose to open it in the Playgrounds app. And you are good to go :)
Have fun and never stop coding! 🤘
