Neues Widget "Scrolllabel" für Laufschriften

Begonnen von eki, 23 Juni 2017, 09:47:50

Vorheriges Thema - Nächstes Thema

eki

Hallo zusammen,

ich habe mir ein Widget für das Darstellen von Texten in Form von Laufschriften (z.B. wenn der Text größer ist als der Platz den man spendieren will) gebaut, vielleicht kanns ja der ein oder andere gebrauchen.
Zusätzlich zum js File gibt es ein css File welches dann in den entsprechenden Ordner gelegt werden muss.
Das Widget basiert auf dem Label Widget, sollte also alles können (einfärben etc.) was das Label Widget kann.

Hier eine Beschreibung der Parameter, die es zusätzlich zum Label Widget gibt, damit erklärt sich, denke ich, auch die Funktionalität:

data-type: muss "scrolllabel" sein (bitte auf die 3 'l's achten  ;)
data-orientation: Kann die Werte "horizontal" und "vertical" haben und legt fest, in welcher Richtung der Text durchgeschoben wird.
data-scrollspeed: Kann die Werte "slow", "normal" und "fast" annehmen und bestimmt wie schnell der Text durchläuft
data-lines: Legt für das vertikale Scrollen fest, wieviele Zeilen gleichzeitig zu sehen sind
data-scroll-lines: Legt fest, um wieviele Zeilen gescrollt wird, bevor die nächste Pause kommt (siehe Klassen "ease" und "linear")

Wenn man dem div die Klasse "linear" gibt, dann läuft der Text dauernd durch, setzt man "ease", was auch der Default ist, dann wird gescrollt und danach eine Pause gemacht (ist manchmal einfacher fürs Lesen).

Edit 25.06.2017: neue Version mit Support für größere Schriften.

Edit 12.12.2017: neue Version mit Korrektur für bold Schriften und Möglichkeit die Scrollrichtung zu invertieren.

rvideobaer

Hallo,

ich habe das Scrolllabel gleich mal getestet, leider funktioniert es nicht mit größeren Schriften die Box für das Label scheint immer gleich groß zu bleiben. Wenn ich eine große Schrift zb. bigger wähle sieht es dann wie auf dem angehängten Bild aus. (Ich verwende bei mir noch eine eigene größere Schrift)

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

poste mal bitte Deine Konfiguration mit dem Scrolllabel

rvideobaer

Hallo,

ist nur ein versuch in einer sonst leeren html Datei,
<!DOCTYPE html>
<html>
<head>



        <!--
         /* FHEM tablet ui */
         /*
         * Just another dashboard for FHEM
         *
         * Version: 1.4.0
         * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
         * URL: https://github.com/knowthelist/fhem-tablet-ui
         *
         * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
         * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
         *
         * - create a new folder named 'tablet' in /<fhem-path>/www
         * - copy all files incl. sub folders into /<fhem-path>/www/tablet
         * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
         * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
         */
        -->
        <title>FHEM-Tablet-UI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
       <meta name="gridster_cols" content="38">
<meta name="gridster_rows" content="23">

      <!--
  <meta name="widget_base_width" content="15">
        <meta name="widget_base_height" content="15">
-->


        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
        <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->
<meta http-equiv="Cache-Control" content="no-store" />
       
        <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
        <link rel="stylesheet" href="lib/openautomation.css" />
    <link rel="stylesheet" href="lib/fhemSVG.css" />

        <!-- define your personal style here, it wont be overwritten  -->
        <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

<script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>



<style>

.joinedlabel_get_4 {
    color: #5050FF;
}

.joinedlabel_get_5 {
    color: red;
}

/*
.gridster > ul > li,
.card {
   background-color: transparent;
}
.gridster li header,
.dialog > header,
.card > header {
    background: transparent;
}
*/






</style>

</head>

<body>


<div
 
data-type="scrolllabel"
    data-device="rx601"
data-get="currentTitle"
data-orientation="horizontal"
data-scrollspeed="fast"
class="lime bigger"></div>
</body>
</html>


Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Kannst Du bitte mal schauen ob es mit der anghängten Version funktioniert.

rvideobaer

Hallo,

habe es gerade getestet, mit der Schriftgröße scheint es jetzt zu funktionieren.
Aber das Scrollen ist noch nicht so das was ich mir Vorstelle. Der Text bewegt sich ruckartig weiter und je nach Textlänge kommt er er damit gut bis überhaupt nicht klar.
Bei kurzen Texten liegen die Teile zeitweilig übereinander oder der Text läuft rückwärts da er soweit vorspringt das er fast an der selben Position landet nur etwas nach hinten verschoben. Ein sanfteres scrollen wäre schöner finde ich. Aber das ist meine Persönliche Meinung. Ich versuche mal ein video anzuhängen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

rvideobaer

Hallo,
anbei noch ein Video mit meiner bisherigen Lösung

<span style="white-space:nowrap; overflow:hidden;width:90%;z-index:0;">
<marquee direction="left" behavior="scroll" scrollamount="6" scrolldelay="1">
<div data-type="label"
    data-device="rx601"
data-get="currentTitle"
class="lime grande3"></div>
</marquee>
</span>

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

#7
Bist Du sicher, dass Du die zugehörige css Datei heruntergeladen und ins css Verzeichnis geschoben hast? Bei mir sieht das nämlich genauso aus, wie in Deinem Film von 2. Post. Und für die Übergänge sind die Definitionen im css File zuständig.

rvideobaer

Hallo,

ich habe die css Datei nochmal heruntergeladen, da ich schon etwas mit den werten gespielt hatte. Aber es ist immer noch eine Sprunghafte Bewegung.
Daran scheint es bei mir nicht zuliegen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

gloob

Also für mich sieht die Bewegung doch schon relativ flüssig aus.
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

rvideobaer

Hallo,

@gloob
falls Du das dritte Video meinst das ist mit marquee gemacht und nicht mit scolllabel. Das ist in Video 1 und 2 zu sehen.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Zitat von: rvideobaer am 26 Juni 2017, 12:53:31
Hallo,

ich habe die css Datei nochmal heruntergeladen, da ich schon etwas mit den werten gespielt hatte. Aber es ist immer noch eine Sprunghafte Bewegung.
Daran scheint es bei mir nicht zuliegen.

Gruß Rolf

Kannst Du noch mal Deine Definition posten. Welchen Browser verwendest Du?

rvideobaer

Hallo,

ich hatte nur etwas gespielt, jetzt habe ich wieder die Originalwerte. Als Browser habe ich Chrome auf dem Mac und Fully auf dem Tablet verwendet, sah auf beiden ziemlich identisch aus. Laufen soll es sonst nur auf Fully.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

eki

Hier mal ein Beispiel, wie das bei mir aussieht (in wirklichkeit noch weniger Ruckeln als im Video, liegt wohl am capture)

rvideobaer

Hallo,

versuche mal eine größere Schrift ich denke um so größer die Schrift um so mehr wird es ruckeln. Meine ist schon recht groß aber ich will das auch ab 2-3 Meter Entfernung noch lesen können.

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr