Einfach mal zeigen will….. :-) - Teil 1

Meistertr

inspiriert von dem tollen minimalistischen Design versuche ich es gerade auch um zu setzen. Muss sagen dass es ganz schön schwer ist, so viel wie möglich aber so wenig wie möglich an zu zeigen. hier mal mein Anfang, aber noch lange nicht fertig..:

tempestas

Ja, minimal in Kombination mit Material Design, da geht schon einiges.

Marcel85, du hast mal echt nen Trend gesetzt!

freamer

Hier mal ein Teil meiner Tablet VISU

und ein Teil der Mobile VISU

sigi234

Hallo,

bin auch gerade dabei eine Mobile VISU zu erstellen…....was sagt ihr dazu?

Fotos:

Marcel85

~~@tempestas:~~

Ja, minimal in Kombination mit Material Design, da geht schon einiges.

Marcel85, du hast mal echt nen Trend gesetzt! `

Es freut mich, dass es so einen Anklang findet.

Marcel85

Ich habe für einen User mal ein anderes Wetter-View gebastelt.

edit: Ich sehe gerade das da wohl was verrutscht ist.

xADDRx

Nice Marcel!

Hier eine View für meine Hue Lampen…

mhorn

~~@Lebeao:~~

Hallo zusammen,

da häng ich mich mal dran und stelle auch meine Views vor. Ich beschäftige mich mit IOBroker seit circa 1 Jahr. Die Views habe ich in 4 verschiedenen Auflösungen erstellt. Ich habe eine Auflösung fürs Iphone, eine fürs Ipad, eine fürn Laptop und eine für meinen Hauptrechner in UHD Aüflösung erstellt. Alle zusammen gezählt,sind es circa 65 Views, die ich bis jetzt erstellt habe. Bin aber noch an vielen beschäftig richtig fertig zu machen. So nun ein paar Views zum Beispiel von mir.

MfG Marco

Tv-Server Ipad.JPG

Tv Iphone.JPG

Tv Ipad.JPG

System Ipad.JPG

Multimedia UHD.JPG

Multimedia Ipad3.JPG

Multimedia Ipad2.JPG

Multimedia Ipad1.JPG

Menü Iphone.JPG

Licht Ipad.JPG

Informationen UHD.JPG

Heizung UHD2.JPG

Heizung UHD.JPG

Heizung Iphone.JPG

Heizung Ipad.JPG `

Was für ein Samsung TV steuerst du

2hot4you

~~@sigi234:~~

Hallo,

bin auch gerade dabei eine Mobile VISU zu erstellen…....was sagt ihr dazu?

Fotos:

Screenshot (257)_LI.jpg

Screenshot (258)_LI.jpg

Screenshot (259).png

Screenshot (260).png `

Hallo Sigi,

würdest Du den View "Screenshot 260" zur Verfügung stellen ?

Lebeao

~~@mhorn:~~

~~@Lebeao:~~

Hallo zusammen,

da häng ich mich mal dran und stelle auch meine Views vor. Ich beschäftige mich mit IOBroker seit circa 1 Jahr. Die Views habe ich in 4 verschiedenen Auflösungen erstellt. Ich habe eine Auflösung fürs Iphone, eine fürs Ipad, eine fürn Laptop und eine für meinen Hauptrechner in UHD Aüflösung erstellt. Alle zusammen gezählt,sind es circa 65 Views, die ich bis jetzt erstellt habe. Bin aber noch an vielen beschäftig richtig fertig zu machen. So nun ein paar Views zum Beispiel von mir.

MfG Marco

Tv-Server Ipad.JPG

Tv Iphone.JPG

Tv Ipad.JPG

System Ipad.JPG

Multimedia UHD.JPG

Multimedia Ipad3.JPG

Multimedia Ipad2.JPG

Multimedia Ipad1.JPG

Menü Iphone.JPG

Licht Ipad.JPG

Informationen UHD.JPG

Heizung UHD2.JPG

Heizung UHD.JPG

Heizung Iphone.JPG

Heizung Ipad.JPG `

Was für ein Samsung TV steuerst du `

Ich habe ein Samsung UE37C6700.

RooftopBBQ

~~@sigi234:~~

Na dann zeig ich mal meine überarbeiteten Views mal her:

Screenshot (149).png

Sind teilweise noch in Bearbeitung….. `

