Skip to content
Snippets Groups Projects
Commit a6a7789a authored by Anderson Tavares's avatar Anderson Tavares Committed by Anderson Tavares
Browse files

Adding Image Segmentation

- Adding pictures
- Pausing before showing result
parent 6f0485ba
No related branches found
No related tags found
No related merge requests found
......@@ -21,15 +21,12 @@ export class HTMLBundler {
// Create distribution folder
await fs.mkdirp("dist/doc");
// Join all HTML parts
const result = await this.processIndex("src/doc/index.html");
if (result) {
const test = await fs.writeFile("dist/doc/index.html", result);
this._building = false;
return test;
}
this._building = false;
return Promise.all([
this.buildIndex(),
this.buildImg(),
]).then(() => this._building = false);
}
public async watch(compress: boolean = false) {
await this.build();
this._emitter.emit("end");
......@@ -62,4 +59,17 @@ export class HTMLBundler {
return result;
}
}
private buildImg() {
return fs.copy("src/doc/img", "dist/doc/img");
}
private async buildIndex() {
// Join all HTML parts
const result = await this.processIndex("src/doc/index.html");
if (result) {
const test = await fs.writeFile("dist/doc/index.html", result);
this._building = false;
return test;
}
}
}
<div>
tchau
</div>
\ No newline at end of file
<h1 id="title">Image Segmentation</h1>
<div id="images">
<img id="image" src="img/image-segmentation-original.png" alt="">
<img id="mask" src="img/image-segmentation-mask.png" alt="">
<img id="result" src="img/image-segmentation-result.png" alt="">
</div>
src/doc/img/image-segmentation-mask.png

2.52 KiB

src/doc/img/image-segmentation-original.png

159 KiB

src/doc/img/image-segmentation-result.png

74.1 KiB

......@@ -11,6 +11,7 @@
<div id="container">
<div id="canvas">
%cover%
%image-segmentation%
</div>
</div>
<div id="scrubber">
......
.sans {
.sans, h1 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
html, body {
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
}
h1{
font-size: 4vw;
margin-bottom: 1vh;
}
......@@ -6,3 +6,4 @@
@import "general/layout";
@import "module/scrubber";
@import "module/cover";
@import "module/image-segmentation";
<<<<<<< HEAD
#image-segmentation-image {
}
#image-segmentation-result {
=======
#image-segmentation {
transform: translate(0vw, -20vh);
padding: 2vmin;
display: flex;
flex-direction: column;
width: 50vw;
}
#image-segmentation-images {
display: flex;
>>>>>>> Cover, Deck, Scrubber, Transitions, Animations
}
\ No newline at end of file
import { Scrubber } from "./scrubber";
import { SlidesInfo } from "./slides-info";
import { SlideElementAnimation } from "./slide-element-animation";
import { SlidesInfo } from "./slides-info";
export class Deck {
private _animations: Animation[];
private _canvas: HTMLElement;
......@@ -55,7 +55,7 @@ export class Deck {
transform: [
this.getCSSTranslation(info.positions[i][0], info.positions[i][1]),
this.getCSSTranslation(info.positions[i + 1][0], info.positions[i + 1][1]),
]
],
}, {
delay: times[0],
duration: times[1] - times[0],
......@@ -112,7 +112,7 @@ export class Deck {
delay: timeRange[0],
duration: timeRange[1] - timeRange[0],
endDelay: this._totalDuration - timeRange[1],
fill: "forwards"
fill: "both",
}), document.timeline));
}
public createGroupAnimation(elements: HTMLElement[], timeRange: [number, number], fx: AnimationKeyFrame[]) {
......
import { Deck } from "./deck";
import * as fx from "./fx";
import { SlidesInfo } from "./slides-info";
import { getQueryStrings } from "./query-string";
import { SlidesInfo } from "./slides-info";
const params = getQueryStrings();
......@@ -11,32 +11,37 @@ document.addEventListener("DOMContentLoaded", () => {
const cover = $("cover");
const coverTitle = $("cover-title");
const coverDetails = $("cover-details");
const imageSegmentation = $("image-segmentation");
const imageSegmentationTitle = $("image-segmentation-title");
const imageSegmentationImage = $("image-segmentation-image");
const imageSegmentationMask = $("image-segmentation-mask");
const imageSegmentationResult = $("image-segmentation-result");
let deck: Deck;
const slides: SlidesInfo = {
positions: [
[0,0],
[0,0],
[0,50],
[100,-50],
[0, 0],
[0, 0],
[-20, 60],
[10, 70],
],
times: [
[0, 1000],
[1000, 2000],
[2000, 3000]
]
}
[3500, 4500],
],
};
const pauses = [0, 1000, 2000];
const pauses = [0, 1000, 3000, 3500];
deck = new Deck(slides, canvas, pauses);
// coverTitle.animate(fx.fxFadeInLeft, { easing: "ease-in-out", duration: 1000 });
// const anim = coverDetails.animate(fx.fxFadeInLeft,{duration: 1000, delay: 200, easing: "ease-in-out", fill: "forwards"});
// const animations: { elements: HTMLElement[][], times: Array<[number, number]>, fx: AnimationKeyFrame[][] } = {
// elements: [],times: [], fx: []);
deck.addElementAnimation(coverTitle, [0, 1000], fx.fxFadeInLeft);
deck.addElementAnimation(coverDetails, [0, 1000], fx.fxFadeInLeft);
deck.addElementAnimation(imageSegmentationTitle, [1500, 2000], fx.fxFadeIn);
deck.addElementAnimation(imageSegmentationImage, [2000, 2500], fx.fxFadeIn);
deck.addElementAnimation(imageSegmentationMask, [2500, 3000], fx.fxFadeIn);
deck.addElementAnimation(imageSegmentationResult, [3000, 3500], fx.fxFadeIn);
// deck.add(coverTitle.animate(fx.fxFadeInLeft, { easing: "ease-in-out", duration: 1000 }));
// deck.add(coverDetails.animate(fx.fxFadeInLeft, {duration: 1000, delay: 0, easing: "ease-in-out"}));
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment