Ergebnis 1 bis 6 von 6

Thema: Karte optimieren (Ladenzeit)

  1. #1
    Großmeister(in) Avatar von MyXoToD
    Registriert seit
    07.11.2007
    Ort
    Mainz
    Alter
    24
    Beiträge
    507
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard Karte optimieren (Ladenzeit)

    Ich habe mal Testweise eine Art Karte mit PHP programmiert. Es ist eine simple viereckige Karte, ein "User" bekommt eine x und eine y Koordinate und besetzt einen Platz. Anschauen kann man sich das ganze hier: http://baukasten.myxotod.de/test/

    An sich klappt alles, so wie ich mir das vorgestellt habe. Über das Formular kann man zu einer bestimmten Koordinate springen (diese wird dann in der Mitte der Karte angezeigt). Links kann man sich durch die Karte navigieren.
    Auf der Minimap sieht man wo man sich gerade gefindet und unten sieht man den Ausschnitt wo man gerade ist. Rote Felder bedeutet, dass dieses Feld bereits besetzt ist.

    Mein Problem hier ist nur die Ladezeit. Bei einer Kartegröße bis ca. 100 x 100 Kästchen geht es noch. Danach brauch der Browser ewig zum Laden und stürzt teilweise sogar ab. Grund ist vermutlich die Minimap, weil die Schleifen dort einfach zu oft durchlaufen :/ Ich wollte einfach mal hier nachfragen, ob jemand eine Idee zum optimieren hat. Hier ist der Quellcode:

    PHP-Code:
    <?php
    $start 
    time()+(double)microtime(); 

    // Koordinaten der einzelnen User
    $users[1]['x'] = 1;
    $users[1]['y'] = 2;

    $users[2]['x'] = 5;
    $users[2]['y'] = 5;

    $users[3]['x'] = 8;
    $users[3]['y'] = 6;

    $users[4]['x'] = 9;
    $users[4]['y'] = 10;

    $users[5]['x'] = 44;
    $users[5]['y'] = 39;

    $users[6]['x'] = 25;
    $users[6]['y'] = 25;


    $anzeige['width'] = 9// Breite der Anzeigefläche
    $anzeige['height'] = 9// Höhe der Anzeigefläche
    $offset['width'] = round($anzeige['width'] / 2); // Berechnet den Abstand nach links
    $offset['height'] = round($anzeige['height'] / 2); // Berechnet den Abstand nach oben

    $map['width'] = 50// Die Gesamtgröße (Breite) der Karte
    $map['height'] = 50// Die Gesamtgröße (Höhe) der Karte

    if (isset($_GET['y']) && !empty($_GET['y'])) {
        
    $y_coord $_GET['y'] - $offset['height'];
    } else {
        
    $y_coord 0;
    }
    if (isset(
    $_GET['x']) && !empty($_GET['x'])) {
        
    $x_coord $_GET['x'] - $offset['width'];
    } else {
        
    $x_coord 0;
    }

    if (
    $y_coord 0) {
        
    $y_coord 0;
    } else if (
    $y_coord > ($map['height'] - $anzeige['height'])) {
        
    $y_coord $map['height'] - $anzeige['height'];
    }
    if (
    $x_coord 0) {
        
    $x_coord 0;
    } else if (
    $x_coord > ($map['width'] - $anzeige['width'])) {
        
    $x_coord $map['width'] - $anzeige['width'];
    }
    echo 
    "<div style='float: left; width: 270px;'>";
    echo 
    "<p><strong>Mapgröße: ".$map['width']."x".$map['height']." Felder</strong></p>";
    echo 
    "<form action='' method='get'>";
    echo 
    "X-Koordinate: <input type='text' name='x' /><br />";
    echo 
    "Y-Koordinate: <input type='text' name='y' /><br />";
    echo 
    "<input type='submit' name='submit' value='show' />";
    echo 
    "</form>";
    echo 
    "<a href='?x=".($x_coord $offset['width'])."&amp;y=".(($y_coord $offset['height']) - 1)."'>Nach oben</a><br />";
    echo 
    "<a href='?x=".($x_coord $offset['width'])."&amp;y=".(($y_coord $offset['height']) + 1)."'>Nach unten</a><br />";
    echo 
    "<a href='?x=".(($x_coord $offset['width']) - 1)."&amp;y=".($y_coord $offset['height'])."'>Nach links</a><br />";
    echo 
    "<a href='?x=".(($x_coord $offset['width']) + 1)."&amp;y=".($y_coord $offset['height'])."'>Nach rechts</a><br />";
    echo 
    "</div>";
    echo 
    "<div style='float: left; width: 800px; padding-top: 25px; padding-left: 25px;'>";
    echo 
    "<strong>Minimap:</strong>";
    echo 
    "<table cellspacing='1px' cellpadding='0px'>";
    for (
    $y=0;$y<=$map['height'];$y++) {
        echo 
    "<tr>";
        for (
    $x=0;$x<=$map['width'];$x++) {
            
    $taken false;
            foreach (
    $users As $user) {
                if (
    $user['x'] == $x && $user['y'] == $y) {
                    echo 
    "<td style='width: 2px; height: 2px; background-color: #ff0000;'>";
                    echo 
    "";
                    echo 
    "</td>";
                    
    $taken true;
                    break;
                }
            }
            if (
    $taken == false) {
                if ((
    $x $x_coord && $x <= ($x_coord $anzeige['width'])) && ($y $y_coord && $y <= ($y_coord $anzeige['height']))) {
                    echo 
    "<td style='width: 2px; height: 2px; background-color: #999999;'>";
                } else {
                    echo 
    "<td style='width: 2px; height: 2px; background-color: #dedede;'>";
                }
                echo 
    "";
                echo 
    "</td>";
            }
        }
        echo 
    "</tr>";
    }
    echo 
    "</table>";
    echo 
    "</div>";
    echo 
    "<br style='clear: both;' />";
    echo 
    "<table>";
    for (
    $y=$y_coord;$y<=($y_coord $anzeige['width']);$y++) {
        echo 
    "<tr>";
        for (
    $x=$x_coord;$x<=($x_coord $anzeige['width']);$x++) {
            if (
    $y == $y_coord) {
                if (
    $x == $x_coord && $y == $y_coord) {
                    echo 
    "<th style='width: 50px; height: 50px;'></th>";
                } else {
                    echo 
    "<th style='width: 50px; height: 50px;'>".$x."</th>";
                }
            } else if (
    $x == $x_coord) {
                echo 
    "<th style='height: 50px; width: 50px;'>".$y."</th>";
            } else {
                
    $taken false;
                foreach (
    $users As $user) {
                    if (
    $user['x'] == $x && $user['y'] == $y) {
                        echo 
    "<td style='width: 50px; height: 50px; background-color: #ff0000;'>";
                        echo 
    "";
                        echo 
    "</td>";
                        
    $taken true;
                        break;
                    }
                }
                if (
    $taken == false) {
                    echo 
    "<td style='width: 50px; height: 50px; background-color: #447744;'>";
                    echo 
    "";
                    echo 
    "</td>";
                }
            }
        }
        echo 
    "</tr>";
    }
    echo 
    "</table>";

    $ende time()+(double)microtime();
    $diff round($ende-$start,6);
    echo 
    "<p>Skript wurde ausgeführt in ".$diff." Sekunden</p>";
    ?>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Don't follow me, I run into walls.

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Karte optimieren (Ladenzeit)

    Du suchst an der falschen Stelle nach dem Problem.

    50x50 Karte ergibt bei dir 187329 Zeichen
    100x100 ergibt schon 712181
    Also nach dem Ansatz, den du hier gepostet hast. Auf der 'live' Version bestimmt noch weitaus mehr durch die Links.

    Merkst was?

    Aber auch bei der Herangehensweise: eine Klasse statt jedesmal einer Styleangabe würde die Datenmenge schonmal etwas reduzieren (oder vllt. auch eine bedingte CSS Anweisung à la .class td *mhh* noch weniger unnötigen mist)

    //P.S. so zum Vergleich, jQuery minified hat ohne das Kommentar derzeit 84893 Zeichen. Das sind 29kb - und du hast ein gebilde das auch noch gerendert werden muss.

    Noch ein Tipp: man kann mit JS die Mauskoordinaten auslesen, bin jetzt nicht sicher ob es relativ zu einem Container geht - aber die Karte dann mit einem Script zu verwenden würde dir seeeehr viel sparen (im Zweifel kann man die relativen Koordinaten auch selbst berechnen). Dafür könntest du einmal eine kleine gif für die grauen Kästchen machen und für die 'besetzten' eine Grafik dynamisch generieren und die da drüber legen. Tada - Karte die bis in die 1000x1000 gehen kann (auch wenn vllt. 250x250 schon ausreichen sollte, eine 1000x1000 Grafik hat auch schon 'paar' KB und generieren dürfte auch etwas dauern - aber da kann man wieder etwas cachen...).
    Geändert von Grevas (09.03.2011 um 22:41 Uhr)

  3. #3
    Großmeister(in)
    Themenstarter
    Avatar von MyXoToD
    Registriert seit
    07.11.2007
    Ort
    Mainz
    Alter
    24
    Beiträge
    507
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Karte optimieren (Ladenzeit)

    Oh, das leuchtet natürlich ein. Ich versteh nur nicht, wieso ich irgendwelche Koordinaten mit Javascript auslesen soll? Wo denn?

    EDIT//
    Wäre es vielleicht besser, wenn ich die Minimap bzw. Übersichtskarte als Bild erstelle mit PHP? Das müsste doch umsetzbar sein oder?
    Geändert von MyXoToD (10.03.2011 um 14:49 Uhr)
    Don't follow me, I run into walls.

  4. #4
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Karte optimieren (Ladenzeit)

    Das hab ich geschrieben, ja, nagut, fast...
    Ich dachte eher, dass nur die besetzten Felder als Grafik generiert werden - spart unnötige Durchläufe.

    Du brauchst JavaScript um die Bereiche anklickbar zu machen.

    Beim clickevent die Mauskoordinaten relativ zur Karte holen / berechnen und schon hast du deine Koordinaten.
    Geändert von Grevas (10.03.2011 um 19:15 Uhr)

  5. #5
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Karte optimieren (Ladenzeit)

    habs selber nur überflogen, aber eine javascript lösung wäre hiermit wohl gut umsetzbar:
    http://mbostock.github.com/d3/

  6. #6
    Großmeister(in)
    Themenstarter
    Avatar von MyXoToD
    Registriert seit
    07.11.2007
    Ort
    Mainz
    Alter
    24
    Beiträge
    507
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Karte optimieren (Ladenzeit)

    Es ist nicht zwingend notwendig, dass die Übersichtskarte anklickbar ist. Das Bild der Karte bekomm ich hin allerdinsg nicht so wie ich es mir gewünscht habe. Erster Test wieder hier: http://baukasten.myxotod.de/test/

    Der Quellcode davon:
    PHP-Code:
    Header("Content-Type: image/png");
    $width = (($map['width'] - 2) + ($map['width'] * 3));
    $height = (($map['height'] - 2) + ($map['height'] * 3));
    $img ImageCreate($width$height);
    $lightgrey ImageColorAllocate($img222222222);
    $darkgrey ImageColorAllocate($img153153153);
    $red ImageColorAllocate($img25500);
    $white ImageColorAllocate($img255255255);
    ImageFill($img00$white);
    $size 3;
    for (
    $y=0;$y<$height;$y++) {
        
    $breite 0;
        for (
    $x=0;$x<$width;$x++) {
            
    $taken false;
            foreach (
    $users As $user) {
                if ((
    $user['x'] - 1) == $x && ($user['y'] - 1) == $y) {
                    
    ImageFilledRectangle($img$x$y$x $size$y $size$red);
                    
    $taken true;
                    break;
                }
            }
            if (
    $taken == false) {
                 if ((
    $x > ($x_coord 1) && $x <= (($x_coord 1)  + $anzeige['width'])) && ($y > ($y_coord 1) && $y  <= (($y_coord 1) + $anzeige['height']))) {
                    
    ImageFilledRectangle($img$x$y$x $size$y $size$darkgrey);
                } else {
                    
    ImageFilledRectangle($img$x$y$x $size$y $size$lightgrey);
                }
            }
        }
    }
    ImagePNG($img);
    ImageDestroy($img); 
    Mein Problem, ich möchte 3x3 Pixel je Feld und jeweils 1 Pixel weißen Zwischenraum zwischen den ganzen Kästchen. In meinem Script brauch ich ja ro Koordinate aber den 1er Schrit. Das ist der Grund, warum die 3er Kästchen dann wieder "übermalt" werden und aus den 3er Kästchen ein 1er Kästchen wird... Ich hoffe jemand versteht was ich meine

    Wie kann ich also eine Karte hinbekommen, auf der jede Koordinate 3x3 Pixel groß ist?
    Don't follow me, I run into walls.

Ähnliche Themen

  1. wie Suchen optimieren?
    Von klari im Forum Promotion - SEO - Suchmaschine (Google & Co) – Mitarbeiter & Linkpartnersuche
    Antworten: 10
    Letzter Beitrag: 29.03.2010, 19:38
  2. Ladezeit optimieren
    Von xxxarndxxx im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 15.05.2007, 15:49
  3. Layout optimieren
    Von Sebi17 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 04.11.2006, 21:47
  4. Webseite optimieren
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 03.09.2005, 14:22
  5. Browserfenster optimieren
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.01.2005, 23:30

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •