[FHEM-Tablet-UI] User-Demos

Begonnen von Phil__, 21 Mai 2015, 08:10:10

Vorheriges Thema - Nächstes Thema

Eisix


Internals:
   NAME       UPDATE
   NR         151
   STATE      OK
   TYPE       CustomReadings
   READINGS:
     2018-08-14 18:43:40   ALL             25
     2018-08-14 18:43:40   FHEM            23
     2018-08-14 18:43:40   FTUI            2
     2018-08-14 18:43:40   state           OK
Attributes:
   event-on-update-reading FHEM,FTUI,ALL
   interval   10800
   readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}

SirMarco

Danke :-)

Was für ein Router sitzt hinter dem Netzwerkmonitor?

SirMarco

Zitat von: Eisix am 14 August 2018, 18:51:44

Internals:
   NAME       UPDATE
   NR         151
   STATE      OK
   TYPE       CustomReadings
   READINGS:
     2018-08-14 18:43:40   ALL             25
     2018-08-14 18:43:40   FHEM            23
     2018-08-14 18:43:40   FTUI            2
     2018-08-14 18:43:40   state           OK
Attributes:
   event-on-update-reading FHEM,FTUI,ALL
   interval   10800
   readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}


Das ja schon recht komplex für mich :-)
Habe mir das CustomReading eingebaut. Was sind für den update-ausführen Befehl die vorraussetzungen? der FTUI Update-Button läuft bei mir nicht. Das Device heisst genauso wie bei dir. der "run" Befehl ist mir nicht bekannt

Dank dir

Eisix

Der Netzwerkmonitor ist eine Kombination der Module Unifi, sysmon und speedtest.
Das mit dem update wurde hier im Thread schon mal erklärt. Sind 4 DOIF und ein dummy. Kann ich dir schicken.
Wollte hier keinen support Thread aufmachen ;)

SirMarco

Da hast du vollkommen recht!

Dann gerne per PN

AmunRe

Zitat von: Caleus am 25 Juli 2018, 05:50:51
Hallo Peter

Sehr gerne, ich habe mir als Vorlage das FTUI_Widget_Pagebutton genommen

https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton

und habe darauf aufgebaut. Hier mal die HTML von der Index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="65">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not 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="css/ftui_chart.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- 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>

    <title>Home</title>
</head>
<body>
<div class="gridster">
        <ul>
                <li data-row="1" data-col="1" data-sizex="2" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
                <li data-row="1" data-col="1" data-sizex="7" data-sizey="7" ></li>
        </ul>
<>
</body>
</html>


Das hier ist für die Navigation (menu.html):

<li data-row="1" data-col="1" data-sizex="1" data-sizey="2" class="halbTransparent,">
<header>Navigation</header>

                <div data-type="pagetab" data-url="wall.html" data-icon="fa-home" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"><>Home

                <div data-type="pagetab" data-url="wetter.html" data-icon="fas fa-cloud" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"><>Wetter

                <div data-type="pagetab" data-url="system.html" data-icon="fas fa-desktop" class="" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="#FBB117"><>System

                <div data-type="pagetab" data-url="Temp.html" data-icon="fas fa-thermometer" class=""><>Temp

                <div data-type="pagetab" data-url="Termine.html" data-icon="fas fa-calendar" class=""><>Termine

                <div data-type="pagetab" data-url="licht.html" data-icon="fa-lightbulb-o" class=""><>Licht

                <div data-type="pagetab" data-url="tanken.html" data-icon="mi-local_gas_station" class=""><>Tanken


</li>


und das hier ist die Hauptseite, diese wird mit der index.html mit geladen:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li  data-row="1" data-col="1" data-sizex="4" data-sizey="2" class="halbTransparent ">
        <header>Datum und Uhrzeit</header>
        <div data-type="clock" data-format="H:i:s" class="great thin"><>
        <div data-type="clock" data-format="d.m.Y" class="bigger thin"><>

</li>


<li data-row="1" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
        <div data-type="weather" data-device="MyWeather" data-get="condition" class="large"><>
        <div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"><>
        <div data-type="label" data-device="MyWeather" data-get="condition" class="thin"><>

</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc2_condition" class="cell large"><>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A" class="large"><>
        <>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A" class=" large"><>
        <>
                <div data-type="label" data-device="MyWeather" data-get="fc2_day_of_week" class="cell bigger thin"><>

</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc3_condition" class="cell large"><>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A" class="large"><>
        <>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A" class=" large"><>
        <>
                <div data-type="label" data-device="MyWeather" data-get="fc3_day_of_week"  class="cell bigger thin"><>

</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc4_condition" class="cell large"><>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc4_low_c" data-unit="%B0C%0A" class="large"><>
        <>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A" class="large"><>
        <>
                <div data-type="label" data-device="MyWeather" data-get="fc4_day_of_week"  class="cell bigger thin"><>


</li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc5_condition" class="cell large"><>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc5_low_c" data-unit="%B0C%0A" class="large"><>
        <>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A" class="large"><>
        <>
                <div data-type="label" data-device="MyWeather" data-get="fc5_day_of_week"  class="cell bigger thin"><>


</li>
<li data-row="1" data-col="7" data-sizex="1" data-sizey="2" class="halbTransparent ">
        <div data-type="weather" data-device="MyWeather" data-get="fc6_condition" class="cell large"><>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc6_low_c" data-unit="%B0C%0A" class="large"><>
        <>
        <div class="inline">
                <div data-type="label" data-device="MyWeather" data-get="fc6_high_c" data-unit="%B0C%0A" class="large"><>
        <>
                <div data-type="label" data-device="MyWeather" data-get="fc6_day_of_week"  class="cell bigger thin"><>


</li>

<li  data-row="3" data-col="2" data-sizex="3" data-sizey="2" class="halbTransparent ">
<header>Wunderlist</header>
    <div class="thin">


     <div class="notransmit" data-type="input" id="sendTask"><>
         <div class="round center" data-type="link" data-width="80" data-height="40" data-color="white" data-background-color="green" data-icon="fas fa-shopping-cart" data-device="WEB_Wunderlist" data-set="addTask" data-value="#sendTask">OK<>
     <>

</li>
<li data-row="3" data-col="5" data-sizex="8" data-sizey="2" class="halbTransparent ">
<header>Licht</header>
        <div class="center">
                <div class="inline">
                        <div data-type="switch" data-device="Licht1" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
                        <div class="thin">Lounge Licht<>
                <>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="WohnzimmerTV" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
                        <div class="thin">TV Wohnzimmer<>
                <>
                <div class="inline left-space-1x">
                         <div data-type="switch" data-device="wz.licht.decke" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
                               <div class="thin">Led Regal Wohnzimmer<>
                <>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="Funksteckdose.C" class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
                               <div class="thin">Küche<>
                <>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="SchlafzimmerTV"  class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
                        <div class="thin">TV Schlafzimmer<>
                <>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="SchlafzimmerLicht"  class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green"><>
                        <div class="thin">Licht Schlafzimmer<>
                <>
                <div class="inline left-space-1x">
                        <div data-type="switch" data-device="Ventilator.Warm" data-get="state" data-states='["cmd_1","cmd_2"]' data-icons='["oa-vent_ventilation_level_automatic","oa-vent_ventilation"]' class="large" data-on-background-color="transparent" data-off-background-color="transparent" data-colors='["green","grey"]'><>
                            <div class="thin">Ventilator<>
                <>
        <>
</li>

<li data-row="5" data-col="2" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tür</header>
        <div class="inline top-space">
                  <div data-type="symbol" data-device="NUKIDevice246883369" data-get="battery" data-states='["ok","low"]' data-icons='["fa-battery-4","fa-battery-1 fa-blink"]' data-colors='["green","red"]'><>
                   <br>
                  <div data-type="switch" data-device="NUKIDevice246883369" data-get="state" data-icons='["ftui-door","ftui-door warn"]' data-states='["locked","unlocked"]' data-set-states='["lock","unlock"]'  data-colors='["green","red"]' data-on-background-color="transparent" data-off-background-color="transparent"><>
                  <br>
                  <br>
                  <div data-type="label" class="">Tür<>
        <>
</li>


