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

✨ feat(mindmap): füge Icons und Farben für Kategorien hinzu, verbessere das Layout und die Darstellung der Mindmap in update_mindmap.js

Browse Source
This commit is contained in:
Marwin
2025-05-09 20:18:45 +01:00
parent 5ade301f80
commit 412dabd5c1
1 changed files with 168 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
static/js/update_mindmap.js
View File

@@ -101,9 +101,36 @@ const subthemesDatabase = {
] ]
}; };
// Initiale Mindmap-Daten (nur oberste Ebene) // Icon-Definitionen für Kategorien (FontAwesome oder SVG-URL)
const categoryIcons = {
'Philosophie': 'fa-solid fa-lightbulb',
'Wissenschaft': 'fa-solid fa-atom',
'Technologie': 'fa-solid fa-microchip',
'Künste': 'fa-solid fa-palette',
'Psychologie': 'fa-solid fa-brain'
};
// Farben für Kategorien (wie im Bild)
const categoryColors = {
'Philosophie': '#b71c1c', // Rot
'Wissenschaft': '#f4b400', // Gelb
'Technologie': '#0d47a1', // Blau
'Künste': '#c2185b', // Pink
'Psychologie': '#009688' // Türkis
};
// Initiale Mindmap-Daten (nur oberste Ebene, mit Icon und Farbe)
const mindmapData = { const mindmapData = {
nodes: [ nodes: [
{
id: 'center',
label: 'Wissenskarte',
isCenter: true,
color: '#f5f5f5',
icon: 'fa-solid fa-circle',
fontColor: '#222',
fontSize: 22
},
{ {
id: 'philosophy', id: 'philosophy',
label: 'Philosophie', label: 'Philosophie',
@@ -112,7 +139,11 @@ const mindmapData = {
hasChildren: true, hasChildren: true,
expanded: false, expanded: false,
neuronSize: 8, neuronSize: 8,
neuronActivity: 0.8 neuronActivity: 0.8,
color: categoryColors['Philosophie'],
icon: categoryIcons['Philosophie'],
fontColor: '#fff',
fontSize: 18
}, },
{ {
id: 'science', id: 'science',
@@ -122,7 +153,11 @@ const mindmapData = {
hasChildren: true, hasChildren: true,
expanded: false, expanded: false,
neuronSize: 8, neuronSize: 8,
neuronActivity: 0.8 neuronActivity: 0.8,
color: categoryColors['Wissenschaft'],
icon: categoryIcons['Wissenschaft'],
fontColor: '#fff',
fontSize: 18
}, },
{ {
id: 'technology', id: 'technology',
@@ -132,7 +167,11 @@ const mindmapData = {
hasChildren: true, hasChildren: true,
expanded: false, expanded: false,
neuronSize: 8, neuronSize: 8,
neuronActivity: 0.8 neuronActivity: 0.8,
color: categoryColors['Technologie'],
icon: categoryIcons['Technologie'],
fontColor: '#fff',
fontSize: 18
}, },
{ {
id: 'arts', id: 'arts',
@@ -142,16 +181,18 @@ const mindmapData = {
hasChildren: true, hasChildren: true,
expanded: false, expanded: false,
neuronSize: 8, neuronSize: 8,
neuronActivity: 0.8 neuronActivity: 0.8,
color: categoryColors['Künste'],
icon: categoryIcons['Künste'],
fontColor: '#fff',
fontSize: 18
} }
], ],
edges: [ edges: [
{ source: 'philosophy', target: 'science', strength: 0.8 }, { source: 'center', target: 'philosophy', strength: 0.9 },
{ source: 'science', target: 'technology', strength: 0.8 }, { source: 'center', target: 'science', strength: 0.9 },
{ source: 'technology', target: 'arts', strength: 0.6 }, { source: 'center', target: 'technology', strength: 0.9 },
{ source: 'arts', target: 'philosophy', strength: 0.6 }, { source: 'center', target: 'arts', strength: 0.9 }
{ source: 'philosophy', target: 'technology', strength: 0.4 },
{ source: 'science', target: 'arts', strength: 0.4 }
] ]
}; };
@@ -187,7 +228,11 @@ document.addEventListener('DOMContentLoaded', function() {
hasChildren: node.hasChildren, hasChildren: node.hasChildren,
expanded: node.expanded, expanded: node.expanded,
neuronSize: node.neuronSize, neuronSize: node.neuronSize,
neuronActivity: node.neuronActivity neuronActivity: node.neuronActivity,
color: node.color,
icon: node.icon,
fontColor: node.fontColor,
fontSize: node.fontSize
} }
})), })),
// Kanten // Kanten
@@ -203,7 +248,7 @@ document.addEventListener('DOMContentLoaded', function() {
console.log('Initialisiere Cytoscape...'); console.log('Initialisiere Cytoscape...');
// Initialisiere Cytoscape mit neuronalem Design // Initialisiere Cytoscape mit concentric/circle Layout und Icon-Overlay
window.cy = cytoscape({ window.cy = cytoscape({
container: cyContainer, container: cyContainer,
elements: elements, elements: elements,
@@ -213,90 +258,71 @@ document.addEventListener('DOMContentLoaded', function() {
style: { style: {
'background-color': 'data(color)', 'background-color': 'data(color)',
'label': 'data(label)', 'label': 'data(label)',
'color': '#fff', 'color': 'data(fontColor)',
'text-background-color': 'rgba(0, 0, 0, 0.7)',
'text-background-opacity': 0.8,
'text-background-padding': '4px',
'text-valign': 'center', 'text-valign': 'center',
'text-halign': 'center', 'text-halign': 'center',
'font-size': 16, 'font-size': 'data(fontSize)',
'width': 'mapData(neuronSize, 3, 10, 30, 60)', 'width': 'mapData(neuronSize, 3, 10, 60, 110)',
'height': 'mapData(neuronSize, 3, 10, 30, 60)', 'height': 'mapData(neuronSize, 3, 10, 60, 110)',
'border-width': 2, 'border-width': 4,
'border-color': '#fff', 'border-color': '#fff',
'border-opacity': 0.8, 'border-opacity': 0.9,
'overlay-padding': 4, 'overlay-padding': 4,
'z-index': 10, 'z-index': 10,
'shape': 'ellipse', 'shape': 'ellipse',
'background-opacity': 0.85, 'background-opacity': 0.95,
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)', 'shadow-blur': 20,
'shadow-color': 'data(color)', 'shadow-color': 'data(color)',
'shadow-opacity': 0.6, 'shadow-opacity': 0.7,
'shadow-offset-x': 0, 'shadow-offset-x': 0,
'shadow-offset-y': 0 'shadow-offset-y': 0,
'text-wrap': 'wrap',
'text-max-width': 90
} }
}, },
{ {
selector: 'node[!color]', selector: 'node[isCenter]','style': {
style: { 'background-color': '#f5f5f5',
'background-color': '#60a5fa' 'color': '#222',
'font-size': 22,
'border-width': 0,
'width': 120,
'height': 120
} }
}, },
{ {
selector: 'node:selected', selector: 'node:selected',
style: { style: {
'border-color': '#f59e42', 'border-color': '#f59e42',
'border-width': 4, 'border-width': 6,
'shadow-blur': 30, 'shadow-blur': 30,
'shadow-opacity': 0.8 'shadow-opacity': 0.9
} }
}, },
{ {
selector: 'edge', selector: 'edge',
style: { style: {
'width': 'mapData(strength, 0.2, 1, 1, 3)', 'width': 'mapData(strength, 0.2, 1, 3, 7)',
'line-color': '#a78bfa', 'line-color': '#bdbdbd',
'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)', 'line-opacity': 0.7,
'target-arrow-color': '#a78bfa',
'target-arrow-shape': 'none',
'curve-style': 'bezier', 'curve-style': 'bezier',
'control-point-distances': [20, -20], 'target-arrow-shape': 'none',
'control-point-distances': [40, -40],
'control-point-weights': [0.5, 0.5], 'control-point-weights': [0.5, 0.5],
'edge-distances': 'intersection', 'edge-distances': 'intersection',
'loop-direction': '-45deg',
'loop-sweep': '-90deg',
'line-style': function(ele) {
const strength = ele.data('strength');
if (strength <= 0.4) return 'dotted';
if (strength <= 0.6) return 'dashed';
return 'solid';
}
}
},
{
selector: 'edge:selected',
style: {
'width': 5,
'line-color': '#f59e42',
'target-arrow-color': '#f59e42',
'opacity': 1,
'line-style': 'solid' 'line-style': 'solid'
} }
} }
], ],
layout: { layout: {
name: 'cose', name: 'concentric',
animate: true,
animationDuration: 1000,
nodeDimensionsIncludeLabels: true,
padding: 100,
spacingFactor: 1.8,
randomize: false,
fit: true, fit: true,
componentSpacing: 100, padding: 60,
nodeRepulsion: 8000, animate: true,
edgeElasticity: 100, concentric: function(node) {
animate: true return node.data('isCenter') ? 2 : 1;
},
levelWidth: function() { return 1; }
} }
}); });
@@ -346,16 +372,22 @@ document.addEventListener('DOMContentLoaded', function() {
await loadSubthemes(node); await loadSubthemes(node);
} }
}); });
});
// Kategorie-Farben definieren // Nach dem Rendern: Icons als HTML-Overlay einfügen
const categoryColors = { setTimeout(() => {
'Philosophie': '#60a5fa', cy.nodes().forEach(node => {
'Wissenschaft': '#8b5cf6', const icon = node.data('icon');
'Technologie': '#10b981', if (icon) {
'Künste': '#f59e0b', const dom = cy.getElementById(node.id()).popperRef();
'Psychologie': '#ef4444' 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
function initializeNeuralDesign(cy) { function initializeNeuralDesign(cy) {
@@ -440,49 +472,53 @@ function initializeNeuralDesign(cy) {
// Modifiziere die updateMindmap Funktion // Modifiziere die updateMindmap Funktion
function updateMindmap() { function updateMindmap() {
if (!cy) return; if (!cy) return;
// Bestehende Elemente entfernen // Bestehende Elemente entfernen
cy.elements().remove(); cy.elements().remove();
// Neue Knoten hinzufügen // Neue Knoten hinzufügen
mindmapData.nodes.forEach(node => { mindmapData.nodes.forEach(node => {
cy.add({ cy.add({
group: 'nodes', group: 'nodes',
data: { data: {
id: node.id, id: node.id,
label: node.label, label: node.label,
category: node.category, category: node.category,
description: node.description, description: node.description,
hasChildren: node.hasChildren, hasChildren: node.hasChildren,
expanded: node.expanded, expanded: node.expanded,
neuronSize: node.neuronSize, neuronSize: node.neuronSize,
neuronActivity: node.neuronActivity neuronActivity: node.neuronActivity,
} color: node.color,
}); icon: node.icon,
fontColor: node.fontColor,
fontSize: node.fontSize
}
}); });
});
// Neue Kanten hinzufügen
mindmapData.edges.forEach(edge => { // Neue Kanten hinzufügen
cy.add({ mindmapData.edges.forEach(edge => {
group: 'edges', cy.add({
data: { group: 'edges',
source: edge.source, data: {
target: edge.target, source: edge.source,
target: edge.target,
strength: edge.strength strength: edge.strength
} }
});
}); });
});
// Neuronales Design initialisieren // Neuronales Design initialisieren
initializeNeuralDesign(cy); initializeNeuralDesign(cy);
// Layout anwenden // Layout anwenden
cy.layout({ cy.layout({
name: 'cose', name: 'cose',
animate: true, animate: true,
animationDuration: 1000, animationDuration: 1000,
nodeDimensionsIncludeLabels: true, nodeDimensionsIncludeLabels: true,
padding: 100, padding: 100,
spacingFactor: 1.8, spacingFactor: 1.8,
randomize: false, randomize: false,
@@ -492,7 +528,7 @@ function updateMindmap() {
edgeElasticity: 100, edgeElasticity: 100,
nestingFactor: 1.2, nestingFactor: 1.2,
gravity: 80 gravity: 80
}).run(); }).run();
} }
/** /**
@@ -765,7 +801,7 @@ function createFlashContainer() {
container.className = 'fixed top-4 right-4 z-50 w-64'; container.className = 'fixed top-4 right-4 z-50 w-64';
document.body.appendChild(container); document.body.appendChild(container);
return container; return container;
} }
// Funktion zum Laden der Subthemen // Funktion zum Laden der Subthemen
async function loadSubthemes(node) { async function loadSubthemes(node) {
@@ -867,6 +903,20 @@ async function loadSubthemes(node) {
// Erfolgsmeldung anzeigen // 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');
@@ -942,5 +992,13 @@ style.textContent = `
.cy-container node:hover { .cy-container node:hover {
filter: brightness(1.2); filter: brightness(1.2);
} }
.cy-node-icon {
position: absolute;
pointer-events: none;
z-index: 1001;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
`; `;
document.head.appendChild(style); document.head.appendChild(style);