Climaps cover page image

Climaps Project - Guided Tour

Jorge Albaladejo, <correo@jorgealbaladejo.com>

Introduction - The Climaps Project

Climaps is a meteorological data storing, processing and visualization system by Sensorscope. Sensorscope is a start-up company from the EPFL, a spin-off of a project with the same name.


Climaps is a complete weather monitoring solution. Climaps is a complete weather monitoring solution.

Introduction - Technologies used

Climaps has been completely designed and coded over free software solutions, for the sake of reliability, stability, portability, documentation, and last but not least, budget restrictions.


Climaps uses a LAMP environment. Climaps uses a LAMP environment.

Introduction - System architecture

The whole system has been designed and build based on a layers architecture, as shown in the pyramide diagram. A special effort has been done to rely the most logic, code and processing force on the bottom layers. This way, the higher level programming and design is faster and more powerful with less code lines.


Climaps architecture. Climaps architecture.

Maintenance layer

The maintenance layer includes several scripts and database functions that are executed periodically thanks to the cron daemon.


Several maintenance scripts keep the database running smoothly. Several maintenance scripts keep the database running smoothly.

Data layer - MySQL model

The data layer is implemented on MySQL on a Ubuntu server, and has needed some extra engineering in order to manage a high geographical and temporal data set.


Data model partition schema. Data model partition schema.

Data layer - Advanced Features

Other MySQL resources have been used to provide the better database performance possible: triggers, stored functions and stored views.


Data layer - Security

Security and data privacy is a subject itself. It has been implemented in Climaps through its different layers. It starts with MySQL, whose clients are restricted to the only resources they need to operate.


Application layer - Code Igniter and MVC

Code Igniter is a lightweight MVC framework written in PHP which helps daily web development tasks by implementing most common issues like security, privacy, data access, and HTML generation.


Hierarchy used in Climaps application architecture. Hierarchy used in Climaps application architecture.

Application layer - Subsystems

The overall application flow is managed by MY_Controller parent class, but it relies also on several libraries which control a specific part of the system.


Several subsystems help to use lighter controllers. Several subsystems help to use lighter controllers.

Application layer - Interface and server modes

Code Igniter is used as a backend application which can render HTML views, XML or JSON messages, or act as a server to receive data.


Climaps has a PHP back-end which outputs text in different formats. Climaps has a PHP back-end which outputs text in different formats.

Interface layer - jQuery and AJAX

The interfaces have been designed for ergonomy, usability and a best interaction experience. They are mostly built in HTML + CSS + JavaScript. To write JavaScript, jQuery has been adopted as a framework, due to its capabilities, performance and ease to write code.


Climaps back-end writes the format that the AJAX request is expecting. Climaps back-end writes the format that the AJAX request is expecting.

Interface layer - connecting to PHP application

JavaScript is a client-side scripting language while PHP is a server-side technology. Data persistence is always a trouble that has been fixed on PHP by using sessions stored into a database. However, the normal HTTP request just renders a static HTML view. JavaScript will start from that and change the application status, the view itself and, in some cases, even the user session.


PHP initializes JS variables, and JS updates them through AJAX calls. PHP initializes JS variables, and JS updates them through AJAX calls.

Features - Map view

The map view is the most used interface in Climaps. It integrates a Google Maps API and uses JavaScript and AJAX (jQuery) to load data periodically. The entire interface has been designed for the best user experience and ergonomy, and has been programmed to use all the available space on the browser window.


Climaps map view integrates Google Maps and custom applications. Climaps map view integrates Google Maps and custom applications.

Features - Plotter

The plotter interface implements a third party application called EJSChart. It works with a provided JS API which loads XML data sets into graphs.


Plotter interface implements EJSChart and allows advanced graphs.

Features - Downloader

Downloader interface shares some principles used on the design of the plotter interface, but it has to deal with far more options. The goal of this interface is to provide a versatile tool to download data in the exact formate required by each client, so that it is suitable for their processing scripts. Thus, data files have to be generated on the fly instead of being pregenerated with default options.


The downloader interface allows on the fly file generation.

Features - other interfaces

Climaps is continuously growing and new interfaces are being created and enhanced.


The overview interface provides a quicker way to monitor stations status.

Features - Alarms: web application

The alarms system is particularly important and interesting as it is implemented in all application layers, from server to interface.


Software alarms can be set up easily with Climaps. Software alarms can be set up easily with Climaps.

Features - Alarms: server scripts

The core functionality of the alarms system is done by a couple of server scripts in Python, which analyse last stations data and compares it with users alarm conditions to determine whether an alarm should be triggered. The second scripts reads all triggered alerts' information to determine whether and how and who should be notified about the event.


Features - Cameras: adapting the hardware

Cameras are a particular type of hardware attached to stations. They can be recognized by the latters and registered in Climaps as sensors, but they only work autonomously. Thus, the pictures sent must be received, treated and stored on a different way.


Features - Cameras: web interface

Once pictures are stored on a filesystem folder, and registered in a database, it is easy to retrieve them for use on an interface. Besides, an additional effort has been done to integrate the camera viewer into the map interface, using the maximum space available, and letting user interact with the images.


Thanks to jQuery, still pictures can be animated as a movie. Thanks to jQuery, still pictures can be animated as a movie.

Features - Administration: common interfaces

Administrative interfaces are one of the most important part of Climaps application. However, they have been left to be explained at the end because their implementation is quite trivial, once the correct system and parent classes have been developed.


Common edition interface; all administration pages share the same principles. Common edition interface shared by all administration pages.

Features - Administration: some examples

Despite a 90% of administrative interfaces share principles and code, there are a few specific examples that may be worthy to talk about.


Detail of the measure points edition interface. Detail of the measure points edition interface.

Features - Statistics and facts

Climaps is a medium size application designed to be scalable to become a big fat boy. As by the date of this report (end 2010), some numbers ilustrate its impact:


Database use statistics as of 02/10/2010.
LOC Summary:
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
PHP                            289           5344           9928          21058
Javascript                      25           1159           1826           5941
CSS                             66            273            271           5245
HTML                            26            244            120           2691
SQL                              3            617            387           2579
Bourne Shell                     9            300            156           1310
Perl                             3             99            201            867
Python                           9            221            163            660
-------------------------------------------------------------------------------
SUM:                           430           8257          13052          40351
-------------------------------------------------------------------------------