Views in Frame/Widget anzeigen lassen

Homoran

Ich fenke, nachdem ich mir deinen ersten Post jetzt mehrfach durchgelesen habe, dass es hier grundlegende Verständnisprobleme zu geben scheint.

Vis ist was die Funktionen angeht nahezu unerreicht. Vielleicht gerade deswegen hast du "nur" noch nicht den Durchblick.

Kennst du die http://www.iobroker.net/docu/?page_id=2754&lang=de und das http://www.iobroker.net/docu/?page_id=6365&lang=de?

Wenn ich das richtig vetstehe möchtest du links eine Navigation Bar haben.

Etwa so?

Für die Unterseiten musst du dann entsprechende Views bauen, die über den Navigation bar aufgerufen werden.

~~@Ace-k:~~

Ich habe eine funksteckdose mit zeitsteuerung belegt ( homematic ) wie kann ich das am besten im view ändern `
Was genau willst du ändern?

Gruß

Rainer

Ace-k

Danke . Ja durchgeschaut schon mal .

Kann sein das ich nicht alles verstanden habe .

Ja das scheint so zu sein . Ändert er da die komplette Seite oder halt nur den Inhalt der Anzeige ?!

Die Zeiten für die Steckdose . Falls ich die mal ändern möchte oder halt neue Funktionen oder Sachen anpassen

Homoran

~~@Ace-k:~~

Ja das scheint so zu sein `
Was bitte? Scheint wie zu sein?

~~@Ace-k:~~

Ändert er da die komplette Seite oder halt nur den Inhalt der Anzeige ?! `
Auch damit kann ich nicht viel anfangen. Wo bitte liegt der Unterschied?

~~@Homoran:~~

Die Zeiten für die Steckdose `
Meinst du einen Zeitplan oder eine Einschaltdauer?

Wenn Zeitplan, wo und wie ist der bisher hinterlegt?

Gruß

Rainer

eric2905

Ich versuche es mal zu erklären.

1. Du baust eine View, die nur Dein Menü enthält. Positionen zueinander, Funktionen, Gestaltung, usw.

2. Dann baust Du die erste View, die mit dem Menü gesteuert werden soll

3. Darauf packst Du das Widget „View in Widget“ und positionierst es so auf der View, das die Position passt. Die Größe wählst Du so, das Dein Menü aus Schritt 1 da rein passt.

Damit wird das Menü aus Schritt 1 hier anzeigt (eingeblendet).

Den Rest der View kannst Du dann so füllen, wie Du möchtest.

Du kannst diese View dann auch kopieren und anders gestalten.

Sollten Änderungen am Menü notwendig sein, werden diese in der View aus Schritt 1 durchgeführt und sind sofort auf den anderen Views (Schritt 2 und 3 sowie deren Kopien) sichtbar, da diese das Menü ja nur darstellen.

Gruß,

Eric

Von unterwegs getippert

Ace-k

Ah , jetzt nach mehrmaligen lesen und testen habe ich verstanden worauf du hinaus möchtest . [emoji106][emoji106]

Eine Variante , gut

Ich meinte Bzw dachte da dann in umgekehrter Folge .

Das ich das eigentliche Menü als Hauptseite nutze .

Und beim Anklicken der Buttons ( Licht, Kamera , Wetter ….)

Sich dann das "Feld" ANSICHT ändert mit dem Inhalt eines views wo dann die Kamera oder Lichtschalter oder Wetter befindet .

So das die eigentlichen views ohne Menübuttons sind .

Ist das jetzt etwas besser / verständlicher formuliert ? [emoji848]

Homoran

Du legst dir am besten zuerst für alle gewünschten "Unterseiten" die gewünschten Views an.

Als letztes setzt du den Navigation Bar. In den Einstellungen gibst du an, dass dieser auf allen Views zu sehen sein soll.

Der Navigation Bar ist dann auf jeder Seite an der gleichen Stelle, die jeweils aktive Seite wird farblich markiert, und du kannst von jedem View auf jeden anderen wechseln.

Übe doch mal mit zwei, drei Views.

Der von dir vorgeschlagene Weg geht auch, aber wie willst du dann wieder aus den Unterseiten herauskommen?

Gruß

Rainer

Meistertr

~~@Ace-k:~~

Ah , jetzt nach mehrmaligen lesen und testen habe ich verstanden worauf du hinaus möchtest . [emoji106][emoji106]

Eine Variante , gut

Ich meinte Bzw dachte da dann in umgekehrter Folge .

Das ich das eigentliche Menü als Hauptseite nutze .

Und beim Anklicken der Buttons ( Licht, Kamera , Wetter ….)

Sich dann das "Feld" ANSICHT ändert mit dem Inhalt eines views wo dann die Kamera oder Lichtschalter oder Wetter befindet .

So das die eigentlichen views ohne Menübuttons sind .

Ist das jetzt etwas besser / verständlicher formuliert ? [emoji848] ` Worum geht es auch ist aber nicht so schön wie ich festgestellt habe. Du kannst es so machen indem du ein viel in widget 8 einsetzt und deine meunubutton Werte gibst von 1-10 z. B und ein über ein Hilfs variable dev1 andere Objekt eingibst. Nachteil hier ist, dass egal wo der view läuft immer der Wert von Dev bleibt z. B 2 Tabs wenn oben Dev auf 2 geschaltet wird ist es unten auch. Da ist die Lösung die Eric beschrieben hat die schönere. Ist auch von den ladezeiten schneller habe ich festgestellt und es treten weniger Fehler auf

Gesendet von meinem Handy

Ace-k

Habe das jez mal alles umgebastelt .

Man kann mit leben . Ist gut so die Lösung .

Gibt es nun Noch eine Lösung , wie ich das mit der CcU2 lösen kann ?

Das ich die Werte von der zeitsteuerung ändern kann oder neue hinzufügen ?!

Meistertr

~~@Ace-k:~~

Habe das jez mal alles umgebastelt .

Man kann mit leben . Ist gut so die Lösung .

Gibt es nun Noch eine Lösung , wie ich das mit der CcU2 lösen kann ?

Das ich die Werte von der zeitsteuerung ändern kann oder neue hinzufügen ?! ` Wo liegt denn das programm? Hast du da ein Script auf der ccu? Falls ja würde ich es vom der ccu löschen und die Steuerung über ein Javascript in iobroker machen, dann lässt sich auch eine zeitanderung in vis realisieren

Gesendet von meinem Handy

Ace-k

[emoji15]

Ich rufe die CCU2 im Browser auf und dann klicke ich auf das passende Menü und erstelle ggf eine neue Steuerung .

Java kenne ich mich nicht mit aus

Homoran

Ich hatte schon mal früher im Thread gefragt, um dir da helfen zu können:
~~@Homoran:~~

Homoran hat geschrieben:

Die Zeiten für die Steckdose

Meinst du einen Zeitplan oder eine Einschaltdauer?

Wenn Zeitplan, wo und wie ist der bisher hinterlegt? `

Auch deine jetzige Aussage
~~@Ace-k:~~

Ich rufe die CCU2 im Browser auf und dann klicke ich auf das passende Menü und erstelle ggf eine neue Steuerung . `
Hilft mir da nicht weiter.

Um dir sagen zu können, wie du mit ioBroker da eingreifen kannst, müssen wir wissen, wie das bei dir abläuft.

Vielleicht würden auch Screenshots helfen, auf denen wir erkennen können, wie dein Zeitplan funktioniert.

Oder hast du dort ein Programm auf der CCU mit einem Zeitmodul, und willst diese Einstellungen über ioBroker ändern?

Gruß

Rainer

Ace-k

Ach so entschuldige, dachte ihr kennt evtl die CCu2

So sieht es ungefähr aus . Also das Menü von der CcU2

Und dort kann man das dann so einstellen .

~~![](</s><URL url=)<link_text text="https://uploads.tapatalk-cdn.com/201708 ... c328f2.jpg">https://uploads.tapatalk-cdn.com/20170828/bf54f98eea3e6c2af8ddf2d1c9c328f2.jpg</link_text>" />

Ist das verständlicher ?~~

Homoran

Natürlich kenne ich die CCU. Aber ich weiß nicht, wie du deine Schaltsteckdosen steuerst ;)

