Callouts are small, transient popups that display information or user interface controls. As part of my Swift node based calculator experiment, I wanted to add two new features, a numeric dial and a delete node button, which are ideal candidates to be contained in a callout container.

 I've used a different approach for both new features and this post describes how I've implemented them.

 Popovers

First off, the numeric dial is launched from a UIBarButtonItem in my Toolbar class

 The numeric dial is my own component that I blogged about here. In this implementation, I've updated its layers to extend CAShapeLayer and draw its value line immediately through a drawValueCurve() method in the NumericDialTrack class.

 The dial itself knows nothing of my presentation model; in keeping with the strategy I've used for years, my low-level UI components are framework and domain agnostic. My NumericDialViewController, which houses the control, does know about the presentation model and has a few observers on it:
        NodesPM.addObserver(self, selector: "nodeChangeHandler", notificationType: NodeNotificationTypes.NodeSelected)
        NodesPM.addObserver(self, selector: "nodeChangeHandler", notificationType: NodeNotificationTypes.NodeUpdated)

 nodeChangeHandler() does little more than normalise the current node's value and update the control to reflect the relevant node's value:
    func nodeChangeHandler()
    {
        if let selectedNode = NodesPM.selectedNode
        {
            let value = selectedNode.value
            
            ignoreDialChangeEvents = true
                
            numericDial.currentValue = value / 100
                
            ignoreDialChangeEvents = false
        }
    }

 When the user changes the dial position, the controller acts on a .ValueChanged control event on the dial and notifies the presentation model:
    func dialChangeHandler(numericDial: NumericDial)
    {
        let dialValue = Double(Int(numericDial.currentValue * 100))
        
        if !ignoreDialChangeEvents
        {
            NodesPM.changeSelectedNodeValue(dialValue)
        }
    }

 Up in the Toolbar class, I create an instance of my NumericDialController and an instance of UIPopoverController with the numeric dial controller set as its contentViewController:
    let numericDialViewController: NumericDialViewController
    let popoverController: UIPopoverController

    [...]

    numericDialViewController = NumericDialViewController()
    popoverController =  UIPopoverController(contentViewController: numericDialViewController)

 I want to know when the dial callout has been closed and to do that my toolbar implements the UIPopoverControllerDelegate and sets itself to the popover controller's delegate:
    popoverController.delegate = self

 The user launches the numeric dial callout by clicking a UIBarButtonItem:
    let numericButtonShowDial = UIBarButtonItem(title: "Dial", style: UIBarButtonItemStyle.Plain, target: self, action: "showDial:")

 The showDial() method actually displays the callout. It does this by checking we have a rootViewControler and then simply invoking presentPopoverFromBarButton():
    popoverController.presentPopoverFromBarButtonItem(value, permittedArrowDirections: UIPopoverArrowDirection.Any, animated: true)

 One thing I found was that although the callout is meant to be modal, the little calculator buttons were still clickable. Changing the toolbar's userInteractionEnabled to false didn't seem to help, so I created a little function that manually enables or disables the individual button bar buttons:
    func enableItems(enable: Bool)
    {
        if let barButtonItems = items
        {
            for barButtonItem:AnyObject in barButtonItems
            {
                (barButtonItem as UIBarButtonItem).enabled = enable;
            }
        }
    }

 This is invoked when the callout is opened and, because toolbar is the popover controller's delegate, invoked again when the callout is closed through the popoverControllerDidDismissPopover() method:
    func popoverControllerDidDismissPopover(popoverController: UIPopoverController)
    {
        enableItems(true)
    }

 Action Sheets

Next up is an ActionSheet which is launched from my MenuButton class.

 I could have used the same technique for the menu button, but UIKit offers a simpler alternative for creating action sheets, UIAlertController. 

 The UIController contains a set of UIAlertAction instances. In my case, I have one for deleting the selected node and two others to toggle nodes between numeric and operator types. 

 My first steps are to instantiate the UIAlertController and add the actions:
    var alertController = UIAlertController(title: nil, message: nil, preferredStyle: UIAlertControllerStyle.ActionSheet)

    [...]

    makeOperatorAction = UIAlertAction(title: NodeTypes.Operator.toRaw(), style: UIAlertActionStyle.Default, handler: changeNodeType)
    makeNumericAction = UIAlertAction(title: NodeTypes.Number.toRaw(), style: UIAlertActionStyle.Default, handler: changeNodeType)
    deleteAlertAction = UIAlertAction(title: "Delete Selected Node", style: UIAlertActionStyle.Default, handler: deleteSelectedNode)

    [...]

    alertController.addAction(deleteAlertAction)
    alertController.addAction(makeNumericAction)
    alertController.addAction(makeOperatorAction)

 Now that the actions have been created, launching them is simply a matter of invoking presentViewController() on the root view controller in the menu button's overridden touchesBegan() method:
    override func touchesBegan(touches: NSSet, withEvent event: UIEvent)
    {
        if let viewController = UIApplication.sharedApplication().keyWindow.rootViewController
        {
            if let popoverPresentationController = alertController.popoverPresentationController
            {
                popoverPresentationController.sourceRect = frame
                popoverPresentationController.sourceView = viewController.view
                
                viewController.presentViewController(alertController, animated: true, completion: nil)
            }
        }
    }

