mirror of
http://10.0.2.1:3031/sauer/bfa-dryer-design.git
synced 2026-06-30 15:46:43 +10:00
1831759563
Complete rewrite of the editor frontend using GrapesJS: - Full drag/drop visual editor with style manager - Custom HMI blocks: Temperature, Motor, Output, Burner, Automation, Gauge - Layout blocks: Page Container, Tab Bar, Top Bar, Label, Divider, Spacer - Style panel: font family/size/weight/color, background, border, layout, effects - Traits panel: active/inactive colors, animation, linked control, setpoints - Device manager: Tab5 (1280x720), Schneider HMIDT651 (1280x800), Desktop - Theme switcher: Dark Industrial, Light Industrial, High Contrast, Classic SCADA - Layers panel with z-index reorder and show/hide - Undo/redo, preview mode, canvas zoom - V1 layout preserved (saved as current.json), V2 uses current_v2.json - Login/users/comments backend unchanged Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
/* BFA Banana Dryer — HMI Theme Presets */
|
|
|
|
const HMI_THEMES = {
|
|
'dark-industrial': {
|
|
'--bg': '#0a0e17', '--card': '#131a2b', '--border': '#1e2a45',
|
|
'--text': '#e8ecf4', '--text2': '#7a8baa', '--dim': '#4a5670',
|
|
'--blue': '#2d7ff9', '--green': '#00c853', '--amber': '#ffab00', '--red': '#ff1744',
|
|
},
|
|
'light-industrial': {
|
|
'--bg': '#f0f2f5', '--card': '#ffffff', '--border': '#d0d5dd',
|
|
'--text': '#1a1a2e', '--text2': '#667085', '--dim': '#98a2b3',
|
|
'--blue': '#2563eb', '--green': '#16a34a', '--amber': '#d97706', '--red': '#dc2626',
|
|
},
|
|
'high-contrast': {
|
|
'--bg': '#000000', '--card': '#1a1a1a', '--border': '#444444',
|
|
'--text': '#ffffff', '--text2': '#cccccc', '--dim': '#888888',
|
|
'--blue': '#00aaff', '--green': '#00ff55', '--amber': '#ffcc00', '--red': '#ff3333',
|
|
},
|
|
'classic-scada': {
|
|
'--bg': '#c0c0c0', '--card': '#d4d4d4', '--border': '#808080',
|
|
'--text': '#000000', '--text2': '#333333', '--dim': '#666666',
|
|
'--blue': '#0000cc', '--green': '#008800', '--amber': '#cc8800', '--red': '#cc0000',
|
|
}
|
|
};
|
|
|
|
function applyHMITheme(editor, themeName) {
|
|
const theme = HMI_THEMES[themeName];
|
|
if (!theme) return;
|
|
|
|
// Apply to canvas iframe
|
|
const frame = editor.Canvas.getFrameEl();
|
|
if (frame && frame.contentDocument) {
|
|
const doc = frame.contentDocument.documentElement;
|
|
Object.entries(theme).forEach(([k, v]) => doc.style.setProperty(k, v));
|
|
doc.style.background = theme['--bg'];
|
|
}
|
|
|
|
// Apply to editor UI
|
|
const root = document.documentElement;
|
|
Object.entries(theme).forEach(([k, v]) => root.style.setProperty(k, v));
|
|
}
|