Wie aus einem HTML-Widget ein neues Widget machen?

[Communicate]

Guten Morgen,

es hat mir ja keine ruhe gelassen

Also das System läuft wieder einwandfrei - das ist gut

Ich kann die Farbe des kleinen vierecks über die Eigenschaft bcolor ändern - das ist auch gut

Was ich noch nicht herausgefunden habe ist, wie ich die andern Eigenschaften (also z.B. den Farbverlauf beim Hovereffekt),

die Hintergrundfarbe für das große Viereck etc. ändern kann, bzw. eine Verbindung (nennt man das dann binding? ) zwischen

der Eigenschaft und dem Widgeteditor herstellen kann?

Oder anders ausgedrückt - wie ist denn die Eigenschaft "bcolor" mit dem kleinen viereck verknüpft worden?

[Communicate]

so, einen kleinen Schritt weiter bin ich schonmal.

grep -r -i 'color' ./ hat mir verraten, wo überall die Eigenschaft bcolor vorkommt.

Ich glaube, für mich relevant ist in diesem fall die Datei /opt/iobroker/iobroker-data/files/vis/widgets/communicate.html.

Diese habe ich auch editiert und zwar so:

! ioBroker.vis communicate Widget-Set
! version: "0.0.1"
! Copyright 10.2015-2016 Communicatedominic@bialas24.de
! -->
Soweit so gut - sobald ich aber dann ein iobroker visdebug communicate mache, wird der inhalt von communicate.html mit den ursprungswerten wieder überschrieben und meine Änderungen sind weg.

Daher zwei Fragen:

1. Kann mein Code überhaupt grundsätzlich funktionieren

2. Was mache ich falsch, dass die Änderungen immer wieder überschrieben werden?

[Bluefox]

Wenn du die Datei in iobroker-data änderst, dann muss man visdebug nicht aufrufen(es reicht ein mal nach vis start). Man darf nicht vergessen, dass die Änderungen nach vis Restart überschrieben werden und man muss zurück zu node_modules /iobroker.vis-communicate mergen.

Deine Änderungen sehen gut aus und müssen gehen.

[Communicate]

Danke! Das war mein Gedankenfehler.

Wenn ich unter /opt/iobroker/node_modules/iobroker.vis-communicate/widgets/communicate.html ändere, müsste ich mit visdebug wieder erfolg haben, oder?

Für mich als Anfänger ist das irgendwie einfach zu begreifen, wenn ich Änderungen vornehme und dann zum Schluss immer visdebug aufrufe.

[Bluefox]

@Communicate:

Danke! Das war mein Gedankenfehler.

Wenn ich unter /opt/iobroker/node_modules/iobroker.vis-communicate/widgets/communicate.html ändere, müsste ich mit visdebug wieder erfolg haben, oder? `
Ja. Genau.

> Für mich als Anfänger ist das irgendwie einfach zu begreifen, wenn ich Änderungen vornehme und dann zum Schluss immer visdebug aufrufe.
Dann mach einfach so.
6558_unbenannt.png

[Communicate]

so, ein letztes noch, dann hab ich hoffentlich alles was ich zunächst für meine Widget-Entwicklung benötige:

Wie kann ich denn die Atrribute für breite und höhe (alos genau diese Werte:

.var_nav
{
position:relative;
background:#e2e1f4; 
width:361px;
height:70px;
margin-bottom:50px;

}

einstellbar machen?

Wenn ich höhe und Breite mit den normalen Widget-Einstellungen verändere, dann ändert sich nicht das WIdget selbst, sondenr ich ziehe quasi einen Hintergrund auf (hier braun dargestellt):

[Communicate]

ich kriegs einfach nicht hin

so sieht meine communicate.html jetzt aus - und ich verstehe nicht, warum ich die linke breite jetzt nicht steuern kann (über die widget eigenschaften)

! ioBroker.vis communicate Widget-Set
! version: "0.0.1"
! Copyright 10.2015-2016 Communicatedominic@bialas24.de
! -->

[Bluefox]

width:<%== this.data.attr('breite_links') %>px

[Communicate]

das wars leider nicht. Es passiert einfach gar nichts.

Kannst Du Dir meine communicate.html mal anschauen / testen bei Dir?

[Bluefox]

Du hast ";" in Still vergessen:

style="background: <%== this.data.attr('bcolor') %>****;****width:<%== this.data.attr('breite_links') %>px"

Schaue mal mein Widget, ich habe da ein paar Änderungen gemacht.

[Communicate]

Danke, das ";" wars

Was genau hast Du denn verändert? Ich habe die Datei jetzt nochmal gedownloaded (du hast es doch in deinem Post vom Anfang geändert, oder?)

und eingespielt - kann aber keine Veränderung erkennen :roll:

[Bluefox]

@Communicate:

Danke, das ";" wars

Was genau hast Du denn verändert? Ich habe die Datei jetzt nochmal gedownloaded (du hast es doch in deinem Post vom Anfang geändert, oder?)

und eingespielt - kann aber keine Veränderung erkennen :roll: `
Schau bitte den Spoiler im meinem vorletztem Post. (Das hier ist letzte )
48_widget.gif

[Communicate]

Oh wie cool Danke schön

[Communicate]

Hab gerade noch ein bisschen rumprobiert.

Mittlerweile kann ich sogar ein Navigations-Widget daraus machen.

Aber, was leider nicht mehr geht ist der Farbeffekt bei Hover/Klick. Es wird jetzt

nur noch das linke viereck ausgefüllt. Hast Du eine Idee, woran das liegen könnte?

Gruß

Dominic

[Communicate]

So, jetzt habe ich fast alles was ich brauche implementiert.

Was nicht geht ist:

1. Der Hovereffekt ist nur noch auf das kleine viereck beschränkt.

2. Er schreibt mir keinen True / False Wert in die bei Object-ID zugeordnete Variable

Hier nochmal der gesamte Code:

[Communicate]

… ich bekomme es einfach nicht hin

kann ich irgendwie debuggen, woran mein Versuch mit den true/false scheitert ?

Gruß

Dominic
2858_screenshot__300__li.jpg

[Bluefox]

Ich sehe nicht mal die Stelle, wo du versuchst true/false rein zuschreiben.

Debuggen kann mann indirekt. Indem man console.log('Debug text') einbaut oder du kannst

debugger;

Zeile reinschreiben und dann hält Javascript an dieser Stelle an und du kannst die Werte anschauen.

Ich habe bis jetzt folgendes hinbekommen:

comminicate.html

style.css

! @font-face { font-family: 'CF'; src: url('Cicle Fina.ttf'); } ! .communicate-var_nav { background: #e2e1f4; width: 100%; height: 100%; display: inline-flex; } ! .communicate-link_bg { background:#7A56A0; color:white; z-index:2; } ! .communicate-link_title { position: relative; z-index:3; color:#7A56A0; height:100%; } ! .communicate-link_title:hover { left: 0; width:10px; font-weight: bold; background: #E01B6A; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ! .communicate-link_bg, .communicate-img { -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out; height: 100%; } .communicate-link_bg:hover, .communicate-img:hover{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ! .communicate-link_bg:hover { width:100%; background: #E01B6A; background: blue; } ! .communicate-img:hover{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } .communicate-p { font-family: CF; position: absolute; left: 0.7em; } !

Es geht nur Große-Änderung nicht.

Ich denke, dass steuern von Größen ist über ziehen besser als per Einstellung. Findest du nicht?

[Communicate]

> Ich denke, dass steuern von Größen ist über ziehen besser als per Einstellung. Findest du nicht?
da hast Du recht. Ich lerne ja noch

> Ich sehe nicht mal die Stelle, wo du versuchst true/false rein zuschreiben.
HIer:

! ioBroker.vis communicate Widget-Set
! version: "0.0.1"
! Copyright 10.2015-2016 Communicatenick@communicate-online.de
! -->

aber wahrscheinlich ist das absolut falsch, oder?
999_solarlog_versionen.jpg

[Communicate]

wenn ich jetzt nochmal auf meinen Code schaue, denke ich, dass ich zwei DIV Container mit der WID habe, geht das überhaupt?

Ich habe versucht mir die min/max (das ist doch true und false oder?) aus andernen Widgets zu kopieren, weiss aber nicht ob ich

a) alle relevanten Anweisungen habe und

b) die Anweisungen korrekt eingebaut habe (wahrschienlich eher nicht).

Magst Du noch mal schauen :roll:

[Communicate]

so, ein true oder false setzen bei checkbox klick geht jetzt:

! ioBroker.vis communicate Widget-Set
! version: "0.0.1"
! Copyright 10.2015-2016 Communicatenick@communicate-online.de
! -->

Daraus ergeben sich aber zwei neue Fragen:

1. wie kann ich statt der checkbox die gesamte Fläche als "ereignis" bei klick nutzen

2. wie ändere ich den bool Wert auf einen String? (also das bei Klick zum beispiel Test ABC und TEST BCD rauskommt?)