Work chasing down errors in display

This commit is contained in:
Matt McWilliams 2024-10-22 16:31:04 -04:00
parent 582a95202e
commit 3c88de83b8
7 changed files with 16 additions and 10 deletions

View File

@ -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) {

View File

@ -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 };

View File

@ -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":"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"}

View File

@ -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 };

View File

@ -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;

View File

@ -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