marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

es wird spät

Browse Source
This commit is contained in:
Marwin
2025-05-06 22:47:08 +01:00
parent c888dcc452
commit ec50886145
1 changed files with 39 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
static/js/update_mindmap.js
View File

@@ -47,12 +47,11 @@ document.addEventListener('DOMContentLoaded', function() {
console.log('Initialisiere Cytoscape...');
// Initialisiere Cytoscape mit großen Daten
// Initialisiere Cytoscape mit einfachem, stabilem Design
window.cy = cytoscape({
container: cyContainer,
elements: elements,
style: [
// Neuron Soma: Glow, Pulsieren, Schatten
{
selector: 'node',
style: {
@@ -65,56 +64,25 @@ document.addEventListener('DOMContentLoaded', function() {
'text-valign': 'center',
'text-halign': 'center',
'font-size': 18,
'width': 48,
'height': 48,
'border-width': 6,
'width': 40,
'height': 40,
'border-width': 2,
'border-color': '#fff',
'overlay-padding': 8,
'z-index': 10,
'shadow-blur': 24,
'shadow-color': 'data(color)',
'shadow-opacity': 0.8,
'transition-property': 'background-color, border-color, width, height, shadow-blur',
'transition-duration': '0.4s',
'overlay-padding': 4,
'z-index': 10
}
},
// Pulsieren (aktive Klasse)
{
selector: 'node.pulsing',
style: {
'width': 60,
'height': 60,
'shadow-blur': 40,
'border-color': '#fbbf24',
}
},
// Hover-Effekt
{
selector: 'node:hover',
style: {
'border-color': '#fbbf24',
'border-width': 10,
'shadow-blur': 48,
'shadow-color': '#fbbf24',
'background-color': '#fff',
'color': '#fbbf24',
}
},
// Selektierter Knoten
{
selector: 'node:selected',
style: {
'border-color': '#f59e42',
'border-width': 12,
'shadow-blur': 60,
'shadow-color': '#f59e42',
'border-width': 4
}
},
// Dendriten (normale Kanten)
{
selector: 'edge',
style: {
'width': 4,
'width': 3,
'line-color': '#a78bfa',
'target-arrow-color': '#a78bfa',
'target-arrow-shape': 'triangle',
@@ -126,40 +94,16 @@ document.addEventListener('DOMContentLoaded', function() {
'text-background-opacity': 0.7,
'text-background-padding': '2px',
'opacity': 0.8,
'line-style': 'solid',
'transition-property': 'width, line-color, opacity',
'transition-duration': '0.3s',
'line-style': 'solid'
}
},
// Axone (stärkere Kanten, z.B. wenn label "beeinflusst" oder "inspiriert")
{
selector: 'edge[label = "beeinflusst"], edge[label = "inspiriert"]',
style: {
'width': 8,
'line-color': '#f59e42',
'target-arrow-color': '#f59e42',
'opacity': 1,
'line-style': 'dashed',
}
},
// Hover-Effekt für Kanten
{
selector: 'edge:hover',
style: {
'width': 12,
'line-color': '#fbbf24',
'target-arrow-color': '#fbbf24',
'opacity': 1,
}
},
// Selektierte Kante
{
selector: 'edge:selected',
style: {
'width': 14,
'width': 5,
'line-color': '#f59e42',
'target-arrow-color': '#f59e42',
'opacity': 1,
'opacity': 1
}
}
],
@@ -341,12 +285,7 @@ function updateMindmap() {
label: node.label,
category: node.category,
description: node.description,
color: categoryColors[node.category] || '#60a5fa',
neuronSize: Math.floor(Math.random() * 8) + 3,
neuronActivity: Math.random() * 0.7 + 0.3,
pulseFrequency: Math.random() * 4 + 2,
refractionPeriod: Math.random() * 300 + 700,
threshold: Math.random() * 0.3 + 0.6
color: categoryColors[node.category] || '#60a5fa'
}
});
});
@@ -358,15 +297,12 @@ function updateMindmap() {
data: {
source: edge.source,
target: edge.target,
label: edge.label,
strength: Math.random() * 0.6 + 0.2,
conductionVelocity: Math.random() * 0.5 + 0.3,
latency: Math.random() * 100 + 50
label: edge.label
}
});
});
// Neuronales Netzwerk-Styling anwenden
// Nur einfaches, klares Styling - KEINE Schatten, KEIN Glow, KEINE dynamischen Styles!
cy.style([
{
selector: 'node',
@@ -382,67 +318,50 @@ function updateMindmap() {
'text-outline-width': 1.5,
'text-outline-opacity': 0.9,
'text-margin-y': 7,
'width': 'mapData(neuronSize, 3, 10, 15, 40)',
'height': 'mapData(neuronSize, 3, 10, 15, 40)',
'width': 40,
'height': 40,
'background-color': 'data(color)',
'background-opacity': 0.85,
'border-width': 0,
'border-width': 2,
'shape': 'ellipse',
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 5, 15)',
'shadow-color': 'data(color)',
'shadow-opacity': 0.6,
'shadow-offset-x': 0,
'shadow-offset-y': 0,
'text-background-color': 'rgba(24, 28, 45, 0.7)',
'text-background-opacity': 0.8,
'text-background-shape': 'roundrectangle',
'text-background-padding': '4px',
'transition-property': 'background-color, shadow-blur, shadow-opacity, background-opacity',
'transition-duration': '0.5s'
'text-background-padding': '4px'
}
},
{
selector: 'edge',
style: {
'width': 'mapData(strength, 0.2, 0.8, 0.7, 2)',
'width': 3,
'curve-style': 'bezier',
'line-color': '#8a8aaa',
'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.7)',
'line-style': function(ele) {
const strength = ele.data('strength');
if (strength <= 0.4) return 'dotted';
if (strength <= 0.6) return 'dashed';
return 'solid';
},
'target-arrow-shape': 'none',
'source-endpoint': '0% 50%',
'target-endpoint': '100% 50%',
'transition-property': 'line-color, width, line-style, line-opacity',
'transition-duration': '0.4s'
'line-opacity': 0.7,
'line-style': 'solid',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#8a8aaa',
'label': 'data(label)',
'font-size': 12,
'color': '#fff',
'text-background-color': '#222a',
'text-background-opacity': 0.7,
'text-background-padding': '2px'
}
},
{
selector: ':selected',
selector: 'node:selected',
style: {
'background-color': '#f59e0b',
'shadow-blur': 32,
'shadow-color': '#f59e0b',
'shadow-opacity': 1,
'border-width': 4,
'border-color': '#fff'
'border-color': '#f59e42',
'border-width': 4
}
},
{
selector: '.highlighted',
selector: 'edge:selected',
style: {
'background-color': '#10b981',
'shadow-blur': 28,
'shadow-color': '#10b981',
'shadow-opacity': 1,
'line-color': '#10b981',
'target-arrow-color': '#10b981',
'transition-property': 'background-color, shadow-blur, shadow-opacity, line-color',
'transition-duration': '0.3s'
'width': 5,
'line-color': '#f59e42',
'target-arrow-color': '#f59e42',
'opacity': 1
}
}
]);
@@ -453,31 +372,8 @@ function updateMindmap() {
animate: true,
animationDuration: 1800,
nodeDimensionsIncludeLabels: true,
padding: 100,
spacingFactor: 1.8,
randomize: false,
fit: true,
componentSpacing: 100,
nodeRepulsion: 8000,
edgeElasticity: 100,
nestingFactor: 1.2,
gravity: 80
padding: 100
}).run();
// Pulsierende Soma-Effekte starten
if (window.pulseInterval) clearInterval(window.pulseInterval);
window.pulseInterval = setInterval(() => {
cy.nodes().forEach(node => {
const baseBlur = 18;
const pulse = 0.7 + 0.3 * Math.sin(Date.now() / 400 + node.id().charCodeAt(0));
node.style('shadow-blur', baseBlur * pulse);
node.style('shadow-opacity', 0.6 + 0.3 * pulse);
node.style('background-opacity', 0.85 + 0.1 * pulse);
});
}, 80);
// Neuronale Aktivität simulieren
startNeuralActivitySimulation(cy);
}
/**
@@ -750,24 +646,4 @@ function createFlashContainer() {
container.className = 'fixed top-4 right-4 z-50 w-64';
document.body.appendChild(container);
return container;
}
// Interaktive Effekte: Pulsieren
function pulseNode(node) {
node.addClass('pulsing');
setTimeout(() => node.removeClass('pulsing'), 600);
}
cy.nodes().forEach(node => {
setInterval(() => pulseNode(node), 2000 + Math.random() * 2000);
});
// Klick-Interaktion: Pulsieren und Glow verstärken
cy.on('tap', 'node', function(evt){
const node = evt.target;
pulseNode(node);
node.select();
});
// Klick auf Hintergrund: Auswahl zurücksetzen
cy.on('tap', function(evt){
if(evt.target === cy) cy.nodes().unselect();
});
}