Wie aus einem HTML-Widget ein neues Widget machen?

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:

515_bildschirmfoto_2015-10-20_um_20.46.13.png

! 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?)

Bluefox

48_click.gif

Communicate

Hi,

vielen lieben Dank .´-> da wäre ich ja im leben nicht drauf gekommen :roll:

Einen Schönheitsfehler hat das ganze leider noch:

Im True-Fall wird das größere Viereck einfach transparent.

Bluefox

Kann sein, das bei dir View Hintergrund einfach weiß ist?
48_click.gif

Communicate

Hallo,

das sieht gut aus - danke!

Jetzt muss ich nur noch den Code verstehen

Wie hast Du denn die Betitelung (z.B. Extrasteuerung) hinbekommen?

Gruß

Dominic

Bluefox

~~@Communicate:~~

Hallo,

das sieht gut aus - danke!

Jetzt muss ich nur noch den Code verstehen

Wie hast Du denn die Betitelung (z.B. Extrasteuerung) hinbekommen?

Gruß

Dominic `
Das ist schon in basic.html übersetzt: https://github.com/ioBroker/ioBroker.vi … .html#L160

Bluefox

Und hast du verstanden? Geht es weiter?

Communicate

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

Kannst Du mir kurz erklären, wie Du das gemacht hast? Ich hab das bei einem neuen Widget probiert, nachzustellen, aber es klappt nicht.

Ich habe in styles.css als width und height jeweils 100% angegeben.

Muss ich in der communicate.html dann noch was ändern?

Communicate

So sieht es aktuell coding mäßig aus:

html

css

! ````
@font-face {
font-family: 'IC';
src: url('icomoon.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;

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 {

position: absolute;
left: 0.7em;

}

! .communicate-p1 {
font-size: 13px;
margin: 0;
padding: 0;
line-height: 40px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,1);
border-bottom: 1px solid rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(255,255,255,0.2);
letter-spacing: 1px;
}
! .communicate-notification_box {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 5px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(0,0,0,0.2);
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 2px 2px rgba(0,0,0,0.1);}
! .communicate-p2 {
font-size: 13px;
margin: 0;
padding: 0;
line-height: 20px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,1);
letter-spacing: 1px;
}

Communicate

… und dann hab ich da noch eine ganz andere Frage:

ich würde gerne bei dem button nummer 3 (siehe code oben) ein Dialogfeld mit slider einbauen (im gleichen design wie der button).

Gibt es irgendwo eine Beschreibung wie ich vorgehen sollte?

Bluefox

Irgendwie so:

! ````
@font-face {
font-family: 'IC';
src: url('icomoon.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;
! 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 {
! position: absolute;
left: 0.7em;
}
! .communicate-p1 {
font-size: 13px;
margin: 0;
padding: 0;
line-height: 40px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,1);
border-bottom: 1px solid rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(255,255,255,0.2);
letter-spacing: 1px;
}
! .communicate-notification_box {
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 0 auto;
border-radius: 5px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(0,0,0,0.2);
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 2px 2px rgba(0,0,0,0.1);
}
! .communicate-p2 {
font-size: 13px;
margin: 0;
padding: 0;
line-height: 20px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,1);
letter-spacing: 1px;
}
! .communicate-dialog {
width: 100px;
height: 50px;
position: absolute;
z-index: 999;
border-radius: 5px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(0,0,0,0.2);
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 2px 2px rgba(0,0,0,0.1);
}

[48_img_001.png](/assets/uploads/files/48_img_001.png)

Communicate

Hallo bluefox,

das sieht schon sehr sehr gut aus - vielen dank mal wieder!

Zwei Fragen bleiben aber einmal wieder:

1. Ich bekomme es einfach nicht hin, die größe und die position des dialogs

zu verändern. Hier mein Versuch:

(Es geht um NotificationD2).

2. Kann ich das aussehen des Sliders irgendwie verändern?

Ich freue mich auf eine Rückmeldung von Dir.

P.S.: Meinst Du ich soll das ganze Widget set dann zur Verfügung stellen oder ist das zu speziell auf mich zugeschnitten?

Communicate

so, die grundsätzliche breite kann ich jetzt verändern:

$(el).click(function () {

$dialog.css({top: $(el).position().top, left: $(el).position().left, width:1000});

$dialog.show();

$value.html($input.val());

$input.bind('onmouseup', function () {

$value.html($input.val());

});

jetzt stellt sich nur noch die Frage, wie kann ich denn den absoluten Wert (hier 1000) mit einer Variablen

(also mit einer WIdget-Eigenschaft) ersetzen, so dass ich das auch steuern kann?

Irgendwann verstehe ich das ganze hoffentlich auch :roll:

Communicate

So, einen großen Schritt weiter bin ich schonmal

Folgendes ermöglicht mir, die Breite des Dialogfeldes anzugeben.

Was ich nicht hinbekomme ist die Verkünpfung zu den Widget eigenschaften.

Folgendes geht nämlich nicht:

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

Fehler laut Chrome console:

Error: Error: can't render tplCommunicateNotificationD2 w00023 (SyntaxError: Unexpected token <)

Was mache ich falsch?
5278_unbenannt.png

NEWS

Wie aus einem HTML-Widget ein neues Widget machen?

Support us

491
Online

31.6k
Users

79.5k
Topics

1.3m
Posts

NEWS

Wie aus einem HTML-Widget ein neues Widget machen?

Support us

491Online

31.6kUsers

79.5kTopics

1.3mPosts

491
Online

31.6k
Users

79.5k
Topics

1.3m
Posts