Wie zuletzt vermutet hast du ein Programm mit einem Zeitmodul. Meines Wissens kann man die Parameter in einem CCU Programm nicht mal eben so über ioBroker ändern.

Anders hätte es ausgesehen, wenn du z. B. mit Systemvariablen gearbeitet hättest.

Nur aus Neugier: Was willst du denn da ändern? Da du mit Astro arbeitest oassen sich fie Zeiten doch auch automatisch (an den Sonnenuntergang) an.

Gruß

Rainer

Ace-k

Wenn erstmal eingestellt bleibt es eigentlich so :)

Aber für den Fall der Fälle .

Dann evtl als Pop up ? Das sich das Fenster der CcU2 öffnet und ich dann da das ändern kann falls man es möchte ?

Wenn ich in die Spalte zum Zeit einstellen klicke , öffnet sich dann die Tastatur vom Tablet ?! Sollte doch oder ?

Ace-k

Kann noch jemand was dazu sagen?!

tempestas

ich kann dazu sagen:

vergiss die CCU2 außer als Hub und mach alles in ioBroker. Nervt anfangs etwas, das umzustellen, lohnt sich aber

Ace-k

Okay.

Das ja dass was ich möchte ..

Hast du einen Ansatz für mich ?

Ausgang :

Schaltbarezwischensteckdose soll eine neue Zeit bekommen .

Mo-so 12-13 Uhr .

Mund wie ich das auch wieder löschen kann falls nicht mehr benötigt

tempestas

ungetestet, aber probier es mal so (Code muss in ein Javascript Skript, dieses dann starten).

In Vis musst du dann noch eine View erstellen, in der du auf die einzelnen Datenpunkte linkst, um diese zu steuern. Dazu weiter unten:

