Work chasing down errors in display
This commit is contained in:
parent
582a95202e
commit
3c88de83b8
|
@ -10,6 +10,7 @@ class Display {
|
||||||
private parentElement : HTMLUListElement;
|
private parentElement : HTMLUListElement;
|
||||||
private canvas : HTMLCanvasElement;
|
private canvas : HTMLCanvasElement;
|
||||||
private ctx : CanvasRenderingContext2D;
|
private ctx : CanvasRenderingContext2D;
|
||||||
|
private img : HTMLImageElement;
|
||||||
private screen : any;
|
private screen : any;
|
||||||
private sequence : boolean = false;
|
private sequence : boolean = false;
|
||||||
|
|
||||||
|
@ -106,11 +107,11 @@ class Display {
|
||||||
}
|
}
|
||||||
|
|
||||||
public updateImage() {
|
public updateImage() {
|
||||||
const img : any = new Image;
|
this.img = new Image;
|
||||||
img.onload = function () {
|
this.img.onload = function () {
|
||||||
this.ctx.drawImage(img, this.displayOffsetX, this.displayOffsetY, this.displayWidth, this.displayHeight);
|
this.ctx.drawImage(this.img, this.displayOffsetX, this.displayOffsetY, this.displayWidth, this.displayHeight);
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
img.src = `/${this.displayWidth}/${this.displayHeight}/image.jpg?cacheBreaker=${+new Date()}`;
|
this.img.src = `/${this.displayWidth}/${this.displayHeight}/image.jpg?cacheBreaker=${+new Date()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public update (msg : Message) {
|
public update (msg : Message) {
|
||||||
|
|
|
@ -32,11 +32,13 @@ class Display {
|
||||||
let offset;
|
let offset;
|
||||||
this.source = new Dimensions(width, height);
|
this.source = new Dimensions(width, height);
|
||||||
if (this.source.getRatio() > this.screen.getRatio()) {
|
if (this.source.getRatio() > this.screen.getRatio()) {
|
||||||
|
console.log('a');
|
||||||
this.display = new Dimensions(this.screen.width, Math.floor(this.source.width / this.source.getRatio()));
|
this.display = new Dimensions(this.screen.width, Math.floor(this.source.width / this.source.getRatio()));
|
||||||
offset = this.screen.height - this.display.height;
|
offset = this.screen.height - this.display.height;
|
||||||
this.offset = { x: 0, y: Math.round(offset / 2) };
|
this.offset = { x: 0, y: Math.round(offset / 2) };
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
console.log('b');
|
||||||
this.display = new Dimensions(Math.floor(this.source.getRatio() * this.screen.height), this.screen.height);
|
this.display = new Dimensions(Math.floor(this.source.getRatio() * this.screen.height), this.screen.height);
|
||||||
offset = this.screen.width - this.display.width;
|
offset = this.screen.width - this.display.width;
|
||||||
this.offset = { x: Math.round(offset / 2), y: 0 };
|
this.offset = { x: Math.round(offset / 2), y: 0 };
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/display/index.ts"],"names":[],"mappings":"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"}
|
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/display/index.ts"],"names":[],"mappings":";;;AAEA,MAAa,UAAU;IAItB,YAAa,KAAc,EAAE,MAAe;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACtB,CAAC;IAEM,QAAQ;QACd,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;IACjC,CAAC;CACD;AAZD,gCAYC;AAOD,MAAa,OAAO;IAQnB,YAAa,KAAc,EAAE,MAAe;QAC3C,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAG,CAAC,EAAE,CAAA;IAC9B,CAAC;IAEM,UAAU,CAAE,CAAU;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEM,UAAU,CAAE,CAAU;QAC5B,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAEM,QAAQ,CAAE,KAAc;QAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;IAC5B,CAAC;IAEM,SAAS,CAAE,MAAe;QAChC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;IAC9B,CAAC;IAEM,SAAS,CAAE,KAAc,EAAE,MAAe;QAChD,IAAI,MAAe,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAC5C,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;YACrD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;YACzG,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YAClD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,CAAC,EAAG,CAAC,EAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;QACrD,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YAChB,IAAI,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC3G,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;YAChD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAG,CAAC,EAAG,CAAC,EAAE,CAAC;QACrD,CAAC;IACF,CAAC;IAEM,mBAAmB;QACzB,OAAO;YACN,CAAC,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK;YACtB,CAAC,EAAG,IAAI,CAAC,OAAO,CAAC,MAAM;YACvB,CAAC,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC;YACjB,CAAC,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC;SACjB,CAAA;IACF,CAAC;IAEM,aAAa;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAEM,SAAS;QACf,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAEM,SAAS;QACf,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAEM,SAAS;QACf,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;CACD;AArED,0BAqEC;AAED,MAAM,CAAC,OAAO,GAAG,EAAE,OAAO,EAAG,UAAU,EAAE,CAAC"}
|
|
@ -52,10 +52,12 @@ export class Display {
|
||||||
let offset : number;
|
let offset : number;
|
||||||
this.source = new Dimensions(width, height);
|
this.source = new Dimensions(width, height);
|
||||||
if (this.source.getRatio() > this.screen.getRatio()) {
|
if (this.source.getRatio() > this.screen.getRatio()) {
|
||||||
|
console.log('a');
|
||||||
this.display = new Dimensions(this.screen.width, Math.floor(this.source.width / this.source.getRatio()));
|
this.display = new Dimensions(this.screen.width, Math.floor(this.source.width / this.source.getRatio()));
|
||||||
offset = this.screen.height - this.display.height;
|
offset = this.screen.height - this.display.height;
|
||||||
this.offset = { x: 0, y : Math.round(offset / 2) };
|
this.offset = { x: 0, y : Math.round(offset / 2) };
|
||||||
} else {
|
} else {
|
||||||
|
console.log('b')
|
||||||
this.display = new Dimensions(Math.floor(this.source.getRatio() * this.screen.height), this.screen.height);
|
this.display = new Dimensions(Math.floor(this.source.getRatio() * this.screen.height), this.screen.height);
|
||||||
offset = this.screen.width - this.display.width;
|
offset = this.screen.width - this.display.width;
|
||||||
this.offset = { x: Math.round(offset / 2), y : 0 };
|
this.offset = { x: Math.round(offset / 2), y : 0 };
|
||||||
|
|
|
@ -8,6 +8,7 @@ declare class Display {
|
||||||
private parentElement;
|
private parentElement;
|
||||||
private canvas;
|
private canvas;
|
||||||
private ctx;
|
private ctx;
|
||||||
|
private img;
|
||||||
private screen;
|
private screen;
|
||||||
private sequence;
|
private sequence;
|
||||||
private offsetX;
|
private offsetX;
|
||||||
|
|
|
@ -86,11 +86,11 @@ class Display {
|
||||||
this.updateImage();
|
this.updateImage();
|
||||||
}
|
}
|
||||||
updateImage() {
|
updateImage() {
|
||||||
const img = new Image;
|
this.img = new Image;
|
||||||
img.onload = function () {
|
this.img.onload = function () {
|
||||||
this.ctx.drawImage(img, this.displayOffsetX, this.displayOffsetY, this.displayWidth, this.displayHeight);
|
this.ctx.drawImage(this.img, this.displayOffsetX, this.displayOffsetY, this.displayWidth, this.displayHeight);
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
img.src = `/${this.displayWidth}/${this.displayHeight}/image.jpg?cacheBreaker=${+new Date()}`;
|
this.img.src = `/${this.displayWidth}/${this.displayHeight}/image.jpg?cacheBreaker=${+new Date()}`;
|
||||||
}
|
}
|
||||||
update(msg) {
|
update(msg) {
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue