Wow, I am not the same person I was 3 months ago! This is the end of my OPW internship with OSRF, what a ride! These are just a few of the things I knew nothing or little about and now I know sooo much more 😀
Last week I posted about what I’ve done related to mesh simplification. The models shown on the following examples are lighter versions resulting from that, running more smoothly on my phone.
On this post I’ll summarize the main things I’ve done on the mobile interface. Lots have changed since the first prototype. After lots of usability tests and conversations with my mentors, we found tons of bugs, usability issues and desired features. This is the result 🙂
- Collapsible menu on side panel
- Clock and mode buttons on transparent header
- Notifications on the bottom (and an option to turn them off)
- Customizable radial menu using sprites on Three.js (I implemented it from scratch)
- World-aligned bounding box on selected model (even multi-link models)
- Navigating the scene: 1-finger orbit, 2-finger pan and pinch for zoom.
- Option to reset view to default angle
- Real time / Simulation time on clock pop-up
- Play / pause / reset physics engine
- Insert simple shapes dragging from the menu or tapping
- Spawned models first appear within view in a transparent version
- Spawned models can be dragged on the floor to be positioned
- Models can be deleted from the radial menu
- Translation and rotation modes accessible by radial menu or header buttons, which are synced
- Dragged markers are highlighted when touched
- Return to view mode tapping outside any models
- Manipulated model stays still
- Navigation possible during manipulation
- Hot-spot around markers so they can be selected more easily (that’s what you’re actually clicking on)
- Optional snap to grid for translation
- Works on portrait or landscape orientations
- Works with screens of any aspect ratio
- The same interface also works on desktop / mouse devices
- The radial menu and delete options are not available on desktop
- Manipulation on desktop has more options, like plane translations and 5 different rotation axes
- Keyboard hot-keys to change modes
- Descriptive tool-tips on mouse hover
- Handles well screen resizing
A cool thing I played with a while back was tilting the device to orbit the scene. It didn’t end up in this version but something like this might show up on future versions 😉
I couldn’t thank my mentors Steffi and Ian enough for their help, advice and patience!
I’m also really grateful to OSRF for choosing me and to GNOME for organizing the program.
And of course, thank you to all the people who tested the interface and gave their insights 🙂
I’d also like to thank the contributors to the libraries I’ve used:
Three.js
jQueryMobile
GTS
TinyXML
nanoflann
All the code of Gzweb Mobile can be found here and the wiki page about it here.
my Shumi 