Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. Einfach mal zeigen will….. :-) - Teil 3

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Einfach mal zeigen will….. :-) - Teil 3

    This topic has been deleted. Only users with topic management privileges can see it.
    • Walter.O.
      Walter.O. @Bostil last edited by Walter.O.

      Hat jemand von euch eine Visualisierung (VIS) vom Stromverbrauch im gebrauch?
      Super währe auch wenn kosten mit berechnet werde.

      1 Reply Last reply Reply Quote 0
      • D
        dos1973 @skokarl last edited by

        @skokarl

        ein Bäumchen für dich...

        388755-free-download-pink-full-hd-desktop-wallpaper-wallpaper-high (1).jpg

        1 Reply Last reply Reply Quote 2
        • M
          Martin1982 last edited by

          Nach der super Vorlage mit dem roten Baum habe ich mich auch mal wieder an die Arbeit gemacht und eine neue VIS angefangen. Ist auch das erste mal, dass ich damit soweit zufrieden bin und es hier zeigen kann.
          Danke @Bostil und @dos1973 für die sehr guten Vorlagen.

          Als Grundlage habe ich die exportierte VIS genommen und umgebaut. Der View wechsel erfolgt über ein ViewInWidget8 und viele zusammenhängende Elemente habe ich in Gruppen sortiert. Auch die Uhr und die Wetteranzeige ist nicht mehr direkt auf der Hauptseite sondern wird auch über den ViewInWidget8 angezeigt, so habe ich mir die extra Prüfung auf die Sichtbarkeit gespart.

          Den Hintergrund werde ich (erst mal manuell) 4 mal im Jahr der Jahreszeit anpassen.

          Screenshot 2021-11-19 22.04.51.png

          Bisher ist nur die Startseite wirklich zum zeigen geeignet und auch hier fehlen leider noch ein paar Informationen (z.B. E-Auto und Wallbox)

          D 1 Reply Last reply Reply Quote 3
          • D
            dos1973 @Martin1982 last edited by

            @martin1982

            Bäume sind momentan wohl im Trend
            Ob rot oder blau, sieht immer echt cool aus

            1 Reply Last reply Reply Quote 0
            • R
              rookie123 @Bostil last edited by

              @bostil sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

              Na klar, kann ich das hier teilen. Credits gehen an @dos1973

              Bitte beachten ...

              • noch work in progress
              • verwendete Schriftart: Akrobat
              • für den "Blur"-Effekt bitte @dos1973 CSS-Code unter CSS Global eintragen
              • nicht "pixel perfect"
              • sehr customized, aber nehmt euch ruhig das Grundgerüst
              • keine Ahnung, wie es bei euch nach einem Import ausschaut
              • Navigation im unteren Bereich: der Rolladenbereich wird über eine separate View per "View in Widget" eingebunden und hier ist eine horizontale Scrollbar dafür verantwortlich, dass man in der View von links nach rechts scrollen kann; weiter rechts ist dann das größere Fenster. Hier schaltet man per Button versch. "View in Widgets" ein / aus. Gescrollt wird hier nur vertikal.
              • die Hauptbildschirme werden durch Anklicken der einzelnen Buttons (Kalender, Energie ...) angewählt und per Sichtbarkeit und Datenobjekt wird dann auch wieder per "View in Widgets" der jeweilige View zentriert eingeblendet

              Externer Download: https://ufile.io/uoayl7l9

              2.PNG

              1.PNG

              LG

              Der download ist leider nicht mehr verfügbar. Wäre super wenn du das neu hochladen würdest! Vielen Dank

              Bostil 1 Reply Last reply Reply Quote 0
              • Bostil
                Bostil @rookie123 last edited by

                @rookie123 Na klar, mache ich gerne heute Abend. Dann direkt auch eine leicht angepasste Version, wo "View in Widgets 8" verwendet wird anstatt mit der Sichtbarkeit zu spielen.

                N D3ltoroxp 2 Replies Last reply Reply Quote 3
                • N
                  Nachtschatten81 @Bostil last edited by

                  @bostil Ich hätte auch gerne den Downloadlink, da der alte Link leider nicht mehr funktioniert.
                  Vielen Dank!

                  1 Reply Last reply Reply Quote 0
                  • D3ltoroxp
                    D3ltoroxp last edited by

                    Hier gibt es ja viele schicke VIS. Ich plane gerade, mehrere Hauptseiten die automatisch nach einiger Zeit durchwechseln. Gibt es hier eine Möglichkeit einen schönen Fade ein zu fügen ? Nicht das direkt von einem aufs nächste Bild gesprungen wird. Leicht ausblenden, das andere darüber oder so ähnlich ?

                    D3ltoroxp 1 Reply Last reply Reply Quote 0
                    • Glasfaser
                      Glasfaser last edited by

                      @d3ltoroxp

                      Eventuell so :

                      https://forum.iobroker.net/topic/15567/view-wechsel-animieren/2

                      1 Reply Last reply Reply Quote 1
                      • D3ltoroxp
                        D3ltoroxp @D3ltoroxp last edited by

                        @d3ltoroxp Danke, schau ich mir mal an, ob das vllt was wäre.

                        1 Reply Last reply Reply Quote 0
                        • D3ltoroxp
                          D3ltoroxp last edited by

                          Ich hätte noch mal eine Frage, kann ich einen wechselnden Hintergrund machen ? So ähnlich wie bei Windows oder am Amazon Tablet ? Quasi ein frisches Hintergrundbild alle x Minuten ? Von mir aus auch Live von einer Webseite, oder auch aus einem Ordner, den man eben selber befüllt ?

                          Glasfaser 1 Reply Last reply Reply Quote 0
                          • Glasfaser
                            Glasfaser @D3ltoroxp last edited by

                            @d3ltoroxp sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                            einen wechselnden Hintergrund machen ?

                            https://forum.iobroker.net/topic/29759/gelöst-dynamische-url-aus-datenpunkt-als-view-hintergrund?_=1639333925238

                            1 Reply Last reply Reply Quote 1
                            • Walter.O.
                              Walter.O. @sigi234 last edited by

                              @sigi234
                              Hallo sigi234 sag mal gibt es zum View Spritpreise:
                              https://forum.iobroker.net/topic/28717/vis-von-sigi234/25?page=2
                              eigentlich noch ein Java script.?
                              z.b.: (javascript.0.scriptDatenPunkte.Sprit_AT.Treffer_1.Logo_1)
                              Müsste doch ein script sein oder täusche ich mich?

                              Gleiches fehlt mir doch dann wohl auch bei: Fritzbox VIEW IT und Fritz Anrufmonitor

                              Negalein 1 Reply Last reply Reply Quote 0
                              • Negalein
                                Negalein Global Moderator @Walter.O. last edited by Negalein

                                @walter-o sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                eigentlich noch ein Java script.?

                                https://forum.iobroker.net/topic/20314/skripten-des-e-control-spritpreisrechners

                                //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                //  "Spritpreise_AT v.0.5"                                                                                                              //
                                //  e-control Spritpreise                                                                                                               //    
                                //  ursprüngl. Script von steinejo_io vom                                                                                               //
                                //                                                                                                                                      //
                                //  Zwingend erforderlich sind der Parser Adapter und die URL aus der API. Links und Hilfe zum Erstellemn findet ihr im Folgenden Lnk:  //
                                //  https://forum.iobroker.net/topic/20314/skripten-des-e-control-spritpreisrechners                                                    //
                                //  Das manuelle Anlegen von Daenpunkten ist nicht mehr notwendig. erledigt das Script beim ersten Aufruf.                              //
                                //  Auf das "E" Zeichen habe ich verzichtet, da es in VIS genz einfach an der jeweils gewünschten Stelle produzierbar ist.              //
                                //                                                                                                                                      //
                                //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                 
                                on({id: "parser.0.Spritpreisrechner"/*Spritpreisrechner*/, change: 'any'}, function(obj)
                                {
                                log("Start Spritvergleich");
                                 
                                var gasStation = JSON.parse(obj.state.val);
                                if (!Array.isArray(gasStation) || gasStation.length === 0) return;
                                gasStation = gasStation.filter(g => g.prices.length > 0);
                                if (gasStation.length === 0) return;
                                    //Aral=1, eni=2, Shell=3, OMV=4, avanti=5, bp=6, JET=7, Turmöl=8, Lagerhaus=9, AVIA=10, A1=11, Diskont=12, IQ=13
                                    var arrMarke = ['Aral', 'eni', 'Shell', 'OMV', 'avanti', 'BP', 'JET', 'Turmöl', 'Lagerhaus', 'AVIA', 'A1', 'Diskont', 'DISKONT', 'IQ', 'SB-Tankstelle', 'bp', 'Land', 'Bp'];
                                	var i = 0;
                                    for (var i = 1; i <= 5; i++) {
                                        // console.log(i);
                                        // console.log("javascript.0.Sprit_AT.name_"+i);
                                        createState("javascript.0.Sprit_AT.Treffer_"+i+".Name_"+i, {type: "string", name: "Platz "+i, read: true, write: true});
                                        createState("javascript.0.Sprit_AT.Treffer_"+i+".Preis_"+i, {type: "string", name: "Platz "+i, read: true, write: true});
                                        createState("javascript.0.Sprit_AT.Treffer_"+i+".PreisP_"+i, {type: "string", name: "Platz "+i, read: true, write: true});
                                		createState("javascript.0.Sprit_AT.Treffer_"+i+".Strasse_"+i, {type: "string", name: "Platz "+i, read: true, write: true});
                                        createState("javascript.0.Sprit_AT.Treffer_"+i+".PLZ_Ort_"+i, {type: "string", name: "Platz "+i, read: true, write: true});
                                        createState("javascript.0.Sprit_AT.Treffer_"+i+".Logo_"+i, {type: "number", name: "Logo "+i, read: true, write: true});
                                		createState("javascript.0.Sprit_AT.Treffer_"+i+".Latitude_"+i, {type: "number", name: "Latitude "+i, read: true, write: true});
                                		createState("javascript.0.Sprit_AT.Treffer_"+i+".Longitude_"+i, {type: "number", name: "Longitude "+i, read: true, write: true});
                                		createState("javascript.0.Sprit_AT.Treffer_"+i+".offen_"+i, {type: "boolean", name: "offen "+i, read: true, write: true});
                                	}
                                	
                                 
                                    var index = 0;
                                    //for (index = 0; index < gasStation.length; ++index) {
                                    for (index = 0; index <= 4; ++index) {
                                	if (gasStation[index].prices.length < 1) continue;
                                	var arrname = gasStation[index].name.split(' ');
                                		if (arrname.length > 0) {
                                				var markenname = arrname[0];
                                			}
                                			else
                                			{
                                				var markenname = gasStation[index].name;
                                			}
                                		var station = gasStation[index].name;
                                    setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".Name_"+(index+1), gasStation[index].name);
                                    setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".Preis_"+(index+1), (gasStation[index].prices[0].amount).toString().replace(".",","));
                                    setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".PreisP_"+(index+1), (gasStation[index].prices[0].amount).toString().replace(".","."));
                                	setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".Strasse_"+(index+1), (gasStation[index].location.address));
                                    setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".PLZ_Ort_"+(index+1), (gasStation[index].location.postalCode) + " " + (gasStation[index].location.city));
                                    setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".Latitude_"+(index+1), (gasStation[index].location.latitude));
                                	setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".Longitude_"+(index+1), (gasStation[index].location.longitude));
                                	setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".offen_"+(index+1), (gasStation[index].open));
                                	
                                	//Aral=1, eni=2, Shell=3, OMV=4, avanti=5, bp=6, JET=7, Turmöl=8, Lagerhaus=9, AVIA=10, A1=11, Diskont=12, IQ=13
                                	
                                	var markennameklein=markenname.toLowerCase();
                                	var x= 0;
                                	for (x=0; x < arrMarke.length; x++) {
                                		var arrMklein=arrMarke[x].toLowerCase();
                                		//console.log("x=" + x + "/ Markennameklein =" + markennameklein + "/ Array =" + arrMklein);
                                		if (arrMklein == markennameklein) {
                                			setState("javascript.0.Sprit_AT.Treffer_"+(index+1)+".Logo_"+(index+1), (x+1));
                                		}
                                	}
                                	
                                	}
                                 
                                log("Ende Spritvergleich");
                                });
                                
                                Walter.O. 1 Reply Last reply Reply Quote 0
                                • Walter.O.
                                  Walter.O. @Negalein last edited by

                                  @negalein Ich danke dir.
                                  weist du auch wo ich die anderen Finde?

                                  Ups, stelle gerade fest daß das nur für AT ist.
                                  geht das auch mit einem Deutschen Anbieter wie zb. Tankerkönig?

                                  Negalein 1 Reply Last reply Reply Quote 0
                                  • Negalein
                                    Negalein Global Moderator @Walter.O. last edited by

                                    @walter-o sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                    geht das auch mit einem Deutschen Anbieter wie zb. Tankerkönig?

                                    gibt einen Adapter füt Tankerkönig
                                    https://forum.iobroker.net/topic/2658/iobroker-tankerkoenig-spritpreis-adapter

                                    1 Reply Last reply Reply Quote 0
                                    • D3ltoroxp
                                      D3ltoroxp @Bostil last edited by

                                      @bostil Hallo,
                                      ich würde dein View auch gern mal laden und mir mal anschauen, wie das gelöst ist. Bei deinem DL Link soll ich ein Premium Konto abschließen...

                                      1 Reply Last reply Reply Quote 0
                                      • Bostil
                                        Bostil last edited by

                                        Bitte entschuldigt die späte Reaktion. Habe leider nicht mehr viel weiter optimiert. Wird sicher demnächst irgendwann geschehen. Aber für euch sollte dies erstmal als Template gut genügen. Viel Spaß damit und bin gespannt auf eure Versionen!

                                        2021-12-13-Bostil VIS-Template_v1.1.zip

                                        @D3ltoroxp @rookie123 @Nachtschatten81

                                        wendy2702 1 Reply Last reply Reply Quote 1
                                        • D3ltoroxp
                                          D3ltoroxp last edited by

                                          So in die Richtung möchte ich das alles gestalten. Das ist mal die Wetter Ansicht, ich möchte das nach einer gewissen Zeit, die View wechselt, Wetter, Kalender, Haus Infos usw..
                                          Dabei kann man von jeder View das Menu aufrufen, muss ich mal noch schauen, wie ich das hinbekomme. Vllt mit dem Material Design, da gibts ja das Side Menu dazu. Aber muss ich noch schauen, wie ich dann dort die View wechseln lassen kann.

                                          8ed45f2f-8fba-4d4e-927b-5d610d47413a-grafik.png

                                          C Bluelinux T 3 Replies Last reply Reply Quote 1
                                          • C
                                            Coffeelover @D3ltoroxp last edited by

                                            @d3ltoroxp sieht gut aus. Wie wechselst du aktuell die Views? Wenn du ein View in Widget nutzt, musst du nur per Script die Variable bzw den Datenpunkt dazu ändern.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.1k
                                            Online

                                            31.6k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            vis vis editor visualisierung visualization
                                            155
                                            813
                                            248221
                                            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