won't export with missing data

master
Beau Blyth 2019-10-03 16:33:32 -07:00
parent bda09fa473
commit 6c0cf01164
4 changed files with 103 additions and 17 deletions

View File

@ -30,12 +30,14 @@ export class Page {
private projectData: IProjectData; private projectData: IProjectData;
private filenameInput: HTMLInputElement; private filenameInput: HTMLInputElement;
private message: HTMLElement;
public Load() { public Load() {
// defining blank slate animation data // defining blank slate animation data
this.animationData = { this.animationData = {
pins: [], pins: [],
originX: 0, originX: -1,
originY: 0, originY: -1,
frameRate: 30, frameRate: 30,
loop: true, loop: true,
frames: [ frames: [
@ -54,6 +56,7 @@ export class Page {
heightRatio: 0 heightRatio: 0
}; };
this.message = document.getElementById('message') as HTMLElement;
const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement; const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
const imageElement = new Image(); const imageElement = new Image();
@ -186,10 +189,33 @@ export class Page {
} }
private CheckAllFramesForPinData(): boolean { private CheckAllFramesForPinData(): boolean {
// for (let frame = 0; frame < this.animationData.frames.length; frame++) { const availablePins: number[] = this.pinHandler.GetAvailablePins();
// this.animationData.frames[frame][pinIDChecking]; let passTest: boolean = true;
// } let passPinDataTest: boolean = true;
return true; let errorString: string = '';
let pinErrorString: string = '';
for (let frame = 0; frame < this.animationData.frames.length; frame++) {
for (let p = 0; p < availablePins.length; p++) {
// loop through available pinIDs
const pinIDChecking = availablePins[p];
if (this.animationData.frames[frame][pinIDChecking] === undefined) {
pinErrorString += 'Frame ' + frame + ', ' + this.pinHandler.GetPinName(pinIDChecking) + '\n';
passPinDataTest = false;
}
}
}
// construct error string
if (this.animationData.originX === -999 || this.animationData.originY === -999) {
errorString = 'Missing Origin data. \n';
passTest = false;
}
if (!passPinDataTest) {
// warn user if missing pin data
errorString += 'Missing the following pin data: \n\n' + pinErrorString;
passTest = false;
}
this.message.innerText = errorString;
return passTest;
} }
private handleFileSelect = async (event: DragEvent) => { private handleFileSelect = async (event: DragEvent) => {
@ -222,8 +248,8 @@ export class Page {
private ResetProgram = () => { private ResetProgram = () => {
// defining blank slate animation data // defining blank slate animation data
this.animationData.pins = []; this.animationData.pins = [];
this.animationData.originX = 0; this.animationData.originX = -999;
this.animationData.originY = 0; this.animationData.originY = -999;
this.animationData.frameRate = 30; this.animationData.frameRate = 30;
this.animationData.loop = true; this.animationData.loop = true;
this.animationData.frames = [ { filename: '' } ]; this.animationData.frames = [ { filename: '' } ];

View File

@ -42,10 +42,10 @@ export class PinHandler {
const animationPinData: IPin[] = []; const animationPinData: IPin[] = [];
for (let i = 1; i < this.allPinContainers.length; i++) { for (let i = 1; i < this.allPinContainers.length; i++) {
console.log(this.allPinContainers[i].children); console.log(this.allPinContainers[i].children);
let pinName: string = this.allPinContainers[i].getElementsByTagName('input')[0].value; const pinName: string = this.GetPinNameFromDiv(this.allPinContainers[i]);
if (pinName !== null && pinName !== undefined) { if (pinName !== null && pinName !== undefined) {
let newPinData: IPin = { let newPinData: IPin = {
id: parseInt(this.allPinContainers[i].id.split('_')[1]), id: this.GetPinNumberFromID(this.allPinContainers[i].id),
name: pinName name: pinName
}; };
animationPinData.push(newPinData); animationPinData.push(newPinData);
@ -57,13 +57,42 @@ export class PinHandler {
public RemoveAllPins = () => { public RemoveAllPins = () => {
for (let i = 1; i < this.allPinContainers.length; i++) { for (let i = 1; i < this.allPinContainers.length; i++) {
const pinID: number = parseInt(this.allPinContainers[i].id.split('_')[1]); const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id);
this.RemovePinDataForID(pinID); this.RemovePinDataForID(pinID);
this.allPinContainers[i].remove(); this.allPinContainers[i].remove();
} }
this.ResetPinSelection(); this.ResetPinSelection();
}; };
public GetAvailablePins = (): number[] => {
const availablePins: number[] = [];
for (let i = 1; i < this.allPinContainers.length; i++) {
const pinID: number = this.GetPinNumberFromID(this.allPinContainers[i].id);
availablePins.push(pinID);
}
console.log('available pins are: ' + availablePins);
return availablePins;
};
public GetPinName = (pinID: number): string => {
for (let p = 0; p < this.allPinContainers.length; p++) {
const pinContainer = this.allPinContainers[p];
if (this.GetPinNumberFromID(pinContainer.id) === pinID) {
const pinName: string = this.GetPinNameFromDiv(pinContainer);
return pinName;
}
}
return 'failed_to_return_pin_name_for_pin_' + pinID.toString();
};
private GetPinNameFromDiv = (pinElement: HTMLElement): string => {
return pinElement.getElementsByTagName('input')[0].value;
};
private GetPinNumberFromID = (id: string): number => {
return parseInt(id.split('_')[1]);
};
private ResetPinSelection = () => { private ResetPinSelection = () => {
this.DeselectAllPinContainers(); this.DeselectAllPinContainers();
this.allPinContainers[0].className = 'pinButtonContainerSelected'; this.allPinContainers[0].className = 'pinButtonContainerSelected';

View File

@ -8,7 +8,7 @@ div {
width: 64px; width: 64px;
} }
#instructions { .instruction {
font-size: 12px; font-size: 12px;
margin: auto; margin: auto;
width: 50%; width: 50%;
@ -17,10 +17,41 @@ div {
text-align: center; text-align: center;
} }
.instruction { .frame {
display: block; width: 32px;
height: 32px;
color: #101e24; color: #101e24;
font-family: "Arial", Helvetica, sans-serif; width: 50%;
border: 2px solid #3f4446;
padding: 1px;
background-color: rgb(90, 92, 95);
}
.frameActive {
width: 32px;
height: 32px;
color: #101e24;
width: 50%;
border: 2px solid #0865df;
padding: 1px;
background-color: rgb(35, 75, 185);
}
.frameWarning {
width: 32px;
height: 32px;
color: #101e24;
width: 50%;
border: 2px solid rgb(233, 7, 75);
padding: 1px;
background-color: rgb(83, 14, 20);
}
.errorMessage {
font-size: 12px;
color: rgb(233, 7, 75);
width: 50%;
border: 2px solid rgb(233, 7, 75);
padding: 1px;
background-color: rgb(83, 14, 20);
} }
.warning { .warning {

4
dist/index.html vendored
View File

@ -9,11 +9,11 @@
<body> <body>
<div id="dropZone"> <div id="dropZone">
<div id = "topbar"> <div id = "topbar">
<div id="instructions" class="instruction"> <div class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p> <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
</div> </div>
</div> </div>
<!-- <div id="message" class="errorMessage"></div> -->
<div id="frameNumber" class="warning"> <div id="frameNumber" class="warning">
<p></p> <p></p>
</div> </div>