PaintCode News

Telekinesis Beta

Telekinesis allows you to change the design of your app in PaintCode, while the app is running on a real device.

Try Telekinesis

To try Telekinesis you need to:

  1. Launch the Telekinesis Demo Project “Telekinesis Example.xcodeproj” either on simulator or on a physical device. Your Mac and the device have to be connected to the same network.
  2. Open the PaintCode document (“Example.pcvd”, enclosed in the project) in PaintCode 2.4 Beta.
  3. Click on the Telekinesis icon in the toolbar and you should see your device(s):Your DevicesYour Devices
  4. Click “Connect” button to establish a link between your device(s) and PaintCode. When the connection is established, Telekinesis icon will change to green:Toolbar icon when Telekinesis is connectedToolbar icon when Telekinesis is connected
  5. Now when you try to change any property of “Shape” in canvas “Star” you should see changes in your app running on the device or simulator. Change anything in the document and enjoy!

Why “Telekinesis”?

telekinesis |ˌteləkiˈnēsis|
noun
the supposed ability to move objects at a distance by mental power or other nonphysical means.

How it works?

To make Telekinesis work, you have to:

Telekinesis works by exchanging the implementation of StyleKit for a new one while the app is running.

Telekinesis is meant to be used only during development; you should not include the Telekinesis.framework in your app's release builds. Telekinesis is currently only available for iOS and Objective-C projects.

Download the Telekinesis and PaintCode 2.4 Beta


How to integrate Telekinesis into your app

You need to have a working Xcode project of an app that uses PaintCode StyleKit to draw the UI:

  1. Add Telekinesis.framework to the Xcode project. Make sure that the Add to target checkbox is turned on. (Select File > Add Files to "<name of your project>")Add Framework to your projectAdd Framework to your project
  2. Select the Telekinesis.framework in the Project navigator (Panel on the left) Select the Telekinesis frameworkSelect the Telekinesis framework
  3. Remove the framework from each target in the File Inspector (Panel on the right). Remove the framework from each targetRemove the framework from each target Removing the framework from the target just after adding it might seem odd. But if you add the file with target checkbox turned on (step 1), Xcode automatically sets an important build setting for you. On the other hand it is better to remove the membership (step 3) so that the framework is not used in the release build.
  4. Add
    -ObjC -framework Telekinesis 
    to Other Linker Flags under Debug configuration. This will ensure you won’t bundle the framework to the App Store builds.Link Framework in DebugLink Framework in Debug
  5. Launch your app and you should see a message in console:
    PaintCode Telekinesis is running...
    
  6. Open your StyleKit in PaintCode 2.4, click on the Telekinesis icon in the toolbar and you should see your device(s):Your DevicesYour Devices
  7. Click “Connect” button to establish a link between your device(s) and PaintCode. When the connection is established, Telekinesis icon will change to green:Toolbar icon when Telekinesis is connectedToolbar icon when Telekinesis is connected
  8. Now you should see changes in your app, when you try to change any property of any shape in any canvas used in your app. Change anything in the document and enjoy!
  9. To perform custom updates on StyleKit change, import Telekinesis and observe TelekinesisDidChangeStyleKitNotification. Make sure this code is compiled only on Debug configuration:
    #if DEBUG
        #import <Telekinesis/Telekinesis.h>
    #endif
    

Technical details

Troubleshooting

Problem: Compilation failed with this error:

Undefined symbols for architecture armv7:
  "_TelekinesisDidChangeStyleKitNotification", referenced from: ...

Solution: The framework is not being linked. If you are building Debug configuration, add this to Other Linker Flags:

 -ObjC -framework Telekinesis
 

If you are building Release configuration, use #if DEBUG on lines which use TelekinesisDidChangeStyleKitNotification.

Problem: Compilation yields this warning:

Auto-Linking supplied '.../Telekinesis.framework/Telekinesis', framework linker
option at .../Telekinesis.framework/Telekinesis is not a dylib

