7 ms·
Vector based UI design tool that generates ObjC
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.
- basil 15y agoReally 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 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 http://www.youtube.com/watch?v=JupqhcT4ONY) which popped up in my Twitter stream a couple days ago.
- aggarwalachal 15y agoWhat 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.
- kranner 15y agoOther 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?
- joelhaasnoot 15y agoCode generation seems to be the selling point. I've never seen wel executed GUI code generation however on any platform. Windows Forms was especially awful...
- vdm 15y agoThink 'Save As NSView Code' for Illustrator.
- Tloewald 15y agoYour 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 15y agoAdd a parameter or two to the generated code, then you'll see the difference,
- Tloewald 15y agoGood point, although if you knew what you were doing with PDF ( which is, after all, itself written in a programming language... )
- rbarooah 15y agoTrue, but that is clearly impractical within a cocoa program since the PDF handling methods don't provide a mechanism for passing in parameters.
- 286c8cb04bda 15y agoIt looks like to biggest extra is the ability to insert variables into the generated, so you can make e.g. a blue and orange button from the the same output.
- aggarwalachal 15y agoYou 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.
- jaimzob 15y agoSeems 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 15y agoTrue. 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.
- deleted 15y ago[deleted]
- jaimzob 15y agoYou may want to check out Opacity (http://likethought.com/opacity/ http://likethought.com/opacity/) which can export to ObjC, HTML5 Canvas, SVG and PNG/Jpeg etc.
- object2dot0 15y agoYes 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 15y agoJust what I was looking for. Seems like that if these guys also implement the same feature (probably in a future build) it might help many like me out.
- julien_p 15y agoApparently a demo/trial is in the works https://twitter.com/#!/chockenberry/status/180331701849960451 https://twitter.com/#!/chockenberry/status/18033170184996045...
- coob 15y agoI 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.
- saurik 15y agoThis isn't about performance: it is about resolution independence.
- basil 15y agoYeah and this is becoming increasingly important. image.png, image@2x, image~ipad.png, image@2x~ipad.png...
- aggarwalachal 15y agoFrom The Verge "While some of the apps have received additional features, it seems likely that the increase in size is mainly down to the huge graphics needed to fill the new iPad's 2048 x 1536 Retina Display. It's worth remembering that these are only download sizes, and once installed the apps may be even larger. Regular apps will likely receive a similar bump in size once developers update them with hi-def graphics" "iPad apps up to five times larger..."
- harpastum 15y agoI just don't understand how they could possibly be five times larger. There are 4x as many pixels, so by straight pixel count it could be 4x larger. However, current PNG compressors are really good at optimizing flat color areas, gradients, and lines. It seems to me like most images would get only a relatively small increase in size due to this upsizing (1.5x-2x).
- angerman 15y agoSo 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.
- irrationalfab 15y agoYou have the option to save a Core Graphics generated UIImage to NSCache or even to the temp folder.
- gdubs 15y agoWhen 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.
- sarbogast 15y agoWhat 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.
- chriseidhof 15y agoThis 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.
- febeling 15y agoSometimes 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 15y agoSometimes 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/ http://likethought.com/opacity/ 2. http://daringfireball.net/linked/2009/09/22/opacity http://daringfireball.net/linked/2009/09/22/opacity
- seclorum 15y ago
- supar 15y agoWMF 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 15y agoWell.... WMF was a great example of the difference between theory and practice. Not really resolution or even device independent.
- vardump 15y agoCare 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.
- thought_alarm 15y agoPDF is actually serialized CG graphic calls. This app should produce PDF files rather than raw CG graphics code. Of course, there are lots of apps that can produce PDF.
- pelotom 15y agoKind of ironic that the website is glitchy on iOS Safari.
- corie 15y agoI was just thinking that myself. I tried to zoom in to read text and the navigation got in the way.
- chj 15y agoI hope this idea is not patented, because I am developing a similar app.
- nudded 15y agoIdeas can't be patented.
- aggarwalachal 15y agoHow far are you? Would we be able to test it out before release?
- nupark2 15y agoPrior art (also mentioned elsewhere in the comments): http://likethought.com/opacity/ http://likethought.com/opacity/
- feralchimp 15y agoSeems 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. :)
- jnbiche 15y agoI would pay a lot of money for something like this that worked across platforms (Linux, Windows, OSX).
- beefman 15y agoLike Silverlight?
- aaronblohowiak 15y agoinkscape -> svg + cairo to write svg to image buffer.
- kenrikm 15y agoYou 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?
- randomdata 15y ago> you would be set for any future resolution increases. Only if you're willing to release an update. There's something to be said about having it already ready for any future resolutions, now.
- cwbrandsma 15y agoOn 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.
- betageek 15y agoThis 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.
- tvon 15y agoNot via the App Store, but there is nothing preventing them from doing this via a direct download on their website.
- revorad 15y agoIt's how Apple has commoditized mobile apps and is now trying the same on the desktop.
- st3fan 15y agoNot 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 15y agoChoice 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?
- 286c8cb04bda 15y ago> Apple does not allow you to sell iOS apps outside its app store, This is incorrect in a minor, but fundamentally important way, I think: Apple does nothing to prevent you from selling outside their store. What they've done is make it difficult for the average iPhone owner to buy from you. You need to target a specific demographic that can overcome those obstacles and will pay enough to make it worth your time. In practice, that probably means enterprise.
- Flow 15y agoThe 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 15y agoI agree, the sample controls shown in the screenshots look very windows-y
- benbjohnson 15y agoI 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 http://vimeo.com/23869680
- aggarwalachal 15y agoCraig Hockenberry (http://twitter.com/chockenberry 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…
- mindaugasdagys 15y agoSo cool, cant wait to test it out
- unjinxable 15y agoThis, 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 https://github.com/mindbrix/UIImage-PDF
- acidblue 15y agoI bought the app 5 minutes after I read about it here on HN. I already dig what it is going to do for me. I don't plan on doing any major custom controls, but I do have a few ideas that will work awesomely with using this tool. I had just recently been struggling with some ddrawing operations. If this thing saves me a few hours of work and frustration, it is totally worth the measly $80. Amazing what you can do with a 2MB binary.
- H_E_Pennypacker 15y agoI've been waiting for someone to make something like this for OpenGL like, forever. Still no love :-(
- eduardordm 15y agoI 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.
- aggarwalachal 15y agoUpdates: 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 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 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.