Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Entwicklung
    4. [gelöst]Fragen zu Widget Entwicklung

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [gelöst]Fragen zu Widget Entwicklung

    This topic has been deleted. Only users with topic management privileges can see it.
    • EdgarM
      EdgarM Developer last edited by EdgarM

      Hallo zusammen,

      ich passe gerade für mich den material widgets Adapter an und bin kurz vor Ende am Verzweifeln 😉

      Ich versuche aktuell noch zu implementieren, dass ein div über dem Widget liegt mit Fargbe weiss und opacity 0.1

      Leider bekomme ich es nicht hin, dass es darüber liegt, soll heissen ich weiss nicht wo ich die left:,top,width und height vom eigentlichen Widget herbekomme.

      <div class="vis-widget  md-list vis-tpl-material-ListHumidity" id="w00067" style="left: 135px; top: 273px; width: 350px; height: 50px; font-size: x-small;">	
      			<div class="vis-widget-body">
      				<div class="md-list-icon">
      					<img src="widgets/material/img/humid_humidity.png">
      				</div>
      				<div class="md-list-desc">
      					<div class="md-list-title mdui-title">
      						Sensor
      					</div>
      					<div class="md-list-subtitle mdui-subtitle">
      						
      Luftfeuchtigkeit
      					</div>
      				</div>
      				<div class="md-list-value mdui-value">47.0 %</div>
      			</div>
      			<div class="md_button_op vis-widget " id="w00067"></div>
      		<div class="vis-signal   " data-index="0" style="display: none; pointer-events: none; position: absolute; z-index: 10; top: 25%; left: 65%"><img class="vis-signal-icon" src="/vis-icontwo/Weather/wet.png" style="width: 25px; height: auto;background-color: blue;"></div></div>
      
      <script id="tplMaListHumid" type="text/ejs" class="vis-tpl" data-vis-prev='<div id="prev_tplMaListHumid" style="position: relative; text-align: initial;padding: 4px ">
      				<div class="vis-widget_prev " style="width: 100px; height: 100px; padding:2px; background-color: #212121" > 
      					<img src="widgets/material/img/humid_humidity.png" style="width: 100px; height: 100px;"></div></div>'
      	data-vis-attrs="oid/id;title/text;subtitle/text;" data-vis-set="material" data-vis-type="val"
      	data-vis-name="ListHumidity">
      	<div class="vis-widget <%== this.data.attr('class') %> md-list" id="<%= this.data.attr('wid') %>" >	
      			<div class="vis-widget-body" >
      				<div class="md-list-icon">
      					<img src="widgets/material/img/humid_humidity.png">
      				</div>
      				<div class="md-list-desc">
      					<div class="md-list-title mdui-title" >
      						<%= this.data.attr('title') %>
      					</div>
      					<div class="md-list-subtitle mdui-subtitle">
      						<%= this.data.attr('subtitle') %>
      					</div>
      				</div>
      				<div class="md-list-value mdui-value"></div>
      			</div>
      			<div class="md_button_op vis-widget <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>"></div>
      		</div>
      		
      		<% vis.binds.material.tplMdListHumid(this.data.wid, this.view, this.data);  %>
      		
      </script>
      

      Mir ist nicht ganz klar, woher die Widgets diese Informationen bekommen bzw. wo sie gespeichert werden.

      Für einen Tipp wäre ich sehr dankbar

      grüße

      1 Reply Last reply Reply Quote 0
      • EdgarM
        EdgarM Developer last edited by

        Wenn mir wenigstens jemand sagen könnte, wie ich auf die Positions-informationen eines Widgets zugreifen könnte wäre ich schon glücklich 🙂

        Also wo werden Informationen wie left: oder top: gespeichert?

        nicht mal das finde ich aktuell.

        grüße und danke

        OliverIO 1 Reply Last reply Reply Quote 0
        • OliverIO
          OliverIO @EdgarM last edited by

          @EdgarM
          Die genauen Positions Angaben werden durch den Browser während des Renderingsberechnet. Diese können je nach Browser, Bildschirmgröße, Bildschirm Auflösung variieren. Daher kannst du die exakte Position eines bestimmten Elementes erst auslesen, wenn der Browser diesen Prozess abgeschlossen hat.
          Besser ist es, den Browser mitzuteilen, dass du Elemente über einander legen möchtest. Dafür gibt es diverse CSS Angaben.
          Ein Beispiel dazu findest du im folgenden Link
          https://www.bennyn.de/programmierung/css/div-container-ubereinander-legen.html

          1 Reply Last reply Reply Quote 1
          • EdgarM
            EdgarM Developer last edited by

            Hi Oliver,

            erstmal danke für die info, war sehr hilfreich.

            für alle anderen, unter https://github.com/EdgarM73/ioBroker.vis-material/tree/master/widgets habe ich das material widget erweitert um ein Anwesendheits widget ( und habe als Grundlage den fork von Pix--- übernommen mit Luftfeuchtigkeit und Shutter ).

            Habe für den Dark Theme ein Button alike div darüber gelegt und jetzt gefällt es mir recht gut 🙂

            Wer es ausprobieren möchte darf mir gerne infos zukommen lassen, auch bugs

            c17fd91d-ee2b-4ce6-8e18-1fd8853aa86e-image.png

            grüße

            sigi234 1 Reply Last reply Reply Quote 1
            • sigi234
              sigi234 Forum Testing Most Active @EdgarM last edited by

              @EdgarM

              Anwesendheits widget

              Wie bringe ich das hinein?

              1 Reply Last reply Reply Quote 0
              • EdgarM
                EdgarM Developer last edited by

                Hi Oliver,

                du musst mein Adapter von github laden als Testadapter.

                Also im Adapter -> laden aus eigener URL -> Beliebig -> https://github.com/EdgarM73/ioBroker.vis-material

                Dann hast du in VIS links den Material und dort dann die widgets .

                Ich hoffe, es klappt so

                grüße

                1 Reply Last reply Reply Quote 0
                • EdgarM
                  EdgarM Developer last edited by

                  Falls es jemannd testen möchte, es sieht jetzt so aus:

                  bff63519-e216-45c8-9c27-d2d6b0bdff1e-image.png

                  Wenn nicht, bitte im Projekt CSS folgendes eintragen, ich habe aktuell das Gefühl, dass mein css nicht immer geladen wird:

                  .my_parent {
                  color:white;
                  }

                  .my_child {
                  position: absolute;
                  }

                  .opac {
                  background-color: white;
                  opacity: 0.08;
                  height:100%;
                  width:100%;
                  }

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post

                  Support us

                  ioBroker
                  Community Adapters
                  Donate

                  768
                  Online

                  31.9k
                  Users

                  80.2k
                  Topics

                  1.3m
                  Posts

                  widget css
                  3
                  7
                  404
                  Loading More Posts
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes
                  Reply
                  • Reply as topic
                  Log in to reply
                  Community
                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                  The ioBroker Community 2014-2023
                  logo