Solution: No idea what that means, but just add #if DEBUG ... #endif around Telekinesis import statement.

Problem: You connect PaintCode to your app, but the framework prints this:

Telekinesis: This application doesn’t have a StyleKit class with name ...

Solution: StyleKit name in your PaintCode document (.pcvd) and in your app must match.

Problem: Your device didn’t appear in PaintCode.

Solution: Make sure your Mac and iOS device are on the same WiFi network. If it still doesn't work after that, it is a network issue, in which case, wait for the next full moon, bring candles, and a lamb…


Animating Apple Watch Activity Rings in PaintCode

This video demonstrates how to draw the Apple Watch activity rings in PaintCode. With variables, it is even easy to make the activity rings parametric. Download PaintCode document.


PaintCode 2.3 adds 15+ new features, including SVG export

We are very pleased to announce PaintCode 2.3 - with over 15 new features, this is one of the biggest updates we've ever released.

The new version is available immediately as a free update to all of our existing PaintCode 2 customers.


Try PaintCode for Free
Buy Now

What's New?

1. SVG code generation

2. PDF, AI and EPS import

3. Completely rebuilt image export

Completely redone export

4. Animated sequence export

You can now export animated sequences - multiple PNGs or a GIF file - directly from PaintCode. Great for Apple Watch animations!

Example Animation

Just make your canvas parametric using a variable, then choose the minimal and maximal value of that variable and other settings in the new export UI.

Animated Sequence Export

5. Copy & paste support from Sketch, Illustrator, Pages

6. Live shape thumbnails in the Shapes & Groups browser

Thumbnails

7. New multithreaded renderer

We've rewritten our canvas renderer from the ground up. The new multi-threaded rendering engine is considerably faster when working with large and complicated canvases.

8. Support for cut, copy & paste of entire canvases

9. Support for canvas multi-selection

You can now select multiple canvases at once and change their properties (such as their size and export settings) en masse.

10. New way to find out where your library items are used

To learn where a particular library item (such as color) is being used in your document, pick the "Show Usage" option from the contextual menu.

Show Usage

11. New, easy way to replace one library item with another

Sometimes, you want to replace one color with another one in your entire document. Just pick the right replacement from the contextual menu. This works for all library items - colors, gradients, shadows, images and variables.

Replace Library Item

12. Replace Symbol with its content

It is now possible to "unpack" a symbol. You can easily replace the symbol by its content using the contextual menu.

Replace Symbol With Its Content

13. Improved PSD and SVG import

PaintCode now automatically detects common shapes such as ovals, rounded rectangles, regular polygons and stars and imports them as these shapes instead of beziers.

14. Canvas Arrangement

To arrange multiple canvases in a grid, column or a row, simply select then and use the contextual menu.

Canvas Arrangement

15. Built-in feedback form

We've built in a convenient feedback form directly into PaintCode, so that you can easily send us bug reports, suggestions and tips for improvement.

Built-in Feedback form
Try PaintCode for Free
Buy Now

PaintCode 2.2 - Introducing Smart Symbols

PaintCode 2.2 introduces Smart Symbols, a great feature for prototyping entire user interfaces. Symbols allow you to reuse your drawings across a document.

Symbols can be nested, and you can even make them parametric and resizable, which means that PaintCode has the best support for symbols of any drawing app on Mac.

Symbols Tutorial

We’ve put together a short video tutorial that shows you how to use Symbols.


Draw something on a canvas

Anything you want to reuse many times across your document. An icon, button, slider or other UI control.

Reuse your drawing as a Symbol

Canvases can be easily reused on other canvases as Symbols. They are kept in sync with the original canvas. To learn more, read our documentation.

Symbols are resizable and parametric

Use Dynamic Shapes to make your Symbols resizable. You can even make them parametric with Variables & Expressions.

Free Update!

PaintCode 2.2 is available immediately on the Mac App Store and our own Store. Aside from Symbols, PaintCode 2.2 brings:

