knxdisplay/web-interface/src/constants.js
2026-01-28 22:41:05 +01:00

311 lines
6.9 KiB
JavaScript

export const DISPLAY_W = 1280;
export const DISPLAY_H = 800;
export const MAX_SCREENS = 8;
export const WIDGET_TYPES = {
LABEL: 0,
BUTTON: 1,
LED: 2,
ICON: 3,
TABVIEW: 4,
TABPAGE: 5,
POWERFLOW: 6,
POWERNODE: 7,
POWERLINK: 8
};
export const ICON_POSITIONS = {
LEFT: 0,
RIGHT: 1,
TOP: 2,
BOTTOM: 3
};
export const BUTTON_ACTIONS = {
KNX: 0,
JUMP: 1,
BACK: 2
};
export const TEXT_ALIGNS = {
LEFT: 0,
CENTER: 1,
RIGHT: 2
};
export const TYPE_KEYS = {
0: 'label',
1: 'button',
2: 'led',
3: 'icon',
4: 'tabview',
5: 'tabpage',
6: 'powerflow',
7: 'powernode',
8: 'powerlink'
};
export const TYPE_LABELS = {
label: 'Label',
button: 'Button',
led: 'LED',
icon: 'Icon',
tabview: 'Tabs',
tabpage: 'Seite',
powerflow: 'Power Flow',
powernode: 'Power Node',
powerlink: 'Power Link'
};
export const textSources = {
0: 'Statisch',
1: 'KNX Temperatur',
2: 'KNX Schalter',
3: 'KNX Prozent',
4: 'KNX Text',
5: 'KNX Leistung (DPT 14.056)',
6: 'KNX Energie (DPT 13.013)',
7: 'KNX Dezimalfaktor (DPT 5.005)'
};
export const textSourceGroups = [
{ label: 'Statisch', values: [0] },
{ label: 'DPT 1.x', values: [2] },
{ label: 'DPT 5.x', values: [3, 7] },
{ label: 'DPT 9.x', values: [1] },
{ label: 'DPT 13.x', values: [6] },
{ label: 'DPT 14.x', values: [5] },
{ label: 'DPT 16.x', values: [4] }
];
export const sourceOptions = {
label: [0, 1, 2, 3, 4, 5, 6, 7],
button: [0],
led: [0, 2],
icon: [0, 2],
powernode: [0, 1, 2, 3, 4, 5, 6, 7],
powerlink: [0, 1, 3, 5, 6, 7]
};
export const ICON_DEFAULTS = {
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 8
};
export const fontSizes = [14, 18, 22, 28, 36, 48];
export const defaultFormats = {
1: '%.1f °C',
2: '%s',
3: '%d %%',
4: '%s',
5: '%.1f W',
6: '%.0f kWh',
7: '%d'
};
export const WIDGET_DEFAULTS = {
label: {
w: 160,
h: 40,
text: 'Neues Label',
textSrc: 0,
fontSize: 1,
textAlign: TEXT_ALIGNS.LEFT,
textColor: '#FFFFFF',
bgColor: '#0E1217',
bgOpacity: 0,
radius: 6,
shadow: { enabled: false, x: 2, y: 2, blur: 8, spread: 0, color: '#000000' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: BUTTON_ACTIONS.KNX,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 8
},
button: {
w: 130,
h: 52,
text: 'Button',
textSrc: 0,
fontSize: 1,
textAlign: TEXT_ALIGNS.CENTER,
isContainer: true,
textColor: '#FFFFFF',
bgColor: '#2E7DD1',
bgOpacity: 255,
radius: 10,
shadow: { enabled: true, x: 2, y: 3, blur: 10, spread: 0, color: '#000000' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: BUTTON_ACTIONS.KNX,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 8
},
led: {
w: 60,
h: 60,
text: '',
textSrc: 0,
fontSize: 1,
textAlign: TEXT_ALIGNS.CENTER,
textColor: '#FFFFFF',
bgColor: '#F6C177',
bgOpacity: 255,
radius: 30,
shadow: { enabled: true, x: 0, y: 0, blur: 18, spread: 0, color: '#F6C177' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: BUTTON_ACTIONS.KNX,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 8
},
icon: {
w: 48,
h: 48,
text: '',
textSrc: 0,
fontSize: 3,
textAlign: TEXT_ALIGNS.CENTER,
textColor: '#FFFFFF',
bgColor: '#0E1217',
bgOpacity: 0,
radius: 0,
shadow: { enabled: false, x: 0, y: 0, blur: 0, spread: 0, color: '#000000' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: BUTTON_ACTIONS.KNX,
targetScreen: 0,
iconCodepoint: 0xe88a,
iconPosition: 0,
iconSize: 3,
iconGap: 8
},
tabview: {
w: 400,
h: 300,
text: '',
textSrc: 0,
fontSize: 1,
textAlign: TEXT_ALIGNS.CENTER,
textColor: '#FFFFFF',
bgColor: '#2a3543',
bgOpacity: 255,
radius: 8,
shadow: { enabled: false },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: 0,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0, // 0=Top, 1=Bottom, 2=Left, 3=Right
iconSize: 5, // Used for Tab Height (x10) -> 50px
iconGap: 0
},
tabpage: {
w: 0, // Ignored
h: 0, // Ignored
text: 'Tab',
textSrc: 0,
fontSize: 1,
textAlign: TEXT_ALIGNS.CENTER,
textColor: '#FFFFFF',
bgColor: '#1A1A2E',
bgOpacity: 0, // Transparent by default
radius: 0,
shadow: { enabled: false },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: 0,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 0
},
powerflow: {
w: 720,
h: 460,
text: 'Power Flow Card',
textSrc: 0,
fontSize: 1,
textAlign: TEXT_ALIGNS.LEFT,
textColor: '#1f2a33',
bgColor: '#ffffff',
bgOpacity: 255,
radius: 18,
shadow: { enabled: true, x: 0, y: 8, blur: 22, spread: 0, color: '#1b28351f' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: 0,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 0
},
powernode: {
w: 120,
h: 120,
text: 'Knoten\n0 W',
textSrc: 0,
fontSize: 2,
textAlign: TEXT_ALIGNS.CENTER,
textColor: '#223447',
bgColor: '#4fb06d',
bgOpacity: 255,
radius: 60,
shadow: { enabled: false, x: 0, y: 0, blur: 12, spread: 0, color: '#4fb06d' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: 0,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 1,
iconGap: 8
},
powerlink: {
w: 3,
h: 0,
text: '',
textSrc: 0,
fontSize: 0,
textAlign: TEXT_ALIGNS.CENTER,
textColor: '#2b3b4b',
bgColor: '#6fa7d8',
bgOpacity: 220,
radius: 0,
shadow: { enabled: false, x: 0, y: 0, blur: 0, spread: 0, color: '#000000' },
isToggle: false,
knxAddrWrite: 0,
knxAddr: 0,
action: 0,
targetScreen: 0,
iconCodepoint: 0,
iconPosition: 0,
iconSize: 0,
iconGap: 6
}
};