Tech

Responsive design for monitoring everywhere

April 24, 2014

Responsive design for monitoring everywhere

This post is also available in : Spanish Japanese

The first version of the current mobile console was created for Pandora FMS 4.1. Since then, a lot of improvements have been done on it. Specially to be adaptable to most kind of devices possible.

Hereby we made efforts to adapt the contain showed in the mobile console to all kind of aspect ratio and resolution screens.

MENU_mockup

For it, we designed a Responsive CSS with different layouts depends on the width of the screen to show more or less elements and change the elements size benefiting the space in bigger screens. The graphics and maps size are adapted to screen via ajax too.

In this way, the appearance is adapted to small screens (smartphones), and bigger screens (tablets), even you change the orientation of your device between portrait and landscape.

The following images show the same Pandora FMS section in standard web console (computer) and mobile devices (tablet devices and smartphones).


LOGIN_mockup
Login screen

TACTICAL_mockup
Tactical view

GROUPS_VIEW_mockup
Groups view

EVENT_LIST_mockup
Events list

EVENT_DETAIL_mockup
Event’s details

AGENT_LIST_mockup
Agents list

AGENT_VIEW_mockup
Agent’s view

NETWORKMAP_mockup
Network map

VISUAL_CONSOLE_mockup
Visual console
There are two ways of access this mobile console:

  • Using the browser of our mobile device: Any mobile device browser (Any kind of smartphone or tablet with net connection). Only loading the path ‘/mobile’ from our Pandora FMS installation path.

    For example: http://ourcompany.es/pandora_console/mobile

  • Installing the Pandora FMS App for Android or iOS (Iphone/Ipad). You will configure the app with a Pandora FMS installation.

 


Written by:



One comment
  1. Avatar

    better wins

    Thanks for finally writing about > Responsive design for monitoring everywhere - Pandora FMS - Monitoring blog < Liked it!

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.