* Themable support

 * add dmblack theme and make default
 * better webapp management
 * fixed orientation on ff mobile
 * better manage of snapper panels
 * fix minor bugs in the web gui
 * styled scrollbars

Databases/createdb/91-gui_theme.sql

+ALTER TABLE  `users` ADD  `gui_theme` VARCHAR( 255 ) NOT NULL DEFAULT  'dmblack', ADD INDEX (  `gui_theme` ) ;

Web/htdocs/gui/buttons/actions.php

@@ -9,7 +9,7 @@ if(intval($button['status2'])>0) {
    $badgetext=$button['text2_on']; 
 }
 ?>
-<div class="devlist-item">
+<div class="devlist-item devlist-item-theme-<?=$_DOMOTIKA['gui_theme']?>">
    <div class="devlist-row">
       <div class="devlist-leftpart">
             <h4 class="devlist-name"><?=$button['button_name']?></h4>

Web/htdocs/gui/buttons/analog.php

@@ -23,7 +23,7 @@ if(floatval($button['status'])==floatval($button['minval']))
 $pbcoln="progress-bar-";
 $perc=(floatval($button['status'])-floatval($button['minval']))*100/(floatval($button['maxval'])-floatval($button['minval']))
 ?>
-<div class="devlist-item">
+<div class="devlist-item devlist-item-theme-<?=$_DOMOTIKA['gui_theme']?>">
    <div class="devlist-row">
       <div class="devlist-leftpart">
             <h4 class="devlist-name"><?=$button['button_name']?></h4>

Web/htdocs/gui/buttons/input.php

@@ -18,7 +18,7 @@ if(intval($button['status'])>0) {
    $button_text=$button['text_on'];
 }
 ?>
-<div class="devlist-item">
+<div class="devlist-item devlist-item-theme-<?=$_DOMOTIKA['gui_theme']?>">
    <div class="devlist-row">
       <div class="devlist-leftpart">
             <h4 class="devlist-name"><?=$button['button_name']?></h4>

Web/htdocs/gui/buttons/output.php

@@ -12,7 +12,7 @@ $button_switchar=array(
    );
 ?>
 <?//print_r($button['inputs']);?>
-<div class="devlist-item">
+<div class="devlist-item devlist-item-theme-<?=$_DOMOTIKA['gui_theme']?>">
    <div class="devlist-row">
       <div class="devlist-leftpart">
          <h4 class="devlist-name"><?=$button['button_name']?></h4>

Web/htdocs/gui/buttons/relay.php

@@ -23,7 +23,7 @@ if($ampere>0 && $ampere<8) {
 }
 
 ?>
-<div class="devlist-item">
+<div class="devlist-item devlist-item-theme-<?=$_DOMOTIKA['gui_theme']?>">
    <div class="devlist-row">
       <div class="devlist-leftpart">
             <h4 class="devlist-name"><?=$button['button_name']?></h4>

Web/htdocs/gui/css/style.css

@@ -162,6 +162,9 @@
    height: 100%;
    bottom: 50px;
 }
