460 lines
11 KiB
JavaScript
460 lines
11 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,
|
|
CHART: 9,
|
|
CLOCK: 10,
|
|
ROOMCARD: 11
|
|
};
|
|
|
|
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',
|
|
9: 'chart',
|
|
10: 'clock',
|
|
11: 'roomcard'
|
|
};
|
|
|
|
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',
|
|
chart: 'Chart',
|
|
clock: 'Uhr (Analog)',
|
|
roomcard: 'Room Card'
|
|
};
|
|
|
|
|
|
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)',
|
|
8: 'KNX Uhrzeit (DPT 10.001)',
|
|
9: 'KNX Datum (DPT 11.001)',
|
|
10: 'KNX Datum & Uhrzeit (DPT 19.001)',
|
|
11: 'System Uhrzeit',
|
|
12: 'System Datum',
|
|
13: 'System Datum & Uhrzeit'
|
|
};
|
|
|
|
export const textSourceGroups = [
|
|
{ label: 'Statisch', values: [0] },
|
|
{ label: 'System', values: [11, 12, 13] },
|
|
{ label: 'DPT 1.x', values: [2] },
|
|
{ label: 'DPT 5.x', values: [3, 7] },
|
|
{ label: 'DPT 9.x', values: [1] },
|
|
{ label: 'DPT 10.x', values: [8] },
|
|
{ label: 'DPT 11.x', values: [9] },
|
|
{ label: 'DPT 13.x', values: [6] },
|
|
{ label: 'DPT 14.x', values: [5] },
|
|
{ label: 'DPT 16.x', values: [4] },
|
|
{ label: 'DPT 19.x', values: [10] }
|
|
];
|
|
|
|
export const sourceOptions = {
|
|
label: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
|
|
button: [0],
|
|
led: [0, 2],
|
|
icon: [0, 2],
|
|
powernode: [0, 1, 2, 3, 4, 5, 6, 7],
|
|
powerlink: [0, 1, 3, 5, 6, 7],
|
|
chart: [1, 3, 5, 6, 7],
|
|
clock: [11],
|
|
roomcard: [0, 1, 3, 5, 6, 7] // Temperature sources
|
|
};
|
|
|
|
export const chartPeriods = [
|
|
{ value: 0, label: '1h' },
|
|
{ value: 1, label: '3h' },
|
|
{ value: 2, label: '5h' },
|
|
{ value: 3, label: '12h' },
|
|
{ value: 4, label: '24h' },
|
|
{ value: 5, label: '1 Monat' }
|
|
];
|
|
|
|
export const SUBBUTTON_POSITIONS = {
|
|
TOP: 0,
|
|
TOP_RIGHT: 1,
|
|
RIGHT: 2,
|
|
BOTTOM_RIGHT: 3,
|
|
BOTTOM: 4,
|
|
BOTTOM_LEFT: 5,
|
|
LEFT: 6,
|
|
TOP_LEFT: 7
|
|
};
|
|
|
|
export const SUBBUTTON_POSITION_LABELS = {
|
|
0: 'Oben',
|
|
1: 'Oben rechts',
|
|
2: 'Rechts',
|
|
3: 'Unten rechts',
|
|
4: 'Unten',
|
|
5: 'Unten links',
|
|
6: 'Links',
|
|
7: 'Oben links'
|
|
};
|
|
|
|
export const SUBBUTTON_ACTIONS = {
|
|
TOGGLE_KNX: 0,
|
|
NAVIGATE: 1
|
|
};
|
|
|
|
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',
|
|
8: '%02d:%02d:%02d',
|
|
9: '%02d.%02d.%04d',
|
|
10: '%02d.%02d.%04d %02d:%02d:%02d',
|
|
11: '%02d:%02d:%02d',
|
|
12: '%02d.%02d.%04d',
|
|
13: '%02d.%02d.%04d %02d:%02d:%02d'
|
|
};
|
|
|
|
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,
|
|
// Secondary value (left)
|
|
textSrc2: 0,
|
|
text2: '',
|
|
knxAddr2: 0,
|
|
// Tertiary value (right)
|
|
textSrc3: 0,
|
|
text3: '',
|
|
knxAddr3: 0,
|
|
// Conditions
|
|
conditions: []
|
|
},
|
|
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
|
|
},
|
|
chart: {
|
|
w: 360,
|
|
h: 220,
|
|
text: 'Chart',
|
|
textSrc: 0,
|
|
fontSize: 1,
|
|
textAlign: TEXT_ALIGNS.LEFT,
|
|
textColor: '#E7EDF3',
|
|
bgColor: '#16202c',
|
|
bgOpacity: 255,
|
|
radius: 12,
|
|
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: 1,
|
|
iconGap: 0,
|
|
chart: {
|
|
period: 0,
|
|
series: [
|
|
{ knxAddr: 0, textSrc: 1, color: '#EF6351' }
|
|
]
|
|
}
|
|
},
|
|
clock: {
|
|
w: 200,
|
|
h: 200,
|
|
text: '',
|
|
textSrc: 11, // System Time
|
|
fontSize: 1,
|
|
textAlign: TEXT_ALIGNS.CENTER,
|
|
textColor: '#FFFFFF',
|
|
bgColor: '#16202c',
|
|
bgOpacity: 255,
|
|
radius: 100, // Circular default
|
|
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: 1,
|
|
iconGap: 0
|
|
},
|
|
roomcard: {
|
|
w: 200,
|
|
h: 200,
|
|
text: 'Wohnzimmer\n%.1f °C',
|
|
textSrc: 1, // Temperature
|
|
fontSize: 2,
|
|
textAlign: TEXT_ALIGNS.CENTER,
|
|
textColor: '#223447',
|
|
bgColor: '#FFFFFF',
|
|
bgOpacity: 255,
|
|
radius: 100,
|
|
shadow: { enabled: true, x: 0, y: 4, blur: 12, spread: 0, color: '#00000022' },
|
|
isToggle: false,
|
|
knxAddrWrite: 0,
|
|
knxAddr: 0,
|
|
action: BUTTON_ACTIONS.JUMP,
|
|
targetScreen: 0,
|
|
iconCodepoint: 0xe88a, // Home icon
|
|
iconPosition: 0,
|
|
iconSize: 3,
|
|
iconGap: 8,
|
|
subButtonSize: 40, // Sub-button size in pixels
|
|
subButtonDistance: 80, // Distance from center in pixels
|
|
subButtons: []
|
|
}
|
|
};
|