To explore other new features of PaintCode 2, visit PaintCodeApp.com



The Ultimate Guide To iPhone Resolutions


320 × 568 375 × 667 1125 × 2001 4.7″ 5.5″ The device screen may have lower pixel resolution than the image rendered in previous step. Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only make sense in this mathematical coordinate space. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail. Rendered Pixels Finally, computed pixels are displayed on the physical screen. The PPI number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world. Physical Device 750 × 1334 iPhone 6 iPhone 6 Plus 4.7″ 5.5″ points. render at 3× render at 2× Display Zoom Display Zoom (device pixels) 414 × 736 1242 × 2208 1080 × 1920 5.5″ show at 401 PPI (pixels) (points) (device pixels) iPhone 6 Plus 5.5″ render at 3× 375 × 667 750 × 1334 4.7″ iPhone 6 render at 2× 1080 × 1920 (device pixels) 320 × 568 640×1136 iPhone 5, 5s render at 2× 4″ 4″ 320 × 480 640 × 960 3.5″ render at 2× (pixels) iPhone 4, 4s 3.5″ 320 × 480 3.5″ render at 1× (pixels) iPhone 2G, 3G, 3GS 3.5″ (points) (points) (points) (points) (points) (points) downsampling × 0.96 downsampling / 1.15 (pixels) (pixels) (pixels) 320 × 480 show at 401 PPI show at 326 PPI show at 326 PPI show at 326 PPI show at 326 PPI show at 163 PPI 4.7″ 640×1136 (pixels) upsampling × 1.171875

With PaintCode, you can make your apps truly resolution-independent.


iPhone 6 Screens Demystified

Update: Read our new Ultimate Guide To iPhone Resolutions!

The Ultimate Guide To iPhone Resolutions

Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this.

320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the screen, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only make sense in this mathematical coordinate space. In the original iPhone, points corresponded perfectly to actual pixels on screen, but this is no longer true. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail. Typical scale factors are 1×, 2× and 3×. Rendered Pixels The last step is to show the computed pixels on the physical screen. Every screen has pixels-per-inch (PPI) characteristic. This number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world. Physical Device render at 1× downsampling / 1.15 show on device show on device show on device (pixels) (pixels) (pixels) (points) (device pixels) (points) (points) Original iPhone iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ 163 PPI 326 PPI 401 PPI points. render at 3× render at 2×
a iPhone 6 Plus downsamples the rendered image before displaying it on screen. Physical Pixels The content is defined mathematically using point coordinates. Points Content is rendered to pixels using scale factor. This process is called rasterization. Rendered Pixels Rasterized drawings are displayed on the physical devices. Physical Device render 2× downsampling / 1.15 show on device show on device show on device Original iPhone iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ render 3× render 1× a a

Line rendering

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.


23 pixels 20 pixels Original iPhone 3.5″ iPhone 5 4″ iPhone 6 Plus 5.5″ Hypothetical Perfect 3× Display ???

With PaintCode, you can make your apps truly resolution-independent.

Try PaintCode for Free

PaintCode 2.1 with Swift support is here!

After Apple introduced Swift at WWDC, it became clear that this is the future of Apple software development. We started to work on Swift code generation for PaintCode immediately.

Today, we're very excited to finally make PaintCode 2.1 available. Here is a video of PaintCode 2.1 running the Swift code generator:


Our experience with Swift has been very positive so far - congratulations to Chris Lattner and his entire development team for this great work!

PaintCode with Swift!

In addition to Swift code generation, PaintCode 2.1 also adds parametric colors, gradients, shadows and images. This means that you can now, for example, configure PaintCode color to behave as a method parameter in the generated code.

This allows you to easily change the color (and other style characteristics) of your PaintCode drawings at runtime.

Parametric Colors in PaintCode

PaintCode 2.1 is a free update, available immediately on the Mac App Store and our own Store.

Try PaintCode for Free

