Ankündigung

Einklappen
Keine Ankündigung bisher.

Als Vollbild darstellen

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

    Als Vollbild darstellen

    Hallo zusammen,

    ich hatte vor einigen Jahren mein xxapi-Projekt erstellt. Das wird, obwohl es die Auflösung 1024x768 hat, auch auf meinem Monitor mit FullHD in "Vollbild" dargestellt. Zumindest wird es groß skaliert. Siehe Bild "Vius2".
    Nun habe ich ein anderes Projekt erstellt und hier wird es nicht von 1024x768 auf einen größeren Monitor groß skaliert. Siehe Bild "Visu1". Da ich die Visu auf einem IPad mit doppelter 1024er Auflösung betreiben will, sollte es sich hochskalieren.
    Ich habe aber keine Ahnung mehr, was ich damals gemacht habe, dass es skaliert wird.
    Könnt ihr mir da auf die Sprünge helfen?

    Vielen Dank und Grüße
    Marc
    Angehängte Dateien

    #2
    So wie der Pfad aussieht (keine Ahnung warum das bei dir auf /hsav/start.htm geht) bist du sicher das das die xxapi² ist und nicht die standard Gira HSAV?
    (Drück mal <strg>+<shift>+x)
    Nils

    aktuelle Bausteine:
    BusAufsicht - ServiceCheck - Pushover - HS-Insight

    Kommentar


      #3
      Eigentlich wollte ich nur die xxapi (nicht die xxapi2). Ich starte mit /hsav/xxapi.htm und werden dann auf die /hsav/start.htm umgeleitet. Starte ich mit /hsav/xstart.htm, wird es hochskaliert, aber es fehlt der Inhalt (siehe Bild)
      Visu3.png

      Ansonst denke ich mal schon, dass die xxapi geladen wird und nicht Standard hsav:
      visu4.png

      Kommentar


        #4
        Die xxapi kann keine Skalierung. Es gab von TirochH mal eine modifizierte start.htm Version, die das evtl. kann. Musst du mal das (evtl. Haupt)Forum durchsuchen.
        Nils

        aktuelle Bausteine:
        BusAufsicht - ServiceCheck - Pushover - HS-Insight

        Kommentar


          #5
          hmm, warum macht sie es dann (Bilder erster Beitrag)? Oder reden wir aneinander vorbei?
          Dann habe ich eine generelle Frage: Hast du / ihr dann den Homeserver ausschließlich auf einem 1024x768 Monitor laufen? Ich würde das gerne auf einem IPad mit 2048x1536 laufen lassen. Dann würde das Bild links oben sitzen, richtig?

          Kommentar


            #6
            Ok, möglicherweise habe ich mit skalieren was falschen gemeint. Es müsste korrekt heißen "zoomen" (also mit Qualitätsverlust)

            Kommentar


              #7
              Zitat von marcjoerg Beitrag anzeigen
              hmm, warum macht sie es dann (Bilder erster Beitrag)? Oder reden wir aneinander vorbei?
              Dann habe ich eine generelle Frage: Hast du / ihr dann den Homeserver ausschließlich auf einem 1024x768 Monitor laufen? Ich würde das gerne auf einem IPad mit 2048x1536 laufen lassen. Dann würde das Bild links oben sitzen, richtig?
              Laut Deiner Meldung ist Dir folgendes nicht bewußt:


              Ein iPad mit Retina-Auflösung ist auch nur mit der Auflösung 1024x768 Punkten programmierbar. Du positionierst also "normalerweise" auf einer 1024x768 Matrix. Wobei im Experten der Designschlüssel "GIRA1024V" gewählt werden muß.
              Die höhere Retina-Auflösung von 2048x1536 Pixel wird aber für Grafiken (z.B. png-Format) genutzt.

              Wenn Du eine png-Grafik mit 100x100 Bildpunkten hast und bei der VISU diese Grafik als Symbol übernimmst, mußt Du folgendes machen:
              - Häkchen entfernen bei: "Größe übernehmen"
              - Breite: "50" eintragen
              - Höhe: "50" eintragen

              Mit dieser Methode kriegst Du die Grafiken mit voller Retina-Auflösung dargestellt. Der Gira-Homeserver und der Browser (retinafähig) macht den Rest automatisch.
              xxAPI2 skaliert Dir das noch auf Geräte mit geringerer oder höherer Auflösung im 4:3 Format.
              Funktioniert natürlich auch auf allen Geräten ohne Retina-Auflösung, hier wird die Grafik auch auf Schirmen mit 1024x768 auf 50x50 runterskaliert. Auf Schirmen mit 512x384 auf 25x25 (als Beispiel).
              Übrigens wird die Schrift auf Retina-Geräten automatisch in der höheren Qualität dargestellt. Besonders kleine Schriften sind sensationell gut lesbar. Aus meiner Sicht kann man die höhere Auflösung auf Retina-Geräten mit der oben beschriebenen Methode voll nutzen.

              Hat den Vorteil, daß Du selbst entscheiden kannst wo Du Retina-Auflösung nutzen willst. Du kannst nach und nach, schrittweise umstellen.

              Hans
              Zuletzt geändert von TirochH; 10.04.2016, 18:08.
              Hans

              Kommentar


                #8
                Hallo Hans,

                besten Dank. Ich habe es hin bekommen :-) Sieht auch gut aus. Allerdings bekomme ich beim IPad nun die Adressleiste oben nicht weg und daher wird unten (die Menüpunkte) abgeschnitten. MIt welchem Browser stellt ihr auf dem IPad die Visu da, so dass sie in Vollbild dargestellt wird?

                Danke und Grüße
                Marc

                Kommentar


                  #9
                  Hallo Marc,

                  freut mich.

                  Ich verwende nur Safari. Alle anderen hatten irgendwann Kompatibilitätsprobleme.

                  Falls Du mit Adressleiste die obersten Block mit der Empfangsstärke (links), Zeit (mittig), Ladezustand (rechts) meinst, dann folgender Kommentar. Sonst sprechen wir von unterschiedlichen Sachen.

                  Das mit der Adressleiste oben ist auch gelöst. Es gibt 3 Informationsblöcke (links, mittig und rechts). Die bringst Du zwar nicht weg, aber ohne nicht verschoben.
                  Das heisst, die 3 Informationsblöcke werden dargestellt, bei mir "nicht" störend.
                  Habe ich (glaube zumindest) im DOKU-Thread dargestellt. Muss selbst erst wieder suchen.
                  Alternative DU verkürzt die VISU in der Höhe um 20 Bildpunkte. Wenn ich eine neue VISU machen würde, wäre das mein Ansatz.

                  Als alternativer Browser wäre u.U. iCabMobile (auf iPad) geeignet. Hier verschwinden die Informationsblöcke ganz.

                  Hier nur ein Beispiel, wenn Du die Start.html - ohne xxAPI2 (ist xxAPI) verwenden möchtest (eigner Thread). Ich verwende beide. Können gleichzeitig laufen. Z.b. um die noch nicht implementierten Zeitschaltuhren zu benutzen.
                  Code:
                  <!--
                   * proposal start.htm Gira-Homeserver
                   * (c) Dipl.-Ing. Hans Tiroch, Wien, Austria
                   * V 0.5, 2.11.2014
                   * primarely for mobile devices (IOS or Android)
                  -->
                  <html>
                    <head>
                      <!-- TITLE: Your app_ Title - set your individual title name - it's the icon name -->
                      <title>Haussteuerung</title>
                      
                      <!-- CSS: Path to your custom app_ styles -->
                      <link rel="stylesheet" type="text/css" href="css/start.css" >
                  
                      <!-- VIEWPORT: im Original von Gira falsch mit ";" statt "," -->
                      <meta id="id_viewport" name="viewport" content="width=1024" >
                      <script>
                        /*    
                         * VIEWPORT: iPad & iPhone mit initial-scale for fullscreen
                         * for standard designed resolution landscape 1024x768 (resX x resY)
                         */
                        var resW = 1024.0;
                        var resH = 768.0;
                        var ratio_on = true;  // true: volle Bildschirmhöhe; false: volle Bildschirmbreite
                        var ratio = resH / resW;
                        var ratio_faktor = 1.0;
                        // Store the meta element
                        var id_viewport = document.getElementById('id_viewport');
                        // Change the viewport value's based on screen.width
                        var set_viewport = function() {
                          var o_p = (window.innerHeight > window.innerWidth);
                          var w = (o_p) ? screen.width : screen.height;
                          var h = (o_p) ? screen.height : screen.width;
                          var ratio_faktor = (ratio_on) ? Math.min(( w >= h ) ? h / w / ratio : w / h / ratio, 1.0) : 1.0;  // landscape : portrait
                          var scaleW = Math.round(w / resW * 1000) * 0.001;
                          var scaleH = Math.round(h / resH * 1000) * 0.001;
                          var max_scale = Math.max(scaleW, scaleH);
                          var min_scale = Math.min(scaleW, scaleH);
                          id_viewport.setAttribute("content", "width=" + w);
                          id_viewport.setAttribute("content", "initial-scale=" + ( Math.round(scaleW * ratio_faktor * 1000) * 0.001));
                          id_viewport.setAttribute("content", "minimum-scale=" + ( Math.round(min_scale * ratio_faktor * 1000) * 0.001));
                          id_viewport.setAttribute("content", "maximum-scale=" + max_scale);
                          if (scaleW == 1.0 && scaleH == 1.0) {
                            id_viewport.setAttribute("content", "user-scalable=no");
                          } else {
                            id_viewport.setAttribute("content", "user-scalable=yes");
                          }
                        }
                        // Set the correct viewport value on page load
                        set_viewport();
                        // Set the correct viewport after device orientation change or resize
                        window.onresize = function() { set_viewport(); }  
                      </script>
                   
                      <!-- MOBILES-META: If content is set to yes, the web application runs in full-screen mode; otherwise, it does not.-->
                      <meta name="apple-mobile-web-app-capable" content="yes" >
                      <!-- If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.-->
                      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >
                      <!-- By default, Safari on IOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature. -->
                      <meta name="format-detection" content="telephone=no">
                  
                      <!-- ICONS, STARTUP image: samples are in the package (internet/intranet), no change of name (Andriod) -->
                      <link id="id_startup_icon_120" rel="apple-touch-icon" sizes="120x120" href="img/startup/gira-icon-precomposed-intern-120x120.png">
                      <link id="id_startup_icon_152" rel="apple-touch-icon" sizes="152x152" href="img/startup/gira-icon-precomposed-intern-152x152.png">
                      <link id="id_startup_icon_180" rel="apple-touch-icon" sizes="180x180" href="img/startup/gira-icon-precomposed-intern-180x180.png">
                      <!-- iPad Portrait—768x1024 -->
                      <link rel="apple-touch-startup-image" sizes="768x1024" href="img/startup/iPad-768x1024-portrait.png" >
                      <!-- iPad Landscape—1024x768 -->
                      <link rel="apple-touch-startup-image" sizes="1024x768" href="img/startup/iPad-1024x768-landscape.png">
                      <!-- 320x480 for iPhone 3GS, iPod touch -->
                      <link rel="apple-touch-startup-image" href="img/startup/iPhone-320x480-portrait.png">
                      
                      <script>
                        (function() {
                          /*
                           * APPLE-TOUCH-ICON: unterschiedliches Icon für intern (Intranet) und extern (Internet)
                           */
                          var id_startup_icon_120 = document.getElementById('id_startup_icon_120');
                          var id_startup_icon_152 = document.getElementById('id_startup_icon_152');
                          var id_startup_icon_180 = document.getElementById('id_startup_icon_180');
                          if ( window.location.port !== "" ) { // access external via internet (with port-number)
                            id_startup_icon_120.setAttribute( "href", "img/startup/gira-icon-precomposed-extern-120x120.png" );
                            id_startup_icon_152.setAttribute( "href", "img/startup/gira-icon-precomposed-extern-152x152.png" );
                            id_startup_icon_180.setAttribute( "href", "img/startup/gira-icon-precomposed-extern-180x180.png" );
                          } else {                             // access internal via intranet (within own local network)
                            id_startup_icon_120.setAttribute( "href", "img/startup/gira-icon-precomposed-intern-120x120.png" );
                            id_startup_icon_152.setAttribute( "href", "img/startup/gira-icon-precomposed-intern-152x152.png" );
                            id_startup_icon_180.setAttribute( "href", "img/startup/gira-icon-precomposed-intern-180x180.png" );
                          }
                        }(document));
                      </script>
                    
                      <!-- StationClock - first before LIBs & Custom LIBs -->
                      <!-- Path to IE extension station-clock Library JS -->
                      <!--[if IE]
                        <script type="text/javascript" src="js/bahnhofsuhr/excanvas.js"></script>
                      <![endif]-->
                      <!-- Path to StationClock Library JS -->
                      <script type="text/javascript" src="js/bahnhofsuhr/station-clock.js"></script>
                      <script>
                        /*
                         *    StationClock Parameter & Start Logic
                         *    see: http://3quarks.com/de/Bahnhofsuhr/
                         */
                        // START StationClock parameter - can be configured
                        var clock = new StationClock( "id_BahnhofsUhr" );
                        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;
                        // START StationClock logic
                        var BahnhofsUhr = "ein"; // AUS = "aus", EIN = "ein"
                        if ( BahnhofsUhr == "ein" ) {
                          animate();
                        } // END if
                        function animate() {
                          clock.draw();
                          window.setTimeout( "animate()", 50 );
                        }
                      </script>        
                  
                      <!-- CUSTOM LIB: ajax GIRA Homeserver with xxAPI -->
                      <!-- webkitUserselect = "none" in ajax.js added (behind: mozUserselect) -->
                      <script type="text/javascript" src="js/ajax.js"> </script>
                  
                      <!-- Magnify Glass (Lupe) disable -->
                      <script>
                        window.ontouchmove = function (e) { e.preventDefault(); }
                      </script>
                  
                    </head>
                  
                    <!-- ------------------------- -->        
                   
                    <body>
                  
                      <!-- Gira: Visu -->
                      <div id="xbase" style="position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:hidden; border:0px;"> </div>
                                                                                
                      <!-- Gira: Markierung -->
                      <div id="xmark" style="position:absolute; top:0px; left:0px; visibility:hidden;">
                        <img id="xmarkimg" src="img/hide.png" style="position:absolute; top:0px; left:0px;">
                      </div>
                  
                      <!-- Gira: Reconnect -->
                      <div id="xreconnect"      style="position:absolute; top:  0px; left:  0px; width:240px; height:200px; background-color:#404040; text-align:center; overflow:hidden; visibility:hidden;">
                        <div                    style="position:absolute; top:323px; left:371px; width:282px; height:132px; background-color:white;">
                           <div                 style="position:absolute; top:  1px; left:  1px; width:280px; height:130px; background-color:#ff8080;">
                            <div                style="position:absolute; top: 15px; left:  1px; width:278px; padding:0;    background-color:#ff8080; text-align:center; font-family:arial; color:black;">
                              <span             style="font-size:14pt; font-weight:bold;  ">Haussteuerung</span>
                              <br/><br/>
                              <span             style="font-size:10pt; font-weight:normal;">Stelle Verbindung wieder her...</span>
                              <br/><br/>
                              <span id="tryCnt" style="font-size:18pt;                    ">**********</span>
                              <!-- <span id="tryState">&nbsp;</span> -->
                            </div>
                          </div>
                        </div>
                      </div>
                  
                      <!-- StationClock: START: changes in position & size possible; if retina display: width="width*2" & height="height*2" (within style attribute: use normal width & height) -->
                      <div>
                        <canvas id="id_BahnhofsUhr" width="146px" height="146px" style="position:absolute; top:696px; left:953px; width:73px; height:73px; overflow:hidden; border:0px;">
                        </canvas>
                      </div>
                  
                      <!-- Path to your application javascript-->
                      <script>  
                        // Pre-Setting Parameter
                        if (loginData.m_user.length == 0) loginData.m_user = "";
                        if (loginData.m_pw.length   == 0) loginData.m_pw   = "";
                        if (loginData.m_cl.length   == 0) loginData.m_cl   = "GIRA1024v";
                        if (loginData.m_ref.length  == 0) loginData.m_ref  = "R1";
                        // STARTing Gira's AJAX Client / xxAPI
                        if((document.cookie.indexOf("login=") >-1) && (document.cookie.indexOf(escape("||||")) < 0)) {
                          startClient(1);
                        } else {
                          startClient(0);
                        } // STARTed Gira's AJAX Client / xxAPI  
                      </script>
                    </body>
                  </html>
                  Beiliegend ein Bildschirmphoto: IMG_1666.PNG
                  Angehängte Dateien
                  Zuletzt geändert von TirochH; 12.04.2016, 10:16.
                  Hans

                  Kommentar

                  Lädt...
                  X