Nur Text | Text mit Bildern

FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: romibaer am 12 Januar 2017, 02:07:42

Titel: Wie funktioniert das swiper Widget ?
Beitrag von: romibaer am 12 Januar 2017, 02:07:42
Hallo ich würde gerne das swiper-widget bei mir einbauen, finde jedoch leider keine brauchbare Beschreibung dafür :(
Könnte mir da jemand bitte weiterhelfen wie das vom Code einzubinden ist ?

Ähnlich wie in dem Beispiel, möchte ich gerne meine Raumtemperatur mit Hilfe von Swiper platzsparend platzieren.
http://knowthelist.github.io/fhem/tablet/demo_swiper.html

Bei einem Click auf ViewSourceCode passiert leider nix.
Ich hoffe hier kann mir jemand helfen
Titel: Antw:Wie funktioniert das swiper Widget ?
Beitrag von: CoolTux am 12 Januar 2017, 07:24:16
Du kannst auch bei Deinem Browser auf Ansicht gehen und da sowas wie View Sourcecode anklicken.
Titel: Antw:Wie funktioniert das swiper Widget ?
Beitrag von: setstate am 12 Januar 2017, 07:37:51
Code Auswählen

<li data-row="1" data-col="5" data-sizex="8" data-sizey="5">
    <header>WEATHER WEEK</header>
    <!-- place your widget here -->
    <div data-type="swiper" data-height="220px" data-width="500px" class="top-space-2x">
        <ul>
            <li>
               <div class="left">
                  <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                  <div class="inline">
                     <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class="large cell"></div>
                     <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="bigplus thin"></div>
                     min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                  </div>
               </div><div class="row"></div>
               <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                   <div data-type="label" data-device="AgroWeather" data-get="fc0_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
               </div>
            </li>
            <li>
                <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                   <div class="inline">
                      <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class="large cell"></div>
                      <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="bigplus thin"></div>
                      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                   </div>
                </div><div class="row"></div>
                <div class="left">
                    <div data-type="label" data-device="AgroWeather" data-get="fc1_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                    <div data-type="label" data-device="AgroWeather" data-get="fc1_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                </div>
            </li>
            <li>
                <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc2_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                   <div class="inline">
                      <div data-type="label" data-device="AgroWeather" data-get="fc2_weatherDay" class="large cell"></div>
                      <div data-type="weather" data-device="AgroWeather" data-get="fc2_weatherDay" class="bigplus thin"></div>
                      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc2_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                   </div>
                </div><div class="row"></div>
                <div class="left">
                    <div data-type="label" data-device="AgroWeather" data-get="fc2_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                    <div data-type="label" data-device="AgroWeather" data-get="fc2_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                </div>
            </li>
            <li>
                <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc3_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                   <div class="inline">
                      <div data-type="label" data-device="AgroWeather" data-get="fc3_weatherDay" class="large cell"></div>
                      <div data-type="weather" data-device="AgroWeather" data-get="fc3_weatherDay" class="bigplus thin"></div>
                      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc3_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                   </div>
                </div><div class="row"></div>
                <div class="left">
                    <div data-type="label" data-device="AgroWeather" data-get="fc3_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                    <div data-type="label" data-device="AgroWeather" data-get="fc3_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                </div>
            </li>
            <li>
                <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc4_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                   <div class="inline">
                      <div data-type="label" data-device="AgroWeather" data-get="fc4_weatherDay" class="large cell"></div>
                      <div data-type="weather" data-device="AgroWeather" data-get="fc4_weatherDay" class="bigplus thin"></div>
                      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc4_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                   </div>
                </div><div class="row"></div>
                <div class="left">
                    <div data-type="label" data-device="AgroWeather" data-get="fc4_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                    <div data-type="label" data-device="AgroWeather" data-get="fc4_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                </div>
            </li>
            <li>
                <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc5_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                   <div class="inline">
                      <div data-type="label" data-device="AgroWeather" data-get="fc5_weatherDay" class="large cell"></div>
                      <div data-type="weather" data-device="AgroWeather" data-get="fc5_weatherDay" class="bigplus thin"></div>
                      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc5_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                   </div>
                </div><div class="row"></div>
                <div class="left">
                    <div data-type="label" data-device="AgroWeather" data-get="fc5_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                    <div data-type="label" data-device="AgroWeather" data-get="fc5_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                </div>
            </li>
            <li>
                <div class="left">
                   <div data-type="label" data-device="AgroWeather" data-get="fc6_tempMax" data-unit="°C&nbsp;" class="bottom gigantic inline verticalLine"></div>
                   <div class="inline">
                      <div data-type="label" data-device="AgroWeather" data-get="fc6_weatherDay" class="large cell"></div>
                      <div data-type="weather" data-device="AgroWeather" data-get="fc6_weatherDay" class="bigplus thin"></div>
                      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="fc6_tempMin" data-unit="%B0C%0A" class="inline medium"></div>
                   </div>
                </div><div class="row"></div>
                <div class="left">
                    <div data-type="label" data-device="AgroWeather" data-get="fc6_date" data-substitution="toDate().eeee()+','" class="left large cell darker"></div>
                    <div data-type="label" data-device="AgroWeather" data-get="fc6_date" data-substitution="toDate().ddmm()" class="left large cell darker"></div>
                </div>
            </li>
        </ul>
    </div>
</li>
Titel: Antw:Wie funktioniert das swiper Widget ?
Beitrag von: romibaer am 12 Januar 2017, 09:56:29
Klasse - vielen vielen Dank für die schnelle Hilfe !
Dann fange ich mal an zu basteln.

p.s.
TUI macht süchtig!

@CoolTux - stimmt hast absolut Recht.
Manchmal sind die Lösungen direkt vor der Nase - naja es war schon spät^^
Titel: Antw:Wie funktioniert das swiper Widget ?
Beitrag von: carlos am 12 Januar 2017, 12:47:09
Hi,
Ich hätte eine Frage.
Code Auswählen

data-substitution="toDate().eeee()
ergibt bei mir einen englischen Namen. Geht das auch in Deutsch bzw. von was hängt das ab ob englisch oder deutsch?
Gruß
Carlos
Titel: Antw:Wie funktioniert das swiper Widget ?
Beitrag von: setstate am 12 Januar 2017, 13:00:07
Das hängt von den Browser/System-Settings ab. Die User Language ist dann bei dir English. Ein Überschreiben per Meta Tag Setting muss ich erst noch einbauen.
Nur Text | Text mit Bildern