jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-04-24 07:17:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #66 from resin-io/feat/burning-speed

Browse Source 
Show burn speed information during write
This commit is contained in:
Juan Cruz Viotti 2016-01-18 15:28:29 -04:00
commit a45b0fdc95
8 changed files with 187 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
build/browser/app.js
View File

@ -52,7 +52,7 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState
this.restart = function() {
console.debug('Restarting');
this.selection.clear();
this.writer.setProgress(0);
this.writer.reset();
this.scanner.start(2000).on('scan', function(drives) {
// Notice we only autoselect the drive if there is an image,
@ -343,33 +343,71 @@ imageWriter.service('ImageWriterService', function($q, $timeout) {
var self = this;
var burning = false;
/**
* @summary Progress percentage
* @type Number
/*
* @summary Progress state
* @type Object
* @public
*/
this.progress = 0;
this.state = {
/**
* @summary Progress percentage
* @type Number
* @public
*/
progress: 0,
/**
* @summary Progress speed
* @type Number
* @public
*/
speed: 0
};
/**
* @summary Set progress percentage
* @summary Set progress state
* @function
* @private
*
* @param {Number} progress
* @param {Object} state - progress state
* @param {Number} state.percentage - progress percentage
*
* @example
* ImageWriterService.setProgress(50);
* ImageWriterService.setProgressState({
* percentage: 50
* });
*/
this.setProgress = function(progress) {
this.setProgressState = function(state) {
// Safely bring the state to the world of Angular
$timeout(function() {
self.progress = Math.floor(progress);
console.debug('Progress: ' + self.progress);
self.state.progress = Math.floor(state.percentage);
// Transform bytes to megabytes preserving only two decimal places
self.state.speed = Math.floor(state.speed / 1e+6 * 100) / 100 || 0;
console.debug('Progress: ' + self.state.progress + '% at ' + self.state.speed + ' MB/s');
});
};
/**
* @summary Reset progress state
* @function
* @public
*
* @example
* ImageWriterService.reset();
*/
this.reset = function() {
self.setProgressState({
percentage: 0,
speed: 0
});
};
/**
* @summary Check if currently burning
* @function
@ -431,7 +469,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) {
* @public
*
* @description
* This function will update `.progress` with the current writing percentage.
* This function will update `state.progress` with the current writing percentage.
*
* @param {String} image - image path
* @param {Object} drive - drive
@ -454,9 +492,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) {
self.setBurning(true);
return self.performWrite(image, drive, function(state) {
self.setProgress(state.percentage);
}).finally(function() {
return self.performWrite(image, drive, self.setProgressState).finally(function() {
self.setBurning(false);
});
};

10
build/css/main.css
View File

@ -5904,8 +5904,8 @@ body {
.space-horizontal-large {
margin: 0 30px; }
.space-bottom-large {
margin-bottom: 45px; }
.space-bottom-huge {
margin-bottom: 55px; }
.space-right-tiny {
margin-right: 5px; }
@ -5987,3 +5987,9 @@ body {
.step-border-right {
right: -120px; }
.step-footer {
margin-top: 10px;
margin-bottom: -40px;
color: #85898c;
font-size: 12px; }

2
lib/browser/app.js
View File

@ -51,7 +51,7 @@ app.controller('AppController', function($q, DriveScannerService, SelectionState
this.restart = function() {
console.debug('Restarting');
this.selection.clear();
this.writer.setProgress(0);
this.writer.reset();
this.scanner.start(2000).on('scan', function(drives) {
// Notice we only autoselect the drive if there is an image,

64
lib/browser/modules/image-writer.js
View File

@ -35,33 +35,71 @@ imageWriter.service('ImageWriterService', function($q, $timeout) {
var self = this;
var burning = false;
/**
* @summary Progress percentage
* @type Number
/*
* @summary Progress state
* @type Object
* @public
*/
this.progress = 0;
this.state = {
/**
* @summary Progress percentage
* @type Number
* @public
*/
progress: 0,
/**
* @summary Progress speed
* @type Number
* @public
*/
speed: 0
};
/**
* @summary Set progress percentage
* @summary Set progress state
* @function
* @private
*
* @param {Number} progress
* @param {Object} state - progress state
* @param {Number} state.percentage - progress percentage
*
* @example
* ImageWriterService.setProgress(50);
* ImageWriterService.setProgressState({
* percentage: 50
* });
*/
this.setProgress = function(progress) {
this.setProgressState = function(state) {
// Safely bring the state to the world of Angular
$timeout(function() {
self.progress = Math.floor(progress);
console.debug('Progress: ' + self.progress);
self.state.progress = Math.floor(state.percentage);
// Transform bytes to megabytes preserving only two decimal places
self.state.speed = Math.floor(state.speed / 1e+6 * 100) / 100 || 0;
console.debug('Progress: ' + self.state.progress + '% at ' + self.state.speed + ' MB/s');
});
};
/**
* @summary Reset progress state
* @function
* @public
*
* @example
* ImageWriterService.reset();
*/
this.reset = function() {
self.setProgressState({
percentage: 0,
speed: 0
});
};
/**
* @summary Check if currently burning
* @function
@ -123,7 +161,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) {
* @public
*
* @description
* This function will update `.progress` with the current writing percentage.
* This function will update `state.progress` with the current writing percentage.
*
* @param {String} image - image path
* @param {Object} drive - drive
@ -146,9 +184,7 @@ imageWriter.service('ImageWriterService', function($q, $timeout) {
self.setBurning(true);
return self.performWrite(image, drive, function(state) {
self.setProgress(state.percentage);
}).finally(function() {
return self.performWrite(image, drive, self.setProgressState).finally(function() {
self.setBurning(false);
});
};

18
lib/index.html
View File

@ -19,7 +19,7 @@
<div class="content row middle-xs space-horizontal-large">
<div class="col-xs">
<div class="row around-xs space-bottom-large" ng-hide="app.writer.progress == 100 && !app.writer.isBurning()">
<div class="row around-xs space-bottom-huge" ng-hide="app.writer.state.progress == 100 && !app.writer.isBurning()">
<div class="col-xs">
<div class="box text-center">
<hero-icon path="images/image.svg" label="SELECT IMAGE"></hero-icon>
@ -76,21 +76,23 @@
<hero-badge class="block space-vertical-medium" ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">3</hero-badge>
<div class="space-vertical-large">
<hero-progress-button percentage="{{ app.writer.progress }}" active="{{ app.writer.isBurning() }}"
<hero-progress-button percentage="{{ app.writer.state.progress }}" active="{{ app.writer.isBurning() }}"
ng-click="app.burn(app.selection.getImage(), app.selection.getDrive())"
ng-disabled="!app.selection.hasImage() || !app.selection.hasDrive()">
<span ng-show="app.writer.progress == 100 && app.writer.isBurning()">Finishing...</span>
<span ng-show="app.writer.progress == 0 && !app.writer.isBurning()">Burn!</span>
<span ng-show="app.writer.progress == 0 && app.writer.isBurning()">Starting...</span>
<span ng-show="app.writer.progress != 0 && app.writer.progress != 100"
ng-bind="app.writer.progress + '%'"></span>
<span ng-show="app.writer.state.progress == 100 && app.writer.isBurning()">Finishing...</span>
<span ng-show="app.writer.state.progress == 0 && !app.writer.isBurning()">Burn!</span>
<span ng-show="app.writer.state.progress == 0 && app.writer.isBurning() && !app.writer.state.speed">Starting...</span>
<span ng-show="app.writer.state.speed && app.writer.state.progress != 100"
ng-bind="app.writer.state.progress + '% '"></span>
</hero-progress-button>
<p class="step-footer" ng-bind="app.writer.state.speed.toFixed(2) + ' MB/s'" ng-show="app.writer.state.speed && app.writer.state.progress != 100"></p>
</div>
</div>
</div>
</div>
<div class="row around-xs space-bottom-large" ng-show="app.writer.progress == 100 && !app.writer.isBurning()">
<div class="row around-xs space-bottom-huge" ng-show="app.writer.state.progress == 100 && !app.writer.isBurning()">
<div class="col-xs">
<div class="box text-center">
<h3><hero-tick type="success" class="space-right-tiny"></hero-tick> Burn Complete!</h3>

7
lib/scss/main.scss
View File

@ -144,3 +144,10 @@ body {
@extend .step-border;
right: -120px;
}
.step-footer {
margin-top: 10px;
margin-bottom: -40px;
color: lighten($color-disabled, 5%);
font-size: 12px;
}

5
lib/scss/modules/_space.scss
View File

@ -14,6 +14,7 @@
* limitations under the License.
*/
$spacing-huge: 55px;
$spacing-large: 30px;
$spacing-medium: 15px;
$spacing-tiny: 5px;
@ -30,8 +31,8 @@ $spacing-tiny: 5px;
margin: 0 $spacing-large;
}
.space-bottom-large {
margin-bottom: $spacing-large * 1.5;
.space-bottom-huge {
margin-bottom: $spacing-huge;
}
.space-right-tiny {

63
tests/browser/modules/image-writer.spec.js
View File

@ -23,7 +23,11 @@ describe('Browser: ImageWriter', function() {
}));
it('should set progress to zero by default', function() {
m.chai.expect(ImageWriterService.progress).to.equal(0);
m.chai.expect(ImageWriterService.state.progress).to.equal(0);
});
it('should set speed to zero by default', function() {
m.chai.expect(ImageWriterService.state.speed).to.equal(0);
});
describe('.isBurning()', function() {
@ -61,18 +65,65 @@ describe('Browser: ImageWriter', function() {
});
describe('.setProgress()', function() {
describe('.setProgressState()', function() {
it('should be able to set the progress', function() {
ImageWriterService.setProgress(50);
ImageWriterService.setProgressState({
percentage: 50,
speed: 949624
});
$timeout.flush();
m.chai.expect(ImageWriterService.progress).to.equal(50);
m.chai.expect(ImageWriterService.state.progress).to.equal(50);
m.chai.expect(ImageWriterService.state.speed).to.equal(0.94);
});
it('should floor the percentage', function() {
ImageWriterService.setProgress(49.9999);
ImageWriterService.setProgressState({
percentage: 49.9999
});
$timeout.flush();
m.chai.expect(ImageWriterService.progress).to.equal(49);
m.chai.expect(ImageWriterService.state.progress).to.equal(49);
});
it('should assume speed zero if no speed', function() {
ImageWriterService.setProgressState({
percentage: 25
});
$timeout.flush();
m.chai.expect(ImageWriterService.state.speed).to.equal(0);
});
});
describe('.reset()', function() {
it('should reset progress percentage to 0', function() {
ImageWriterService.setProgressState({
percentage: 50,
speed: 949624
});
$timeout.flush();
m.chai.expect(ImageWriterService.state.progress).to.equal(50);
ImageWriterService.reset();
$timeout.flush();
m.chai.expect(ImageWriterService.state.progress).to.equal(0);
});
it('should reset speed to 0', function() {
ImageWriterService.setProgressState({
percentage: 50,
speed: 949624
});
$timeout.flush();
m.chai.expect(ImageWriterService.state.speed).to.equal(0.94);
ImageWriterService.reset();
$timeout.flush();
m.chai.expect(ImageWriterService.state.speed).to.equal(0);
});
});