< > frame input. Down resets
parent
70d0828125
commit
1574fd0f6b
|
@ -4,18 +4,14 @@ export class CanvasHandler {
|
||||||
|
|
||||||
constructor(currentImageDiv: HTMLElement) {
|
constructor(currentImageDiv: HTMLElement) {
|
||||||
this.currentImageDiv = currentImageDiv;
|
this.currentImageDiv = currentImageDiv;
|
||||||
|
console.log(this.currentImageDiv);
|
||||||
}
|
}
|
||||||
|
|
||||||
public Load() {
|
public Load() {
|
||||||
this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
|
const mouseDown = (event: MouseEvent) => {
|
||||||
this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage);
|
console.log(event.x + ' ' + event.y);
|
||||||
}
|
};
|
||||||
|
|
||||||
private hoverOverImage() {
|
this.currentImageDiv.addEventListener('mousedown', mouseDown);
|
||||||
console.log('hovering over image');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private clickOnImage = (e: Event) => {
|
|
||||||
console.log('Clicked on image');
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,10 +4,18 @@ export class FrameHandler {
|
||||||
private filenames: string[] = [];
|
private filenames: string[] = [];
|
||||||
private currentFrame: number = 0;
|
private currentFrame: number = 0;
|
||||||
private currentImageDiv: HTMLElement;
|
private currentImageDiv: HTMLElement;
|
||||||
|
private playingAnimation: boolean;
|
||||||
|
|
||||||
constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
|
constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
|
||||||
this.currentImageDiv = currentImageDiv;
|
this.currentImageDiv = currentImageDiv;
|
||||||
this.frameNumberDiv = frameNumberDiv;
|
this.frameNumberDiv = frameNumberDiv;
|
||||||
|
setTimeout(this.Update, 1000 / 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
public Update() {
|
||||||
|
console.log('updating');
|
||||||
|
AdvanceFrames(1);
|
||||||
|
setTimeout(this.Update, 1000 / 60);
|
||||||
}
|
}
|
||||||
|
|
||||||
public GetCurrentFrame(): number {
|
public GetCurrentFrame(): number {
|
||||||
|
@ -42,7 +50,12 @@ export class FrameHandler {
|
||||||
} else {
|
} else {
|
||||||
this.frameNumberDiv.className = 'instruction';
|
this.frameNumberDiv.className = 'instruction';
|
||||||
this.frameNumberDiv.innerText =
|
this.frameNumberDiv.innerText =
|
||||||
'Frame ' + this.currentFrame.toString() + '/' + (this.filenames.length - 1).toString();
|
'Frame ' + this.currentFrame.toString() + ' / ' + (this.filenames.length - 1).toString();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public TogglePlayingAnimation() {
|
||||||
|
this.playingAnimation = !this.playingAnimation;
|
||||||
|
console.log('playingAnimation = ', this.playingAnimation);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
20
app/page.ts
20
app/page.ts
|
@ -48,19 +48,31 @@ export class Page {
|
||||||
|
|
||||||
const keyDown = (event: KeyboardEvent) => {
|
const keyDown = (event: KeyboardEvent) => {
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case 39: {
|
case 39:
|
||||||
// right_arrow
|
case 190: {
|
||||||
|
// right_arrow, carrot
|
||||||
console.log('next frame action');
|
console.log('next frame action');
|
||||||
this.frameHandler.AdvanceFrames(1);
|
this.frameHandler.AdvanceFrames(1);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
case 37: {
|
case 37:
|
||||||
// left arrow
|
case 188: {
|
||||||
|
// left arrow, carrot
|
||||||
console.log('previous frame action');
|
console.log('previous frame action');
|
||||||
this.frameHandler.AdvanceFrames(-1);
|
this.frameHandler.AdvanceFrames(-1);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
case 40: {
|
||||||
|
// down arrow
|
||||||
|
this.frameHandler.GoToFrame(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
case 32: {
|
||||||
|
// spacebar
|
||||||
|
this.frameHandler.TogglePlayingAnimation();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -35,8 +35,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#currentImage {
|
#currentImage {
|
||||||
width: 50%;
|
width: 256;
|
||||||
height: 50%;
|
height: 256;
|
||||||
-ms-interpolation-mode: nearest-neighbor;
|
-ms-interpolation-mode: nearest-neighbor;
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
@ -48,10 +48,5 @@ body {
|
||||||
min-width: 256;
|
min-width: 256;
|
||||||
min-height: 256;
|
min-height: 256;
|
||||||
-ms-interpolation-mode: nearest-neighbor;
|
-ms-interpolation-mode: nearest-neighbor;
|
||||||
image-rendering: pixelated;
|
|
||||||
image-rendering: -moz-crisp-edges; /* Firefox */
|
|
||||||
image-rendering: -o-crisp-edges; /* Opera */
|
|
||||||
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
|
|
||||||
image-rendering: crisp-edges;
|
image-rendering: crisp-edges;
|
||||||
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,19 +7,27 @@
|
||||||
<link rel="stylesheet" href="assets/stylesheets/main.css">
|
<link rel="stylesheet" href="assets/stylesheets/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="dropZone">
|
<div id="dropZone">
|
||||||
<div id="instructions" class="instruction">
|
<div id = "topbar">
|
||||||
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
|
<div id="instructions" class="instruction">
|
||||||
|
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="output"></div>
|
|
||||||
|
|
||||||
<div id="frameNumber" class="warning">
|
<div id="frameNumber" class="warning">
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
<!-- canvas -->
|
<!-- canvas -->
|
||||||
<div id="currentImage">
|
<div id="currentImage">
|
||||||
<img alt="">
|
<img alt="No images uploaded">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="settings">
|
||||||
|
Origin X: <input type="text" name="originX" value="0" size="2">
|
||||||
|
Y: <input type="text" name="originX" value="0" size="2"><br>
|
||||||
|
Fps: <input type="text" name="FirstName" value="60"><br>
|
||||||
|
<input type="checkbox" name="looping" > Looping <br>
|
||||||
|
<button type="button" onclick="alert('saved')">export .anim</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue