Near-complete Web Interface for MarbleCloud

After finishing the server side of MarbleCloud for both routes and bookmarks, I started working on the web interface. This was a rather long process during which I have learnt many JavaScript and CSS tricks: AJAX, DOM manipulation, fast CSS bootstrapping.

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.

    I wrote a little JS library to provide state-related functionality. You can see it on GitHub. URL routing is also managed by one of my libraries, router.js.

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).

1 note

  1. andreiduma posted this