ios-creating-reusable-uiviews-with-storyboard – Part 2

This has is an updated version of ios-creating-reusable-uiviews-with-storyboard for Xcode 6.

TL:DR version:

  1. Create a new UIView subclass name it MyView.h/MyView.h
  2. Create a new XIB name it MyView.xib
  3. In MyView.xib select the File's Owner and set the class (using the right pane, third tab) to MyView
  4. Create an IBOutlet in MyView.h is of the type UIView*, call it contentView
  5. In InterfaceBuilder (with MyView.xib open) right-click drag the File's Owner the root view, and link it to contentView
  6. In MyView.m, override -awakeFromNib with the following:
    -(void)awakeFromNib {
        [[NSBundle mainBundle] loadNibNamed:@"MyView" owner:self options:nil];
        // The following is to make sure content view, extends out all the way to fill whatever our view size is even as our view's size is changed by autolayout
        [self.contentView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self addSubview: self.contentView];
        [[self class] addEdgeConstraint:NSLayoutAttributeLeft superview:self subview:self.contentView];
        [[self class] addEdgeConstraint:NSLayoutAttributeRight superview:self subview:self.contentView];
        [[self class] addEdgeConstraint:NSLayoutAttributeTop superview:self subview:self.contentView];
        [[self class] addEdgeConstraint:NSLayoutAttributeBottom superview:self subview:self.contentView];
    +(void)addEdgeConstraint:(NSLayoutAttribute)edge superview:(UIView *)superview subview:(UIView *)subview {
        [superview addConstraint:[NSLayoutConstraint constraintWithItem:subview

So that’s the first part, the second part is to create a UIView in some other XIB or storyboard, do whatever autolayout stuff you want with it and set it’s UIView class to “MyView”. When the XIB is loaded and displayed -it will show your view in there allowing you to customize views and reuse them.

Create iOS / Android icons from master icon

This is just a simple script that will create your iOS icons from a masterfile.
I’m using it on a Unity project (Even though Unity will make the icons for you, the way it resizes the images leaves them appearing jaggy).

It works best with a 1024×768 icon as the source

# Author: Mario Gonzalez
# Modified for iOS7 from:
# App Icon - iPhone iOS7+
sips --resampleWidth 60 "${f}/${1}" --out "${f}/icon60.png"
sips --resampleWidth 120 "${f}/${1}" --out "${f}/icon120.png"
# App Icon - iPhone <= iOS6
sips --resampleWidth 57 "${f}/${1}" --out "${f}/icon57.png"
sips --resampleWidth 114 "${f}/${1}" --out "${f}/icon114.png"
# App Icon - iPad iOS7+
sips --resampleWidth 76 "${f}/${1}" --out "${f}/icon76.png"
sips --resampleWidth 152 "${f}/${1}" --out "${f}/icon152.png"
# App Icon - iPad <= iOS6
sips --resampleWidth 72 "${f}/${1}" --out "${f}/icon72.png"
sips --resampleWidth 144 "${f}/${1}" --out "${f}/icon144.png"
# Spotlight iOS7+
sips --resampleWidth 40 "${f}/${1}" --out "${f}/icon40.png"
sips --resampleWidth 80 "${f}/${1}" --out "${f}/icon80.png"
# Spotlight - Ipad <= iOS6
sips --resampleWidth 50 "${f}/${1}" --out "${f}/icon50.png"
sips --resampleWidth 100 "${f}/${1}" --out "${f}/icon100.png"
# Spotlight - iPhone <= iOS6
sips --resampleWidth 29 "${f}/${1}" --out "${f}/icon29.png"
sips --resampleWidth 58 "${f}/${1}" --out "${f}/icon58.png"
# iTunesArtwork
sips --resampleWidth 512 "${f}/${1}" --out "${f}/iTunesArtwork"
sips --resampleWidth 1024 "${f}/${1}" --out "${f}/iTunesArtwork@2x"
sips --resampleWidth 96 "${f}/${1}" --out "${f}/icon96.png"
sips --resampleWidth 48 "${f}/${1}" --out "${f}/icon48.png"
sips --resampleWidth 36 "${f}/${1}" --out "${f}/icon36.png"

Use it as such:

$ ./  iconmaster.png

Note you made need to run chmod +x on it before it will be recognized as executable

Using Greensock JS / TweenMax in a Dart application

Once you use Greensock / TweenMax / TweenLite, you don’t really want to use anything else.
It’s fast, it’s feature rich, and it works on more browsers than dart itself.
This is a quick post on how to use the animation library, it’s surprisingly easy.

  • First import the dart:js library
    import 'dart:js';

  • Next, add dart.interop.js to your HTML after your own apps script tags.
    Mine looks like this:

    <script type="application/dart" src="dart/mandala.dart"></script>
    <script src="packages/browser/dart.js"></script>
    <script src="packages/browser/interop.js"></script>

Now to call JS from dart you must follow the js-interop syntax, which I agree is a bit annoying – but one approach is to create a wrapper class / function for it.

  • With that out of the way, here is an example of a Tweenmax call to modify the Y / Alpha values of a div:
      // You can also just pass the element's ID instead to greensock
      // but assuming we already retrieved it or may not have an id we would use this method
      HTMLElement divToAnimate = querySelectorAll("#myDiv");
      // Context refers to the JSContext, and retrieves global window objects
      context['TweenMax'].callMethod("to", [divToAnimate 
            new JsObject.jsify({
                  "delay" : 0.5,
                  "y": "40"
                  "autoAlpha": 0
      // A simpler one for reference
      context['TweenMax'].callMethod("to",["#myDiv", 0.15, new JsObject.jsify({x:100})]);

We can think of Context as referring to the Window object in the javascript context. So we retrieve it, and then call a method on it. Passing the method name to and then an array of parameters. For the last parameters, we create a new javascript object using the JsObject.jsify method which takes a map of primitive types with strings as keys.

In the next post / or an update to this one, I will show you how to create a simple wrapper class to make using Greensock more like calling it from JS

Placing an AppKit controls over a NSOpenGLView / CinderView

Currently working on an OSX application that requires UI controls to live above a CinderView (Which is a type of NSOpenGLView).

Obviously first I tried to simply place the objects above one another in InterfaceBuilder, but that had no effect. The NSOpenGLView always draws above all other content.

Next I tried some information someone suggested, with switching to layer-backed views.
That crashed my application on startup.

Instead what I found that worked, was to create a separate NSWindow, and style it to be transparent and place it inside of your NSWindow that contains the CinderView / NSOpenGLView.

Create a window to house your AppKit UI controls, and place your NSView inside

    // Transparent UI window
    CGRect wRect = self.window.frame;
    NSView *contentView = self.window.contentView;
    CGRect cRect = contentView.frame;
    CGRect rect = CGRectMake(wRect.origin.x, wRect.origin.y, cRect.size.width, cRect.size.height);
    self.overlayWindow = [[NSWindow alloc]initWithContentRect:rect
    self.overlayWindow.backgroundColor = [NSColor clearColor];
    [self.overlayWindow setOpaque:NO];
  // Add it to the window which contains our NSOpenGLView
    [self.window addChildWindow:self.overlayWindow ordered:NSWindowAbove];
    // Place UI in overlay window
    self.settingsController = [[SettingsViewController alloc] init];
    [self.overlayWindow.contentView addSubview:self.settingsController.view];

Compiling LESS from a node.js script

LESS is a tool that allows you to write CSS in a programmer friendly way (with variables, and some simple functions), it then converts it to regular CSS for browser friendly consumption.

It’s amazingly easy to use, during development you don’t have to change a thing.
You simply import your .less file, then under you import ‘less.js’ and it does it’s magic.

Eventually you need to preprocess it as part of your build operation.

For some reason I could not find a simple response for how to do this.
I found many articles / answers for how to run LESS from the command line, or using it with Express to pre-compile it for you when serving then cache it.

Here’s what I ended up using, much of it referenced from the lessc command line tool.

var less = require( 'less' );
var fs = require( 'fs' );
var path = require('path');
// Load the file, convert to string
fs.readFile( '../less/gaf.less', function ( error, data ) {
  var dataString = data.toString();
  var options = {
    paths         : ["../less"],      // .less file search paths
    outputDir     : "../css",   // output directory, note the '/'
    optimization  : 1,                // optimization level, higher is better but more volatile - 1 is a good value
    filename      : "gaf.less",       // root .less file
    compress      : true,             // compress?
    yuicompress   : true              // use YUI compressor?
  // Create a file name such that
  //  if options.filename == gaf.js and options.compress = true
  //    outputfile = gaf.min.css
  options.outputfile = options.filename.split(".less")[0] + (options.compress ? ".min" : "") + ".css";
  // Resolves the relative output.dir to an absolute one and ensure the directory exist
  options.outputDir = path.resolve( process.cwd(), options.outputDir) + "/";
  ensureDirectory( options.outputDir );
  // Create a parser with options, filename is passed even though its loaded
  // to allow less to give us better errors
  var parser = new less.Parser(options);
  parser.parse( dataString, function ( error, cssTree ) {
      if ( error ) {
        less.writeError( error, options );
    // Create the CSS from the cssTree
    var cssString = cssTree.toCSS( {
      compress   : options.compress,
      yuicompress: options.yuicompress
    } );
    // Write output
    fs.writeFileSync( options.outputDir + options.outputfile, cssString, 'utf8' );
    console.log("Converted Less: '" + options.filename + "', to CSS: " + options.outputDir + options.outputfile);
var ensureDirectory = function (filepath) {
  var dir = path.dirname(filepath);
  var existsSync = fs.existsSync || path.existsSync;
  if (!existsSync(dir)) { fs.mkdirSync(dir); }

Excellent open-course, from NAND to Tetris

Came across this while I was reading an entry on #ALTDEVBLOGADAY. The entry was part 2 of 9, C / C++ Low Level Curriculum part 2 which is interesting in it’s own right.

There was a link to this interesting MIT open course called:
From NAND to Tetris, which discussing building an entire computer from first principals. The idea is to work backward, instead of starting at high-level abstraction beginning at the lowest interesting level in computer science (logic gates)

Although not required, it’s meant to be consumed with it’s own accompanying book, which i’ve already ordered and should get here by Tuesday – i’m very excited to start reading it and going through the course.

The Elements of Computing Systems: Building a Modern Computer from First Principles

PostADay-Round2#3 – Wheres that file!?

Here’s a small tip I started using. When coding in C++ it can be tricky to figure out where a file is, relative to the application so there is an urge to simply load the file using an absolute path. It’s really a problem later on if you use a second computer, or time passes or you’re working on this project within a team.

Probably there’s a better trick, but what I do is load the program, pause it, then use the xcode console window (cmd+r) and type, ‘pwd’ and ‘cd’ right in there then browse to the by pressing file – since it starts off in the application you know if you can get to it then you can load it correctly.

PostADay-Round2#3 – List of xcode / GCC preprocessor macros

Here is a list of preprocessor defined macros when compiling in Xcode.
Xcode defines a few other macros as well, if anyone knows how to get those to output please share!

So useful!

terminal:$ gcc -dM -E - < /dev/null
#define __DBL_MIN_EXP__ (-1021)
#define __FLT_MIN__ 1.17549435e-38F
#define __DEC64_DEN__ 0.000000000000001E-383DD
#define __CHAR_BIT__ 8
#define __WCHAR_MAX__ 2147483647
#define __DBL_DENORM_MIN__ 4.9406564584124654e-324
#define __FLT_EVAL_METHOD__ 0
#define __DBL_MIN_10_EXP__ (-307)
#define __FINITE_MATH_ONLY__ 0
#define __DEC64_MAX_EXP__ 384
#define __SHRT_MAX__ 32767
#define __LDBL_MAX__ 1.18973149535723176502e+4932L
#define __APPLE_CC__ 5664
#define __UINTMAX_TYPE__ long unsigned int
#define __DEC32_EPSILON__ 1E-6DF
#define __block __attribute__((__blocks__(byref)))
#define __SCHAR_MAX__ 127
#define __USER_LABEL_PREFIX__ _
#define __STDC_HOSTED__ 1
#define __DEC64_MIN_EXP__ (-383)
#define __DBL_DIG__ 15
#define __FLT_EPSILON__ 1.19209290e-7F
#define __LDBL_MIN__ 3.36210314311209350626e-4932L
#define __DEC32_MAX__ 9.999999E96DF
#define __strong
#define __APPLE__ 1
#define __DECIMAL_DIG__ 21
#define __LDBL_HAS_QUIET_NAN__ 1
#define __DYNAMIC__ 1
#define __GNUC__ 4
#define __MMX__ 1
#define __FLT_HAS_DENORM__ 1
#define __DBL_MAX__ 1.7976931348623157e+308
#define __DBL_HAS_INFINITY__ 1
#define __DEC32_MIN_EXP__ (-95)
#define __LDBL_HAS_DENORM__ 1
#define __DEC32_MIN__ 1E-95DF
#define __weak __attribute__((objc_gc(weak)))
#define __DBL_MAX_EXP__ 1024
#define __DEC128_EPSILON__ 1E-33DL
#define __SSE2_MATH__ 1
#define __amd64 1
#define __tune_core2__ 1
#define __LONG_LONG_MAX__ 9223372036854775807LL
#define __GXX_ABI_VERSION 1002
#define __FLT_MIN_EXP__ (-125)
#define __x86_64 1
#define __DBL_MIN__ 2.2250738585072014e-308
#define __LP64__ 1
#define __DBL_HAS_QUIET_NAN__ 1
#define __DEC128_MIN__ 1E-6143DL
#define __DBL_HAS_DENORM__ 1
#define __NO_INLINE__ 1
#define __DEC_EVAL_METHOD__ 2
#define __DEC128_MAX__ 9.999999999999999999999999999999999E6144DL
#define __FLT_MANT_DIG__ 24
#define __VERSION__ "4.2.1 (Apple Inc. build 5664)"
#define __DEC64_EPSILON__ 1E-15DD
#define __DEC128_MIN_EXP__ (-6143)
#define __SIZE_TYPE__ long unsigned int
#define __DEC32_DEN__ 0.000001E-95DF
#define __FLT_RADIX__ 2
#define __LDBL_EPSILON__ 1.08420217248550443401e-19L
#define __SSE_MATH__ 1
#define __k8 1
#define __LDBL_DIG__ 18
#define __x86_64__ 1
#define __FLT_HAS_QUIET_NAN__ 1
#define __FLT_MAX_10_EXP__ 38
#define __LONG_MAX__ 9223372036854775807L
#define __FLT_HAS_INFINITY__ 1
#define __DEC64_MAX__ 9.999999999999999E384DD
#define __DEC64_MANT_DIG__ 16
#define __DEC32_MAX_EXP__ 96
#define __DEC128_DEN__ 0.000000000000000000000000000000001E-6143DL
#define __LITTLE_ENDIAN__ 1
#define __LDBL_MANT_DIG__ 64
#define __DEC32_MANT_DIG__ 7
#define __k8__ 1
#define __WCHAR_TYPE__ int
#define __pic__ 2
#define __FLT_DIG__ 6
#define __INT_MAX__ 2147483647
#define __FLT_MAX_EXP__ 128
#define __BLOCKS__ 1
#define __DBL_MANT_DIG__ 53
#define __DEC64_MIN__ 1E-383DD
#define __WINT_TYPE__ int
#define __SSE__ 1
#define __LDBL_MIN_EXP__ (-16381)
#define __MACH__ 1
#define __amd64__ 1
#define __LDBL_MAX_EXP__ 16384
#define __SSP__ 1
#define __LDBL_MAX_10_EXP__ 4932
#define __DBL_EPSILON__ 2.2204460492503131e-16
#define _LP64 1
#define __GNUC_PATCHLEVEL__ 1
#define __LDBL_HAS_INFINITY__ 1
#define __INTMAX_MAX__ 9223372036854775807L
#define __FLT_DENORM_MIN__ 1.40129846e-45F
#define __PIC__ 2
#define __FLT_MAX__ 3.40282347e+38F
#define __SSE2__ 1
#define __FLT_MIN_10_EXP__ (-37)
#define __INTMAX_TYPE__ long int
#define __DEC128_MAX_EXP__ 6144
#define __GNUC_MINOR__ 2
#define __DBL_MAX_10_EXP__ 308
#define __LDBL_DENORM_MIN__ 3.64519953188247460253e-4951L
#define __STDC__ 1
#define __PTRDIFF_TYPE__ long int
#define __DEC128_MANT_DIG__ 34
#define __LDBL_MIN_10_EXP__ (-4931)
#define __GNUC_GNU_INLINE__ 1
#define __SSE3__ 1