diff --git a/AppConfig_model.php b/AppConfig_model.php
index 2233d1cf..c4dc2910 100644
--- a/AppConfig_model.php
+++ b/AppConfig_model.php
@@ -22,33 +22,42 @@ public function __construct($mysqli)
     {
         $this->mysqli = $mysqli;
     }
-    
+
+    public function checktable(){
+        $sql = 'SHOW TABLES LIKE "app_config"';
+        $result = $this->mysqli->query($sql);
+        if ($result->num_rows>0) return true;
+        return false;
+    }
+
     public function set($userid,$json)
     {
         $userid = (int) $userid;
-        
+        //var_dump ($json);
+
         $data = json_decode($json);
         if (!$data) return array('success'=>false);
-        
+
         // Input sanitisation
         $outdata = array();
+        $filter = "/[^A-Za-z0-9&£€$.,]/";
         foreach ($data as $appname=>$properties)
         {
-            $appname = preg_replace("/[^A-Za-z0-9]/",'',$appname);
-            
+            $appname = preg_replace($filter,'',$appname);
+
             if (gettype($properties)=="object") {
                 $outdata[$appname] = array();
                 foreach ($properties as $property=>$value)
                 {
-                    $property = preg_replace("/[^A-Za-z0-9]/",'',$property);
+                    $property = preg_replace($filter,'',$property);
                     if (gettype($value)=="array") {
                         $tmp = array();
                         foreach ($value as $val) $tmp[] = (int) $val;
                         $value = $tmp;
                     } else {
-                        $value = preg_replace("/[^A-Za-z0-9,;£$.]/",'',$value);
+                        $value = preg_replace($filter,'',$value);
                     }
-                    
+
                     $outdata[$appname][$property] = $value;
                 }
             }
@@ -56,20 +65,20 @@ public function set($userid,$json)
 
         // Re-encode for storage in db text field
         $json = json_encode($outdata);
-        
+
         $result = $this->mysqli->query("SELECT `userid` FROM app_config WHERE `userid`='$userid'");
         if ($result->num_rows) {
             $this->mysqli->query("UPDATE app_config SET `data`='$json' WHERE `userid`='$userid'");
             return true;
-            
+
         } else {
             $this->mysqli->query("INSERT INTO app_config (`userid`,`data`) VALUES ('$userid','$json')");
             return true;
         }
-        
+
         return array('success'=>false);
     }
-    
+
     public function get($userid)
     {
         $userid = (int) $userid;
@@ -79,7 +88,7 @@ public function get($userid)
         } else {
             return false;
         }
-        
+
     }
 
 }
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..101bdc34
--- /dev/null
+++ b/README.md
@@ -0,0 +1,12 @@
+#App module
+App, is an EMONCMS complementary module made to display technical information on theoretically any type of device.  The screen is preformated to show predefined type of feeds.
+
+Example: My electric is able to show the house electrical need, consumption of the day, month, year, with values and graphs.
+
+how to use it:
+copy or clone this repository into the module directory of your EMONCMS installation.
+Visit admin page and update database. This module uses a specific table, not present in previous releases.
+Go to the config page (wrench positionned top right of screen) to configure to your needs
+NB:
+
+rem : A conversion to bootstrap3 and font awesome icons will probably make the presentation more responsive.
diff --git a/app.js b/app.js
index d227df3c..2b06c86f 100644
--- a/app.js
+++ b/app.js
@@ -1,85 +1,131 @@
 var app = {
-
-    basepath: path+"Modules/app/",
-
+    basepath: path + "Modules/app/",
     include: {},
-    
     loaded: {},
 
-    load: function(appname) 
-    {
+    load: function (appname) {
         app.loaded[appname] = true;
         // We load here the html of the app into an dedicated element for that app
         // when an app is loaded its html remains in the dom even when viewing another app
         // an app is just hidden and shown depending on the visibility settings.
-        
+
         // we check here if the app has been loaded to the dom, if not we load it
-        
-        var appdom = $("#app_"+appname);
-        
-        if (appdom.length) return true;
-        
-    
-        var html = "";
-        $.ajax({url: app.basepath+appname+"/"+appname+".html", async: false, cache: false, success: function(data) {html = data;} });
-        
-        $("#content").append('<div class="apps" id="app_'+appname+'" style="display:none"></div>');
-        $("#app_"+appname).html(html);
+        var dash = "app_" + appname,
+            appdom = $("#" + dash),
+            html = '',
+            include='',
+            file,
+            i;
+
+        if (appdom.length) {return true; }
+        $.ajax({
+            url: app.basepath + appname + "/" + appname + ".html",
+            async: false,
+            cache: false,
+            success: function (data) {html = data; }
+        });
+
+        $("#content").append('<div class="apps" id="' + dash + '" style="display:none"></div>');
+        $("#" + dash).html(html);
 
         $.ajax({
-            url: app.basepath+appname+"/"+appname+".js",
+            url: app.basepath + appname + "/" + appname + ".js",
             dataType: 'script',
             async: false
         });
-        
+        // include the translation file required by asked language
+        // check if answer is 200 or create a blank i18ntext variable
+        $.ajax({
+            url: app.basepath + "locale_js/app_" + 'en' + '.js',
+            dataType: 'script',
+            async: false,
+            error: function () {
+            }
+        });
+        $.ajax({
+            url: app.basepath + "locale_js/app_" + lang + '.js',
+            dataType: 'script',
+            async: false,
+            error: function () {
+            }
+        });
         // ----------------------------------------------------------
         // Included javascript loader
         // ----------------------------------------------------------
-        var include = window["app_"+appname].include;
-        for (i in include) {
-            var file = include[i];
-            if (app.include[file]==undefined)
-            {
+        include = window[dash].include;
+        for (i = 0; i < include.length; i++) {
+            file = include[i];
+            if (app.include[file] === undefined) {
+                //file = file.replace('%lang%', lang);
                 app.include[file] = true;
                 $.ajax({
-                    url: path+file,
+                    url: path + file,
                     dataType: 'script',
                     async: false
                 });
             }
         }
-        
-        window["app_"+appname].init();
-        
+        window[dash].init();
+        var result= {
+        "ref":{
+            "test":"test"
+           }
+        };
+        // the DOM will be available here
+
+        var flds = document.getElementsByClassName("i18n");
+        var out = '';
+        for(var i=0; i<flds.length;i++){
+            var key = flds[i].innerHTML;
+            result['ref'][key]=key
+            if ( i18ntext[key] === undefined ){
+                out +=("'" + key + "'" + " : '"+key + "',<br />");
+                flds[i].innerHTML= key
+            } else {
+                flds[i].innerHTML= i18ntext[key]
+            }
+        }
+        out = '<h3 class="i18n">Missing keys in i18n file</h3><div>' + out + '</div>';
+        document.getElementById("obj").innerHTML= out
+
         return true;
     },
-    
-    show: function(appname)
-    {
-        if (app.loaded[appname]==undefined) app.load(appname); 
+
+    show: function (appname) {
+        var dash = "app_" + appname;
+        if (app.loaded[appname] === undefined) {app.load(appname); }
         $(".apps").hide();
-        $("#app_"+appname).show();
-        if (window["app_"+appname]!=undefined) window["app_"+appname].show();
+        $("#" + dash).show();
+        if (window[dash] !== undefined) {window[dash].show(); }
     },
-    
-    hide: function(appname)
-    {
-        $("#app_"+appname).hide();
-        if (window["app_"+appname]!=undefined) window["app_"+appname].hide();
+
+    hide: function (appname) {
+        var dash = "app_" + appname;
+        $("#" + dash).hide();
+        if (window[dash] !== undefined) {window[dash].hide(); }
     },
-    
-    getconfig: function()
-    {
-        var config = {};
-        var apikeystr = "";
-        if (window.apikey!=undefined) apikeystr = "?apikey="+apikey;
-        $.ajax({ url: path+"app/getconfig.json"+apikeystr, dataType: 'json', async: false, success: function(data) {config = data;} });
+
+    getconfig: function () {
+        var config = {},
+            apikeystr = (window.apikey !== undefined) ? "?apikey=" + apikey : "";
+
+        //if (window.apikey !== undefined) {apikeystr = "?apikey=" + apikey; }
+        $.ajax({
+            url: path + "app/getconfig.json" + apikeystr,
+            dataType: 'json',
+            async: false,
+            success: function (data) {config = data; }
+        });
         app.config = config;
         return config;
     },
-    
-    setconfig: function(config)
-    {
-        $.ajax({ url: path+"app/setconfig.json", data: "data="+JSON.stringify(config), async: false, success: function(data){} });
+
+    setconfig: function (config) {
+        $.ajax({
+            url: path + "app/setconfig.json",
+            data: "data=" + JSON.stringify(config),
+            async: false,
+            success: function (data) {}
+        });
     }
 };
diff --git a/app_controller.php b/app_controller.php
index 8ff875d8..fa598859 100644
--- a/app_controller.php
+++ b/app_controller.php
@@ -8,42 +8,46 @@ function app_controller()
     global $session,$route,$mysqli;
 
     $result = false;
-    
+
     include "Modules/app/AppConfig_model.php";
     $appconfig = new AppConfig($mysqli);
-
-    if ($route->format == 'html')
-    {
-        if ($route->action == "" && $session['write']) {
-            $result = view("Modules/app/client.php",array());
-        }
-    }
-    
-    if ($route->format == 'json')
-    {
-        if ($route->action == "setconfig" && $session['write']) 
-            $result = $appconfig->set($session['userid'],get('data'));
-            
-        if ($route->action == "getconfig" && $session['read']) 
-            $result = $appconfig->get($session['userid']);
-        
-        if ($route->action == "dataremote")
+    if ($appconfig->checktable() == false){
+        $result = view("Modules/app/tblerr.php",array());
+    } else {
+        if ($route->format == 'html')
         {
-            $id = (int) get("id");
-            $start = (float) get("start");
-            $end = (float) get("end");
-            $interval = (int) get("interval");
-            
-            $result = json_decode(file_get_contents("http://emoncms.org/feed/data.json?id=$id&start=$start&end=$end&interval=$interval&skipmissing=0&limitinterval=0"));
+            if ($route->action == "" && $session['write']) {
+                $result = view("Modules/app/client.php",array());
+            }
         }
-        
-        if ($route->action == "valueremote")
+
+        if ($route->format == 'json')
         {
-            $id = (int) get("id");
-            $result = (float) json_decode(file_get_contents("http://emoncms.org/feed/value.json?id=$id"));
+            if ($route->action == "setconfig" && $session['write'])
+                $result = $appconfig->set($session['userid'],get('data'));
+
+            if ($route->action == "getconfig" && $session['read'])
+                $result = $appconfig->get($session['userid']);
+
+            if ($route->action == "dataremote")
+            {
+                $id = (int) get("id");
+                $start = (float) get("start");
+                $end = (float) get("end");
+                $interval = (int) get("interval");
+
+                $result = json_decode(file_get_contents("http://emoncms.org/feed/data.json?id=$id&start=$start&end=$end&interval=$interval&skipmissing=0&limitinterval=0"));
+            }
+
+            if ($route->action == "valueremote")
+            {
+                $id = (int) get("id");
+                $result = (float) json_decode(file_get_contents("http://emoncms.org/feed/value.json?id=$id"));
+            }
         }
+
     }
 
+
     return array('content'=>$result, 'fullwidth'=>true);
 }
-
diff --git a/app_menu.php b/app_menu.php
index af939f14..5b681ae3 100644
--- a/app_menu.php
+++ b/app_menu.php
@@ -1,26 +1,31 @@
 <?php
+$domain = "messages";
+bindtextdomain($domain, dirname(__FILE__)."/locale");
+global $session, $user;
+$apikey = "";
+$lang = substr($user->get_lang($session['userid']),0,2);
+/*
 
-    global $session, $user;
-    
-    
-    $apikey = "";
-    if ($session['write']) $apikey = "?apikey=".$user->get_apikey_write($session['userid']);
-    
+Check  if language file exist;, otherwise force to use en
+
+*/
+if (!file_exists( dirname(__FILE__)."/locale_js/app_".$lang.'.js')) {
+    $lang= 'en';
+}
+
+if ($session['write']) $apikey = "?lang=".$lang."&apikey=".$user->get_apikey_write($session['userid']);
     $menu_left[] = array(
-        'name'=>"Apps", 
-        'path'=>"app/mysolarpv" , 
-        'session'=>"write", 
+        'name'=>dgettext($domain,"Apps"),
+        'path'=>"app/mysolarpv" ,
+        'session'=>"write",
         'order' => 5,
         'icon'=>'icon-leaf icon-white',
         'dropdown'=>array(
-            
-            array('name' => 'My Electric', 'icon' => '', 'path' => "app$apikey#myelectric", 'session' => 'read', 'order' => 1),
-            array('name' => 'My Solar', 'icon' => '', 'path' => "app$apikey#mysolarpv", 'session' => 'read', 'order' => 2),
-            array('name' => 'My Heatpump', 'icon' => '', 'path' => "app$apikey#myheatpump", 'session' => 'read', 'order' => 3),
-            array('name' => 'My Solar&amp;Wind', 'icon' => '','path' => "app$apikey#myenergy", 'session' => 'read', 'order' => 4)
-            
+
+            array('name' => dgettext($domain,'My Electric'), 'icon' => '', 'path' => "app$apikey#myelectric", 'session' => 'read', 'order' => 1),
+            array('name' => dgettext($domain,'My Solar'), 'icon' => '', 'path' => "app$apikey#mysolarpv", 'session' => 'read', 'order' => 2),
+            array('name' => dgettext($domain,'My Heatpump'), 'icon' => '', 'path' => "app$apikey#myheatpump", 'session' => 'read', 'order' => 3),
+            array('name' => dgettext($domain,'My Solar&amp;Wind'), 'icon' => '','path' => "app$apikey#myenergy", 'session' => 'read', 'order' => 4)
+
         )
     );
-    
-    
-
diff --git a/client.php b/client.php
index c1b2ffc0..8d9df155 100644
--- a/client.php
+++ b/client.php
@@ -1,33 +1,35 @@
 <?php
-    global $path; 
+    global $path, $user;
     $apikey = $_GET['apikey'];
+    $lang = (isset($_GET["lang"])) ? strtolower(substr($_GET['lang'], 0, 2)) : 'en';
+    $modpath = $path."Modules/app"
 ?>
 
 <script>
     var path = "<?php print $path; ?>";
+    var modpath = "<?php print $modpath; ?>";
     var apikey = "<?php print $apikey; ?>";
-    
-    apikeystr = ""; 
-    if (apikey!="") apikeystr = "&apikey="+apikey;
+    var lang = "<?php print $lang; ?>";
+    apikeystr = (apikey !== "") ? "&apikey="+apikey : "";
 </script>
 
-<link href="<?php echo $path; ?>Modules/app/style.css" rel="stylesheet">
-<script type="text/javascript" src="<?php echo $path; ?>Modules/app/app.js"></script>
-        
+<link href="<?php echo $modpath; ?>/style.css" rel="stylesheet">
+<script type="text/javascript" src="<?php echo $modpath; ?>/app.js"></script>
+
 <div id="content"></div>
 
 <script>
 
-console.log(path);
+//console.log(path);
 
 var config = app.getconfig();
 var nodes = {};
-  
+
 var appname = "myelectric";
 req = parse_location_hash(window.location.hash)
 
 appname = req[0];
-if (appname=="") appname = "myelectric";
+if (appname === "") appname = "myelectric";
 
 app.show(appname);
 
@@ -39,15 +41,14 @@
     app.show(appname);
 });
 
-$(document).ready(function(){
+$(document).ready(function () {
 
 });
 
-function parse_location_hash(hash)
-{
+function parse_location_hash (hash) {
     hash = hash.substring(1);
-    hash = hash.replace("?","/");
-    hash = hash.replace("&","/");
+    hash = hash.replace("?", "/");
+    hash = hash.replace("&", "/");
     hash = hash.split("/");
     return hash;
 }
diff --git a/lib/graph_bars.js b/lib/graph_bars.js
index e480b010..8158cf99 100644
--- a/lib/graph_bars.js
+++ b/lib/graph_bars.js
@@ -10,109 +10,110 @@ var graph_bars = {
     bottom: 0,
     
     
-    draw: function(element,series) {
+    draw: function(element, series) {
     
         // Initialise the canvas get context
-        if (!ctx) 
-        {
+        if (!ctx) {
             this.element = element;
-            var c = document.getElementById(element);  
+            var c = document.getElementById(element);
             this.ctx = c.getContext("2d");
         }
         
-        var ctx = this.ctx;
+        var ctx = this.ctx,
+            xmin,
+            xmax,
+            ymin,
+            ymax,
+            data,
+            s,
+            z,
+            plot_height;
         
         // Clear canvasat
-        ctx.clearRect(0,0,this.width,this.height);
+        ctx.clearRect(0, 0, this.width, this.height);
         
-        var plot_height = this.height - this.bottom;
+        plot_height = this.height - this.bottom;
         
         // OEM Blue
         ctx.strokeStyle = "#0699fa";
         ctx.fillStyle = "#0699fa";
         
         // Axes
-        ctx.moveTo(0,0);
-        ctx.lineTo(0,plot_height);
-        ctx.lineTo(this.width,plot_height);
+        ctx.moveTo(0, 0);
+        ctx.lineTo(0, plot_height);
+        ctx.lineTo(this.width, plot_height);
         ctx.stroke();
         
         // Axes label
-        ctx.textAlign    = "left";
+        ctx.textAlign = "left";
         ctx.font = "16px arial";
-        ctx.fillText('kWh',10,15);
+        ctx.fillText('kWh', 10, 15);
         
         // find out max and min values of data
         
-        var xmin = undefined;
-        var xmax = undefined;
-        var ymin = undefined;
-        var ymax = undefined;
-        
-        for (s in series)
-        {
-            var data = series[s];
-            for (z in data)
-            {
-                if (xmin==undefined) xmin = data[z][0];
-                if (xmax==undefined) xmax = data[z][0];
-                if (ymin==undefined) ymin = data[z][1];
-                if (ymax==undefined) ymax = data[z][1];
+        
+        for (s in series) {
+            data = series[s];
+            for (z in data) {
+                if (xmin === undefined) {xmin = data[z][0]; }
+                if (xmax === undefined) {xmax = data[z][0]; }
+                if (ymin === undefined) {ymin = data[z][1]; }
+                if (ymax === undefined) {ymax = data[z][1]; }
                             
-                if (data[z][1]>ymax) ymax = data[z][1];
-                if (data[z][1]<ymin) ymin = data[z][1];
-                if (data[z][0]>xmax) xmax = data[z][0];
-                if (data[z][0]<xmin) xmin = data[z][0];               
+                if (data[z][1] > ymax) {ymax = data[z][1]; }
+                if (data[z][1] < ymin) {ymin = data[z][1]; }
+                if (data[z][0] > xmax) {xmax = data[z][0]; }
+                if (data[z][0] < xmin) {xmin = data[z][0]; }
             }
         }
         
-        var interval = 1;
-        if (data.length>1) interval = data[1][0] - data[0][0];
+        var interval = 1,
+            r, x, y, dayid, d,
+            scale = 1,
+            days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+        
+        if (data.length > 1) {interval = data[1][0] - data[0][0]; }
         
-        var r = (ymax - ymin);
-        ymin = (ymin + (r / 2)) - (r/1.5);
+        r = (ymax - ymin);
+        ymin = (ymin + (r / 2)) - (r / 1.5);
         ymin = 0;
         
-        ymax = (ymax - (r / 2)) + (r/1.5);
+        ymax = (ymax - (r / 2)) + (r / 1.5);
         
-        xmin -= 0.6*interval;
-        xmax += 0.6*interval;
+        xmin -= 0.6 * interval;
+        xmax += 0.6 * interval;
         
-        var scale = 1;
-        var days = ['S','M','T','W','T','F','S'];
         
-        for (s in series)
-        {
-            var data = series[s];
+        for (s in series) {
+            data = series[s];
             
-            for (z in data)
-            {
-                var d = new Date();
+            for (z in data) {
+                d = new Date();
                 d.setTime(data[z][0]);
-                var dayid = d.getDay();
+                dayid = d.getDay();
                 
-                var x = ((data[z][0] - xmin) / (xmax - xmin)) * this.width;
-                var y = plot_height - (((data[z][1] - ymin) / (ymax - ymin)) * plot_height);
+                x = ((data[z][0] - xmin) / (xmax - xmin)) * this.width;
+                y = plot_height - (((data[z][1] - ymin) / (ymax - ymin)) * plot_height);
                   
                 //if (z==0) ctx.moveTo(x,y); else ctx.lineTo(x,y);   
                   
-                var barwidth = ((0.83*interval) / (xmax - xmin)) * this.width;
+                var barwidth = ((0.83 * interval) / (xmax - xmin)) * this.width;
                 
                 ctx.fillStyle = "#0699fa";
-                if (dayid==0 || dayid==6) ctx.fillStyle = "#0779c1";
+                if (dayid === 0 || dayid === 6) {ctx.fillStyle = "#0779c1"; }
                 
-                ctx.fillRect(x-(barwidth/2),y-7,barwidth,plot_height-y);
+                ctx.fillRect(x - (barwidth / 2), y - 7, barwidth, plot_height - y);
                   
                 // Text is too small if less than 2kWh
-                if ((plot_height-y)>35) {
-                    ctx.textAlign    = "center";
+                if ((plot_height - y) > 35) {
+                    ctx.textAlign = "center";
                     ctx.fillStyle = "#ccccff";
                     
                     ctx.font = "16px arial";
-                    ctx.fillText((data[z][1]*scale).toFixed(0),x,y+20-7);
+                    ctx.fillText((data[z][1] * scale).toFixed(0), x, y + 20 - 7);
                     
                     ctx.font = "14px arial";
-                    ctx.fillText(days[dayid],x,plot_height-15);
+                    ctx.fillText(days[dayid], x, plot_height - 15);
                 }
             }
             ctx.stroke();
diff --git a/lib/graph_lines.js b/lib/graph_lines.js
index 79233122..27a3a2b0 100644
--- a/lib/graph_lines.js
+++ b/lib/graph_lines.js
@@ -7,47 +7,50 @@ var graph_lines = {
     width: 200,
     height: 200,
     
-    draw: function(element,series,options) {
+    draw: function (element, series, options) {
     
         // Initialise the canvas get context
-        if (!ctx) 
-        {
+        if (!ctx) {
             this.element = element;
-            var c = document.getElementById(element);  
+            var c = document.getElementById(element);
             this.ctx = c.getContext("2d");
         }
         var ctx = this.ctx;
         
         // Clear canvas
-        ctx.clearRect(0,0,this.width,this.height);
+        ctx.clearRect(0, 0, this.width, this.height);
         
         // graph area is inset by 1 pixel on each edge so that axes 
         // line width is shown fully - otherwise axes appears thin
         var graph_left = 1;
         var graph_top = 1;
-        var graph_width = this.width - (graph_left*2);
-        var graph_height = this.height - (graph_top*2);
+        var graph_width = this.width - (graph_left * 2);
+        var graph_height = this.height - (graph_top * 2);
         
         // find out max and min values of data
-        var xmin = undefined;
-        var xmax = undefined;
-        var ymin = undefined;
-        var ymax = undefined;
+        var xmin = undefined,
+            xmax = undefined,
+            ymin = undefined,
+            ymax = undefined,
+            s,
+            z,
+            x,
+            y,
+            data,
+            ytick;
         
-        for (s in series)
-        {
-            var data = series[s].data;
-            for (z in data)
-            {
-                if (xmin==undefined) xmin = data[z][0];
-                if (xmax==undefined) xmax = data[z][0];
-                if (ymin==undefined) ymin = data[z][1];
-                if (ymax==undefined) ymax = data[z][1];
+        for (s in series) {
+            data = series[s].data;
+            for (z in data) {
+                if (xmin === undefined) {xmin = data[z][0]; }
+                if (xmax === undefined) {xmax = data[z][0]; }
+                if (ymin === undefined) {ymin = data[z][1]; }
+                if (ymax === undefined) {ymax = data[z][1]; }
                             
-                if (data[z][1]>ymax) ymax = data[z][1];
-                if (data[z][1]<ymin) ymin = data[z][1];
-                if (data[z][0]>xmax) xmax = data[z][0];
-                if (data[z][0]<xmin) xmin = data[z][0];               
+                if (data[z][1] > ymax) {ymax = data[z][1]; }
+                if (data[z][1] < ymin) {ymin = data[z][1]; }
+                if (data[z][0] > xmax) {xmax = data[z][0]; }
+                if (data[z][0] < xmin) {xmin = data[z][0]; }
             }
         }
         // var r = (ymax - ymin);
@@ -62,25 +65,26 @@ var graph_lines = {
             ctx.strokeStyle = series[s].color;
             ctx.fillStyle = series[s].color;
             
-            var data = series[s].data; 
+            data = series[s].data;
             ctx.beginPath();
             for (z in data)
             {
-                if (data[z][1]!=null) {
-                    var x = ((data[z][0] - xmin) / (xmax - xmin)) * graph_width;
-                    var y = graph_height - (((data[z][1] - ymin) / (ymax - ymin)) * graph_height);
-                    if (z==0) 
-                        ctx.moveTo(graph_left+x,graph_top+y); 
-                    else 
-                        ctx.lineTo(graph_left+x,graph_top+y);
+                if (data[z][1] !== null) {
+                    x = ((data[z][0] - xmin) / (xmax - xmin)) * graph_width;
+                    y = graph_height - (((data[z][1] - ymin) / (ymax - ymin)) * graph_height);
+                    if (z === 0) {
+                        ctx.moveTo(graph_left + x, graph_top + y);
+                    } else {
+                        ctx.lineTo(graph_left + x, graph_top + y);
+                    }
                 }
             }
             ctx.stroke();
             
-            var y = graph_height - (((ymin - ymin) / (ymax - ymin)) * graph_height);
-            ctx.lineTo(graph_left+x,graph_top+y);
-            var x = ((xmin - xmin) / (xmax - xmin)) * graph_width;
-            ctx.lineTo(graph_left+x,graph_top+y);
+            y = graph_height - (((ymin - ymin) / (ymax - ymin)) * graph_height);
+            ctx.lineTo(graph_left + x, graph_top + y);
+            x = ((xmin - xmin) / (xmax - xmin)) * graph_width;
+            ctx.lineTo(graph_left + x, graph_top + y);
             
             ctx.fill();
         }
@@ -95,30 +99,30 @@ var graph_lines = {
         ctx.fillStyle = options.axes.color;
         ctx.strokeStyle = options.axes.color;
         
-        ctx.fillText(options.yaxis.title,graph_left+4,15);
+        ctx.fillText(options.yaxis.title, graph_left + 4, 15);
         
         // X-AXES
-        xmin = Math.floor(xmin / options.xaxis.minor_tick)*options.xaxis.minor_tick;
+        xmin = Math.floor(xmin / options.xaxis.minor_tick) * options.xaxis.minor_tick;
         var xtick = xmin;
         
         ctx.beginPath();
-        while(xtick<xmax) {
+        while (xtick < xmax) {
             xtick += options.xaxis.minor_tick;
-            var x = ((xtick- xmin) / (xmax - xmin)) * graph_width;
+            x = ((xtick- xmin) / (xmax - xmin)) * graph_width;
             
-            var date = new Date(xtick);
-            var hours = date.getHours();
-            var minutes = date.getMinutes();
-            var seconds = date.getSeconds();
-            if (minutes<10) minutes = "0"+minutes;
+            var date = new Date(xtick),
+                hours = date.getHours(),
+                minutes = date.getMinutes(),
+                seconds = date.getSeconds();
+            if (minutes < 10) {minutes = "0" + minutes; }
             
-            if (date % options.xaxis.major_tick == 0) {
-                ctx.fillText(hours+":"+minutes,graph_left+x+4,graph_top+graph_height-5);
-                ctx.moveTo(graph_left+x,graph_top+graph_height-0);
-                ctx.lineTo(graph_left+x,graph_top+graph_height-18);
+            if (date % options.xaxis.major_tick === 0) {
+                ctx.fillText(hours + ":" + minutes, graph_left + x + 4, graph_top + graph_height - 5);
+                ctx.moveTo(graph_left + x, graph_top + graph_height - 0);
+                ctx.lineTo(graph_left + x, graph_top + graph_height - 18);
             } else {
-                ctx.moveTo(graph_left+x,graph_top+graph_height-0);
-                ctx.lineTo(graph_left+x,graph_top+graph_height-5);
+                ctx.moveTo(graph_left + x, graph_top + graph_height - 0);
+                ctx.lineTo(graph_left + x, graph_top + graph_height - 5);
             }
         }
         ctx.stroke();
@@ -126,18 +130,18 @@ var graph_lines = {
         // Y-AXES
         ctx.beginPath();
         
-        var ytick = 0;
-        while(ytick<ymax) {
+        ytick = 0;
+        while (ytick < ymax) {
             ytick += options.yaxis.minor_tick;
-            var y = this.height - (((ytick - ymin) / (ymax - ymin)) * this.height);
+            y = this.height - (((ytick - ymin) / (ymax - ymin)) * this.height);
             
-            if (ytick % options.yaxis.major_tick == 0) {
-                ctx.fillText(ytick+options.yaxis.units,graph_left+4,graph_top+y-5);
-                ctx.moveTo(graph_left,graph_top+y);
-                ctx.lineTo(graph_left+20,graph_top+y);
+            if (ytick % options.yaxis.major_tick === 0) {
+                ctx.fillText(ytick + options.yaxis.units, graph_left + 4, graph_top + y - 5);
+                ctx.moveTo(graph_left, graph_top + y);
+                ctx.lineTo(graph_left + 20, graph_top + y);
             } else {
-                ctx.moveTo(graph_left,graph_top+y);
-                ctx.lineTo(graph_left+5,graph_top+y);
+                ctx.moveTo(graph_left, graph_top + y);
+                ctx.lineTo(graph_left + 5, graph_top + y);
             }
         }
         ctx.stroke();
@@ -145,11 +149,11 @@ var graph_lines = {
         // Axes
         ctx.beginPath();
         // x-axis
-        ctx.moveTo(graph_left,graph_top+graph_height);
-        ctx.lineTo(graph_left+graph_width,graph_top+graph_height);
+        ctx.moveTo(graph_left, graph_top + graph_height);
+        ctx.lineTo(graph_left + graph_width, graph_top + graph_height);
         // y-axis
-        ctx.moveTo(graph_left,graph_top+graph_height);
-        ctx.lineTo(graph_left,graph_top);
+        ctx.moveTo(graph_left, graph_top + graph_height);
+        ctx.lineTo(graph_left, graph_top);
         ctx.stroke();
         
         ctx.beginPath();
diff --git a/lib/timeseries.js b/lib/timeseries.js
index b0e16e94..313c4bb5 100644
--- a/lib/timeseries.js
+++ b/lib/timeseries.js
@@ -7,23 +7,23 @@ var timeseries = {
     // with features for appending a new datapoint and triming the old data in order to create a moving view
     // -------------------------------------------------------------------------------------------------------
     
-    load: function (name,start,end,interval)
-    {
-        start *= 0.001; end *= 0.001;
+    load: function (name, start, end, interval) {
+        start *= 0.001;
+        end *= 0.001;
         interval = Math.round(interval);
-        start = Math.floor(start/interval)*interval;
-        end = Math.ceil(end/interval)*interval;
-        start *= 1000; end *= 1000;
+        start = Math.floor(start / interval) * interval;
+        end = Math.ceil(end / interval) * interval;
+        start *= 1000;
+        end *= 1000;
         
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "&apikey="+apikey;
+        var apikeystr = (apikey !== "") ? "&apikey=" + apikey : "";
         
-        $.ajax({                                      
-            url: path+"feed/data.json",                         
-            data: "id="+name+"&start="+start+"&end="+end+"&interval="+interval+"&skipmissing=0&limitinterval=0"+apikeystr,
+        $.ajax({
+            url: path + "feed/data.json",
+            data: "id=" + name + "&start=" + start + "&end=" + end + "&interval=" + interval + "&skipmissing=0&limitinterval=0" + apikeystr,
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { data = data_in; } 
+            async: false,
+            success: function (data_in) {data = data_in;}
         });
         
         datastore[name] = {};
@@ -31,70 +31,74 @@ var timeseries = {
         
         datastore[name].start = 0;
         datastore[name].interval = 0;
-        if (datastore[name].data[0]!=undefined) {
+        if (datastore[name].data[0] !== undefined) {
             datastore[name].start = datastore[name].data[0][0] * 0.001;
-            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0])*0.001;
+            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0]) * 0.001;
         }
     },
     
-    append: function (name,time,value)
-    {
-        if (datastore[name]==undefined) return false;
+    append: function (name, time, value) {
+        if (datastore[name] === undefined) {return false; }
         
-        var interval = datastore[name].interval;
-        var start = datastore[name].start;
+        var interval = datastore[name].interval,
+            start = datastore[name].start,
+            pos,
+            last_pos,
+            npadding,
+            padd_time,
+            padd;
         
         // 1. align to timeseries interval
-        time = Math.floor(time/interval)*interval;
+        time = Math.floor(time / interval) * interval;
         // 2. calculate new data point position
-        var pos = (time - start) / interval;
+        pos = (time - start) / interval;
         // 3. get last position from data length
-        var last_pos = datastore[name].data.length - 1;
+        last_pos = datastore[name].data.length - 1;
         
         // if the datapoint is newer than the last:
-        if (pos > last_pos)
-        {
-            var npadding = (pos - last_pos)-1;
+        if (pos > last_pos) {
+            npadding = (pos - last_pos) - 1;
             
             // padding
-            if (npadding>0 && npadding<12) {
-                for (var padd = 0; padd<npadding; padd++)
-                {
-                    var padd_time = start + ((last_pos+padd+1) * interval);
-                    datastore[name].data.push([padd_time*1000,null]);
+            if (npadding > 0 && npadding < 12) {
+                for (padd = 0; padd < npadding; padd++) {
+                    padd_time = start + ((last_pos + padd + 1) * interval);
+                    datastore[name].data.push([padd_time * 1000, null]);
                 }
             }
             
             // insert datapoint
-            datastore[name].data.push([time*1000,value]);
+            datastore[name].data.push([time * 1000, value]);
         }
     },
     
-    trim_start: function (name,newstart)
-    {
-        if (datastore[name]==undefined) return false;
+    trim_start: function (name, newstart) {
+        if (datastore[name] === undefined) return false;
         
-        var interval = datastore[name].interval;
-        var start = datastore[name].start;
+        var interval = datastore[name].interval,
+            start = datastore[name].start,
+            pos,
+            p, t, v,
+            tmpdata = [];
         
-        newstart = Math.floor(newstart/interval)*interval;
-        var pos = (newstart - start) / interval;
-        var tmpdata = [];
+        newstart = Math.floor(newstart / interval) * interval;
+        pos = (newstart - start) / interval;
         
-        if (pos>=0) {
-            for (var p=pos; p<datastore[name].data.length; p++) {
-                if (datastore[name].data[p]==undefined) {
-                    console.log("undefined: "+p);
-                    console.log(interval)
-                    console.log(start)
+        if (pos >= 0) {
+            for (p = pos; p < datastore[name].data.length; p++) {
+                if (datastore[name].data[p] === undefined) {
+                    console.log("undefined: " + p);
+                    console.log(interval);
+                    console.log(start);
+                } else {                    
+                    t = datastore[name].data[p][0];
+                    v = datastore[name].data[p][1];
+                    tmpdata.push([t, v]);
                 }
-                var t = datastore[name].data[p][0];
-                var v = datastore[name].data[p][1];
-                tmpdata.push([t,v]);
             }
             datastore[name].data = tmpdata;
             datastore[name].start = datastore[name].data[0][0] * 0.001;
-            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0])*0.001;
+            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0]) * 0.001;
         }
-    }  
-}
+    }
+};
diff --git a/locale/en_EN/LC_MESSAGES/messages.mo b/locale/en_EN/LC_MESSAGES/messages.mo
new file mode 100644
index 00000000..f336ab2a
Binary files /dev/null and b/locale/en_EN/LC_MESSAGES/messages.mo differ
diff --git a/locale/en_EN/LC_MESSAGES/messages.po b/locale/en_EN/LC_MESSAGES/messages.po
new file mode 100644
index 00000000..05e83fa8
--- /dev/null
+++ b/locale/en_EN/LC_MESSAGES/messages.po
@@ -0,0 +1,64 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Emoncms 8.4.0 - My Elettric\n"
+"POT-Creation-Date: 2015-02-04 03:10+0100\n"
+"PO-Revision-Date: 2015-02-04 03:11+0100\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Language: en_GB\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 1.7.4\n"
+"X-Poedit-Basepath: .\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"X-Poedit-KeywordsList: _;__;_e;_n:1,2;_n_noop:1,2;_nx:1,2;_nx_noop:1,2\n"
+"X-Poedit-SearchPath-0: ../../..\n"
+
+#: ../../../myelectric_view.php:44
+msgid "My Electric config"
+msgstr ""
+
+#: ../../../myelectric_view.php:47
+msgid "Power feed (Watts):"
+msgstr ""
+
+#: ../../../myelectric_view.php:51
+msgid "Bar graph feed:"
+msgstr ""
+
+#: ../../../myelectric_view.php:54
+msgid "Bar graph feed type:"
+msgstr ""
+
+#: ../../../myelectric_view.php:56
+msgid "Watt hours elapsed"
+msgstr ""
+
+#: ../../../myelectric_view.php:57
+msgid "kWh elapsed"
+msgstr ""
+
+#: ../../../myelectric_view.php:58
+msgid "kWh per day"
+msgstr ""
+
+#: ../../../myelectric_view.php:59
+msgid "Power (Watts)"
+msgstr ""
+
+#: ../../../myelectric_view.php:64
+msgid "Save"
+msgstr ""
+
+#: ../../../myelectric_view.php:79
+msgid "POWER NOW:"
+msgstr ""
+
+#: ../../../myelectric_view.php:83
+msgid "USE TODAY:"
+msgstr ""
+
+#: ../../../myelectric_view.php:83
+msgid "kWh"
+msgstr ""
diff --git a/locale/fr_FR/LC_MESSAGES/messages.mo b/locale/fr_FR/LC_MESSAGES/messages.mo
new file mode 100644
index 00000000..b871c277
Binary files /dev/null and b/locale/fr_FR/LC_MESSAGES/messages.mo differ
diff --git a/locale/fr_FR/LC_MESSAGES/messages.po b/locale/fr_FR/LC_MESSAGES/messages.po
new file mode 100644
index 00000000..4390e82b
--- /dev/null
+++ b/locale/fr_FR/LC_MESSAGES/messages.po
@@ -0,0 +1,1059 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: emoncms9.3\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-01-26 21:07+0100\n"
+"PO-Revision-Date: 2016-01-26 21:12+0100\n"
+"Last-Translator: Benoît Pique <benoit.pique@gmail.com>\n"
+"Language-Team: Baptiste Gaultier (Télécom Bretagne) <baptiste."
+"gaultier@telecom-bretagne.eu>\n"
+"Language: fr_FR\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Poedit-KeywordsList: _;gettext;gettext_noop\n"
+"X-Poedit-Basepath: .\n"
+"X-Poedit-SourceCharset: UTF-8\n"
+"X-Generator: Poedit 1.5.4\n"
+"X-Poedit-SearchPath-0: ../../..\n"
+"X-Poedit-SearchPath-1: ../../../myelectric\n"
+
+#: ../../../app_menu.php:18
+msgid "My Electric"
+msgstr "Mon électricité"
+
+#: ../../../app_menu.php:19
+msgid "My Solar"
+msgstr "Capteur solaire"
+
+#: ../../../app_menu.php:20
+msgid "My Heatpump"
+msgstr "Ma PAC"
+
+#: ../../../app_menu.php:21
+msgid "My Solar&amp;Wind"
+msgstr "Soleil et Vent"
+
+#: ../../../myelectric/myelectric.html:68
+msgid "My Electric config"
+msgstr "Configuration"
+
+#: ../../../myelectric/myelectric.html:71
+msgid "Power feed (Watts)"
+msgstr "Flux Puissance"
+
+#: ../../../myelectric/myelectric.html:74
+msgid "Bar graph feed"
+msgstr "Histogramme du Flux"
+
+#: ../../../myelectric/myelectric.html:77
+msgid "Wh or kWh feed?"
+msgstr "Flux Wh ou kWh"
+
+#: ../../../myelectric/myelectric.html:77
+msgid "Note: Use power_to_kwh input processor to create this feed type"
+msgstr ""
+"Note: Utiliser l'entrée processeur  power_to_kwh  pour créer ce type de flux"
+
+#: ../../../myelectric/myelectric.html:79
+msgid "Watt hours elapsed"
+msgstr "Wh accumulés"
+
+#: ../../../myelectric/myelectric.html:80
+msgid "kWh elapsed"
+msgstr "kWh accumulés"
+
+#: ../../../myelectric/myelectric.html:83
+msgid "Set currency, enter text: pound, euro, dollar, yen"
+msgstr "Selectionner la monnaie, Livre, Euro, Dollar, Yen, ..."
+
+#: ../../../myelectric/myelectric.html:86
+msgid "Unit cost"
+msgstr "Coût unitaire"
+
+#: ../../../myelectric/myelectric.html:90
+msgid "Save"
+msgstr "Sauvegarder"
+
+#: ../../../myelectric/myelectric.html:98
+#, fuzzy
+msgid "Cost"
+msgstr "Coût"
+
+#: ../../../myelectric/myelectric.html:99
+msgid "kWh"
+msgstr "kWh"
+
+#: ../../../myelectric/myelectric.html:110
+msgid "POWER NOW"
+msgstr "Puissance instantanée"
+
+#: ../../../myelectric/myelectric.html:115
+msgid "USE TODAY"
+msgstr "Utilisation aujourd'hui"
+
+#: ../../../myelectric/myelectric.html:124
+#: ../../../myelectric/myelectric.html:125
+msgid "h"
+msgstr "h"
+
+#: ../../../myelectric/myelectric.html:126
+msgid "D"
+msgstr "J"
+
+#: ../../../myelectric/myelectric.html:127
+msgid "W"
+msgstr "S"
+
+#: ../../../myelectric/myelectric.html:128
+msgid "M"
+msgstr "M"
+
+#: ../../../myelectric/myelectric.html:129
+#: ../../../myelectric/myelectric.html:130
+#: ../../../myelectric/myelectric.html:131
+#, fuzzy
+msgid " "
+msgstr "."
+
+#~ msgid "Select the feed to show"
+#~ msgstr "Flux sélectionné"
+
+#~ msgid "Select the daily feed source to show"
+#~ msgstr "Le flux à afficher"
+
+#~ msgid "Bar graph feed type"
+#~ msgstr "Histogramme type de Flux"
+
+#~ msgid "Select presentation"
+#~ msgstr "selectionner la présentation"
+
+#~ msgid "kWh per day"
+#~ msgstr "kWh quotidien"
+
+#~ msgid "Power (Watts)"
+#~ msgstr "Puissance (Watt)"
+
+#~ msgid "Feeds"
+#~ msgstr "Flux"
+
+#~ msgid "Feed API Help"
+#~ msgstr "Aide de l'API Flux"
+
+#~ msgid "Refresh feed size"
+#~ msgstr "Actualiser les tailles des flux"
+
+#~ msgid "No feeds created"
+#~ msgstr "Aucun flux disponible"
+
+#~ msgid ""
+#~ "Feeds are where your monitoring data is stored. The recommended route for "
+#~ "creating feeds is to start by creating inputs (see the inputs tab). Once "
+#~ "you have inputs you can either log them straight to feeds or if you want "
+#~ "you can add various levels of input processing to your inputs to create "
+#~ "things like daily average data or to calibrate inputs before storage. You "
+#~ "may want to follow the link as a guide for generating your request. "
+#~ msgstr ""
+#~ "Les flux correspondent à l'archivage et au traitement de vos données. "
+#~ "Créez d'abord une source de données (Onglet Sources), utilisez ensuite "
+#~ "les flux pour traiter ces données avant de les archiver. Vous pouvez lire "
+#~ "la documentation sur l'API flux pour plus d'information (en Anglais)"
+
+#~ msgid "Feed API helper"
+#~ msgstr "Aide de l'API"
+
+#~ msgid "Id"
+#~ msgstr "id"
+
+#~ msgid "Name"
+#~ msgstr "Nom"
+
+#~ msgid "Tag"
+#~ msgstr "Etiquette"
+
+#~ msgid "Datatype"
+#~ msgstr "Type de données"
+
+#~ msgid "Engine"
+#~ msgstr "Stockage"
+
+#~ msgid "Public"
+#~ msgstr "Public"
+
+#~ msgid "Make feed public"
+#~ msgstr "Rendre ce flux public"
+
+#~ msgid "Size"
+#~ msgstr "Taille"
+
+#~ msgid "Updated"
+#~ msgstr "Actualisé"
+
+#~ msgid "Value"
+#~ msgstr "Valeur"
+
+#~ msgid "Edit"
+#~ msgstr "modifier"
+
+#~ msgid "Delete"
+#~ msgstr "Supprimer"
+
+#~ msgid "Preview"
+#~ msgstr "Afficher"
+
+#~ msgid "Configure element"
+#~ msgstr "Configurer l'élément"
+
+#~ msgid "Cancel"
+#~ msgstr "Annuler"
+
+#~ msgid "Save changes"
+#~ msgstr "Sauvegarder les changements"
+
+#, fuzzy
+#~ msgid "Feeds API Help"
+#~ msgstr "Aide de l'API Flux"
+
+#~ msgid ""
+#~ "Feeds are where your monitoring data is stored. The recommended route for "
+#~ "creating feeds is to start by creating inputs (see the inputs tab). Once "
+#~ "you have inputs you can either log them straight to feeds or if you want "
+#~ "you can add various levels of input processing to your inputs to create "
+#~ "things like daily average data or to calibrate inputs before storage. You "
+#~ "may want to follow the link as a guide for generating your request."
+#~ msgstr ""
+#~ "Les flux correspondent à l'archivage et au traitement de vos données. "
+#~ "Créez d'abord une source de données (Onglet Sources), utilisez ensuite "
+#~ "les flux pour traiter ces données avant de les archiver. Vous pouvez lire "
+#~ "la documentation sur l'API flux pour plus d'information (en Anglais)"
+
+#~ msgid "CSV data export"
+#~ msgstr "Exportation au format CSV"
+
+#~ msgid "Selected feed:"
+#~ msgstr "Flux sélectionné"
+
+#~ msgid "Select the dates range interval that you wish to export: (From - To)"
+#~ msgstr ""
+#~ "Sélectionner les dates définissant l'intervalle à exporter (Date de - à)"
+
+#~ msgid "Start Date"
+#~ msgstr "Date de début"
+
+#~ msgid "End Date"
+#~ msgstr "Date de fin"
+
+#~ msgid ""
+#~ "Select the time interval with time reference that you wish to export:"
+#~ msgstr ""
+#~ "Sélectionner l'intervalle de temps des échantillons que vous désirez "
+#~ "exporter:"
+
+#~ msgid "Select samples time interval"
+#~ msgstr "Sélection de l'intervalle des échantillons"
+
+#~ msgid "s"
+#~ msgstr "s"
+
+#~ msgid "min"
+#~ msgstr "Min"
+
+#, fuzzy
+#~ msgid "mins"
+#~ msgstr " minutes"
+
+#~ msgid "hour"
+#~ msgstr "Heure"
+
+#~ msgid "hours"
+#~ msgstr "Heures"
+
+#~ msgid "Daily"
+#~ msgstr "Quotidien"
+
+#~ msgid "Weekly"
+#~ msgstr "Hebdomadaire"
+
+#~ msgid "Monthly"
+#~ msgstr "Mensuel"
+
+#~ msgid "Annual"
+#~ msgstr "Annuel"
+
+#~ msgid "Select Time zone (for day export)"
+#~ msgstr "Sélectionner le fuseau horaire (pour exportation d'un jour)"
+
+#~ msgid "Feed intervals note:"
+#~ msgstr "Note à propos des intervalles de Flux"
+
+#~ msgid ""
+#~ "if the selected interval is shorter than the feed interval the feed "
+#~ "interval will be used instead."
+#~ msgstr ""
+#~ "Si l'intervalle sélectionné est inférieur à l'intervalle du flux, c'est "
+#~ "l'intervalle du flux qui servira."
+
+#~ msgid "Averages are only returned for feed engines with built in averaging."
+#~ msgstr ""
+#~ "Les moyennes ne sont fournies que pour les flux utilisant un moteur "
+#~ "contant un calcul de moyenne."
+
+#~ msgid "Estimated download size "
+#~ msgstr "Taille estimée du fichier"
+
+#~ msgid "Export"
+#~ msgstr "Exporter"
+
+#~ msgid "Data selection error"
+#~ msgstr "Erreur de dates"
+
+#~ msgid "Please enter a valid START date."
+#~ msgstr "Entrer une date de DEBUT valide."
+
+#~ msgid "Please enter a valid END date."
+#~ msgstr "Entrer une date de FIN valide."
+
+#~ msgid "Start date should be before end date."
+#~ msgstr "La date de début doit être avant la date de fin."
+
+#~ msgid "Download file size too large (download limit: 10Mb)."
+#~ msgstr "Le fichier est trop gros (limite de déchargement: 10MB)"
+
+#~ msgid "Please select sample time interval."
+#~ msgstr "L'intervalle de temps n'est pas défini."
+
+#~ msgid "Close"
+#~ msgstr "Fermer"
+
+#~ msgid "Are you sure you want to delete this feed?"
+#~ msgstr "Etes vous sûr de vouloir supprimer ce flux ?"
+
+#~ msgid "WARNING deleting a feed is permanent"
+#~ msgstr "ATTENTION ! La suppression d'un flux est irréversible"
+
+#~ msgid "Delete Feed"
+#~ msgstr "Supprimer le Flux"
+
+#~ msgid "Download data"
+#~ msgstr "Télécharger les données"
+
+#~ msgid "Feed API"
+#~ msgstr "API de gestion du flux"
+
+#~ msgid "Apikey authentication"
+#~ msgstr "Authentification APIKey"
+
+#~ msgid ""
+#~ "If you want to call any of the following action's when your not logged "
+#~ "in, add an apikey to the URL of your request: &apikey=APIKEY."
+#~ msgstr ""
+#~ "Si vous voulez appeler ces fonctions sans être connecté, il suffit "
+#~ "d'ajouter votre clé API sur l'url : &apikey=APIKEY"
+
+#~ msgid "Read only:"
+#~ msgstr "Accès en lecture seule : "
+
+#~ msgid "Read & Write:"
+#~ msgstr "Lecture / Ecriture :"
+
+#~ msgid "Html"
+#~ msgstr "Html"
+
+#~ msgid "The feed list view"
+#~ msgstr "La liste des flux "
+
+#~ msgid "This page"
+#~ msgstr "Cette page (documentation API)"
+
+#~ msgid "JSON"
+#~ msgstr "JSON"
+
+#~ msgid "To use the json api the request url needs to include .json"
+#~ msgstr ""
+#~ "Pour utiliser l'api json, vous devez ajouter .json à la fin de l'url"
+
+#~ msgid "returns a list of public feeds made public by the given user."
+#~ msgstr "Renvoi la liste des flux public pour un utilisateur"
+
+#~ msgid "returns the present value of a given feed"
+#~ msgstr "Renvoi la valeur courante d'un flux de données"
+
+#~ msgid "returns feed data"
+#~ msgstr "Les données du flux"
+
+#~ msgid "returns histogram data"
+#~ msgstr "Données d'histogramme"
+
+#~ msgid "returns kwh consumed in a given power band using histogram data type"
+#~ msgstr "Renvoi la puissance consommée sous forme d'histogramme"
+
+#~ msgid "returns id of a feed given by name"
+#~ msgstr "Retourne l'id d'un flux à partir de son nom"
+
+#~ msgid "Feed intervals:"
+#~ msgstr "Intervalles de Flux"
+
+#~ msgid "Select the time range and interval that you wish to export:"
+#~ msgstr "Sélectionner la durée et l'intervalle que vous désirez obtenir:"
+
+#~ msgid "Export data beween selected dates"
+#~ msgstr "Exportation des données entre les dates sélectionnées"
+
+#~ msgid "Feed data export procedure"
+#~ msgstr "Procédure d'exportation des données de Flux"
+
+#~ msgid "Export Data"
+#~ msgstr "Exporte les données"
+
+#~ msgid "Estimated download size: <span> 0</span> kB"
+#~ msgstr "Taille estimée du téléchargement: <span> 0</span> kB"
+
+#~ msgid "Delete permanently"
+#~ msgstr "Supprimer le flux ?"
+
+#, fuzzy
+#~ msgid "Input API Help"
+#~ msgstr "Aide de l'API Flux"
+
+#~ msgid "Missing field parameter"
+#~ msgstr "Manque un paramètre"
+
+#~ msgid "Field updated"
+#~ msgstr "Actualisé"
+
+#~ msgid "Field could not be updated"
+#~ msgstr "Le champ ne peut être mis à jour"
+
+#~ msgid "Feed "
+#~ msgstr "Le flux"
+
+#~ msgid " deleted"
+#~ msgstr "a &eacute;t&eacute; supprim&eacute;"
+
+#~ msgid "Emoncms database setup script"
+#~ msgstr "Script de configuration de la base de donn&eacute;e emoncms"
+
+#~ msgid "Continue to emoncms"
+#~ msgstr "Continuer vers emoncms"
+
+#~ msgid "to run script uncomment runnable"
+#~ msgstr ""
+#~ "Pour ex&eacute;cuter le script, d&eacutecommenter la variable runnable"
+
+#~ msgid "dashboards new"
+#~ msgstr "Nouveau tableau de bord"
+
+#~ msgid "Logout"
+#~ msgstr "D&eacute;connexion"
+
+#~ msgid "dashboard set"
+#~ msgstr "Tableau de bord modifi&eacute;"
+
+#~ msgid "dashboard set configuration"
+#~ msgstr "d&ecute;finir la configuration du tableau de bord"
+
+#~ msgid "Feed type changed"
+#~ msgstr "Le type a &eacute;t&eacute; chang&eacute;"
+
+#~ msgid "Feed tag changed"
+#~ msgstr "L’&eacute;tiquetage du flux a &eacute;t&eacute; modifi&eacute;"
+
+#~ msgid "Feed renamed"
+#~ msgstr "Le flux a &eacute;t&eacute; renomm&eacute;"
+
+#~ msgid "Input deleted"
+#~ msgstr "Source supprim&ecute;e"
+
+#~ msgid "Process list has been reset"
+#~ msgstr "La liste d'actions a &ecute;t&ecute; r&eacute;initialis&eacute;e "
+
+#~ msgid "Invalid username or password"
+#~ msgstr "L'identifiant ou le mot de passe saisi est incorrect"
+
+#~ msgid "Welcome, you are now logged in"
+#~ msgstr "Salut, vous &ecirc;tes maintenant connect&eacute;"
+
+#~ msgid "Sorry username already exists"
+#~ msgstr "D&eacute;sol&eacute;, cet identifiant existe d&eacute;j&agrave;"
+
+#~ msgid "Please enter a username that is 4 to 30 characters long"
+#~ msgstr "Merci de choisir un identifiant de plus de 4 caract&egrave;res"
+
+#~ msgid "Please enter a password that is 4 to 30 characters long"
+#~ msgstr "Mercir de taper un mot de passe contenant "
+
+#~ msgid "Your new account has been created"
+#~ msgstr "Votre compte a &eacute;t&eacute; cr&eacute;&eacute;"
+
+#~ msgid "Your password has been changed"
+#~ msgstr "Votre mot de passe a &eacute;t&eacute; chang&eacute;"
+
+#~ msgid "Invalid password"
+#~ msgstr "Mot de passe incorrect"
+
+#~ msgid "No email address present"
+#~ msgstr "Aucune adresse mail n'est renseignée"
+
+#~ msgid "New read apikey: "
+#~ msgstr "Nouvelle cl&eacute; API (lecture) : "
+
+#~ msgid "New write apikey: "
+#~ msgstr "Nouvelle &ecute; API (&eacute;criture) : "
+
+#~ msgid "You are logged out"
+#~ msgstr "Vous &ecirc;tes d&eacute;connect&eacute;"
+
+#~ msgid "Invalid token"
+#~ msgstr "Jeton invalide"
+
+#~ msgid "Restricted access"
+#~ msgstr "Acc&egrave;s restreint"
+
+#~ msgid "Message successfully sent!"
+#~ msgstr "Message envoy&eacute; avec succ&egrave;s"
+
+#~ msgid " is"
+#~ msgstr "est"
+
+#~ msgid " is inactive"
+#~ msgstr "est inactif"
+
+#~ msgid "Log to feed"
+#~ msgstr "vers flux"
+
+#~ msgid "Power to kWh"
+#~ msgstr "watts vers kWh"
+
+#~ msgid "Power to kWh/d"
+#~ msgstr "watts vers kWh/j"
+
+#~ msgid "x input"
+#~ msgstr " × source"
+
+#~ msgid "kWhinc to kWh/d"
+#~ msgstr "kWhinc vers kWh/j"
+
+#~ msgid "update feed @time"
+#~ msgstr "actualiser le flux @temps"
+
+#~ msgid "+ input"
+#~ msgstr "+ source"
+
+#~ msgid "/ input"
+#~ msgstr "&divide; source"
+
+#~ msgid "phaseshift"
+#~ msgstr "d&eacute;phasage"
+
+#~ msgid "accumulator"
+#~ msgstr "accumulateur"
+
+#~ msgid "histogram"
+#~ msgstr "histogramme"
+
+#~ msgid "average"
+#~ msgstr "moyenne"
+
+#~ msgid ""
+#~ "API keys are used to give authenticated access without login in via a "
+#~ "normal session."
+#~ msgstr ""
+#~ "Les cl&eacute;s API sont utiles pour donner un acc&egrave;s &agrave; "
+#~ "emoncms sans avoir besoin de se connecter."
+
+#~ msgid "Allows to access in read only mode"
+#~ msgstr "Permet l'acc&egrave;s en lecture seule"
+
+#~ msgid "new"
+#~ msgstr "g&eacute;n&eacute;rer"
+
+#~ msgid "Write only access: "
+#~ msgstr "Acc&egrave;s en &eacute;criture : "
+
+#~ msgid "Keep secret. Write mode access"
+#~ msgstr "Ne pas divulguer. Cl&eacute; API avec droits d'&eacute;criture"
+
+#~ msgid "Post API"
+#~ msgstr "API"
+
+#~ msgid ""
+#~ "Example: Click or copy this to your web browser or send from your "
+#~ "monitoring hardware"
+#~ msgstr ""
+#~ "Exemple : Cliquer ou copier ceci dans votre navigateur ou depuis votre "
+#~ "capteur"
+
+#~ msgid "try me"
+#~ msgstr "tester"
+
+#~ msgid "Visualisation API"
+#~ msgstr "API de visualisation"
+
+#~ msgid ""
+#~ "These are all the visualisations that are available in emoncms3. To view "
+#~ "a visualisation enter in a relevant feedid in the underlined boxes below "
+#~ "and then click on the > button."
+#~ msgstr ""
+#~ "Voici les visulations disponibles dans emoncms3. Veuillez entrer un "
+#~ "identifiant de flux dans les champs ci-dessous puis cliquer sur >"
+
+#~ msgid "URL"
+#~ msgstr "Lien"
+
+#~ msgid "View"
+#~ msgstr "Afficher"
+
+#~ msgid "Real-time graph"
+#~ msgstr "Temps-r&eacute;el"
+
+#~ msgid "Raw data graph"
+#~ msgstr "Donn&eacute;es brutes"
+
+#~ msgid "All time histogram"
+#~ msgstr "Histogramme complet"
+
+#~ msgid "Daily histogram"
+#~ msgstr "Histogramme quotidien"
+
+#~ msgid "Zoom"
+#~ msgstr "Zoom"
+
+#~ msgid "kWh/d Comparison"
+#~ msgstr "Comparaison kWh/j"
+
+#~ msgid "Bar graph (ordered by height)"
+#~ msgstr "Histogramme (tri&eacute; par hauteur)"
+
+#~ msgid "Threshold ordered by height"
+#~ msgstr "Seuils (tri&eacute;s par hauteur)"
+
+#~ msgid "Multigraph"
+#~ msgstr "Graphiques multiples"
+
+#~ msgid "Datapoint Editor"
+#~ msgstr "&Eacute;diteur de points"
+
+#~ msgid "Other options:"
+#~ msgstr "Options"
+
+#~ msgid "Hide menu"
+#~ msgstr "Cacher le menu"
+
+#~ msgid ""
+#~ "Hide the top menu and footer by adding the attribute <i>&embed=1</i> to "
+#~ "the URL."
+#~ msgstr ""
+#~ "Cacher le menu et le pied de page en ajoutant l'attribut <i>&embed=1</i> "
+#~ "&agrave; l'adresse."
+
+#~ msgid "Share"
+#~ msgstr "Partager"
+
+#~ msgid "To share a visualisation use your read apikey. Add the attribute "
+#~ msgstr ""
+#~ "Pour partager un visulaisation, indiquer votre cl&eacute API (lecture). "
+#~ "Ajouter"
+
+#~ msgid " to the URL"
+#~ msgstr "&agrave; l'adresse"
+
+#, fuzzy
+#~ msgid "Reset Multigraph"
+#~ msgstr "Graphiques multiples"
+
+#, fuzzy
+#~ msgid "The multigraph can be reset using the <i>&clear=1</i> attribute."
+#~ msgstr ""
+#~ "Le graphe peut &ecirc;tre r&eacute;initialis&eacute; en utilisant "
+#~ "l'attribut  &clear=1."
+
+#~ msgid "Yes please"
+#~ msgstr "Oui"
+
+#~ msgid "Inputs"
+#~ msgstr "Sources"
+
+#~ msgid "Dashboards"
+#~ msgstr "Tableaux de bord"
+
+#~ msgid "Account"
+#~ msgstr "Compte"
+
+#~ msgid "Notify settings"
+#~ msgstr "Configuration des notifications"
+
+#~ msgid "Notification recipiants (To): "
+#~ msgstr "Destinataire : "
+
+#~ msgid "Notify "
+#~ msgstr "Notifier"
+
+#~ msgid "Setup feed notifications"
+#~ msgstr "Configuration des notifications"
+
+#~ msgid "Notify when feed = value: "
+#~ msgstr "Envoyer quand le flux est &eacute;gal &agrave; cette valeur : "
+
+#, fuzzy
+#~ msgid "Notify when feed is inactive"
+#~ msgstr "Envoyer rapport quand le flux est inactif"
+
+#, fuzzy
+#~ msgid "Notify feed status periodically"
+#~ msgstr "Envoyer rapport p&eacute;riodiquement "
+
+#~ msgid "Edit mail settings"
+#~ msgstr "Configuration email"
+
+#~ msgid "User: "
+#~ msgstr "Identifiant : "
+
+#~ msgid "Select preferred language"
+#~ msgstr "S&eacute;lectionner la langue principale"
+
+#~ msgid "Browser language"
+#~ msgstr "Langue du navigateur"
+
+#~ msgid "Change details"
+#~ msgstr "Modification du compte"
+
+#~ msgid "Username:"
+#~ msgstr "Identifiant : "
+
+#~ msgid "Email:"
+#~ msgstr "Correo:"
+
+#~ msgid "Change"
+#~ msgstr "Modifier"
+
+#~ msgid "Change password"
+#~ msgstr "Modifier le mot de passe"
+
+#~ msgid "Current password:"
+#~ msgstr "Ancien mot de passe : "
+
+#~ msgid "New password:"
+#~ msgstr "Nouveau mot de passe : "
+
+#~ msgid "Account Statistics"
+#~ msgstr "Statistiques du compte"
+
+#~ msgid "Disk space use:"
+#~ msgstr "Espace disque utilis&eacute; : "
+
+#~ msgid "Up hits:"
+#~ msgstr "Up hits : "
+
+#~ msgid "Down hits:"
+#~ msgstr "Down hits : "
+
+#~ msgid "en_EN"
+#~ msgstr "Anglais"
+
+#~ msgid "es_ES"
+#~ msgstr "Espagnol"
+
+#~ msgid "nl_BE"
+#~ msgstr "Flamand"
+
+#~ msgid "nl_NL"
+#~ msgstr "N&eacute;erlandais"
+
+#~ msgid "fr_FR"
+#~ msgstr "Français"
+
+#~ msgid "Admin panel"
+#~ msgstr "Administration"
+
+#~ msgid "Total feed data disk space use: "
+#~ msgstr "Espace utilis&eacute; pour le stockage des flux : "
+
+#~ msgid "Users"
+#~ msgstr "Utilisateurs"
+
+#~ msgid "registered users"
+#~ msgstr "utilisateurs enregistr&eacute;s"
+
+#~ msgid "Username"
+#~ msgstr "Nombre d'utilisateur"
+
+#~ msgid "Memory use"
+#~ msgstr "M&eacute;moire"
+
+#~ msgid "Dashboard name: "
+#~ msgstr "Nom du tableau de bord : "
+
+#~ msgid "Description: "
+#~ msgstr "Description : "
+
+#~ msgid "Main: "
+#~ msgstr "Principal : "
+
+#~ msgid "Published: "
+#~ msgstr "Publi&eacute; : "
+
+#~ msgid "Public: "
+#~ msgstr "Public : "
+
+#~ msgid "Menu name: (lowercase a-z only)"
+#~ msgstr "Nom dans le menu (minuscules de a-z) : "
+
+#~ msgid "Dashboard"
+#~ msgstr "Tableau de bord"
+
+#~ msgid "Main"
+#~ msgstr "Principal"
+
+#~ msgid "Published"
+#~ msgstr "Publi&eacute;"
+
+#~ msgid "Actions"
+#~ msgstr "Actions"
+
+#~ msgid "This is the main dashboard"
+#~ msgstr "Tableau de bord principal"
+
+#~ msgid "Set main dashboard"
+#~ msgstr "Choisir comme tableau de bord principal"
+
+#~ msgid "Unpublish dashboard"
+#~ msgstr "Ne plus publier"
+
+#~ msgid "Publish dashboard"
+#~ msgstr "Publier ce teableau de bord"
+
+#~ msgid "Make dashboard private"
+#~ msgstr "Rendre ce tableau de bord privé"
+
+#~ msgid "Draw"
+#~ msgstr "&Eacute;diter"
+
+#~ msgid "Public share URL"
+#~ msgstr "Adresse de partage (public)"
+
+#~ msgid "Private share URL"
+#~ msgstr "Adresse de partage"
+
+#~ msgid "Dashboards:"
+#~ msgstr "Tableaux de bord : "
+
+#~ msgid "Draw Editor"
+#~ msgstr "&Eacute;diter"
+
+#~ msgid "View mode"
+#~ msgstr "Vue"
+
+#~ msgid "Config"
+#~ msgstr "Configuration"
+
+#~ msgid "New"
+#~ msgstr "Nouveau"
+
+#~ msgid "Thumb view"
+#~ msgstr "Aperçu"
+
+#~ msgid "List view"
+#~ msgstr "Liste"
+
+#~ msgid "User"
+#~ msgstr "Utilisateur"
+
+#~ msgid "Description"
+#~ msgstr "Description"
+
+#~ msgid "Select graph type:"
+#~ msgstr "S&eacute;lectionner un type de graphique : "
+
+#~ msgid "Real-time"
+#~ msgstr "Temps-r&eacute;el"
+
+#~ msgid "Raw data"
+#~ msgstr "Donn&eacute;es brutes"
+
+#~ msgid "Histogram"
+#~ msgstr "Histogramme"
+
+#~ msgid "Feed type"
+#~ msgstr "Type de flux"
+
+#~ msgid "Undefined"
+#~ msgstr "Non d&eacute;fini"
+
+#~ msgid "Real-time data"
+#~ msgstr "Donn&eacute;es temps-r&eacute;el"
+
+#~ msgid "Tag feed"
+#~ msgstr "Tag du flux"
+
+#~ msgid "Rename feed"
+#~ msgstr "Renommer le flux"
+
+#~ msgid "Rename"
+#~ msgstr "Renommer"
+
+#~ msgid "Notify"
+#~ msgstr "Notifier"
+
+#~ msgid "Set notification behavior for this feed"
+#~ msgstr "Configurer les notifications pour ce flux"
+
+#~ msgid "feed/delete"
+#~ msgstr "flux/supprimer"
+
+#~ msgid "s ago"
+#~ msgstr " secondes"
+
+#~ msgid " hours ago"
+#~ msgstr "heures"
+
+#~ msgid "inactive"
+#~ msgstr "inactif"
+
+#~ msgid "Input configuration:   "
+#~ msgstr "Configuration des sources : "
+
+#~ msgid "Order"
+#~ msgstr "Ordre"
+
+#~ msgid "Process"
+#~ msgstr "Action"
+
+#~ msgid "Arg"
+#~ msgstr "Param&egrave;tre"
+
+#~ msgid "add"
+#~ msgstr "ajouter"
+
+#~ msgid "Reset process list?"
+#~ msgstr "R&eacute;initialis&eacute; les actions : "
+
+#~ msgid "Are you sure you want to delete input: "
+#~ msgstr "&Ecirc;tes vous s&ucirc;r de vouloir supprimer cette source ? "
+
+#~ msgid "Delete input?"
+#~ msgstr "Supprimer source ?"
+
+#~ msgid "Password:"
+#~ msgstr "Mot de passe : "
+
+#~ msgid "Login"
+#~ msgstr "Connexion"
+
+#~ msgid ""
+#~ "Or if you are new enter a username and password above and click register"
+#~ msgstr ""
+#~ "Ou si vous &ecirc;tes un nouvel utilisateur, indiquer un identifiant et "
+#~ "un mot de passe puis cliquer sur S'inscrire"
+
+#~ msgid "Register"
+#~ msgstr "S'inscrire"
+
+#~ msgid "Old password:"
+#~ msgstr "Mot de passe actuel : "
+
+#~ msgid "delete"
+#~ msgstr "supprimer"
+
+#~ msgid "AUTODETECTLANGUAGE"
+#~ msgstr "Browser language"
+
+#~ msgid "Sorry, you need a valid apikey or be logged in to see this page"
+#~ msgstr ""
+#~ "Lo siento, necesitas una clave válida o estar loggeado para ver esta "
+#~ "página"
+
+#~ msgid "Reset"
+#~ msgstr "Resetear"
+
+#~ msgid "Language"
+#~ msgstr "Lenguaje"
+
+#~ msgid "API keys"
+#~ msgstr "Claves API"
+
+#~ msgid "converted feed: "
+#~ msgstr "fuente convertida:"
+
+#~ msgid "feed: "
+#~ msgstr "fuente:"
+
+#~ msgid " already converted"
+#~ msgstr " ya convertido"
+
+#~ msgid "Embed this graph"
+#~ msgstr "Incrustar este gráfico"
+
+#~ msgid "Realtime: "
+#~ msgstr "Tiempo real:"
+
+#~ msgid "Raw data: "
+#~ msgstr "Datos brutos:"
+
+#~ msgid "English"
+#~ msgstr "Inglés"
+
+#~ msgid "Spanish"
+#~ msgstr "Español"
+
+#~ msgid "Set"
+#~ msgstr "Establecer"
+
+#~ msgid "Save current configuration"
+#~ msgstr "Guardar configuración actual"
+
+#~ msgid "Select Feeds"
+#~ msgstr "Seleccionar Fuentes"
+
+#~ msgid "Left"
+#~ msgstr "Izquierda"
+
+#~ msgid "Right"
+#~ msgstr "Derecha"
+
+#~ msgid "Fill"
+#~ msgstr "Rellenar"
+
+#~ msgid "Loading...  please wait about 5s"
+#~ msgstr "Cargando... por favor espere unos 5s"
+
+#~ msgid "Loading..."
+#~ msgstr "Cargando..."
+
+#~ msgid "2 Months"
+#~ msgstr "2 Meses"
+
+#~ msgid "Day"
+#~ msgstr "Día"
+
+#~ msgid "Hour"
+#~ msgstr "Hora"
+
+#~ msgid "Left vs"
+#~ msgstr "Izquierda vs"
+
+#~ msgid "Loading a feed can take time.. "
+#~ msgstr "Cargar una fuente puede llevar tiempo..."
+
+#~ msgid "1 day"
+#~ msgstr "1 día"
+
+#~ msgid "Date / Time"
+#~ msgstr "Fecha / Hora"
+
+#~ msgid "Total: "
+#~ msgstr "Total:"
+
+#~ msgid " kWh : pounds"
+#~ msgstr "kWh: libras"
+
+#~ msgid " a week, pounds"
+#~ msgstr "una semana, libras"
+
+#~ msgid " a year | Unit price: pounds"
+#~ msgstr "un año | Unidad: libras"
+
+#~ msgid "Last:"
+#~ msgstr "Último:"
+
+#~ msgid "Graph"
+#~ msgstr "Gráfico"
diff --git a/locale_js/app_en.js b/locale_js/app_en.js
new file mode 100644
index 00000000..692783bd
--- /dev/null
+++ b/locale_js/app_en.js
@@ -0,0 +1,87 @@
+var i18ntext = {
+    '$': '£',
+    '&gt;': '&gt;',
+    '&lt;': '&lt;',
+    '+': '+',
+    '-': '-',
+    '3h': '3h',
+    '6h': '6h',
+    'ALL': 'ALL',
+    'Bar graph feed': 'Bar graph feed',
+    'Cost': 'Cost',
+    'D': 'D',
+    'kWh elapsed' : 'kWh elapsed',
+    'kWh': 'kWh',
+    "kWh/d": "kWh/d",
+    "/day": "/day",
+    "Power (Watts)": "Power (Watts)",
+    "W": "W",
+    'M': 'M',
+    'MONTH': 'MONTH',
+    'My Electric config': 'My Electric config',
+    'Power feed (Watts):': 'Power feed (Watts):',
+    'POWER NOW': 'POWER NOW',
+    'Set currency, enter text: pound, euro, dollar, yen: ' : 'Set currency, enter text: pound, euro, dollar, yen: ',
+    'Unit cost:': 'Unit cost;:',
+    'USE TODAY': 'USE TODAY',
+    'Watt hours elapsed': 'Watt hours elapsed',
+    'WEEK': 'WEEK',
+    'Wh or kWh feed?': 'Wh or kWh feed?',
+    'YEAR': 'YEAR',
+    '<' : '<',
+    '>' : '>',
+    'APP CONFIG' : 'APP CONFIG',
+    'configcomment' : 'configcomment',
+    'Configuration:' : 'Configuration:',
+    'DIRECT' : 'DIRECT',
+    'Electricity consumption' : 'Electricity consumption',
+    'EXPORTING' : 'EXPORTING',
+    'feed id (csv for multiple)' : 'feed id (csv for multiple)',
+    'GRID' : 'GRID',
+    'Hide balance' : 'Hide balance',
+    'HOUSE' : 'HOUSE',
+    'IMPORTING' : 'IMPORTING',
+    'PERFECT BALANCE' : 'PERFECT BALANCE',
+    'Save' : 'Save',
+    'Show balance' : 'Show balance',
+    'Solar generation' : 'Solar generation',
+    'SOLAR PV' : 'SOLAR PV',
+    'SOLAR' : 'SOLAR',
+    'W' : 'W',
+    'Y' : 'Y',
+    'MY HEATPUMP' : 'MY HEATPUMP',
+    'HEATPUMP POWER' : 'HEATPUMP POWER',
+    'FLOW' : 'FLOW',
+    'RETURN' : 'RETURN',
+    'OUTSIDE' : 'OUTSIDE',
+    'ROOM' : 'ROOM',
+    'DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)' : 'DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)',
+    'DETAILED VIEW:' : 'DETAILED VIEW:',
+    'POWER (Watts)' : 'POWER (Watts)',
+    'Temperature (C)' : 'Temperature (°C)',
+    'thisdashboard' : 'This dashboard automatically looks for feeds named or containing the words:',
+    'heatpumprem' : 'heatpump_power, heatpump_kwh, heatpump_flow_temp, heatpump_return_temp, ambient_temp and heatpump_room_temp.',
+    'heatpumphide' : 'If heatpump_kwh is not available it will hide the daily kwh graph.',
+    'addthesefeeds' : 'To use this dashboard add these names to the relevant feeds.',
+    'myenergy-comment1' : 'This app can be used to compare electricity consumption with electricity generation from renewable energy generation sources including onsite solar and wind power from the UK grid.</p><p>The estimate of the amount of power available from UK wind power is calculated by taking the realtime electricity production from wind in the uk now available from bmreports.com divided by the UK installed wind capacity multipled by the amount of wind capacity requried to generate the annual demand at a capacity factor of 40%. This work builds upon the open source hourly energy modelling work that we have been doing with the Center for Alternative Technology',
+    'Annual wind generation supplied' : 'Annual wind generation supplied',
+    'from renewable energy tariff (kWh)' : 'from renewable energy tariff (kWh)',
+    'Wind capacity required' : 'Wind capacity required',
+    'of a 3MW Wind turbine at 40% capacity factor' : 'of a 3MW Wind turbine at 40% capacity factor',
+    'myenergy-comment2' : 'solar_power, house_power.',
+    'RENEWABLE GEN' : 'RENEWABLE GEN',
+    'SOLAR:' : 'SOLAR:',
+    'WIND:' : 'WIND:',
+    'WIND' : 'WIND',
+    'STORE' : 'STORE',
+    'VIRTUAL STORE' : 'VIRTUAL STORE',
+    'CHARGE RATE' : 'CHARGE RATE',
+    'DISCHARGE RATE' : 'DISCHARGE RATE',
+    '8h' : '8h',
+    'Missing feeds' : 'Missing feeds',
+    'The Solar PV dashboard needs specific feeds ' : 'The Solar PV dashboard needs specific feeds ',
+    'they are inexistant in your feeds collection' : 'they are inexstant in your feeds collection',
+    'no settings saved' : 'no settings saved',
+    'Close' : 'Close'
+
+};
diff --git a/locale_js/app_fr.js b/locale_js/app_fr.js
new file mode 100644
index 00000000..a651edf1
--- /dev/null
+++ b/locale_js/app_fr.js
@@ -0,0 +1,88 @@
+var i18ntext = {
+    '$': '€',
+    '&gt;': '&gt;',
+    '&lt;': '&lt;',
+    '+': '+',
+    '-': '-',
+    '3h': '3h',
+    '6h': '6h',
+    'ALL': 'Tout',
+    'Bar graph feed': 'Histogramme',
+    'Cost': 'Coût',
+    'D': 'J',
+    'kWh elapsed': 'kWh elapsed',
+    'kWh': 'kWh',
+    "kWh/d": "kWh/j",
+    "/day": "/jour",
+    "Power (Watts)": "Puissance (Watt)",
+    "W": "Watt",
+    'M': 'M',
+    'Missing keys in i18n file' : 'Clés manquantes dans les traductions',
+    'MONTH': 'Mois',
+    'My Electric config': 'Mon élctricité configuration',
+    'Power feed (Watts):': 'Puissance (Watts):',
+    'POWER NOW': 'Puissance instantannée',
+    'Set currency, enter text: pound, euro, dollar, yen: ': 'Sélectionner la monnaie , Euro, Dollar, Livre, Yen,...: ',
+    'Unit cost:': 'Coût unitaire:',
+    'USE TODAY': 'Usage aujourd\'hui',
+    'Watt hours elapsed': 'Watt heure',
+    'WEEK': 'Semaine',
+    'Wh or kWh feed?': 'Wh or kWh flux?',
+    'YEAR': 'Année',
+    '<' : '<',
+    '>' : '>',
+    'APP CONFIG' : 'Configuration du module App',
+    'configcomment' : 'solar_power, house_power.',
+    'Configuration:' : 'Configuration:',
+    'DIRECT' : 'AUTO-CONSO',
+    'Electricity consumption' : 'Consommation électrique',
+    'EXPORTING' : 'Export',
+    'feed id (csv for multiple)' : 'id du flux ou liste csv de flux',
+    'GRID' : 'RESEAU',
+    'Hide balance' : 'Masquer la balance',
+    'HOUSE' : 'MAISON',
+    'IMPORTING' : 'Import',
+    'PERFECT BALANCE' : 'Auto consommation',
+    'Save' : 'Sauvegarder',
+    'Show balance' : 'Voir la balance',
+    'Solar generation' : 'Production solaire',
+    'SOLAR PV' : 'Panneaux solaires',
+    'SOLAR' : 'SOLAIRE',
+    'W' : 'S',
+    'Y' : 'A',
+    'MY HEATPUMP' : 'Ma PAC',
+    'HEATPUMP POWER' : 'Puissance PAC',
+    'FLOW' : 'Débit',
+    'RETURN' : 'Retour',
+    'OUTSIDE' : 'Extérieur',
+    'ROOM' : 'Intérieur',
+    'DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)' : 'Consommation électrique quotidienne PAC: (kWh)',
+    'DETAILED VIEW:' : 'Vue détaillée:',
+    'POWER (Watts)' : 'Puissance (Watt)',
+    'Temperature (C)' : 'Température (°C)',
+    'thisdashboard' : 'Ce tableau de bord utilise automatiquement les flux nommés:',
+    'addthesefeeds' : 'Pour utiliser ce tableau de bord, adaptez les noms des flux relevants.',
+    'heatpumprem' : 'heatpump_power, heatpump_kwh, heatpump_flow_temp, heatpump_return_temp, ambient_temp et heatpump_room_temp.',
+    'heatpumphide' : 'Si le flux heatpump_kwh n\'est pas disponible, le graphique kWh journalier sera masqué.',
+    'myenergy-comment1' : '<p>Cette application peut être utilisée pour comparer la consommation et la production d\'électricité renouvleable produite sur site par rapport à celle du réseau (données du réseau en Grande Bretagne)</p><p>L\'estimation se base sur 40% de la production d\'une turbine éolienne</p>',
+    //'myenergy-comment1' : 'This app can be used to compare electricity consumption with electricity generation from renewable energy generation sources including onsite solar and wind power from the UK grid.</p><p>The estimate of the amount of power available from UK wind power is calculated by taking the realtime electricity production from wind in the uk now available from bmreports.com divided by the UK installed wind capacity multipled by the amount of wind capacity requried to generate the annual demand at a capacity factor of 40%. This work builds upon the open source hourly energy modelling work that we have been doing with the Center for Alternative Technology',
+    'Annual wind generation supplied' : 'Production éolienne annuelle',
+    'from renewable energy tariff (kWh)' : 'provenant des tarifs renouvelables (kWh)',
+    'Wind capacity required' : 'Capacity éolienne requise',
+    'of a 3MW Wind turbine at 40% capacity factor' : 'd\'une turbine de 3MW à 40% de sa capacité',
+    'myenergy-comment2' : 'solar_power, house_power.',
+    'RENEWABLE GEN' : 'Renouvelable',
+    'WIND' : 'EOLIEN',
+    'STORE' : 'STOCK',
+    'VIRTUAL STORE' : 'Stock virtuel',
+    'CHARGE RATE' : 'Taux de charge',
+    'DISCHARGE RATE' : 'Taux de décharge',
+    '8h' : '8h',
+    'Missing feeds' : 'Flux manquants',
+    'The Solar PV dashboard needs specific feeds ' : 'Le tableau de bord PV nécessite la présence de flux spécifiques ',
+    'they are inexistant in your feeds collection' : 'ils n\'existent pas dans votre liste de flux',
+    'no settings saved' : 'rien n\'a été sauvegardé',
+    'Close' : 'Fermer'
+
+
+};
diff --git a/locale_js/app_ref.js b/locale_js/app_ref.js
new file mode 100644
index 00000000..f677ed72
--- /dev/null
+++ b/locale_js/app_ref.js
@@ -0,0 +1,89 @@
+var i18ntext = {
+    "$": "£",
+    "&gt;": "&gt;",
+    "&lt;": "&lt;",
+    "+": "+",
+    "-": "-",
+    "3h": "3h",
+    "6h": "6h",
+    "ALL": "ALL",
+    "Bar graph feed": "Bar graph feed",
+    "Cost": "Cost",
+    "D": "D",
+    "kWh elaped": "kWh elapsed",
+    "kWh": "kWh",
+    "kWh/d": "kWh/d",
+    "/day": "/day",
+    "Power (Watts)": "Power (Watts)",
+    "W": "W",
+    "M": "M",
+    "MONTH": "MONTH",
+    "My Electric config": "My Electric config",
+    "Power feed (Watts):": "Power feed (Watts):",
+    "POWER NOW": "POWER NOW",
+    "Set currency, enter text: pound, euro, dollar, yen:" : "Set currency, enter text: pound, euro, dollar, yen: ",
+    "test": "test",
+    "Unit cost'&gt;:": "Unit cost'&gt;:",
+    "USE TODAY": "USE TODAY",
+    "Watt hours elapsed": "Watt hours elapsed",
+    "WEEK": "WEEK",
+    "Wh or kWh feed?": "Wh or kWh feed?",
+    "YEAR": "YEAR",
+    '<' : '<',
+    '>' : '>',
+    'APP CONFIG' : 'APP CONFIG',
+    'configcomment' : 'configcomment',
+    'Configuration:' : 'Configuration:',
+    'DIRECT' : 'DIRECT',
+    'Electricity consumption' : 'Electricity consumption',
+    'EXPORTING' : 'EXPORTING',
+    'feed id (csv for multiple)' : 'feed id (csv for multiple)',
+    'GRID' : 'GRID',
+    'Hide balance' : 'Hide balance',
+    'HOUSE' : 'HOUSE',
+    'IMPORTING' : 'IMPORTING',
+    'PERFECT BALANCE' : 'PERFECT BALANCE',
+    'Save' : 'Save',
+    'Show balance' : 'Show balance',
+    'Solar generation' : 'Solar generation',
+    'SOLAR PV' : 'SOLAR PV',
+    'SOLAR' : 'SOLAR',
+    'W' : 'W',
+    'Y' : 'Y',
+    'MY HEATPUMP' : 'MY HEATPUMP',
+    'HEATPUMP POWER' : 'HEATPUMP POWER',
+    'FLOW' : 'FLOW',
+    'RETURN' : 'RETURN',
+    'OUTSIDE' : 'OUTSIDE',
+    'ROOM' : 'ROOM',
+    'DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)' : 'DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)',
+    'DETAILED VIEW:' : 'DETAILED VIEW:',
+    'POWER (Watts)' : 'POWER (Watts)',
+    'Temperature (C)' : 'Temperature (°C)',
+    'thisdashboard' : 'This dashboard automatically looks for feeds named or containing the words:',
+    'addthesefeeds' : 'To use this dashboard add these names to the relevant feeds.',
+    'heatpumprem' : 'heatpump_power, heatpump_kwh, heatpump_flow_temp, heatpump_return_temp, ambient_temp and heatpump_room_temp.',
+    'heatpumphide' : 'If heatpump_kwh is not available it will hide the daily kwh graph.',
+    'myenergy-comment1' : 'This app can be used to compare electricity consumption with electricity generation from renewable energy generation sources including onsite solar and wind power from the UK grid.</p><p>The estimate of the amount of power available from UK wind power is calculated by taking the realtime electricity production from wind in the uk now available from bmreports.com divided by the UK installed wind capacity multipled by the amount of wind capacity requried to generate the annual demand at a capacity factor of 40%. This work builds upon the open source hourly energy modelling work that we have been doing with the Center for Alternative Technology',
+    'Annual wind generation supplied' : 'Annual wind generation supplied',
+    'from renewable energy tariff (kWh)' : 'from renewable energy tariff (kWh)',
+    'Wind capacity required' : 'Wind capacity required',
+    'of a 3MW Wind turbine at 40% capacity factor' : 'of a 3MW Wind turbine at 40% capacity factor',
+    'myenergy-comment2' : 'solar_power, house_power.',
+    'RENEWABLE GEN' : 'RENEWABLE GEN',
+    'SOLAR:' : 'SOLAR:',
+    'WIND:' : 'WIND:',
+    'WIND' : 'WIND',
+    'STORE' : 'STORE',
+    'VIRTUAL STORE' : 'VIRTUAL STORE',
+    'CHARGE RATE' : 'CHARGE RATE',
+    'DISCHARGE RATE' : 'DISCHARGE RATE',
+    '8h' : '8h',
+    'Missing feeds' : 'Missing feeds',
+    'The Solar PV dashboard needs specific feeds ' : 'The Solar PV dashboard needs specific feeds ',
+    'they are inexistant in your feeds collection' : 'they are inexstant in your feeds collection',
+    'no settings saved' : 'no settings saved',
+    'Close' : 'Close'
+
+
+};
diff --git a/myelectric/myelectric.html b/myelectric/myelectric.html
index 64a36eee..729c3e55 100644
--- a/myelectric/myelectric.html
+++ b/myelectric/myelectric.html
@@ -1,154 +1,161 @@
-<style>
-    .visnav {
-        margin-right:4px;
-        padding-left:8px;
-        padding-right:8px;
-        min-width:20px;
-        background-color:rgba(6,153,250,0.1);
-        line-height:28px;
-        float:left;
-        text-align:center;
-    }
-    
-    .appbox {
-        width:25%;
-        text-align:center;
-        padding:10px;
-        vertical-align:top;
-    }
-    
-    .appbox-title {
-        color: #aaa;
-        font-weight:bold;
-        font-size:16px;
-        padding-bottom:15px;
-    }
-    
-    .appbox-value {
-        color: #fff;
-        font-weight:bold;
-        font-size:32px;
-    }
-    
-    .appbox-units {
-        color: #fff;
-        font-weight:bold;
-        font-size:16px;
-    }
-</style>
-    
 <div class="container">
 
-    <div id="myelectric_config" style="margin: 0px auto; max-width:320px; display:none">
-        
-        <div class="electric-title">My Electric config</div>
+    <div id="myelectric_config" style= "display: none;">
+        <div class="electric-title i18n">My Electric config</div>
         <br><br>
-        
-        <p><b style="color:#0699fa">Power feed (Watts):</b></p>
-        <select id="myelectric_powerfeed" style="width:290px"></select>
+
+        <p><b class="i18n">Power feed (Watts):</b></p>
+        <select id="myelectric_powerfeed"></select>
         <br>
-        <p><b style="color:#0699fa">Bar graph feed:</b></p>
-        <select id="myelectric_dailyfeed" style="width:290px"></select>
-        
-        <p><b style="color:#0699fa">Wh or kWh feed?:</b><br>Note: Use power_to_kwh input processor to create this feed type</p>
-        <select id="myelectric_dailytype" style="width:290px">
-            <option value=0>Watt hours elapsed</option>
-            <option value=1>kWh elapsed</option>
+        <p><b class="i18n">Bar graph feed</b></p>
+        <select id="myelectric_dailyfeed"></select>
+
+        <p><b class="i18n">Wh or kWh feed?</b><br>Note: Use power_to_kwh input processor to create this feed type</p>
+        <select id="myelectric_dailytype">
+            <option class="i18n" value=0>Watt hours elapsed</option>
+            <option class="i18n" value=1>kWh elapsed</option>
         </select>
-        
-        <p><b style="color:#0699fa">Set currency, enter text: pound, euro, dollar, yen:</b></p>
-        <input type="text" id="myelectric_currency" style="width:280px" />
+
+        <p><b class="i18n">Set currency, enter text: pound, euro, dollar, yen: </b></p>
+        <input type="text" id="myelectric_currency" />
         <br>
-        <p><b style="color:#0699fa">Unit cost:</b></p>
-        <input type="text" id="myelectric_unitcost" style="width:280px" />
+        <p><b class="i18n">Unit cost:</b></p>
+        <input type="text" id="myelectric_unitcost" />
         <br><br>
-        
-        <button id="myelectric_configsave" class="btn btn-primary">Save</button>
+        <button id="myelectric_configsave" class="btn btn-primary i18n">Save</button>
+        <div id="obj" style="display:none1;">
+
+        </div>
     </div>
 
     <div id="myelectric_body">
-    
         <div style="height:20px; border-bottom:1px solid #333; padding:8px;">
-        
             <div style="float:left; color:#aaa">
-            <span class="myelectric-view-cost" >Cost</span> | 
-            <span class="myelectric-view-kwh" >kWh</span>
+                <span class="myelectric-view-cost i18n" >Cost</span> |
+                <span class="myelectric-view-kwh i18n" >kWh</span>
             </div>
-        
+
             <div style="float:right;">
                 <i id="myelectric_openconfig" class="icon-wrench icon-white" style="cursor:pointer"></i>
             </div>
         </div>
-        
-        <table style="width:100%">
+
+        <table>
             <tr>
                 <td style="border:0; width:33%">
-                    <div class="electric-title">POWER NOW</div>
+                    <div class="electric-title i18n">POWER NOW</div>
                     <div class="power-value"><span id="myelectric_powernow">0</span></div>
                 </td>
                 <td style="text-align:center; border:0; width:33%"></td>
                 <td style="text-align:right; border:0; width:33%">
-                    <div class="electric-title">USE TODAY</div>
-                    <div class="power-value"><span id="myelectric_usetoday_units_a"></span><span id="myelectric_usetoday">0</span><span id="myelectric_usetoday_units_b" style="font-size:16px"> kWh</span></div>
+                    <div class="electric-title i18n">USE TODAY</div>
+                    <div class="power-value">
+                        <span id="myelectric_usetoday_units_a" class="i18n1"></span>
+                        <span id="myelectric_usetoday">0</span>
+                        <span id="myelectric_usetoday_units_b" style="font-size:16px">kWh</span>
+                    </div>
                 </td>
             </tr>
         </table>
 
         <br>
 
-        <div class="visnavblock" style="height:28px; padding-bottom:5px;">
-            <span class='visnav myelectric-time' time='3'>3h</span>
-            <span class='visnav myelectric-time' time='6'>6h</span>
-            <span class='visnav myelectric-time' time='24'>D</span>
-            <span class='visnav myelectric-time' time='168'>W</span>
-            <span class='visnav myelectric-time' time='720'>M</span>
-            <span id='myelectric_zoomin' class='visnav' >+</span>
-            <span id='myelectric_zoomout' class='visnav' >-</span>
-            <span id='myelectric_left' class='visnav' ><</span>
-            <span id='myelectric_right' class='visnav' >></span>
+        <div class="visnavblock">
+            <span class='visnav myelectric-time i18n' time='3' >3h</span>
+            <span class='visnav myelectric-time i18n' time='6' >6h</span>
+            <span class='visnav myelectric-time i18n' time='24' >D</span>
+            <span class='visnav myelectric-time i18n' time='168' >W</span>
+            <span class='visnav myelectric-time i18n' time='720' >M</span>
+            <span class='visnav i18n' id='myelectric_zoomin' >+</span>
+            <span class='visnav i18n' id='myelectric_zoomout' >-</span>
+            <span class='visnav i18n' id='myelectric_left' ><</span>
+            <span class='visnav i18n' id='myelectric_right' >></span>
         </div>
         <br>
-        
-        <div id="myelectric_placeholder_bound_power" style="width:100%; height:250px;">
+
+        <div id="myelectric_placeholder_bound_power" class="graph1">
             <canvas id="myelectric_placeholder_power"></canvas>
         </div>
         <br>
-        
-        <div id="myelectric_placeholder_bound_kwhd" style="width:100%; height:280px;">
+
+        <div id="myelectric_placeholder_bound_kwhd" class="graph2">
             <canvas id="myelectric_placeholder_kwhd"></canvas>
         </div>
         <br>
-            
-        <table style="width:100%">
+
+        <table>
             <tr>
                 <td class="appbox">
-                    <div class="appbox-title">WEEK</div>
-                    <div><span class="appbox-value u1a" style="color:#0699fa">£</span><span class="appbox-value" id="myelectric_week_kwh" style="color:#0699fa">---</span> <span class="units appbox-units u1b" style="color:#0779c1">kWh</span></div>
-                    
-                    <div style="padding-top:5px; color:#0779c1" class="appbox-units" ><span class="units u2a"></span><span id="myelectric_week_kwhd">---</span><span class="units u2b"> kWh/d</span></div>
+                    <div class="appbox-title  i18n">WEEK</div>
+                    <div class="blue">
+                        <div class="appbox-value">
+                            <span class="u1a i18n">$</span>
+                            <span id="myelectric_week_kwh">---</span>&nbsp
+                            <span class="appbox-units u1b i18n" >kWh</span>
+                        </div>
+                        <div class="appbox-units" >
+                            <span class="u2a"></span>
+                            <span id="myelectric_week_kwhd">---</span>&nbsp
+                            <span class="u2b">kWh/d</span>
+                        </div>
+                    </div>
                 </td>
-                
+
                 <td class="appbox">
-                    <div class="appbox-title">MONTH</div>
-                    <div><span class="appbox-value u1a" style="color:#0699fa">£</span><span class="appbox-value" id="myelectric_month_kwh" style="color:#0699fa">---</span> <span class="units appbox-units u1b" style="color:#0779c1">kWh</span></div>
-                    
-                    <div style="padding-top:5px; color:#0779c1" class="appbox-units" ><span class="units u2a"></span><span id="myelectric_month_kwhd">---</span><span class="units u2b"> kWh/d</span></div>
+                    <div class="blue">
+                        <div class="appbox-title  i18n">MONTH</div>
+                        <div class="appbox-value">
+                            <span class="u1a i18n">$</span>&nbsp
+                            <span id="myelectric_month_kwh">---</span>
+                            <span class="appbox-units u1b i18n">kWh</span>
+                        </div>
+                        <div class="appbox-units" >
+                            <span class="u2a"></span>&nbsp
+                            <span id="myelectric_month_kwhd">---</span>&nbsp
+                            <span class="u2b i18n">kWh/d</span>
+                            <span id = "perday" class="u3b i18n" style= "display: none;">/day</span>
+                            <span id = "kwhperday" class="u3b i18n" style= "display: none;">kWh/d</span>
+                            <span id = "perhour" class="u3b i18n" style= "display: none;">/hr</span>
+                            <span id = "ytitle" class="u3b i18n" style= "display: none;">Power (Watts)</span>
+                            <span id = "units" class="u3b i18n" style= "display: none;">W</span>
+                        </div>
+                    </div>
                 </td>
-                
+
                 <td class="appbox">
-                    <div class="appbox-title">YEAR</div>
-                    <div><span class="appbox-value u1a" style="color:#0699fa">£</span><span class="appbox-value" id="myelectric_year_kwh" style="color:#0699fa">---</span> <span class="units appbox-units u1b" style="color:#0779c1">kWh</span></div>
-                    
-                    <div style="padding-top:5px; color:#0779c1" class="appbox-units" ><span class="units u2a"></span><span id="myelectric_year_kwhd">---</span><span class="units u2b"> kWh/d</span></div>
+                    <div class="blue">
+                        <div class="appbox-title i18n">YEAR</div>
+                        <div class="appbox-value">
+                            <span class="u1a i18n">$</span>&nbsp
+                            <span id="myelectric_year_kwh">---</span>
+                            <span class="appbox-units u1b i18n" >kWh</span>
+                        </div>
+                        <div class="appbox-units" >
+                            <span class="u2a"></span>
+                            <span id="myelectric_year_kwhd">---</span>
+                            <span class="u2b i18n">kWh/d</span>
+                        </div>
+                    </div>
                 </td>
-                
+
                 <td class="appbox">
-                    <div class="appbox-title">ALL</div>
-                    <div><span class="appbox-value u1a" style="color:#0699fa">£</span><span class="appbox-value" id="myelectric_alltime_kwh" style="color:#0699fa">---</span> <span class="units appbox-units u1b" style="color:#0779c1">kWh</span></div>
-                    
-                    <div style="padding-top:5px; color:#0779c1" class="appbox-units" ><span class="units u2a"></span><span id="myelectric_alltime_kwhd">---</span><span class="units u2b"> kWh/d</span></div>
+                    <div class="blue">
+                        <div class="appbox-title i18n">ALL</div>
+                        <div class="appbox-value">
+                            <span class="u1a i18n">$</span>
+                            <span  id="myelectric_alltime_kwh">---</span>
+                            <span class="appbox-units u1b i18n" >kWh</span>
+                        </div>
+                        <div class="appbox-units" >
+                            <span class="u2a"></span><span id="myelectric_alltime_kwhd i18n">---</span>&nbsp
+                            <span class="u2b i18n">kWh/d</span>
+                        </div>
+                    </div>
                 </td>
             </tr>
         </table>
     </div>
+    <!-- These terms are not yet defined in your language -->
+    <div id="obj" style="display:none;">
+    </div>
 </div>
diff --git a/myelectric/myelectric.js b/myelectric/myelectric.js
index 2be7dc71..466ecdaf 100644
--- a/myelectric/myelectric.js
+++ b/myelectric/myelectric.js
@@ -1,4 +1,4 @@
-
+/*jslint maxerr: 1000 */
 var app_myelectric = {
 
     powerfeed: false,
@@ -7,37 +7,39 @@ var app_myelectric = {
 
     daily_data: [],
     daily: [],
-    
+
     raw_kwh_data: [],
-    
+
     fastupdateinst: false,
     slowupdateinst: false,
-    
+
     viewmode: "energy",
     unitcost: 0.17,
-    currency: "pound",
-    
+    currency: "$",
+
     escale: 1,
-    
-    startofweek: [0,0],
-    startofmonth: [0,0],
-    startofyear: [0,0],
+
+    startofweek: [0, 0],
+    startofmonth: [0, 0],
+    startofyear: [0, 0],
     startofday: 0,
     startalltime: 0,
-    
-    last_daytime:0,                 // used for reload kwhd daily graph
+
+    last_daytime: 0,                 // used for reload kwhd daily graph
     last_startofweektime: 0,        // used for reloading statistics
     last_startofmonthtime: 0,
     last_startofyeartime: 0,
-    
-    lastupdate: 0, 
+
+    lastupdate: 0,
     autoupdate: true,
     reload: true,
     feeds: {},
-    
+
     kwhdtmp: [],
-    
+    kwhperday : "",
+    perday : "",
     // Include required javascript libraries
+    // in other modules libs are core libs
     include: [
         "Modules/app/lib/graph_bars.js",
         "Modules/app/lib/graph_lines.js",
@@ -45,537 +47,590 @@ var app_myelectric = {
         "Modules/app/vis.helper.js"
     ],
 
-    init: function()
-    {        
-        var timewindow = (3600000*3.0*1);
-        view.end = +new Date;
+    init: function () {
+        'use strict';
+        var timewindow = (3600000 * 3.0),
+            z,
+            feeds,
+            name,
+            m = app_myelectric;
+        view.end = +new Date();
         view.start = view.end - timewindow;
 
         // -------------------------------------------------------------------------
         // Load settings
         // -------------------------------------------------------------------------
-        
+
         // If settings exist for myelectric then we load them in here:
-        if (app.config["myelectric"]!=undefined) {
-            app_myelectric.powerfeed = app.config.myelectric.powerfeed;
-            app_myelectric.dailyfeed = app.config.myelectric.dailyfeed;
-            app_myelectric.dailytype = app.config.myelectric.dailytype;
-            app_myelectric.currency = app.config.myelectric.currency;
-            app_myelectric.unitcost = app.config.myelectric.unitcost;
+        if (app.config.myelectric !== undefined) {
+            m.powerfeed = Number(app.config.myelectric.powerfeed);
+            m.dailyfeed = Number(app.config.myelectric.dailyfeed);
+            m.dailytype = Number(app.config.myelectric.dailytype);
+            m.currency = '&' + app.config.myelectric.currency + ';';
+            m.unitcost = Number(app.config.myelectric.unitcost);
         } else {
             app.config.myelectric = {};
         // if no settings then try auto scanning for feeds with suitable names:
-            var feeds = app_myelectric.getfeedsbyid();
-            for (z in feeds)
-            {
-                var name = feeds[z].name.toLowerCase();
-                
-                if (name.indexOf("house_power")!=-1) {
-                    app_myelectric.powerfeed = z;
+            feeds = m.getfeedsbyid();
+            for (z in feeds) {
+                name = feeds[z].name.toLowerCase();
+                if (name.indexOf("house_power") !== -1) {
+                    m.powerfeed = z;
                 }
-                
-                if (name.indexOf("house_wh")!=-1) {
-                    app_myelectric.dailyfeed = z;
-                    app_myelectric.dailytype = 0;
+                if (name.indexOf("house_wh") !== -1) {
+                    m.dailyfeed = z;
+                    m.dailytype = 0;
                 }
             }
         }
-        
-        if (app_myelectric.dailytype>1) {
-            app_myelectric.dailytype = 0;
-            app_myelectric.dailyfeed = 0;
+
+        if (m.dailytype > 1) {
+            m.dailytype = 0;
+            m.dailyfeed = 0;
         }
-        
-        app_myelectric.escale = 1.0;
-        if (app_myelectric.dailytype==0) app_myelectric.escale = 0.001;
-        if (app_myelectric.dailytype==1) app_myelectric.escale = 1.0;
-        if (app_myelectric.currency==undefined) app_myelectric.currency = "";
-        if (app_myelectric.unitcost==undefined) app_myelectric.unitcost = 0;
+        // m.dailytype stored in table is a string never === to 0 not 1
+        // console.log ('m.dailytype : ' + m.dailytype);
+        m.escale = (m.dailytype === 0) ? 0.001 : 1.0;
+        m.currency = (m.currency === undefined) ? "" : m.currency;
+        m.unitcost = (m.currency === undefined) ? 0 : m.unitcost;
         // -------------------------------------------------------------------------
         // Decleration of myelectric events
         // -------------------------------------------------------------------------
-        
-        $(window).resize(function(){
-            app_myelectric.resize();
+        //console.log(m.perday + "    -    " + m.kwhperday);
+        $(window).resize(function () {
+            m.resize();
         });
-        
+
         // When the config icon is pressed, populate dropdown feed selector menu's.
         // and set values if already selected
-        
-        $("#myelectric_openconfig").click(function(){
-        
+
+        $("#myelectric_openconfig").click(function () {
+
             // Load feed list, populate feed selectors and select the selected feed
-            var feeds = app_myelectric.getfeedsbyid();
-            
-            var out = ""; 
+            feeds = app_myelectric.getfeedsbyid();
+
+            var out = "", selected = "";
+            // there is need to flag as selected the selected feed
             for (z in feeds) {
-                out +="<option value="+feeds[z].id+">"+feeds[z].name+"</option>";
+                selected = (feeds[z].id === app_myelectric.powerfeed) ? "selected" : "";
+                out += "<option " + selected + " value=" + feeds[z].id + ">" + feeds[z].name + "</option>";
             }
             $("#myelectric_powerfeed").html(out);
             $("#myelectric_powerfeed").val(app_myelectric.powerfeed);
-            
+
             $("#myelectric_dailyfeed").html(out);
             $("#myelectric_dailyfeed").val(app_myelectric.dailyfeed);
-            
+
             $("#myelectric_dailytype").val(app_myelectric.dailytype);
-            
+
             $("#myelectric_currency").val(app_myelectric.currency);
             $("#myelectric_unitcost").val(app_myelectric.unitcost);
             // Switch to the config interface
             $("#myelectric_config").show();
             $("#myelectric_body").hide();
-            
+
             // Stop updaters
-            if (app_myelectric.fastupdateinst) clearInterval(app_myelectric.fastupdateinst);
-            if (app_myelectric.slowupdateinst) clearInterval(app_myelectric.slowupdateinst);
+            if (app_myelectric.fastupdateinst) { clearInterval(app_myelectric.fastupdateinst); }
+            if (app_myelectric.slowupdateinst) { clearInterval(app_myelectric.slowupdateinst); }
         });
 
         // Save configuration, values are simply placed in the config.
         // then updates are resumed
-        
-        $("#myelectric_configsave").click(function(){
+
+        $("#myelectric_configsave").click(function () {
+            app_myelectric.unitcost = $("#myelectric_unitcost").val();
+            app_myelectric.currency = $("#myelectric_currency").val();
             app_myelectric.powerfeed = $("#myelectric_powerfeed").val();
             app_myelectric.dailyfeed = $("#myelectric_dailyfeed").val();
             app_myelectric.dailytype = $("#myelectric_dailytype").val();
-            app_myelectric.unitcost = $("#myelectric_unitcost").val();
-            app_myelectric.currency = $("#myelectric_currency").val();
-            
+
             // Save config to db
             var config = app.config;
-            if (config==false) config = {};
-            config["myelectric"] = {
+            config =  (config !== false) ? config : {};
+            config.myelectric = {
                 "powerfeed": app_myelectric.powerfeed,
                 "dailyfeed": app_myelectric.dailyfeed,
                 "dailytype": app_myelectric.dailytype,
                 "unitcost": app_myelectric.unitcost,
                 "currency": app_myelectric.currency
             };
-            
-            if (app_myelectric.dailytype==0) app_myelectric.escale = 0.001;
-            if (app_myelectric.dailytype==1) app_myelectric.escale = 1.0;
-            
+
+            //if (app_myelectric.dailytype === 0) { app_myelectric.escale = 0.001; }
+            //if (app_myelectric.dailytype === 1) { app_myelectric.escale = 1.0; }
+            app_myelectric.escale = (app_myelectric.dailytype == 0) ? 0.001 : 1.0;
             app_myelectric.last_daytime = 0;
             app_myelectric.last_startofweektime = 0;
             app_myelectric.last_startofmonthtime = 0;
             app_myelectric.last_startofyeartime = 0;
-            
             app.setconfig(config);
             app_myelectric.reload = true;
             app_myelectric.reloadkwhd = true;
-            
-            app_myelectric.fastupdateinst = setInterval(app_myelectric.fastupdate,5000);
-            app_myelectric.slowupdateinst = setInterval(app_myelectric.slowupdate,60000);
-            app_myelectric.fastupdate();
-            app_myelectric.slowupdate();
-            
-            // Switch to main view 
+
+            // Switch to main view
             $("#myelectric_config").hide();
             $("#myelectric_body").show();
-        });  
-        
-        $("#myelectric_zoomout").click(function () {view.zoomout(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate();});
-        $("#myelectric_zoomin").click(function () {view.zoomin(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate();});
-        $('#myelectric_right').click(function () {view.panright(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate();});
-        $('#myelectric_left').click(function () {view.panleft(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate();});
-        
+
+            app_myelectric.fastupdateinst = setInterval(app_myelectric.fastupdate, 5000);
+            app_myelectric.slowupdateinst = setInterval(app_myelectric.slowupdate, 60000);
+            app_myelectric.fastupdate();
+            app_myelectric.slowupdate();
+        });
+
+        $("#myelectric_zoomout").click(function () {view.zoomout(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate(); });
+        $("#myelectric_zoomin").click(function () {view.zoomin(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate(); });
+        $('#myelectric_right').click(function () {view.panright(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate(); });
+        $('#myelectric_left').click(function () {view.panleft(); app_myelectric.reload = true; app_myelectric.autoupdate = false; app_myelectric.fastupdate(); });
+
         $('.myelectric-time').click(function () {
-            view.timewindow($(this).attr("time")/24.0); 
-            app_myelectric.reload = true; 
+            view.timewindow($(this).attr("time") / 24.0);
+            app_myelectric.reload = true;
             app_myelectric.autoupdate = true;
             app_myelectric.fastupdate();
         });
-        
-        $(".myelectric-view-cost").click(function(){
+
+        $(".myelectric-view-cost").click(function () {
             app_myelectric.viewmode = "cost";
-            console.log(app_myelectric.viewmode);
+            //console.log(app_myelectric.viewmode);
             app_myelectric.fastupdate();
             app_myelectric.slowupdate();
         });
-        
-        $(".myelectric-view-kwh").click(function(){
+
+        $(".myelectric-view-kwh").click(function () {
             app_myelectric.viewmode = "energy";
-            console.log(app_myelectric.viewmode);
+            //console.log(app_myelectric.viewmode);
             app_myelectric.fastupdate();
             app_myelectric.slowupdate();
         });
     },
-    
-    show: function()
-    {
-        $("body").css('background-color','#222');
-        $(window).ready(function(){
-            $("#footer").css('background-color','#181818');
-            $("#footer").css('color','#999');
+
+    show: function () {
+        'use strict';
+        $("body").css('background-color', '#222');
+        $(window).ready(function () {
+            $("#footer").css('background-color', '#181818');
+            $("#footer").css('color', '#999');
         });
-        
-        if (app_myelectric.powerfeed>0 && app_myelectric.dailyfeed>0) {
-        
+
+        if (app_myelectric.powerfeed > 0 && app_myelectric.dailyfeed > 0) {
+
             // start of all time
             var meta = {};
-            $.ajax({                                      
-                url: path+"feed/getmeta.json",                         
-                data: "id="+app_myelectric.dailyfeed+apikeystr,
+            $.ajax({
+                url: path + "feed/getmeta.json",
+                data: "id=" + app_myelectric.dailyfeed + apikeystr,
                 dataType: 'json',
-                async: false,                      
-                success: function(data_in) { meta = data_in; } 
+                async: false,
+                success: function (data_in) { meta = data_in; }
             });
+            //console.log('meta' + meta)
             app_myelectric.startalltime = meta.start_time;
-            
+
             app_myelectric.reloadkwhd = true;
-            
+
             // resize and start updaters
             app_myelectric.resize();
-            
-        
-            app_myelectric.fastupdateinst = setInterval(app_myelectric.fastupdate,5000);
+
+
+            app_myelectric.fastupdateinst = setInterval(app_myelectric.fastupdate, 5000);
             app_myelectric.fastupdate();
-            app_myelectric.slowupdateinst = setInterval(app_myelectric.slowupdate,60000);
+            app_myelectric.slowupdateinst = setInterval(app_myelectric.slowupdate, 60000);
             app_myelectric.slowupdate();
         }
     },
-    
-    resize: function() 
-    {
-        var windowheight = $(window).height();
-        
-        bound = {};
-        
-        var width = $("#myelectric_placeholder_bound_kwhd").width();
-        $("#myelectric_placeholder_kwhd").attr('width',width);
+
+    resize: function () {
+        'use strict';
+        var windowheight = $(window).height(),
+            bound = {},
+            width = $("#myelectric_placeholder_bound_kwhd").width(),
+            height = $("#myelectric_placeholder_bound_kwhd").height(),
+            width_pwr = $("#myelectric_placeholder_bound_power").width();
+        $("#myelectric_placeholder_kwhd").attr('width', width);
         graph_bars.width = width;
-        
-        var height = $("#myelectric_placeholder_bound_kwhd").height();
-        $("#myelectric_placeholder_kwhd").attr('height',height); 
+
+        $("#myelectric_placeholder_kwhd").attr('height', height);
         graph_bars.height = height;
-        
-        var width = $("#myelectric_placeholder_bound_power").width();
-        $("#myelectric_placeholder_power").attr('width',width);
+
+        $("#myelectric_placeholder_power").attr('width', width);
         graph_lines.width = width;
-        
-        var height = $("#myelectric_placeholder_bound_power").height();
-        $("#myelectric_placeholder_power").attr('height',height); 
-        graph_lines.height = height;
-        
-        
-        if (width<=500) {
-            $(".electric-title").css("font-size","16px");
-            $(".power-value").css("font-size","38px");
-            $(".power-value").css("padding-top","12px");
-            $(".power-value").css("padding-bottom","8px");
-            $(".midtext").css("font-size","14px");
+
+        var height_pwr = $("#myelectric_placeholder_bound_power").height();
+        $("#myelectric_placeholder_power").attr('height', height_pwr);
+        graph_lines.height = height_pwr;
+
+
+        if (width <= 500) {
+            $(".electric-title").css("font-size", "16px");
+            $(".power-value").css("font-size", "38px");
+            $(".power-value").css("padding-top", "12px");
+            $(".power-value").css("padding-bottom", "8px");
+            $(".midtext").css("font-size", "14px");
             $(".units").hide();
-            $(".visnav").css("padding-left","5px");
-            $(".visnav").css("padding-right","5px");
-        } else if (width<=724) {
-            $(".electric-title").css("font-size","18px");
-            $(".power-value").css("font-size","52px");
-            $(".power-value").css("padding-top","22px");
-            $(".power-value").css("padding-bottom","12px");
-            $(".midtext").css("font-size","18px");
+            $(".visnav").css("padding-left", "5px");
+            $(".visnav").css("padding-right", "5px");
+        } else if (width <= 724) {
+            $(".electric-title").css("font-size", "18px");
+            $(".power-value").css("font-size", "52px");
+            $(".power-value").css("padding-top", "22px");
+            $(".power-value").css("padding-bottom", "12px");
+            $(".midtext").css("font-size", "18px");
             $(".units").show();
-            $(".visnav").css("padding-left","8px");
-            $(".visnav").css("padding-right","8px");
+            $(".visnav").css("padding-left", "8px");
+            $(".visnav").css("padding-right", "8px");
         } else {
-            $(".electric-title").css("font-size","22px");
-            $(".power-value").css("font-size","85px");
-            $(".power-value").css("padding-top","40px");
-            $(".power-value").css("padding-bottom","20px");
-            $(".midtext").css("font-size","20px");
+            $(".electric-title").css("font-size", "22px");
+            $(".power-value").css("font-size", "85px");
+            $(".power-value").css("padding-top", "40px");
+            $(".power-value").css("padding-bottom", "20px");
+            $(".midtext").css("font-size", "20px");
             $(".units").show();
-            $(".visnav").css("padding-left","8px");
-            $(".visnav").css("padding-right","8px");
+            $(".visnav").css("padding-left", "8px");
+            $(".visnav").css("padding-right", "8px");
         }
-        
+
         app_myelectric.reloadkwhd = true;
         if (app_myelectric.powerfeed && app_myelectric.dailyfeed) {
             app_myelectric.fastupdate();
             app_myelectric.slowupdate();
         }
     },
-    
-    hide: function()
-    {
-        clearInterval(this.fastupdateinst);
-        clearInterval(this.slowupdateinst);
+
+    hide: function () {
+        'use strict';
+        clearInterval(app_myelectric.fastupdateinst);
+        clearInterval(app_myelectric.slowupdateinst);
     },
-    
-    fastupdate: function()
-    {
-        if (app_myelectric.viewmode=="energy") {
+
+    fastupdate: function () {
+        'use strict';
+        var scale,
+            feeds,
+            timerange,
+            options = {},
+            series = {},
+            now,
+            timenow,
+            npoints = 1500,
+            timewindow,
+            interval,
+            // used m to short name and avoid confusion with e from event
+            m = app_myelectric;
+
+        if (m.viewmode === "energy") {
             scale = 1;
             $("#myelectric_usetoday_units_a").html("");
-            $("#myelectric_usetoday_units_b").html(" kWh");
-            $(".u1a").html(""); $(".u1b").html("kWh");
-            $(".u2a").html(""); $(".u2b").html(" kWh/d");
+            $("#myelectric_usetoday_units_b").html("kWh");
+            $(".u1a").html("");
+            $(".u1b").html("kWh");
+            $(".u2a").html("");
+            $(".u2b").html($("#kwhperday").html());
         } else {
-            scale = app_myelectric.unitcost;
-            $("#myelectric_usetoday_units_a").html("&"+app_myelectric.currency+";");
+            scale = m.unitcost;
+            $("#myelectric_usetoday_units_a").html(m.currency);
             $("#myelectric_usetoday_units_b").html("");
-            $(".u1a").html("&"+app_myelectric.currency+";"); $(".u1b").html("");
-            $(".u2a").html("&"+app_myelectric.currency+";"); $(".u2b").html("/day");
+            $(".u1a").html(m.currency);
+            $(".u1b").html("");
+            $(".u2a").html(m.currency);
+            // '/day is not acceptable, it should be translatablr'
+            $(".u2b").html($("#perday").html());
         }
-        
-        var now = new Date();
+
+        now = new Date();
         var timenow = now.getTime();
-        
+        //now = new Date();
+        //timenow = now.getTime(),
+
         // --------------------------------------------------------------------------------------------------------
         // REALTIME POWER GRAPH
-        // -------------------------------------------------------------------------------------------------------- 
+        // --------------------------------------------------------------------------------------------------------
         // Check if the updater ran in the last 60s if it did not the app was sleeping
         // and so the data needs a full reload.
-        
-        if ((timenow-app_myelectric.lastupdate)>60000) app_myelectric.reload = true;
-        app_myelectric.lastupdate = timenow;
-        
+
+        if ((timenow - m.lastupdate) > 60000) {m.reload = true; }
+        m.lastupdate = timenow;
+
         // reload power data
-        if (app_myelectric.reload) {
-            app_myelectric.reload = false;
-            
-            var timewindow = view.end - view.start;
+        if (m.reload) {
+            m.reload = false;
+
+            timewindow = view.end - view.start;
             view.end = timenow;
             view.start = view.end - timewindow;
-            
-            var npoints = 1500;
-            interval = Math.round(((view.end - view.start)/npoints)/1000);
-            if (interval<1) interval = 1;
-            
-            view.start = 1000*Math.floor((view.start/1000)/interval)*interval;
-            view.end = 1000*Math.ceil((view.end/1000)/interval)*interval;
-            
-            timeseries.load(app_myelectric.powerfeed, view.start, view.end, interval);
+
+            interval = Math.round(((view.end - view.start) / npoints) / 1000);
+            interval = (interval < 1) ? 1 : interval;
+            //if (interval < 1) interval = 1;
+
+            view.start = 1000 * Math.floor((view.start / 1000) / interval) * interval;
+            view.end = 1000 * Math.ceil((view.end / 1000) / interval) * interval;
+
+            timeseries.load(m.powerfeed, view.start, view.end, interval);
         }
-        
+
         // --------------------------------------------------------------------
         // 1) Get last value of feeds
+        // this will lock the system when undreds of feeds are available
+        // so just ask for values of required feedids
         // --------------------------------------------------------------------
-        var feeds = app_myelectric.getfeedsbyid();
-        app_myelectric.feeds = feeds;
-        
+
+
+        feeds = m.getfeedsbyid();
+        m.feeds = feeds;
+        var pwr = feeds[m.powerfeed].value * 1.0
+
         // set the power now value
-        if (app_myelectric.viewmode=="energy") {
-            $("#myelectric_powernow").html((feeds[app_myelectric.powerfeed].value*1).toFixed(0)+"W");
+        console.log ('m.currency : ' + m.currency)
+        if (m.viewmode === "energy") {
+            $("#myelectric_powernow").html(pwr.toFixed(0) + "W");
         } else {
-            $("#myelectric_powernow").html("&"+app_myelectric.currency+";"+(feeds[app_myelectric.powerfeed].value*1*app_myelectric.unitcost*0.001).toFixed(2)+"/hr");
+            $("#myelectric_powernow").html(m.currency + (pwr * 1.0 * m.unitcost * 0.001).toFixed(2) + $("#perhour").html);
         }
+
+        // try to load values to reduce volumes (time is missing)
         // Advance view
-        if (app_myelectric.autoupdate) {
+        if (m.autoupdate) {
 
             // move the view along
-            var timerange = view.end - view.start;
+            timerange = view.end - view.start;
             view.end = timenow;
             view.start = view.end - timerange;
-            
+
             timeseries.append(
-                app_myelectric.powerfeed, 
-                feeds[app_myelectric.powerfeed].time, 
-                feeds[app_myelectric.powerfeed].value
+                m.powerfeed,
+                feeds[m.powerfeed].time,
+                feeds[m.powerfeed].value
             );
-            
+
             // delete data that is now beyond the start of our view
-            timeseries.trim_start(app_myelectric.powerfeed,view.start*0.001);
+            timeseries.trim_start(m.powerfeed, view.start * 0.001);
         }
-        
+
         // draw power graph
-        var options = {
+        options = {
             axes: {
                 color: "rgba(6,153,250,1.0)",
                 font: "12px arial"
             },
-            
+
             xaxis: {
-                minor_tick: 60000*10,
-                major_tick: 60000*60
+                minor_tick: 60000 * 10,
+                major_tick: 60000 * 60
             },
-            
+
             yaxis: {
-                title: "Power (Watts)",
-                units: "W",
+                title: $("#ytitle").html(),
+                units:  $("#units").html(),
                 minor_tick: 250,
                 major_tick: 1000
             }
         };
-        
-        var timewindowhours = Math.round((view.end-view.start)/3600000);
-        options.xaxis.major_tick = 30*24*3600*1000;
-        if (timewindowhours<=24*7) options.xaxis.major_tick = 24*3600*1000;
-        if (timewindowhours<=24) options.xaxis.major_tick = 2*3600*1000;
-        if (timewindowhours<=12) options.xaxis.major_tick = 1*3600*1000;
+
+        var timewindowhours = Math.round((view.end - view.start) / 3600000);
+        options.xaxis.major_tick = 30 * 24 * 3600 * 1000;
+        if (timewindowhours <= 24 * 7) {options.xaxis.major_tick = 24 * 3600 * 1000; }
+        if (timewindowhours <= 24) {options.xaxis.major_tick = 2 * 3600 * 1000; }
+        if (timewindowhours <= 12) {options.xaxis.major_tick = 1 * 3600 * 1000; }
         options.xaxis.minor_tick = options.xaxis.major_tick / 4;
-        
-        
-        var series = {
+
+
+        series = {
             "solar": {
                 color: "rgba(255,255,255,1.0)",
                 data: []
             },
             "use": {
                 color: "rgba(6,153,250,0.5)",
-                data: datastore[app_myelectric.powerfeed].data
+                data: datastore[m.powerfeed].data
             }
         };
-        
-        graph_lines.draw("myelectric_placeholder_power",series,options);
+
+        graph_lines.draw("myelectric_placeholder_power", series, options);
 
         // --------------------------------------------------------------------------------------------------------
         // THIS WEEK, MONTH, YEAR TOTALS
         // --------------------------------------------------------------------------------------------------------
         // All time total
-        var alltime_kwh = feeds[app_myelectric.dailyfeed].value*app_myelectric.escale;
-        // -------------------------------------------------------------------------------------------------------- 
+        var alltime_kwh = feeds[m.dailyfeed].value * m.escale;
+        // --------------------------------------------------------------------------------------------------------
         // WEEK: Get the time of the start of the week, if we have rolled over to a new week, load the watt hour
         // value in the watt accumulator feed recorded for the start of this week.
         var dayofweek = now.getDay();
-        if (dayofweek>0) dayofweek -= 1; else dayofweek = 6;
-
-        var time = new Date(now.getFullYear(),now.getMonth(),now.getDate()-dayofweek).getTime();
-        if (time!=app_myelectric.last_startofweektime) {
-            app_myelectric.startofweek = app_myelectric.getvalue(app_myelectric.dailyfeed,time);
-            app_myelectric.last_startofweektime = time;
+        dayofweek = (dayofweek > 0) ? dayofweek -1 : 6;
+        // convert last start of week time to unix seconds time
+        var time = (new Date(now.getFullYear(), now.getMonth(), now.getDate() - dayofweek).getTime()) / 1000;
+        if (time !== m.last_startofweektime) {
+            //db stored time is in seconds, not ms
+            m.last_startofweektime = time;
+            m.startofweek = m.getvalue(m.dailyfeed, time);
         }
-        if (app_myelectric.startofweek===false) app_myelectric.startofweek = [app_myelectric.startalltime*1000,0];
-        
+        // will probably never execute this?
+        if (m.startofweek === false) {m.startofweek = [m.startalltime, 0]; }
+
         // Week total
-        var week_kwh = alltime_kwh - (app_myelectric.startofweek[1]*app_myelectric.escale);
-        $("#myelectric_week_kwh").html((scale*week_kwh).toFixed(1));
-        var days = ((feeds[app_myelectric.dailyfeed].time - (app_myelectric.startofweek[0]*0.001))/86400);
-        $("#myelectric_week_kwhd").html((scale*week_kwh/days).toFixed(1));
-        // --------------------------------------------------------------------------------------------------------       
+        var week_kwh = alltime_kwh - (m.startofweek[1] * m.escale);
+        $("#myelectric_week_kwh").html((scale * week_kwh).toFixed(1));
+        //var days = ((feeds[m.dailyfeed].time - (m.startofweek[0]*0.001))/86400);
+        var days = (feeds[m.dailyfeed].time - m.last_startofweektime) / 86400;
+        $("#myelectric_week_kwhd").html((scale * week_kwh / days).toFixed(1));
+        //console.log('days : ' + days +'  week_kWh: ' + week_kwh +'  scale: ' + scale +'  time_present ' + feeds[m.dailyfeed].time +'  start: ' + m.startofweek[1]);
+        // --------------------------------------------------------------------------------------------------------
         // MONTH: repeat same process as above
-        var time = new Date(now.getFullYear(),now.getMonth(),1).getTime();
-        if (time!=app_myelectric.last_startofmonthtime) {
-            app_myelectric.startofmonth = app_myelectric.getvalue(app_myelectric.dailyfeed,time);
-            app_myelectric.last_startofmonthtime = time;
+        time = (new Date(now.getFullYear(), now.getMonth(), 1).getTime()) / 1000;
+        //console.log('start of month time : ' + time)
+        if (time !== m.last_startofmonthtime) {
+            m.last_startofmonthtime = time;
+            m.startofmonth = m.getvalue(m.dailyfeed, time);
         }
-        if (app_myelectric.startofmonth===false) app_myelectric.startofmonth = [app_myelectric.startalltime*1000,0];
-        
+        if (m.startofmonth === false) {m.startofmonth = [m.startalltime, 0]; }
+
         // Monthly total
-        var month_kwh = alltime_kwh - (app_myelectric.startofmonth[1]*app_myelectric.escale);
-        $("#myelectric_month_kwh").html(Math.round(scale*month_kwh));
-        var days = ((feeds[app_myelectric.dailyfeed].time - (app_myelectric.startofmonth[0]*0.001))/86400);
-        $("#myelectric_month_kwhd").html((scale*month_kwh/days).toFixed(1));
-        // -------------------------------------------------------------------------------------------------------- 
+        var month_kwh = alltime_kwh - (m.startofmonth[1] * m.escale);
+        $("#myelectric_month_kwh").html(Math.round(scale * month_kwh));
+        days = (feeds[m.dailyfeed].time - m.last_startofmonthtime) / 86400;
+        $("#myelectric_month_kwhd").html((scale * month_kwh / days).toFixed(1));
+        //console.log('days : ' + days +'  month_kwh: ' + month_kwh +'  scale: ' + scale +'  time_present ' + feeds[m.dailyfeed].time +'  start: ' + m.startofweek[1]);
+        // --------------------------------------------------------------------------------------------------------
         // YEAR: repeat same process as above
-        var time = new Date(now.getFullYear(),0,1).getTime();
-        if (time!=app_myelectric.last_startofyeartime) {
-            app_myelectric.startofyear = app_myelectric.getvalue(app_myelectric.dailyfeed,time);
-            app_myelectric.last_startofyeartime = time;
+        time = (new Date(now.getFullYear(), 0, 1).getTime()) / 1000;
+        if (time !== m.last_startofyeartime) {
+            m.last_startofyeartime = time;
+            m.startofyear = m.getvalue(m.dailyfeed, time);
         }
-        if (app_myelectric.startofyear===false) app_myelectric.startofyear = [app_myelectric.startalltime*1000,0];     
-        
+        if (m.startofyear === false) {m.startofyear = [m.startalltime * 1000, 0]; }
+
         // Year total
-        var year_kwh = alltime_kwh - (app_myelectric.startofyear[1]*app_myelectric.escale);
-        $("#myelectric_year_kwh").html(Math.round(scale*year_kwh));
-        var days = ((feeds[app_myelectric.dailyfeed].time - (app_myelectric.startofyear[0]*0.001))/86400);
-        $("#myelectric_year_kwhd").html((scale*year_kwh/days).toFixed(1));
-        // -------------------------------------------------------------------------------------------------------- 
+        var year_kwh = alltime_kwh - (m.startofyear[1] * m.escale);
+        $("#myelectric_year_kwh").html(Math.round(scale * year_kwh));
+        var days = ((feeds[m.dailyfeed].time - m.last_startofyeartime) / 86400);
+        $("#myelectric_year_kwhd").html((scale * year_kwh / days).toFixed(1));
+        //console.log('days : ' + days +'  year_kwh: ' + year_kwh +'  scale: ' + scale +'  time_present ' + feeds[m.dailyfeed].time +'  start: ' + m.startofweek[1]);
+        // --------------------------------------------------------------------------------------------------------
         // ALL TIME
-        $("#myelectric_alltime_kwh").html(Math.round(scale*alltime_kwh));
-        var days = ((feeds[app_myelectric.dailyfeed].time - app_myelectric.startalltime)/86400);
-        $("#myelectric_alltime_kwhd").html((scale*alltime_kwh/days).toFixed(1));
-        // --------------------------------------------------------------------------------------------------------        
+        $("#myelectric_alltime_kwh").html(Math.round(scale * alltime_kwh));
+        days = ((feeds[m.dailyfeed].time - m.startalltime) / 86400);
+        $("#myelectric_alltime_kwhd").html((scale * alltime_kwh / days).toFixed(1));
+        //console.log('days : ' + days +'  alltime_kwh: ' + alltime_kwh +'  scale: ' + scale +'  time_present ' + feeds[m.dailyfeed].time +'  start: ' + m.startofweek[1]);
+        // --------------------------------------------------------------------------------------------------------
     },
-    
-    slowupdate: function()
-    {
-        // When we make a request for daily data it returns the data up to the start of this day. 
-        // This works appart from a request made just after the start of day and before the buffered 
+
+    slowupdate: function () {
+        // When we make a request for daily data it returns the data up to the start of this day.
+        // This works appart from a request made just after the start of day and before the buffered
         // data is written to disk. This produces an error as the day rolls over.
 
         // Most of the time the request will return data where the last datapoint is the start of the
-        // current day. If the start of the current day is less than 60s (the buffer time)  from the 
+        // current day. If the start of the current day is less than 60s (the buffer time)  from the
         // current day then the last datapoint will be the previous day start.
 
-        // The easy solution is to request the data every 60s and then always append the last kwh value 
+        // The easy solution is to request the data every 60s and then always append the last kwh value
         // from feeds to the end as a new day, with the interval one day ahead of the last day in the kwh feed.
 
-        // This presents a minor error for 60s after midnight but should not be noticable in most cases 
+        // This presents a minor error for 60s after midnight but should not be noticable in most cases
         // and will correct itself after the 60s is over.
-        
-        var interval = 86400;
-        var now = new Date();
-        var timezone = (now.getTimezoneOffset()/-60)*3600;
-        var timenow = Math.floor(now.getTime() * 0.001);
-        var end = (Math.floor((timenow+timezone)/interval)*interval)-timezone;
-        var start = end - interval * Math.round(graph_bars.width/30);
-        
-        var valid = [];
-        
+
+        'use strict';
+        var interval = 86400,
+            now = new Date(),
+            timezone = (now.getTimezoneOffset() / -60) * 3600,
+            timenow = Math.floor(now.getTime() * 0.001),
+            end = (Math.floor((timenow + timezone) / interval) * interval) - timezone,
+            start = end - interval * Math.round(graph_bars.width / 30),
+            valid = [];
+
         var data = app_myelectric.getdata({
-          "id":app_myelectric.dailyfeed,
-          "start":start*1000,"end":end*1000,"interval":interval,
-          "skipmissing":0,"limitinterval":0
-        });
+                "id": app_myelectric.dailyfeed,
+                "start": start * 1000,
+                "end": end * 1000,
+                "interval": interval,
+                "skipmissing": 0,
+                "limitinterval": 0
+            }),
 
         // remove nan values from the end.
+            z,
+            time,
+            diff,
+            usetoday_kwh,
+            scale,
+            next;
+
         for (z in data) {
-          if (data[z][1]!=null) {
-            valid.push(data[z]);
-          }
+            if (data[z][1] !== null) {
+                valid.push(data[z]);
+            }
         }
-        
-        var next = valid[valid.length-1][0] + (interval*1000);
-        
-        if (app_myelectric.feeds[app_myelectric.dailyfeed]!=undefined) {
-            valid.push([next,app_myelectric.feeds[app_myelectric.dailyfeed].value*1.0]);
+        next = (valid.length > 0) ? valid[valid.length - 1][0] + (interval * 1000) : 0;
+        if (app_myelectric.feeds[app_myelectric.dailyfeed] !== undefined) {
+            valid.push([next, app_myelectric.feeds[app_myelectric.dailyfeed].value * 1.0]);
         }
-        
+
         // Calculate the daily totals by subtracting each day from the day before
         app_myelectric.daily = [];
-        for (var z=1; z<valid.length; z++)
-        {
-          var time = valid[z-1][0];
-          var diff = (valid[z][1]-valid[z-1][1])*app_myelectric.escale;
-          app_myelectric.daily.push([time,diff*scale]);
+        scale = (scale === undefined) ? 1 : scale;
+        for (z = 1; z < valid.length; z++) {
+            time = valid[z - 1][0];
+            diff = (valid[z][1] - valid[z - 1][1]) * app_myelectric.escale;
+            app_myelectric.daily.push([time, diff * scale]);
         }
-        
-        var usetoday_kwh = 0;
-        if (app_myelectric.daily.length>0) {
-            usetoday_kwh = app_myelectric.daily[app_myelectric.daily.length-1][1];
+
+        usetoday_kwh = 0;
+        if (app_myelectric.daily.length > 0) {
+            usetoday_kwh = app_myelectric.daily[app_myelectric.daily.length - 1][1];
+        }
+        if (app_myelectric.viewmode === "energy") {
+            $("#myelectric_usetoday").html(usetoday_kwh.toFixed(1));
+        } else {
+            $("#myelectric_usetoday").html((usetoday_kwh * app_myelectric.unitcost).toFixed(2));
         }
-        $("#myelectric_usetoday").html((usetoday_kwh).toFixed(1));
 
-        graph_bars.draw('myelectric_placeholder_kwhd',[app_myelectric.daily]);
+        graph_bars.draw('myelectric_placeholder_kwhd', [app_myelectric.daily]);
     },
-    
-    getfeedsbyid: function()
-    {
-        var feeds = {};
-        $.ajax({                                      
-            url: path+"feed/list.json"+apikeystr,
+
+
+    getfeedsbyid: function () {
+        // this functioçn cannot be limited to the required feeds
+        'use strict';
+        var feeds = {},
+            byid = {},
+            z;
+        $.ajax({
+            url: path + "feed/list.json" + apikeystr,
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { feeds = data_in; } 
+            async: false,
+            success: function (data_in) { feeds = data_in; }
         });
-        
-        var byid = {};
-        for (z in feeds) byid[feeds[z].id] = feeds[z];
+
+        for (z in feeds) {byid[feeds[z].id] = feeds[z]; }
         return byid;
     },
-    
-    getvalue: function(feedid,time) 
-    {
+
+    getvalue: function (feedid, time) {
+        'use strict';
         var result = app_myelectric.getdata({
-          "id":feedid,
-          "start":time,
-          "end":time+1000,
-          "interval":1
+            "id": feedid,
+            "start": time,
+            "end": time + 1000,
+            "interval": 1
         });
-        if (result.length==2) return result[0];
+        if (result.length === 2) {return result[0]; }
         return false;
     },
-    
-    getdata: function(args) 
-    {
-        var reqstr = "";
-        for (z in args) reqstr += "&"+z+"="+args[z];
+
+    getdata: function (args) {
+        'use strict';
+        var reqstr = "",
+            z,
+            data = [];
+        for (z in args) {reqstr += "&" + z + "=" + args[z]; }
         reqstr += apikeystr;
-        console.log(reqstr);
-        
-        var data = [];
-        $.ajax({                                      
-            url: path+"feed/data.json", data: reqstr,
-            dataType: 'json', async: false,             
-            success: function(data_in) { data = data_in; } 
+        //console.log(reqstr);
+
+        $.ajax({
+            url: path + "feed/data.json",
+            data: reqstr,
+            dataType: 'json',
+            async: false,
+            success: function (data_in) { data = data_in; }
         });
         return data;
     }
diff --git a/myenergy/myenergy.html b/myenergy/myenergy.html
index 3ff82d0b..925aa1fe 100644
--- a/myenergy/myenergy.html
+++ b/myenergy/myenergy.html
@@ -1,163 +1,168 @@
 <div class="container">
 
     <div id="myenergy-config" style="display:none; ">
-        
-        <div class="electric-title">APP CONFIG</div><br>
-        <p>This app can be used to compare electricity consumption with electricity generation from renewable energy generation sources including onsite solar and wind power from the UK grid.</p><p>The estimate of the amount of power available from UK wind power is calculated by taking the realtime electricity production from wind in the uk now available from bmreports.com divided by the UK installed wind capacity multipled by the amount of wind capacity requried to generate the annual demand at a capacity factor of 40%. This work builds upon the open source hourly energy modelling work that we have been doing with the Center for Alternative Technology <a href="http://zerocarbonbritain.org/energy_model">http://zerocarbonbritain.org/energy_model</a></p>
-        
+        <div class="electric-title i18n">APP CONFIG</div><br>
+            <p>
+                <span class="i18n">myenergy-comment1</span>
+                <a href="http://zerocarbonbritain.org/energy_model">http://zerocarbonbritain.org/energy_model</a>
+            </p>
+
         <table class="table">
-        <tr>
-            <td style="border:0;">
-                <p><b>Electricity consumption</b> feed id (csv for multiple)</p>
-                <input id="myenergy-housepower" type="text" />
-            </td>
-            <td style="border:0;">
-                <p><b>Solar generation</b> feed id (csv for multiple)</p>
-                <input id="myenergy-solarpower" type="text" />
-            </td>
-            <td style="border:0;">
-                <p>Annual wind generation supplied<br>from renewable energy tariff (kWh)</p>
-                <input id="myenergy-annualwind" type="text" />
-                <p>Wind capacity required: <span id="myenergy-windcap"></span><br><span id="myenergy-prc3mw"></span>% of a 3MW Wind turbine @ 40% capacity factor</p>
-            </td>
+            <tr>
+                <td>
+                    <p>
+                        <b  class="i18n">Electricity consumption</b><br />
+                        (<span  class="i18n">feed id (csv for multiple)</span>)
+                    </p>
+                    <input id="myenergy-housepower" type="text" />
+                </td>
+                <td>
+                    <p><b  class="i18n">Solar generation</b><br />
+                        ()<span  class="i18n">feed id (csv for multiple)</span>)
+                    </p>
+                    <input id="myenergy-solarpower" type="text" />
+                </td>
+                <td>
+                    <p>
+                        <b  class="i18n">Annual wind generation supplied</b>
+                        <br />
+                        <span  class="i18n">from renewable energy tariff (kWh)</span>
+                    </p>
+                    <input id="myenergy-annualwind" type="text" />
+                    <p>
+                        <span class="i18n">Wind capacity required</span>&nbsp:&nbsp
+                        <span id="myenergy-windcap"></span><br><span id="myenergy-prc3mw"></span>%&nbsp
+                        <span class="i18n">of a 3MW Wind turbine at 40% capacity factor</span>
+                    </p>
+                </td>
+            </tr>
         </table>
-        
+
         <br><br>
-        <p style="color:#888; text-align:center"><b>Configuration:</b> This dashboard automatically looks for feeds named or containing the words: solar_power, house_power. To use this dashboard add these names to the relevant feeds.</p>
+        <p style="color:#888; text-align:center">
+            <b class="i18n">Configuration:</b>
+            <span class="i18n">thisdashboard</span>
+            <span class="i18n">myenergy-comment2</span>
+            <span class="i18n">addthesefeeds</span>
+        </p>
+        <button id="myenergy-configsave" class="btn btn-primary i18n">Save</button>
+        <div id="obj" style="color: white; display:none1;">
+            change style to show the missing keys. Copy and paste it in lang file.
 
-        <button id="myenergy-configsave" class="btn btn-primary">Save</button>
+        </div>
     </div>
-    
-<div class="block">
 
-    <div style="height:20px; border-bottom:1px solid #333; padding:8px;">
-        <div style="float:right;">
-            <!--<span style="color:#fff; margin-right:10px" >Settings</span>-->
-            <i id="myenergy-openconfig" class="icon-wrench icon-white" style="cursor:pointer"></i>
+    <div class="block">
+        <div style="height:20px; border-bottom:1px solid #333; padding:8px;">
+            <div style="float:right;">
+                <!--<span style="color:#fff; margin-right:10px" >Settings</span>-->
+                <i id="myenergy-openconfig" class="icon-wrench icon-white" style="cursor:pointer"></i>
+            </div>
         </div>
-    </div>
 
-    <table style="width:100%">
-    <tr>
-        <td style="border:0; width:30%; vertical-align:top">
-            <div class="electric-title">POWER NOW</div>
-            <div class="power-value"><span id="usenow">0</span>W</div>
-        </td>
-        <td style="text-align:left; border:0; width:40%; vertical-align:top">
-            <div class="electric-title">VIRTUAL STORE <span id="balance-label"></span></div>
-            <div class="power-value"><span id="balance"></span></div>
-        </td>
-        <td style="text-align:right; border:0; width:30%">
-            <div class="electric-title">RENEWABLE GEN</div>
-            <div class="power-value"><span id="gennow">0</span>W</div>
-            <div class="electric-title"><span style="color:#dccc1f">SOLAR: <span id="solarnow">0</span>W</span> | <span style="color:#2ed52e">WIND: <span id="windnow">0</span>W</span></div>
-        </td>
-        
-    </tr>
-    </table>
-    <br>
-    
-    <style>
-        .visnav {
-            margin-right:4px;
-            padding-left:8px;
-            padding-right:8px;
-            min-width:20px;
-            background-color:rgba(6,153,250,0.1);
-            line-height:28px;
-            float:left;
-            text-align:center;
-        }
-    </style>
-
-    <div class="visnavblock" style="height:28px; padding-bottom:5px;">
-        <span class='visnav time' time='3'>3h</span>
-        <span class='visnav time' time='6'>6h</span>
-        <span class='visnav time' time='24'>D</span>
-        <span class='visnav time' time='168'>W</span>
-        <span class='visnav time' time='720'>M</span>
-        <span class='visnav time' time='8760'>Y</span>
-        <span id='myenergy_zoomin' class='visnav' >+</span>
-        <span id='myenergy_zoomout' class='visnav' >-</span>
-        <span id='myenergy_left' class='visnav' ><</span>
-        <span id='myenergy_right' class='visnav' >></span>
-        <span id='balanceline' class='visnav' style="float:right">Show balance</span>
-    </div>
+        <table>
+            <tr>
+                <td style="border:0; width:30%; vertical-align:top">
+                    <div class="electric-title i18n">POWER NOW</div>
+                    <div class="power-value"><span id="usenow">0</span>W</div>
+                </td>
+                <td style="text-align:left; border:0; width:40%; vertical-align:top">
+                    <div class="electric-title">
+                        <span id="balance-label1" class= "i18n">VIRTUAL STORE</span>
+                        <span id="balance-label2" class= "i18n" style ="display:none;">CHARGE RATE</span>
+                        <span id="balance-label3" class= "i18n" style ="display:none;">DISCHARGE RATE</span>
+                    </div>
+                    <div class="power-value"><span id="balance"></span></div>
+                </td>
+                <td style="text-align:right; border:0; width:30%">
+                    <div class="electric-title i18n">RENEWABLE GEN</div>
+                    <div class="power-value"><span id="gennow">0</span>W</div>
+                    <div class="electric-title">
+                        <span class = "yellow i18n">SOLAR</span>:&nbsp<span id="solarnow">0</span>&nbsp<span>W</span>
+                        &nbsp|&nbsp
+                        <span class = "green i18n">WIND</span>:&nbsp<span id="windnow">0</span>&nbsp<span>W</span>
+                    </div>
+                </td>
+            </tr>
+        </table>
+        <br>
+        <div class="visnavblock" style="height:28px; padding-bottom:5px;">
+            <span class='visnav i18n time' time='3'>3h</span>
+            <span class='visnav i18n time' time='6'>6h</span>
+            <span class='visnav i18n time' time='24'>D</span>
+            <span class='visnav i18n time' time='168'>W</span>
+            <span class='visnav i18n time' time='720'>M</span>
+            <span class='visnav i18n time' time='8760'>Y</span>
+            <span class='visnav i18n' id='myenergy_zoomin' >+</span>
+            <span class='visnav i18n' id='myenergy_zoomout' >-</span>
+            <span class='visnav i18n' id='myenergy_left' ><</span>
+            <span class='visnav i18n' id='myenergy_right' >></span>
+            <div id='balanceline' class='visnav' style="float:right;">
+                <span id = "balancehidden" style="display:none;">Show balance</span>
+                <span id = "balanceshown" style="display:none;">Hide balance</span>
+            </div>
+        </div>
 
-    <div id="myenergy_placeholder_bound" style="width:100%; height:500px;">
-        <div id="myenergy_placeholder" style="height:500px"></div>
-    </div>
-    
-    <br>
-    
-    <style>
-        .appbox {
-            width:25%;
-            text-align:center;
-            padding:10px;
-            vertical-align:top;
-            
-        }
-        
-        .appbox-title {
-            color: #aaa;
-            font-weight:bold;
-            font-size:20px;
-            padding-bottom:15px;
-        }
-        
-        .appbox-value {
-            color: #fff;
-            font-weight:bold;
-            font-size:36px;
-        }
-        
-        .appbox-units {
-            color: #fff;
-            font-weight:bold;
-            font-size:16px;
-        }
-    </style>
-    
-    <table style="width:100%">
-    <tr>
-        <td class="appbox">
-            <div class="appbox-title">HOUSE</div>
-            <div><span class="appbox-value" id="total_use_kwh" style="color:#0699fa">0</span> <span class="appbox-units" style="color:#0699fa">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">WIND</div>
-            <div><span class="appbox-value" id="total_wind_kwh" style="color:#2ed52e">0</span> <span class="appbox-units" style="color:#2ed52e">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">SOLAR</div>
-            <div><span class="appbox-value" id="total_solar_kwh" style="color:#dccc1f">0</span> <span class="appbox-units" style="color:#dccc1f">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">DIRECT</div>
-            <div style="padding-bottom:5px"><span class="appbox-value" id="total_use_direct_prc" style="color:#1ec51e">0</span></div>
-            <div><span class="appbox-units" id="total_use_direct_kwh" style="color:#1ec51e">0</span> <span class="appbox-units" style="color:#1ec51e">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">STORE</div>
-            <div style="padding-bottom:5px"><span class="appbox-value" id="total_use_via_store_prc" style="color:#d52e2e">0</span></div>
-            <div><span class="appbox-units" id="total_use_via_store_kwh" style="color:#d52e2e">0</span> <span class="appbox-units" style="color:#d52e2e">kWh</span></div>
-        </td>
-    </tr>
-    </table>
-
-
-    <!--
-    <br><br>
-    <div id="myenergy_bargraph_bound" style="width:100%; height:500px;">
-        <div id="myenergy_bargraph" style="height:500px"></div>
-    </div>
-    
-    -->
+        <div id="myenergy_placeholder_bound" style="width:100%; height:500px;">
+            <div id="myenergy_placeholder" style="height:500px"></div>
+        </div>
 
-</div>
+        <br>
+
+        <table>
+            <tr>
+                <td class="appbox">
+                    <div class="appbox-title i18n">HOUSE</div>
+                    <div class="blue">
+                        <span class="appbox-value" id="total_use_kwh">0</span>&nbsp<span class="appbox-units">kWh</span>
+                    </div>
+                </td>
+
+                <td class="appbox">
+                    <div class="appbox-title i18n">WIND</div>
+                    <div class="green">
+                        <span class="appbox-value" id="total_wind_kwh">0</span>&nbsp<span class="appbox-units">kWh</span>
+                    </div>
+                </td>
+
+                <td class="appbox">
+                    <div class="appbox-title i18n">SOLAR</div>
+                    <div class="yellow">
+                        <span class="appbox-value" id="total_solar_kwh"0</span>&nbsp<span class="appbox-units">kWh</span>
+                    </div>
+                </td>
+
+                <td class="appbox">
+                    <div class="appbox-title i18n">DIRECT</div>
+                    <div class ="green2">
+                        <span class="appbox-value" id="total_use_direct_prc">0</span>
+                    </div>
+                    <div class ="green2">
+                        <span class="appbox-units" id="total_use_direct_kwh">0</span>&nbsp
+                        <span class="appbox-units">kWh</span>
+                    </div>
+                </td>
+
+                <td class="appbox">
+                    <div class="appbox-title i18n">STORE</div>
+                    <div class ="red">
+                        <span class="appbox-value" id="total_use_via_store_prc">0</span>
+                    </div>
+                    <div class ="red">
+                        <span class="appbox-units" id="total_use_via_store_kwh">0</span>&nbsp;
+                        <span class="appbox-units">kWh</span></div>
+                </td>
+            </tr>
+        </table>
+
+
+        <!--
+        <br><br>
+        <div id="myenergy_bargraph_bound" style="width:100%; height:500px;">
+            <div id="myenergy_bargraph" style="height:500px"></div>
+        </div>
+
+        -->
+
+    </div>
 </div>
diff --git a/myenergy/myenergy.js b/myenergy/myenergy.js
index d031e6e2..75c2d364 100644
--- a/myenergy/myenergy.js
+++ b/myenergy/myenergy.js
@@ -1,22 +1,24 @@
+/*jslint maxerr: 1000 */
+/*jslint plusplus: true */
 var datastore = {};
 
 var app_myenergy = {
 
     solarpower: false,
     housepower: false,
-    
+
     live: false,
     show_balance_line: 1,
-    
+
     house_data: [],
     solar_data: [],
     wind_data: [],
-      
+
     reload: true,
     autoupdate: true,
-    
+
     lastupdate: 0,
-    
+
     annual_wind_gen: 3300,
     capacity_factor: 0.4,
 
@@ -30,90 +32,93 @@ var app_myenergy = {
     ],
 
     // App start function
-    init: function()
-    {
+    init: function () {
+        var feeds,
+            z,
+            name,
+            timeWindow = (3600000 * 6.0 * 1),
+            placeholder = $('#myenergy_placeholder');
+
+
         app_myenergy.my_wind_cap = ((app_myenergy.annual_wind_gen / 365) / 0.024) / app_myenergy.capacity_factor;
-        
-        if (app.config["myenergy"]!=undefined) {
-            this.annual_wind_gen = 1*app.config["myenergy"].annualwindgen;
+
+        if (app.config["myenergy"] !== undefined) {
+            this.annual_wind_gen = 1 * app.config["myenergy"].annualwindgen;
             this.solarpower = app.config["myenergy"].solarpower;
             this.housepower = app.config["myenergy"].housepower;
         } else {
             // Auto scan by feed names
-            var feeds = app_myenergy.getfeedsbyid();
-            for (z in feeds)
-            {
-                var name = feeds[z].name.toLowerCase();
-                
-                if (name.indexOf("house_power")!=-1) {
+            feeds = app_myenergy.getfeedsbyid();
+            for (z in feeds) {
+                name = feeds[z].name.toLowerCase();
+
+                if (name.indexOf("house_power") !== -1) {
                     app_myenergy.housepower = [z];
                 }
-                
-                if (name.indexOf("solar_power")!=-1) {
+
+                if (name.indexOf("solar_power") !== -1) {
                     app_myenergy.solarpower = [z];
                 }
             }
         }
-        
+
         this.my_wind_cap = ((this.annual_wind_gen / 365) / 0.024) / this.capacity_factor;
-        
-        var timeWindow = (3600000*6.0*1);
+
         view.end = +new Date;
         view.start = view.end - timeWindow;
-        
-        var placeholder = $('#myenergy_placeholder');
-        
-        $("#myenergy_zoomout").click(function () {view.zoomout(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw();});
-        $("#myenergy_zoomin").click(function () {view.zoomin(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw();});
-        $('#myenergy_right').click(function () {view.panright(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw();});
-        $('#myenergy_left').click(function () {view.panleft(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw();});
+
+        $("#myenergy_zoomout").click(function () {view.zoomout(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw(); });
+        $("#myenergy_zoomin").click(function () {view.zoomin(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw(); });
+        $('#myenergy_right').click(function () {view.panright(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw(); });
+        $('#myenergy_left').click(function () {view.panleft(); app_myenergy.reload = true; app_myenergy.autoupdate = false; app_myenergy.draw(); });
         $('.time').click(function () {
-            view.timewindow($(this).attr("time")/24.0); 
-            app_myenergy.reload = true; 
+            view.timewindow($(this).attr("time") / 24.0);
+            app_myenergy.reload = true;
             app_myenergy.autoupdate = true;
             app_myenergy.draw();
         });
-        
-        $("#balanceline").click(function () { 
-            if ($(this).html()=="Show balance") {
-                app_myenergy.show_balance_line = 1;
-                app_myenergy.draw();
-                $(this).html("Hide balance");
+
+        $("#balanceline").click(function () {
+            if ($("#balanceshown").css('display') !== 'none') {
+                this.show_balance_line = 1;
+                $("#balanceshown").hide();
+                $("#balancehidden").show();
             } else {
-                app_myenergy.show_balance_line = 0;
-                app_myenergy.draw();
-                $(this).html("Show balance");
+                this.show_balance_line = 0;
+                $("#balanceshown").show();
+                $("#balancehidden").hide();
             }
+            app_mysolarpv.draw();
         });
-        
+
         placeholder.bind("plotselected", function (event, ranges) {
             view.start = ranges.xaxis.from;
             view.end = ranges.xaxis.to;
 
             app_myenergy.autoupdate = false;
-            app_myenergy.reload = true; 
-            
+            app_myenergy.reload = true;
+
             var now = +new Date();
-            if (Math.abs(view.end-now)<30000) {
+            if (Math.abs(view.end - now) < 30000) {
                 app_myenergy.autoupdate = true;
             }
 
             app_myenergy.draw();
         });
 
-        $("#myenergy-openconfig").click(function(){
+        $("#myenergy-openconfig").click(function () {
             $("#myenergy-solarpower").val(app_myenergy.solarpower);
             $("#myenergy-housepower").val(app_myenergy.housepower);
-            
+
             $("#myenergy-annualwind").val(app_myenergy.annual_wind_gen);
-            $("#myenergy-windcap").html(Math.round(app_myenergy.my_wind_cap)+"W");
-            $("#myenergy-prc3mw").html((100*app_myenergy.my_wind_cap / 5000000).toFixed(3));
-            
+            $("#myenergy-windcap").html(Math.round(app_myenergy.my_wind_cap) + "W");
+            $("#myenergy-prc3mw").html((100 * app_myenergy.my_wind_cap / 5000000).toFixed(3));
+
             $("#myenergy-config").show();
-            
+
         });
-        
-        $("#myenergy-configsave").click(function() {
+
+        $("#myenergy-configsave").click(function () {
             $("#myenergy-config").hide();
             app_myenergy.annual_wind_gen = $("#myenergy-annualwind").val();
             var solarfeedids = $("#myenergy-solarpower").val().split(",");
@@ -121,10 +126,10 @@ var app_myenergy = {
             app_myenergy.solarpower = solarfeedids;
             app_myenergy.housepower = housefeedids;
             app_myenergy.my_wind_cap = ((app_myenergy.annual_wind_gen / 365) / 0.024) / app_myenergy.capacity_factor;
-            
+
             // Save config to db
             var config = app.config;
-            if (config==false) config = {};
+            config =  (config !== false) ? config : {};
             config["myenergy"] = {
                 "annualwindgen": app_myenergy.annual_wind_gen,
                 "solarpower": app_myenergy.solarpower,
@@ -133,498 +138,518 @@ var app_myenergy = {
             app.setconfig(config);
             app_myenergy.reload = true;
         });
- 
-        $(window).resize(function(){
+
+        $(window).resize(function () {
             app_myenergy.resize();
             app_myenergy.draw();
         });
-        
+
         /*
         $(document).on("socketio_msg",function( event, msg ) {
             var use_now = 1*nodes['6'].values[1] + 1*nodes['6'].values[2];
             var solar_now = 1*nodes['10'].values[2];
             if (solar_now<10) solar_now = 0;
             var totalgen = app_myenergy.windnow+solar_now;
-            
+
             var balance = totalgen - use_now;
-            
+
             $("#usenow").html(use_now);
             $("#solarnow").html(solar_now);
             $("#gridwindnow").html(Math.round(app_myenergy.windnow));
             $("#totalgen").html(Math.round(totalgen));
-            
+
             $("#chargerate").html(Math.round(balance));
-        });   
+        });
         */
     },
 
-    show: function() 
-    {
+    show: function () {
         // this.reload = true;
         this.livefn();
-        this.live = setInterval(this.livefn,5000);
-        
-        $("body").css("background-color","#222");
-        
-        $(window).ready(function(){
-            $("#footer").css('background-color','#181818');
-            $("#footer").css('color','#999');
+        this.live = setInterval(this.livefn, 5000);
+
+        $("body").css("background-color", "#222");
+
+        $(window).ready(function () {
+            $("#footer").css('background-color', '#181818');
+            $("#footer").css('color', '#999');
         });
 
         app_myenergy.resize();
         app_myenergy.draw();
         app_myenergy.draw_bargraph();
     },
-    
-    resize: function() 
-    {
-        var top_offset = 0;
-        var placeholder_bound = $('#myenergy_placeholder_bound');
-        var placeholder = $('#myenergy_placeholder');
 
-        var width = placeholder_bound.width();
-        var height = $(window).height()*0.55;
+    resize: function () {
+        var top_offset = 0,
+            placeholder_bound = $('#myenergy_placeholder_bound'),
+            placeholder = $('#myenergy_placeholder'),
 
-        if (height>width) height = width;
+            width = placeholder_bound.width(),
+            height = $(window).height()*0.55;
+
+        height = (height > width) ? width : height;
 
         placeholder.width(width);
         placeholder_bound.height(height);
-        placeholder.height(height-top_offset);
-        
-        if (width<=500) {
-            $(".electric-title").css("font-size","16px");
-            $(".power-value").css("font-size","38px");
-            $(".power-value").css("padding-top","12px");
-            $(".power-value").css("padding-bottom","8px");
-            $(".midtext").css("font-size","14px");
+        placeholder.height(height - top_offset);
+
+        if (width <= 500) {
+            $(".electric-title").css("font-size", "16px");
+            $(".power-value").css("font-size", "38px");
+            $(".power-value").css("padding-top", "12px");
+            $(".power-value").css("padding-bottom", "8px");
+            $(".midtext").css("font-size", "14px");
             $("#balanceline").hide();
-        } else if (width<=724) {
-            $(".electric-title").css("font-size","18px");
-            $(".power-value").css("font-size","52px");
-            $(".power-value").css("padding-top","22px");
-            $(".power-value").css("padding-bottom","12px");
-            $(".midtext").css("font-size","18px");
+        } else if (width <= 724) {
+            $(".electric-title").css("font-size", "18px");
+            $(".power-value").css("font-size", "52px");
+            $(".power-value").css("padding-top", "22px");
+            $(".power-value").css("padding-bottom", "12px");
+            $(".midtext").css("font-size", "18px");
             $("#balanceline").show();
         } else {
-            $(".electric-title").css("font-size","22px");
-            $(".power-value").css("font-size","85px");
-            $(".power-value").css("padding-top","40px");
-            $(".power-value").css("padding-bottom","20px");
-            $(".midtext").css("font-size","20px");
+            $(".electric-title").css("font-size", "22px");
+            $(".power-value").css("font-size", "85px");
+            $(".power-value").css("padding-top", "40px");
+            $(".power-value").css("padding-bottom", "20px");
+            $(".midtext").css("font-size", "20px");
             $("#balanceline").show();
         }
     },
-    
-    hide: function() 
-    {
+
+    hide: function () {
         clearInterval(this.live);
     },
-    
-    livefn: function()
-    {
+
+    livefn: function () {
         // Check if the updater ran in the last 60s if it did not the app was sleeping
         // and so the data needs a full reload.
-        var now = +new Date();
-        if ((now-app_myenergy.lastupdate)>60000) app_myenergy.reload = true;
+        var now = +new Date(),
+            feeds,
+            feedid,
+            i,
+            use_now = 0,
+            solar_now = 0,
+            national_wind,
+            prc_of_capacity,
+            wind_now,
+            timerange,
+            gen_now,
+            color = '#d52e2e',
+            balance;
+;
+        app_myenergy.reload = ((now - app_myenergy.lastupdate) > 60000) ? true : false;
         app_myenergy.lastupdate = now;
-        
+
         // Fetch latest feed data
-        var feeds = app_myenergy.getfeedsbyid();
-        
+        feeds = app_myenergy.getfeedsbyid();
+
         // Consumption feeds
-        var use_now = 0;
-        for (var i in app_myenergy.housepower) {
-            var feedid = app_myenergy.housepower[i];
-            if (feeds[feedid]!=undefined) {
-                use_now += parseInt(feeds[feedid].value);
+        for (i in app_myenergy.housepower) {
+            feedid = app_myenergy.housepower[i];
+            if (feeds[feedid] !== undefined) {
+                use_now += Math.parseInt(feeds[feedid].value);
                 if (app_myenergy.autoupdate) {
-                    app_myenergy.timeseries_append("f"+feedid,feeds[feedid].time,parseInt(feeds[feedid].value));
-                    app_myenergy.timeseries_trim_start("f"+feedid,view.start*0.001);
+                    app_myenergy.timeseries_append("f" + feedid, feeds[feedid].time, Math.parseInt(feeds[feedid].value));
+                    app_myenergy.timeseries_trim_start("f" + feedid, view.start * 0.001);
                 }
             }
         }
-        
+
         // Solar feeds
-        var solar_now = 0;
-        for (var i in app_myenergy.solarpower) {
-            var feedid = app_myenergy.solarpower[i];
-            if (feeds[feedid]!=undefined) {
-                solar_now += parseInt(feeds[feedid].value);
+        for (i in app_myenergy.solarpower) {
+            feedid = app_myenergy.solarpower[i];
+            if (feeds[feedid] !== undefined) {
+                solar_now += Math.parseInt(feeds[feedid].value);
                 if (app_myenergy.autoupdate) {
-                    console.log(feeds[feedid].time+" "+feeds[feedid].value);
-                    app_myenergy.timeseries_append("f"+feedid,feeds[feedid].time,parseInt(feeds[feedid].value));
-                    app_myenergy.timeseries_trim_start("f"+feedid,view.start*0.001);
+                    //console.log(feeds[feedid].time+" " + feeds[feedid].value);
+                    app_myenergy.timeseries_append("f" + feedid, feeds[feedid].time, Math.parseInt(feeds[feedid].value));
+                    app_myenergy.timeseries_trim_start("f" + feedid, view.start * 0.001);
                 }
             }
         }
-        
-        var national_wind = app_myenergy.getvalueremote(67088);
-        var prc_of_capacity = national_wind / 8000;
+
+        national_wind = app_myenergy.getvalueremote(67088);
+        prc_of_capacity = national_wind / 8000;
         app_myenergy.wind_now = app_myenergy.my_wind_cap * prc_of_capacity;
-        var wind_now = app_myenergy.wind_now;
-        
+        wind_now = app_myenergy.wind_now;
+
         if (app_myenergy.autoupdate) {
-            app_myenergy.timeseries_append("remotewind",now,national_wind);
-            app_myenergy.timeseries_trim_start("remotewind",view.start*0.001);
+            app_myenergy.timeseries_append("remotewind", now, national_wind);
+            app_myenergy.timeseries_trim_start("remotewind", view.start * 0.001);
         }
-        
-        
+
+
         // Advance view
         if (app_myenergy.autoupdate) {
-            var timerange = view.end - view.start;
+            timerange = view.end - view.start;
             view.end = now;
             view.start = view.end - timerange;
         }
-        
-        console.log("vs-ve: "+view.start+" "+view.end);
-        
+
+        //console.log("vs-ve: "+view.start+" "+view.end);
+
         // Lower limit for solar
-        if (solar_now<10) solar_now = 0;
-        var gen_now = solar_now + wind_now;
-        var balance = gen_now - use_now;
-        
-        if (balance==0) {
-            $("#balance-label").html("");
+        solar_now = (solar_now < 10) ? 0 : solar_now;
+        gen_now = solar_now + wind_now;
+        balance = Math.round(gen_now - use_now);
+
+        if (balance === 0) {
+            $("#balance-label1").css("display:none");
+            $("#balance-label2").css("display:none");
+            $("#balance-label3").css("display:none");
             $("#balance").html("");
         }
-        
-        if (balance>0) {
-            $("#balance-label").html("CHARGE RATE:");
-            $("#balance").html("<span style='color:#2ed52e'><b>"+Math.round(Math.abs(balance))+"W</b></span>");
+
+        if (balance > 0) {
+            $("#balance-label1").css("display:none");
+            $("#balance-label2").css("display:block");
+            $("#balance-label3").css("display:none");
+            color = "#2ed52e";
         }
-        
-        if (balance<0) {
-            $("#balance-label").html("DISCHARGE RATE:");
-            $("#balance").html("<span style='color:#d52e2e'><b>"+Math.round(Math.abs(balance))+"W</b></span>");
+
+        if (balance < 0) {
+            $("#balance-label1").css("display:none");
+            $("#balance-label2").css("display:none");
+            $("#balance-label3").css("display:block");
+            color = "#d52e2e";
         }
-        
+        $("#balance").html("<span style='color:" + color + "'><b>" + Math.abs(balance) + "W</b></span>");
         $("#gennow").html(Math.round(gen_now));
         $("#solarnow").html(Math.round(solar_now));
         $("#windnow").html(Math.round(wind_now));
-        
+
         $("#usenow").html(use_now);
-        
+
         app_myenergy.draw();
-        
+
     },
-    
-    draw: function ()
-    {
-        var dp = 1;
-        var units = "C";
-        var fill = false;
-        var plotColour = 0;
-        
-        var options = {
-            lines: { fill: fill },
-            xaxis: { mode: "time", timezone: "browser", min: view.start, max: view.end},
-            yaxes: [{ min: 0 }],
-            grid: {hoverable: true, clickable: true},
-            selection: { mode: "x" }
-        }
-        
-        var npoints = 1500;
-        interval = Math.round(((view.end - view.start)/npoints)/1000);
-        if (interval<1) interval = 1;
 
-        var npoints = parseInt((view.end-view.start)/(interval*1000));
-        
+    draw: function () {
+        var dp = 1,
+            i,
+            feedid,
+            units = "C",
+            fill = false,
+            plotColour = 0,
+            options = {
+                lines: { fill: fill },
+                xaxis: { mode: "time", timezone: "browser", min: view.start, max: view.end},
+                yaxes: [{ min: 0 }],
+                grid: {hoverable: true, clickable: true},
+                selection: { mode: "x" }
+            },
+            npoints = 1500,
+            interval = Math.round(((view.end - view.start) / npoints) / 1000);
+        npoints = parseInt((view.end - view.start) / (interval * 1000));
+        interval = (interval < 1) ? 1 : interval;
+
+
         // -------------------------------------------------------------------------------------------------------
         // LOAD DATA ON INIT OR RELOAD
         // -------------------------------------------------------------------------------------------------------
         if (app_myenergy.reload) {
+
             app_myenergy.reload = false;
-            view.start = 1000*Math.floor((view.start/1000)/interval)*interval;
-            view.end = 1000*Math.ceil((view.end/1000)/interval)*interval;
-            
-            for (var i in app_myenergy.solarpower) {
-                var feedid = app_myenergy.solarpower[i];
-                app_myenergy.timeseries_load("f"+feedid,this.getdata(feedid,view.start,view.end,interval));
+            view.start = 1000 * Math.floor((view.start / 1000) / interval) * interval;
+            view.end =   1000 * Math.ceil((view.end / 1000) / interval) * interval;
+
+            for (i in app_myenergy.solarpower) {
+                feedid = app_myenergy.solarpower[i];
+                app_myenergy.timeseries_load("f" + feedid, this.getdata(feedid,view.start, view.end, interval));
             }
-            
-            for (var i in app_myenergy.housepower) {
-                var feedid = app_myenergy.housepower[i];
-                app_myenergy.timeseries_load("f"+feedid,this.getdata(feedid,view.start,view.end,interval));
-            }      
-            
-            app_myenergy.timeseries_load("remotewind",this.getdataremote(67088,view.start,view.end,interval));          
+
+            for (i in app_myenergy.housepower) {
+                feedid = app_myenergy.housepower[i];
+                app_myenergy.timeseries_load("f" + feedid,this.getdata(feedid, view.start, view.end, interval));
+            }
+
+            app_myenergy.timeseries_load("remotewind", this.getdataremote(67088, view.start, view.end, interval));
         }
         // -------------------------------------------------------------------------------------------------------
-        
-        var use_data = [];
-        var solar_data = [];
-        var wind_data = [];
-        var bal_data = [];
-        var store_data = [];
-        
-        var t = 0;
-        var store = 0;
-        var use = 0;
-        var mysolar = 0;
-        var mywind = 0;
-        
-        var total_solar_kwh = 0;
-        var total_wind_kwh = 0;
-        var total_use_kwh = 0;
-        var total_use_direct_kwh = 0;
-        
-        var datastart = view.start;
-        for (var z in datastore) {
+
+        var use_data = [],
+            solar_data = [],
+            wind_data = [],
+            bal_data = [],
+            store_data = [],
+            series = [],
+            store_change,
+            time,
+            z,
+            balance,
+            gen,
+
+            t = 0,
+            store = 0,
+            use = 0,
+            mysolar = 0,
+            mywind = 0,
+
+            total_solar_kwh = 0,
+            total_wind_kwh = 0,
+            total_use_kwh = 0,
+            total_use_direct_kwh = 0,
+            tmpsolar,
+            tmpuse = null,
+            i,
+            feedid,
+            wind,
+            prc_of_capacity,
+
+            datastart = view.start;
+        for (z in datastore) {
             npoints = datastore[z].data.length;
-            if (npoints>0)
-                datastart = datastore[z].data[0][0];
+            if (npoints > 0) {datastart = datastore[z].data[0][0]; }
         }
-        
-        for (var z=0; z<npoints; z++) {
+
+        for (z = 0; z < npoints; z++) {
 
             // -------------------------------------------------------------------------------------------------------
             // Get solar or use values
             // -------------------------------------------------------------------------------------------------------
-            var tmpsolar = null;
-            for (var i in app_myenergy.solarpower) {
-                var feedid = app_myenergy.solarpower[i];
-                if (datastore["f"+feedid].data[z]!=undefined && datastore["f"+feedid].data[z][1]!=null) {
-                    if (tmpsolar==null) tmpsolar = 0;
-                    tmpsolar += datastore["f"+feedid].data[z][1];   
+            tmpsolar = null;
+            for (i in app_myenergy.solarpower) {
+                feedid = app_myenergy.solarpower[i];
+                if (datastore["f" + feedid].data[z] !== undefined && datastore["f" + feedid].data[z][1] !== null) {
+                    tmpsolar = (tmpsolar === null) ? 0 : tmpsolar;
+                    tmpsolar += datastore["f" + feedid].data[z][1];
                 }
             }
-            if (tmpsolar!=null) mysolar = tmpsolar;
-            
-            var tmpuse = null;
-            for (var i in app_myenergy.housepower) {
-                var feedid = app_myenergy.housepower[i];
-                if (datastore["f"+feedid].data[z]!=undefined && datastore["f"+feedid].data[z][1]!=null) {
-                    if (tmpuse==null) tmpuse = 0;
-                    tmpuse += datastore["f"+feedid].data[z][1];   
+            mysolar = (tmpsolar !== null) ? tmpsolar : 0;
+
+            for (i in app_myenergy.housepower) {
+                feedid = app_myenergy.housepower[i];
+                if (datastore["f" + feedid].data[z] !== undefined && datastore["f" + feedid].data[z][1] !== null) {
+                    tmpuse = (tmpuse === null) ? 0 : tmpuse;
+                    tmpuse += datastore["f" + feedid].data[z][1];
                 }
             }
-            if (tmpuse!=null) use = tmpuse;
-            
-            if (datastore["remotewind"].data[z]!=undefined && datastore["remotewind"].data[z][1]!=null) {
-                var wind = datastore["remotewind"].data[z][1]*1;
-                var prc_of_capacity = wind / 8000;
+            use = (tmpuse !== null) ? tmpuse : 0;
+
+            if (datastore["remotewind"].data[z] !== undefined && datastore["remotewind"].data[z][1] !== null) {
+                wind = datastore["remotewind"].data[z][1] * 1;
+                prc_of_capacity = wind / 8000;
                 app_myenergy.my_wind_cap = ((app_myenergy.annual_wind_gen / 365) / 0.024) / app_myenergy.capacity_factor;
                 mywind = app_myenergy.my_wind_cap * prc_of_capacity;
             }
-            
+
             // -------------------------------------------------------------------------------------------------------
             // Supply / demand balance calculation
             // -------------------------------------------------------------------------------------------------------
-            if (mysolar<10) mysolar = 0;
-            
-            var gen = mysolar + mywind;
-            
-            var balance = gen - use;
-            
-            if (balance>=0) total_use_direct_kwh += (use*interval)/(1000*3600);
-            if (balance<0) total_use_direct_kwh += (gen*interval)/(1000*3600);
-            
-            var store_change = (balance * interval) / (1000*3600);
+            mysolar = (mysolar < 10) ? 0 : mysolar;
+            gen = mysolar + mywind;
+
+            balance = Math.round(gen - use);
+
+            if (balance >= 0) {total_use_direct_kwh += (use * interval) / 3600000; }
+            if (balance < 0) {total_use_direct_kwh += (gen * interval) / 3600000; }
+
+            store_change = (balance * interval) / 3600000;
             store += store_change;
-            
-            total_wind_kwh += (mywind*interval)/(1000*3600);
-            total_solar_kwh += (mysolar*interval)/(1000*3600);
-            total_use_kwh += (use*interval)/(1000*3600);
-            
-            var time = datastart + (1000 * interval * z);
-            use_data.push([time,use]);
-            solar_data.push([time,mywind+mysolar]);
-            wind_data.push([time,mywind]);
-            bal_data.push([time,balance]);
-            store_data.push([time,store]);
-            
+
+            total_wind_kwh += (mywind * interval) / 3600000;
+            total_solar_kwh += (mysolar * interval) / 3600000;
+            total_use_kwh += (use * interval) / 3600000;
+
+            time = datastart + (1000 * interval * z);
+            use_data.push([time, use]);
+            solar_data.push([time, mywind + mysolar]);
+            wind_data.push([time, mywind]);
+            bal_data.push([time, balance]);
+            store_data.push([time, store]);
+
             t += interval;
         }
         $("#total_wind_kwh").html(total_wind_kwh.toFixed(1));
         $("#total_solar_kwh").html(total_solar_kwh.toFixed(1));
-        $("#total_use_kwh").html((total_use_kwh).toFixed(1));
-        
-        $("#total_use_direct_prc").html(Math.round(100*total_use_direct_kwh/total_use_kwh)+"%");
-        $("#total_use_via_store_prc").html(Math.round(100*(1-(total_use_direct_kwh/total_use_kwh)))+"%");
+        $("#total_use_kwh").html(total_use_kwh.toFixed(1));
 
-        $("#total_use_direct_kwh").html((total_use_direct_kwh).toFixed(1));
-        $("#total_use_via_store_kwh").html((total_use_kwh-total_use_direct_kwh).toFixed(1));        
+        $("#total_use_direct_prc").html(100 * total_use_direct_kwh / total_use_kwh + "%");
+        $("#total_use_via_store_prc").html(100 * (1 - (total_use_direct_kwh / total_use_kwh)) + "%");
+
+        $("#total_use_direct_kwh").html(total_use_direct_kwh.toFixed(1));
+        $("#total_use_via_store_kwh").html((total_use_kwh - total_use_direct_kwh).toFixed(1));
 
         options.xaxis.min = view.start;
         options.xaxis.max = view.end;
-        
-        var series = [
-            {data:solar_data,color: "#dccc1f", lines:{lineWidth:0, fill:1.0}},
-            {data:wind_data,color: "#2ed52e", lines:{lineWidth:0, fill:1.0}},
-            {data:use_data,color: "#0699fa",lines:{lineWidth:0, fill:0.8}}
+
+        series = [
+            {data: solar_data, color: "#dccc1f", lines: {lineWidth: 0, fill: 1.0}},
+            {data: wind_data, color: "#2ed52e", lines: {lineWidth: 0, fill: 1.0}},
+            {data: use_data, color: "#0699fa", lines: {lineWidth: 0, fill: 0.8}}
         ];
-        
-        if (app_myenergy.show_balance_line) series.push({data:store_data,yaxis:2, color: "#888"});
-        
-        $.plot($('#myenergy_placeholder'),series,options);
+
+        if (app_myenergy.show_balance_line) {series.push({data: store_data, yaxis: 2, color: "#888"}); }
+
+        $.plot($('#myenergy_placeholder'), series, options);
     },
-    
-    draw_bargraph: function() {
+
+    draw_bargraph: function () {
         /*
         var timeWindow = (3600000*24.0*365);
         var end = +new Date;
         var start = end - timeWindow;
         var interval = 3600*24;
-        
+
         var kwh_data = this.getdata(69211,start,end,interval);
         var kwhd_data = [];
-        
+
         for (var day=1; day<kwh_data.length; day++)
         {
             var kwh = kwh_data[day][1] - kwh_data[day-1][1];
             if (kwh_data[day][1]==null || kwh_data[day-1][1]==null) kwh = 0;
             kwhd_data.push([kwh_data[day][0],kwh]);
         }
-    
+
         var options = {
             bars: { show: true, align: "center", barWidth: 0.75*3600*24*1000, fill: true},
             xaxis: { mode: "time", timezone: "browser"},
             grid: {hoverable: true, clickable: true},
             selection: { mode: "x" }
         }
-        
+
         var series = [];
-        
+
         series.push({
             data: kwhd_data,
             color: "#dccc1f",
             lines: {lineWidth:0, fill:1.0}
         });
-        
+
         $.plot($('#myenergy_bargraph'),series,options);
         */
     },
-    
-    getfeedsbyid: function()
-    {
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "?apikey="+apikey;
-        
-        var feeds = {};
-        $.ajax({                                      
-            url: path+"feed/list.json"+apikeystr,
+
+    getfeedsbyid: function () {
+        var apikeystr = (apikey !== "") ? "?apikey=" + apikey : "",
+            feeds = {},
+            z,
+            byid = {};
+
+        $.ajax({
+            url: path + "feed/list.json" + apikeystr,
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { feeds = data_in; } 
+            async: false,
+            success: function (data_in) { feeds = data_in; }
         });
-        
-        var byid = {};
-        for (z in feeds) byid[feeds[z].id] = feeds[z];
+
+        for (z in feeds) {byid[feeds[z].id] = feeds[z]; }
         return byid;
     },
-    
-    getdata: function(id,start,end,interval)
-    {
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "?apikey="+apikey;
-        
-        var data = [];
-        $.ajax({                                      
-            url: path+"feed/data.json"+apikeystr,                         
-            data: "id="+id+"&start="+start+"&end="+end+"&interval="+interval+"&skipmissing=0&limitinterval=0",
+
+    getdata: function (id, start, end, interval) {
+        var apikeystr = (apikey !== "") ? "?apikey=" + apikey : "",
+            data = [];
+        $.ajax({
+            url: path + "feed/data.json" + apikeystr,
+            data: "id=" + id + "&start=" + start + "&end=" + end + "&interval=" + interval + "&skipmissing=0&limitinterval=0",
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { data = data_in; } 
+            async: false,
+            success: function (data_in) { data = data_in; }
         });
         return data;
     },
-    
+
     // -------------------------------------------------------------------------------------------------------
     // IN BROWSER TIMESERIES DATA STORE
     // with features for appending a new datapoint and triming the old data in order to create a moving view
     // -------------------------------------------------------------------------------------------------------
-    
-    timeseries_load: function (name,data)
-    {
+
+    timeseries_load: function (name, data) {
         datastore[name] = {};
         datastore[name].data = data;
         datastore[name].start = 0;
-        if (datastore[name].data.length>1)
-        {
+        if (datastore[name].data.length > 1) {
             datastore[name].start = datastore[name].data[0][0] * 0.001;
-            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0])*0.001;
+            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0]) * 0.001;
         }
     },
-    
-    timeseries_append: function (name,time,value)
-    {
-        if (datastore[name]==undefined) return false;
-        
-        var interval = datastore[name].interval;
-        var start = datastore[name].start;
-        
+
+    timeseries_append: function (name, time, value) {
+        if (datastore[name] === undefined) {return false; }
+
+        var interval = datastore[name].interval,
+            start = datastore[name].start,
+            last_pos,
+            npadding,
+            padd,
+            padd_time,
+            pos;
+
         // 1. align to timeseries interval
-        time = Math.floor(time/interval)*interval;
+        time = Math.floor(time / interval) * interval;
         // 2. calculate new data point position
-        var pos = (time - start) / interval;
+        pos = (time - start) / interval;
         // 3. get last position from data length
-        var last_pos = datastore[name].data.length - 1;
-        
+        last_pos = datastore[name].data.length - 1;
+
         // if the datapoint is newer than the last:
-        if (pos > last_pos)
-        {
-            var npadding = (pos - last_pos)-1;
-            
+        if (pos > last_pos) {
+            npadding = (pos - last_pos) - 1;
+
             // padding
-            if (npadding>0 && npadding<12) {
-                for (var padd = 0; padd<npadding; padd++)
-                {
-                    var padd_time = start + ((last_pos+padd+1) * interval);
-                    datastore[name].data.push([padd_time*1000,null]);
+            if (npadding > 0 && npadding < 12) {
+                for (padd = 0; padd < npadding; padd++) {
+                    padd_time = start + ((last_pos + padd + 1) * interval);
+                    datastore[name].data.push([padd_time * 1000, null]);
                 }
             }
-            
             // insert datapoint
-            datastore[name].data.push([time*1000,value]);
+            datastore[name].data.push([time * 1000, value]);
         }
     },
-    
-    timeseries_trim_start: function (name,newstart)
-    {
-        if (datastore[name]==undefined) return false;
-        
-        var interval = datastore[name].interval;
-        var start = datastore[name].start;
-        
-        newstart = Math.floor(newstart/interval)*interval;
-        var pos = (newstart - start) / interval;
-        var tmpdata = [];
-        
-        if (pos>=0) {
-            for (var p=pos; p<datastore[name].data.length; p++) {
-                var t = datastore[name].data[p][0];
-                var v = datastore[name].data[p][1];
-                tmpdata.push([t,v]);
+
+    timeseries_trim_start: function (name, newstart) {
+        if (datastore[name] === undefined) {return false; }
+
+        var interval = datastore[name].interval,
+            start = datastore[name].start,
+            p,
+            t,
+            v,
+            pos,
+            tmpdata = [];
+
+        newstart = Math.floor(newstart / interval) * interval;
+        pos = (newstart - start) / interval;
+
+        if (pos >= 0) {
+            for (p = pos; p < datastore[name].data.length; p++) {
+                t = datastore[name].data[p][0];
+                v = datastore[name].data[p][1];
+                tmpdata.push([t, v]);
             }
             datastore[name].data = tmpdata;
             datastore[name].start = datastore[name].data[0][0] * 0.001;
-            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0])*0.001;
+            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0]) * 0.001;
         }
     },
-    
-    getdataremote: function(id,start,end,interval)
-    {   
+
+    getdataremote: function (id, start, end, interval) {
         var data = [];
-        $.ajax({                                      
-            url: path+"app/dataremote.json",
-            data: "id="+id+"&start="+start+"&end="+end+"&interval="+interval+"&skipmissing=0&limitinterval=0",
+        $.ajax({
+            url: path + "app/dataremote.json",
+            data: "id=" + id + "&start=" + start + "&end=" + end + "&interval=" + interval + "&skipmissing=0&limitinterval=0",
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { data = data_in; } 
+            async: false,
+            success: function (data_in) { data = data_in; }
         });
         return data;
     },
-    
-    getvalueremote: function(id)
-    {   
+
+    getvalueremote: function (id) {
         var value = 0;
-        $.ajax({                                      
-            url: path+"app/valueremote.json",                       
-            data: "id="+id, dataType: 'text', async: false,                      
-            success: function(data_in) {
+        $.ajax({
+            url: path + "app/valueremote.json",
+            data: "id=" + id,
+            dataType: 'text',
+            async: false,
+            success: function (data_in) {
                 value = data_in;
-            } 
+            }
         });
         return value;
     }
-}
+};
diff --git a/myheatpump/myheatpump.html b/myheatpump/myheatpump.html
index d4df10ea..76774ecd 100644
--- a/myheatpump/myheatpump.html
+++ b/myheatpump/myheatpump.html
@@ -1,48 +1,83 @@
+<style>
+    .lbl1{
+        position:absolute;
+        top:65px;
+        left:140px
+    }
+    .lbl2{
+        position:absolute;
+        top:140px;
+        left:515px
+    }
+    .lbl3{
+        position:absolute;
+        top:340px;
+        left:515px
+    }
+    .lbl4{
+        position:absolute;
+        top:420px;
+        left:190px
+    }
+    .lbl5{
+        position:absolute;
+        top:95px;
+        left:890px
+    }
+</style>
+
     <div class="page">
-       
-       <h3>MY HEATPUMP</h3>
-       
+       <h3 class = "i18n">MY HEATPUMP</h3>
        <div style="position:relative">
-       
-       <canvas id="heatpump-diagram" width="1200" height="500"></canvas>
-       
-       <span style="position:absolute; top:65px; left:140px; color:#0699fa">HEATPUMP POWER: <b><span class="heatpump-power"></span>W</b></span>
-       <span style="position:absolute; top:140px; left:515px; color:#0699fa">FLOW: <b><span class="heatpump-flow"></span>C</b></span>
-       <span style="position:absolute; top:340px; left:515px; color:#0699fa">RETURN: <b><span class="heatpump-return"></span>C</b></span>
-       
-       <span style="position:absolute; top:420px; left:190px; color:#0699fa">OUTSIDE: <b><span class="heatpump-ambient"></span>C</b></span>
-       <span style="position:absolute; top:95px; left:890px; color:#0699fa">ROOM: <b><span class="room-temperature"></span>C</b></span>
+           <canvas id="heatpump-diagram" width="1200" height="500"></canvas>
+           <div class = "lbl1 blue"><span class = "i18n">HEATPUMP POWER</span><span class="heatpump-power">&nbsp:&nbspW</span></div>
+           <div class = "lbl2 blue"><span class = "i18n">FLOW</span><span class="heatpump-flow">&nbsp:&nbsp°C</span></div>
+           <div class = "lbl3 blue"><span class = "i18n">RETURN</span><span class="heatpump-return">&nbsp:&nbsp°C</span></div>
+           <div class = "lbl4 blue"><span class = "i18n">OUTSIDE</span><span class="heatpump-ambient">&nbsp:&nbsp°C</span></div>
+           <div class = "lbl5 blue"><span class = "i18n">ROOM</span><span class="room-temperature">&nbsp:&nbsp°C</span></div>
        </div>
-
     </div>
+
     <div style="background-color:#efefef; border-top: 5px solid #aaa">
-    <div class="page">
-       <div id="myheatpump_kwhgraph" style="display:none; width:100%">
-           <h3>DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)</h3>
-           <div id="myheatpump_placeholder_wh_bound" style="width:100%; height:400px; position:relative;">
-                <div id="myheatpump_placeholder_wh" style="width:100%; height:400px"></div>
-           </div>
-           <br><br>
-       </div>
-       
-       <h3>DETAILED VIEW:</h3>
-       <div id="myheatpump_placeholder_bound" style="width:100%; height:400px; position:relative; padding-top:40px;">
-            <div style="position:absolute; top:0px; left:450px;">
-            <button class='btn myheatpump_time' type='button' time='1'>D</button>
-            <button class='btn myheatpump_time' type='button' time='7'>W</button>
-            <button class='btn myheatpump_time' type='button' time='30'>M</button>
-            <button class='btn myheatpump_time' type='button' time='365'>Y</button>
-            <button id='myheatpump_zoomin' class='btn' >+</button>
-            <button id='myheatpump_zoomout' class='btn' >-</button>
-            <button id='myheatpump_left' class='btn' ><</button>
-            <button id='myheatpump_right' class='btn' >></button>
+        <div class="page">
+            <div id="myheatpump_kwhgraph" style="display:none; width:100%">
+               <h3 class = "i18n">DAILY HEATPUMP ELECTRICITY CONSUMPTION: (kWh)</h3>
+               <div id="myheatpump_placeholder_wh_bound" style="width:100%; height:400px; position:relative;">
+                    <div id="myheatpump_placeholder_wh" style="width:100%; height:400px"></div>
+               </div>
+               <br><br>
             </div>
-       
-            <span style="position:absolute; top:5px; left:0px;">POWER (Watts)</span>
-            <span style="position:absolute; top:5px; right:0px;">Temperature (C)</span>
-            <div id="myheatpump_placeholder" style="width:100%; height:400px"></div>
-       </div><br>
-       <p style="color:#888; text-align:center"><b>Configuration:</b> This dashboard automatically looks for feeds named or containing the words: heatpump_power, heatpump_kwh, heatpump_flow_temp, heatpump_return_temp, ambient_temp and room_temp. If heatpump_kwh is not available it will hide the daily kwh graph.</p>
-   </div>
-   
-   </div>
+
+            <h3 class = "i18n">DETAILED VIEW:</h3>
+            <div id="myheatpump_placeholder_bound" style="width:100%; height:400px; position:relative; padding-top:40px;">
+                <div style="position:absolute; top:0px; left:450px;">
+                <button class='btn i18n myheatpump_time' type='button' time='1'>D</button>
+                <button class='btn i18n myheatpump_time' type='button' time='7'>W</button>
+                <button class='btn i18n myheatpump_time' type='button' time='30'>M</button>
+                <button class='btn i18n myheatpump_time' type='button' time='365'>Y</button>
+                <button class='btn i18n' id='myheatpump_zoomin'>+</button>
+                <button class='btn i18n' id='myheatpump_zoomout'>-</button>
+                <button class='btn i18n' id='myheatpump_left'><</button>
+                <button class='btn i18n' id='myheatpump_right'>></button>
+                </div>
+
+                <span class="i18n"  style="position:absolute; top:5px; left:0px;">POWER (Watts)</span>
+                <span class="i18n"  style="position:absolute; top:5px; right:0px;">Temperature (C)</span>
+                <div id="myheatpump_placeholder" class="i18n"  style="width:100%; height:400px"></div>
+            </div><br>
+            <p style="color:#888; text-align:center">
+               <b class="i18n">Configuration:</b>&nbsp
+               <span class="i18n">thisdashboard</span>&nbsp
+               <span class="i18n">heatpumprem</span>&nbsp
+               <span class="i18n">heatpumphide</span>&nbsp
+           </p>
+            <!--
+            This dashboard automatically looks for feeds named or containing the words: heatpump_power, heatpump_kwh, heatpump_flow_temp, heatpump_return_temp, ambient_temp and room_temp.
+            If heatpump_kwh is not available it will hide the daily kwh graph.
+            -->
+        </div>
+        <!-- These terms are not yet defined in your language -->
+        <div id="obj" style="display:none;">
+        </div>
+
+    </div>
diff --git a/myheatpump/myheatpump.js b/myheatpump/myheatpump.js
index e68baaf3..a8762db8 100644
--- a/myheatpump/myheatpump.js
+++ b/myheatpump/myheatpump.js
@@ -1,20 +1,20 @@
+/*jslint maxerr: 1000 */
 var app_myheatpump = {
-
     kwh: false,
     power: false,
     flow: false,
-    return: false,
+    ret: false,
     ambient: false,
     room: false,
-    
+
     maxpower: 6000,
     speed: 0,
-    
+
     updater: false,
     ctx: false,
     time: 0,
-    dtime: 1000/25,
-    
+    dtime: 1000 / 25,
+
     // Include required javascript libraries
     include: [
         "Lib/flot/jquery.flot.min.js",
@@ -25,261 +25,249 @@ var app_myheatpump = {
         "Modules/app/roundedrect.js"
     ],
 
-    init: function()
-    {
-        $("body").css("background-color","#222");
-        
+    init: function () {
+        var feeds,
+            z,
+            name;
+        $("body").css("background-color", "#222");
+
         // Auto scan by feed names
-        var feeds = app_myheatpump.getfeedsbyid();
-        for (z in feeds)
-        {
-            var name = feeds[z].name.toLowerCase();
-            
-            if (name.indexOf("heatpump_power")!=-1) app_myheatpump.power = z;  
-            if (name.indexOf("heatpump_flow_temp")!=-1) app_myheatpump.flow = z;
-            if (name.indexOf("heatpump_return_temp")!=-1) app_myheatpump.return = z;
-            if (name.indexOf("heatpump_room_temp")!=-1) app_myheatpump.room = z;
-            if (name.indexOf("ambient_temp")!=-1) app_myheatpump.ambient = z;
-            if (name.indexOf("heatpump_kwh")!=-1) app_myheatpump.kwh = z;
+        feeds = app_myheatpump.getfeedsbyid();
+        for (z in feeds) {
+            name = feeds[z].name.toLowerCase();
+
+            if (name.indexOf("heatpump_power") !== -1) {app_myheatpump.power = z; }
+            if (name.indexOf("heatpump_flow_temp") !== -1) {app_myheatpump.flow = z; }
+            if (name.indexOf("heatpump_return_temp") !== -1) {app_myheatpump.ret = z; }
+            if (name.indexOf("heatpump_room_temp") !== -1) {app_myheatpump.room = z; }
+            if (name.indexOf("ambient_temp") !== -1) {app_myheatpump.ambient = z; }
+            if (name.indexOf("heatpump_kwh") !== -1) {app_myheatpump.kwh = z; }
         }
 
         this.feedupdate();
-        this.feedupdater = setInterval(this.feedupdate,5000);
-        this.updater = setInterval(this.update,this.dtime);
+        this.feedupdater = setInterval(this.feedupdate, 5000);
+        this.updater = setInterval(this.update, this.dtime);
 
-        $("#myheatpump_zoomout").click(function () {view.zoomout(); app_myheatpump.draw();});
-        $("#myheatpump_zoomin").click(function () {view.zoomin(); app_myheatpump.draw();});
-        $('#myheatpump_right').click(function () {view.panright(); app_myheatpump.draw();});
-        $('#myheatpump_left').click(function () {view.panleft(); app_myheatpump.draw();});
-        $('.myheatpump_time').click(function () {view.timewindow($(this).attr("time")); app_myheatpump.draw();});
+        $("#myheatpump_zoomout").click(function () {view.zoomout(); app_myheatpump.draw(); });
+        $("#myheatpump_zoomin").click(function () {view.zoomin(); app_myheatpump.draw(); });
+        $('#myheatpump_right').click(function () {view.panright(); app_myheatpump.draw(); });
+        $('#myheatpump_left').click(function () {view.panleft(); app_myheatpump.draw(); });
+        $('.myheatpump_time').click(function () {view.timewindow($(this).attr("time")); app_myheatpump.draw(); });
 
-        $('#myheatpump_placeholder').bind("plotselected", function (event, ranges)
-        {
+        $('#myheatpump_placeholder').bind("plotselected", function (event, ranges) {
             view.start = ranges.xaxis.from;
             view.end = ranges.xaxis.to;
             app_myheatpump.draw();
         });
     },
-    
-    show: function()
-    {
-        var canvas = document.getElementById("heatpump-diagram");
-        var ctx = canvas.getContext("2d");
+
+    show: function () {
+        var canvas = document.getElementById("heatpump-diagram"),
+            ctx = canvas.getContext("2d"),
+            top_offset = 0,
+            kwh,
+            placeholder_bound = $('#myheatpump_placeholder_bound'),
+            placeholder = $('#myheatpump_placeholder'),
+            width = placeholder_bound.width(),
+            height = width * 0.38,
+            ndays = 50,
+            timeWindow = (3600000 * 24 * ndays), //Initial time window
+            start = +new Date - timeWindow;	//Get start time
+
+        view.end = +new Date;  //Get end time
+
         this.ctx = ctx;
-        
         this.draw_heatpump_outline();
-        
-        var top_offset = 0;
-        var placeholder_bound = $('#myheatpump_placeholder_bound');
-        var placeholder = $('#myheatpump_placeholder');
-        
-        var width = placeholder_bound.width();
-        var height = width * 0.38;
 
         placeholder.width(width);
         placeholder_bound.height(height);
-        placeholder.height(height-top_offset);
+        placeholder.height(height - top_offset);
 
-        var ndays = 50;
-        var timeWindow = (3600000*24*ndays);	//Initial time window
-        var start = +new Date - timeWindow;	//Get start time
-        view.end = +new Date;				    //Get end time
 
-        var d = new Date()
-        var n = d.getTimezoneOffset();
-        var offset = n / -60;
+        var d = new Date(),
+            n = d.getTimezoneOffset(),
+            offset = n / -60,
+            interval = 3600 * 24;
 
-        var interval = 3600*24;
-        view.start = (Math.round((start/1000.0)/interval) * interval)*1000;
+        view.start = (Math.round((start / 1000.0) / interval) * interval) * 1000;
 
         if (this.kwh) {
-            
-            var whdata = this.getdata(this.kwh,view.start,view.end,interval);
-            var kwhd = [];
-            
-            for (var day=1; day<whdata.length; day++) {
-                var kwh = whdata[day][1] - whdata[day-1][1];
-                kwhd.push([whdata[day][0],kwh]);
+            var whdata = this.getdata(this.kwh, view.start, view.end, interval),
+                kwhd = [],
+                day;
+
+            for (day = 1; day < whdata.length; day++) {
+                kwh = whdata[day][1] - whdata[day - 1][1];
+                kwhd.push([whdata[day][0], kwh]);
             }
 
             $('#myheatpump_placeholder_wh').width(width)
-            $.plot($('#myheatpump_placeholder_wh'), [{data:kwhd, color:"#0699fa"}], {bars:{show:true, barWidth:3600*1000*20}, xaxis:{mode:"time",timezone: "browser"}});
-            
+            $.plot($('#myheatpump_placeholder_wh'), [{data: kwhd, color: "#0699fa"}], {bars: {show: true, barWidth: 3600 * 1000 * 20}, xaxis: {mode: "time", timezone: "browser"}});
+
             $("#myheatpump_kwhgraph").show();
         }
-        
-        var series = [];
 
-        var dp = 1;
-        var units = "C";
-        var fill = false;
-        var plotColour = 0;
+        var series = [],
+            dp = 1,
+            units = "C",
+            fill = false,
+            plotColour = 0;
 
         app_myheatpump.draw();
     },
-    
-    draw_heatpump_outline: function() {
-        var ctx = this.ctx;
+
+    draw_heatpump_outline: function () {
+        var ctx = this.ctx,
+            i;
         ctx.lineWidth = 5;
-        ctx.strokeStyle="#0699fa";
+        ctx.strokeStyle = "#0699fa";
 
-        ctx.roundRect(100,100,400,300, 20).stroke();
-        ctx.roundRect(800,130,300,240, 20).stroke();
-        ctx.lineWidth = 2
+        ctx.roundRect(100, 100, 400, 300, 20).stroke();
+        ctx.roundRect(800, 130, 300, 240, 20).stroke();
+        ctx.lineWidth = 2;
         ctx.beginPath();
-        for (var i=0; i<10; i++)
-        {
-            ctx.moveTo(800+i*30,150);
-            ctx.lineTo(800+i*30,350);
+        for (i = 0; i < 10; i++) {
+            ctx.moveTo(800 + i * 30, 150);
+            ctx.lineTo(800 + i * 30, 350);
         }
         ctx.stroke();
-
         ctx.lineWidth = 5;
         ctx.beginPath();
-        ctx.moveTo(501,175);
-        ctx.lineTo(800,175);
-        ctx.moveTo(501,325);
-        ctx.lineTo(800,325);;
+        ctx.moveTo(501, 175);
+        ctx.lineTo(800, 175);
+        ctx.moveTo(501, 325);
+        ctx.lineTo(800, 325);
         ctx.stroke();
 
         ctx.lineWidth = 2;
         ctx.beginPath();
-        ctx.arc(250,250,120,0,2*Math.PI);
+        ctx.arc(250, 250, 120, 0, 2 * Math.PI);
         ctx.stroke();
     },
-    
-    hide: function() {
+
+    hide: function () {
         clearInterval(app_myheatpump.updater);
         clearInterval(app_myheatpump.feedupdater);
-        $("body").css("background-color","#fff");
+        $("body").css("background-color", "#fff");
     },
-    
-    feedupdate: function()
-    {
-       var feeds = {};
-       $.ajax({                                      
-            url: path+"feed/list.json",
+
+    feedupdate: function () {
+        var feeds = {};
+        $.ajax({
+            url: path + "feed/list.json",
             dataType: 'json',
-            async: true,                      
-            success: function(data_in) { feeds = data_in; 
-            
-                for (z in feeds)
-                {
-                    if (feeds[z].id==app_myheatpump.power) {
-                        $(".heatpump-power").html((feeds[z].value*1).toFixed(0));
-                        app_myheatpump.speed = (feeds[z].value*1 / app_myheatpump.maxpower);
-                        if (feeds[z].value<50) app_myheatpump.speed = 0;
+            async: true,
+            success: function (data_in) {
+                var z;
+                feeds = data_in;
+                for (z in feeds) {
+                    if (feeds[z].id === app_myheatpump.power) {
+                        $(".heatpump-power").html((feeds[z].value * 1).toFixed(0));
+                        app_myheatpump.speed = (feeds[z].value * 1 / app_myheatpump.maxpower);
+                        if (feeds[z].value < 50) {app_myheatpump.speed = 0; }
                     }
-                    
-                    if (feeds[z].id==app_myheatpump.flow) 
-                        $(".heatpump-flow").html((feeds[z].value*1).toFixed(1));
-                    if (feeds[z].id==app_myheatpump.return) 
-                        $(".heatpump-return").html((feeds[z].value*1).toFixed(1));
-                    if (feeds[z].id==app_myheatpump.ambient) 
-                        $(".heatpump-ambient").html((feeds[z].value*1).toFixed(1));
-                    if (feeds[z].id==app_myheatpump.room) 
-                        $(".room-temperature").html((feeds[z].value*1).toFixed(1));
-                } 
-            
-            } 
-       });
+
+                    if (feeds[z].id === app_myheatpump.flow) {$(".heatpump-flow").html((feeds[z].value * 1).toFixed(1)); }
+                    if (feeds[z].id === app_myheatpump.ret) {$(".heatpump-return").html((feeds[z].value * 1).toFixed(1)); }
+                    if (feeds[z].id === app_myheatpump.ambient) {$(".heatpump-ambient").html((feeds[z].value * 1).toFixed(1)); }
+                    if (feeds[z].id === app_myheatpump.room) {$(".room-temperature").html((feeds[z].value * 1).toFixed(1)); }
+                }
+
+            }
+        });
     },
-    
-    update: function()
-    {
-        var ctx = app_myheatpump.ctx;
-        
-        ctx.fillStyle="#222"
+
+    update: function () {
+        var ctx = app_myheatpump.ctx,
+            i,
+            a;
+
+        ctx.fillStyle = "#222";
         ctx.beginPath();
-        ctx.arc(250,250,115,0,2*Math.PI);
+        ctx.arc(250, 250, 115, 0, 2 * Math.PI);
         ctx.fill();
 
-        a = app_myheatpump.time*10*app_myheatpump.speed;
-        
-        ctx.fillStyle="#0699fa";
-        for (var i=0; i<4; i++){
+        a = app_myheatpump.time * 10 * app_myheatpump.speed;
+
+        ctx.fillStyle = "#0699fa";
+        for (i = 0; i < 4; i++) {
             ctx.beginPath();
-            ctx.arc(250,250,110,a+2*Math.PI*i*0.25,a+2*Math.PI*i*0.25+0.6,0);
-            ctx.arc(250,250,20,a+2*Math.PI*i*0.25+0.6,a+2*Math.PI*i*0.25,1);
+            ctx.arc(250, 250, 110, a + 2 * Math.PI * i * 0.25,a + 2 * Math.PI * i * 0.25 + 0.6, 0);
+            ctx.arc(250, 250, 20, a + 2 * Math.PI * i * 0.25 + 0.6,a + 2 * Math.PI * i * 0.25, 1);
             ctx.closePath();
             ctx.stroke();
         }
-        
+
         ctx.beginPath();
-        ctx.arc(250,250,15,0,2*Math.PI);
+        ctx.arc(250, 250, 15, 0, 2 * Math.PI);
         ctx.stroke();
-        
-        app_myheatpump.time += (app_myheatpump.dtime*0.001);
+
+        app_myheatpump.time += (app_myheatpump.dtime * 0.001);
     },
-    
-    draw: function()
-    {
+
+    draw: function () {
         var options = {
             lines: { fill: false },
             xaxis: { mode: "time", timezone: "browser", min: view.start, max: view.end},
             yaxes: [
-                {position:'right'},
-                {position:'left'},
-                {position:'left'},
-                {position:'left'},
-                {position:'left'}
+                {position: 'right'},
+                {position: 'left'},
+                {position: 'left'},
+                {position: 'left'},
+                {position: 'left'}
             ],
             //yaxis: { min: 0 },
             grid: {hoverable: true, clickable: true},
             selection: { mode: "x" },
             legend: { show: "true" }
-        }
-        
-        var npoints = 800;
-        interval = Math.round(((view.end - view.start)/npoints)/1000);
-        
-        series = [];
-        if (this.power) series.push({data:this.getdata(this.power,view.start,view.end,interval), color:"rgb(10,150,230)", yaxis:2, lines:{fill:true}, label: "Power"});
-        if (this.flow) series.push({data:this.getdata(this.flow,view.start,view.end,interval), color:"rgb(10,120,210)", label: "Flow"});
-        if (this.return) series.push({data:this.getdata(this.return,view.start,view.end,interval), color:"rgb(10,100,190)", label: "Return"});
-        if (this.ambient) series.push({data:this.getdata(this.ambient,view.start,view.end,interval), color:"rgb(10,80,170)", label: "Outside"});
-        if (this.room) series.push({data:this.getdata(this.room,view.start,view.end,interval), color:"rgb(10,60,150)", label: "Room"});
+        };
+
+        var npoints = 800,
+            interval = Math.round(((view.end - view.start) / npoints) / 1000),
+            series = [];
+        if (this.power) {series.push({data: this.getdata(this.power, view.start, view.end, interval), color: "rgb(10,150,230)", yaxis: 2, lines: {fill: true}, label: "Power"}); }
+        if (this.flow) {series.push({data: this.getdata(this.flow, view.start, view.end, interval), color: "rgb(10,120,210)", label: "Flow"}); }
+        if (this.ret) {series.push({data: this.getdata(this.ret, view.start, view.end, interval), color: "rgb(10,100,190)", label: "Return"}); }
+        if (this.ambient) {series.push({data: this.getdata(this.ambient, view.start, view.end, interval), color: "rgb(10,80,170)", label: "Outside"}); }
+        if (this.room) {series.push({data: this.getdata(this.room, view.start, view.end, interval), color: "rgb(10,60,150)", label: "Room"}); }
 
 
         options.xaxis.min = view.start;
         options.xaxis.max = view.end;
         $.plot($('#myheatpump_placeholder'), series, options);
-        
+
         //$(".tickLabel").each(function(i) { $(this).css("color", "#0699fa"); });
     },
-    
-    getfeedsbyid: function()
-    {
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "?apikey="+apikey;
-        
-        var feeds = {};
-        $.ajax({                                      
-            url: path+"feed/list.json"+apikeystr,
+
+    getfeedsbyid: function () {
+        var feeds = {},
+            byid = {},
+            z,
+            apikeystr = (apikey !== "") ? "?apikey=" + apikey : "";
+        $.ajax({
+            url: path + "feed/list.json" + apikeystr,
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { feeds = data_in; } 
+            async: false,
+            success: function (data_in) { feeds = data_in; }
         });
-        
-        var byid = {};
-        for (z in feeds) byid[feeds[z].id] = feeds[z];
+
+        for (z in feeds) {
+            byid[feeds[z].id] = feeds[z];
+        }
         return byid;
     },
-    
-    getdata: function(id,start,end,interval)
-    {
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "?apikey="+apikey;
-        
-        var data = [];
-        $.ajax({                                      
-            url: path+"feed/data.json"+apikeystr,                         
-            data: "id="+id+"&start="+start+"&end="+end+"&interval="+interval+"&skipmissing=1&limitinterval=1",
+
+    getdata: function (id, start, end, interval) {
+        var apikeystr = (apikey !== "") ? "?apikey=" + apikey : "",
+            data = [];
+        $.ajax({
+            url: path + "feed/data.json" + apikeystr,
+            data: "id=" + id + "&start=" + start + "&end=" + end + "&interval=" + interval + "&skipmissing=1&limitinterval=1",
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { data = data_in; } 
+            async: false,
+            success: function (data_in) { data = data_in; }
         });
         return data;
-    } 
-    
-}
+    }
+
+};
diff --git a/mysolarpv/mysolarpv.html b/mysolarpv/mysolarpv.html
index 4716bf28..0bb86e9e 100644
--- a/mysolarpv/mysolarpv.html
+++ b/mysolarpv/mysolarpv.html
@@ -1,152 +1,181 @@
-<div class="container">
-
-    <div id="mysolarpv-config" style="display:none; ">
-        
-        <div class="electric-title">APP CONFIG</div><br>
-        
-        
-        <table class="table">
-        <tr>
-            <td style="border:0;">
-                <p><b>Electricity consumption</b> feed id (csv for multiple)</p>
+<style>
+    #mysolarpv-openconfig{
+        cursor:pointer;
+    }
+    #mysolarpv_placeholder_bound{
+        width:100%;
+        height:500px;
+    }
+    #mysolarpv_placeholder{
+        height:500px;
+    }
+</style>
+<div class="container-fluid">
+    <div id="mysolarpv-config" class="row" style="display:none;">
+        <div class="electric-title i18n">APP CONFIG</div><br>
+            <div class="col-md-4">
+                <p>
+                    <b class="i18n">Electricity consumption</b>&nbsp
+                    <span class="i18n">feed id (csv for multiple)</span>&nbsp
+                </p>
                 <input id="mysolarpv-housepower" type="text" />
-            </td>
-            <td style="border:0;">
-                <p><b>Solar generation</b> feed id (csv for multiple)</p>
+            </div>
+            <div class="col-md-4">
+            </div>
+            <div class="col-md-4">
+                <p>
+                    <b class="i18n">Solar generation</b>&nbsp
+                    <span class="i18n">feed id (csv for multiple)</span>&nbsp
+                    <span class="i18n">feed id (csv for multiple)</span>
+                </p>
                 <input id="mysolarpv-solarpower" type="text" />
-            </td>
-        </table>
-        
-        <br><br>
-        <p style="color:#888; text-align:center"><b>Configuration:</b> This dashboard automatically looks for feeds named or containing the words: solar_power, house_power. To use this dashboard add these names to the relevant feeds.</p>
+            </div>
+            <p class "config-rem">
+                <b class="i18n">Configuration:</b>
+                <span class="i18n">thisdashboard</span>&nbsp
+                <span class="i18n">configcomment</span>&nbsp
+                <span class="i18n">addthesefeeds</span>&nbsp
+                <!--
+                This dashboard automatically looks for feeds named or containing the words: solar_power, house_power. To use this dashboard add these names to the relevant feeds.
+                -->
+            </p>
+            <button id="mysolarpv-configsave" class="btn btn-primary i18n">Save</button>
+            <div id="obj" style="display:none;">
 
-        <button id="mysolarpv-configsave" class="btn btn-primary">Save</button>
+            </div>
     </div>
-    
-<div class="block">
 
-    <div style="height:20px; border-bottom:1px solid #333; padding:8px;">
-        <div style="float:right;">
-            <!--<span style="color:#fff; margin-right:10px" >Settings</span>-->
-            <i id="mysolarpv-openconfig" class="icon-wrench icon-white" style="cursor:pointer"></i>
+    <div class="block">
+        <div class="electric-head">
+            <div class="icon-btn" id="mysolarpv-openconfig">
+                <i  class="icon-wrench icon-white"></i>
+            </div>
         </div>
-    </div>
 
-    <table style="width:100%">
-    <tr>
-        <td style="border:0; width:33%">
-            <div class="electric-title">POWER NOW</div>
-            <div class="power-value"><span id="usenow">0</span>W</div>
-        </td>
-        <td style="text-align:center; border:0; width:33%">
-            <div class="electric-title"><span id="balance-label"></span></div>
-            <div class="power-value"><span id="balance"></span></div>
-        </td>
-        <td style="text-align:right; border:0; width:33%">
-            <div class="electric-title">SOLAR PV</div>
-            <div class="power-value" style="color:#dccc1f"><span id="solarnow">0</span>W</div>
-        </td>
-        
-    </tr>
-    </table>
-    <br>
-    
-    <style>
-        .visnav {
-            margin-right:4px;
-            padding-left:8px;
-            padding-right:8px;
-            min-width:20px;
-            background-color:rgba(6,153,250,0.1);
-            line-height:28px;
-            float:left;
-            text-align:center;
-        }
-    </style>
-
-    <div class="visnavblock" style="height:28px; padding-bottom:5px;">
-        <span class='visnav time' time='1'>1h</span>
-        <span class='visnav time' time='8'>8h</span>
-        <span class='visnav time' time='24'>D</span>
-        <span id='vistimeW' class='visnav time' time='168'>W</span>
-        <span id='vistimeM' class='visnav time' time='720'>M</span>
-        <span id='vistimeY' class='visnav time' time='8760'>Y</span>
-        <span id='mysolarpv_zoomin' class='visnav' >+</span>
-        <span id='mysolarpv_zoomout' class='visnav' >-</span>
-        <span id='mysolarpv_left' class='visnav' ><</span>
-        <span id='mysolarpv_right' class='visnav' >></span>
-        <span id='balanceline' class='visnav' style="float:right">Show balance</span>
-    </div>
+        <table>
+            <tr>
+                <td >
+                    <div class="electric-title i18n">POWER NOW</div>
+                    <div class="power-value">
+                        <span id="usenow">0</span>&nbsp<span>W</span>
+                    </div>
+                </td>
+                <td class="config-rem">
+                    <div class="electric-title">
+                        <span id="bal-lbl-zer" style="display:block;" class="i18n">PERFECT BALANCE</span>
+                        <span id="bal-lbl-imp" style="display:none;" class="i18n">IMPORTING</span>
+                        <span id="bal-lbl-exp" style="display:none;" class="i18n">EXPORTING</span>
+                    </div>
+                    <div class="power-value">
+                        <span id="balance"></span>
+                    </div>
+                </td>
+                <td class="config-rem-right">
+                    <div class="electric-title i18n">SOLAR PV</div>
+                    <div class="power-value yellow">
+                        <span id="solarnow">0</span>&nbsp<span>W</span>
+                    </div>
+                </td>
+
+            </tr>
+        </table>
+        <br>
+
+
+        <div class="visnavblock" style="height:28px; padding-bottom:5px;">
+            <span class='visnav i18n time' time='3'>3h</span>
+            <span class='visnav i18n time' time='8'>8h</span>
+            <span class='visnav i18n time' time='24'>D</span>
+            <span class='visnav i18n time' time='168'>W</span>
+            <span class='visnav i18n time' time='720'>M</span>
+            <span class='visnav i18n time' time='8760'>Y</span>
+            <span class='visnav i18n' id='myenergy_zoomin' >+</span>
+            <span class='visnav i18n' id='myenergy_zoomout' >-</span>
+            <span class='visnav i18n' id='myenergy_left' ><</span>
+            <span class='visnav i18n' id='myenergy_right' >></span>
+            <span id="balanceline"  style="float:right">
+                <span class='visnav i18n' id='balanceshown'>Show balance</span>
+                <span class='visnav i18n' id='balancehidden' style="display:none;">Hide balance</span>
+            </span>
+        </div>
+
+        <div id="mysolarpv_placeholder_bound">
+            <div id="mysolarpv_placeholder"></div>
+        </div>
+
+        <br>
+
+        <table>
+            <tr>
+                <td class="appbox">
+                    <div class="appbox-title i18n">HOUSE</div>
+                    <div class = "blue">
+                        <span class="appbox-value" id="total_use_kwh">0</span>&nbsp
+                        <span class="appbox-units">kWh</span>
+                    </div>
+                </td>
 
-    <div id="mysolarpv_placeholder_bound" style="width:100%; height:500px;">
-        <div id="mysolarpv_placeholder" style="height:500px"></div>
+                <td class="appbox">
+                    <div class="appbox-title i18n">SOLAR</div>
+                    <div class = "yellow">
+                        <span class="appbox-value" id="total_solar_kwh">0</span>&nbsp
+                        <span class="appbox-units">kWh</span>
+                    </div>
+                </td>
+
+                <td class="appbox">
+                    <div class="appbox-title i18n">DIRECT</div>
+                    <div class= "green">
+                        <div>
+                            <span class="appbox-value" id="total_use_direct_prc">0</span>
+                        </div>
+                        <div class="appbox-units">
+                            <span id="total_use_direct_kwh">0</span>&nbsp<span>kWh</span>
+                        </div>
+                    </div>
+                </td>
+
+                <td class="appbox">
+                    <div class="appbox-title i18n">GRID</div>
+                    <div class="red">
+                        <div>
+                            <span class="appbox-value" id="total_use_via_store_prc">0</span>
+                        </div>
+                        <div class="appbox-units">
+                            <span id="total_use_via_store_kwh">0</span>&nbsp<span>kWh</span>
+                        </div>
+
+                    </div>
+                </td>
+            </tr>
+        </table>
     </div>
-    
-    <br>
-    
-    <style>
-        .appbox {
-            width:25%;
-            text-align:center;
-            padding:10px;
-            vertical-align:top;
-            
-        }
-        
-        .appbox-title {
-            color: #aaa;
-            font-weight:bold;
-            font-size:20px;
-            padding-bottom:15px;
-        }
-        
-        .appbox-value {
-            color: #fff;
-            font-weight:bold;
-            font-size:36px;
-        }
-        
-        .appbox-units {
-            color: #fff;
-            font-weight:bold;
-            font-size:16px;
-        }
-    </style>
-    
-    <table style="width:100%">
-    <tr>
-        <td class="appbox">
-            <div class="appbox-title">HOUSE</div>
-            <div><span class="appbox-value" id="total_use_kwh" style="color:#0699fa">0</span> <span class="appbox-units" style="color:#0699fa">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">SOLAR</div>
-            <div><span class="appbox-value" id="total_solar_kwh" style="color:#dccc1f">0</span> <span class="appbox-units" style="color:#dccc1f">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">DIRECT</div>
-            <div style="padding-bottom:5px"><span class="appbox-value" id="total_use_direct_prc" style="color:#2ed52e">0</span></div>
-            <div><span class="appbox-units" id="total_use_direct_kwh" style="color:#2ed52e">0</span> <span class="appbox-units" style="color:#2ed52e">kWh</span></div>
-        </td>
-        
-        <td class="appbox">
-            <div class="appbox-title">GRID</div>
-            <div style="padding-bottom:5px"><span class="appbox-value" id="total_use_via_store_prc" style="color:#d52e2e">0</span></div>
-            <div><span class="appbox-units" id="total_use_via_store_kwh" style="color:#d52e2e">0</span> <span class="appbox-units" style="color:#d52e2e">kWh</span></div>
-        </td>
-    </tr>
-    </table>
-
-
-    <!--
-    <br><br>
-    <div id="mysolarpv_bargraph_bound" style="width:100%; height:500px;">
-        <div id="mysolarpv_bargraph" style="height:500px"></div>
+
+    <!-- Modal -->
+    <div class="modal fade type-danger" id="myModal" role="dialog">
+      <div class="modal-dialog">
+
+        <!-- Modal content-->
+        <div class="modal-content">
+          <div class="modal-header  modal-header-danger">
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+            <h4 class="modal-title i18n">Missing feeds</h4>
+          </div>
+          <div class="modal-body type-danger">
+            <p> <span class="i18n">The Solar PV dashboard needs specific feeds </span>
+                <span>solar_power, house_power</span>
+                <span class = "i18n">they are inexistant in your feeds collection</span>
+                <span class = "i18n">no settings saved</span>
+            .</p>
+
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default i18n" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+
+      </div>
     </div>
-    
-    -->
 
-</div>
+
 </div>
diff --git a/mysolarpv/mysolarpv.js b/mysolarpv/mysolarpv.js
index 86d1cb5c..33befcf0 100644
--- a/mysolarpv/mysolarpv.js
+++ b/mysolarpv/mysolarpv.js
@@ -1,20 +1,21 @@
-var datastore = {};
+/*jslint maxerr: 1000 */
 
 var app_mysolarpv = {
+    datastore : {},
 
     solarpower: false,
     housepower: false,
-    
+
     live: false,
     show_balance_line: 0,
-    
+
     house_data: [],
     solar_data: [],
     wind_data: [],
-      
+
     reload: true,
     autoupdate: true,
-    
+
     lastupdate: 0,
 
     // Include required javascript libraries
@@ -27,536 +28,549 @@ var app_mysolarpv = {
     ],
 
     // App start function
-    init: function()
-    {
-        if (app.config["mysolarpv"]!=undefined) {
+    init: function () {
+        var feeds, z, houseok, solarok, name, timeWindow, placeholder, solarfeedids, housefeedids;
+        if (app.config["mysolarpv"] !== undefined) {
             this.solarpower = app.config["mysolarpv"].solarpower;
             this.housepower = app.config["mysolarpv"].housepower;
-            
-            if (typeof(this.solarpower)=="string") this.solarpower = this.solarpower.split(",");
-            if (typeof(this.housepower)=="string") this.housepower = this.housepower.split(",");
+
+            if (typeof (this.solarpower) === "string") { this.solarpower = this.solarpower.split(","); }
+            if (typeof (this.housepower) === "string") { this.housepower = this.housepower.split(","); }
         } else {
             // Auto scan by feed names
-            var feeds = app_mysolarpv.getfeedsbyid();
-            for (z in feeds)
-            {
-                var name = feeds[z].name.toLowerCase();
-                
-                if (name.indexOf("house_power")!=-1) {
+            feeds = app_mysolarpv.getfeedsbyid();
+            for (z in feeds) {
+                name = feeds[z].name.toLowerCase();
+
+                if (name.indexOf("house_power") !== -1) {
                     app_mysolarpv.housepower = [z];
+                    houseok = true;
                 }
-                
-                if (name.indexOf("solar_power")!=-1) {
+
+                if (name.indexOf("solar_power") !== -1) {
                     app_mysolarpv.solarpower = [z];
+                    solarok = true;
                 }
             }
         }
-        
-        var timeWindow = (3600000*6.0*1);
+
+        timeWindow = (3600000 * 6.0);
         view.end = +new Date;
         view.start = view.end - timeWindow;
-        
-        var placeholder = $('#mysolarpv_placeholder');
-        
-        $("#mysolarpv_zoomout").click(function () {view.zoomout(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw();});
-        $("#mysolarpv_zoomin").click(function () {view.zoomin(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw();});
-        $('#mysolarpv_right').click(function () {view.panright(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw();});
-        $('#mysolarpv_left').click(function () {view.panleft(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw();});
+
+        placeholder = $('#mysolarpv_placeholder');
+
+        $("#mysolarpv_zoomout").click(function () {view.zoomout(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw(); });
+        $("#mysolarpv_zoomin").click(function () {view.zoomin(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw(); });
+        $('#mysolarpv_right').click(function () {view.panright(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw(); });
+        $('#mysolarpv_left').click(function () {view.panleft(); app_mysolarpv.reload = true; app_mysolarpv.autoupdate = false; app_mysolarpv.draw(); });
         $('.time').click(function () {
-            view.timewindow($(this).attr("time")/24.0); 
-            app_mysolarpv.reload = true; 
+            view.timewindow($(this).attr("time") / 24.0);
+            app_mysolarpv.reload = true;
             app_mysolarpv.autoupdate = true;
             app_mysolarpv.draw();
         });
-        
-        $("#balanceline").click(function () { 
-            if ($(this).html()=="Show balance") {
-                app_mysolarpv.show_balance_line = 1;
-                app_mysolarpv.draw();
-                $(this).html("Hide balance");
+
+        $("#balanceline").click(function () {
+            if ($("#balanceshown").css('display') !== 'none') {
+                this.show_balance_line = 1;
+                $("#balanceshown").hide();
+                $("#balancehidden").show();
             } else {
-                app_mysolarpv.show_balance_line = 0;
-                app_mysolarpv.draw();
-                $(this).html("Show balance");
+                this.show_balance_line = 0;
+                $("#balanceshown").show();
+                $("#balancehidden").hide();
             }
+            app_mysolarpv.draw();
         });
-        
+
         placeholder.bind("plotselected", function (event, ranges) {
             view.start = ranges.xaxis.from;
             view.end = ranges.xaxis.to;
 
             app_mysolarpv.autoupdate = false;
-            app_mysolarpv.reload = true; 
-            
+            app_mysolarpv.reload = true;
+
             var now = +new Date();
-            if (Math.abs(view.end-now)<30000) {
+            if (Math.abs(view.end - now) < 30000) {
                 app_mysolarpv.autoupdate = true;
             }
 
             app_mysolarpv.draw();
         });
 
-        $("#mysolarpv-openconfig").click(function(){
+        $("#mysolarpv-openconfig").click(function () {
             $("#mysolarpv-solarpower").val(app_mysolarpv.solarpower);
             $("#mysolarpv-housepower").val(app_mysolarpv.housepower);
             $("#mysolarpv-config").show();
         });
-        
-        $("#mysolarpv-configsave").click(function() {
+
+        $("#mysolarpv-configsave").click(function () {
             $("#mysolarpv-config").hide();
-            
-            var solarfeedids = $("#mysolarpv-solarpower").val().split(",");
-            var housefeedids = $("#mysolarpv-housepower").val().split(",");
+            solarfeedids = $("#mysolarpv-solarpower").val().split(",");
+            housefeedids = $("#mysolarpv-housepower").val().split(",");
             app_mysolarpv.solarpower = solarfeedids;
             app_mysolarpv.housepower = housefeedids;
-            
+
             // Save config to db
-            var config = app.config;
-            if (config==false) config = {};
+            var config = (app.config === undefined) ? {} : app.config;
             config["mysolarpv"] = {
                 "solarpower": app_mysolarpv.solarpower,
                 "housepower": app_mysolarpv.housepower
             };
-            app.setconfig(config);
+            if ((app_mysolarpv.solarpower[0] > 1) && (app_mysolarpv.housepower[0] > 1)) {
+                app.setconfig(config);
+            } else {
+                $("#myModal").modal("show")
+            }
+
             app_mysolarpv.reload = true;
         });
- 
-        $(window).resize(function(){
+
+        $(window).resize(function () {
             app_mysolarpv.resize();
-            app_mysolarpv.draw();
+            if (houseok && solarok) {
+                app_mysolarpv.draw();
+            }
         });
-        
+
         /*
         $(document).on("socketio_msg",function( event, msg ) {
             var use_now = 1*nodes['6'].values[1] + 1*nodes['6'].values[2];
             var solar_now = 1*nodes['10'].values[2];
             if (solar_now<10) solar_now = 0;
             var totalgen = app_mysolarpv.windnow+solar_now;
-            
+
             var balance = totalgen - use_now;
-            
+
             $("#usenow").html(use_now);
             $("#solarnow").html(solar_now);
             $("#gridwindnow").html(Math.round(app_mysolarpv.windnow));
             $("#totalgen").html(Math.round(totalgen));
-            
+
             $("#chargerate").html(Math.round(balance));
-        });   
+        });
         */
     },
 
-    show: function() 
-    {
+    show: function () {
         // this.reload = true;
         this.livefn();
-        this.live = setInterval(this.livefn,5000);
-        
-        $("body").css("background-color","#222");
-        
-        $(window).ready(function(){
-            $("#footer").css('background-color','#181818');
-            $("#footer").css('color','#999');
+        this.live = setInterval(this.livefn, 5000);
+
+        $("body").css("background-color", "#222");
+
+        $(window).ready(function () {
+            $("#footer").css('background-color', '#181818');
+            $("#footer").css('color', '#999');
         });
 
         app_mysolarpv.resize();
         app_mysolarpv.draw();
         app_mysolarpv.draw_bargraph();
     },
-    
-    resize: function() 
-    {
-        var top_offset = 0;
-        var placeholder_bound = $('#mysolarpv_placeholder_bound');
-        var placeholder = $('#mysolarpv_placeholder');
 
-        var width = placeholder_bound.width();
-        var height = $(window).height()*0.55;
+    resize: function () {
+        var top_offset = 0,
+            placeholder_bound = $('#mysolarpv_placeholder_bound'),
+            placeholder = $('#mysolarpv_placeholder'),
+            width = placeholder_bound.width(),
+            height = $(window).height() * 0.55;
 
-        if (height>width) height = width;
+        if (height > width) {height = width; }
 
         placeholder.width(width);
         placeholder_bound.height(height);
-        placeholder.height(height-top_offset);
-        
-        if (width<=500) {
-            $(".electric-title").css("font-size","16px");
-            $(".power-value").css("font-size","32px");
-            $(".power-value").css("padding-top","12px");
-            $(".power-value").css("padding-bottom","8px");
-            $(".midtext").css("font-size","14px");
+        placeholder.height(height - top_offset);
+
+        if (width <= 500) {
+            $(".electric-title").css("font-size", "16px");
+            $(".power-value").css("font-size", "32px");
+            $(".power-value").css("padding-top", "12px");
+            $(".power-value").css("padding-bottom", "8px");
+            $(".midtext").css("font-size", "14px");
             $("#balanceline").hide();
             $("#vistimeW").hide();
             $("#vistimeM").hide();
             $("#vistimeY").hide();
-        } else if (width<=724) {
-            $(".electric-title").css("font-size","18px");
-            $(".power-value").css("font-size","52px");
-            $(".power-value").css("padding-top","22px");
-            $(".power-value").css("padding-bottom","12px");
-            $(".midtext").css("font-size","18px");
+        } else if (width <= 724) {
+            $(".electric-title").css("font-size", "18px");
+            $(".power-value").css("font-size", "52px");
+            $(".power-value").css("padding-top", "22px");
+            $(".power-value").css("padding-bottom", "12px");
+            $(".midtext").css("font-size", "18px");
             $("#balanceline").show();
             $("#vistimeW").show();
             $("#vistimeM").show();
             $("#vistimeY").show();
         } else {
-            $(".electric-title").css("font-size","22px");
-            $(".power-value").css("font-size","85px");
-            $(".power-value").css("padding-top","40px");
-            $(".power-value").css("padding-bottom","20px");
-            $(".midtext").css("font-size","20px");
+            $(".electric-title").css("font-size", "22px");
+            $(".power-value").css("font-size", "85px");
+            $(".power-value").css("padding-top", "40px");
+            $(".power-value").css("padding-bottom", "20px");
+            $(".midtext").css("font-size", "20px");
             $("#balanceline").show();
             $("#vistimeW").show();
             $("#vistimeM").show();
             $("#vistimeY").show();
         }
     },
-    
-    hide: function() 
-    {
+
+    hide: function () {
         clearInterval(this.live);
     },
-    
-    livefn: function()
-    {
+
+    livefn: function () {
         // Check if the updater ran in the last 60s if it did not the app was sleeping
         // and so the data needs a full reload.
-        var now = +new Date();
-        if ((now-app_mysolarpv.lastupdate)>60000) app_mysolarpv.reload = true;
+        var now = +new Date(),
+            feeds,
+            use_now,
+            i,
+            solar_now,
+            feedid,
+            timerange;
+        if ((now - app_mysolarpv.lastupdate) > 60000) {app_mysolarpv.reload = true; }
         app_mysolarpv.lastupdate = now;
-        
+
         // Fetch latest feed data
-        var feeds = app_mysolarpv.getfeedsbyid();
-        
+        feeds = app_mysolarpv.getfeedsbyid();
+
         // Consumption feeds
-        var use_now = 0;
-        for (var i in app_mysolarpv.housepower) {
-            var feedid = app_mysolarpv.housepower[i];
-            if (feeds[feedid]!=undefined) {
+        use_now = 0;
+        for (i in app_mysolarpv.housepower) {
+            feedid = app_mysolarpv.housepower[i];
+            if (feeds[feedid] !== undefined) {
                 use_now += parseInt(feeds[feedid].value);
                 if (app_mysolarpv.autoupdate) {
-                    app_mysolarpv.timeseries_append("f"+feedid,feeds[feedid].time,parseInt(feeds[feedid].value));
-                    app_mysolarpv.timeseries_trim_start("f"+feedid,view.start*0.001);
+                    app_mysolarpv.timeseries_append("f" + feedid, feeds[feedid].time, parseInt(feeds[feedid].value));
+                    app_mysolarpv.timeseries_trim_start("f" + feedid, view.start * 0.001);
                 }
             }
         }
-        
+
         // Solar feeds
-        var solar_now = 0;
-        for (var i in app_mysolarpv.solarpower) {
-            var feedid = app_mysolarpv.solarpower[i];
-            if (feeds[feedid]!=undefined) {
+        solar_now = 0;
+        for (i in app_mysolarpv.solarpower) {
+            feedid = app_mysolarpv.solarpower[i];
+            if (feeds[feedid] !== undefined) {
                 solar_now += parseInt(feeds[feedid].value);
                 if (app_mysolarpv.autoupdate) {
-                    console.log(feeds[feedid].time+" "+feeds[feedid].value);
-                    app_mysolarpv.timeseries_append("f"+feedid,feeds[feedid].time,parseInt(feeds[feedid].value));
-                    app_mysolarpv.timeseries_trim_start("f"+feedid,view.start*0.001);
+                    //console.log(feeds[feedid].time+" " + feeds[feedid].value);
+                    app_mysolarpv.timeseries_append("f" + feedid, feeds[feedid].time, parseInt(feeds[feedid].value));
+                    app_mysolarpv.timeseries_trim_start("f" + feedid,view.start * 0.001);
                 }
             }
         }
-        
+
         // Advance view
         if (app_mysolarpv.autoupdate) {
-            var timerange = view.end - view.start;
+            timerange = view.end - view.start;
             view.end = now;
             view.start = view.end - timerange;
         }
-        
-        console.log("vs-ve: "+view.start+" "+view.end);
-        
+
+        //console.log("vs-ve: " + view.start+" " + view.end);
+
         // Lower limit for solar
-        if (solar_now<10) solar_now = 0;
-        
-        var balance = solar_now - use_now;
-        
-        if (balance==0) {
-            $("#balance-label").html("PERFECT BALANCE");
+        // for presentation tests only
+        //solar_now = parseInt((Math.round(Math.random(100) * 10000)) / 10)
+        //use_now = parseInt((Math.round(Math.random(100) * 10000)) / 10)
+        solar_now = (solar_now < 10) ? 0 : solar_now;
+        var balance = Math.round(solar_now - use_now);
+        //This code is made independant of presentation
+        if (balance === 0) {
+            $("#bal-lbl-zer").show();
+            $("#bal-lbl-imp").hide();
+            $("#bal-lbl-exp").hide();
             $("#balance").html("");
         }
-        
-        if (balance>0) {
-            $("#balance-label").html("EXPORTING");
-            $("#balance").html("<span style='color:#2ed52e'><b>"+Math.round(Math.abs(balance))+"W</b></span>");
+
+        if (balance > 0) {
+            $("#bal-lbl-zer").hide();
+            $("#bal-lbl-imp").hide();
+            $("#bal-lbl-exp").show();
+            $("#balance").css("color", "green");
+            $("#balance").html("<span><b>" + Math.abs(balance) + "&nbspW</b></span>");
+            //console.log("<<<<<<<<<<<export"+" | Solar_now : "+ solar_now+" | Use_now  : "+use_now+" | balance : "+balance);
         }
-        
-        if (balance<0) {
-            $("#balance-label").html("IMPORTING");
-            $("#balance").html("<span style='color:#d52e2e'><b>"+Math.round(Math.abs(balance))+"W</b></span>");
+
+        if (balance < 0) {
+            $("#bal-lbl-zer").hide();
+            $("#bal-lbl-imp").show();
+            $("#bal-lbl-exp").hide();
+            $("#balance").css("color", "red");
+            $("#balance").html("<span><b>" + Math.abs(balance) + "&nbspW</b></span>");
+            //console.log("<<<<<<<<<<<import"+" | Solar_now : "+ solar_now+" | Use_now  : "+use_now+" | balance : "+balance);
         }
-        
+
         $("#solarnow").html(solar_now);
         $("#usenow").html(use_now);
-        
+
         app_mysolarpv.draw();
-        
+
     },
-    
-    draw: function ()
-    {
-        var dp = 1;
-        var units = "C";
-        var fill = false;
-        var plotColour = 0;
-        
-        var options = {
-            lines: { fill: fill },
-            xaxis: { mode: "time", timezone: "browser", min: view.start, max: view.end},
-            yaxes: [{ min: 0 }],
-            grid: {hoverable: true, clickable: true},
-            selection: { mode: "x" }
-        }
-        
-        var npoints = 1500;
-        interval = Math.round(((view.end - view.start)/npoints)/1000);
-        if (interval<1) interval = 1;
 
-        var npoints = parseInt((view.end-view.start)/(interval*1000));
-        
+    draw: function () {
+        var tmpsolar, balance, store_change, time, series= [],
+            feedid, i, t, z, store = 0, use = 0, mysolar = 0,
+            total_solar_kwh = 0, total_use_kwh = 0, total_use_direct_kwh = 0, tmpuse = null,
+            datastart = view.start,
+            fill = false,
+            use_data = [], gen_data = [], bal_data = [], store_data = [],
+
+            options = {
+                lines: { fill: fill },
+                xaxis: { mode: "time", timezone: "browser", min: view.start, max: view.end},
+                yaxes: [{ min: 0 }],
+                grid: {hoverable: true, clickable: true},
+                selection: { mode: "x" }
+            },
+            npoints = 1500,
+            interval = Math.round(((view.end - view.start) / npoints) / 1000);
+        interval =  (interval < 1) ? 1 : interval;
+
+        npoints = parseInt((view.end - view.start) / (interval * 1000));
+
         // -------------------------------------------------------------------------------------------------------
         // LOAD DATA ON INIT OR RELOAD
         // -------------------------------------------------------------------------------------------------------
         if (app_mysolarpv.reload) {
             app_mysolarpv.reload = false;
-            view.start = 1000*Math.floor((view.start/1000)/interval)*interval;
-            view.end = 1000*Math.ceil((view.end/1000)/interval)*interval;
-            
-            for (var i in app_mysolarpv.solarpower) {
-                var feedid = app_mysolarpv.solarpower[i];
-                app_mysolarpv.timeseries_load("f"+feedid,this.getdata(feedid,view.start,view.end,interval));
+            view.start = 1000 * Math.floor((view.start / 1000) / interval) * interval;
+            view.end = 1000 * Math.ceil((view.end / 1000) / interval) * interval;
+
+            for (i in app_mysolarpv.solarpower) {
+                feedid = app_mysolarpv.solarpower[i];
+                app_mysolarpv.timeseries_load("f" + feedid, this.getdata(feedid, view.start, view.end, interval));
+            }
+
+            for (i in app_mysolarpv.housepower) {
+                feedid = app_mysolarpv.housepower[i];
+                app_mysolarpv.timeseries_load("f" + feedid, this.getdata(feedid, view.start, view.end, interval));
             }
-            
-            for (var i in app_mysolarpv.housepower) {
-                var feedid = app_mysolarpv.housepower[i];
-                app_mysolarpv.timeseries_load("f"+feedid,this.getdata(feedid,view.start,view.end,interval));
-            }                
         }
         // -------------------------------------------------------------------------------------------------------
-        
-        var use_data = [];
-        var gen_data = [];
-        var bal_data = [];
-        var store_data = [];
-        
-        var t = 0;
-        var store = 0;
-        var use = 0;
-        var mysolar = 0;
-        
-        var total_solar_kwh = 0;
-        var total_use_kwh = 0;
-        var total_use_direct_kwh = 0;
-        
-        var datastart = view.start;
-        for (var z in datastore) {
-            datastart = datastore[z].data[0][0];
-            npoints = datastore[z].data.length;
+
+        for (z in app_mysolarpv.datastore) {
+            //console.log(z+"    datastore:  "+app_mysolarpv.datastore)
+            datastart = this.datastore[z].data[0][0];
+            npoints = this.datastore[z].data.length;
         }
-        
-        for (var z=0; z<npoints; z++) {
+
+        for (z = 0; z < npoints; z++) {
 
             // -------------------------------------------------------------------------------------------------------
             // Get solar or use values
             // -------------------------------------------------------------------------------------------------------
-            var tmpsolar = null;
-            for (var i in app_mysolarpv.solarpower) {
-                var feedid = app_mysolarpv.solarpower[i];
-                if (datastore["f"+feedid].data[z]!=undefined && datastore["f"+feedid].data[z][1]!=null) {
-                    if (tmpsolar==null) tmpsolar = 0;
-                    tmpsolar += datastore["f"+feedid].data[z][1];   
+            tmpsolar = null;
+            for (i in app_mysolarpv.solarpower) {
+                feedid = app_mysolarpv.solarpower[i];
+                if (this.datastore["f" + feedid].data[z] !== undefined && this.datastore["f" + feedid].data[z][1] !== null) {
+                    //if (tmpsolar === null) tmpsolar = 0;
+                    tmpsolar = (tmpsolar === null) ?  0 : tmpsolar;
+                    tmpsolar += this.datastore["f" + feedid].data[z][1];
                 }
             }
-            if (tmpsolar!=null) mysolar = tmpsolar;
-            
-            var tmpuse = null;
-            for (var i in app_mysolarpv.housepower) {
-                var feedid = app_mysolarpv.housepower[i];
-                if (datastore["f"+feedid].data[z]!=undefined && datastore["f"+feedid].data[z][1]!=null) {
-                    if (tmpuse==null) tmpuse = 0;
-                    tmpuse += datastore["f"+feedid].data[z][1];   
+            //if (tmpsolar !== null) mysolar = tmpsolar;
+            mysolar = (tmpsolar === null) ?  0 : tmpsolar;
+
+            for (i in app_mysolarpv.housepower) {
+                feedid = app_mysolarpv.housepower[i];
+                if (this.datastore["f" + feedid].data[z] !== undefined && this.datastore["f" + feedid].data[z][1] !== null) {
+                    //if (tmpuse === null) tmpuse = 0;
+                    tmpuse = (tmpuse === null) ? 0 : tmpuse;
+                    tmpuse += this.datastore["f" + feedid].data[z][1];
                 }
             }
-            if (tmpuse!=null) use = tmpuse;
-            
+            tmpuse = (tmpuse !== null) ? tmpuse : null;
+
             // -------------------------------------------------------------------------------------------------------
             // Supply / demand balance calculation
             // -------------------------------------------------------------------------------------------------------
-            if (mysolar<10) mysolar = 0;
-            var balance = mysolar - use;
-            
-            if (balance>=0) total_use_direct_kwh += (use*interval)/(1000*3600);
-            if (balance<0) total_use_direct_kwh += (mysolar*interval)/(1000*3600);
-            
-            var store_change = (balance * interval) / (1000*3600);
+            //if (mysolar < 10) mysolar = 0;
+            mysolar = (mysolar < 10) ? 0 : mysolar;
+            balance = mysolar - use;
+
+            if (balance >= 0) {total_use_direct_kwh += (use * interval) / (1000 * 3600); }
+            if (balance < 0) {total_use_direct_kwh += (mysolar * interval) / (1000 * 3600); }
+
+            store_change = (balance * interval) / (1000 * 3600);
             store += store_change;
-            
-            total_solar_kwh += (mysolar*interval)/(1000*3600);
-            total_use_kwh += (use*interval)/(1000*3600);
-            
-            var time = datastart + (1000 * interval * z);
-            use_data.push([time,use]);
-            gen_data.push([time,mysolar]);
-            bal_data.push([time,balance]);
-            store_data.push([time,store]);
-            
+
+            total_solar_kwh += (mysolar * interval) / (1000 * 3600);
+            total_use_kwh += (use * interval) / (1000 * 3600);
+
+            time = datastart + (1000 * interval * z);
+            use_data.push([time, use]);
+            gen_data.push([time, mysolar]);
+            bal_data.push([time, balance]);
+            store_data.push([time, store]);
+
             t += interval;
         }
         $("#total_solar_kwh").html(total_solar_kwh.toFixed(1));
-        $("#total_use_kwh").html((total_use_kwh).toFixed(1));
-        
-        $("#total_use_direct_prc").html(Math.round(100*total_use_direct_kwh/total_use_kwh)+"%");
-        $("#total_use_via_store_prc").html(Math.round(100*(1-(total_use_direct_kwh/total_use_kwh)))+"%");
+        $("#total_use_kwh").html(total_use_kwh.toFixed(1));
+
+        $("#total_use_direct_prc").html(Math.round(100 * total_use_direct_kwh / total_use_kwh) + "%");
+        $("#total_use_via_store_prc").html(Math.round(100 * (1 - (total_use_direct_kwh / total_use_kwh))) + "%");
 
-        $("#total_use_direct_kwh").html((total_use_direct_kwh).toFixed(1));
-        $("#total_use_via_store_kwh").html((total_use_kwh-total_use_direct_kwh).toFixed(1));        
+        $("#total_use_direct_kwh").html(total_use_direct_kwh.toFixed(1));
+        $("#total_use_via_store_kwh").html(total_use_kwh - total_use_direct_kwh.toFixed(1));
 
         options.xaxis.min = view.start;
         options.xaxis.max = view.end;
-        
-        var series = [
-            {data:gen_data,color: "#dccc1f", lines:{lineWidth:0, fill:1.0}},
-            {data:use_data,color: "#0699fa",lines:{lineWidth:0, fill:0.8}}
+
+        series = [
+            {data: gen_data, color: "#dccc1f", lines: {lineWidth: 0, fill: 1.0}},
+            {data: use_data, color: "#0699fa", lines: {lineWidth: 0, fill: 0.8}}
         ];
-        
-        if (app_mysolarpv.show_balance_line) series.push({data:store_data,yaxis:2, color: "#888"});
-        
-        $.plot($('#mysolarpv_placeholder'),series,options);
+
+        if (app_mysolarpv.show_balance_line) {series.push({data: store_data, yaxis: 2, color: "#888"}); }
+
+        $.plot($('#mysolarpv_placeholder'), series, options);
     },
-    
-    draw_bargraph: function() {
+
+    draw_bargraph: function () {
         /*
         var timeWindow = (3600000*24.0*365);
         var end = +new Date;
         var start = end - timeWindow;
         var interval = 3600*24;
-        
+
         var kwh_data = this.getdata(69211,start,end,interval);
         var kwhd_data = [];
-        
+
         for (var day=1; day<kwh_data.length; day++)
         {
             var kwh = kwh_data[day][1] - kwh_data[day-1][1];
             if (kwh_data[day][1]==null || kwh_data[day-1][1]==null) kwh = 0;
             kwhd_data.push([kwh_data[day][0],kwh]);
         }
-    
+
         var options = {
             bars: { show: true, align: "center", barWidth: 0.75*3600*24*1000, fill: true},
             xaxis: { mode: "time", timezone: "browser"},
             grid: {hoverable: true, clickable: true},
             selection: { mode: "x" }
         }
-        
+
         var series = [];
-        
+
         series.push({
             data: kwhd_data,
             color: "#dccc1f",
             lines: {lineWidth:0, fill:1.0}
         });
-        
+
         $.plot($('#mysolarpv_bargraph'),series,options);
         */
     },
-    
-    getfeedsbyid: function()
-    {
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "?apikey="+apikey;
-        
-        var feeds = {};
-        $.ajax({                                      
-            url: path+"feed/list.json"+apikeystr,
+
+    getfeedsbyid: function () {
+        var z, byid = {}, feeds = {},
+            apikeystr = (apikey !== "") ? "?apikey=" + apikey : "";
+
+        $.ajax({
+            url: path + "feed/list.json" + apikeystr,
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { feeds = data_in; } 
+            async: false,
+            success: function (data_in) { feeds = data_in; }
         });
-        
-        var byid = {};
-        for (z in feeds) byid[feeds[z].id] = feeds[z];
+
+        for (z in feeds) {byid[feeds[z].id] = feeds[z]; }
         return byid;
     },
-    
-    getdata: function(id,start,end,interval)
-    {
-        var apikeystr = "";
-        if (apikey!="") apikeystr = "?apikey="+apikey;
-        
+
+    getdata: function (id, start, end, interval) {
+        var apikeystr = (apikey !== "") ? "?apikey=" + apikey : "";
+
         var data = [];
-        $.ajax({                                      
-            url: path+"feed/data.json"+apikeystr,                         
-            data: "id="+id+"&start="+start+"&end="+end+"&interval="+interval+"&skipmissing=0&limitinterval=0",
+        $.ajax({
+            url: path + "feed/data.json" + apikeystr,
+            data: "id=" + id + "&start=" + start + "&end=" + end + "&interval=" + interval + "&skipmissing=0&limitinterval=0",
             dataType: 'json',
-            async: false,                      
-            success: function(data_in) { data = data_in; } 
+            async: false,
+            success: function (data_in) { data = data_in; }
         });
         return data;
     },
-    
+
     // -------------------------------------------------------------------------------------------------------
     // IN BROWSER TIMESERIES DATA STORE
     // with features for appending a new datapoint and triming the old data in order to create a moving view
     // -------------------------------------------------------------------------------------------------------
-    
-    timeseries_load: function (name,data)
-    {
-        datastore[name] = {};
-        datastore[name].data = data;
-        datastore[name].start = datastore[name].data[0][0] * 0.001;
-        datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0])*0.001;
+
+    timeseries_load: function (name, data) {
+        if (data === '') {return; }
+        this.datastore[name] = {};
+        this.datastore[name].data = data;
+        console.log (this.datastore);
+        /*
+        if (this.datastore[name] === undefined) {return; }
+        this.datastore[name].start = this.datastore[name].data[0][0] * 0.001;
+        this.datastore[name].interval = (this.datastore[name].data[1][0] - this.datastore[name].data[0][0]) * 0.001;
+        */
     },
-    
-    timeseries_append: function (name,time,value)
-    {
-        if (datastore[name]==undefined) return false;
-        
-        var interval = datastore[name].interval;
-        var start = datastore[name].start;
-        
+
+    timeseries_append: function (name, time, value) {
+        if (this.datastore[name] === undefined) {return false; }
+
+        var interval = this.datastore[name].interval,
+            start = this.datastore[name].start,
+            pos,
+            last_pos,
+            npadding,
+            padd,
+            padd_time;
+
         // 1. align to timeseries interval
-        time = Math.floor(time/interval)*interval;
+        time = Math.floor(time / interval) * interval;
         // 2. calculate new data point position
-        var pos = (time - start) / interval;
+        pos = (time - start) / interval;
         // 3. get last position from data length
-        var last_pos = datastore[name].data.length - 1;
-        
+        last_pos = this.datastore[name].data.length - 1;
+
         // if the datapoint is newer than the last:
-        if (pos > last_pos)
-        {
-            var npadding = (pos - last_pos)-1;
-            
+        if (pos > last_pos) {
+            npadding = (pos - last_pos) - 1;
+
             // padding
-            if (npadding>0 && npadding<12) {
-                for (var padd = 0; padd<npadding; padd++)
-                {
-                    var padd_time = start + ((last_pos+padd+1) * interval);
-                    datastore[name].data.push([padd_time*1000,null]);
+            if (npadding > 0 && npadding < 12) {
+                for (padd = 0; padd < npadding; padd++) {
+                    padd_time = start + ((last_pos + padd + 1) * interval);
+                    this.datastore[name].data.push([padd_time * 1000, null]);
                 }
             }
-            
+
             // insert datapoint
-            datastore[name].data.push([time*1000,value]);
+            this.datastore[name].data.push([time * 1000, value]);
         }
     },
-    
-    timeseries_trim_start: function (name,newstart)
-    {
-        if (datastore[name]==undefined) return false;
-        
-        var interval = datastore[name].interval;
-        var start = datastore[name].start;
-        
-        newstart = Math.floor(newstart/interval)*interval;
-        var pos = (newstart - start) / interval;
-        var tmpdata = [];
-        
-        if (pos>=0) {
-            for (var p=pos; p<datastore[name].data.length; p++) {
-                var t = datastore[name].data[p][0];
-                var v = datastore[name].data[p][1];
-                tmpdata.push([t,v]);
+
+    timeseries_trim_start: function (name, newstart) {
+        if (this.datastore[name] === undefined) {return false; }
+
+        var interval = this.datastore[name].interval,
+            start = this.datastore[name].start,
+            pos,
+            tmpdata = [],
+            p,
+            t,
+            v;
+
+        newstart = Math.floor(newstart / interval) * interval;
+        pos = (newstart - start) / interval;
+
+        if (pos >= 0) {
+            for (p = pos; p < this.datastore[name].data.length; p++) {
+                t = this.datastore[name].data[p][0];
+                v = this.datastore[name].data[p][1];
+                tmpdata.push([t, v]);
             }
-            datastore[name].data = tmpdata;
-            datastore[name].start = datastore[name].data[0][0] * 0.001;
-            datastore[name].interval = (datastore[name].data[1][0] - datastore[name].data[0][0])*0.001;
+            this.datastore[name].data = tmpdata;
+            this.datastore[name].start = this.datastore[name].data[0][0] * 0.001;
+            this.datastore[name].interval = (this.datastore[name].data[1][0] - this.datastore[name].data[0][0]) * 0.001;
         }
     }
-}
+};
diff --git a/style.css b/style.css
index 0e81fd10..7ea11e5a 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,11 @@
+.graph1{
+    width:100%;
+    height:250px;
+}
+.graph2{
+    width:100%;
+    height:280px;
+}
 .page {
     max-width: 1170px;
     height: auto;
@@ -8,7 +16,7 @@
     margin-top:0px;
 }
 
-h3 { 
+h3 {
     color: #0699fa;
     margin:0px;
     padding:0px;
@@ -21,7 +29,22 @@ hr {
     margin-top: 6px;
     margin-bottom: 6px;
 }
-
+.electric-head{
+    height:20px;
+    border-bottom:1px solid #333;
+    padding:8px;
+}
+.icon-btn{
+    float:right;
+}
+.config-rem{
+    color:#888;
+    text-align:center;
+}
+.config-rem-right{
+    color:#888;
+    text-align:right;
+}
 .electric-title {
     font-weight:bold;
     font-size:22px;
@@ -30,23 +53,23 @@ hr {
 }
 
 .power-value {
-    font-weight:bold; 
-    font-size:100px; 
-    color:#0699fa; 
+    font-weight:bold;
+    font-size:100px;
+    color:#0699fa;
     padding-top:45px;
     padding-bottom:30px;
 }
 
 .kwh-value {
-    font-weight:normal; 
-    font-size:22px; 
-    color:#0699fa; 
+    font-weight:normal;
+    font-size:22px;
+    color:#0699fa;
     padding-top:15px;
 }
 
 .midtext {
-    font-weight:normal; 
-    font-size:22px; 
+    font-weight:normal;
+    font-size:22px;
     color:#0699fa;
     padding-top:2px;
     padding-bottom:2px;
@@ -74,3 +97,64 @@ input[type=text] {
 p {
     color:#aaa;
 }
+table {
+    width: 100%;
+    border: 0;
+}
+td {
+}
+
+.visnav {
+    margin-right:4px;
+    padding-left:8px;
+    padding-right:8px;
+    min-width:20px;
+    background-color:rgba(6,153,250,0.1);
+    line-height:28px;
+    float:left;
+    text-align:center;
+}
+.appbox {
+    width:25%;
+    text-align:center;
+    padding:10px;
+    vertical-align:top;
+
+}
+
+.appbox-title {
+    color: #aaa;
+    font-weight:bold;
+    font-size:20px;
+    padding-bottom:15px;
+}
+
+.appbox-value {
+    font-weight:bold;
+    font-size:36px;
+}
+
+.appbox-units {
+    font-weight:bold;
+    font-size:16px;
+}
+.blue{
+    color:#0699fa;
+    padding-bottom:5px;
+}
+.green{
+    color:#2ed52e;
+    padding-bottom:5px;
+}
+.green2{
+    color:#1ec51e;
+    padding-bottom:5px;
+}
+.yellow{
+    color:#dccc1f;
+    padding-bottom:5px;
+}
+.red{
+    color:#d52e2e;
+    padding-bottom:5px;
+}
diff --git a/tblerr.php b/tblerr.php
new file mode 100644
index 00000000..26c4518c
--- /dev/null
+++ b/tblerr.php
@@ -0,0 +1,57 @@
+<?php
+    $domain = "messages";
+    bindtextdomain($domain, dirname(__FILE__)."/locale");
+    global $session, $user;
+    $apikey = "";
+    $lang = substr($user->get_lang($session['userid']),0,2);
+    global $path, $user;
+    $apikey = $_GET['apikey'];
+    $lang = (isset($_GET["lang"])) ? strtolower(substr($_GET['lang'], 0, 2)) : 'en';
+    $modpath = $path."Modules/app"
+?>
+
+<script>
+    var path = "<?php print $path; ?>";
+    var modpath = "<?php print $modpath; ?>";
+    var apikey = "<?php print $apikey; ?>";
+    var lang = "<?php print $lang; ?>";
+    apikeystr = (apikey !== "") ? "&apikey="+apikey : "";
+</script>
+
+<link href="<?php echo $modpath; ?>/style.css" rel="stylesheet">
+<script type="text/javascript" src="<?php echo $modpath; ?>/app.js"></script>
+
+<div class="container">
+  <h2><?php echo _("Missing table error") ?></h2>
+  <!-- Trigger the modal with a button -->
+  <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal"><?php echo _("App module needs a configuration table") ?></button>
+
+  <!-- Modal -->
+  <div class="modal fade type-danger" id="myModal" role="dialog">
+    <div class="modal-dialog">
+
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header  modal-header-danger">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title"><?php echo _("App module needs a configuration table") ?></h4>
+        </div>
+        <div class="modal-body type-danger">
+          <p><?php echo _("Use the administration tools to update your database and add the missing table")?>.</p>
+          <a href= "admin/db" class="btn btn-primary" name="button"><?php echo _("Administration") ?></a>
+
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo _("Close") ?></button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+</div>
+<script>
+    $( document ).ready(function() {
+        $("#myModal").modal("show")
+    });
+</script>