simple sine visual
This commit is contained in:
Marco
BIN
.dist/icon.png
Normal file
BIN
.dist/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
65
.dist/module.json
Normal file
65
.dist/module.json
Normal 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
1
.dist/server.js
Normal 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
1
.dist/user.html
Normal 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
95
.dist/user.js
Normal 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();
|
||||
});
|
||||
})();
|
||||
48
module.json
48
module.json
@@ -3,7 +3,50 @@
|
||||
"type": "normal",
|
||||
"author": "marco",
|
||||
"category": "AIFx",
|
||||
"default_reference_properties": {},
|
||||
"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": {
|
||||
@@ -17,5 +60,6 @@
|
||||
"default_location": {
|
||||
"x": 100,
|
||||
"y": 100
|
||||
}
|
||||
},
|
||||
"build": "0001"
|
||||
}
|
||||
@@ -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()}`);
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
@@ -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
114
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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user