Material Design Widgets: Input, Select, Autocompl.

[Bostil]

Eine Kleinigkeit @Scrounger - das Uhrsymbol in meinem Input-Widget lässt sich nicht auf eine andere Farbe als schwarz setzen:

Spoiler

[{"tpl":"tplVis-materialdesign-Input","data":{"oid":"javascript.0.Rolladen.Bad.Timer.Hoch_Uhrzeit_WE","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":"1","visibility-groups-action":"hide","inputType":"time","inputLayout":"solo","showInputMessageAlways":false,"showInputCounter":false,"clearIconShow":false,"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,"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,"inputMaxLength":"","inputMask":"","inputLayoutBackgroundColor":"","inputLayoutBackgroundColorHover":"","inputLayoutBorderColor":"#dedede","inputLayoutBorderColorHover":"#dedede","inputTextColor":"#dedede","inputLabelText":"","inputMessage":"","inputLayoutBorderColorSelected":"","inputTextFontFamily":"Akrobat","inputTextFontSize":"25","inputLayoutBackgroundColorSelected":"","appendOuterIconColor":"#dedede","appendOuterIcon":"","appendIconColor":"#dedede","prepandInnerIconColor":"#dedede","prepandIconColor":"#dedede","appendIconSize":"","prepandIconSize":"","clearIconColor":"#dedede","inputAppendixFontFamily":"Akrobat","inputLabelFontFamily":"Arkobat","appendOuterIconSize":"","prepandInnerIconSize":"","clearIconSize":"","visibility-oid":"0_userdata.0.Home.Buttonswitch_Mover_expand","inputLabelColor":"#dedede","inputLabelColorSelected":"#dedede","inputAppendixColor":"#dedede","inputMessageColor":"#dedede","inputCounterColor":"#dedede","inputCounterFontSize":"-1"},"style":{"left":"784px","top":"512px","width":"120px","height":"40px","z-index":12,"text-align":"center","box-shadow":"0px 0px 5px 1px rgba(0,0,0,0.5)","font-weight":"lighter","color":"","background":""},"widgetSet":"materialdesign"}]

[Scrounger]

@Bostil sagte in Material Design Widgets: Input, Select, Autocompl.:

Eine Kleinigkeit @Scrounger - das Uhrsymbol in meinem Input-Widget lässt sich nicht auf eine andere Farbe als schwarz setzen:

Steht 10 post weiter oben...
https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/91

Das ist chrome spezifisch und ein Bild, deshalb kann man die farbe auch nciht ändern. Per css könnte man ein anderes Bild mit anderer farbe nehmen, mehr infos dazu hier:
https://stackoverflow.com/questions/63002686/how-do-i-change-the-color-of-the-small-clock-icon-that-comes-with-the-html-input

Ich werde das allerdings in der kommenden Version standardmäßig unsichtbar machen.

[ice987]

in einer Visualisierung mittels dem Widget "materialdesign - Line History Chart" lasse ich mir die Aussentemperatur auf dem iPhone-App anzeigen:

leider ist die Breite des iPhones beschränkt und die Daten sind (insbesondere bei der Anzeige von mehreren Tagen in die Vergangenheit) sehr klein. Da kam mir die Idee mittels einer CSS-Anweisung (https://www.smarthome-tricks.de/software-iobroker/iobroker-vis-css-widgets-drehen/) in einer neuen Visualisierung zu drehen. Zu meinem erstaunen funktioniert das alles ganz gut:

unglücklicherweise dreht sich die Auswahlliste im Widget "materialdesign - Select" nicht alles andere funktioniert super!:

gibt's da evtl. eine Lösung um dies ebenfalls zu drehen?

[liv-in-sky]

@Stephan-Schleich sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger Nach dem löschen des widgets gehts nun - danke
Hab nun aber das PRoblem das hinter dem Widget ne Zahl steht, wie krieg ich die weg?

Edit: Hat sich erledit, war der Punkt Zähler anzeigen

hi - was hast du geändert, dass die anzeige klein wird - die höhe ist bei mir immer gleich und verbraucht extrem viel platz

[liv-in-sky]

@Scrounger
Select widget:
irgendwie gehen bei mir nur einige werte zu verändern

z.b layout Eingabe
rot nein
grün kann geändert werden

das ganze so aus:

ich wollte die eingabe auch gerne der ausgabe (tabelle) angleichen- also die blauen select widgets sollen nicht so hoch sein - die brauchen extrem viel platz - ich finde nix, wo sich das ändern läßt

hast du eine idee dazu?

[Scrounger]

@liv-in-sky
Welche Version hast? Also Nummer?

[liv-in-sky]

@Scrounger
hab 0.3.19

[Scrounger]

@liv-in-sky sagte in Material Design Widgets: Input, Select, Autocompl.:

@Scrounger
Select widget:
irgendwie gehen bei mir nur einige werte zu verändern

z.b layout Eingabe
rot nein
grün kann geändert werden

Wird in der nächsten Version behoben sein

ich wollte die eingabe auch gerne der ausgabe (tabelle) angleichen- also die blauen select widgets sollen nicht so hoch sein - die brauchen extrem viel platz - ich finde nix, wo sich das ändern läßt

Das geht leider nicht, die Widgets brauchen eine mindest Höhe damit sie korrekt.
Bleibt nur die Möglichkeit das per css zu verbiegen, ich glaub das hatten wir in diesem Thread auch schon mal.

[liv-in-sky]

@Scrounger

danke dir - ich schau mal nochmal durch den thread - vielleicht find ich das mit dem css

[ice987]

@Scrounger
Das Thema mit den Masken hatten wir ja bereits (ab https://forum.iobroker.net/topic/29666/material-design-widgets-input-select-autocompl/99)

Gem. https://vuejs-tips.github.io/vue-the-mask/ soll/kann im „materialdesign - input“ -Widget mit der Maske „Aaaa“ nur 4 Buchstaben erlaubt werden, der erste Gross, die anderen drei klein. Gebe ich das so vor, kann ich auch Zahlen etc. eingeben und auch mehr als 4 Zeichen, Gross-/Kleinschreibung wird nicht berücksichtigt.

Ist dies ein Bug bzw. ist dies evtl. bereits in https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/103 berücksichtigt?

ice987987 created this issue in Scrounger/ioBroker.vis-materialdesign

closed Material Design Widgets "materialdesign - input": inputType = mask #103

[Scrounger]

@ice987 sagte in Material Design Widgets: Input, Select, Autocompl.:

Ist dies ein Bug bzw. ist dies evtl. bereits in https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/103 berücksichtigt?

Mit meiner aktuellen Version bei github (kommende v0.4.0) funktioniert es wie es soll.
Kannst gerne testen, oder warten bis ich sie offzielle ins latest schiebe.

[ice987]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

@ice987 sagte in Material Design Widgets: Input, Select, Autocompl.:

Ist dies ein Bug bzw. ist dies evtl. bereits in https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/103 berücksichtigt?

Mit meiner aktuellen Version bei github (kommende v0.4.0) funktioniert es wie es soll.
Kannst gerne testen, oder warten bis ich sie offzielle ins latest schiebe.

Wunderbare News! Ich warte dann auf die offizielle Freigabe, so ist die Vorfreude grösser!

Eine weitere Frage zum Widget „materialdesign - autocomplete“:
Wenn bereits eine Eingabe vorhanden ist, weggecklickt und wider ins Inputfeld reingeklickt wird, ist automatisch die ganze Eingabe markiert und es muss ein weiteres Mal reingeklickt werden um die Eingabe vervollständigen zu können. Gibts einen Workaround um die komplette Markierung zu umgehen? Die komplette Markierung benötige ich ja nicht/nie, da ich ja die Option „Textfeld löschen“ aktivieren kann.

[ple]

Kurz gefragt, ich lasse mir im select widget die Werte als Json anzeigen. Klappt auch soweit.
Jetzt ist es ja so, dass ich den Wert in einen State schreibe, aber kann ich auch den angezeigten Text in einem State schreiben?
Kennt da einer eine Lösung?

[sigi234]

@Scrounger sagte in Material Design Widgets: Input, Select, Autocompl.:

Kannst gerne testen, oder warten bis ich sie offzielle ins latest schiebe.

Wie lange wird es dauern?

[Scrounger]

@sigi234 sagte in Material Design Widgets: Input, Select, Autocompl.:

Wie lange wird es dauern?

Wollte es letzte Woche eigentlich releasen, aber ich schaff es gerade einfach nicht. Finde immer noch Fehler, die ich fixen will, da die kommende Version RC für stable werden soll.

[ple]

Früher klappte der Code mal mit dem Uhula Design, aber hier leider keine Wirkung.
Also wer Ideen hat, alle her damit

// Typnmane übertragen für SPS
setTimeout(function () {
    $("body").on("change","[class*='Eingabe']", function (event) {
         var text =$("#w00092 option:selected").text();
        vis.setValue("s7.0.DBs.DB5._020_HMI_Rezept_Editor_DS_aktuell_Typ_Name",text); 
           });
}, 1000);

[Bostil]

@Scrounger Hi Scrounger, wie installiere ich deine v4 über Github?

[ple]

@Scrounger , hättest du vielleicht dafür eine kleine simple Lösung? Sorry, wenn ich deine Zeit raube, du hast bestimmt besseres zu tun, aber ich wäre dir sehr dankbar.

Früher klappte der Code mal mit dem Uhula Design, aber hier leider keine Wirkung.
Also wer Ideen hat, alle her damit

// Typnmane übertragen für SPS
setTimeout(function () {
    $("body").on("change","[class*='Eingabe']", function (event) {
         var text =$("#w00092 option:selected").text();
        vis.setValue("s7.0.DBs.DB5._020_HMI_Rezept_Editor_DS_aktuell_Typ_Name",text); 
           });
}, 1000);

[Scrounger]

@ple
Ich versteh nicht was du machen möchtest.
Class Eingabe gibt es bei MDW schon mal nicht.

[ple]

@Scrounger Die Class Eingabe habe ich deinen Widget zugeordnet in der Hoffung, dass ich den Textnamen in einen State übertragen kann, da das Objekt ein Integer ist, worauf ich überhaupt mit der S7 Daten austauschen kann.

ich habe heute mal ein wenig rumprobiert und meine aktuelle Lösung ist, dass ich ein State habe mit den Json und dadrin die Rezeptnummer suche und mir den Textinhalt dann ausgeben lassen.
Sieht dann so aus.

// Werte suchen im Json für Typnamen anhand der Typnummer
on({id: 's7.0.DBs.DB5._020_HMI_Rezept_Editor_DS_Nr', change: "ne"}, async function (obj) {
  var Value = obj.state.val;
  var oldValue = obj.oldState.val;

var json_block = list.find(v => v.value === Value.toString());
var textinhalt = json_block ? json_block.text : null
setState("s7.0.DBs.DB5._020_HMI_Rezept_Editor_DS_aktuell_Typ_Name", textinhalt)
});

Scheint soweit zu klappen.
Schön wäre es im Widget, wenn ich im Widget bei Anwahl eines Datensatzes die Information, also die Nummer die es schon gibt und den Text umlegen kann auf einen State.