Challenge Overview
Challenge Overview:
Welcome to the HP Open Print Code Challenge - Multi-part Watermarking App! HP's Link Technology API allows for the hyperlinking of printed content through watermarks. They have developed a scanning technology which can detect these watermarks on printed materials like catalogs, postcards, or business cards, and provide the functionality to navigate to associated digital content on a mobile device. For more information about HP Link Technology you should familiarize yourself with the features, API and the mobile LinkReader scanning app at https://www.linkcreationstudio.com and you can watch a video here.
The goal of this challenge is to complete the HTML prototype based on the provided HTML prototype, HTML wireframe, storyboard designs, and requirements outlined in the Challenge Details section.
Challenge Details:
We already have the based prototype. The scope of this challenge is to complete the HTML prototype with the remaining pages and JavaScript functionalities outlined below.
General Requirements:
1. Create all the mentioned pages and interactions outlined below.
2. Use the provided HTML prototype as the base of your code.
3. Separate the image content folder from the image/design background. Use /i/ folder for the CSS backgrounds, and use /i/content/ folder for the image content.
4. Make sure that Desktop functionality should be working in Tablet device as well.
5. Always refer to the wireframe for page flows functionality and ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Pages:
The following are the pages and functionality needed for this challenge.
1. Project Details
- Open project-details.html
1.1. Images tab
- Add two buttons on the right of the “Delete” button in the upper right part of the page for “Add Image” and “Filter” button and change the Delete button to include the “Delete Selected” in it. The look and feel will be similar to the section found in my-projects.html. See 99.ProjectDetailsUpdate.png for the mockup of this section.
- Filter button - this will have the same functionality (show/hide) as shown in my-projects.html while its content will come from the wireframe. The date fields should be implemented as data picker.
- Add Image button leads to images-editor.html
- The Edit (pencil icon) button leads to Watermark Editor.
- Make the Image Name and Description a plain text instead of link.
- The Image Thumbnail link leads to the Watermark Editor.
- Remove the Edit Image Details button (image icon).
- Change the column header for the Image List from “Payoff” to “Regions”
- Implement a hover functionality on the Region name list to show the associated Payoff URL using a bootstrap tooltip.
1.2. Payoff Library tab
- Add two buttons on the right of the “Delete” button in the upper right part of the page for “Add Payoff” and “Filter” button and change the Delete button to include the “Delete Selected” in it.
- Add Payoff button will open a modal, see the wireframe for the content of this modal. Use the existing modal style of the provided prototype.
- Filter button - this will have the same functionality (show/hide) as shown in my-projects.html while its content will come from the wireframe.
- Implement the Edit functionality and its corresponding Save and Cancel buttons.
2. Watermark Editor
- Open images-editor.html and select an image from existing images or upload an image and click Next button to show the correct screen.
2.1 Add Region
- See 10.Add-Region.png for reference.
- To add a region, the user needs to click the “Add Region” button and need to click and drag on the image area.
- Once the desired dragging is complete, it will show a popover window for entering the region’s information. See 11.Create-New-Region.png for reference.
- The region name field is a text type instead of a select drop down.
- By default, the “Select existing payoff” is selected as Payoff Option. When user change it to “Create New Payoff”, the “Select Payoff Name” drop down field will be hidden and will instead show 2 fields for the Payoff Name and URL destination. See the wireframe for additional reference.
- Coordinates fields should be pre-filled with the actual location of the upper left corner of the region relative to the upper left corner of the image.
- Size fields (width and height) should be pre-filled with the actual width and height of the region.
- If the user adjust either the Coordinates or Size fields, the size or location of the region should be auto updated.
- “Show Advanced Features” will toggle to collapsed and expanded, its content will have the slider fields for the “Watermark Strength” and “Watermark Resolution”. See the wireframe for additional reference.
- Watermark Strength will have range value of 1 to 10.
- Watermark Resolution will have a range value of 1 to 2400
- The “Add Region” button will stay in active state until the user clicks on the “Cancel” or “Ok” button.
- Click the “Ok” button will add the region to the Region List drop down.
2.2 Show Region
- This will toggle the visibility of all the regions.
2.3 Edit Region
- Clicking the “edit” icon from the Region List drop down will show the popover information of the corresponding region that will allow the user to make adjustment.
- This will be similar to the Add Region popover information.
2.4 Delete Region
- Clicking the “delete” icon from the Region List drop down will remove the corresponding region from the list as well as from the watermark editor.
2.5 Overlapping Regions
- The watermark editor should prevent the user to add overlapping watermarks.
- Show a red bordered markings in any case the user drags or entered a value that will overlap to the other region. See 15.Add-overlapping-area.png for reference.
2.6 Drag Region
- User should be able to drag or change the location of a region on Add or Edit mode.
Browser Compatibility:
- IE10+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Windows & Mac OS)
- Latest Firefox (Windows & Mac OS)
- Tablet (Safari & Chrome)
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
CSS3
- Provide comments on any new CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use jQuery for this challenge.
- You are allowed to use jQuery Draggable and jQuery Resizable or any other library that meets the purpose.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Final Submission Guidelines
Submission Source Code
Deployment Guide