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 {
|
||||
public Load() {
|
||||
const thing = document.getElementById('thing') as HTMLElement;
|
||||
thing.innerHTML = '<p>mememememe</p>';
|
||||
import { FileHandler } from './file_handler';
|
||||
import { FrameHandler } from './frame_handler';
|
||||
|
||||
thing.onclick = (e) => {
|
||||
thing.innerHTML = '<p>blahblahblah</p>';
|
||||
};
|
||||
export class Page {
|
||||
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;
|
||||
width: 50px;
|
||||
color: blue;
|
||||
font-family: "Arial", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.sub {
|
||||
display: block;
|
||||
width: 100px;
|
||||
color: red;
|
||||
main {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#dropZone {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#currentImage {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,14 +7,21 @@
|
|||
<link rel="stylesheet" href="assets/stylesheets/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<p>Hello hello hello hello hello</p>
|
||||
|
||||
<div id="dropZone">
|
||||
<div id="output"></div>
|
||||
|
||||
<div id="thing" class="sub">
|
||||
<p>Hi hihihihihihi</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="thing" class="sub">
|
||||
<p>Hi hihihihihihi</p>
|
||||
<!-- canvas -->
|
||||
<div id="currentImage">
|
||||
<img alt="Current Image">
|
||||
</div>
|
||||
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue