Ankündigung

Einklappen
Keine Ankündigung bisher.

Benutzerdefinierte Funktionen (custom.js/custom.css)

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Benutzerdefinierte Funktionen (custom.js/custom.css)

    EDIT: Ich verschiebe betreffendes mal aus dem Entwicklungsthread hierher, daher kann es sein das der Kontext fehlt. Macht es aber einfacher als xx Seiten druchzublättern um es zu finden. (siehe https://knx-user-forum.de/xxapi/4057...tom-css.html#9 )


    Ist in der Aktuellen Version noch einfacher.

    alle möglichen Funktionen liegen undtr xxAPI.functions du brauchst nur eine neue Funktion dort mit
    Code:
    xxAPI.functions.XXBLAH = function ( oarg ) {
        // dostuff oarg.item.text=oarg.args[2];
    }
    Das ist geplant das nachher wie die custom.css einzubinden.

    ABER, es wird keine Nummernkreise geben, denn entweder findet man sich damit ab das die Funktion überschrieben wird, oder man teilt sie und sie wird implementiert wenn sie gut ist.
    Nils
    xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

    #2
    in der custom.css war ein ; nach dem css-selector im git liegt ne aktuelle Version oder du pastest einfach das rein.

    Code:
    .visuelement {
        overflow: initial !important; /* Text is not cut off */ 
    }
    Nils
    xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

    Kommentar


      #3
      Damit man mal sieht wie einfach man nun die XXAPI² um weitere Funktionen erweitern kann (auch als Laie):
      Ich habe folgende Zeilen an die von Nils zur Verfügung gestellten custom.js angehängt:

      xxAPI.functions.XXTEXTCOLORED = function ( oarg ) {
      debug(2,"XXTEXTCOLORED:",oarg);
      oarg.item.color = oarg.args[1];
      oarg.item.text = oarg.args[2];
      }

      Nun kann man einen dynamischen Text in der Form
      XXTEXTCOLORED*red*Dies ist ein roter Text
      generieren, der dann automatisch als Dies ist ein roter Text ausgegeben wird. Endlich ist man also in der Lage, die Farbe abhängig von einem anderen Kommunikationsobjekt als dem Text selber einzufärben und trotzdem dynamisch bleiben (z.B. Wetterwarnung abhängig von der Warnstufe).

      Die Farbe kann nun mit den entsprechend zulässigen Farbbegriffen z.B. red, in Hex #FF0000 oder als rgb(255,0,0) übergeben werden

      Versiertere Entwickler können hier mit Sicherheit noch ganz tolle Sachen zaubern und evtl. uns allen zur Verfügung stellen.

      Kommentar


        #4
        Clicks und Longpress sollten nun ein wenig bunt sein.

        Kann jeder auch selber per custom.css anpassen.

        Die Klassen sind
        Code:
        .activevisuelement::after {
            border-radius: 15px;
            background-color: rgba(200,0,0,0.1);
        }
        für die Clicks, sollte auch mit background-image gehen.

        und für Longpress die Klassen .xxlongpressshort::after und .xxlongpresslong::after
        Nils
        xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

        Kommentar


          #5
          @Hans
          Wenn du dir folgendes in die custom.js kopierst kommt deine Uhr wieder.

          Code:
          hs.functions.element_loader("js/station-clock.js");
          setTimeout(function () {
              var _canvas = $("<canvas />",{
                  "id"     : "bahnhofsuhr_canvas",
                  "width"  : "146px",
                  "css"    : {
                      "position"  : "absolute",
                      "top"       : "696px",
                      "left"      : "953px",
                      "border"    : "0px",
                  },
              });
              $("body").append(_canvas);
              var _clock = new StationClock("bahnhofsuhr_canvas");
              _clock.body = StationClock.SmallWhiteBody;
              _clock.dial = StationClock.SwissStrokeDial;
              _clock.hourHand = StationClock.PointedHourHand;
              _clock.minuteHand = StationClock.PointedMinuteHand;
              _clock.secondHand = StationClock.HoleShapedSecondHand;
              _clock.boss = StationClock.NoBoss;
              _clock.minuteHandBehavoir = StationClock.BouncingMinuteHand;
              _clock.secondHandBehavoir = StationClock.BouncingSecondHand;    
          
              setInterval(function() {
                  _clock.draw();
              },500);
          },1000);
          Nils
          xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

          Kommentar


            #6
            @Hans
            Ich hab mal spaßeshalber aus deiner Uhr ein custom XXANALOGCLOCK gemacht

            Code:
            hs.functions.element_loader("js/station-clock.js");
            xxAPI.functions.XXANALOGCLOCK = function( oarg ) {
                var _id = "clock_" + oarg.item.uid;
                oarg.item.html = "<canvas id='" + _id + "' width='" + oarg.item.width + "px' height='" + oarg.item.height + "px' />";
                oarg.item.xxapi.analogclock = new StationClock(_id);
                $.extend(oarg.item.xxapi.analogclock,{
                    "body" : StationClock.SmallWhiteBody,
                    "dial" : StationClock.SwissStrokeDial,
                    "hourHand" : StationClock.PointedHourHand,
                    "minuteHand" : StationClock.PointedMinuteHand,
                    "secondHand" : StationClock.HoleShapedSecondHand,
                    "boss" : StationClock.NoBoss,
                    "minuteHandBehavoir" : StationClock.BouncingMinuteHand,
                    "secondHandBehavoir" : StationClock.BouncingSecondHand
                });  
                oarg.item.next_update = 1;
                oarg.item.update_code = function ( oarg ) {
                    oarg.item.xxapi.analogclock.draw();
                    oarg.item.next_update = $.now() + 500;
                };
            }
            damit kannst du die Uhr ganz normal mit XXANALOGCLOCK* in der Visu plazieren.

            EDIT: die station-clock.js muss hier runtergeladen werden und im Ordner js relativ zur xstart.htm gespeichert werden, ebenso wie die custom.js die im gleicher Ordnerebene wie die xstart.htm sein muss.
            Nils
            xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

            Kommentar


              #7
              Was du sonst aber auch einfach machen kannst.

              kopiert dir die xstart.htm noch in einen anderen Ordner,
              sodass du nachher
              /opt/xxapi/xstart.htm und /opt/r3/xstart.htm hast

              dann speicherst du in /opt/r3/custom.js
              Code:
              hs.auth.gui_refresh="R3";
              dann kannst du dich über /opt/r3/xstart.htm mit langsamem Refresh einloggen.
              Nils
              xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

              Kommentar


                #8
                Du machst es "zu kompliziert" ;-)

                Code:
                xxAPI.functions.XXBACKGROUND = function ( oarg ) {
                   oarg.item.page.object.css("background-image", hs.user.streaming ? oarg.args[1] : oarg.args[2]);
                
                }
                Du bist doch schon im Javascript, warum solltest du da also erst Text evaluiiren anstatt ihn direkt auszuführen.

                btw. du kannst nachher (wenn du die start.htm mit offline cache nutzt) einfach in der xxapi.appcache in der Cache Sektion alle Dateien hinzufügen die Offline gespeichert werden. bgimg/1.png bgimg/2.png etc etc.. Wildcards funktionieren da nicht.
                Nils
                xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

                Kommentar


                  #9
                  Benutzerdefinierte Funktionen (custom.js/custom.css)

                  Ich verschiebe betreffendes mal aus dem Entwicklungsthread hierher, daher kann es sein das der Kontext fehlt. Macht es aber einfach als xx Seiten druchzublättern um es zu finden.
                  Nils
                  xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

                  Kommentar


                    #10
                    Hallo Nils,

                    der Innenabstand der Zeilen stimmt nun, großartig, superklasse.

                    Zur Skalierung kann ich nicht viel sagen, da es sich nur am PC-Monitor von ca. 18,5" auf 20" vergrößert. Verschwommen ist da noch nichts, für mich in Ordnung.

                    PopUp:
                    Ich habe heute "XXPAGE*POPUP*top:50px;left:140px;" ausprobiert. Finde ich klasse, dass es sich über die ganze Fläche legt und positionierbar ist, vor allem, dass sich dahinter die Quadranten nicht neu laden müssen. Geht sauber und schnell. Ich würde das PopUp auch als Auswahlfenster nehmen wollen um daraus Seiten aufzurufen. Ebenso würde ich gerne die Abdunkelung des Hintergrundes auf meine Bedürfnisse einstellen wollen. Ist das machbar?

                    Grüße
                    Hans-Peter

                    Kommentar


                      #11
                      @Hans-Peter
                      Code:
                      #POPUP::before {
                          content: "\A";
                          position:   absolute;
                          width: 100%;
                          height: 100%;
                          background-color: black;
                          opacity:    0.5;
                      }
                      Das ist der Bereich den du in der custom.css überschreiben kannst.
                      wobei eigentlich nur die unteren beiden in betracht kommen.
                      Du kannst da aber natürlich alles was CSS hergibt nutzen.

                      Den Blur effect beim reconnect kannst du mit
                      Code:
                      .popupeffect {
                          filter: blur(2px);
                          -webkit-filter: blur(2px);
                      }
                      in der custom.css ändern.
                      Nils
                      xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

                      Kommentar


                        #12
                        Ich hab die Klasse .popup mal in .popupeffect umbenannt, das trifft es besser
                        Nils
                        xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

                        Kommentar


                          #13
                          Hallo Nils,

                          du weiß ja, dass ich nach einer Möglichkeit Suche die Refreshzeiten aus dem Experten nicht nur fix über R1 zu nutzen.
                          Hab mich mal versucht, aber in der custom.js bin ich zu spät dran, kann zwar den Wert ändern, aber weiß nicht, wie ich nachladen könnte. Natürlich kann ich auf diese Arte jeden Wert einzeln übergeben, das ist mir aber doch etwas zu mühsam.

                          Mein Versuch:


                          var getURLParameter = function (name) {
                          return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[undefined,""])[1].replace(/\+/g, '%20'))||null;
                          };

                          xxAPI.functions.XXWIWURLSETUP = function ( oarg ) {
                          debug(2,"XXWIWURLSETUP",oarg);

                          var _erg = getURLParameter("Refresh");
                          if (_erg != "") {
                          if (_erg != hs.auth.gui_refresh) {
                          hs.auth.gui_refresh = _erg;
                          }
                          };

                          _erg = getURLParameter("Streaming");
                          if (_erg == "on")
                          hs.user.streaming = true;
                          if (_erg == "off")
                          hs.user.streaming = false;

                          }


                          Aufruf auf der xxAPI-INIT Seite mit XXWIWURLSETUP*
                          Der Wert wird gesetzt, Streaming on/off funktioniert für mich prima

                          Gruß
                          Winni

                          Kommentar


                            #14
                            So erstmal zu den Farben der Werteingabe.


                            Code:
                            .popupbox {
                                background-color: #778899; /* Hintergrundfarbe der Werteingabe */
                            }
                            
                            .popupbox > span {
                               color: #FFFFE0; /* Überschrift Textfarbe */
                               background-color: #FF8C00; /* Hintergrund */
                            }
                            
                            div.werteingabe > div {
                              background-color: white; /* Hintergrundfarbe Display */
                              color: teal; /* Schriftfarbe Display */
                            }
                            input.werteingabe {
                              background-color: white; /* Hintergrundfarbe Display */
                              color: teal; /* Schriftfarbe Display */
                            }
                            
                            li.popupboxbutton {
                               color: #2f4f4f; /* Schriftfarbe Buttons */
                               background-color: white; /*  Hintergrundfarbe Buttons */
                            }
                            
                            /* Bei Bedarf können die Buttons auch mit Bildern versehen werden
                              nth-child(1) ist die 1 nth-child(4) ist das "C" nth-child(5) ist die 4 usw.
                            */
                            li.popupboxbutton:nth-child(16) {
                                color: transparent;
                                background-image: url(somepath.jpg);
                            }
                            Nils
                            xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

                            Kommentar


                              #15
                              Kein Ahnung was du vorhast Winni, aber warum machst du nicht einfach in der custom.js
                              Code:
                              hs.auth.gui_refresh = hs.functions.get_query_parameter('refresh') || "R1";
                              Nils
                              xxAPI² - HTML5 Client für den Gira Homeserver (Status: Beta / Visuclient = 80% / xxAPI¹ Funktionen = 100% / zusätzlich: Slider/Drehknöpfe/Balken/mausnahe Popups/.... ) - Installation: Logikbaustein nach Start Triggern / Startlink auf der Debugseite

                              Kommentar

                              Lädt...
                              X