! ````
! // ##########
// Skript für Ace-K zum Schalten einer Steckdose zwischen zu zwei definierten Zeitpunkten. Steuerbar über Vis
// Dank an paul53 für das Schedule Skript
// v 0.1, ungetestet, tempestas, 28.11.2017
! var force = true; // erzwingt bei Neustart des Skript Anlegen der States mti den nachfolgend definierten Werten
! // States anlegen
! createState('Zeitschaltung.Steckdose1.Aktiv', false);
! createState('Zeitschaltung.Steckdose1.Start.Stunde',12, force, {
name: 'Startstunde ',
type: 'number',
min: '0',
max: '23',
});
! createState('Zeitschaltung.Steckdose1.Start.Minute',0, force, {
name: 'Startminute ',
type: 'number',
min: '0',
max: '59',
});
! createState(Zeitschaltung.Steckdose1.Start.MinuteString',"00", force, { // String für Anzeige in VIS; wird via function an numerischen Wert angeglichen
name: 'Startminute ',
type: 'string',
! });
! createState('Zeitschaltung.Steckdose1.Start.Zeit',"12:00", force, { // String der Startzeit
name: 'Startzeit ',
type: 'string',
! });
! createState('Zeitschaltung.Steckdose1.Ende.Stunde',13, force, {
name: 'Endstunde ',
type: 'number',
min: '0',
max: '23',
});
! createState('Zeitschaltung.Steckdose1.Ende.Minute',0, force, {
name: 'Endminute ',
type: 'number',
min: '00',
max: '59',
});
! createState('Zeitschaltung.Steckdose1.Ende.MinuteString',00, force, { // String für Anzeige in VIS; wird via function an numerischen Wert angeglichen
name: 'Endminute ',
type: 'string',
min: '00',
max: '59',
});
! createState('Zeitschaltung.Steckdose1.Ende.Zeit',"13:00", force, { // String der Endzeit
name: 'Endzeit ',
type: 'string',
! });
! // ##############################################################################################################
// ### Functions zur Anpassung der Minuten Strings an die numerischen Werte sowie Anpassung Gesamtzeit Strings ##
// ##############################################################################################################
! var idAktiv = 'javascript.0.Zeitschaltung.Steckdose1.Aktiv';
! var idMinStart = 'javascript.0.Zeitschaltung.Steckdose1.Start.Minute' ;
var idStdStart = 'javascript.0.Zeitschaltung.Steckdose1.Start.Stunde' ;
var idMinStartString = 'javascript.0.Zeitschaltung.Steckdose1.Start.MinuteString';
var idStartzeit = 'javascript.0.Zeitschaltung.Steckdose1.Start.Zeit';
! var idMinEnd = 'javascript.0.Zeitschaltung.Steckdose1.Ende.Minute';
var idStdEnd = 'javascript.0.Zeitschaltung.Steckdose1.Ende.Stunde';
var idMinEndString = 'javascript.0.Zeitschaltung.Steckdose1.Ende.MinuteString';
var idEndzeit = 'javascript.0.Zeitschaltung.Steckdose1.Ende.Zeit';
! // Bei Änderung Minuten Startzeit
on(idMinStart, function() {
var minuten = getState(idMinStart).val;
var minutenString = "";
if(minuten < 10) {
minutenString = '0' +minuten;
}
else minutenString = minuten.toString();
! setState(idMinStartString, minutenString); // Anpassen der Minuten

var stunde = getState(idStdStart).val;                                      // Auslesen Stunde
setState(idStartzeit, stunde + ':' + minutenString);                        // Einsetzen Stunde und Minute in Startzeit-String

! });
! // Bei Änderung Minuten Endzeit
on(idMinEnd, function() {
var minuten = getState(idMinEnd).val;
var minutenString = "";
if(minuten < 10) {
minutenString = '0' +minuten;
}
else minutenString = minuten.toString();

setState(idMinEndString, minutenString);

! var stunde = getState(idStdEnd).val; // Auslesen Stunde
setState(idEndzeit, stunde + ':' + minutenString); // Einsetzen Stunde und Minute in Endzeit-String
!
});
! // Bei Änderung Stunde Startzeit
on(idStdStart, function() {

var minutenString = getState(idMinStartString).val;
var stunde = getState(idStdStart).val;                                     
setState(idStartzeit, stunde + ':' + minutenString);

! });
! // Bei Änderung Stunde Endzeit
on(idStdEnd, function() {

var minutenString = getState(idMinEndString).val;
var stunde = getState(idStdEnd).val;                                      // Auslesen Stunde
setState(idEndzeit, stunde + ':' + minutenString);                        // Einsetzen Stunde und Minute in Endzeit-String

! });
! // ##################################################################################################
// VARIABLEN UND IDS DEFINIEREN
// ##################################################################################################
! // STARTZEIT TRIGGER (SCHEDULE)
! var einschalten = getState(idStartzeit).val.split(':'); // erstmaliges einlesen der Startzeit, aufteilen in Stunden und Minuten
! var timerEinschalten = schedule(einschalten[1] + ' ' + einschalten[0] + ' * * 0-6', fEinschalten); // initiales Festlegen des Start-Zeitpunkts
! on(idStartzeit, function(dp) { // Triggern bei Änderung des Startzeit-Strings
einschalten= dp.state.val.split(':');
clearSchedule(timerEinschalten); // altes Schedule löschen
timerEinschalten = schedule(einschalten[1] + ' ' + einschalten[0] + ' * * 0-6', fEinschalten);
});
! // ENDZEIT TRIGGER ( SCHEDULE)
! var ausschalten= getState(idEndzeit).val.split(':'); // erstmaliges einlesen der Endzeit, aufteilen in Stunden und Minuten
! var timerAusschalten= schedule(ausschalten[1] + ' ' + ausschalten[0] + ' * * 0-6', fAusschalten); // initiales Festlegen des Endzeitpunkts
! on(idEndzeit, function(dp) { // Triggern bei Änderung des Endzeit-Strings
ausschalten= dp.state.val.split(':');
clearSchedule(timerAusschalten); // altes Schedule löschen
timerAusschalten = schedule(ausschalten[1] + ' ' + ausschalten[0] + ' * * 0-6', fAusschalten);
});
! // Functions
! function fAusschalten(){
if(idAktiv) setState( [Hier deine Steckdose eintragen], false); // nur, wenn die Automatik eingeschaltet ist wird die Steckdose geschaltet
}

function fEinschalten(){
if(idAktiv) setState( [Hier deine Steckdose eintragen], true); // nur, wenn die Automatik eingeschaltet ist wird die Steckdose geschaltet
}

! ````

Damit sollte es funktionieren, ist aber ungetestet und nur hier im Forum zusammengeschrieben. Es können also Fehler enthalten sein.

In VIS legst du dir dann eine View an.

mit diesem Widget

! ````
[{"tpl":"tplIconInc","data":{"oid":"javascript.0.Zeitschaltung.Steckdose1.Start.Stunde","visibility-cond":"==","visibility-val":1,"step":"-1","minmax":"0","text":"","repeat_delay":"800","repeat_interval":"800","name":"Arbeit_Stunde_Start_minus","invert_icon":false,"src":"/icons-mfd-png/control_minus.png","alt":"leiser","gestures-offsetX":0,"gestures-offsetY":0,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide","locked":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"201px","top":"210px","width":"63px","height":"63px","background":"rgba(250,250,250,0)","z-index":"25","border-width":"2px","border-radius":"0px","border-color":"#cac4c4","cursor":"pointer"},"widgetSet":"jqui"}]


linkst du auf den angelegten State für die Startstunde. Ein gleiches Widget dann für die Startminute. Einmal musst du es für Minuten bzw Stunden rauf und einmal für runter anlegen. Also ibsgesamt vier Widgets

und dann noch für die Endstunde und Endminute analog. Damit hast du dann acht Widgets, mit denen du die Zeit aus Vis heraus beeinflussen kannst.

anzeigen tust du es hiermit

>! ````
[{"tpl":"tplValueString","data":{"oid":"javascript.0.Zeitschaltung.Steckdose1.Start.Zeit","visibility-cond":"==","visibility-val":"","html_append":" :","name":"WoEn Stunde Start","visibility-oid":"","gestures-offsetX":0,"gestures-offsetY":0,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"locked":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"257px","top":"154px","color":"#FFFFFF","width":"86px","height":"54px","text-align":"right","letter-spacing":"","line-height":"","border-style":"none","border-width":"1px","border-radius":"5px","border-color":"gray","z-index":"310","font-size":"40px","font-weight":"normal"},"widgetSet":"basic"}]

Das ganze machst du dann entsprechend für die Endzeit auch.

Zu guter letzt nimmst du dieses Widget

! ````
[{"tpl":"tplMetroValueBoolCheckbox","data":{"oid":"javascript.0.Zeitschaltung.Steckdose1.Aktiv","visibility-cond":"==","visibility-val":1,"gestures-offsetX":0,"gestures-offsetY":0,"html_prepend":"Aktiv:","name":"Arbeitstag_Ansage_Aktiv","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide","locked":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"689px","top":"49px","z-index":"310","border-radius":"5px","color":"#FFFFFF","font-size":"","width":"90px","height":"46px"},"widgetSet":"metro"}]


für die Aktivierung.

Aussehen tut das ganze dann so:

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

Viel Erfolg

PapaChriLo

Wenn ich das jetzt alles richtig mitgelesen habe möchtest du eine Funksteckdose

täglich um eine bestimmte Zeit schalten.

Diese Zeit hast du in einem Programm auf der CCU hinterlegt.

Diese Zeit kannst du meines Wissen auch nur in dem Programm auf der CCU direkt ändern.

Dafür gibt es keinen Datenpunkt, den du im ioBroker brauchst, damit du das ändern könntest.

Ich würde das Programm von der CCU löschen und ein kleines Javascript machen, dann kannst du die Zeit auch über die View beliebig ändern.

Wenn du dich damit nicht auskennst wird dir sicherlich einer der Script Profis auf die Sprünge helfen.

tempestas

Nachtrag:

Javascript Adapter muss installiert sein.

Auf Reiter "Skripte" gehen. Dort auf das icon für neues Skript gehen (das sechste von links bzw das erste des zweiten Blocks).

Beim aufpoppenden "select type" Javascript auswählen.

Den Code reinkopieren. Dort wo es im Skript steht, deine Steckdose einfügen. Am einfachsten geht es, indem du rechts auf den Button "id einfügen" klickst und dich dann zu deiner Steckdose durchklickst.

Skript speichern.

Dann links in der Liste den roten "pause" Button anklicken, das Skript wird gestartet (grün, mit play Pfeil).

Community Forum

NEWS

Views in Frame/Widget anzeigen lassen

Support us

805

32.6k

81.9k

1.3m