1.0.5

git-svn-id: file:///root/webif/svn/humax/pkg/src/webif/trunk@1632 2a923420-c742-0410-a762-8d5b09965624

CONTROL/control

@@ -1,9 +1,9 @@
 Package: webif
 Priority: optional
 Section: web
-Version: 1.0.4
+Version: 1.0.5
 Architecture: mipsel
 Maintainer: af123@hummypkg.org.uk
-Depends: webif-channelicons(>=1.1.0),mongoose(>=3.0-9),jim(>=0.73-1),jim-oo,jim-sqlite3(>=0.73-1),jim-cgi(>=0.7),jim-binary,service-control(>=1.2),busybox(>=1.20.2-1),lsof,epg(>=1.0.13),hmt(>=1.1.14),ssmtp,anacron,trm(>=1.1),openssl-command,nicesplice,id3v2,file,rsvsync(>=1.0.2),webif-charts(>=1.2),stripts(>=1.2.1),smartmontools,tmenu(>=1.05),ffmpeg,id3v2
+Depends: webif-channelicons(>=1.1.2),mongoose(>=3.0-9),jim(>=0.73-1),jim-oo,jim-sqlite3(>=0.73-1),jim-cgi(>=0.7),jim-binary,service-control(>=1.2),busybox(>=1.20.2-1),lsof,epg(>=1.0.13),hmt(>=1.1.14),ssmtp,anacron,trm(>=1.1),openssl-command,nicesplice,id3v2,file,rsvsync(>=1.0.2),webif-charts(>=1.2),stripts(>=1.2.3),smartmontools,tmenu(>=1.05),ffmpeg,id3v2
 Suggests:
 Description: An evolving web interface for the Humax.

var/mongoose/html/browse/crop/execute.jim

@@ -49,6 +49,8 @@ set newname "$shname-[clock seconds]"
 puts "Renaming file group to $newname"
 ts renamegroup "$dir/$shname.ts" $newname
 exec /mod/bin/hmt "+setfilename=$newname" "$dir/$newname.hmt"
+# New nicesplice shrinks whilst cropping.
+exec /mod/bin/hmt "+shrunk" "$dir/$newname.hmt"
 
 set croptime [expr [expr [clock milliseconds] - $cropstart] / 1000.0]
 puts "Time taken: $croptime"

var/mongoose/html/browse/newdir.jim

@@ -15,6 +15,7 @@ foreach dir [glob -nocomplain "$root"] {
 	if {[file exists "$dir/.series"]} {
 		set fd [open "$dir/.series"]
 		set bytes [read $fd 8]
+		$fd close
 		set recs [unpack $bytes -uintle 0 32]
 		set plays [unpack $bytes -uintle 32 32]
 		set diff $($recs - $plays)

var/mongoose/html/diag/diag.jim

@@ -11,6 +11,9 @@ pkg loaddiagmeta
 set smv [system modversion 1]
 
 puts {
+<style>
+button.half { width: 48%; }
+</style>
 <script type=text/javascript src=/js/enadis.js></script>
 <script type=text/javascript src=script.js></script>
 
@@ -54,8 +57,8 @@ puts {
 
 <tr>
 <td colspan=2 align=center>
-<button id=runedit style="width: 48%">File Editor</button>
-<button id=dbinfo style="width: 48%">Database Browser</button>
+<button id=runedit class=half>File Editor</button>
+<button id=dbinfo class=half>Database Browser</button>
 </td>
 </tr>
 
@@ -63,26 +66,25 @@ puts {
 <td colspan=2 align=center>
 }
 if {[system model] eq "HDR"} {
-	puts { <button id=diskdiag style="width: 48%">Hard Disk</button> }
+	puts { <button id=diskdiag class=half>Hard Disk</button> }
 }
 puts {
-<button id=channelinfo style="width: 48%">Channel Information</button>
+<button id=channelinfo class=half>Channel Information</button>
 </td>
 </tr>
 
+<tr>
+<td colspan=2 align=center>
+<button id=dspace class=half>Disk Space</button>
 }
 
 if {[system model] eq "HDR"} {
-puts {
-<tr>
-<td colspan=2 align=center>
-<button id=dlna style="width: 48%">DLNA Server</button>
-</td>
-</tr>
-}
+	puts { <button id=dlna class=half>DLNA Server</button> }
 }
 
 puts {
+</td>
+</tr>
 
 <tr><td colspan=2 style="height: 10px"></td></tr>
 

var/mongoose/html/diag/dspace/index.jim

@@ -0,0 +1,96 @@
+#!/mod/bin/jimsh
+
+package require cgi
+source /mod/webif/lib/setup
+require system.class pretty_size
+
+header
+jqplugin easy-pie-chart
+
+puts {
+<link href=style.css rel=stylesheet type=text/css />
+<script type=text/javascript src=script.js></script>
+}
+
+set dustbin [system dustbin 1]
+set root [system mediaroot]
+set lroot [string length $root]
+
+proc hasnew {dir} {
+	if {![file exists "$dir/.series"]} { return 0 }
+	if {[catch {set fd [open "$dir/.series"]}]} { return 0 }
+	set bytes [read $fd 8]
+	$fd close
+	set recs [unpack $bytes -uintle 0 32]
+	set plays [unpack $bytes -uintle 32 32]
+	set diff $($recs - $plays)
+	if {$diff != 0} { return 1 }
+	return 0
+}
+
+set rsize 0
+
+proc gen {dir ddir {depth 0} {expand 0}} {
+	global root lroot rsize
+
+	if {[catch {set dsize [exec /mod/bin/busybox/du -s "$dir/"]} msg]} {
+		puts "Error, $dir, $msg"
+		return
+	}
+	lassign $dsize dsize
+	if {!$rsize} { set rsize $dsize }
+
+	set dlist {}
+	foreach entry [lsort [readdir -nocomplain $dir]] {
+		if {[string index $entry 0] eq "."} continue
+		if {![file isdirectory "$dir/$entry"]} continue
+		lappend dlist $entry
+	}
+
+	set img "/images/711_1_09_Media_Folder.png"
+	if {[hasnew $dir]} { set img "/img/Folder_New.png" }
+	if {[string first "/$::dustbin" $dir] > -1} {
+		set img "/img/Dustbin_Folder.png"
+	}
+
+	if {$expand > 0} { set class "open" } else { set class "closed" }
+	if {$expand > 1} { set timg "minus" } else { set timg "plus" }
+	if {![llength $dlist]} { set timg "join" }
+
+	set perc $($dsize * 100 / $rsize)
+
+	puts -nonewline "
+	    <div class=\"va $class\" style=\"padding-left: ${depth}em\">
+		<img border=0 class=\"va tlink\" src=/img/tree/$timg.png>
+		<span class=\"va fileperc\" data-percent=$perc>
+		    <img border=0 class=va src=\"$img\"></span>
+		<span class=filesize>
+		    ([pretty_size $($dsize * 1024)] - $perc%)
+		</span>
+		<span class=path>
+		    <a target=dspace_drill
+			href=\"/browse/?dir=[cgi_quote_url $dir]\">$ddir</a>
+		</span>
+	"
+
+	incr depth 2
+	incr expand -1
+
+	foreach subd $dlist { gen "$dir/$subd" $subd $depth $expand }
+
+	puts {</div>}
+}
+
+puts {
+<fieldset style="display: inline">
+<legend> Disk Utilisation </legend>
+}
+
+gen $root "/" 0 2
+
+puts {
+</fieldset>
+}
+
+footer
+

var/mongoose/html/diag/dspace/script.js

@@ -0,0 +1,40 @@
+
+$(function() {
+
+
+$('img.tlink').hover(
+    function() { $(this).css('cursor', 'pointer'); },
+    function() { $(this).css('cursor', 'auto'); }
+).on('click', function(e) {
+        e.preventDefault();
+
+	if ($(this).attr('src') == '/img/tree/plus.png')
+	{
+		$(this).attr('src', '/img/tree/minus.png');
+		$(this).parent().children('div')
+		    .slideDown('slow')
+		    .addClass('open')
+		    .removeClass('closed');
+	}
+	else
+	{
+		$(this).attr('src', '/img/tree/plus.png');
+		$(this).parent().children('div')
+		    .slideUp('slow')
+		    .addClass('closed')
+		    .removeClass('open');
+	}
+
+});
+
+$('span.fileperc').easyPieChart({
+	size: 20,
+	barColor: '#00ff00',
+	trackColor: '#A3A3C2',
+	lineWidth: 4,
+	scaleColor: false,
+	lineCap: 'butt'
+});
+
+});
+

var/mongoose/html/diag/dspace/style.css

@@ -0,0 +1 @@
+div.closed { display: none; }

var/mongoose/html/diag/script.js

@@ -78,6 +78,11 @@ $('#dlna').click(function(e) {
 	window.location = '/dlna/dlna.jim';
 });
 
+$('#dspace').click(function(e) {
+	e.preventDefault();
+	window.location = 'dspace/index.jim';
+});
+
 $('#reboot').click(function(e) {
 	e.preventDefault();
 	if (confirm('Are you sure you wish to perform a reboot now?'))

var/mongoose/html/img/tree/index.html

@@ -0,0 +1,32 @@
+<img src=blank.png>blank.png<br>
+<img src=folder.png>folder.png<br>
+<img src=folderopen.png>folderopen.png<br>
+<img src=index.html>index.html<br>
+<img src=join.png>join.png<br>
+<img src=joinbottom-down.png>joinbottom-down.png<br>
+<img src=joinbottom.png>joinbottom.png<br>
+<img src=leaf.png>leaf.png<br>
+<img src=line.png>line.png<br>
+<img src=minus.png>minus.png<br>
+<img src=minusbottom.png>minusbottom.png<br>
+<img src=minusonly.png>minusonly.png<br>
+<img src=minustop.png>minustop.png<br>
+<img src=nullonly.png>nullonly.png<br>
+<img src=plus.png>plus.png<br>
+<img src=plusbottom.png>plusbottom.png<br>
+<img src=plusonly.png>plusonly.png<br>
+<img src=plustop.png>plustop.png<br>
+<img src=rev-join.png>rev-join.png<br>
+<img src=rev-joinbottom-down.png>rev-joinbottom-down.png<br>
+<img src=rev-joinbottom.png>rev-joinbottom.png<br>
+<img src=rev-leaf.png>rev-leaf.png<br>
+<img src=rev-line.png>rev-line.png<br>
+<img src=rev-minus.png>rev-minus.png<br>
+<img src=rev-minusbottom.png>rev-minusbottom.png<br>
+<img src=rev-minusonly.png>rev-minusonly.png<br>
+<img src=rev-minustop.png>rev-minustop.png<br>
+<img src=rev-nullonly.png>rev-nullonly.png<br>
+<img src=rev-plus.png>rev-plus.png<br>
+<img src=rev-plusbottom.png>rev-plusbottom.png<br>
+<img src=rev-plusonly.png>rev-plusonly.png<br>
+<img src=rev-plustop.png>rev-plustop.png<br>

var/mongoose/html/lib/jquery.easy-pie-chart/jquery.easy-pie-chart.css

@@ -0,0 +1,10 @@
+.easyPieChart {
+    position: relative;
+    text-align: center;
+}
+
+.easyPieChart canvas {
+    position: absolute;
+    top: 0;
+    left: 10px;
+}

var/mongoose/html/lib/jquery.easy-pie-chart/jquery.easy-pie-chart.js

@@ -0,0 +1,193 @@
+// Generated by CoffeeScript 1.6.3
+/*
+Easy pie chart is a jquery plugin to display simple animated pie charts for only one value
+
+Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+
+Built on top of the jQuery library (http://jquery.com)
+
+@source: http://github.com/rendro/easy-pie-chart/
+@autor: Robert Fleischmann
+@version: 1.2.3
+
+Inspired by: http://dribbble.com/shots/631074-Simple-Pie-Charts-II?list=popular&offset=210
+Thanks to Philip Thrasher for the jquery plugin boilerplate for coffee script
+*/
+
+(function($) {
+  $.easyPieChart = function(el, options) {
+    var addScaleLine, animateLine, drawLine, easeInOutQuad, rAF, renderBackground, renderScale, renderTrack,
+      _this = this;
+    this.el = el;
+    this.$el = $(el);
+    this.$el.data("easyPieChart", this);
+    this.init = function() {
+      var percent, scaleBy;
+      _this.options = $.extend({}, $.easyPieChart.defaultOptions, options);
+      percent = parseInt(_this.$el.data('percent'), 10);
+      _this.percentage = 0;
+      _this.canvas = $("<canvas width='" + _this.options.size + "' height='" + _this.options.size + "'></canvas>").get(0);
+      _this.$el.append(_this.canvas);
+      if (typeof G_vmlCanvasManager !== "undefined" && G_vmlCanvasManager !== null) {
+        G_vmlCanvasManager.initElement(_this.canvas);
+      }
+      _this.ctx = _this.canvas.getContext('2d');
+      if (window.devicePixelRatio > 1) {
+        scaleBy = window.devicePixelRatio;
+        $(_this.canvas).css({
+          width: _this.options.size,
+          height: _this.options.size
+        });
+        _this.canvas.width *= scaleBy;
+        _this.canvas.height *= scaleBy;
+        _this.ctx.scale(scaleBy, scaleBy);
+      }
+      _this.ctx.translate(_this.options.size / 2, _this.options.size / 2);
+      _this.ctx.rotate(_this.options.rotate * Math.PI / 180);
+      _this.$el.addClass('easyPieChart');
+      _this.$el.css({
+        width: _this.options.size,
+        height: _this.options.size,
+        lineHeight: "" + _this.options.size + "px"
+      });
+      _this.update(percent);
+      return _this;
+    };
+    this.update = function(percent) {
+      percent = parseFloat(percent) || 0;
+      if (_this.options.animate === false) {
+        drawLine(percent);
+      } else {
+        animateLine(_this.percentage, percent);
+      }
+      return _this;
+    };
+    renderScale = function() {
+      var i, _i, _results;
+      _this.ctx.fillStyle = _this.options.scaleColor;
+      _this.ctx.lineWidth = 1;
+      _results = [];
+      for (i = _i = 0; _i <= 24; i = ++_i) {
+        _results.push(addScaleLine(i));
+      }
+      return _results;
+    };
+    addScaleLine = function(i) {
+      var offset;
+      offset = i % 6 === 0 ? 0 : _this.options.size * 0.017;
+      _this.ctx.save();
+      _this.ctx.rotate(i * Math.PI / 12);
+      _this.ctx.fillRect(_this.options.size / 2 - offset, 0, -_this.options.size * 0.05 + offset, 1);
+      _this.ctx.restore();
+    };
+    renderTrack = function() {
+      var offset;
+      offset = _this.options.size / 2 - _this.options.lineWidth / 2;
+      if (_this.options.scaleColor !== false) {
+        offset -= _this.options.size * 0.08;
+      }
+      _this.ctx.beginPath();
+      _this.ctx.arc(0, 0, offset, 0, Math.PI * 2, true);
+      _this.ctx.closePath();
+      _this.ctx.strokeStyle = _this.options.trackColor;
+      _this.ctx.lineWidth = _this.options.lineWidth;
+      _this.ctx.stroke();
+    };
+    renderBackground = function() {
+      if (_this.options.scaleColor !== false) {
+        renderScale();
+      }
+      if (_this.options.trackColor !== false) {
+        renderTrack();
+      }
+    };
+    drawLine = function(percent) {
+      var offset;
+      renderBackground();
+      _this.ctx.strokeStyle = $.isFunction(_this.options.barColor) ? _this.options.barColor(percent) : _this.options.barColor;
+      _this.ctx.lineCap = _this.options.lineCap;
+      _this.ctx.lineWidth = _this.options.lineWidth;
+      offset = _this.options.size / 2 - _this.options.lineWidth / 2;
+      if (_this.options.scaleColor !== false) {
+        offset -= _this.options.size * 0.08;
+      }
+      _this.ctx.save();
+      _this.ctx.rotate(-Math.PI / 2);
+      _this.ctx.beginPath();
+      _this.ctx.arc(0, 0, offset, 0, Math.PI * 2 * percent / 100, false);
+      _this.ctx.stroke();
+      _this.ctx.restore();
+    };
+    rAF = (function() {
+      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
+        return window.setTimeout(callback, 1000 / 60);
+      };
+    })();
+    animateLine = function(from, to) {
+      var anim, startTime;
+      _this.options.onStart.call(_this);
+      _this.percentage = to;
+      Date.now || (Date.now = function() {
+        return +(new Date);
+      });
+      startTime = Date.now();
+      anim = function() {
+        var currentValue, process;
+        process = Date.now() - startTime;
+        if (process < _this.options.animate) {
+          rAF(anim);
+        }
+        _this.ctx.clearRect(-_this.options.size / 2, -_this.options.size / 2, _this.options.size, _this.options.size);
+        renderBackground.call(_this);
+        currentValue = [easeInOutQuad(process, from, to - from, _this.options.animate)];
+        _this.options.onStep.call(_this, currentValue);
+        drawLine.call(_this, currentValue);
+        if (process >= _this.options.animate) {
+          return _this.options.onStop.call(_this, currentValue, to);
+        }
+      };
+      rAF(anim);
+    };
+    easeInOutQuad = function(t, b, c, d) {
+      var easeIn, easing;
+      easeIn = function(t) {
+        return Math.pow(t, 2);
+      };
+      easing = function(t) {
+        if (t < 1) {
+          return easeIn(t);
+        } else {
+          return 2 - easeIn((t / 2) * -2 + 2);
+        }
+      };
+      t /= d / 2;
+      return c / 2 * easing(t) + b;
+    };
+    return this.init();
+  };
+  $.easyPieChart.defaultOptions = {
+    barColor: '#ef1e25',
+    trackColor: '#f2f2f2',
+    scaleColor: '#dfe0e0',
+    lineCap: 'round',
+    rotate: 0,
+    size: 110,
+    lineWidth: 3,
+    animate: false,
+    onStart: $.noop,
+    onStop: $.noop,
+    onStep: $.noop
+  };
+  $.fn.easyPieChart = function(options) {
+    return $.each(this, function(i, el) {
+      var $el, instanceOptions;
+      $el = $(el);
+      if (!$el.data('easyPieChart')) {
+        instanceOptions = $.extend({}, options, $el.data());
+        return $el.data('easyPieChart', new $.easyPieChart(el, instanceOptions));
+      }
+    });
+  };
+  return void 0;
+})(jQuery);

var/mongoose/html/lib/topbar.jim

@@ -30,6 +30,9 @@ $('#topbar').hover(
     function() { $(this).css('cursor', 'pointer'); },
     function() { $(this).css('cursor', 'auto'); }
 );
+$('#topbar a').on('click', function(e) {
+	e.stopPropagation();
+});
 </script>
 
 <!-- end of topbar -->

var/mongoose/include/diskspace.jim

@@ -17,11 +17,12 @@ if {[file exists /opt/share/images/blue/345_2_14_ST_HDD_01.png]} {
 }
 
 puts "
-
 	<span style=\"float: right; 
 	    background:url('/images/345_1_27_ST_USB_BG.png')
 	    no-repeat\">
-		<img src=/images/${prefix}_$dsfile.png>
+		<a href=/diag/dspace/>
+		  <img border=0 src=/images/${prefix}_$dsfile.png>
+		</a>
 	</span>
 
 	<span style=\"float: right\">

var/mongoose/lib/setup

@@ -41,6 +41,17 @@ if {![exists -proc require]} {
 		uplevel source /mod/webif/html/m/lib/footer.jim
 	}
 
+	proc jqplugin {name} {
+		foreach file [glob "/mod/webif/html/lib/jquery.$name/*.js"] {
+			set file [join [lrange [split $file /] 4 end] /]
+			puts "<script type=text/javascript src=/$file></script>"
+		}
+		foreach file [glob "/mod/webif/html/lib/jquery.$name/*.css"] {
+			set file [join [lrange [split $file /] 4 end] /]
+			puts "<link href=/$file rel=stylesheet type=text/css />"
+		}
+	}
+
 	require fileops
 }