MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

< > frame input. Down resets

master
Beau Blyth 2019-09-26 16:28:35 -07:00
parent 70d0828125
commit 1574fd0f6b
5 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/canvas_handler.ts
View File

@ -4,18 +4,14 @@ export class CanvasHandler {
constructor(currentImageDiv: HTMLElement) {
this.currentImageDiv = currentImageDiv;
console.log(this.currentImageDiv);
}
public Load() {
this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage);
this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage);
}
const mouseDown = (event: MouseEvent) => {
console.log(event.x + ' ' + event.y);
};
private hoverOverImage() {
console.log('hovering over image');
this.currentImageDiv.addEventListener('mousedown', mouseDown);
}
private clickOnImage = (e: Event) => {
console.log('Clicked on image');
};
}

15
app/frame_handler.ts
View File

@ -4,10 +4,18 @@ export class FrameHandler {
private filenames: string[] = [];
private currentFrame: number = 0;
private currentImageDiv: HTMLElement;
private playingAnimation: boolean;
constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
this.currentImageDiv = currentImageDiv;
this.frameNumberDiv = frameNumberDiv;
setTimeout(this.Update, 1000 / 60);
}
public Update() {
console.log('updating');
AdvanceFrames(1);
setTimeout(this.Update, 1000 / 60);
}
public GetCurrentFrame(): number {
@ -42,7 +50,12 @@ export class FrameHandler {
} else {
this.frameNumberDiv.className = 'instruction';
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
View File

@ -48,19 +48,31 @@ export class Page {
const keyDown = (event: KeyboardEvent) => {
switch (event.keyCode) {
case 39: {
// right_arrow
case 39:
case 190: {
// right_arrow, carrot
console.log('next frame action');
this.frameHandler.AdvanceFrames(1);
break;
}
case 37: {
// left arrow
case 37:
case 188: {
// left arrow, carrot
console.log('previous frame action');
this.frameHandler.AdvanceFrames(-1);
break;
}
case 40: {
// down arrow
this.frameHandler.GoToFrame(0);
}
case 32: {
// spacebar
this.frameHandler.TogglePlayingAnimation();
}
}
};

9
dist/assets/stylesheets/main.css vendored
View File

@ -35,8 +35,8 @@ body {
}
#currentImage {
width: 50%;
height: 50%;
width: 256;
height: 256;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
}
@ -48,10 +48,5 @@ body {
min-width: 256;
min-height: 256;
-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;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

18
dist/index.html vendored
View File

@ -7,19 +7,27 @@
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<div id="dropZone">
<div id="instructions" class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
<div id = "topbar">
<div id="instructions" class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
</div>
</div>
<div id="output"></div>
<div id="frameNumber" class="warning">
<p></p>
</div>
<!-- canvas -->
<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>