Challenge Overview
Welcome to "Hercules - PxScene UX Animation Interaction UI Prototype Challenge". In this challenge, we need to add and update several new features and interactions to our Hercules Prototype created using PxScene framework. Read more details below and Join us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
PX is a framework (see http://www.pxscene.org/) for creating cross-platform UI applications using JavaScript. We are currently developing a working PX application to show its capabilities which can be shared with all developers and partners. Since we are focused on the video streaming business, we want to use this as the main ideas for the creation of the application. The application will be an Over-the-Top (OTT) video application, like Netflix, with the added note that you have not only on-demand television shows and movies but also live television streams available for users.
Target Device
- We are targeting TV displays (1280x720) to account for future set-top box implementation.
Target Audience
- Client partners and their developers. We want them excited about what you can do with PX Framework - how good it can look and perform. We need your help with the looking good part!
More About PxScene
- If you want to try out PxScene, you can download it here:
http://www.pxscene.org/
http://www.pxscene.org/docs/apis/index.html
https://github.com/pxscene/pxscene
- PxScene applications are implemented in Javascript but use custom APIs for drawing and animations.
- You are expected to investigate the documentation for PxScene and implement things according to PxScene best-practices.
- Further examples can be found here: https://github.com/pxscene/pxscene/tree/gh-pages/examples/px-reference
Screen Update Requirements
1) General Requirements
- There are 2 key important features that we want to add into the prototype:
-- Provide fully navigable via the keyboard
-- We would like animations added to the UI
- To accomplish those goals, you're gonna need to learn and get familiar about PxScene, because it's all created using Javascript.
- Do not break the existing prototype functionalities.
- Make sure the animation transition smooth
2) Remote Keypad Navigation Features
- Check "Keyboard Mapping.png" for documentation about navigation via remote keypad
- Needs to make sure all the following navigation can be navigate using keypad in the remote:
-- Main Menu navigation (Home, Live, etc)
-- Jump Navigation (from main menu to movie list to category, etc)
-- Personal navigation (Trending, Pinned, On-Demand, Recommendations)
-- Category navigation (Action, Horror/Gore, Comedy, etc),
-- Scrolling movie list navigation (horizontal scrolling),
-- Navigation when watching movies/show
-- Searching (navigate to search textbox and enter text, vertical scrolling search result)
3) Animations Interaction Features
- Splash screen, can we make the logo rotate while loading?
- Can we made Transition to each screen, for example, from splash screen to dashboard more smoothly? some effect like fade in will be great
- When user hovers or navigate to button, some smooth effect for the hover or selected state is expected
- When user do horizontal scrolling over the movie list, can we add some smooth transition here? also, can we made the selected movies got some light effect?
- When user paused the movie, needs to add animation when showing the menus navigation
- When user select a movie and goes to movie playing screen, can we add some interaction here?
- Transitions and animation for each requirement above are up to you. The important thing we need to ensure is the animation needs to be smooth, exciting for the user and user-friendly.
Documentation
https://drive.google.com/drive/folders/1gnB1RmXgGqt8V6TLAGQO3QyONDCjI7RP?usp=sharing
- Existing JS Prototype (Read how to deploy the prototype in README.md)
- PxScene installer
- Keypad Mapping
- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
PX is a framework (see http://www.pxscene.org/) for creating cross-platform UI applications using JavaScript. We are currently developing a working PX application to show its capabilities which can be shared with all developers and partners. Since we are focused on the video streaming business, we want to use this as the main ideas for the creation of the application. The application will be an Over-the-Top (OTT) video application, like Netflix, with the added note that you have not only on-demand television shows and movies but also live television streams available for users.
Target Device
- We are targeting TV displays (1280x720) to account for future set-top box implementation.
Target Audience
- Client partners and their developers. We want them excited about what you can do with PX Framework - how good it can look and perform. We need your help with the looking good part!
More About PxScene
- If you want to try out PxScene, you can download it here:
http://www.pxscene.org/
http://www.pxscene.org/docs/apis/index.html
https://github.com/pxscene/pxscene
- PxScene applications are implemented in Javascript but use custom APIs for drawing and animations.
- You are expected to investigate the documentation for PxScene and implement things according to PxScene best-practices.
- Further examples can be found here: https://github.com/pxscene/pxscene/tree/gh-pages/examples/px-reference
Screen Update Requirements
1) General Requirements
- There are 2 key important features that we want to add into the prototype:
-- Provide fully navigable via the keyboard
-- We would like animations added to the UI
- To accomplish those goals, you're gonna need to learn and get familiar about PxScene, because it's all created using Javascript.
- Do not break the existing prototype functionalities.
- Make sure the animation transition smooth
2) Remote Keypad Navigation Features
- Check "Keyboard Mapping.png" for documentation about navigation via remote keypad
- Needs to make sure all the following navigation can be navigate using keypad in the remote:
-- Main Menu navigation (Home, Live, etc)
-- Jump Navigation (from main menu to movie list to category, etc)
-- Personal navigation (Trending, Pinned, On-Demand, Recommendations)
-- Category navigation (Action, Horror/Gore, Comedy, etc),
-- Scrolling movie list navigation (horizontal scrolling),
-- Navigation when watching movies/show
-- Searching (navigate to search textbox and enter text, vertical scrolling search result)
3) Animations Interaction Features
- Splash screen, can we make the logo rotate while loading?
- Can we made Transition to each screen, for example, from splash screen to dashboard more smoothly? some effect like fade in will be great
- When user hovers or navigate to button, some smooth effect for the hover or selected state is expected
- When user do horizontal scrolling over the movie list, can we add some smooth transition here? also, can we made the selected movies got some light effect?
- When user paused the movie, needs to add animation when showing the menus navigation
- When user select a movie and goes to movie playing screen, can we add some interaction here?
- Transitions and animation for each requirement above are up to you. The important thing we need to ensure is the animation needs to be smooth, exciting for the user and user-friendly.
Documentation
https://drive.google.com/drive/folders/1gnB1RmXgGqt8V6TLAGQO3QyONDCjI7RP?usp=sharing
- Existing JS Prototype (Read how to deploy the prototype in README.md)
- PxScene installer
- Keypad Mapping
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool