Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar

[Curtis777]

@CrunkFX Wirkt sehr edel und clean genau so hätte ich sie auch gerne....

[CrunkFX]

@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

[Curtis777]

@CrunkFX gibt es eine einfachere Methode die config zu schreiben ?
ich nehme mal an es geört hier die config.js "einfach" editiert....

Sowas wie ein Editor der mir sofort zeigt was ich eintrage gibt es nicht dafür oder ?

[CrunkFX]

@Curtis777 Doch, geh in die Instanzeinstellungen, dort ist ein Text Editor. hier kannst du direkt den Code bearbeiten oder in ein anderes Programm kopieren z.B. VSCode was ich dir empfehlen würde.

Wichtig ist vor allem viele Kommentare und alle nicht verwendeten Elemente einklappen.

[Curtis777]

@CrunkFX
Danke dir ... aber eine Art Editor für Dummies gibt es nicht die in JS sich nicht wirklich auskennen ?
also so ein drag and drop editor oder so

[CrunkFX]

@Curtis777 Noch nicht, bin aber gerade dabei einen in C# zu schreiben kann aber noch eben dauern. Ich hab aber ehrlich gesagt von JS auch null Ahnung, man findet sich aber schnell ein. Schwierig wird das ganze durch die vielen Klammern. Das ist aber in anderen Programmiersprachen ähnlich.

[Curtis777]

@CrunkFX bei mir scheitert es gerade daran welche id nehme ich denn ? ich habe in objekte die id einfach kopiert ...
z.b. das als ID verwendet.
id: "shelly.0.SHRGBW2#66269A#1.color.white",
sehe aber den slider nicht (habe den vorhandenen slider editiert in der config

[CrunkFX]

@Curtis777 Poste mal deine Config, dann schu ich mir das an

[Curtis777]

jetzt habe ich es esoweit... dürfte wirklich nur der erste anfang sehr kompliziert seinfür mich... der rest ist learning by doing....
jetzt weiss ich noch nicht woher er die kleinen icons nimmt ....

Ich komme gerne nochmal auf dien angebot zurück muss mal selbst herum erfinden und basteln....

Danke euch beiden für die Hilfe
Danke Danke Danke

[CrunkFX]

@Curtis777 Der nutzt Material Design Icons. Google Mal dann bekommst du ne große Auswahl an Icons

[Curtis777]

@CrunkFX die müssen doch vorher auf dem iobroker liegen oder zieht er die live aus dem netz ?
habe auf anhieb bei material.io eine riesen auswahl gefunden...
würde mir ja die icons selbst auf die disk legen wenn ich wüsste wohin ...

[CrunkFX]

@Curtis777 Die Material Design Icons werden bei bedarf aus der GitHub Repo bezogen. Du brauchst also lediglich die Icon ID

[CrunkFX]

Hab´s nun auch geschafft Wetter und Spotify ins TileBoard zu bekommen.

[Curtis777]

@CrunkFX genial welchen adapter hast du denn für das wetter genutzt und wie hast du den Tile erstellt?

Möchtest du mir dein skript viellecith senden ?

Ich bin bei Schalter und slider .... ich glaube jetzt läuft es endlich bei mir...

[CrunkFX]

@Curtis777 Ich hab mir per weatherwidget.io ein Widget erstellt und per IFrame eingebunden.

[uvillers]

@CrunkFX die URL für die Icons habe ich in einer der Dateien des Tileboards gefunden. Bei mir läd er die aber einfach nicht. Gibt es einen Trick damit die Icons in den Kacheln angezeigt werden?

[CrunkFX]

@uvillers Du benötigst keine URL zum Anzeigen. Der Name des Icons wird dort erwartet.
Z.b.

icon: 'mdi-home-outline',

Oder hab ich dich falsch verstanden?

MFG
CrunkFX

[uvillers]

@CrunkFX Genau, dort habe ich auch die icons eingetragen, er ignoriert die aber.

[CrunkFX]

@uvillers Kannst du mal den Script hier schicken?

[uvillers]

@CrunkFX gern:

/* my Config
Uli am 12.05.2020
*/

var CONFIG = {
customTheme: CUSTOM_THEMES.COMPACT,
transition: TRANSITIONS.ANIMATED_GPU,
entitySize: ENTITY_SIZES.NORMAL,
tileSize: 150,
tileMargin: 6,
serverUrl: "http://192.168.70.2:8082",
wsUrl: "ws://192.168.70.2:8082/api/websocket",
authToken: null,
timeFormat: 24,
menuePosition: MENU_POSITIONS.LEFT, //oder BOTTOM
//groupsAlign

pages: [
{
title: '@home',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline',
header: DEFAULT_HEADER,
groups: [
{
title: 'Group title',
width: 2,
height: 3,
groupMarginCss: '20px 40px',
hidden: Boolean | Function,
items: [
//Start Arbeitszimmer
{
position: [0, 1],
type: TYPES.SWITCH,
id: 'hue-extended.0.groups.006-arbeitszimmer.action.on',
title: 'Arbeitszimmer',
subtitle: 'Schreibtisch',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
}
}, //Ende Arbeitszimmer

            {
               position: [1, 1],
               title: 'Arbeitszimmer',
               subtitle: 'Dimmer',
               id: 'hue-extended.0.groups.006-arbeitszimmer.action.brightness',
               type: TYPES.SLIDER,
               states: {
                  on: "On",
                  off: "Off"
               },
               icons: {
                  on: "mdi-lightbulb-on",
                  off: "mdi-lightbulb",
               },
               
              /*sliders: [
                  {
                     position: [1, 2],
                     title: 'Brightness',
                     field: 'brightness',
                     id: 'hue-extended.0.groups.006-arbeitszimmer.action.brightness',
                        type: TYPES.SLIDER,
                     max: 255,
                     min: 0,
                     step: 5,
                     request: {
                        type: "call_service",
                        domain: "light",
                        service: "turn_on",
                        field: "brightness"
                     }
                  },
                  {
                     title: 'Color temp',
                     field: 'color_temp',
                     max: 588,
                     min: 153,
                     step: 15,
                     request: {
                        type: "call_service",
                        domain: "light",
                        service: "turn_on",
                        field: "color_temp"
                     }
                  }
               ],*/
               //colorpicker: true
            },
            
        ], //Ende Items
      }, // Ende Groups
    ], // Ende Groups
}, //Ende Pages

] //Ende Pages
// ENDE
}