

Vector based UI design tool that generates ObjC - aggarwalachal
http://www.paintcodeapp.com/
PaintCode is a simple vector drawing app that instantly generates resolution-independent Objective-C drawing code for both Mac OS X and iOS.<p>You no longer have to tweak and recompile your drawing code over and over again to achieve the desired result.
======
basil
Really cool. This reminds me of Bret Victor's talk where he stresses the
importance of seeing the effect of your code immediately
(<http://vimeo.com/36579366>).

It's not clear from the description but it would be great if it could
immediately render whatever Core Graphics code I was writing, as I was writing
it, much like this in-development tool
(<http://www.youtube.com/watch?v=JupqhcT4ONY>) which popped up in my Twitter
stream a couple days ago.

~~~
aggarwalachal
What Bret Victor showed in his talk was quite amazing. It really opens up
one's mind to what all is possible and what can be changed.

The Core Graphics video is interesting. Live rendering like that can help
developers see what they are actually coding. The whole compile and test cycle
just breaks the chain of thought which goes on while coding.

------
coob
I love the execution of this app, but I disagree with the underlying idea for
most cases.

Drawing your UI is never ever going to be as cheap as loading a converted PNG
(which Apple's modified pngcrush converts for you). I think a lot of devs have
the draw/vector vs. precomposed bitmap tradeoff the wrong way round. Drawing
all of your gradated UIButtons with CoreGraphics methods is a false economy
compared to just loading a stretchable PNG. Almost all of Apple's UI system
imagery is bitmap based, and for a good reason.

~~~
pornel
iOS devices can render Infinity Blade smoothly. I don't think few shapes
(probably automatically cached as a bitmap) are going to be an issue.

And I don't get why Apple bothers with CgBi PNGs, since endian swap on ARM is
a single cycle instruction, and it's probably free anyway while moving the
bitmap to the GPU memory.

~~~
pmjordan
I don't think the Core Graphics vector stuff is in any way GPU accelerated, so
the Infinity Blade comparison isn't appropriate.

The SoCs in iOS devices are shared-memory systems, so system memory _is_ GPU
memory.[1] But you're right, the endian swap could easily be done in the PNG
decoder.

[1] I have to admit I'm not sure it's implemented as zero-copy through to
userspace, though. The normal, 20-year-old GL texture APIs can certainly only
be implemented via copying, and I'm not sure if OpenGL ES has anything like
mappable texture pixel buffers. It would make a lot of sense though,
considering how memory-starved embedded systems are.

------
angerman
So basically we stop using graphics and start using code (UIViews) to draw the
images. Does it do caching? A quick search for cache didn't turn up anything.
If we have learned anything from using UITableViews with custom
UITableViewCells then it is that drawing is expensive.

The underlying idea of generating your images "programmatically" is not a bad
one to start but performance wise, if the image (View) is going to be static,
rendering into a bitmap and using that subsequently is the more performant
solution.

Maybe the tool we are looking for is not one that generates UIViews but let's
us just get the images correctly name and at the right resolutions with a
click? Like automatic slicing and exporting at predefined resolutions with
predefined naming schemes. I just think this would better be done off the
device.

For interactive views (drag, move, ...), where redrawing is necessary, this
could be a valuable tool -- if it can do that.

~~~
gdubs
When a uiview renders, it does so to a layer. Calayer caches its bitmap
content. So, moving something on screen doesn't require redrawing. Most
implicitly animated properties (opacity, transforms, etc) won't require a
redraw. As mentioned below, it's fairly trivial to save a context to a png
file if you must.

------
betageek
This highlights one of the main problems with selling dev tools on the App
store - it looks amazing but there's no way I'm shelling out $80 without
trying it first.

~~~
revorad
It's how Apple has commoditized mobile apps and is now trying the same on the
desktop.

~~~
st3fan
Not sure what you are accusing Apple of ... This developer does have a choice
you know. He could have made a trial available on his own site. Apple does not
disallow that.

~~~
revorad
Choice is a funny word.

When all the customers are going to the supermarket to buy their fresh veg,
you can set up your own puny little stall in the alley, but guess what, no
one's buying _because they can't even find you_.

Apple does not allow you to sell iOS apps outside its app store, and there's
every reason to believe they are pushing the desktop market in the same
direction. Why wouldn't they?

~~~
st3fan
There is always a choice. Currently on the homepage of Hacker News is a
reference to <http://caffeinatedapp.com/>

Under the big Available on the Mac App Store button it says:

"Try before you buy!. 15 day trial version also available."

(You did see that this thread is about a _Mac_ app right? Not about an iOS
app. I do agree that the situation there is very different.)

------
jaimzob
Seems very cool, but as far as I can tell there's no trial version? $80 seems
a bit much to lay out before you even find out if the thing works.

~~~
aggarwalachal
True. A trial version would be very nice.

One thing I would like to see is being able to export these vector graphics to
other formats.

~~~
jaimzob
You may want to check out Opacity (<http://likethought.com/opacity/>) which
can export to ObjC, HTML5 Canvas, SVG and PNG/Jpeg etc.

~~~
object2dot0
Yes i was surprised too that no one mentioned Opacity, its has been there fro
so long and so exactly what this soft do.

but lets hope this one gets updated often.

------
aggarwalachal
You no longer have to tweak and recompile the drawing code...

 _Edit_

PaintCode is a simple vector drawing app that instantly generates resolution-
independent Objective-C drawing code for both Mac OS X and iOS.

You no longer have to tweak and recompile your drawing code over and over
again to achieve the desired result.

------
benbjohnson
I made an open source project last year called Mockdown that does the opposite
of PaintCode. It takes declarative design code and converts it to PNGs so they
can be used in iOS apps. The original idea was to do mockups but it actually
turned out to be more interesting as an open source design tool.

Here's a short 5 minute walkthrough in designing the Mail app in Mockdown:

<http://vimeo.com/23869680>

------
supar
WMF anyone?

Windows MetaFile contain(ed) serialized GDI graphic calls to generate the
picture in a resolution independent way, while still working as a vector file
format that other application could parse.

Generating static ObjC seems like a dumb idea except in very specific cases.

~~~
michaelw
Well.... WMF was a great example of the difference between theory and
practice. Not really resolution or even device independent.

~~~
vardump
Care to elaborate? Disclaimer: I've written [EW]MF parser + rasterizer from
scratch.

I don't see how they're not resolution and/or device independent.

------
aggarwalachal
Craig Hockenberry (<http://twitter.com/chockenberry>) - Got an email from
PaintCode's support: a demo and tutorials are coming. Replied with some
friendly advice about releasing products…

------
unjinxable
This, while cool, just seems like the wrong way to go about things. I like
this solution or something like it: <https://github.com/mindbrix/UIImage-PDF>

------
aggarwalachal
Updates:

Just got an email from their team

Trial version of PaintCode

You can now download a limited trial version of PaintCode at
<http://paintcodeapp.com/trial.html>

Video guides

We've prepared 4 short video guides demonstrating PaintCode in action. These
guides show various basic drawing techniques at:
<http://paintcodeapp.com/examples.html>

Examples

You can also find examples of PaintCode documents at the same page. Some of
the examples include simple Xcode projects. These projects utilize the drawing
code generated by PaintCode.

------
feralchimp
Seems like a nice tool at a high-but-fair price point. I look forward to
seeing some deeper reviews, because the Illustrator trial I used to design my
app icon expired a long, long time ago. :)

------
eduardordm
I bought the app and just came by to drop my 2 cents.

The good: It's great. I've been looking for something like that for a while. I
wish XCode could do that. If you are a serious iOS developer you will love
this tool. Very useful.

The bad: Some of the code cannot be easily used, specially if you need to
manipulate positions in runtime. It should use relative positions, where 0 is
"somewhere" within the object. The code generated may cause some UIViews to
blur, sometimes you need to round x/y.

The ugly: The price is not aligned with apps at the same level of complexity.

Buy it.

------
Flow
The idea is cool, but I must say the app itself gives me the same feeling I
get from Microsofts Expression Blend app. Or any Silverlight app for that
matter.

Non-native UI controls everywhere. :-/

~~~
seanalltogether
I agree, the sample controls shown in the screenshots look very windows-y

------
kranner
Other than dynamically-related colors, is this much different from designing
in Illustrator and exporting to PDF, which I understand is well-supported in
iOS and OS X?

~~~
vdm
Think 'Save As NSView Code' for Illustrator.

~~~
Tloewald
Your PDF is going to be resolution independent and end up being used in much
the same way as the code, so I'm to sure it's a significant difference.

I do like the automated color derivation though.

~~~
rbarooah
Add a parameter or two to the generated code, then you'll see the difference,

~~~
Tloewald
Good point, although if you knew what you were doing with PDF ( which is,
after all, itself written in a programming language... )

~~~
rbarooah
True, but that is clearly impractical within a cocoa program since the PDF
handling methods don't provide a mechanism for passing in parameters.

------
sarbogast
What would also be great would be a way to import Illustrator files. Because I
don't see how designers will prefer to work in that environment.

------
febeling
Sometimes ideas are just floating around, aren't they? I was thinking of very
similar things lately as well. Obviously this application must be under
development for quite a while already.

One thing that I'm not totally sold on it that fact that it generates code
though. It is not going to be the running application which you interactively
tweak. Because that is what Bret was showing in his talk. And that is also
what you would be doing in Smalltalk. I'm not sure this is as 'immediately
connective' (to use a variant of Bret's language) as it seems.

Another approach to go about this would be to store the 'drawing' in a data
structure and have a special view that takes it and puts it into an image (or
on screen immediately). That would also open possibilities for caching,
something that likely would be make sense, as other commenters have mentioned
as well. Such an approach would come dangerously close to
implementing/reinventing SVG, though. Another benefit of such a data structure
would be that it could have some simple, textual representation. JSON maybe?
Even XML would do. And that would greatly help with version control and
diffing.

I don't see why such a feature could not be added to this app.

Amazing application.

~~~
dchest
_Sometimes ideas are just floating around, aren't they?_

I think Opacity [1] was the first program with this feature (added in 2009
[2]).

1\. <http://likethought.com/opacity/>

2\. <http://daringfireball.net/linked/2009/09/22/opacity>

~~~
Tloewald
Opacity was so poorly executed as to make it pointless.

<http://loewald.com/blog/?p=1612>

~~~
alanh
Opacity has problems and quirks, but I enjoy it a lot, actually.

Its concepts of factories + variables more it quite powerful indeed.

------
kenrikm
You could just create you assets in Illustrator/Vector and you would be set
for any future resolution increases. However the PNGs would still increase
your bundle size.

What I'm curious about, maybe someone here has the answer is if there would be
a significant performance gain from using Core Graphics over just loading a
PNG?

~~~
cwbrandsma
On the Apple developer web site you can watch the WWDC videos, there is one on
graphics and animation that talks about just that.

Conventional wisdom, especially for small images, it is much more efficient to
draw them with Core Graphics than use a image, more so if there is
transparency in the image.

This will even be true for non-ios systems. Microsoft has said for years, that
generating a 16x16 image is faster than getting it from disk (depending on
complexity and disk speeds).

Plus, code does tend to be more compact (again, within reason), so it is less
that has to be loaded when your application starts.

------
chj
I hope this idea is not patented, because I am developing a similar app.

~~~
nupark2
Prior art (also mentioned elsewhere in the comments):
<http://likethought.com/opacity/>

------
chriseidhof
This is awesome. I've been waiting for this, and it was on my list of projects
to build. However, it looks like the execution is really well done. I would
love to see a trial version though.

------
jnbiche
I would pay a lot of money for something like this that worked across
platforms (Linux, Windows, OSX).

~~~
aaronblohowiak
inkscape -> svg + cairo to write svg to image buffer.

------
H_E_Pennypacker
I've been waiting for someone to make something like this for OpenGL like,
forever. Still no love :-(

------
mindaugasdagys
So cool, cant wait to test it out

------
pelotom
Kind of ironic that the website is glitchy on iOS Safari.

~~~
corie
I was just thinking that myself. I tried to zoom in to read text and the
navigation got in the way.

