Skip to content
This repository has been archived by the owner on Nov 23, 2023. It is now read-only.

Commit

Permalink
Merge pull request #223 from COS301-SE-2023/feature/webviews
Browse files Browse the repository at this point in the history 
Feature/webviews
  • Loading branch information
@ArmandKrynauw
ArmandKrynauw authored Sep 28, 2023
2 parents ace8599 + 280c027 commit 582ac7c
Show file tree
Hide file tree
Showing 10 changed files with 297 additions and 56 deletions.
200 changes: 193 additions & 7 deletions blix-plugins/blink/src/main.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ const nodes = {
defaultValue: 100,
triggerUpdate: true,
},
{}
{ min: 0 }
);
}
const getTransform = addTransformInput(ui, ["position", "rotation"]);
Expand Down Expand Up @@ -526,7 +526,7 @@ const nodes = {
label: "Text",
defaultValue: "input text",
triggerUpdate: true,
}, {});
}, { multiline: true });

ui.addDropdown({
componentId: "fontFamily",
Expand Down Expand Up @@ -689,16 +689,16 @@ const nodes = {
{
componentId: "opacity",
label: "Opacity",
defaultValue: 100,
defaultValue: 1,
triggerUpdate: true,
},
{ min: 0, max: 100, set: 0.1 }
{ min: 0, max: 1, step: 0.01 }
);
addTweakability(ui);

nodeBuilder.define(async (input, uiInput, from) => {
// Apply filter to outermost clump
const clumps = [1, 2, 3, 4, 5].map(n => input[`clump${n}`]).filter(c => c != null);
const clumps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(n => input[`clump${n}`]).filter(c => c != null);

// Construct assets union
const assets = {};
Expand Down Expand Up @@ -729,6 +729,192 @@ const nodes = {
nodeBuilder.addInput("Blink clump", "clump5", "Clump 5");
nodeBuilder.addOutput("Blink clump", "res", "Result");
},
"repeat": (context) => {
const nodeBuilder = context.instantiate("Blink/Utils", "repeat");
nodeBuilder.setTitle("Repeat");
nodeBuilder.setDescription("Repeat a clump element multiple times with an offset");

const ui = nodeBuilder.createUIBuilder();
ui.addSlider(
{
componentId: "repeat",
label: "Repeat",
defaultValue: 1,
triggerUpdate: true,
},
{ min: 0, max: 50, step: 1 }
);
ui.addNumberInput(
{
componentId: "offsetX",
label: "Offset X",
defaultValue: 0,
triggerUpdate: true,
}, { step: 1 }
);
ui.addNumberInput(
{
componentId: "offsetY",
label: "Offset Y",
defaultValue: 0,
triggerUpdate: true,
}, { step: 1 }
);
ui.addNumberInput(
{
componentId: "offsetRot",
label: "Rotation Offset",
defaultValue: 0,
triggerUpdate: true,
}, { step: 1 }
);
const getTransform = addTransformInput(ui, ["position"]);
ui.addSlider(
{
componentId: "opacity",
label: "Opacity",
defaultValue: 1,
triggerUpdate: true,
},
{ min: 0, max: 1, step: 0.01 }
);
addTweakability(ui);

nodeBuilder.define(async (input, uiInput, from) => {
const clump = input["clump"];

if (clump == null) return { "res": null };

const assets = clump.assets;

// Construct parent clump
const parent = {
class: "clump",
nodeUUID: uiInput["tweaks"].nodeUUID,
changes: uiInput["diffs"]?.uiInputs ?? [],
transform: getTransform(uiInput),
opacity: uiInput["opacity"],
elements: Array.from({ length: uiInput["repeat"] }, (_, i) => ({
...clump.content,
transform: {
...clump.content.transform,
position: {
x: clump.content.transform.position.x + i * uiInput["offsetX"],
y: clump.content.transform.position.y + i * uiInput["offsetY"],
},
rotation: clump.content.transform.rotation + i * uiInput["offsetRot"],
}
})),
}

return { "res": { assets, content: parent } };
});

nodeBuilder.setUI(ui);
nodeBuilder.addInput("Blink clump", "clump", "Clump");
nodeBuilder.addOutput("Blink clump", "res", "Result");
},
"particle": (context) => {
const nodeBuilder = context.instantiate("Blink/Utils", "particle");
nodeBuilder.setTitle("Particle");
nodeBuilder.setDescription("Scatter a clump randomly within a fixed region");

const ui = nodeBuilder.createUIBuilder();
ui.addSlider(
{
componentId: "count",
label: "Count",
defaultValue: 1,
triggerUpdate: true,
},
{ min: 0, max: 50, step: 1 }
);
ui.addNumberInput(
{
componentId: "boundW",
label: "Bounds W",
defaultValue: 400,
triggerUpdate: true,
}, { min: 0, step: 1 }
);
ui.addNumberInput(
{
componentId: "boundH",
label: "Bounds H",
defaultValue: 400,
triggerUpdate: true,
}, { min: 0, step: 1 }
);
ui.addNumberInput(
{
componentId: "boundRot",
label: "Rotation Bound",
defaultValue: 0,
triggerUpdate: true,
}, { step: 1 }
);
const getTransform = addTransformInput(ui, ["position", "rotation", "scale"]);
ui.addSlider(
{
componentId: "opacity",
label: "Opacity",
defaultValue: 1,
triggerUpdate: true,
},
{ min: 0, max: 1, step: 0.01 }
);
ui.addSlider(
{
componentId: "seed",
label: "Seed",
defaultValue: 1,
triggerUpdate: true,
},
{ min: 0, max: 1000, step: 1 }
);
addTweakability(ui);


nodeBuilder.define(async (input, uiInput, from) => {
const clump = input["clump"];

if (clump == null) return { "res": null };

const assets = clump.assets;

let seed = uiInput["seed"];
function random() {
var x = Math.sin(seed++) * 10000;
return x - Math.floor(x);
}

// Construct parent clump
const parent = {
class: "clump",
nodeUUID: uiInput["tweaks"].nodeUUID,
changes: uiInput["diffs"]?.uiInputs ?? [],
transform: getTransform(uiInput),
opacity: uiInput["opacity"],
elements: Array.from({ length: uiInput["count"] }, (_, i) => ({
...clump.content,
transform: {
...clump.content.transform,
position: {
x: clump.content.transform.position.x + (2*random()-1) * uiInput["boundW"],
y: clump.content.transform.position.y + (2*random()-1) * uiInput["boundH"],
},
rotation: clump.content.transform.rotation + (2*random()-1) * uiInput["boundRot"],
}
})),
}

return { "res": { assets, content: parent } };
});

nodeBuilder.setUI(ui);
nodeBuilder.addInput("Blink clump", "clump", "Clump");
nodeBuilder.addOutput("Blink clump", "res", "Result");
},
"filter": (context) => {
const nodeBuilder = context.instantiate("Blink/Utils", "filter");
nodeBuilder.setTitle("Filter");
Expand Down Expand Up @@ -847,7 +1033,7 @@ const nodes = {
defaultValue: 1920,
triggerUpdate: true,
},
{ step: 1 }
{ min: 0, step: 1 }
);
ui.addNumberInput(
{
Expand All @@ -856,7 +1042,7 @@ const nodes = {
defaultValue: 1080,
triggerUpdate: true,
},
{ step: 1 }
{ min: 0, step: 1 }
);
ui.addColorPicker({
componentId: "canvasColor",
Expand Down
19 changes: 18 additions & 1 deletion blix-plugins/blink/webview/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,8 @@
// link.click();
// link.remove();
}
let showDebug = false;
</script>

<svelte:window on:keydown={keydown} on:keyup={keyup} />
Expand All @@ -228,11 +230,26 @@
</div>

<div class="fullScreen">
{#if showDebug}
<Debug data={$media} />
<!-- {JSON.stringify($media, null, 2)} -->
{/if}

<div class="hover">
<input type="checkbox" bind:checked="{showDebug}" />
</div>
</div>

<style>
.hover {
position: absolute;
top: 0.4em;
right: 0.4em;
accent-color: #f43e5c;
outline: none;
pointer-events: all;
}
canvas {
position: absolute;
margin: 0px;
Expand Down
7 changes: 5 additions & 2 deletions blix-plugins/blink/webview/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ type SelectionState = {
prevMousePos: PIXI.Point
};

const MAX_CHILDREN_IN_CLUMP = 5;
const MAX_CHILDREN_IN_CLUMP = 50;

let selection: SelectionState = null;

Expand Down Expand Up @@ -138,6 +138,9 @@ export async function renderScene(
await new Promise((resolve, reject) => setTimeout(resolve, 50));
}

// Reset selection
// selection = null;

const { pixiClump, changed } = renderClump(
blink,
0,
Expand Down Expand Up @@ -380,7 +383,7 @@ function renderClump(

if (diffs.has("opacity")) {
if (clump.opacity) {
resClump.alpha = Math.min(1, Math.max(0, clump.opacity / 100.0));
resClump.alpha = Math.min(1, Math.max(0, clump.opacity));
}
}

Expand Down
4 changes: 2 additions & 2 deletions blix-plugins/input-plugin/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ const nodes = {

const ui = nodeBuilder.createUIBuilder();
ui
.addSlider(
.addNumberInput(
{
componentId: "value",
label: "Input number",
defaultValue: 0,
triggerUpdate: true,
},
{ min: 0, max: 100, set: 0.1 }
{ set: 0.1 }
);
nodeBuilder.setUI(ui);

Expand Down
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
"@popperjs/core": "^2.11.8",
"@types/chokidar": "^2.1.3",
"archiver": "^6.0.1",
"blix_svelvet": "^1.0.19",
"blix_svelvet": "^1.0.20",
"child_process": "^1.0.2",
"chokidar": "^3.5.3",
"cohere-ai": "^5.1.0",
Expand Down
Loading

0 comments on commit 582ac7c

Please sign in to comment.