@Curtis777 Beginne einfach mal mit einer einfachen Seite und einem Schalter.
Hier ein Beispiel von mir, die Datenpunkte kannst du ja an deine Bedürfnisse anpassen.
var CONFIG = {
customTheme: CUSTOM_THEMES.TRANSPARENT, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,
tileMargin: 6,
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY
header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
padding: '30px 130px 0',
fontSize: '28px'
},
right: [],
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
}
]
},
pages: [
{
title: 'EG',
bg: 'https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=1915&q=80',
icon: 'mdi-home-outline',
groups:[
{
title: 'Wohn/Essbereich',
width: 4,
height: 3,
items: [
{
position: [0, 2],
type: TYPES.SWITCH,
id: 'shelly.0.SHSW-44#355DF6#1.Relay0.Switch',
title: 'Terrassentür',
subtitle: 'Unterbauleuchten',
states: {
true: "Eingeschaltet",
false: "Ausgeschaltet"
},
icons: {
true: "mdi-lightbulb-on",
null: "mdi-lightbulb",
}
}
]
}
]
}
]
}
MFG
CrunkFX