started frame import system
parent
4a06cbcc2c
commit
607fe1e9ee
|
|
@ -0,0 +1,22 @@
|
||||||
|
export class FileHandler {
|
||||||
|
public static ProcessImages(fileList: FileList): string[] {
|
||||||
|
const filenames: string[] = [];
|
||||||
|
|
||||||
|
// files is a FileList of File objects. List some properties.
|
||||||
|
for (let i = 0; i < fileList.length; i++) {
|
||||||
|
const f = fileList[i];
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = ((theFile) => {
|
||||||
|
return (e: any) => {
|
||||||
|
filenames.push(e.target.result);
|
||||||
|
};
|
||||||
|
})(f);
|
||||||
|
|
||||||
|
// Read in the image file as a data URL.
|
||||||
|
reader.readAsDataURL(f);
|
||||||
|
}
|
||||||
|
|
||||||
|
return filenames;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
export class FrameHandler {
|
||||||
|
private filenames: string[] = [];
|
||||||
|
private currentFrame: number = 0;
|
||||||
|
private currentImageDiv: HTMLElement;
|
||||||
|
|
||||||
|
constructor(currentImageDiv: HTMLElement) {
|
||||||
|
this.currentImageDiv = currentImageDiv;
|
||||||
|
}
|
||||||
|
|
||||||
|
public loadFrames(filenames: string[]) {
|
||||||
|
this.filenames = filenames;
|
||||||
|
this.currentFrame = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
public AdvanceFrames(amount: number) {
|
||||||
|
this.currentFrame += amount;
|
||||||
|
this.currentFrame %= this.filenames.length;
|
||||||
|
if (this.currentFrame < 0) {
|
||||||
|
this.currentFrame = this.filenames.length - 1;
|
||||||
|
}
|
||||||
|
this.GoToFrame(this.currentFrame);
|
||||||
|
}
|
||||||
|
|
||||||
|
public GoToFrame(frame: number) {
|
||||||
|
this.currentFrame = frame;
|
||||||
|
this.currentImageDiv.innerHTML = `<img src="${this.filenames[this.currentFrame]}"></img>`;
|
||||||
|
console.log('current frame = ', this.currentFrame);
|
||||||
|
}
|
||||||
|
}
|
||||||
58
app/page.ts
58
app/page.ts
|
|
@ -1,10 +1,54 @@
|
||||||
export class Page {
|
import { FileHandler } from './file_handler';
|
||||||
public Load() {
|
import { FrameHandler } from './frame_handler';
|
||||||
const thing = document.getElementById('thing') as HTMLElement;
|
|
||||||
thing.innerHTML = '<p>mememememe</p>';
|
|
||||||
|
|
||||||
thing.onclick = (e) => {
|
export class Page {
|
||||||
thing.innerHTML = '<p>blahblahblah</p>';
|
private static handleDragOver(evt: DragEvent) {
|
||||||
};
|
if (evt !== null) {
|
||||||
|
evt.stopPropagation();
|
||||||
|
evt.preventDefault();
|
||||||
|
evt.dataTransfer!.dropEffect = 'copy'; // Explicitly show this is a copy.
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private filenames: string[] = [];
|
||||||
|
|
||||||
|
public Load() {
|
||||||
|
// const fileHandler = new FileHandler('dropZone', 'output', this.filenames);
|
||||||
|
const frameHandler = new FrameHandler(document.getElementById('currentImage') as HTMLElement);
|
||||||
|
|
||||||
|
const dropZone = document.getElementById('dropZone') as HTMLElement;
|
||||||
|
const output = document.getElementById('output') as HTMLElement;
|
||||||
|
|
||||||
|
dropZone.addEventListener('dragover', Page.handleDragOver, false);
|
||||||
|
dropZone.addEventListener('drop', this.handleFileSelect, false);
|
||||||
|
|
||||||
|
const keyDown = (event: KeyboardEvent) => {
|
||||||
|
switch (event.keyCode) {
|
||||||
|
case 39: {
|
||||||
|
// right_arrow
|
||||||
|
console.log('next frame action');
|
||||||
|
frameHandler.AdvanceFrames(1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 37: {
|
||||||
|
// left arrow
|
||||||
|
console.log('previous frame action');
|
||||||
|
frameHandler.AdvanceFrames(-1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('keydown', keyDown);
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleFileSelect = (event: any) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
FileHandler.ProcessImages(event.target.result);
|
||||||
|
|
||||||
|
console.log('files: ' + this.filenames.length);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,19 @@
|
||||||
.main {
|
div {
|
||||||
display: block;
|
display: block;
|
||||||
width: 50px;
|
|
||||||
color: blue;
|
color: blue;
|
||||||
|
font-family: "Arial", Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub {
|
main {
|
||||||
display: block;
|
width: 500px;
|
||||||
width: 100px;
|
}
|
||||||
color: red;
|
|
||||||
|
#dropZone {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#currentImage {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,20 @@
|
||||||
<link rel="stylesheet" href="assets/stylesheets/main.css">
|
<link rel="stylesheet" href="assets/stylesheets/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
|
||||||
<p>Hello hello hello hello hello</p>
|
<div id="dropZone">
|
||||||
</div>
|
<div id="output"></div>
|
||||||
|
|
||||||
<div id="thing" class="sub">
|
<div id="thing" class="sub">
|
||||||
<p>Hi hihihihihihi</p>
|
<p>Hi hihihihihihi</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- canvas -->
|
||||||
|
<div id="currentImage">
|
||||||
|
<img alt="Current Image">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue