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

✨ feat: verbessere neuronale Netzwerkdarstellung und Mindmap-Layout durch Anpassungen an Farben, Größen und Animationen

Browse Source
This commit is contained in:
Marwin
2025-05-10 21:19:54 +01:00
parent 7cb2bf1ed0
commit 6a3b3a81c1
2 changed files with 126 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
static/js/update_mindmap.js
View File

@@ -129,7 +129,9 @@ const mindmapData = {
color: '#f5f5f5', color: '#f5f5f5',
icon: 'fa-solid fa-circle', icon: 'fa-solid fa-circle',
fontColor: '#222', fontColor: '#222',
fontSize: 22 fontSize: 22,
neuronSize: 12,
neuronActivity: 1.0
}, },
{ {
id: 'philosophy', id: 'philosophy',
@@ -248,7 +250,7 @@ document.addEventListener('DOMContentLoaded', function() {
console.log('Initialisiere Cytoscape...'); console.log('Initialisiere Cytoscape...');
// Initialisiere Cytoscape mit concentric/circle Layout und Icon-Overlay // Initialisiere Cytoscape mit einem schlichten, modernen Design
window.cy = cytoscape({ window.cy = cytoscape({
container: cyContainer, container: cyContainer,
elements: elements, elements: elements,
@@ -262,62 +264,66 @@ document.addEventListener('DOMContentLoaded', function() {
'text-valign': 'center', 'text-valign': 'center',
'text-halign': 'center', 'text-halign': 'center',
'font-size': 'data(fontSize)', 'font-size': 'data(fontSize)',
'width': 'mapData(neuronSize, 3, 10, 60, 110)', 'width': function(ele) {
'height': 'mapData(neuronSize, 3, 10, 60, 110)', return ele.data('isCenter') ? 100 : 80;
'border-width': 4, },
'border-color': '#fff', 'height': function(ele) {
'border-opacity': 0.9, return ele.data('isCenter') ? 100 : 80;
'overlay-padding': 4, },
'z-index': 10, 'border-width': 2,
'border-color': '#ffffff',
'border-opacity': 0.8,
'shape': 'ellipse', 'shape': 'ellipse',
'background-opacity': 0.95, 'background-opacity': 0.9,
'shadow-blur': 20,
'shadow-color': 'data(color)',
'shadow-opacity': 0.7,
'shadow-offset-x': 0,
'shadow-offset-y': 0,
'text-wrap': 'wrap', 'text-wrap': 'wrap',
'text-max-width': 90 'text-max-width': 80,
'transition-property': 'background-color, border-width',
'transition-duration': '0.2s'
} }
}, },
{ {
selector: 'node[isCenter]','style': { selector: 'node[isCenter]',
style: {
'background-color': '#f5f5f5', 'background-color': '#f5f5f5',
'color': '#222', 'color': '#222',
'font-size': 22, 'font-size': 20,
'border-width': 0, 'border-width': 3,
'width': 120, 'width': 100,
'height': 120 'height': 100
} }
}, },
{ {
selector: 'node:selected', selector: 'node:selected',
style: { style: {
'border-color': '#f59e42', 'border-color': '#f59e42',
'border-width': 6, 'border-width': 3,
'shadow-blur': 30, 'background-opacity': 1
'shadow-opacity': 0.9
} }
}, },
{ {
selector: 'edge', selector: 'edge',
style: { style: {
'width': 'mapData(strength, 0.2, 1, 3, 7)', 'width': function(ele) {
'line-color': '#bdbdbd', return ele.data('strength') ? ele.data('strength') * 2 : 1;
'line-opacity': 0.7, },
'line-color': function(ele) {
const sourceColor = ele.source().data('color');
return sourceColor || '#8a8aaa';
},
'line-opacity': function(ele) {
return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4;
},
'curve-style': 'bezier', 'curve-style': 'bezier',
'target-arrow-shape': 'none', 'target-arrow-shape': 'none',
'control-point-distances': [40, -40], 'control-point-distances': [30, -30],
'control-point-weights': [0.5, 0.5], 'control-point-weights': [0.5, 0.5]
'edge-distances': 'intersection',
'line-style': 'solid'
} }
} }
], ],
layout: { layout: {
name: 'concentric', name: 'concentric',
fit: true, fit: true,
padding: 60, padding: 50,
animate: true, animate: true,
concentric: function(node) { concentric: function(node) {
return node.data('isCenter') ? 2 : 1; return node.data('isCenter') ? 2 : 1;
@@ -373,20 +379,11 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
// Nach dem Rendern: Icons als HTML-Overlay einfügen // Entferne den Icon-Overlay-Code
setTimeout(() => { setTimeout(() => {
cy.nodes().forEach(node => { // Entferne alle existierenden Icon-Overlays
const icon = node.data('icon'); document.querySelectorAll('.cy-node-icon').forEach(icon => icon.remove());
if (icon) { }, 0);
const dom = cy.getElementById(node.id()).popperRef();
const iconDiv = document.createElement('div');
iconDiv.className = 'cy-node-icon';
iconDiv.innerHTML = `<i class="${icon}" style="font-size:2.2em;"></i>`;
document.body.appendChild(iconDiv);
// Positionierung mit Popper.js oder absolut über node.position()
}
});
}, 500);
}); });
// Funktion zum Initialisieren des neuronalen Designs // Funktion zum Initialisieren des neuronalen Designs
@@ -620,49 +617,53 @@ function enhanceMindmap() {
* @param {Object} cy - Cytoscape-Instanz * @param {Object} cy - Cytoscape-Instanz
*/ */
function applyNeuralNetworkStyle(cy) { function applyNeuralNetworkStyle(cy) {
// Wende erweiterte Stile für Neuronen und Synapsen an
cy.style() cy.style()
.selector('node') .selector('node')
.style({ .style({
'label': 'data(label)', 'label': 'data(label)',
'text-valign': 'center', 'text-valign': 'center',
'text-halign': 'center', 'text-halign': 'center',
'color': '#ffffff', 'color': 'data(fontColor)',
'text-outline-width': 2, 'text-outline-width': 2,
'text-outline-color': 'rgba(0,0,0,0.8)', 'text-outline-color': 'rgba(0,0,0,0.8)',
'text-outline-opacity': 0.9, 'text-outline-opacity': 0.9,
'font-size': 14, 'font-size': 'data(fontSize)',
'font-weight': '500', 'font-weight': '500',
'text-margin-y': 8, 'text-margin-y': 8,
'width': 'mapData(neuronSize, 3, 10, 40, 80)', 'width': function(ele) {
'height': 'mapData(neuronSize, 3, 10, 40, 80)', if (ele.data('isCenter')) return 120;
return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80;
},
'height': function(ele) {
if (ele.data('isCenter')) return 120;
return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80;
},
'background-color': 'data(color)', 'background-color': 'data(color)',
'background-opacity': 0.9, 'background-opacity': 0.9,
'border-width': 2, 'border-width': 2,
'border-color': '#ffffff', 'border-color': '#ffffff',
'border-opacity': 0.8, 'border-opacity': 0.8,
'shape': 'ellipse', 'shape': 'ellipse',
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 15, 30)', 'transition-property': 'background-color, background-opacity, border-width',
'shadow-color': 'data(color)',
'shadow-opacity': 0.8,
'shadow-offset-x': 0,
'shadow-offset-y': 0,
'transition-property': 'background-color, shadow-blur, shadow-opacity, background-opacity',
'transition-duration': '0.3s', 'transition-duration': '0.3s',
'transition-timing-function': 'ease-in-out' 'transition-timing-function': 'ease-in-out'
}) })
.selector('edge') .selector('edge')
.style({ .style({
'width': 'mapData(strength, 0.2, 0.8, 1, 3)', 'width': function(ele) {
return ele.data('strength') ? ele.data('strength') * 3 : 1;
},
'curve-style': 'bezier', 'curve-style': 'bezier',
'line-color': function(ele) { 'line-color': function(ele) {
const sourceColor = ele.source().data('color'); const sourceColor = ele.source().data('color');
const targetColor = ele.target().data('color'); return sourceColor || '#8a8aaa';
return `linear-gradient(to right, ${sourceColor}, ${targetColor})`; },
'line-opacity': function(ele) {
return ele.data('strength') ? ele.data('strength') * 0.8 : 0.4;
}, },
'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.8)',
'line-style': function(ele) { 'line-style': function(ele) {
const strength = ele.data('strength'); const strength = ele.data('strength');
if (!strength) return 'solid';
if (strength <= 0.4) return 'dotted'; if (strength <= 0.4) return 'dotted';
if (strength <= 0.6) return 'dashed'; if (strength <= 0.6) return 'dashed';
return 'solid'; return 'solid';
@@ -674,31 +675,14 @@ function applyNeuralNetworkStyle(cy) {
'transition-duration': '0.3s', 'transition-duration': '0.3s',
'transition-timing-function': 'ease-in-out' 'transition-timing-function': 'ease-in-out'
}) })
.selector('node[isRoot]')
.style({
'font-size': 18,
'font-weight': 'bold',
'width': 100,
'height': 100,
'background-color': '#6366f1',
'shadow-blur': 30,
'shadow-color': '#6366f1',
'shadow-opacity': 0.9,
'text-margin-y': 10,
'border-width': 3
})
.update(); .update();
} }
/** // Vereinfachte neuronale Aktivitätssimulation
* Simuliert neuronale Aktivität in der Mindmap
* @param {Object} cy - Cytoscape-Instanz
*/
function startNeuralActivitySimulation(cy) { function startNeuralActivitySimulation(cy) {
if (window.neuralInterval) clearInterval(window.neuralInterval); if (window.neuralInterval) clearInterval(window.neuralInterval);
const nodes = cy.nodes(); const nodes = cy.nodes();
const edges = cy.edges();
let currentTime = Date.now(); let currentTime = Date.now();
function simulateNeuralActivity() { function simulateNeuralActivity() {
@@ -710,7 +694,7 @@ function startNeuralActivitySimulation(cy) {
const timeSinceLastFire = currentTime - lastFired; const timeSinceLastFire = currentTime - lastFired;
if (timeSinceLastFire > data.refractionPeriod) { if (timeSinceLastFire > data.refractionPeriod) {
if (Math.random() < data.neuronActivity * 0.15) { if (Math.random() < data.neuronActivity * 0.1) {
fireNeuron(node, true, currentTime); fireNeuron(node, true, currentTime);
} }
} }
@@ -721,30 +705,15 @@ function startNeuralActivitySimulation(cy) {
const data = node.data(); const data = node.data();
data.lastFired = currentTime; data.lastFired = currentTime;
// Verbesserte visuelle Effekte node.style({
node.animate({ 'background-opacity': 1,
style: { 'border-width': 3
'background-opacity': 1,
'shadow-blur': 35,
'shadow-opacity': 1,
'border-width': 3,
'border-color': '#ffffff'
},
duration: 200,
easing: 'ease-in-out-cubic'
}); });
setTimeout(() => { setTimeout(() => {
node.animate({ node.style({
style: { 'background-opacity': 0.9,
'background-opacity': 0.9, 'border-width': 2
'shadow-blur': 20,
'shadow-opacity': 0.8,
'border-width': 2,
'border-color': 'rgba(255,255,255,0.8)'
},
duration: 300,
easing: 'ease-out-cubic'
}); });
}, 200); }, 200);
@@ -754,31 +723,22 @@ function startNeuralActivitySimulation(cy) {
} }
function propagateSignal(sourceNode, currentTime) { function propagateSignal(sourceNode, currentTime) {
const outgoingEdges = sourceNode.connectedEdges('out'); const outgoingEdges = sourceNode.connectedEdges();
outgoingEdges.forEach(edge => { outgoingEdges.forEach(edge => {
const targetNode = edge.target(); const targetNode = edge.target();
const edgeData = edge.data(); const edgeData = edge.data();
const latency = edgeData.latency; const latency = edgeData.latency;
// Verbesserte Kanten-Animation edge.style({
edge.animate({ 'line-opacity': 0.8,
style: { 'width': edgeData.strength * 3
'line-opacity': 1,
'width': edgeData.strength * 4
},
duration: 200,
easing: 'ease-in-out-cubic'
}); });
setTimeout(() => { setTimeout(() => {
edge.animate({ edge.style({
style: { 'line-opacity': edgeData.strength * 0.6,
'line-opacity': edgeData.strength * 0.8, 'width': edgeData.strength * 2
'width': edgeData.strength * 2
},
duration: 300,
easing: 'ease-out-cubic'
}); });
}, 200); }, 200);
@@ -845,7 +805,6 @@ async function loadSubthemes(node) {
try { try {
console.log('Loading subthemes for node:', node.id()); console.log('Loading subthemes for node:', node.id());
// Simuliere Datenbankabfrage
const subthemes = subthemesDatabase[node.id()]; const subthemes = subthemesDatabase[node.id()];
if (!subthemes) { if (!subthemes) {
@@ -853,16 +812,13 @@ async function loadSubthemes(node) {
return; return;
} }
// Animation starten
showFlash('Lade Subthemen...', 'info'); showFlash('Lade Subthemen...', 'info');
// Neue Seite erstellen
const mindmapContainer = document.querySelector('.mindmap-container'); const mindmapContainer = document.querySelector('.mindmap-container');
const newPage = document.createElement('div'); const newPage = document.createElement('div');
newPage.className = 'mindmap-page'; newPage.className = 'mindmap-page';
newPage.style.display = 'none'; newPage.style.display = 'none';
// Kopfzeile erstellen
const header = document.createElement('div'); const header = document.createElement('div');
header.className = 'mindmap-header'; header.className = 'mindmap-header';
header.innerHTML = ` header.innerHTML = `
@@ -874,17 +830,14 @@ async function loadSubthemes(node) {
<h2 class="mindmap-title">${node.data('label')}</h2> <h2 class="mindmap-title">${node.data('label')}</h2>
`; `;
// Container für die neue Mindmap
const newContainer = document.createElement('div'); const newContainer = document.createElement('div');
newContainer.id = `cy-${node.id()}`; newContainer.id = `cy-${node.id()}`;
newContainer.className = 'mindmap-view'; newContainer.className = 'mindmap-view';
// Elemente zur Seite hinzufügen
newPage.appendChild(header); newPage.appendChild(header);
newPage.appendChild(newContainer); newPage.appendChild(newContainer);
mindmapContainer.appendChild(newPage); mindmapContainer.appendChild(newPage);
// Neue Cytoscape-Instanz erstellen
const newCy = cytoscape({ const newCy = cytoscape({
container: newContainer, container: newContainer,
elements: [], elements: [],
@@ -898,7 +851,14 @@ async function loadSubthemes(node) {
padding: 30, padding: 30,
nodeRepulsion: 4500, nodeRepulsion: 4500,
idealEdgeLength: 50, idealEdgeLength: 50,
edgeElasticity: 0.45 edgeElasticity: 0.45,
randomize: true,
componentSpacing: 100,
nodeOverlap: 20,
gravity: 0.25,
initialTemp: 1000,
coolingFactor: 0.95,
minTemp: 1
} }
}); });
@@ -914,11 +874,28 @@ async function loadSubthemes(node) {
hasChildren: subtheme.hasChildren, hasChildren: subtheme.hasChildren,
expanded: false, expanded: false,
neuronSize: 6, neuronSize: 6,
neuronActivity: 0.7 neuronActivity: 0.7,
color: categoryColors[subtheme.category] || '#60a5fa',
fontColor: '#ffffff',
fontSize: 14
} }
}); });
}); });
// Kanten zwischen den Subthemen erstellen
for (let i = 0; i < subthemes.length; i++) {
for (let j = i + 1; j < subthemes.length; j++) {
newCy.add({
group: 'edges',
data: {
source: subthemes[i].id,
target: subthemes[j].id,
strength: Math.random() * 0.5 + 0.3
}
});
}
}
// Neuronales Design für die neue Mindmap initialisieren // Neuronales Design für die neue Mindmap initialisieren
initializeNeuralDesign(newCy); initializeNeuralDesign(newCy);
@@ -935,25 +912,27 @@ async function loadSubthemes(node) {
newPage.style.display = 'block'; newPage.style.display = 'block';
// Layout ausführen // Layout ausführen
newCy.layout().run(); newCy.layout({
name: 'cose',
animate: true,
animationDuration: 500,
refresh: 20,
fit: true,
padding: 30,
nodeRepulsion: 4500,
idealEdgeLength: 50,
edgeElasticity: 0.45,
randomize: true,
componentSpacing: 100,
nodeOverlap: 20,
gravity: 0.25,
initialTemp: 1000,
coolingFactor: 0.95,
minTemp: 1
}).run();
// Erfolgsmeldung anzeigen
showFlash('Subthemen erfolgreich geladen', 'success'); showFlash('Subthemen erfolgreich geladen', 'success');
// Icons für Subthemen wie oben einfügen
setTimeout(() => {
newCy.nodes().forEach(node => {
const icon = node.data('icon');
if (icon) {
const dom = newCy.getElementById(node.id()).popperRef();
const iconDiv = document.createElement('div');
iconDiv.className = 'cy-node-icon';
iconDiv.innerHTML = `<i class="${icon}" style="font-size:2em;"></i>`;
document.body.appendChild(iconDiv);
}
});
}, 500);
} catch (error) { } catch (error) {
console.error('Fehler beim Laden der Subthemen:', error); console.error('Fehler beim Laden der Subthemen:', error);
showFlash('Fehler beim Laden der Subthemen', 'error'); showFlash('Fehler beim Laden der Subthemen', 'error');

10
static/neural-network-background-full.js
View File

@@ -1115,18 +1115,20 @@ function applyNeuralNetworkStyle(cy) {
'label': 'data(label)', 'label': 'data(label)',
'text-valign': 'center', 'text-valign': 'center',
'text-halign': 'center', 'text-halign': 'center',
'color': '#ffffff', 'color': 'data(fontColor)',
'text-outline-width': 2, 'text-outline-width': 2,
'text-outline-color': 'rgba(0,0,0,0.8)', 'text-outline-color': 'rgba(0,0,0,0.8)',
'text-outline-opacity': 0.9, 'text-outline-opacity': 0.9,
'font-size': 14, 'font-size': 'data(fontSize)',
'font-weight': '500', 'font-weight': '500',
'text-margin-y': 8, 'text-margin-y': 8,
'width': function(ele) { 'width': function(ele) {
return ele.data('neuronSize') ? ele.data('neuronSize') * 8 : 60; if (ele.data('isCenter')) return 120;
return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80;
}, },
'height': function(ele) { 'height': function(ele) {
return ele.data('neuronSize') ? ele.data('neuronSize') * 8 : 60; if (ele.data('isCenter')) return 120;
return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80;
}, },
'background-color': 'data(color)', 'background-color': 'data(color)',
'background-opacity': 0.9, 'background-opacity': 0.9,