search

52North / sosmobileclient

A HTML5 mobile client for the Sensor Observation Network by 52north
http://52north.org/
MIT License
7 stars 5 forks source link

readme

ARCHIVED

This project is no longer maintained and will not receive any further updates. If you plan to continue using it, please be aware that future security issues will not be addressed.

Mobile Sensor Web Client

This project is released. The target is a mobile client for the Sensor Observation Network by 52north. You will be able to choose from a variety of sensors, add them to your current view and inspect the values. This project is attended at the University of Hamburg, Germany, dep. VSIS.

Download and install

To install this app on your Anroid device, follow this link to the Play Store Entry:

https://play.google.com/store/apps/details?id=org.n52.sosmobileclient

You can also fork this repository and open the files as a Android project in your Eclpise ADT suite. To run the app in browser you need to exclude the Phonegap scripts in the index.html file. Then, just open the index.html in your Chrome Browser.

Status

11/10/2013 (end of project)

9/20/2013

8/20/2013

8/10/2013

8/7/2013

7/10/2013

6/28/2013

Target look and feel

The UI will be Android-oriented. It consists of 3 main pages/panels:

Frameworks

  1. Phonegap (Apache License Version 2.0) is wrapper for HTML5 web apps, that bundles and desploys the code as native app for nearly every device. It also provides access to the native phone API to enable features like camera, geolocation and data storage.
  2. JQuery 2.0.2 (MIT Open Source License) is the de-facto standard for client-side web apps. It is lightweight and provides an intuitive DOM manipulation API. It is an requirement for most of the libraries used in this project.
  3. Backbone.js 1.0.0 (MIT Open Source License) and underscore.js is a thin client-MVC framework which also handles the routing of the app. Since the Mobile SWC comes with no own server and only the REST API there was a need for a flexible MVC-architecture style.
  4. Bootstrap 3 (Apache License v2.0) Since Bootstrap has become flat, I'm glad to use it again. Not to mention its great JavaScript API.
  5. Handlebars (MIT Open Source License) is a templating engine that works well with backbone.js.
  6. Less (Apache License Version 2.0) compiles .less stylesheets at the beginning of an application. Less code is way cleaner than CSS and provides variables and nested rules.
  7. jQuery total storage (MIT Open Source License) is a small plugin that guarantees local storage of data - if HTML5 is not supported it falls automatically back to cookies. With total storage its easy to save and retrieve strings, numbers and even complex json objects in one line.
  8. chalbert/Backbone-Mediator (MIT Open Source License) an ultra small mediator-pattern plugin for backbone.js.
  9. Leaflet js (Self-made Open Source License) This is a great mobile-first map plugin with lots of extensions, like...
  10. Leaflet.markercluster (MIT Open Source License) which clusteres markers on a map layer, zooming to fit the bounds on click. Provides usability for my map with lots of stations.
  11. jQuery touchIt (MIT License)
  12. mobiscroll 2.7.0 (MIT License) provides beautiful date picker in native phone styles.
  13. moment.js 2.2.1 (MIT License) is a small but helpful date formatting and editing library.
  14. Flotcharts 0.8.1 (MIT License) beautiful and with lots of docs, functions and plugins. For now its the best MIT licensed charting library I've worked with. I had to do some fixes for mobile, though. But as announced it comes with the next versions.

Removed frameworks

Those frameworks were removed due to changes in requirements.

  1. Require.js 2.1.6 This project comes to a size where the different javascript files become difficult to handle. Require.js priovides some functions to manage the structured loading of those files. Removed. I need to load everything on startup.
  2. Gumby (MIT Open Source License) is a beautiful flat designed responsive theme, that detects the type of device and loads the JQuery Mobile essentials, if needed. Removed. JavaScript functions are not as good as in Twitter Bootstrap and since v3 Bootstrap is finally flat, too.
  3. JQuery Mobile 1.3.1 is mostly used as a complete mobile HTML5 framework. It provides lots of mobile elements such as popups, buttons, pages, navigation bars etc. Although it has its own navigation it is downgraded to a view- enhancing frontend framework. The "backend" of this javascript app will be Backbone.js. Removed. It is to heavy. I want my own styles and behaviour.
  4. JQuery Geo 1.0b1 (MIT Open Source License) is a JQuery plug-in and basically provides a map with with access to a tile server API. This project uses OpenStreetMap to display its location data. It has a very easy-to-use API with many functions. You can easily add a map to any JQuery enhanced page with only about 28 characters. Ryan Westphal discusses the different map plug-ins. Removed. This was an easy entry into the world of maps but there are no extensions and the docs don't feed my requirements.
  5. Highcharts 3.0.4 (Creative Commons BY-NC 3.0) one of the best charting APIs and compatible with legacy systems and browsers. Includes the full code which means that no data transfer is required. Removed. BY-NC is incompatible. Besides, Highcharts is to heavy.
  6. shutterstock/rickshaw (MIT Open Source License) This charting library only comes with bar and line charts but is incredible easy to use and lightweight. I works completely on the client. Removed. Too less possibilities to work with.

MF-Mobile

The MF mobile script is an ultra lightweight CSS and JQuery library that allows page oriented navigation with GPU enhancement through CSS3. It requires JQuery and LESS CSS. It is based upon an codrops example.

Setup MF-Mobile by adding these lines to your HTML file.

<link rel="stylesheet" href="https://github.com/52North/sosmobileclient/blob/master/css/mfmobilepages.css"> <!-- head part -->
<script src="https://github.com/52North/sosmobileclient/raw/master/js/libs/mfmobilepages.js"></script>
<div id="pt-main" class="pt-perspective">
  <!-- Pages come here -->
</div>

To create a page that comes from (and goes to) the right side just add the following <div> to your page. Note that the first page in your document is shown on startup.

<div class="pt-page" data-alignment="right" id="myPage">...</div>

To create a panel that comes from (and goes to) the left side just add this <div> to your page. All panels are hidden on startup.

<div class="mf-panel" data-alignment="left" id="myPanel">...</div>

To open panels or navigate to pages use Javascript (JQuery):

navigateToPage("#myPage"); //Navigates to a page with the given ID
openPanel("#myPanel"); //Opens the panel with the given ID

This closes all panels (note, that all panels will be automatically closed when navigating to any page):

closeAllPanels(); //Close all open panels

Configure the CSS in the settings part of mfmobile.css:

min-height: 300px; //best results with pixels
max-height: 80%; //best result with percentage
animation-duration: 0.4s !important; //duration of panel opening and closing as well as page navigation