How to setup a UIDatePicker with objC bridge in Codea

Code Sharing
1

Hello, Everyone.

To complete my aims in learning how to set up Objective-C UIButtons, UIPickerView and UIDatePicker for a Codea project I’m working on, I finally figured out how to set up a UIDate Picker. If others are interested, here is a template example:

-- UIDatePicker

function setup()
    viewer.mode = FULLSCREEN
    --note: the next statement gets the actual UIViewController running in Codea
    local vc = objc.viewer
    -- datetime object is in seconds from 1/1/1970 ("epoch start time") to 09/30/2021 = 1633071572
    local minDate = objc.NSDate:alloc():initWithTimeIntervalSince1970_(1633071572)
    local maxDate = objc.NSDate() -- = today's date (e.g. 12/20/2023)
    local DatePicker = objc.UIDatePicker()
    DatePicker.preferredDatePickerStyle = objc.enum.UIDatePickerStyle.wheels
    DatePicker.backgroundColor = color(255,255,255)
    DatePicker.datePickerMode = objc.enum.UIDatePickerMode.date
    -- the next two lines are optional
    DatePicker.minimumDate = minDate
    DatePicker.maximumDate = maxDate
    -- next four lines set up format to convert date object pick to a string in short format (e.g. 11/11/2021)
    local dateFormatter = objc.NSDateFormatter:alloc():init()
    dateFormatter.dateStyle = objc.enum.NSDateFormatterStyle.NSDateFormatterShortStyle
    -- NoStyle means don't display the datetime object's time if it has time associated with it
    dateFormatter.timeStyle = objc.enum.NSDateFormatterStyle.NSDateFormatterNoStyle
    dateString = dateFormatter:stringFromDate_(DatePicker.date)
    local actionButton = objc.UIAction:actionWithHandler_(function(objAction) dateString = dateFormatter:stringFromDate_(DatePicker.date)  end)
    DatePicker:addAction_forControlEvents_(actionButton, objc.enum.UIControlEvents.valueChanged)
    vc.view:addSubview_(DatePicker)
    DatePicker.translatesAutoresizingMaskIntoConstraints = false
    DatePicker.centerXAnchor:constraintEqualToAnchor_(vc.view.centerXAnchor).active = true
    DatePicker.topAnchor:constraintEqualToAnchor_constant_(vc.view.topAnchor, HEIGHT/2 - 300).active = true
end

function draw() 
    background(40, 40, 50)
    text(dateString, WIDTH/2, HEIGHT/2 + 20)  
end

IMG_1693
IMG_16932388×1668 81.9 KB

If others are interested in customizing further the appearance of their UIDatePicker, please see additional customization code from my example in this previous post:

1 Like
2

@SuarRay - very neat but a little bit difficult to see. Just switch background in draw() to black and the background colour of the device to navy blue in setup and all is hunky dory.

Thanks for that.

One question - can you enhance the device by shading the background with a mesh to give the impression of 3D.

3

Hi, @Bri_G,

Thanks for taking a look!
Any specific color codes of navy blue you prefer? If you reply with the specific color codes, I’ll try them out and aim to incorporate them in my future demos.

Regarding your question about enhancing the UIDatePicker device: it took me a while to figure it out from searching the web (not straight forward in Apple’s documentation) but the answer is yes; you can do it by the following slightly round-about way of setting a UIColor to a sprite. Just add the following lines with the path on your Codea documents directory to the image you want to add (in my case, I used a stored picture named “Airlock Door”):

file = "file://"..asset.documents.AirlockDoor1.path
url = objc.NSURL:alloc():initWithString_(file)
data = objc.NSData():initWithContentsOfURL_(url)
uiImage = objc.UIImage():initWithData_(data)
meshBackground = objc.UIColor:colorWithPatternImage_(uiImage)
DatePicker.backgroundColor = meshBackground

Here is the result:

IMG_1695
IMG_16952388×1668 100 KB

For some reason though, the above code wouldn’t seem to work when I tried to import a builtin asset from its path (doesn’t show any image); e.g.

file = “file://”…asset.builtin.(whateverBuiltinImageAssetIChose).path

@sim: any reason why objective-C code imports images from documents folder with the above code but not from builtin assets? I think I’m specifying the path syntax correctly.

Thanks :blush:

4

@SugarRay - thanks for the update, looks neat. I will play around with this to try and get the effect I’d lik.

Cheers

1 Like