Wie aus einem HTML-Widget ein neues Widget machen?
-
> 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 -
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:
-
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?)
-
-
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.
-
Kann sein, das bei dir View Hintergrund einfach weiß ist?
48_click.gif -
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
-
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 -
Und hast du verstanden?
Geht es weiter? -
> 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?
-
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;
} -
… 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?
-
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) -
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?
-
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:
-
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 -
so, da war wohl meon Denkfehler :lol:
so funktionierts:
nur die widgetaktualisierung funktioniert nicht
Und dAnn hab ich noch das Problem, dass ich den Dialog gerne unterhalb des Widgets positionieren möchte. Dafür müsste ich aber die Höhe des Widgets kennen, diese steht aber in .Data nicht drin. Gibt es dafür auch noch eine Idee?
-
Hallo Bluefox,
im Moment scheitere ich "nur" noch daran, die höhe des Widgets zu ermitteln, da diese anscheinend
nicht im data-objekt enthalten ist.
Hast Du hier noch einen Trick für mich?
Wenn das erledigt ist, würde ich den Thread erstmal beenden und das ganze verfeinern und dann als komplettes Widget-Set
veröffentlichen.
Weitere Detailfragen würde ich dann in separaten Einzel-Threads stellen, was meinst Du?
Gruß
Dominic
-
Es gibt zwei Möglichkeiten, wie man das ermitteln konnte:
-
dynamisch: $(el).position().left + $(el).width() und $(el).position().top + $(el).height()
-
statisch: Dialog-Funktion erweiten
–----------------------------
dialog: function (el, data, view) {
console.log(JSON.stringify(vis.views[view].widgets[data.wid].style, null, 2));
….
}
debugger;vis.binds.communicate.dialog(el, this.data, this.view) %>>
–----------------------------
-
-
Hallo Bluefox,
ich dachte ja, ich wäre durch
Könntest Du mir verraten, wie ich im Dialog auch HTML Anweisungen (also z.B. Buttons oder auch einfach nur z.B. eine
Anweisung)
einbauen kann?
So hab ich es versucht, aber das geht nicht:
! dialog: function (el, data) {
! if (!$(el).find('.heating-dialog').length) {
! setTimeout(function () {
! var weite = data.weite;
! weite += "px";
! console.log('weite:'+weite);
! debugger;
! var $dialog = $('<snap class="communicate-range-val"></snap>');
var $value = $dialog.find('.communicate-range-val');
var $input = $dialog.find('input');
$dialog.click(function () {
console.log(JSON.stringify($dialog, null, 2));
****Test
$dialog.write(
Test2
)****
$input.unbind('onmouseup');
$(this).hide();
});
$input.change(function () {
alert($(this).val());
});
$(el).parent().append($dialog);
$(el).click(function () {
console.log('weite1:'+weite);
console.log('weite2:'+weite);
$dialog.css({top: $(el).position().top+ $(el).height(), left: $(el).position().left, width: $(el).width()-2 });
$dialog.show();
$value.html($input.val());
$input.bind('onmouseup', function () {
$value.html($input.val());
});
});
});
}
}
};
Irgendwann krieg ichs dann auch fertig … (hoffentlich
)
