From 93eb1b18899505ed2fb01070bbbf7777760d54e9 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 30 Apr 2025 20:20:13 +0200 Subject: [PATCH] simple sine visual --- .dist/icon.png | Bin 0 -> 1896 bytes .dist/module.json | 65 ++++++++++++++++++++++++ .dist/server.js | 1 + .dist/user.html | 1 + .dist/user.js | 95 +++++++++++++++++++++++++++++++++++ module.json | 84 +++++++++++++++++++++++-------- server/server.ts | 17 ++++++- user/index.html | 12 +++++ user/scss/layout.scss | 13 +++++ user/ts/user.ts | 114 ++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 381 insertions(+), 21 deletions(-) create mode 100644 .dist/icon.png create mode 100644 .dist/module.json create mode 100644 .dist/server.js create mode 100644 .dist/user.html create mode 100644 .dist/user.js diff --git a/.dist/icon.png b/.dist/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..be5e1311a63d86de3d19593b91a7a31cf86e3ed4 GIT binary patch literal 1896 zcmV-u2bcJXP)n6jKlxa1>~qR-`~tiO7;DsDc?Yv_rdj z4-yP8v>2BB0hl47$;5z%Amx9+Y#_A@1B4Vrs!WNL3?Q`xTEO662V>VC=RM#1?!7jC z*JncS`JRs-@7;IqIp>~BWH|-0f8YjvN8ivJ`Ymu!O@+)7LYG$lUSuW4@Cg|@#8{QI zGfsGf!VC0-^UP?m=7Exl)3do$t~YOz?csJ-)C{a(Nz@ z(xOZQ_0nDHqi(uQofM+$^f`S-L@D~04(WhC(tCPKd-MnW8Axl9C}Wi?R!UC+S}=+@ z)^Y42p^%QTjyOiqq9j+=BK;7c0~1K%RM_xhIzx^{n(aL zc?U1?7*PzN2ki(VfB=GMM-PS&#bdn04$=}Fx6yCNd=aLI3VU~3h+_n8LQ>l>f;hGW zIUgfx(2sRxydk9EYsApyNp=@vcr7HuO%v6{oGS$GbcPprs3@NB5X%alg^snXCkRfk zfLj`bXEeBl1)NmLd?ING(nyFptr9wfk&v1m^+qxzAlSftje-lcxGy;G=r*575Q0-o zqfxWqLM<9GEwsEg5yvVE!7c_2h%MD)pse3%Dvam)0PdmHkl0c^TJgq3lMPd1qgBGa zRFiVgV$_7tegUtqA`l47M#otPS)b5mL7(3^1cKkA?fhku4zc1ZKBEvwe2$;!6gwp4 zf*6B9${|aa#tXcPZITXm7=b|ACEw+vM)HDZ9R%!E5&~EAoiv%%A-K~a*0+mRbJ?U4 zEnFp`)!`XE@|IL76uro@KFxT2m4TqV6bv{x$cw6?yBz}E)8fjhl9&X<*!!vSc?5Ui z36|{!8e|pptbu57w$Z^+Us4esW@9nw;svk4%(4V$JYYZ8DTUYs;;i6=nxYc&CAm60 zuXA3-H{*a|cfuoTAh|A|p9-^qvwgYD^8f7k)!%|Xg$%@WPDZ`nX`38FS&mA;JVJzHFRd9RkG)g+X@QxQOIJMoEUv zb_EPj2awAqt%!`wXVS{LmNCK6o{i8_qBFycJ(a9D!zimlm+*LRbGV)vq>CLN5gngl z!nr_OQXJ&J;`+WJuNV$;?hw`)7I7&SvQ;J;y$H-RJl13wG_Voi5jizvjMD5xMHnu} z`3tym4Eh)bX|eK#B2HpUSVEgKu+Cx+Y1wYQ#? zp}-V9mmZ|HOM%mtvx+BdGH;M#nn5zEuNX?hFvC;)CB{2uc#oP&QV^&|5_=i0@5G1y z%?xi>RZ18F4Y6c|7`}gr4?kmudkZTSb1n~oo=|#_;d~}OoTEVbaYDS^A<&deL4e`S zZp0FI4{f6QD`5R3X#Ho+SiWhBYGK=)(_V5N+vcdgaguD`I!i>hZ=R-F z+&-@*o1HJXwi+muRtahlYC&Ca?gjVHz$D@#^)_^q|Jhn$R` znyY(GOjf47e#&rreZ}m2H=?}OwjhEztVtcTw1zoEDsj+KrH|U`zdUN|3kp#iwa_&p zI;Vf=6CKcp%cHh-Dt^?K&4;ZK)sNe&AGlaQa?{`D6FEX~`2^U0>@M>a@SXWY3 {api.onClientConnects(function(n){console.log("Client connected: "+n.getClientID())}),api.onClientDisconnects(function(n){console.log("Client disconnected: "+n.getClientID())}),api.onNewClient(function(n){console.log("Client connected via legacy handler: "+n.getClientID())});}; \ No newline at end of file diff --git a/.dist/user.html b/.dist/user.html new file mode 100644 index 0000000..e3ec870 --- /dev/null +++ b/.dist/user.html @@ -0,0 +1 @@ +Sine Wave Visualization
\ No newline at end of file diff --git a/.dist/user.js b/.dist/user.js new file mode 100644 index 0000000..0624442 --- /dev/null +++ b/.dist/user.js @@ -0,0 +1,95 @@ +(()=>{var api = new ModuleApi(); +// Configuration with default values +var config = { + amplitude: 50, + frequency: 1, + speed: 1, + color: '#4287f5', + lineWidth: 3 +}; +// Get DOM elements +var container = api.dom(); +var canvas = container.querySelector('#sineCanvas'); +var ctx = canvas.getContext('2d'); +// Animation variables +var animationId; +var startTime = Date.now(); +// Initialize the canvas +function initCanvas() { + var rect = container.getBoundingClientRect(); + canvas.width = rect.width; + canvas.height = rect.height; +} +// Draw the sine wave +function drawSineWave() { + if (!ctx) + return; + // Clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + // Set line style + ctx.strokeStyle = config.color; + ctx.lineWidth = config.lineWidth; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + // Draw the wave + var now = Date.now(); + var elapsed = (now - startTime) / 1000; + var timeOffset = elapsed * config.speed; + ctx.beginPath(); + // Start from the left side of the canvas + var centerY = canvas.height / 2; + for (var x = 0; x <= canvas.width; x++) { + // Calculate the y position for each x point along the sine wave + var xValue = (x / canvas.width) * Math.PI * 2 * config.frequency; + var sineValue = Math.sin(xValue + timeOffset); + var y = centerY + sineValue * config.amplitude; + if (x === 0) { + ctx.moveTo(x, y); + } + else { + ctx.lineTo(x, y); + } + } + ctx.stroke(); + // Request the next frame + animationId = requestAnimationFrame(drawSineWave); +} +// Start the animation +function startAnimation() { + if (animationId) { + cancelAnimationFrame(animationId); + } + startTime = Date.now(); + animationId = requestAnimationFrame(drawSineWave); +} +// Handle window resize +function handleResize() { + initCanvas(); + drawSineWave(); +} +// Setup property listeners +api.onPropertyUpdate('amplitude', function (value) { + config.amplitude = value; +}); +api.onPropertyUpdate('frequency', function (value) { + config.frequency = value; +}); +api.onPropertyUpdate('speed', function (value) { + config.speed = value; +}); +api.onPropertyUpdate('color', function (value) { + config.color = value; +}); +api.onPropertyUpdate('lineWidth', function (value) { + config.lineWidth = value; +}); +// Handle resize events +api.onResize(function () { + handleResize(); +}); +// Initialize +window.addEventListener('load', function () { + initCanvas(); + startAnimation(); +}); +})(); \ No newline at end of file diff --git a/module.json b/module.json index 7942ebe..ab25231 100644 --- a/module.json +++ b/module.json @@ -1,21 +1,65 @@ { - "name": "GetiyoSimpleVisual", - "type": "normal", - "author": "marco", - "category": "AIFx", - "default_reference_properties": {}, - "default_module_properties": {}, - "triggers": {}, - "conditions": { - "server": {}, - "client": {} - }, - "default_size": { - "width": 300, - "height": 300 - }, - "default_location": { - "x": 100, - "y": 100 - } -} \ No newline at end of file + "name": "GetiyoSimpleVisual", + "type": "normal", + "author": "marco", + "category": "AIFx", + "default_reference_properties": { + "amplitude": { + "type": "slider", + "title": "Amplitude", + "description": "Controls the height of the sine wave", + "value": 50, + "min": 5, + "max": 100, + "step": 1 + }, + "frequency": { + "type": "slider", + "title": "Frequency", + "description": "Controls how many waves are displayed", + "value": 1, + "min": 0.1, + "max": 5, + "step": 0.1 + }, + "speed": { + "type": "slider", + "title": "Speed", + "description": "Controls how fast the wave animates", + "value": 1, + "min": 0, + "max": 5, + "step": 0.1 + }, + "color": { + "type": "color", + "title": "Color", + "description": "The color of the sine wave", + "value": "#4287f5" + }, + "lineWidth": { + "type": "slider", + "title": "Line Width", + "description": "Thickness of the sine wave line", + "value": 3, + "min": 1, + "max": 10, + "step": 1 + } + }, + "default_module_properties": {}, + "triggers": {}, + "conditions": { + "server": {}, + "client": {} + }, + "default_size": { + "width": 300, + "height": 300 + }, + "default_location": { + "x": 100, + "y": 100 + }, + "build": "0001" +} diff --git a/server/server.ts b/server/server.ts index f1514ae..52daec5 100644 --- a/server/server.ts +++ b/server/server.ts @@ -1,2 +1,17 @@ declare const api: ModuleServerApi; -api.onNewClient((client) => {}); + +// Handle new client connections +api.onClientConnects((client) => { + console.log(`Client connected: ${client.getClientID()}`); +}); + +// Handle client disconnections +api.onClientDisconnects((client) => { + console.log(`Client disconnected: ${client.getClientID()}`); +}); + +// For backward compatibility +api.onNewClient((client) => { + // This is the older API but kept for backward compatibility + console.log(`Client connected via legacy handler: ${client.getClientID()}`); +}); diff --git a/user/index.html b/user/index.html index e69de29..102c93f 100644 --- a/user/index.html +++ b/user/index.html @@ -0,0 +1,12 @@ + + + + + Sine Wave Visualization + + +
+ +
+ + \ No newline at end of file diff --git a/user/scss/layout.scss b/user/scss/layout.scss index e69de29..eef8733 100644 --- a/user/scss/layout.scss +++ b/user/scss/layout.scss @@ -0,0 +1,13 @@ +.sine-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + #sineCanvas { + width: 100%; + height: 100%; + background: transparent; + } +} \ No newline at end of file diff --git a/user/ts/user.ts b/user/ts/user.ts index 8940dd6..8486479 100644 --- a/user/ts/user.ts +++ b/user/ts/user.ts @@ -1 +1,115 @@ const api: ModuleClientApi = new ModuleApi(); + +// Configuration with default values +const config = { + amplitude: 50, + frequency: 1, + speed: 1, + color: '#4287f5', + lineWidth: 3 +}; + +// Get DOM elements +const container = api.dom(); +const canvas = container.querySelector('#sineCanvas') as HTMLCanvasElement; +const ctx = canvas.getContext('2d'); + +// Animation variables +let animationId: number; +let startTime = Date.now(); + +// Initialize the canvas +function initCanvas() { + const rect = container.getBoundingClientRect(); + canvas.width = rect.width; + canvas.height = rect.height; +} + +// Draw the sine wave +function drawSineWave() { + if (!ctx) return; + + // Clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Set line style + ctx.strokeStyle = config.color; + ctx.lineWidth = config.lineWidth; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + // Draw the wave + const now = Date.now(); + const elapsed = (now - startTime) / 1000; + const timeOffset = elapsed * config.speed; + + ctx.beginPath(); + + // Start from the left side of the canvas + const centerY = canvas.height / 2; + + for (let x = 0; x <= canvas.width; x++) { + // Calculate the y position for each x point along the sine wave + const xValue = x / canvas.width * Math.PI * 2 * config.frequency; + const sineValue = Math.sin(xValue + timeOffset); + const y = centerY + sineValue * config.amplitude; + + if (x === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + } + + ctx.stroke(); + + // Request the next frame + animationId = requestAnimationFrame(drawSineWave); +} + +// Start the animation +function startAnimation() { + if (animationId) { + cancelAnimationFrame(animationId); + } + startTime = Date.now(); + animationId = requestAnimationFrame(drawSineWave); +} + +// Handle window resize +function handleResize() { + initCanvas(); + drawSineWave(); +} + +// Setup property listeners +api.onPropertyUpdate('amplitude', (value) => { + config.amplitude = value; +}); + +api.onPropertyUpdate('frequency', (value) => { + config.frequency = value; +}); + +api.onPropertyUpdate('speed', (value) => { + config.speed = value; +}); + +api.onPropertyUpdate('color', (value) => { + config.color = value; +}); + +api.onPropertyUpdate('lineWidth', (value) => { + config.lineWidth = value; +}); + +// Handle resize events +api.onResize(() => { + handleResize(); +}); + +// Initialize +window.addEventListener('load', () => { + initCanvas(); + startAnimation(); +});