To learn more about PaintCode 2, visit our website. We have prepared video tutorials that show PaintCode 2 in action. To catch all PaintCode-related news, follow us on Twitter and Facebook.


Interview with Christian Dangl, developer of m.phase

Christian, tell us something about you and your company

My name is Christian Dangl. I'm a mobile developer with a specialism in iOS and Windows development. We're a small team of developers with a wide range of skills. We always aim to get the maximum from our apps for our clients, as well as for our own products. We love to develop specialized apps with more complex architecture, and try to avoid yet another ToDo app. I'd say that yes, I'm addicted to coding, and I try to combine that with my passion for music and sports.

PaintCode has supported us not only as a company, but also as individuals in developing an even better experience in nearly all our apps.

m.phase

You just released m.phase app for iPad. What is the purpose of m.phase, and what was the idea behind it?

Yes, we released m.phase DAW Remote and also m.phase DAW Remote Lite, which is available for free on the App Store.

m.phase is all about giving musicians and sound engineers a new and unique experience of controlling a DAW (Digital Audio Workstation) using gestures.

m.phase is all about giving musicians and sound engineers a new and unique experience of controlling a DAW (Digital Audio Workstation) using gestures. We set out to create a product that gives users the opportunity to focus more on the actual sound or video being edited, rather than concentrating on working with small knobs and faders. All controllers are basically the same, so we wanted to be and think differently... I guess we all know that special phrase...

What can you do with these gestures?

With the gestures of m.phase, you can easily change volume, pan, mute/solo, use transport controls and much more... all without having to touch a specific control on your screen. Besides the ability to operate it without looking, you can also use multiple gestures simultaneously in an even easier way than before. For example, changing volume and pan of 2 channels at the same time.

The only thing remaining was to create a user interface that would match our idea. That's where PaintCode helped us to implement an awesome user interface - in an incredible amount of time.

You used PaintCode a lot when developing m.phase - can you tell us more about it?

When we started to think about designing m.phase, Andreas Huber and I were kind of lost at the beginning. All our team members had their own visions - about abstract controls and how they could look.  But no one could have really imagined how to develop such a user experience, while retaining the main focus on programming our core engine…because that's what we wanted to end up with…good core functionality!

PaintCode worked so well and so fast that we literally made a sport out of it. We used it for every control, icon and other graphical concept in our app.

We asked our designer Raimund Schumacher to assist with the UX. As soon as he had presented the first design proposal, we immediately thought about proceeding with PaintCode. I was already familiar with this software from earlier projects, but I never thought I would ever build a complete application out of it.

We started by creating the main element (Volume Sphere), and we were almost shocked how similar it looked to the original design. After creating the control, we split it into sub-parts and easily combined them in our source code, where it was brought to life by adding animations and effects. We then gave it a finishing touch by creating different shadows.

m.phase

We adjusted, replaced, and thoroughly checked them until we were completely satisfied.  PaintCode worked so well and so fast that we literally made a sport out of it.  We used it for every control, icon and other graphical concept in our app.

After finishing the main application, we added the option to set custom colors for the channels.  Because we use Basic Colors and Derived Colors, it was a simple change and everything worked within a short period of time.

We ended up with a 2.5 MB file size of our application. The sheer size of the app speaks for itself.

m.phase

m.phase is not your first app. Could you tell us a bit about your other apps?

Yes, besides m.phase there have been a few other apps that we're proud of. Almost every app has had some kind of makeover in the last year.

“Sumit & be fast” is a fun game for kids and adults that helps to improve mental arithmetic, and since Version 2.0 is also based on PaintCode drawings.

www.app.lk/BGS

“Live Score” is a professional sports team software, which helps teams to create digital scoreboards for TV broadcasts, live streams, websites and other platforms. The iOS Remote apps allow scorers to simultaneously publish the game's progress on all platforms. The available Web Widgets for the team websites were made with WebCode by PixelCut.

www.live-score-app.com