<li data-row="5" data-col="4" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Aussen</header>
        <div class="inline top-space">
                  <div data-type="symbol" data-device="AURIOL_82" data-get="battery" data-states='["low","ok"]' data-icons='["fa-battery-1","fa-battery-4"]' data-colors='["red","green"]'><>
                  <div data-type="label" class="">Sensor<>
                  <br>
                  <br>
                  <div data-type="switch" data-icon="fas fa-tint" data-device="Funksteckdose.out" class="small" data-on-background-color="transparent" data-off-background-color="transparent" data-on-color="green" ><>
                  <div data-type="label" class="">Brunnen<>
        <>
</li>

<li data-row="5" data-col="6" data-sizex="6" data-sizey="3" class="halbTransparent ">
<header>Home Status</header>
  <div class="center">
  <div class="inline">
                    <div class="row">
                        <div class="big">
                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Home" data-get-off="!on" -set-off="" class="green" data-icon="fa-home" data-background-icon="fa-square" ><>
                          <div data-type="label" class="inline">Home<>
                          <>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Arbeit" data-get-off="!on" data-set-off="" class="red" data-icon="oa-scene_workshop" data-background-icon="fa-square" ><>
                          <div data-type="label" class="inline">Arbeit<>
                          <>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Nacht" data-get-off="!on" data-set-off="" class="blue" data-icon="fa-bed" data-background-icon="fa-square" ><>
                          <div data-type="label" class="inline">Nacht<>
                          <>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Terrasse" data-get-off="!on" data-set-off="" class="orange" data-icon="oa-scene_terrace" data-background-icon="fa-square" ><>
                          <div data-type="label" class="inline">Terrasse<>
                          <>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Urlaub" data-get-off="!on" data-set-off="" class="white" data-icon="mi-beach_access" data-background-icon="fa-square" ><>
                          <div data-type="label" class="inline">Urlaub<>
                          <>

                          <div class="col-1-6">
                          <div data-type="switch" data-device="Home.Status" data-get-on="Wochenmende" data-get-off="!on" data-set-off="" class="white" data-icon="mi-weekend" data-background-icon="fa-square" ><>
                          <div data-type="label" class="inline">WE<>
                          <>
                        <>
                    <>
  <>
  <>
</li>

<li data-row="5" data-col="5" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>Tabletten</header>
      <div class="center">
                  <div data-type="switch" data-device="Tabletten.Status1" data-get="state" data-states='["cmd_1","cmd_2"]' data-set-states='["cmd_2","cmd_1"]' data-icon="fa-thumbs-up" data-colors='["red","green"]' data-on-background-color="transparent" data-off-background-color="transparent"><>
       <>
</li>

<li data-row="5" data-col="12" data-sizex="1" data-sizey="3" class="halbTransparent bg-red">
<header>NOT AUS</header>
      <div class="center">
                  <div data-type="push" data-fhem-cmd="set HomeBot send ACHTUNG NOTAUS wurde ausgelöst.;sleep 3;shutdown" data-icon="fa-power-off" data-color="yellow" data-on-background-color="red" data-off-background-color="red"><>
       <>
</li>

<li data-row="5" data-col="3" data-sizex="1" data-sizey="3" class="halbTransparent ">
<header>zu Hause</header>
<br/>
<div class="inline top-align">
                      <div class="row">
                           <div class="cell">
                            <div class="small">
                             <div data-type="symbol" data-device="PatrickBT" data-states='["present","absent"]' data-icons='["fas fa-male","far fa-male"]' data-colors='["green","red"]' class="big"><>
                             <div data-type="label" class="">Patrick<>
                           <br>
                             <div data-type="symbol" data-device="NalaBT" data-states='["present","absent"]' data-icons='["fas fa-female","far fa-female"]' data-colors='["green","red"]' class="big"><>
                             <div data-type="label" class="">Nala<>
                         <>
                        <>
                        <>
                      <>
                <>
</li>
</ul>
<>
</body>
</html>


Das ist die seite für das Wetter:

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="7" data-template="menu.html" class="halbTransparent"></li>
<li data-row="1" data-col="2" data-sizex="5" data-sizey="5" class="halbTransparent ">
<header>Regenradar</header>
        <div class="inline">
                  <div data-type="image" data-refresh="900" data-height="335" data-url="https://www.dwd.de/DWD/wetter/radar/radfilm_nrw_akt.gif" class="nocache">
        <>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="5" class="halbTransparent ">
<header>Wind</header>
        <div class="inline">
          <div  class="cell big" data-type="wind_direction" data-device="wetter" data-direction="windDir" data-speed="wind" data-calm="~" data-tickstep="22.5" class="mini"><>
          <div class="cell bigger" data-type="label" data-device="wetter" data-get="wind" data-unit="km/h" data-fix="0"><>
        <>
</li>
<li data-row="1" data-col="8" data-sizex="2" data-sizey="7" class="halbTransparent ">
<header>Info`s</header>
        <div class="inline">
          Sichtweite:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="visibility" class="thin" data-icon="mi-visibility" data-color="White" ><><><div class="inline"><div data-type="label" data-device="MyWeather" data-get="visibility" class="thin" data-unit="Km"><><><br>
          Luftdruck:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="pressure" class="thin" data-icon="oa-weather_barometric_pressure" data-color="White" ><><><div class="inline"><div data-type="label" data-device="MyWeather" data-get="pressure" class="thin" data-unit="hPa"><><><br>
          UV-Index:<br><div class="inline"><div data-type="symbol" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ><><><div class="inline"><div data-type="label" data-device="wetter" data-get="fc0_uv" class="thin" data-icon="fa-sun-o" data-color="White" ><><><br>
          Feuchte:<br><div class="inline"><div data-type="symbol" data-device="MyWeather" data-get="humidity" class="thin" data-icon="oa-weather_humidity" data-color="White" ><><><div class="inline"><div data-type="label" data-device="MyWeather" data-get="humidity" class="thin" data-unit="%"><><><br>
          Sonnenaufgang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise" data-color="White" ><><><div class="inline"><div data-type="label" data-device="Sonnenaufgang" data-get="STATE" class="thin" data-icon="wi wi-sunrise"><><><br>
          Sonnenuntergang:<br><div class="inline"><div data-type="symbol" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset" data-color="White" ><><><div class="inline"><div data-type="label" data-device="Sonnenuntergang" data-get="STATE" class="thin" data-icon="wi wi-sunset"><><>
        <>
</li>
<li data-row="6" data-col="2" data-sizex="2" data-sizey="2" class="halbTransparent ">
<header>Wetter</header>
        <div class="inline">
        <div data-type="weather" data-device="MyWeather" data-get="condition" class="large"><>
        <div data-type="label" data-device="AURIOL_82" data-temp="temperature" data-get="temperature" data-unit="%B0C%0A" class="bigger thin"><>
        <div data-type="label" data-device="MyWeather" data-get="condition" class="thin"><>
        <>
</li>

<li data-row="6" data-col="4" data-sizex="2" data-sizey="2" class="halbTransparent ">
        <header>Morgens</header>
        <div class="inline">
        <div data-type="weather" data-device="wetter" data-get="fc0_weatherMorning" class="large"><>
        <div data-type="label" data-device="wetter" data-get="fc0_temp06" data-unit="%B0C%0A" class="large"><>
        <div class="inline">
                <div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ><>
        <>
        <div class="inline left-narrow">=<>
        <div class="inline">
                <div data-type="label" data-device="wetter" data-get="fc0_chOfRain06" data-unit="%" class="large"><>
        <>
        <>
</li>

<li data-row="6" data-col="6" data-sizex="2" data-sizey="2" class="halbTransparent ">
        <header>Mittag</header>
        <div data-type="weather" data-device="wetter" data-get="fc0_weatherDay" class="large"><>
        <div data-type="label" data-device="wetter" data-get="fc0_temp12" data-unit="%B0C%0A" class="large"><>
        <div class="inline">
                <div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ><>
        <>
        <div class="inline left-narrow">=<>
        <div class="inline">
                <div data-type="label" data-device="wetter" data-get="fc0_chOfRain12" data-unit="%" class="large"><>
        <>
</li>
<li data-row="6" data-col="8" data-sizex="2" data-sizey="2" class="halbTransparent ">
        <header>Abends</header>
        <div data-type="weather" data-device="wetter" data-get="fc0_weatherEvening" class="large"><>
        <div data-type="label" data-device="wetter" data-get="fc0_temp18" data-unit="%B0C%0A" class="large"><>
        <div class="inline">
                <div data-type="symbol" data-icon="wi wi-raindrops" class="small" data-color="White" ><>
        <>
        <div class="inline left-narrow">=<>
        <div class="inline">
                <div data-type="label" data-device="wetter" data-get="fc0_chOfRain18" data-unit="%" class="large"><>
        <>
</li>
     <>
</body>
</html>


Sollte der ein oder andere Fehler finden last es mich wissen, nur so wird es besser.

Caleus


P.S. zur zeit bekomme ich leider beim seiten auf ruf immer Retry to connect in 10 seconds


Ganz cool wäre ja auch, die passende CSS datei dazu zu haben, kannst Du die bereitstellen?
4 x Echo Dot, HMLAN Gateway, und diverse HM Komponenten, Philips Hue + OSRAM Plugs

speridal

Zitat von: Zage am 08 Februar 2017, 11:23:46
Hallo zusammen,

hier ist meine Umsetzung.

Viele Grüße
Zage

Hi Zage,

sieht sehr schick aus! Mich interessiert der Code für die Temperaturanzeigen. Könntest du diesen posten?

Vielen Dank und viele Grüße,
Bernd

Caleus

Hallo AmunRe

natürlich ich habe die fhem-tablet-ui.css angepasst

kann ich hier nicht mit CODE tag eintragen ist wohl zu viel

FHEM-Wohnung

Mir gefällt das Deisgn von der Loxne App sehr gut. Hat jemand zufällig schon das Tabletdesign als Tabletui nachbegbaut?

gloob

Zitat von: FHEM-Wohnung am 04 Dezember 2018, 16:41:44
Mir gefällt das Deisgn von der Loxne App sehr gut. Hat jemand zufällig schon das Tabletdesign als Tabletui nachbegbaut?

Zeig doch bitte mal ein Bild von der Loxone App.
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


Dominic

Zitat von: hsepm am 12 August 2018, 10:53:36
Here we go. Du musst dir nur eigene 3D-Button-Icons bauen und per CSS einhängen.

Viele Grüße,
Holger


Hallo hsepm,

ich finde deine Tablet Ui super und wollte mit dieser als Vorlage arbeiten.
Jedoch habe ich ein Problem
Wenn ich die ein binde., dann habe ich in bei dem Controll und Info Bereich zu erst nur einen schwarzen Hintergrund. Erst nach dem ich einem die Seiten gewechselt habe, wird mir der Hintergrund transparent angezeigt.
Hast Du eine Idee woran das liegen könnte ?
Vorab schon mal vielen Dank

hsepm

Zitat von: Dominic am 20 Dezember 2018, 16:16:42
Hallo hsepm,

ich finde deine Tablet Ui super und wollte mit dieser als Vorlage arbeiten.
Jedoch habe ich ein Problem
Wenn ich die ein binde., dann habe ich in bei dem Controll und Info Bereich zu erst nur einen schwarzen Hintergrund. Erst nach dem ich einem die Seiten gewechselt habe, wird mir der Hintergrund transparent angezeigt.
Hast Du eine Idee woran das liegen könnte ?
Vorab schon mal vielen Dank

Schau dir mal die CSS Klassen an, dort wird der Hintergrund samt Transparenz definiert. Ansonsten keine Idee.

Dominic

#1108
Danke für die Antwort. Auf die Idee bin ich dann auch gekommen  ::) und das war es auch.

Eine Frage hätte ich noch. Wenn ich via Pagebutton zum Beispiel auf die Lichtseite wechsel, wird mir diese auch angezeigt, nur ändert sich dann die "größe" der Seite so das ich an der Seite und unten Scrollbalken bekomme...Weißt du wie ich das verhindern kann?
Viele Grüße

hsepm

Zitat von: Dominic am 21 Dezember 2018, 08:56:21
Danke für die Antwort. Auf die Idee bin ich dann auch gekommen  ::) und das war es auch.

Eine Frage hätte ich noch. Wenn ich via Pagebutton zum Beispiel auf die Lichtseite wechsel, wird mir diese auch angezeigt, nur ändert sich dann die "größe" der Seite so das ich an der Seite und unten Scrollbalken bekomme...Weißt du wie ich das verhindern kann?
Viele Grüße

Das hatte ich auch manchmal, liegt wohl manchmal an Rundungsfehlern bei der Skalierung. Als Workaround kann man die gridster box der page_... html-Seite kleiner machen als die ensprechende gridster box in der index.html.