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:
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.
11/10/2013 (end of project)
- Upgrade of Phonegap
- static/dynammic chart view
- Feedback on selecting time spans that are too big
- fixes buggy locate station feature
- gave up on browser - onyl mao is supported now
- splash screen and Android button support
- lots of bug fixes
- MobiScroll Datepicker for choosing the timespans "Android Style"
- Moment.js as helper library for working with times
- Rickshaw was replaced by XCharts which was immediately replaced by Flotcharts - which is the best charting library for me, for now.
- Migrates to JQuery 2
- comes with demo graph with zooming, reset, redraw
- new timespan picker menu
- color chooser for timeseries in legend
- provider button now inside the map
- funtion to hide timeseries temporarily
- Lots of new and improved services and controllers
- stopped pullution of global namespaces
- JQuery Geo replaced by Leaflet JS, much easier, better API, better docs, lots of extensions
- Highcharts replaced by Rickshaw due to Highcharts licensing model and Rickshaw's size and simple API
- Rebuilt with Leaflet JS
- Station clustering included
- nicer markers
- Buttons and markers are bigger and therefore better to reach by finger
- The front end is finally done right: no offscreen content, better transitions and positioning.
- History and legend work as intended.
- Controllers added. I feel like I have to think about my JS again.
- small Backbone-Mediator - some kind of architecture becomes necessary
- The Google Charting API is great but not enough. I want to kepp the data transfer as small as possible so I decided to include highcharts - which operates completely on the client side.
- The first usable version of the map is finished. With coloring of the stations, GPS positioning and choosing stations and timeseries.
- test of usability and speed of Google Charts API
- shows stations of current provider (updates automatically on change)
- shows station(s) (and available phenomenons) on tap on map
- supports legacy Android versions like Gingerbread
- changed package name to "n52"
- I removed JQuery Mobile. This framework was to heavy for my needs. I created an ultra lightweight less/js framework for page and panel navigation myself. (155 lines + 40 lines so far)
- I Changed the target Look&Feel. The legend is now planned as a 300px-panel that opens up on top of the "view-data" page.
- I (re-)added the map.
- Navigation between the main pages
- Frameworks work together
Target look and feel
The UI will be Android-oriented. It consists of 3 main pages/panels:
- "legend" This is the current data management page. You can see the different time series in the corresponding color of the chart. You can drop them from your chart here by tapping the bin-button.
- "data view" This is the main page. It shows the data in different ways (eg. as table data or line chart)
- "add" You can add new time series in four different ways: via a map, a browser, a search or your personal time series history. Additionally you are able to choose from a list of sensor data providers to update the stations.
- 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.
- 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.
- 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.
- Handlebars (MIT Open Source License) is a templating engine that works well with backbone.js.
- 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.
- 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.
- chalbert/Backbone-Mediator (MIT Open Source License) an ultra small mediator-pattern plugin for backbone.js.
- Leaflet js (Self-made Open Source License) This is a great mobile-first map plugin with lots of extensions, like...
- 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.
- jQuery touchIt (MIT License)
- mobiscroll 2.7.0 (MIT License) provides beautiful date picker in native phone styles.
- moment.js 2.2.1 (MIT License) is a small but helpful date formatting and editing library.
- 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.
Those frameworks were removed due to changes in requirements.
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="css/mfmobilepages.css"> <!-- head part --> <script src="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>
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
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