Skip to content

Commit a5eee48

Browse files
graham-trottgraham-trott
committed
Block outlines
1 parent 50a0942 commit a5eee48

File tree

3 files changed

+98
-41
lines changed

3 files changed

+98
-41
lines changed

‎iwsy/iwsy.js

Lines changed: 93 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// IWSY
22

3-
const IWSY = (container, text) => {
3+
const IWSY = (player, text) => {
44

55
let script = text;
66
let clicked = false;
@@ -23,14 +23,14 @@ const IWSY = (container, text) => {
2323
};
2424

2525
const release = step => {
26-
container.style.cursor = 'none';
26+
player.style.cursor = 'none';
2727
document.removeEventListener(`click`, release);
2828
document.onkeydown = null;
2929
step.next();
3030
};
3131

3232
const doManual = step => {
33-
container.style.cursor = 'pointer';
33+
player.style.cursor = 'pointer';
3434
document.addEventListener(`click`, release);
3535
document.onkeydown = (event) => {
3636
switch (event.code) {
@@ -42,7 +42,7 @@ const IWSY = (container, text) => {
4242
case `ArrowLeft`:
4343
break;
4444
case `Enter`:
45-
container.style.cursor = 'none';
45+
player.style.cursor = 'none';
4646
document.addEventListener(`click`, onClick);
4747
script.runMode = `auto`;
4848
release(step);
@@ -79,10 +79,10 @@ const IWSY = (container, text) => {
7979

8080
// Create a block.
8181
const createBlock = (block) => {
82-
const w = container.getBoundingClientRect().width / 1000;
83-
const h = container.getBoundingClientRect().height / 1000;
82+
const w = player.getBoundingClientRect().width / 1000;
83+
const h = player.getBoundingClientRect().height / 1000;
8484
const element = document.createElement(`div`);
85-
container.appendChild(element);
85+
player.appendChild(element);
8686
block.element = element;
8787
if (script.speed === `scan`) {
8888
element.style[`display`] = `none`;
@@ -276,7 +276,7 @@ const IWSY = (container, text) => {
276276
element.style[`background`] = block.element.style[`background`]
277277
element.style[`border`] = block.element.style[`border`]
278278
element.style[`border-radius`] = block.element.style[`border-radius`]
279-
container.appendChild(element);
279+
player.appendChild(element);
280280
const text = document.createElement(`div`);
281281
text.style[`position`] = `absolute`;
282282
text.style[`left`] = block.textPanel.style[`left`];
@@ -307,7 +307,7 @@ const IWSY = (container, text) => {
307307
block.element.style[`background`] = `url("${content.url}")`;
308308
block.element.style[`background-size`] = `cover`;
309309
block.element.style[`opacity`] = 1.0 ;
310-
container.removeChild(element);
310+
player.removeChild(element);
311311
if (!continueFlag) {
312312
step.next();
313313
}
@@ -321,7 +321,7 @@ const IWSY = (container, text) => {
321321

322322
// Compute a block size
323323
const setComputedBlockSize = (block, target, ratio) => {
324-
const boundingRect = container.getBoundingClientRect();
324+
const boundingRect = player.getBoundingClientRect();
325325
const w = boundingRect.width / 1000;
326326
const h = boundingRect.height / 1000;
327327
let width = block.width;
@@ -348,7 +348,7 @@ const IWSY = (container, text) => {
348348

349349
// Compute a block position
350350
const setComputedBlockPosition = (block, target, ratio) => {
351-
const boundingRect = container.getBoundingClientRect();
351+
const boundingRect = player.getBoundingClientRect();
352352
const w = boundingRect.width / 1000;
353353
const h = boundingRect.height / 1000;
354354
let left = block.left;
@@ -375,7 +375,7 @@ const IWSY = (container, text) => {
375375

376376
// Compute a font size
377377
const setComputedFontSize = (block, target, ratio) => {
378-
const h = Math.round(container.getBoundingClientRect().height) / 1000;
378+
const h = Math.round(player.getBoundingClientRect().height) / 1000;
379379
let size = block.fontSize;
380380
if (!isNaN(size)) {
381381
size *= h;
@@ -457,7 +457,7 @@ const IWSY = (container, text) => {
457457
for (const name in script.blocks) {
458458
const block = script.blocks[name];
459459
if (block.element) {
460-
container.removeChild(block.element);
460+
player.removeChild(block.element);
461461
block.element = null;
462462
}
463463
}
@@ -492,15 +492,15 @@ const IWSY = (container, text) => {
492492
if (colon > 0) {
493493
const aspectW = aspect.substr(0, colon);
494494
const aspectH = aspect.substr(colon + 1);
495-
const height = Math.round(parseFloat(container.offsetWidth) * aspectH / aspectW);
496-
container.style.height = `${Math.round(height)}px`;
495+
const height = Math.round(parseFloat(player.offsetWidth) * aspectH / aspectW);
496+
player.style.height = `${Math.round(height)}px`;
497497
}
498-
container.style.position = `relative`;
499-
container.style.overflow = `hidden`;
500-
container.style.cursor = `none`;
501-
container.style.border = step.border;
502-
container.style.background = step.background.split(`"`).join(`"`);
503-
container.style[`background-size`] = `cover`;
498+
player.style.position = `relative`;
499+
player.style.overflow = `hidden`;
500+
player.style.cursor = `none`;
501+
player.style.border = step.border;
502+
player.style.background = step.background.split(`"`).join(`"`);
503+
player.style[`background-size`] = `cover`;
504504
}
505505
step.next();
506506
};
@@ -509,6 +509,7 @@ const IWSY = (container, text) => {
509509
const scan = () => {
510510
script.speed = `scan`;
511511
removeBlocks();
512+
player.innerHTML = ``;
512513
doStep(script.steps[0]);
513514
};
514515

@@ -523,6 +524,70 @@ const IWSY = (container, text) => {
523524
}
524525
};
525526

527+
// Go to a specified step number
528+
const gotoStep = (target) => {
529+
script.scanTarget = target;
530+
script.singleStep = true;
531+
script.runMode = `manual`;
532+
scan();
533+
};
534+
535+
// Show a block
536+
const block = blockIndex => {
537+
player.innerHTML = ``;
538+
player.style.background = ``;
539+
const w = player.getBoundingClientRect().width / 1000;
540+
const h = player.getBoundingClientRect().height / 1000;
541+
script.blocks.forEach((block, index) => {
542+
const element = document.createElement(`div`);
543+
player.appendChild(element);
544+
if (script.speed === `scan`) {
545+
element.style[`display`] = `none`;
546+
}
547+
element.style[`position`] = `absolute`;
548+
element.style[`opacity`] = `0.5`;
549+
let val = block.left;
550+
if (!isNaN(val)) {
551+
val *= w;
552+
}
553+
element.style[`left`] = val;
554+
val = block.top;
555+
if (!isNaN(val)) {
556+
val *= h;
557+
}
558+
element.style[`top`] = val;
559+
val = block.width;
560+
if (!isNaN(val)) {
561+
val = `${val * w - 2}px`;
562+
} else {
563+
val = `calc(${val} - 2px)`
564+
}
565+
element.style[`width`] = val;
566+
val = block.height;
567+
if (!isNaN(val)) {
568+
val = `${val * h - 2}px`;
569+
} else {
570+
val = `calc(${val} - 2px)`
571+
}
572+
element.style[`height`] = val;
573+
element.style[`font-size`] = `${h * 40}px`
574+
element.innerHTML = block.name;
575+
if (index == blockIndex) {
576+
element.style[`background`] = `#ddffdd`;
577+
element.style[`border`] = `1px solid #00ff00`;
578+
element.style[`font-weight`] = `bold`
579+
element.style[`z-index`] = 10;
580+
element.style.color = `#006600`;
581+
} else {
582+
// element.style[`background`] = `#ff8888`;
583+
element.style[`border`] = `1px solid #ff0000`;
584+
element.style[`text-align`] = `right`;
585+
element.style[`z-index`] = 0;
586+
element.style.color = `#ff0000`;
587+
}
588+
});
589+
};
590+
526591
// Run the presentation
527592
const run = then => {
528593
initScript();
@@ -553,17 +618,9 @@ const IWSY = (container, text) => {
553618
step.next();
554619
};
555620

556-
// Go to a specified step number
557-
const gotoStep = (target) => {
558-
script.scanTarget = target;
559-
script.singleStep = true;
560-
script.runMode = `manual`;
561-
scan();
562-
};
563-
564621
// Restore the cursor
565622
const restoreCursor = () => {
566-
container.style.cursor = `pointer`;
623+
player.style.cursor = `pointer`;
567624
if (script.then) {
568625
script.then();
569626
script.then = null;
@@ -635,9 +692,10 @@ const IWSY = (container, text) => {
635692
// Initialize the script
636693
const initScript = () => {
637694
document.onkeydown = null;
638-
container.style.position = `relative`;
639-
container.style.overflow = `hidden`;
640-
container.style.cursor = 'none';
695+
player.innerHTML = ``;
696+
player.style.position = `relative`;
697+
player.style.overflow = `hidden`;
698+
player.style.cursor = 'none';
641699
script.speed = `normal`;
642700
script.singleStep = true;
643701
script.labels = {};
@@ -646,7 +704,7 @@ const IWSY = (container, text) => {
646704
const block = script.blocks[name];
647705
const element = block.element;
648706
if (typeof element !== `undefined`) {
649-
container.removeChild(element);
707+
player.removeChild(element);
650708
block.element = null;
651709
}
652710
}
@@ -733,7 +791,6 @@ const IWSY = (container, text) => {
733791
}
734792
};
735793

736-
container.innerHTML = ``;
737794
document.removeEventListener(`click`, init);
738795
if (script.runMode === `auto`) {
739796
document.addEventListener(`click`, onClick);
@@ -750,6 +807,7 @@ const IWSY = (container, text) => {
750807
return {
751808
setScript,
752809
gotoStep,
810+
block,
753811
run,
754812
stop,
755813
onStep

‎iwsy/resources/ecs/iwsy.txt

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,6 @@ L2:
338338
else if Action is `block`
339339
begin
340340
put property `block` of Message into N
341-
alert `Show block ` cat N
342341
iwsy block N
343342
end
344343
end

‎iwsy/resources/json/demo.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"fontSize": 50,
2929
"fontStyle": "",
3030
"fontWeight": "",
31-
"height": 300,
31+
"height": 220,
3232
"left": 0,
3333
"textAlign": "center",
3434
"textMarginLeft": "",
@@ -82,13 +82,13 @@
8282
"fontSize": 50,
8383
"fontStyle": "",
8484
"fontWeight": "",
85-
"height": 800,
85+
"height": 700,
8686
"left": 50,
8787
"textAlign": "",
8888
"textMarginLeft": 10,
8989
"textMarginTop": "",
90-
"top": 300,
91-
"width": "100%"
90+
"top": 250,
91+
"width": 900
9292
}
9393
],
9494
"content": [
@@ -179,4 +179,4 @@
179179
"duration": 1
180180
}
181181
]
182-
}
182+
}

0 commit comments

Comments
 (0)