GD Library to JSON

[erdem]

Hi everyone.

 

There are two nice script which are advanced for me to understand. There is a  Knockout tournament scheduler class that makes image of the bracket. and there is a code that makes html of the bracket with jquery. I want to use the class with jquery. but I don't know how to do that and where to start. the class below needs to implement to this http://whileonefork.blogspot.com/2010/10/jquery-json-to-draw-elimination-single.html

 

I attached the php script. please help me!

 

<?php

class KnockoutGD extends Knockout {

    private $im = null; // GD-lib image resource.
    private $tc = 0;    // Text color.

    public function getImage($tourName = '')
    {
        /* Returns a GD-lib image resource */

        // Initial testing.
        if (empty($this->roundsInfo))
            return null;

        // Dimensional parameters.
        $fh   = imagefontheight(FONT);
        $fw   = imagefontwidth(FONT);
        $lpad = 30; // Line (branch) padding before and after competitor names and after scores.
        $hpad = 20; // Outer horizontal image padding.
        $vpad = 60; // Outer vertical image padding.
        $lw   = $this->getStrLen()*$fw + 3*$lpad; // Line (branch) width. Where getStrLen() gets the length of the longest string used in the image.

        // Initial calls.
        $dimensions = $this->getDimens($fh, $lw, $hpad, $vpad);
        $this->im   = imagecreate($dimensions['x'], $dimensions['y']);
        $bg         = imagecolorallocate($this->im, 255, 255, 255); // Set background color.
        $this->tc   = imagecolorallocate($this->im, 0, 0, 0); // Text color.
        $this->mkStr($dimensions['x'] - $hpad - imagefontwidth(LFONT)*strlen($tourName), $dimensions['y'] - $vpad/2, $tourName, LFONT); // Print tournament name.

        // Initial positioning values from which drawing begins.
        $rx = $hpad; // Round X-position.
        $ry = $vpad; // Round Y-position.
        $depth = 1; // Branch depth.

        // Start drawing the tournament bracket/tree.
        foreach ($this->roundsInfo as $r => $info) {

            $n = $info[1]; // Number of expected players in round $r.

            // If a match is no yet created, then a placeholder is made so that the bracket structure is still printable.
            for ($m = 0; $m <= $n/2 - 1; $m++) {
                if (!$this->isMatchCreated($m, $r)) {
                    $this->bracket[$r][$m]['c1'] = $this->bracket[$r][$m]['c2'] = null;
                    $this->bracket[$r][$m]['s1'] = $this->bracket[$r][$m]['s2'] = -1;
                }
            }

            // Now we generate round branches.
            $x = $rx;
            $y = $ry;
            $bheight = pow(2, $depth) * $fh; // This is the height of a match-branch, which increases as the tree depth increases.
            ksort($this->bracket[$r]);
            
            foreach ($this->bracket[$r] as $m) {
                for ($i = 1; $i <= 2; $i++, $y += $bheight) {
                    $this->mkStr($x+$lpad,     $y, $m['s'.$i] == -1 ? 'Undecided' : $m['c'.$i]);
                    $this->mkStr($x+$lw-$lpad, $y, $m['s'.$i] == -1 ? '?'         : $m['s'.$i]);
                    $this->mkLine($x, $y+$fh, $x+$lw, $y+$fh);
                }
                $this->mkLine($x+$lw, ($y+$fh)-$bheight, $x+$lw, ($y+$fh)-2*$bheight);
            }
            
            // Get ready for next loop.
            $rx += $lw;
            $ry += $bheight/2;
            $depth++;
        }

        // Add final branch/line for the tournament winner
        $fr = end(array_keys($this->roundsInfo)); // Final round.
        $s1 = $this->bracket[$fr][0]['s1'];
        $s2 = $this->bracket[$fr][0]['s2'];
        $winner = (!array_key_exists(0, $this->bracket[$fr]) || $s1 == -1 || $s2 == -1 || $s1 === $s2) 
                    ? '?' 
                    : (($s1 > $s2) 
                        ? $this->bracket[$fr][0]['c1'] 
                        : $this->bracket[$fr][0]['c2']);
                        
        $this->mkStr($rx+$lpad, $ry, 'Winner: ' . $winner);
        $this->mkLine($rx, $ry+$fh, $rx+$lw, $ry+$fh);

        // Now, we print the round titles.
        array_push($this->roundsInfo, array('Champion', 1)); // Add fictitious round for printing purposes only.
        foreach (array_reverse($this->roundsInfo) as $r) {
            $this->mkStr($rx+$lpad, $vpad/3, $r[0], LFONT);
            $rx -= $lw; // Move back one round/column.
        }
        array_pop($this->roundsInfo); // Remove fictitious round entry again.
        
        return $this->im;
    }

    private function mkLine($x0, $y0, $x, $y) 
    {
        /* Wrapper for function that creates a line. */
        
        imageline($this->im, $x0, $y0, $x, $y, $this->tc);
    }

    private function mkStr($x, $y, $str, $font = false) 
    {
        /* Wrapper for function that writes a string. */
        
        imagestring($this->im, $font ? $font : FONT, $x, $y, $str, $this->tc);
    }

    private function getDimens($fontHeight, $lineWidth, $horizPad, $vertPad) 
    {
        /* Returns image dimensions based on the tournament bracket. */

        /*
            Vertically:
        
                Each match-branch is outputted like this:
                
                Team A
                -----------
                Padding
                Team B
                -----------
                Padding
                
                ... where "Padding" and "Team X" are of height $fontHeight, and "------" are branch lines with approximately no height.
            
            Horizontally:
            
                Each branch is outputted like this:
                
                ----- Team A ------
                                  |
                                  ----- Team C ------
                                  |
                ----- Team B ------
                
                ... where "Team X" branch has an absolute length of $lineWidth. The above therefore illustrates a length of 2*$lineWidth.

            The image length, $x, must be:
            
                $horizPad + number_of_rounds * $lineWidth + $horizPad
            
            And the image height, $y, must be:
            
                $vertPad + number_of_matches_in_first_round * 4*$fontHeight + $vertPad
            
            ... since the first round contains the most matches.
        */

        $frGames = count($this->bracket[1]); // Number of games in the first round.
        $playInExists = !empty($this->bracket[0]) ? true : false;
        
        /* 
            The y-size of the image must be calculated accordingly to the above description.
            Though, if a play-in round exists, then the play-in round is potentially the round which requires the most vertical space to draw.
            In this case we scale the image as if the play-in round was the first round.
            Due to the nature of the tournament bracket, this means that there are twice as many games in that round.
        */
        
        $y = 2*$vertPad  + ($playInExists ? $frGames*2 : $frGames) * 4*$fontHeight;
        
        /* 
            The x-size of the image is proportional to the number of rounds in the tournament,
                where the proportionality constant is the length of a branch, $lineWidth, ie. the width of a round.
            Since the number of players in the first round is equal to 2^R, where R is a whole number, and denotes the number of rounds required in the tournament,
                then R = log(players, 2), where "players" also can be found by 2 * matches_in_first_round (2 players pr. match).
    
            Like above, if a play-in round exists the x-size of the image must be changed.
            In this case, we merely add the length of a branch to the total x-size, since all branches are equal in length.
            
            Besides that, we add another whole branch length for the Winner/Champion branch, 
                which technically is not a part of the tournament bracket, but is shown anyway.
        */
        
        $x = 2*$horizPad + (log($frGames*2, 2) + ($playInExists ? 1 : 0) + 1) * $lineWidth;
        
        return array('x' => $x, 'y' => $y);
    }

    private function getStrLen() 
    {
        /* 
            Returns the length of longest string used in either rounds. 
            This is done by looking in both play-in round and first round, since all competitors are to be found there.
        */
        
        $len = 0;
        
        foreach (array_merge(array_key_exists(0, $this->bracket) ? $this->bracket[0] : array(), $this->bracket[1]) as $m) {
            if (($newlen = strlen($m['c1'])) > $len) $len = $newlen;
            if (($newlen = strlen($m['c2'])) > $len) $len = $newlen;
        }
        
        foreach ($this->roundsInfo as $arr) {
            if (($newlen = strlen($arr[0])) > $len) $len = $newlen;
        }

        return $len;
    }
}

?>

17358_.php

17359_.php

[blacknight]

from whay i can tell you just need to pull the info from your database into an array and then encode it to json then pass it to the jquery script on page render then it should work..