Challenge Overview
Project Overview
The client wants to develop a new Visitor Application Module – which should be based on the original Kiosk software workflow but it must be able to easily enroll by the visitor, visitor can capture (image and signature), system determines what and where to print temp badge from a iPad tablet, system notifies the host of the arrival that must include the visitor image that they are in which lobby location.
This module will be implemented as an iOS app.
Challenge Scope
For this challenge, we'd like to explore the way to do badge printing in iPad application before we get started to implement the whole module, which is most important.
We'd like to you to implement a demo iOS application by implementing the following UI requirements and following the current architecture (easy for further integration).
- Simple, one page UI
- Take the variable data as parameters from UI text boxes:
- First name
- Last name
- Company
- Visitor key (for barcode)
- No validation necessary
- Button to pick a photo using cocoa API from photo library on the device
- Button to print the test badge.
- Printing settings as specified, but hardcoded into a plist (simplify to a single layout for prototype)
- Render a badge layout with following settings from a plist:
- Landscape
- Photo Left
- Paper 2.4inch x 3.9”
- 0.25” margins
- Font Helvetica (regular) 12pt
- Field alignment - Left
- Should look like the following sample badge:
- Send to AirPrint printer
- Must comply with printing architecture as defined in architecture docs
The badge generated from the app may include visitor or visit fields, visitor photo/passport, custom logo, etc., and these can be configured.
In this application, the badge content will be generated as HTML and rendered in the app using UIWebView, and the HTML will be generated using GRMustache library with predefined Mustache templates.
There will be two badge Mustache templates for portrait and landscape layout respectively (for this challenge, we just need to implement one layout for landscape), and the photo/fields positions (left v.s. right, top v.s. bottom) will be controlled using CSS. The images (logo, visitor photo/passport, barcode) will be base64 encoded and included in the HTML as data URIs.
Four Mustache templates for four different layout options (portrait with photo at top, portrait with photo at bottom, landscape with photo at left, landscape with photo at right) are provided with the architecture to demonstrate how to generate various data fields. Note that the templates are for reference only, and assemblers are expected to tweak them (or create templates from scratch) according to the client's final badge layout design.
Generated badge will be printed using AirPrint APIs, specifically UIMarkupTextPrintFormatter will be used to layout the badge HTML content for printing.
- Must be re-usable as part of the larger app that complies with defined architecture, this is a major consideration for this assembly.
Architecture Reference
- Please check 2.2.5 in Visitor Management Only.docx for how the Printing will be like in the app to build.
- Please follow the model definitions for futher integration.
- BadgeConfiguration
- TextAlignment
- BadgePhotoPosition
- ConfigurationService.badgeConfiguration()
- ConfigurationService.setBadgeConfiguration(config:BadgeConfiguration)
- VisitorSignInPreviewViewController
- Please check the following sequence for relative logic.
- Get BadgeConfiguration Sequence Diagram
- Set BadgeConfiguration Sequence Diagram
- Generate Badge HTML Sequence Diagram ( The OpenAccessService related logic can be mocked)
- Print Badge Sequence Diagram
- If you don't have a AirPrint printer, you can try printer simulator, like http://stackoverflow.com/questions/26030702/where-is-printer-simulator-in-xcode-6, Since Xcode 6 you have to download it separately: Hardware IO Tools
Final Submission Guidelines
Submission Deliverables
A complete list of deliverables can be viewed in the TopCoder Assembly competition Tutorial at: http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials
Below is an overview of the deliverables:
- xCode project with complete source code
- A complete and detailed deployment documented explaining how to deploy the application including configuration information and play with it.
Final Submission
For each member, the final submission should be uploaded to the Online Review Tool.