Hallo

könntest Du bitte den Echo Dot View exportieren?

Würde mich brennend interessieren wie und welche Datenpunkte Du dafür hergenommen hast.

Gruß

Marcel

Morrio

Hi,

finde die Minimalistischen Views auch sehr gut aussehend.

Wäre es denn möglich das einer seine Views auf https://iobroker.click/ ganz zur Verfügung stellt?

Bin leider nicht so der Experte bisher :shock:

tempestas

ich konnte es ja nicht lassen und habe jetzt für mein neues Tablet wieder alles etwas umgestellt:

Stoni

~~@tempestas:~~

ich konnte es ja nicht lassen und habe jetzt für mein neues Tablet wieder alles etwas umgestellt:

filename="home.png" index="6">~~

filename="klima_mit_menu_offen.png" index="0">~~

filename="automatiken.png" index="1">~~

filename="einkauf.png" index="2">~~

filename="sonos.png" index="3">~~

filename="technik.png" index="4">~~

filename="robo_menu.png" index="5">~~ ` Mega professionell!! Kompliment!

Unbedingt auf iobroker.click hochladen!!!!

tempestas

Danke, aber das Lob gebührt Marcel85, mrMuppet und uhula. Auf deren Ideen und Beispiele greife ich ja ganz wesentlich zurück bzw bei uhula (teilweise) seine Material Design Arbeit.

Ich habe nur hier und da etwas angepasst.

Stoni

~~@tempestas:~~

Danke, aber das Lob gebührt Marcel85, mrMuppet und uhula. Auf deren Ideen und Beispiele greife ich ja ganz wesentlich zurück bzw bei uhula (teilweise) seine Material Design Arbeit.

Ich habe nur hier und da etwas angepasst. ` Kannst Du Dein Projekt exportieren und hier hochladen? Würde es gerne weitestgehend übernehmen… HAMMER!

Conquest

~~@tempestas:~~

Danke, aber das Lob gebührt Marcel85, mrMuppet und uhula. Auf deren Ideen und Beispiele greife ich ja ganz wesentlich zurück bzw bei uhula (teilweise) seine Material Design Arbeit.

Ich habe nur hier und da etwas angepasst. ` Respekt. Ist richtig Klasse geworden. Da bin ich Meilenweit entfernt.

Wäre echt super wenn du das auf der Demo-Seite hochladen würdest.

LG Torsten

schittl

~~@tempestas:~~

ich konnte es ja nicht lassen und habe jetzt für mein neues Tablet wieder alles etwas umgestellt: `
Geniale Ansichten. Super Arbeit. 2 kleine Fragen habe ich mal dazu:

1. Woher bekommst Du die Informationen zu deinen Geräten in der Technik-Seite? Per Ping-Adapter?

2. Wie hast Du die Zeitschaltung realisiert? Per Skript? Ähnlich wie das am Beispiel des Skriptes Eieruhr?

Wäre prima wenn es auf der Demo-Seite landet.

vg

Falk

tempestas

Hallo,

1a) die grünen "online Signale" sind per Ping Adapter, genau richtig getippt.

1b) die Infos zur Internet Verbindung stammen aus dem Skript von Cybertron & Pix http://forum.iobroker.net/viewtopic.php?f=21&t=4170

1c) die übrigen infos habe ich mit dem System-Info Skript von Blackmike extrahiert, welches ich teilweise noch etwas ergänzt habe http://forum.iobroker.net/viewtopic.php?t=7590

Die Zeitschaltung habe ich via Skript gemacht. Ich habe es auch hier im Forum schon veröffentlicht, wie die meisten meiner Skripte (wenn ich denn mal was lauffähiges hinbekomme mit meiner Laienkompetenz). Das hier genutzte ist etwas abgewandelt zu dem veröffentlichten, da ich nun mit dem jqui ctrl input widget arbeite statt mehrere Knöpfe. Ob das wirklich ideal ist fürs Tablet, da bin ich mir noch nicht sicher.

Hier das Skript:

// ##########
// Skript zum Schalten einer Steckdose zwischen zu zwei definierten Zeitpunkten. Steuerbar über Vis
// Dank an paul53 für das Schedule Skript
// v 1.0 stable, tempestas 24.1.2018; Zeitauswahl stark vereinfacht (jqui input date time overlay), zu steuernder Aktor via VIS auswählbar
// v 0.2, stable, tempestas, 2.12.2017
// Changes: boolean neu angelegt
// telegram eingefügt
 // Skripteinstellungen
 var force = false;         // true erzwingt bei Neustart des Skripts das Anlegen der States mit den nachfolgend definierten Werten
var debug = true;
 // STATES FÜR AKTIV UND TELEGRAM INFO 
 createState('javascript.0.Zeitschaltung.Aktor1.Aktiv', false, force, {
  read: true, 
  write: true, 
  name: "Zeitschaltung aktiv oder aus?", 
  type: "boolean", 
  def: false
});
 createState('javascript.0.Zeitschaltung.Aktor1.telegram', false, force, {
  read: true, 
  write: true, 
  name: "Telegram senden?", 
  type: "boolean", 
  def: false
});
 // State für zu steuernden Aktor anlegen
 createState('javascript.0.Zeitschaltung.Aktor1.Aktor','', force, {               
    name: 'Einstellung zu steuernder Aktor',
    type: 'string',
});
 // STARTZEIT STATES
 createState('javascript.0.Zeitschaltung.Aktor1.Start.Zeit',"17:00:00", force, {          // String der Startzeit      
    name: 'Startzeit ',
    type: 'string',
 });
 createState('javascript.0.Zeitschaltung.Aktor1.Start.Stunde',"", force, {          // Startzeit-Stundenstring für Anzeige in VIS
    name: 'Startstunde ',
    type: 'string',
 });
 createState('javascript.0.Zeitschaltung.Aktor1.Start.Minute',"", force, {          // Startzeit-Minutenstring für Anzeige in VIS
    name: 'Startminute ',
    type: 'string',
 });
 // ENDZEIT STATES
 createState('javascript.0.Zeitschaltung.Aktor1.Ende.Zeit',"20:00:00", force, {          // String der Endzeit      
    name: 'Startzeit ',
    type: 'string',
 });
 createState('javascript.0.Zeitschaltung.Aktor1.Ende.Stunde','', force, {           // Endzeit-Stundenstring für Anzeige in VIS    
    name: 'Endminute ',
    type: 'string',
 });
 createState('javascript.0.Zeitschaltung.Aktor1.Ende.Minute','', force, {           // Endzeit-Minutenstring für Anzeige in VIS    
    name: 'Endminute ',
    type: 'string',
 });
 var idAktor = 'javascript.0.Zeitschaltung.Aktor1.Aktor';     
var aktor;
 var idAktiv         =   "javascript.0.Zeitschaltung.Aktor1.Aktiv";
var idTelegram      =   "javascript.0.Zeitschaltung.Aktor1.telegram";
 var idStartzeit     =   "javascript.0.Zeitschaltung.Aktor1.Start.Zeit";
var idEndzeit       =   "javascript.0.Zeitschaltung.Aktor1.Ende.Zeit";
 var idMinStart      = "javascript.0.Zeitschaltung.Aktor1.Start.Minute" ;
var idStdStart      = "javascript.0.Zeitschaltung.Aktor1.Start.Stunde";
 var idMinEnd        = "javascript.0.Zeitschaltung.Aktor1.Ende.Minute";
var idStdEnd        = "javascript.0.Zeitschaltung.Aktor1.Ende.Stunde";
 var einschalten,
    timerEinschalten;

var ausschalten,
    timerAusschalten;

// ##################################################################################################
//                                      Functions und Trigger
// ##################################################################################################
 // FUNCTION WECHSEL DES ZU SCHALTENDEN AKTORS
 on({id: idAktor, change: "any"}, function(obj){
    aktor = obj.state.val;
   if(debug) log("Aktor ist "+aktor);    
});
 // STARTZEIT TRIGGER (SCHEDULE)
 on(idStartzeit, function(dp) {                                                                          // Triggern bei Änderung des Startzeit-Strings
    einschalten= dp.state.val.split(':');                                             

    setState(idStdStart, einschalten[0]);                                                               // States für VIS Visualisierung setzen
    setState(idMinStart, einschalten[1]);                                                               // States für VIS Visualisierung setzen
     clearSchedule(timerEinschalten);                                                                    // altes Schedule löschen
    timerEinschalten = schedule(einschalten[1] + ' ' + einschalten[0] + ' * * 0-6', fEinschalten);      // neues Schedule einstellen
});
 // ENDZEIT TRIGGER ( SCHEDULE)
 on(idEndzeit, function(dp) {                                                                            // Triggern bei Änderung des Endzeit-Strings
    ausschalten= dp.state.val.split(':');

    setState(idStdEnd, ausschalten[0]);                                                                 // States für VIS Visualisierung setzen
    setState(idMinEnd, ausschalten[1]);                                                                 // States für VIS Visualisierung setzen

    clearSchedule(timerAusschalten);                                                                    // altes Schedule löschen
    timerAusschalten = schedule(ausschalten[1] + ' ' + ausschalten[0] + ' * * 0-6', fAusschalten);      // neues Schedule einstellen
});
 // Functions ein- und ausschalten (Festlegen der durch Schedule getriggerten Aktionen)
 function fAusschalten(){
    if (getState(idAktiv).val === true) {
            setState(aktor, false);         // nur, wenn die Automatik eingeschaltet ist wird die Steckdose geschaltet
             if(getState(idTelegram).val === true) {sendTo('telegram.0', {                                          // Nachricht per Telegram
                text: "Test-Zeitschaltung wurde ausgeschaltet"         
            });
        }
    }
}

function fEinschalten(){
    if (getState(idAktiv).val === true) {
            setState(aktor, true);         // nur, wenn die Automatik eingeschaltet ist wird die Steckdose geschaltet
             if(getState(idTelegram).val === true) {sendTo('telegram.0', {                                          // Nachricht per Telegram
                text: "Test-Zeitschaltung wurde eingeschaltet"        
            });
        }
    }
}
 // FUNCTION FÜR ERSTMALIGES EINLESEN
 function fSkriptStart(){
    einschalten = getState(idStartzeit).val.split(':'); 
    timerEinschalten = schedule(einschalten[1] + ' ' + einschalten[0] + ' * * 0-6', fEinschalten); 
    if(debug) log("Einschalten um:" +einschalten[0] + " / " + einschalten[1]+ " / " + einschalten[2] );
    setState(idStdStart, einschalten[0]);
    setState(idMinStart, einschalten[1]);

    ausschalten = getState(idEndzeit).val.split(':'); 
    timerAusschalten = schedule(ausschalten[1] + ' ' + ausschalten[0] + ' * * 0-6', fAusschalten); 
    if(debug) log("Ausschalten um:" + ausschalten[0] + " / " + ausschalten[1]+ " / " + ausschalten[2] );
    setState(idStdEnd, ausschalten[0]);
    setState(idMinEnd, ausschalten[1]);    

}
 // Bei Start eine Sekunde verzögert, damit States angelegt werden können
setTimeout(fSkriptStart, 1000) ;

Hier pflege ich eine Liste für die Dropdown Auswahl der Aktoren, die geschaltet werden sollen. Einfach unter Klartext einen beliebigen Namen eingeben und bei Liste den Datenpunkt (OID).

createState('javascript.0.Zeitschaltung.ListeKlartext','',  {               
    name: 'Einstellung zu steuernder Aktor',
    type: 'string',
});
createState('javascript.0.Zeitschaltung.Liste','',  {               
    name: 'Einstellung zu steuernder Aktor',
    type: 'string',
});
var Klartext ='HM Steckdose 1 Schlafzimmer;HM IP Steckdose Küche';
log(Klartext);
var Liste = "hm-rpc.0.OEQ0817114.1.STATE;hue.0.Philips_hue.Steckdose_Sterne.on";
log(Liste);
setState("javascript.0.Zeitschaltung.ListeKlartext"/*Einstellung zu steuernder Aktor*/, Klartext);
setState("javascript.0.Zeitschaltung.Liste"/*Einstellung zu steuernder Aktor*/, Liste);

Marcel85

Hier mal ein neuer Entwurf.

Community Forum

NEWS

Einfach mal zeigen will….. :-) - Teil 1

Support us

763

32.5k

81.6k

1.3m