Besides developing software, we also have our own lighting hardware solution, “m.pulse smart lighting”,  which can be built into homes, lamps or used at certain events. The iOS app was created without PaintCode. Had we used it, we would have also saved quite a lot of time developing that software.

“A's Baseball” has been developed for the professional baseball team “Attnang-Puchheim Athletics” over the last couple of years, and has now grown into something I would call “MLBs little brother”. It gives you intense insights into games and standings, with special game day features, push notifications, and way more.

www.as-baseball.com

Thanks for the interview!


Introducing PaintCode 2

Two years ago, we launched the first version of PaintCode because we desperately needed something like it. And as it turned out, we weren't alone.

PaintCode has quickly become one of the most popular developer tools on Mac - adopted by industry giants such as Apple, Disney Pixar, Evernote, Hewlett Packard, Qualcomm and many others.

We remember reading Wil Shipley's blog for many years, dreaming about becoming Mac developers one day. You can imagine our reaction when we received an email from Wil, a legend of our industry, shortly after we had launched PaintCode. The subject of the e-mail was: "PaintCode looks genius".

We are incredibly thankful to all our customers for making our dreams come true.

PaintCode 2

Today, we are proud to introduce PaintCode 2. We have been working on it non-stop for over a year, and we're really excited to be finally showing it to you.

Our goals for PaintCode 2

  1. Super simple integration of the generated code into your projects.
    (with StyleKits)
  2. Ability to easily create parametric drawings.
    (with Variables & Expressions)
  3. Much better drawing tools.

We've made PaintCode 2... using PaintCode 2

Aside from the app icon, PaintCode does not use any image resources. We could test countless variations of our new UI in a very short time. It's hard to imagine doing what we have done without PaintCode 2. We really look forward to what you'll achieve with it.

Pricing and Availability

PaintCode 2 is available for purchase. You can still buy it from the Mac App Store, and we've also added the option to buy directly from us, including volume purchase options.

Buy Now

If you bought the previous version of PaintCode (1.3.3) after 01 April 2014, please contact us at support@pixelcut.com and we'll give you a free license for PaintCode 2.

To try PaintCode 2, download the demo version.

To learn more about PaintCode 2, visit our website. We have prepared video tutorials that show PaintCode 2 in action. Want to catch all PaintCode-related news? Follow us on Twitter and Facebook.

We hope that you'll like PaintCode 2 as much as we do!

— Peter, Mike & Matt


Interview: Peter Rapp, creator of Lightbow

Peter Rapp, the creator of Lightbow, uses PaintCode to draw beautiful dynamic light bulbs. He was kind enough to let us include an interactive example1 in this interview, so you can play with it, too:

Continue reading


Drawing Code for iOS 7 Rounded Rectangles

Short story: We’ve decided to open source some Objective-C categories for drawing the new iOS 7 rounded rectangles. Code download below!

Long story: In iOS 7, Apple introduced a slightly different icon shape - it is no longer a simple rectangle with circular arcs in corners. The old design produced a subtle but noticeable “hump” in places where arc touches some of the straight lines. The new iOS 7 icon shape looks more “organic” and eliminates this effect.

Continue reading


Interview: Fahad Gilani, lead developer of 2Do

2Do Mac

Tell us a bit about yourself, your apps and your work.

I'm the lead developer and operations manager at Guided Ways Technologies Ltd. We've been making mobile apps long before they were called 'apps'. Most notably, we're the developers of 2Do, which is available on iOS, Mac and Android.

Continue reading


Using PaintCode in production: Interview with Jon Beebe, developer of ProCutX

When Pixel Film Studios released ProCutX earlier this year, the app got a lot of much-deserved attention. ProCutX lets you control Final Cut Pro X using your iPad. We interviewed Jon Beebe (@bejonbee), the developer of ProCutX.

Tell us a bit about yourself and your work.

My name is Jon Beebe, I’m an iOS & front-end web developer. From a user’s perspective I remove worry from their lives and replace it with hope. From a technical perspective I bring business ideas to life on real devices, through code.

Continue reading