marco/GetiyoSimpleAIVisual
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simple sine visual

Browse Source
This commit is contained in:
Marco
2025-04-30 20:20:13 +02:00
parent 3309e1bc45
commit 93eb1b1889
10 changed files with 381 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.dist/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

65
.dist/module.json Normal file
View File

@@ -0,0 +1,65 @@
{
"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"
}

1
.dist/server.js Normal file
View File

@@ -0,0 +1 @@
module.exports = (api) => {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())});};

1
.dist/user.html Normal file
View File

@@ -0,0 +1 @@
<style>.sine-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sine-container #sineCanvas{width:100%;height:100%;background:0 0}</style><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Sine Wave Visualization</title></head><body><div class="sine-container"><canvas id="sineCanvas"></canvas></div></body></html>

95
.dist/user.js Normal file
View File

@@ -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();
});
})();

82
module.json
View File

@@ -1,21 +1,65 @@
{ {
"name": "GetiyoSimpleVisual", "name": "GetiyoSimpleVisual",
"type": "normal", "type": "normal",
"author": "marco", "author": "marco",
"category": "AIFx", "category": "AIFx",
"default_reference_properties": {}, "default_reference_properties": {
"default_module_properties": {}, "amplitude": {
"triggers": {}, "type": "slider",
"conditions": { "title": "Amplitude",
"server": {}, "description": "Controls the height of the sine wave",
"client": {} "value": 50,
}, "min": 5,
"default_size": { "max": 100,
"width": 300, "step": 1
"height": 300 },
}, "frequency": {
"default_location": { "type": "slider",
"x": 100, "title": "Frequency",
"y": 100 "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"
} }

17
server/server.ts
View File

@@ -1,2 +1,17 @@
declare const api: ModuleServerApi; 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()}`);
});

12
user/index.html
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sine Wave Visualization</title>
</head>
<body>
<div class="sine-container">
<canvas id="sineCanvas"></canvas>
</div>
</body>
</html>

13
user/scss/layout.scss
View File

@@ -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;
}
}

114
user/ts/user.ts
View File

@@ -1 +1,115 @@
const api: ModuleClientApi = new ModuleApi(); 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();
});