Near-complete Web Interface for MarbleCloud
1. Single Page App vs. Multi Page App
This was a hard decision to make. SPAs are more dynamic, but more difficult to design and implement. MPAs are easier to write, using simple templating available in ownCloud, but require page reloading, thus providing a less desirable interaction. I ultimately went for SPA for both the challenge and improved user experience.
2. Leaflet for rendering maps
Leaflet.js is a pretty JS library that I used to display routes and bookmarks over an OpenStreetMap layer. The library is easy to use and extend; I highly recommend it for displaying any geographical data.
3. jqTree for a nice tree of items
I have used this jQuery plugin for displaying a tree of bookmarks. It receives data as JSON and outputs it as JSON, allowing node deletions, drag and drop and more.
4. jQuery for DOM manipulation and Pure CSS for visual consistency
DOM and AJAX business was done with jQuery and styling was based on Pure CSS for nice menus in all browsers.
Since an <img> is worth lots of <p>s, I give you some screenshots:
The main menu shown after loading the app.
The Bookmarks tree.
A selected bookmark.
A bookmark in rename mode.
The routes menu with a route selected.
Creating the web interface was an interesting and educational activity. It was my introduction to «real web programming».
Next in line is the user interface for Marble Touch (mobile devices).