Kleine Rechenaufgabe bzgl. Pixel / Pixeldichte

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Kleine Rechenaufgabe bzgl. Pixel / Pixeldichte

    Hey Leute,

    also Folgendes:

    Ich habe damals fürs iPad Air eine App gemacht. (nur für dieses Modell, war für eine Messe). Die App zeigt ein Bild mit Punkten drauf.

    Wo diese Punkte stehen sollen hole ich mir aus einer XML Datei. Dort steht zB 530;120 also x;y

    Diese Position gilt natürlich dann nur für das iPad Air.

    Nun kam der Kunde Wochen später "Wow die App gefällt uns super gut, wir möchten sie im Store für alle Geräte".
    Okay, dann musste ich jetzt also jetzt mit den Positionen für das iPad Air rumrechnen damit das für alle geht.

    Das ging ja relativ einfach, hier der Schnipsel ohne viel blabla. splittedPos ist eben 530;120 bei ";" getrennt.

    Quellcode

    1. CGFloat multiplierX = [[[UIApplication sharedApplication] delegate] window].frame.size.width / 1024;
    2. CGFloat multiplierY = [[[UIApplication sharedApplication] delegate] window].frame.size.height / 768;
    3. if(splittedPos.count > 1)
    4. {
    5. point = CGPointMake(((NSString *) splittedPos[0]).doubleValue * multiplierX, ((NSString *) splittedPos[1]).doubleValue * multiplierY);
    6. }
    Klappt alles wunderbar. Das Bild wird auf die jeweilige Screengröße angepasst und die Punkte haben ebenfalls die richtige Position auf allen Geräten.

    OK, jetzt sind wir hier und ich mache diese App gerade für Android bzw. benutze nun Ionic mit AngularJS um das eben mit HTML etc. zu machen. (Ist für diese Art App gar nicht so blöd, war ich früher immer dagegen).

    Jetzt habe ich wieder das selbe Problem nur das jetzt eben noch die Pixel ratio dazu kommt, wenn ich das richtig kapiert habe. NIcht alle Android geräte etc. haben die gleiche Pixeldichte.
    zusätzlich setze ich ja jetzt die Position per top/left in css. (px/pt?)

    Wie komme ich denn jetzt auf die richtigen Positionen für alle Screengrößen / Pixeldichten eben mit der Angabe vom iPad Air und Retina Display?

    Ich hoffe das war verständlich erklärt.

    Danke!
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de
  • Im Prinzip musst du doch jeweils nur die X-Position durch die ursprüngliche Breite teilen und mit der Breite des Gerätes multiplizieren (Dreisatz). Y-Koordinate analog. Wenn du in Pixeln rechnest, sollte das auch unter Android so funktionieren.

    BTW: Wenn du die Koordinaten relativ als Werte zwischen 0 und 1 ablegst, brauchst du auf allen Geräten einfach nur mit der Breite bzw. Höhe multiplizieren.
    „Meine Komplikation hatte eine Komplikation.“
  • macmoonshine schrieb:

    Im Prinzip musst du doch jeweils nur die X-Position durch die ursprüngliche Breite teilen und mit der Breite des Gerätes multiplizieren (Dreisatz). Y-Koordinate analog. Wenn du in Pixeln rechnest, sollte das auch unter Android so funktionieren.

    BTW: Wenn du die Koordinaten relativ als Werte zwischen 0 und 1 ablegst, brauchst du auf allen Geräten einfach nur mit der Breite bzw. Höhe multiplizieren.
    Hm also ich habs bis jetzt so und das ist falsch:

    JavaScript-Quellcode

    1. var multiplierX = parseFloat($window.innerWidth) / 1024;
    2. var multiplierY = parseFloat($window.innerHeight) / 768;
    3. var htmlstring = "";
    4. for(var i = 0; i < currentScene.hotpoints.hotpoint.length; i++)
    5. {
    6. var hotpoint = currentScene.hotpoints.hotpoint[i];
    7. var pos = hotpoint.pos.split(";");
    8. var x = parseFloat(pos[0]) * multiplierX;
    9. var y = parseFloat(pos[1] / 2.0) * multiplierY;
    10. htmlstring += '<a class="hotpoint animated infinite" style="top: ' + parseInt(x) + 'px; left: ' + parseInt(y) + 'px;">'+hotpoint.sceneID+'</a>';
    11. }
    12. $scope.name = htmlstring;
    Alles anzeigen
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de
  • Bin jetzt nicht der Android Freak aber kann es sein, dass das pixelratio so in der Art 3:4 oder sowas ist? Weil das bedeutet dann, dass ein Pixel nicht quadratisch ist, sondern eben eine kantenlänge von 3 zu 4 hat.

    Gruß

    Claus
    2 Stunden Try & Error erspart 10 Minuten Handbuchlesen.

    Pre-Kaffee-Posts sind mit Vorsicht zu geniessen :)
  • Ich habe euch hier mal ein Bild wie es momentan aussieht, wenn man den Code von oben nimmt:

    [Blockierte Grafik: https://abload.de/img/bildschirmfoto2016-06hdkfs.png]

    Die "2" muss in der Mitte des Stadions liegen. Ich erkenne da momentan keinen Zusammenhang.

    Wohl gemerkt ist dies nun eh im iOS Simulator. Kann ja für beides kompilieren. Bei Android sieht es aber genau gleich aus.


    Ich teile ja oben durch die Breite und Höhe des iPad Airs (1024, 768), ich kann mich aber nicht mehr erinnert warum ich diese Größe hatte und nicht 2048, 1536.

    Debugger ist mit IONIC irgendwie schwer bzw. nicht machbar? Habe mich da noch nicht reingelesen. Ich kann das Projekt auch im Browser ausführen, dann habe ich die Console zur Verfügung, aber dort funktioniert (bis jetzt) der REST Aufruf nicht, da CORS da rummuckt wenn es localhost ist. Schon stundenlang gegoogelt, aber keine brauchbare Lösung gefunden.

    Also wer den Zusammenhang zwischen der Position der 2 und der eigentlichen Position auf dem Stadion erkennt, der bekommt ein dickes Danke :)

    Edit: Wohlgemerkt stimmt aber der Wert von "multiplierX" und "multiplierY" mit dem der iOS App überein. Das wundert mich ein wenig.

    Gruß
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de
  • Das ist nicht Android! Also kein Java. Das ist das IONIC Framework mit dem man mittels HTML 5 AngularJS Apps eben für beide Plattformen entwickeln kann.

    Deswegen ist das alles HTML bzw. JS Code.

    Die Screen Size bekomme ich durch: $window.innerWidth und $window.innerHeight

    Und mit Top and Left entspräche es ja dem Koordinatensystem in ObjC und UIKit
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de
  • Fortrackz schrieb:

    Debugger ist mit IONIC irgendwie schwer bzw. nicht machbar? Habe mich da noch nicht reingelesen. Ich kann das Projekt auch im Browser ausführen, dann habe ich die Console zur Verfügung, aber dort funktioniert (bis jetzt) der REST Aufruf nicht, da CORS da rummuckt wenn es localhost ist. Schon stundenlang gegoogelt, aber keine brauchbare Lösung gefunden.
    Safari kann über das Entwicklermenü auch beliebige Webseiten (sowohl UIWebView und WKWebView als auch Safari) im Simulator und auf einem iOS-Device debuggen. Mit Chrome und Android-Geräten geht das analog. Ich meine, es geht auch im Android-Emulator.
    „Meine Komplikation hatte eine Komplikation.“
  • macmoonshine schrieb:

    Fortrackz schrieb:

    Debugger ist mit IONIC irgendwie schwer bzw. nicht machbar? Habe mich da noch nicht reingelesen. Ich kann das Projekt auch im Browser ausführen, dann habe ich die Console zur Verfügung, aber dort funktioniert (bis jetzt) der REST Aufruf nicht, da CORS da rummuckt wenn es localhost ist. Schon stundenlang gegoogelt, aber keine brauchbare Lösung gefunden.
    Safari kann über das Entwicklermenü auch beliebige Webseiten (sowohl UIWebView und WKWebView als auch Safari) im Simulator und auf einem iOS-Device debuggen. Mit Chrome und Android-Geräten geht das analog. Ich meine, es geht auch im Android-Emulator.
    Das wusste ich nicht! Sehr cool!
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de
  • macmoonshine schrieb:

    Fortrackz schrieb:

    Die Screen Size bekomme ich durch: $window.innerWidth und $window.innerHeight
    Damit holst du dir die Größe des sichtbaren Bereichs des Fensters. Du brauchst aber die des gesamten Bildes bzw. Dokuments.

    Das ist doch im Prinzip das selbe wenn nicht gescrollt wird?
    Ich checke das nochmal.

    Aber wie gesagt der "multiplierX" wert ist der selbe wie aufm phone.

    Auch die Koordinaten sind die selben. Aufm phone ists auch für "2" 345;126.

    Hat es doch was mit top / left zu tun?...
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Fortrackz ()

  • macmoonshine schrieb:

    Fortrackz schrieb:

    DAS HAT MICH 2H meines Lebens gekostet.............
    Nur? Du Glücklicher! Dann hast du wohl noch nie für Android entwickelt. ;) +scnr+
    Oh doch :D

    Ich finde aber ehrlich gesagt einige Pattern gar nicht so verkehrt. Gerade die ListView gefällt mir sehr gut.

    Nur das ständige Updaten der IDE und irgendwelchen Plugins oder sonst was, ist sehr nervig. Bis ich Android Studio richtig zum Laufen gebracht habe sind auch viele Minuten drauf gegangen.

    Habe bis jetzt 2 Android Apps gemacht. War immer das Gegenstück dann zur iOS Version. Also erst iOS verkauft und hinterher dann noch Android.
    Waren zum Glück meist nur unspektakuläre Dinge und nichts anspruchsvolles.

    Trotzdem würde ich gern bei iOS und ObjC (<3) bleiben. Oder ganz in den Web - Bereich wechseln...
    Every language has an optimization operator. In ObjC that operator is ‘//’.

    golbros.de