Ankündigung

**NilsS** · 05.04.2016, 09:01

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)

**marcjoerg** · 05.04.2016, 10:11

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

**NilsS** · 05.04.2016, 11:04

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.

**marcjoerg** · 05.04.2016, 11:10

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?

**marcjoerg** · 05.04.2016, 11:23

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

**TirochH** · 10.04.2016, 17:59

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

**marcjoerg** · 10.04.2016, 19:07

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

**TirochH** · 12.04.2016, 09:41

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

IMG_1666.PNG (68,7 KB, 28x aufgerufen)

Ankündigung

Als Vollbild darstellen

Als Vollbild darstellen

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar