New FHEM Tablet UI

[remet]

besten Dank. Es klappt mit runden Icons super! Bin jetzt am Probieren ob ich meine eckigen Icons und ein label darunter bekomme.

Würde das CircleMenu auch gerne mit Eckigen Buttons und Horizontal haben.
hat da jemand schon nen Ansatz wie das funktioniert? meine hier irgendwo mal nen Screenshot gesehen zu haben aber ich finde das nicht wieder hier im Forum.

mit fa-square als background icon werden die ecken abgerundet.

[setstate]

Hallo remet,

das geht tatsächlich nicht.
Ich werden mal versuchen, die eingesetzte Lib etwas zu verbiegen, dass das möglich sein wird.

setstate

[drhirn]

Hi Tedious,

Frage an die HTML-Profis - es gibt ja das HTML5 <audio> Tag - ließe sich das hier einbauen? Oder liefert das immer einen "Player", der erst angeklickt werden muss? Muss gestehen meine HTML-Kentnisse sind eher als basal zu bezeichnen, aber kann ich beim eintreten eines Events einfach ein MP3 abspielen lassen? Wenn ja würde das meine Probleme sehr einfach lösen...?!

Du kannst beim Element audio ein autoplay setzen.

Code Auswählen Erweitern


<audio autoplay>
  <source src="coolersound.mp3" type="audio/mpeg">
</audio>


Siehe: http://www.w3schools.com/tags/att_audio_autoplay.asp

Gruß
Stefan

[felix.steinbeis]

Hallo Felix,

zumindest habe ich seit gestern einen Workaround drin, der das Control nach 15 Sekunden nach Reload neu zeichnet, damit die Symbole erscheinen. Wenn du ein Update machst, probiere danach mal aus, ob es auch bei dir hilft.

Danke

Hallo setstate,

danke Dir!!! Der Workaround funktioniert. Wenn man jetzt noch erkennen könnte, wann die Seite geladen bzw. vollständig dargestellt ist, müsste man nicht die ganzen 15 Sekunden warten. Keine Ahnung, ob das geht.

Viele Grüße
Felix

[no_Legend]

Hallo Leute,

ich habe zwei Fragen:

1.gibt es einen einfachen weg Readinggroups anzuzeigen?
2.kann ich einfach den die fb_calllist anzeigen lassen?

Danke und Gruß Robert

[harry66]

zu frage 1.)

Code Auswählen Erweitern

<header>KALENDER</header>
<div
data-type="readingsgroup"
data-device="rg.TermineView"
data-get="all"
data-max-update="3600">
</div>


und zu 2.)

Code Auswählen Erweitern

<header>ANRUFE</header>

<table border="0px" width="100%"  class="top-space">
        <tr >
            <td class="RandUnten">
                <div data-type="label" data-device="myTM" data-get="C0" class=""></div>
           
                <div data-type="label" data-device="myTM"  data-get="D0" class=""></div>
            </td>
            <td class="RandUnten">
                <div data-type="label" data-device="myTM" data-get="B0" class=""></div>           
            </td>    
            <td class="RandUnten"><div data-type="label" data-device="myTM" data-get="E0"  class=""></div></td>
            <td class="RandUnten">
    <div data-type="symbol" data-device="myTM"
                        data-get="A0"
                        data-icons='["fa-phone","fa-phone","fa-phone","fa-phone"]'
                        data-get-on='["incoming","outgoing","incoming_noconnect","outgoing_noconnect"]'
                        data-on-colors='["green","green","red","red"]'
></div>
                    </div>
                    <div data-type="symbol" data-device="myTM"
                        data-get="A0"
                        data-icons='["fa-arrow-circle-left","fa-arrow-circle-right","fa-arrow-circle-left","fa-arrow-circle-right"]'
                        data-get-on='["incoming","outgoing","incoming_noconnect","outgoing_noconnect"]'
                        data-on-colors='["green","green","red","red"]'
                        >
                   </div>
            </td>
       </tr>
</table>


ist für die erste Zeile der calllist einfach mit C1, D1...erweitern bis die gewünschte anzahl Anrufe drin sind.

der Vollständigkeit halber in die fhem-tablet-ui-user.css:

Code Auswählen Erweitern


.RandUnten {
  border-collapse: collapse;
  border-bottom: 1px solid #FF8450;
}


Gruß Rolf

[galdo]

Guten abend,

ich möchte mich auch mal für das tolle UI Framework bedanken.
Ich habe jetzt auch mal eine Frage, nachdem ich jetzt schon einige Wochen damit rumgespielt habe - es geht um einen Color-Picker in Form des "hue-tick mini wider" - ich setze allerdings keine Hue ein, sondern eine Lampe die entweder mittels "wcrgb" Farbwerte in Form von 0-255 für w(arm) c(old) r(ed) g(reen) b(lue) erwartet oder mittels rgb einen HEX wert von 000000 bis FFFFFF.

Meine Frage ist jetzt relativ einfach - wie bringe ich dem widget eine der beiden Varianten bei?

Habt ihr ne Idee? Welches alternative Widget kann ich dafür verwenden, wenn obiges nicht funktioniert?

Vielen Dank
Galdo

[no_Legend]

@harry86
Danke für deine Hilfe.
Was bei mir jetzt noch nicht stimmt ist dass die Readinggroups ICONs sehr sehr groß angezeigt werden.

Das mit dem Calllist habe ich noch nicht ausprobiert.

[Morrino]

Hallo,

ich habe heute mal Tablet-Ui geupdated und seitdem funktioniert bei mir irgendwie nichts mehr.
Also selbst die normale FHEM Weboberfläche hängt nach 1-2 Minuten.

Ich habe heute rein gar nichts anderes getan außer das update. Und Eine Minute vorm Update ging auch noch alles.

Im Log File kommt leider keinerlei Meldungen.

Ist das irgendwie erklärbar?

Ich hatte ansonsten vorher meinen kompletten fhem Ordner gesichert. Kann ich diesen einfach wieder rüberspielen oder sind weitere Ebenen weiter oben ebenfalls durch das update betroffen?

Bin komplett ratlos.

Lg

[no_Legend]

Hab den Fehler gefunden.
Die Readinggroups nehmen die Value Icons welche ich der Readinggroup zugewiesen habe.
Diese werden dann über dimensional angezeigt.

[P.A.Trick]

Hab den Fehler gefunden.
Die Readinggroups nehmen die Value Icons welche ich der Readinggroup zugewiesen habe.
Diese werden dann über dimensional angezeigt.

Kannst du uns bitte an der Lösung teilhaben lassen?

[no_Legend]

Sorry falsch ausgedrückt. Eigentlich nur die Ursache.
Sobald du die Value Icon Einstellung entfernt bekommst du die readinggroup ohne icons, als Text angezeigt.

[dadoc]

Guten abend,

ich setze allerdings keine Hue ein, sondern eine Lampe die entweder mittels "wcrgb" Farbwerte in Form von 0-255 für w(arm) c(old) r(ed) g(reen) b(lue) erwartet oder mittels rgb einen HEX wert von 000000 bis FFFFFF.

Meine Frage ist jetzt relativ einfach - wie bringe ich dem widget eine der beiden Varianten bei?

Ich habe das z.B. so:

Code Auswählen Erweitern

<div data-type="label" class="">Stern</div>
  <div
  data-type="volume"
  data-device="star"
  data-min="0"
  data-max="360"
  data-get="rgb"
  data-set="rgb"
  class="hue-tick top-space rgb small"
  ></div>
Gruß
Martin

[kleing]

Hallo setstate,

ich habe heute versucht ein bei mir exitierendes Circlemenue auf horizontale Ausrichtung umzubauen.
Die Icons werden auch horizontal angezeigt, allerdings fehlt immer das erste definierte Icon.

Neu: Circlemenu kann jetzt auch vertikal oder horizontal ausgeklappt werden.

Code Auswählen Erweitern


data-direction="horizontal"
data-circle-radius="60"


Damit ist die Liste für data-direction jetzt:
top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

Anbei noch der von mir verwendete code

Code Auswählen Erweitern


<div data-type="circlemenu" class="cell circlemenu" data-direction="horizontal" data-circle-radius="60">
<ul class="menu">
<li><div data-type="symbol"
data-icon="fa-fire"
data-on-background-color="rgb(111,69,120)"
data-on-color="rgb(255,255,255)"
data-background-icon="fa-circle">
   </div>
</li>   
<li><div data-type="button"
data-on-background-color="rgb(153,204,0)"
data-url="raspi-julian.html"
data-icon="fa-male"
data-on-color="white">
</div></li>
  <li><div data-type="button"
   data-on-background-color="rgb(71,163,117)"
   data-url="raspi-johanna.html"
   data-icon="fa-female"
   data-on-color="white">
</div></li>
</ul>
</div>


Irgendweine Idee was da schief läuft?

Danke vorab.

Gruß
Gerald

[setstate]

Hallo Gerald,

beim ersten Element (Symbol) fehlt
data-off-color="#2a2a2a".
Da das Element immer OFF bleibt, weil ja kein Device angegeben ist, das ON liefern könnte. Und die Vordergrund-Farbe für OFF ist auch #505050, wie der Hintergrund, darum sieht es so aus, als sein das Icon weg.