{"id":512,"date":"2012-02-10T09:35:19","date_gmt":"2012-02-10T16:35:19","guid":{"rendered":"http:\/\/blog.latenightsw.com\/?p=512"},"modified":"2013-10-12T11:51:18","modified_gmt":"2013-10-12T18:51:18","slug":"512","status":"publish","type":"post","link":"http:\/\/markalldritt.com\/?p=512","title":{"rendered":"TimePicker Cocoa View"},"content":{"rendered":"

UPDATE – 12-October-2013<\/strong>: I have moved the code for this project to GitHub<\/a>.<\/p>\n\n

Downlaod TimePicker.zip<\/a><\/p>\n\n

This project is an attempt to implement David Cristian<\/a>‘s Hour Picker<\/a> UI design (which I found via UI Parade<\/a>) as a Cocoa View. Here is how David’s UI mockup appears:<\/p>\n\n

\"Hour<\/p>\n\n

When I first saw this UI design I found it visually compelling, and it really seems like a nice solution to the problem of allowing the user to quickly pick periods of time in 1\/2 hour increments. When I began turning it into a functional UI a number of issues concerning how users interact with the UI begin to surface:<\/p>\n\n

    \n
  1. This mockup shows only 6 hours. The UI needs to scroll in order to show the full 24-hour day.<\/li>\n
  2. I chose only to implement click and drag to select time ranges. I imagine that shift-clicking might be desirable. I didn’t attempt to handle keyboard input.<\/li>\n
  3. At first I though the 1\/2 hour grid was self evident. However, when I began using the UI, I decided I needed duration feedback while dragging to know exactly how long the selected period is.<\/li>\n<\/ol>\n\n

    Here’s how my implementation looks while the user is dragging the mouse:<\/p>\n\n

    \"Cocoa<\/p>\n\n

    There are limitations to this UI:<\/p>\n\n

      \n
    1. Time can only be selected in 1\/2 hour increments.<\/li>\n
    2. Time can only be selected within a single 24-hour day.<\/li>\n
    3. Auto-scrolling while dragging is problematic. It may be that auto-scrolling needs to slow down, or more rows need to be made visible in the scroll view.<\/li>\n<\/ol>\n\n

      Requirements<\/h2>\n\n

      The project requires Xcode 4.2, and the Mac OS X 10.7 SDK.<\/p>\n","protected":false},"excerpt":{"rendered":"

      This project implements David Cristian<\/a>‘s Hour Picker<\/a> UI design (which I found via UI Parade<\/a>) as a Cocoa View<\/p>

      Continue ReadingTimePicker Cocoa View<\/span><\/a><\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[8],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/s7AQk-512","_links":{"self":[{"href":"http:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts\/512"}],"collection":[{"href":"http:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=512"}],"version-history":[{"count":9,"href":"http:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":757,"href":"http:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts\/512\/revisions\/757"}],"wp:attachment":[{"href":"http:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}