A little note on NSTimer and userInfo

 When I first plugged the numeric dial into this application, performance was pretty grim. Because of the frequent updates to the screen, the dial was very juddery. One of the approaches I took to help with this was to use an NSTimer inside the recursive nodeUpdate() method inside my presentation model.

 Although I didn't end up using this approach, I did have to scratch my head for a few minutes to figure out how to pass data from a timer to its selector. I needed to pass a NodeVO and I did this by creating a NSMutableDictionary containing my node and setting that as the timer's userInfo property:
var dictionary = NSMutableDictionary()
    dictionary.setValue(candidateNode, forKeyPath: "node")
    

    var timer = NSTimer(timeInterval: timeInterval, target: self, selector: "timerComplete:", userInfo: dictionary, repeats: false)

 Then, timerComplete() uses valeForKey() to extract the node from its argument:
    func timerComplete(value: AnyObject)
    {
        let srcTimer: NSTimer = value as NSTimer
        
        let node: NodeVO = srcTimer.userInfo?.valueForKey("node") as NodeVO
        
        NodesPM.nodeUpdate(node)
    }

 All the updated source code is available in my GitHub repository. Please note: this code has been built under Xcode 6.0 and may not work under 6.1.

Posted by
Labels: node based interface NSTimer swift swiftlang UIAlertController UIPopoverController UIPopoverControllerDelegate userInfo
0

Add a comment

It's been a fairly busy few months at my "proper" job, so my recreational Houdini tinkering has taken a bit of a back seat. However, when I saw my Swarm Chemistry hero, Hiroki Sayama tweeting a link to How a life-like system emerges from a simple particle motion law, I thought I'd dust off Houdini to see if I could implement this model in VEX.

The paper discusses a simple particle system, named Primordial Particle Systems (PPS), that leads to life-like structures through morphogenesis. Each particle in the system is defined by its position and heading and, with each step in the simulation, alters its heading based on the PPS rule and moves forward at a defined speed. The heading is updated based on the number of neighbors to the particle's left and right.
5

This blog post discusses a technique for rendering SideFX Houdini FLIP fluids as sparse fields of wormlike particles (hence my slightly over-the-top Sparse Vermiform moniker) with their color based on the fluid system's gas pressure field.

The project begins with an oblate spheroid that is converted to a FLIP Fluid using the FLIP Fluid from Object shelf tool. The fluid object sits within a box that's converted to a static body with its volume inverted to act as a container.
3

This post continues from my recent blog entry, Particle Advection by Reaction Diffusion in SideFX Houdini. In this project, I've done away with the VEX in the DOP network, and replaced it with a VDB Analysis node to create a vector field that represents the gradient in the reaction diffusion volume. This allows me to use a POP Advect by Volumes node in the DOP network rather than hand coding by own force wrangle.

After watching this excellent tutorial that discusses advecting particles by magnetic fields to create an animation of the sun, I was inspired to use the same technique to advect particles by fields that are a function of reaction diffusion systems. 

The source for my reaction diffusion vector field is a geometry node.
1

I played with animating mitosis in Houdini last year (see Simulating Mitosis in Houdini), but the math wasn't quite right, so I thought I'd revisit my VEX to see if it could be improved. After some tinkering, the video above shows my latest (hopefully improved) results.
4

This post describes a simple way to create a system comprising of a regularly surfaced fluid and a faux grain system. The video above contains three clips using the same basic technique: creating a single point source for the FLIP SOP initial data but using groups to render some as a fluid and some as individual tiny spheres - the grains. 

The first clip shows a granular sphere dropping into a fluid tank.
1

Fibonacci spheres are created from a point set that follows a spiral path to form a sphere (you can see an example, with code at OpenProcessing).

This video contains five clips using SideFX Houdini's Grain Solver with an attached POP Wrangle that uses VEX to generate custom forces. Here's a quick rundown of the VEX I used for each clip (please forgive the use of a variable named oomph).

Clip One "Twin Peaks"

Here, I compare each grain's current angle to the scene's origin to the current time.

The Rayleigh-Taylor instability is the instability between two fluids of different densities. It can appear as "fingers" of a denser liquid dropping into a less dense liquid or as a mushroom cloud in an explosion.

The phenomenon "comes for free" in SideFX Houdini FLIP Fluids.
1

Following on from my recent blog post, Mixing Fluids in Houdini, I wanted to simulate a toroidal eddy effect where the incoming drip takes the form of a torus and the fluid flows around the circumference of its minor radius. 

My first thought was to use a POP Axis Force, but that rotates particles around the circumference of the major radius. So, I took another approach: create lots of curves placed around a circle and use those as the geometry source for a POP Curve Force.
About Me
About Me
Labels
Labels
Blog Archive
Blog Archive
Loading