+.theme-dmblack {
+   background-color: #000;
+}
 
 .container {
    padding-top: 100px;
@@ -332,6 +335,11 @@ input::-webkit-input-speech-button {
    display:table;
 }
 
+.devlist-item-theme-dmblack{
+   background-color: rgb(24,24,24);
+   border: 0px;
+}
+
 .devlist-row {
    display:table-row;
    margin-top: 0px;
@@ -447,6 +455,52 @@ input::-webkit-input-speech-button {
 .flowplayer { background-image: url(/resources/img/logo_unixmedia.png)}
 .flowplayer .fp-duration { display:none; }
 
+.panel-theme-dmblack {
+   background-color: #000;
+   border: 0px;
+}
+
+.panel-head-theme-dmblack {
+   background-color: #2a2ac0;
+   border-bottom: 0px;
+   margin: 0px;
+}
+
+
+body.theme-dmblack {
+   color: #fff;
+}
+
+
+@media (min-width: 640px) {
+
+   body {
+      scrollbar-base-color: #C0C0C0;
+      scrollbar-base-color: #C0C0C0;
+      scrollbar-3dlight-color: #C0C0C0;
+      scrollbar-highlight-color: #C0C0C0;
+      scrollbar-track-color: #EBEBEB;
+      scrollbar-arrow-color: black;
+      scrollbar-shadow-color: #C0C0C0;
+      scrollbar-dark-shadow-color: #C0C0C0;
+   }
+
+   ::-webkit-scrollbar { width: 10px; height: 3px;}
+   ::-webkit-scrollbar-button {  background-color: #666; }
+   ::-webkit-scrollbar-track {  background-color: #999;}
+   ::-webkit-scrollbar-track-piece { background-color: #ffffff;}
+   ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
+   ::-webkit-scrollbar-corner { background-color: #999;}
+   ::-webkit-resizer { background-color: #666;}
+
+
+   ::-moz-scrollbar { width: 10px;}
+   ::-moz-scrollbar-track { -moz-box-shadow: inset 0 0 6px #fff); background:#000;}
+   ::-moz-scrollbar-thumb { border-radius: 10px; -moz-box-shadow: inset 0 0 6px #fff; background:#7A252B;}
+
+};
+
+
 @media (max-width: 640px) {
   .navbar-title {
      text-align: left;

Web/htdocs/gui/footjs/settings.php

@@ -12,6 +12,7 @@ var updateUser = function(r) {
   $("#lang").val(r.data.language);
   $("#webspeech").val(r.data.webspeech);
   $("#speechlang").val(r.data.speechlang);
+  $("#gui_theme").val(r.data.gui_theme);
   if(r.data.tts==1)
     $('#tts-switch').bootstrapSwitch('setState', true); //$("#tts").attr('checked', true);
   else
@@ -36,7 +37,10 @@ $("#userform").on("submit", function(event) {
       $.ajax({url: "/rest/v1.2/users/me/json", type:"PUT", data: $(this).serialize(),
                success: function(res) {
                   popupFader('success', 'SUCCESS:','Utente aggiornato correttamente...');
-                  playTTS('Utente aggiornato correttamente');
+                  var a = playTTS('Utente aggiornato correttamente');
+                  a.addEventListener("ended", function(){
+                     $.get("/rest/v1.2/users/refreshme/json", function(){location.reload();});
+                  });
                },
                error: function(res) {
                   msg=$.parseJSON(res.responseText).data;

Web/htdocs/gui/includes/common.php

@@ -36,6 +36,10 @@ $dmcolors=array(
 include_once("common_includes.php");
 @include_once("config.php");
 include_once("translations.php");
+
+//print_r($_DOMOTIKA);
+
+
 $lang=$_DOMOTIKA['language'];
 $tr = new Translations($lang);
 $img = new Translations("icons");

Web/htdocs/gui/includes/page.php

@@ -8,7 +8,7 @@
 <?=$PAGE_BUFFER['head']?>
 <?=$PAGE_ADDHEAD?>
   </head>
-  <body>
+  <body class="theme-<?=$_DOMOTIKA['gui_theme']?>">
 <?=$PAGE_BUFFER['alerts']?>
 <?=$PAGE_BUFFER['navbar']?>
    <div class="drawers">
@@ -17,8 +17,8 @@
 <?=$PAGE_BUFFER['right_drawer']?>
 <?=$PAGE_ADDRIGHT?>
    </div> <!-- drawers -->
-   <div id="content" class="primarycontainer scrollable">
-   <div class="container">
+   <div id="content" class="primarycontainer scrollable theme-<?=$_DOMOTIKA['gui_theme']?>">
+   <div class="container theme-<?=$_DOMOTIKA['gui_theme']?>">
 <?=$PAGE_BUFFER['content']?>
    </div> <!-- container -->
    </div> <!-- primarycontainer -->

Web/htdocs/gui/js/domotika.js

 <? @include_once("../includes/common.php");?>
    //document.documentElement.requestFullscreen();
 
+   //window.screen.mozLockOrientation('portrait');
+
+   var windowWidth = window.screen.width < window.outerWidth ?
+                  window.screen.width : window.outerWidth;
+   var mobile = windowWidth < 500;
 
    var ttsEnabled=<?=$_DOMOTIKA['tts']?>; 
    var slideEnabled=<?=$_DOMOTIKA['slide']?>;
@@ -12,6 +17,70 @@
    //})
 
    var audioTagSupport = !!(document.createElement('audio').canPlayType);
+   /*  
+   function DoFullScreen() {
+      if (!document.fullscreenElement &&    // alternative standard method
+            !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
+         if (document.documentElement.requestFullscreen) {
+            document.documentElement.requestFullscreen();
+         } else if (document.documentElement.msRequestFullscreen) {
+            document.documentElement.msRequestFullscreen();
+         } else if (document.documentElement.mozRequestFullScreen) {
+            document.documentElement.mozRequestFullScreen();
+         } else if (document.documentElement.webkitRequestFullscreen) {
+            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+         }
+      }
+   }
+   */
+
+   if(mobile)
+   { 
+      if(window.navigator.userAgent.match(/firefox/i) && window.navigator.userAgent.match(/mobile/i))
+      {
+
+         var installbutton = $("#installbutton");
+         var port="";
+         if(document.location.port)
+            var port=":"+document.location.port;
+         var manifest_url = document.location.protocol+"//"+document.location.host+port+"<?=str_replace("/js/domotika.js","",$BASEGUIPATH)?>/manifest.webapp";
+         
+         function installFFApp(ev) {
+            ev.preventDefault();
+            var myapp = navigator.mozApps.install(manifest_url);
+            myapp.onsuccess = function(data) {
+               $("#install_ff").hide()
+               console.log(this);
+               alert('Web Application installed.');
+            };
+            myapp.onerror = function() {
+               console.log('Install failed, error: ' + this.error.name);
+               alert('Install failed, error: ' + this.error.name);
+            };
+         };
+   
+
+         var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+         installCheck.onsuccess = function() {
+            if(installCheck.result) {
+               $("#install_ff").hide();
+            } else {
+               $("#install_ff").show();
+               installbutton.on('click', installFFApp);
+            };
+         };
+      }
+
+      if(jQuery.isFunction(window.screen.lockOrientation))
+         window.screen.lockOrientation('portrait');
+      else if(jQuery.isFunction(window.screen.mozLockOrientation))
+         window.screen.mozLockOrientation('portrait');
+      else if(jQuery.isFunction(window.screen.msLockOrientation))
+         window.screen.msLockOrientation('portrait');
+      else if(jQuery.isFunction(window.screen.webkitLockOrientation))
+         window.screen.webkitLockOrientation('portrait');
+   }
       
    function tmpPopover(el, cont, placement, timeout)
    {
@@ -36,11 +105,20 @@
       if (!audioTagSupport) return false;
       if (text=='') return false;
       if (ttsEnabled!=1 && force===false) return false;
-      var audio = document.createElement('audio');
+      if($("playTTS_audio").length)
+      {
+         var audio = $("playTTS_audio");
+      }
+      else
+      {
+         var audio = document.createElement('audio');
+         audio.setAttribute('id' , 'playTTS_audio');
+      }
       // XXX BUG: webkit based browsers seems to not work with https:// in <audio>, so, we fix this to http
       audio.setAttribute('src', 'http://translate.google.com/translate_tts?tl='+lang+'&q=' + encodeURIComponent(text));
       audio.load();
       audio.play();
+      return audio;
    }  
 
    function speechResult(data) {
@@ -141,12 +219,25 @@
    <? } ?>   
 
     <? if($left || $right) { ?>
+
+   function calcSnapSize()
+   {
+      if($(window).width()>768)
+         var mval=Math.min(Math.ceil((75/100)*$(window).width()), 800);
+      else
+         var mval=Math.max(Math.ceil((75/100)*$(window).width()), 266);
+      return mval
+   }
+
+   $(document).ready(function() {
+      mval = calcSnapSize();
+      $(".left-drawer").css("width", mval);
+      $(".right-drawer").css("width", mval)
+   });
+
    snapper.on('animating',
       function(e) {
-         if($(window).width()>768)
-            mval=Math.min(Math.ceil((75/100)*$(window).width()), 800);
-         else
-            mval=Math.max(Math.ceil((75/100)*$(window).width()), 266);
+         var mval = calcSnapSize();
          <? if($left) { ?>
          if(snapper.state().info.opening=='left' && snapper.state().state!='left' && $(".left-drawer").css("width")!=mval+"px")
          {

Web/htdocs/gui/pages/settings.php

@@ -4,7 +4,7 @@
     <h1>Settings</h1>
 <ul class="nav nav-tabs">
   <li <? if($GUISUBSECTION=="") {?>class="active"<?}?>><a href="<?=$BASEGUIPATH.'/'.$GUISECTION?>">User options</a></li>
-  <li <? if($GUISUBSECTION=="gui") {?>class="active"<?}?>><a href="<?=$BASEGUIPATH.'/'.$GUISECTION?>/gui">GUI options</a></li>
+ <!-- <li <? if($GUISUBSECTION=="gui") {?>class="active"<?}?>><a href="<?=$BASEGUIPATH.'/'.$GUISECTION?>/gui">GUI options</a></li> -->
 </ul>
 <? if($GUISUBSECTION=="") {?>
 <div class="formcontainer">
@@ -91,6 +91,15 @@
          </select>
       </div>
    </div>
+   <div class="form-group">
+      <label for="gui_theme" class="col-lg-2 control-label">GUI Theme:</label>
+      <div class="col-lg-3">
+         <select name="gui_theme" id="gui_theme" class="form-control">
+            <option value="dmblack">DM Black</option>
+            <option value="dmwhite">DM White</option>
+         </select>
+      </div>
+   </div>
    <div class="form-group">
    <label for="mobilehome" class="col-lg-2 control-label"></label>
       <div class="col-lg-3">
@@ -99,7 +108,7 @@
    </div>
 </form>
 <div>
-<?} elseif($GUISUBSECTION=="gui") { // $GUISUBSECTIONOPT?>
+<?}/* elseif($GUISUBSECTION=="gui") { // $GUISUBSECTIONOPT?>
 <ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Profile</a></li>
@@ -122,7 +131,7 @@
 
 </form>
 </div>
-<?} else  {
+<?} */ else  {
    header("Location: $BASEGUIPATH/settings");
    exit(0); 
 }?>

Web/htdocs/gui/panels/content/cameras.php

@@ -5,11 +5,11 @@ if($panel && is_array($panel)) {
    $visible="";
    if($panel['panel_visible']!="all") $visible=$panel['panel_visible'];
 ?>
-      <div class="panel panel-default col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height: auto">
+      <div class="panel panel-default panel-theme-<?=$_DOMOTIKA['gui_theme']?> col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height: auto">
 <?
    if($panel['panel_title']!="") {
 ?>
-         <div class="panel-heading"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
+         <div class="panel-heading panel-head-theme-<?=$_DOMOTIKA['gui_theme']?>"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
 <? 
    }
 

Web/htdocs/gui/panels/content/macrobuttons.php

@@ -5,11 +5,11 @@ if($panel && is_array($panel)) {
    $visible="";
    if($panel['panel_visible']!="all") $visible=$panel['panel_visible'];
 ?>
-      <div class="panel panel-default col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height: <?=$panel['panel_height']?>">
+      <div class="panel panel-default panel-theme-<?=$_DOMOTIKA['gui_theme']?> col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height: <?=$panel['panel_height']?>">
 <?
    if($panel['panel_title']!="") {
 ?>
-         <div class="panel-heading"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
+         <div class="panel-heading panel-head-theme-<?=$_DOMOTIKA['gui_theme']?>"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
 <? 
    }
 

Web/htdocs/gui/panels/content/standard.php

@@ -10,11 +10,11 @@ if($panel && is_array($panel)) {
       $visible.=" hidden-xs hidden-sm";
    }
 ?>
-      <div class="panel col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height:<?=$panel['panel_height'];?>;">
+      <div class="panel panel-theme-<?=$_DOMOTIKA['gui_theme']?> col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height:<?=$panel['panel_height'];?>;">
 <?
    if($panel['panel_title']!="") {
 ?>
-         <div class="panel-heading"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
+         <div class="panel-heading panel-head-theme-<?=$_DOMOTIKA['gui_theme']?>"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
 <? 
    }
 
@@ -36,7 +36,7 @@ if($panel && is_array($panel)) {
 ?>
     <div class="domotika-panel<?=$dmfull;?>" <?=$dmheight;?>>
       <div class="home-panel" <?=$dmheight;?>>
-         <div class="list-group">     
+         <div class="list-group theme-<?=$_DOMOTIKA['gui_theme']?>">     
 <?
    foreach($buttonar as $button) {
       if(file_exists($FSPATH."/buttons/".$button['devtype'].".php"))

Web/htdocs/gui/panels/content/video.php

@@ -5,11 +5,11 @@ if($panel && is_array($panel)) {
    $visible="";
    if($panel['panel_visible']!="all") $visible=$panel['panel_visible'];
 ?>
-      <div class="panel panel-default col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height: auto">
+      <div class="panel panel-default panel-theme-<?=$_DOMOTIKA['gui_theme']?> col-lg-<?=$panel['panel_cols']?> panel-media-low <?=$visible?>" style="height: auto">
 <?
    if($panel['panel_title']!="") {
 ?>
-         <div class="panel-heading"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
+         <div class="panel-heading panel-head-theme-<?=$_DOMOTIKA['gui_theme']?>"><h2 class="panel-title"><?=$panel['panel_title']?></h2></div>
 <? 
    }
 

Web/htdocs/gui/parts/footbar.php

@@ -3,8 +3,13 @@
 $webspeech="";
 if($_DOMOTIKA['webspeech']=='touch')
    $webspeech='x-webkit-speech="x-webkit-speech"';
+
+$themeclass="";
+if($_DOMOTIKA['gui_theme']=='dmblack')
+   $themeclass="navbar-inverse";
+
 ?>
-<div class="navbar navbar-fixed-bottom">
+<div class="navbar <?=$themeclass?> navbar-fixed-bottom">
    <a class="navbar-brand" href="http://www.unixmedia.it" target=_blank>Domotika</a>
    <p class="navbar-text hidden-sm"><a href="http://www.unixmedia.it" class="navbar-link" target=_blank>by Unixmedia</a></p>
    <button id="speechbutton" type="button" class="btn btn-default navbar-btn pull-right speechbutton"></button>
@@ -19,10 +24,10 @@ if($_DOMOTIKA['webspeech']=='touch')
    </button>
    <a class="btn btn-default navbar-btn pull-right homebutton" href="<?=$BASEGUIPATH;?>"></a>
 
-  <div id="notifypanel" class="panel notifypanel">
-    <div class="panel-heading"><h4>Notifications<i class="glyphicon glyphicon-remove pull-right" id="notify-removeall"></i></h4></div>
+  <div id="notifypanel" class="panel panel-theme-<?=$_DOMOTIKA['gui_theme']?> notifypanel">
+    <div class="panel-heading panel-head-theme-<?=$_DOMOTIKA['gui_theme']?>"><h4>Notifications<i class="glyphicon glyphicon-remove pull-right" id="notify-removeall"></i></h4></div>
     <div class="notifylist">
-      <div id="notifications" class="list-group" data-snap-ignore="true">
+      <div id="notifications" class="list-group theme-<?=$_DOMOTIKA['gui_theme']?>" data-snap-ignore="true">
       </div>
     </div>
   </div>

Web/htdocs/gui/parts/head.php

@@ -21,6 +21,7 @@
     <link href="/resources/full-glyphicons/css/glyphicons.css" rel="stylesheet" media="screen">
     <link href="/resources/bootstrap-switch/static/stylesheets/bootstrap-switch.css" rel="stylesheet" media="screen">
     <link href="<?=$BASEGUIPATH;?>/css/style.css" rel="stylesheet" media="screen" />
+
     <? } else { ?>
     <link href="<?=$BASEGUIPATH;?>/css/combined.min.css" rel="stylesheet" media="screen" />
     <? } ?>

Web/htdocs/gui/parts/navbar.php

@@ -13,8 +13,13 @@ function isActive($name)
    }
    return;
 }
+
+$themeclass="";
+if($_DOMOTIKA['gui_theme']=='dmblack')
+   $themeclass="navbar-inverse";
+
 ?>
-<div id="topbar" class="navbar navbar-fixed-top">
+<div id="topbar" class="navbar <?=$themeclass?> navbar-fixed-top">
    <? if($left) { ?>
     <button id="open-left" type="button" class="navbar-open navbar-openleft">
       <i class="glyphicon glyphicon-indent-left"></i>
@@ -39,6 +44,7 @@ function isActive($name)
              <li><a href="<?=$BASEGUIPATH?>"/>Domotika GUI</a></li>
              <? } ?>
              <li><a href="/admin/">admin gui</a></li>
+             <li id="install_ff" style="display:none"><a id="installbutton">install as webapp</a></li>
              <li><a href="/__LOGOUT__/">Logout</a></li>
           </ul>
        </li>

Web/resources/js/jquery.mousewheel.js

+/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Version: 3.1.9
+ *
+ * Requires: jQuery 1.2.2+
+ */
+
+(function (factory) {
+    if ( typeof define === 'function' && define.amd ) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS style for Browserify
+        module.exports = factory;
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+    var toFix  = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
+        toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
+                    ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
+        slice  = Array.prototype.slice,
+        nullLowestDeltaTimeout, lowestDelta;
+
+    if ( $.event.fixHooks ) {
+        for ( var i = toFix.length; i; ) {
+            $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
+        }
+    }
+
+    var special = $.event.special.mousewheel = {
+        version: '3.1.9',
+
+        setup: function() {
+            if ( this.addEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.addEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = handler;
+            }
+            // Store the line height and page height for this particular element
+            $.data(this, 'mousewheel-line-height', special.getLineHeight(this));
+            $.data(this, 'mousewheel-page-height', special.getPageHeight(this));
+        },
+
+        teardown: function() {
+            if ( this.removeEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.removeEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = null;
+            }
+        },
+
+        getLineHeight: function(elem) {
+            return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
+        },
+
+        getPageHeight: function(elem) {
+            return $(elem).height();
+        },
+
+        settings: {
+            adjustOldDeltas: true
+        }
+    };
+
+    $.fn.extend({
+        mousewheel: function(fn) {
+            return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
+        },
+
+        unmousewheel: function(fn) {
+            return this.unbind('mousewheel', fn);
+        }
+    });
+
+
+    function handler(event) {
+        var orgEvent   = event || window.event,
+            args       = slice.call(arguments, 1),
+            delta      = 0,
+            deltaX     = 0,
+            deltaY     = 0,
+            absDelta   = 0;
+        event = $.event.fix(orgEvent);
+        event.type = 'mousewheel';
+
+        // Old school scrollwheel delta
+        if ( 'detail'      in orgEvent ) { deltaY = orgEvent.detail * -1;      }
+        if ( 'wheelDelta'  in orgEvent ) { deltaY = orgEvent.wheelDelta;       }
+        if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY;      }
+        if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
+
+        // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
+        if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+            deltaX = deltaY * -1;
+            deltaY = 0;
+        }
+
+        // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
+        delta = deltaY === 0 ? deltaX : deltaY;
+
+        // New school wheel delta (wheel event)
+        if ( 'deltaY' in orgEvent ) {
+            deltaY = orgEvent.deltaY * -1;
+            delta  = deltaY;
+        }
+        if ( 'deltaX' in orgEvent ) {
+            deltaX = orgEvent.deltaX;
+            if ( deltaY === 0 ) { delta  = deltaX * -1; }
+        }
+
+        // No change actually happened, no reason to go any further
+        if ( deltaY === 0 && deltaX === 0 ) { return; }
+
+        // Need to convert lines and pages to pixels if we aren't already in pixels
+        // There are three delta modes:
+        //   * deltaMode 0 is by pixels, nothing to do
+        //   * deltaMode 1 is by lines
+        //   * deltaMode 2 is by pages
+        if ( orgEvent.deltaMode === 1 ) {
+            var lineHeight = $.data(this, 'mousewheel-line-height');
+            delta  *= lineHeight;
+            deltaY *= lineHeight;
+            deltaX *= lineHeight;
+        } else if ( orgEvent.deltaMode === 2 ) {
+            var pageHeight = $.data(this, 'mousewheel-page-height');
+            delta  *= pageHeight;
+            deltaY *= pageHeight;
+            deltaX *= pageHeight;
+        }
+
+        // Store lowest absolute delta to normalize the delta values
+        absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
+
+        if ( !lowestDelta || absDelta < lowestDelta ) {
+            lowestDelta = absDelta;
+
+            // Adjust older deltas if necessary
+            if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
+                lowestDelta /= 40;
+            }
+        }
+
+        // Adjust older deltas if necessary
+        if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
+            // Divide all the things by 40!
+            delta  /= 40;
+            deltaX /= 40;
+            deltaY /= 40;
+        }
+
+        // Get a whole, normalized value for the deltas
+        delta  = Math[ delta  >= 1 ? 'floor' : 'ceil' ](delta  / lowestDelta);
+        deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
+        deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
+
+        // Add information to the event object
+        event.deltaX = deltaX;
+        event.deltaY = deltaY;
+        event.deltaFactor = lowestDelta;
+        // Go ahead and set deltaMode to 0 since we converted to pixels
+        // Although this is a little odd since we overwrite the deltaX/Y
+        // properties with normalized deltas.
+        event.deltaMode = 0;
+
+        // Add event and delta to the front of the arguments
+        args.unshift(event, delta, deltaX, deltaY);
+
+        // Clearout lowestDelta after sometime to better
+        // handle multiple device types that give different
+        // a different lowestDelta
+        // Ex: trackpad = 3 and mouse wheel = 120
+        if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
+        nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
+
+        return ($.event.dispatch || $.event.handle).apply(this, args);
+    }
+
+    function nullLowestDelta() {
+        lowestDelta = null;
+    }
+
+    function shouldAdjustOldDeltas(orgEvent, absDelta) {
+        // If this is an older event and the delta is divisable by 120,
+        // then we are assuming that the browser is treating this as an
+        // older mouse wheel event and that we should divide the deltas
+        // by 40 to try and get a more usable deltaFactor.
+        // Side note, this actually impacts the reported scroll distance
+        // in older browsers and can cause scrolling to be slower than native.
+        // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
+        return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
+    }
+
+}));
+

Web/resources/js/mwheelIntent.js

+/**
+ * @author trixta
+ * @version 1.2
+ */
+(function($){
+
+var mwheelI = {
+			pos: [-260, -260]
+		},
+	minDif 	= 3,
+	doc 	= document,
+	root 	= doc.documentElement,
+	body 	= doc.body,
+	longDelay, shortDelay
+;
+
+function unsetPos(){
+	if(this === mwheelI.elem){
+		mwheelI.pos = [-260, -260];
+		mwheelI.elem = false;
+		minDif = 3;
+	}
+}
+
+$.event.special.mwheelIntent = {
+	setup: function(){
+		var jElm = $(this).bind('mousewheel', $.event.special.mwheelIntent.handler);
+		if( this !== doc && this !== root && this !== body ){
+			jElm.bind('mouseleave', unsetPos);
+		}
+		jElm = null;
+        return true;
+    },
+	teardown: function(){
+        $(this)
+			.unbind('mousewheel', $.event.special.mwheelIntent.handler)
+			.unbind('mouseleave', unsetPos)
+		;
+        return true;
+    },
+    handler: function(e, d){
+		var pos = [e.clientX, e.clientY];
+		if( this === mwheelI.elem || Math.abs(mwheelI.pos[0] - pos[0]) > minDif || Math.abs(mwheelI.pos[1] - pos[1]) > minDif ){
+            mwheelI.elem = this;
+			mwheelI.pos = pos;
+			minDif = 250;
+			
+			clearTimeout(shortDelay);
+			shortDelay = setTimeout(function(){
+				minDif = 10;
+			}, 200);
+			clearTimeout(longDelay);
+			longDelay = setTimeout(function(){
+				minDif = 3;
+			}, 1500);
+			e = $.extend({}, e, {type: 'mwheelIntent'});
+            return ($.event.dispatch || $.event.handle).apply(this, arguments);
+		}
+    }
+};
+$.fn.extend({
+	mwheelIntent: function(fn) {
+		return fn ? this.bind("mwheelIntent", fn) : this.trigger("mwheelIntent");
+	},
+	
+	unmwheelIntent: function(fn) {
+		return this.unbind("mwheelIntent", fn);
+	}
+});
+
+$(function(){
+	body = doc.body;
+	//assume that document is always scrollable, doesn't hurt if not
+	$(doc).bind('mwheelIntent.mwheelIntentDefault', $.noop);
+});
+})(jQuery);

Web/resources/jscrollpane/jquery.jscrollpane.css

+/*
+ * CSS Styles that are needed by jScrollPane for it to operate correctly.
+ *
+ * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
+ * may not operate correctly without them.
+ */
+
+.jspContainer
+{
+	overflow: hidden;
+	position: relative;
+}
+
+.jspPane
+{
+	position: absolute;
+}
+
+.jspVerticalBar
+{
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 16px;
+	height: 100%;
+	background: red;
+}
+
+.jspHorizontalBar
+{
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 16px;
+	background: red;
+}
+
+.jspCap
+{
+	display: none;
+}
+
+.jspHorizontalBar .jspCap
+{
+	float: left;
+}
+
+.jspTrack
+{
+	background: #dde;
+	position: relative;
+}
+
+.jspDrag
+{
+	background: #bbd;
+	position: relative;
+	top: 0;
+	left: 0;
+	cursor: pointer;
+}
+
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag
+{
+	float: left;
+	height: 100%;
+}
+
+.jspArrow
+{
+	background: #50506d;
+	text-indent: -20000px;
+	display: block;
+	cursor: pointer;
+	padding: 0;
+	margin: 0;
+}
+
+.jspArrow.jspDisabled
+{
+	cursor: default;
+	background: #80808d;
+}
+
+.jspVerticalBar .jspArrow
+{
+	height: 16px;
+}
+
+.jspHorizontalBar .jspArrow
+{
+	width: 16px;
+	float: left;
+	height: 100%;
+}
+
+.jspVerticalBar .jspArrow:focus
+{
+	outline: none;
+}
+
+.jspCorner
+{
+	background: #eeeef4;
+	float: left;
+	height: 100%;
+}
+
+/* Yuk! CSS Hack for IE6 3 pixel bug :( */
+* html .jspCorner
+{
+	margin: 0 -3px 0 0;
+}
\ No newline at end of file

Web/resources/login.html

 <html>
 <head>
 <title>Domotika By Unixmedia</title>
+   <meta charset="UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=0.85, maximum-scale=0.85, minimum-scale=0.85, user-scalable=no" />
+   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=0.85" />
+
 <style>
 body {
     background: none repeat scroll 0 0 #FBFBFB;
@@ -13,6 +17,10 @@ body {
     padding: 0;
 }
 
+.theme_dmblack {
+   background-color: #000 !important;
+}
+
 .login * {
     margin: 0;
     padding: 0;
@@ -20,6 +28,7 @@ body {
 
 .login form {
    margin-left: 8px;
+   margin-right: 8px;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #fff;
@@ -28,6 +37,10 @@ body {
    box-shadow: rgba(200, 200, 200, 0.7) 0px 4px 10px -1px;
 }
 
+.login form .theme_dmblack {
+   background-color: #c2c2c2;
+}
+
 .login .button-primary {
    float: right;
 }
@@ -101,7 +114,8 @@ body {
 
 }
 #login form {
-   padding: 40px;
+   padding: 20px;
+   padding-bottom: 40px;
    background: #fff;
 }
 .login #pass-strength-result {
@@ -139,7 +153,7 @@ h4 {
 }
 
 img {
-   padding-left: 40px;
+   padding-left: 20px;
 }
 
 /** LOgin button */
@@ -179,10 +193,10 @@ img {
 @SCRIPT@
 </head>
 
-
-<div id="login">
-<img src="/img/logo_unixmedia_white.png">
-<form name="loginform" id="login" class="login" action="@PATH@" method="post">
+<body class="@THEME@">
+<div id="login" class="@THEME@" >
+<img src="/img/logo_unixmedia_@THEME@.png">
+<form name="loginform" id="login" class="login @THEME@" action="@PATH@" method="post">
    <h4>Domotika Login</h4>
    <p>
       <label for="user_login">Username<br />

conf/defaults/domotikad.conf

@@ -78,6 +78,7 @@ enablemysqlgui: yes
 enableajaxgui: yes
 enablerestgui: yes
 enablemediagui: yes
+logintheme: theme_dmblack
 interface: 0.0.0.0
 sslport: 443
 port: 81

domotika/db/dmdb.py

@@ -748,7 +748,8 @@ def getUsersInGroup(group, activeonly=True):
    return UsersGroup.find(where=["group=?", group])
 
 
-def updateUserData(username, pwd, email, dhome, mhome, tts=False, lang="it",slide=False, webspeech='touch', speechlang='it-IT'):
+def updateUserData(username, pwd, email, dhome, mhome, tts=False, 
+                  lang="it",slide=False, webspeech='touch', speechlang='it-IT', theme='dmblack'):
    def onRes(res):
       if res>0:
          return defer.succeed(username+" correctly updated")
@@ -769,6 +770,7 @@ def updateUserData(username, pwd, email, dhome, mhome, tts=False, lang="it",slid
       qstring+=",slide=0"
    qstring+=",webspeech='%s'" % webspeech
    qstring+=",speechlang='%s'" % speechlang
+   qstring+=",gui_theme='%s'" % str(theme)
    qstring+=" WHERE username='%s' AND active > 0" %(username)
    log.debug(qstring)
    return runOperation(qstring).addCallback(onRes)

domotika/domotika.py

@@ -2218,8 +2218,9 @@ class domotikaService(service.Service):
    def web_on_getUserFromName(self, name):
       return dmdb.Users.find(where=['username=?', name], limit=1)
 
-   def web_on_updateUserData(self, username, pwd, email, dhome, mhome, tts, lang, slide=False, webspeech='touch', speechlang='it-IT'):
-      return dmdb.updateUserData(username, pwd, email, dhome, mhome, tts, lang,slide, webspeech, speechlang) 
+   def web_on_updateUserData(self, username, pwd, email, dhome, mhome, tts, 
+                              lang, slide=False, webspeech='touch', speechlang='it-IT', theme='dmblack'):
+      return dmdb.updateUserData(username, pwd, email, dhome, mhome, tts, lang,slide, webspeech, speechlang, theme) 
 
    def web_on_getMaxLocalTranscode(self):
       return int(self.config.get('media', 'localtranscode'))

domotika/web/rest.py

@@ -335,6 +335,23 @@ class UserRest(RestCore):
    def userbyname(self, request=None, username='', *a, **kw):
       return self.callbackResponse(self.core.getUserFromName(username), request)
 
+   @route("/refreshme")
+   @wrapResponse
+   def refreshme(self, request=None,*a, **kw):
+      def setUserSession(res):
+         self.session.mind.perms.gui_theme=res.gui_theme
+         self.session.mind.perms.email=res.email
+         self.session.mind.perms.tts=res.tts
+         self.session.mind.perms.language=res.language
+         self.session.mind.perms.slide=res.slide
+         self.session.mind.perms.webspeech=res.webspeech
+         self.session.mind.perms.speechlang=res.speechlang
+      
+         return res
+      log.info('Refresh session for user '+str(self.session.mind.perms.username))
+      d=self.core.getUserFromName(self.session.mind.perms.username).addCallback(setUserSession)
+      return self.callbackResponse(d, request)
+
    @route("/me")
    @wrapResponse
    def getme(self, request=None,*a, **kw):
@@ -344,9 +361,12 @@ class UserRest(RestCore):
    @wrapResponse
    def setme(self, request=None,*a, **kw):
       def onOk(res):
+         log.info(res)
          return self.callbackResponse(self.core.getUserFromName(self.session.mind.perms.username), request)
       def onError(res):
+         log.info(res)
          return ResponseConversion(request, code=404, entity="User not found")
+      log.info("REST Update user "+str(self.session.mind.perms.username))
       r = self._getRequestArgs(request)
       pwd=False
       tts=False
@@ -354,6 +374,7 @@ class UserRest(RestCore):
       slide=False
       webspeech="touch"
       speechlang="it-IT"
+      theme='dmblack'
       if 'lang' in r.keys():
          lang=r['lang']
       if 'tts' in r.keys():
@@ -362,15 +383,18 @@ class UserRest(RestCore):
          pwd=r['passwd']
       if 'slide' in r.keys():
          slide=True
+      if 'gui_theme' in r.keys():
+         theme=str(r['gui_theme'])
       if 'webspeech' in r.keys() and r['webspeech'] in ['no','touch','continuous']:
          webspeech=r['webspeech']
       if 'speechlang' in r.keys() and r['speechlang'] in ['it-IT','it-CH','en-US','en-GB']:
          speechlang=r['speechlang']
       if 'desktop_homepath' in r.keys() and 'mobile_homepath' in r.keys() and 'email' in r.keys():
          return self.core.updateUserData(self.session.mind.perms.username, pwd, 
-                  r['email'], r['desktop_homepath'], r['mobile_homepath'], tts, lang, slide, webspeech, speechlang).addCallbacks(onOk, onError)
+                  r['email'], r['desktop_homepath'], r['mobile_homepath'], 
+                  tts, lang, slide, webspeech, speechlang, theme).addCallbacks(onOk, onError)
+      log.info('Erroneous request on update my userdata! ('+str(self.session.mind.perms.username)+')')
       return ResponseConversion(request, code=400, entity="Bad request - error in parameters")
-      #return self.callbackResponse(self.core.updateUserFromName(self.session.mind.perms.username), request)  
 
 class ActionRest(RestCore):
    

domotika/web/web.py

@@ -249,7 +249,7 @@ class RootPage(rend.Page):
       if headers.hasHeader("DMSESSION"):
          headers.removeHeader("DMSESSION")
       headervalue = str(session.uid)
-      cols=['username','passwd','id','homepath','email','tts','language','slide','webspeech','speechlang']
+      cols=['username','passwd','id','homepath','email','tts','language','slide','webspeech','speechlang','gui_theme']
       try:
          headervalue = session.mind.perms.toHash(cols)
       except:
@@ -264,6 +264,7 @@ class RootPage(rend.Page):
          headervalue['slide'] = 0
          headervalue['webspeech'] = 'touch'
          headervalue['speechlang'] = 'it-IT'
+         headervalue['gui_theme' ] = 'dmblack'
       headervalue['sessionid'] = session.uid
       headervalue['logged'] = self.logged
       log.debug('DMSESSION SEND '+str(headervalue))
@@ -461,6 +462,7 @@ class LoginPage(rend.Page):
 <title>Domotika By Unixmedia</title>
 @SCRIPT@
 </head>
+<body class="@THEME@">
 <form method="post" name="loginform" action="@PATH@">
 <fieldset id="form"><legend>Login</legend>
 <p>Username: <input type="text" name="username" size="20" value="@USERNAME@" /></p>
@@ -533,6 +535,7 @@ class LoginPage(rend.Page):
       html = html.replace("@USERNAME@", '')
       html = html.replace("@PASSWORD@", '')
       html = html.replace("@SCRIPT@", "")
+      html = html.replace("@THEME@", str(self.core.configGet('web', 'logintheme')))
       html = html.replace("@CHECKED@", "")
       return html
 
@@ -564,6 +567,7 @@ class LoginPage(rend.Page):
                html = html.replace("@PASSWORD@", str(lp))
                html = html.replace("@CHECKED@", "checked")
                html = html.replace("@SCRIPT@", str(self.getScript(req.path)))
+               html = html.replace("@THEME@", str(self.core.configGet('web', 'logintheme')))
                log.debug("login html")
                return html