From 57614902eb7e7db60025a196ca79fa4170e22141 Mon Sep 17 00:00:00 2001 From: Martynas Mickevicius Date: Thu, 29 Jul 2010 19:06:11 +0300 Subject: [PATCH] image map enchancements. --- js/pMap.js | 34 +++++----- libraries/chart/pChart/pChart.class | 96 ++++++++++++++++++++++------ libraries/chart/pma_pchart_chart.php | 4 +- 3 files changed, 97 insertions(+), 37 deletions(-) diff --git a/js/pMap.js b/js/pMap.js index 7b8a6ea77..fc3f73849 100644 --- a/js/pMap.js +++ b/js/pMap.js @@ -24,8 +24,8 @@ var imageMap = { 'mouseMoved': function(event, cont) { // get mouse coordinated relative to image - mouseX = event.pageX - cont.offsetLeft; - mouseY = event.pageY - cont.offsetTop; + var mouseX = event.pageX - cont.offsetLeft; + var mouseY = event.pageY - cont.offsetTop; //console.log("X: " + mouseX + ", Y: " + mouseY); @@ -34,17 +34,19 @@ var imageMap = { * point is in any convex polygon. * http://www.programmingforums.org/post168124-3.html */ - found = false; - for (key in this.imageMap) + var found = false; + for (var key = 0; key < this.imageMap.length; key++) { - values = key.split("--"); - seriesName = values[0]; - seriesValue = values[1]; + var seriesName = this.imageMap[key]['n']; + var seriesValue = this.imageMap[key]['v']; - signSum = 0; - for (i = 0; i <= this.imageMap[key].length - 1; i++) + var signSum = 0; + for (var i = 0; i < this.imageMap[key]['p'].length; i++) { - if (i == this.imageMap[key].length - 1) + var index1; + var index2; + + if (i == this.imageMap[key]['p'].length - 1) { index1 = i; index2 = 0; @@ -54,18 +56,18 @@ var imageMap = { index1 = i; index2 = i+1; } - result = this.getDeterminant( - this.imageMap[key][index1][0], - this.imageMap[key][index1][1], - this.imageMap[key][index2][0], - this.imageMap[key][index2][1], + var result = this.getDeterminant( + this.imageMap[key]['p'][index1][0], + this.imageMap[key]['p'][index1][1], + this.imageMap[key]['p'][index2][0], + this.imageMap[key]['p'][index2][1], mouseX, mouseY ); if (result > 0) { signSum += 1; } else { signSum += -1; } } - if (Math.abs(signSum) == this.imageMap[key].length) + if (Math.abs(signSum) == this.imageMap[key]['p'].length) { found = true; if (this.currentKey != key) diff --git a/libraries/chart/pChart/pChart.class b/libraries/chart/pChart/pChart.class index ce6d263c4..cb60d5441 100644 --- a/libraries/chart/pChart/pChart.class +++ b/libraries/chart/pChart/pChart.class @@ -2220,10 +2220,13 @@ } $offset = 10; - $this->addPointToImageMap($X+$vecX*-$offset,$Y+$vecY*-$offset,$Label,$tooltipValue,'Radar'); - $this->addPointToImageMap($X+$vecX*+$offset,$Y+$vecY*+$offset,$Label,$tooltipValue,'Radar'); - $this->addPointToImageMap($XCenter+$vecX*+$offset,$YCenter+$vecY*+$offset,$Label,$tooltipValue,'Radar'); - $this->addPointToImageMap($XCenter+$vecX*-$offset,$YCenter+$vecY*-$offset,$Label,$tooltipValue,'Radar'); + $poly = array( + array($X+$vecX*-$offset,$Y+$vecY*-$offset), + array($X+$vecX*+$offset,$Y+$vecY*+$offset), + array($XCenter+$vecX*+$offset,$YCenter+$vecY*+$offset), + array($XCenter+$vecX*-$offset,$YCenter+$vecY*-$offset), + ); + $this->addPolyToImageMap($poly,$Label,$tooltipValue,'Radar'); } } } @@ -2777,23 +2780,56 @@ if ( $this->BuildMap ) { - /* Add points to Image Map. - * The center point abd the first, middle and last of the arc is taken. - */ + // Add points to Image Map. foreach ($TopPlots as $key => $PointArr) { + $serieName = $Data[$key][$DataDescription['Values'][1]]; + $serieValue = $Data[$key][$DataDescription['Values'][0]]; + // last point of the arc - $this->addPointToImageMap($PointArr[count($PointArr)-4],$PointArr[count($PointArr)-3],$Data[$key][$DataDescription['Values'][1]],$Data[$key][$DataDescription['Values'][0]],"Pie"); + $lastX = $PointArr[count($PointArr)-4]; + $lastY = $PointArr[count($PointArr)-3]; // the point at the middle - $this->addPointToImageMap($PointArr[0],$PointArr[1],$Data[$key][$DataDescription['Values'][1]],$Data[$key][$DataDescription['Values'][0]],"Pie"); + $middleX = $PointArr[0]; + $middleY = $PointArr[1]; - // firs point in the arc - $this->addPointToImageMap($PointArr[2],$PointArr[3],$Data[$key][$DataDescription['Values'][1]],$Data[$key][$DataDescription['Values'][0]],"Pie"); + // first point in the arc + $firstX = $PointArr[2]; + $firstY = $PointArr[3]; - // point in the middle of the arc - $middle = count($PointArr)/2; - $this->addPointToImageMap($PointArr[$middle + ($middle % 2)],$PointArr[$middle + ($middle % 2)+1],$Data[$key][$DataDescription['Values'][1]],$Data[$key][$DataDescription['Values'][0]],"Pie"); + // point on the first third of the arc + $firstThird = count($PointArr)/3; + $firstThirdX = $PointArr[$firstThird + ($firstThird % 2)]; + $firstThirdY = $PointArr[$firstThird + ($firstThird % 2)+1]; + + // point on the second third of the arc + $secondThird = count($PointArr)/3*2; + $secondThirdX = $PointArr[$secondThird + ($secondThird % 2)]; + $secondThirdY = $PointArr[$secondThird + ($secondThird % 2)+1]; + + // Will create three polygons for every piece of the pie. In such way + // no polygon will be concave. JS only works with convex polygons. + $poly = array( + array($middleX,$middleY), + array($firstX,$firstY), + array($firstThirdX,$firstThirdY), + ); + $this->addPolyToImageMap($poly,$serieName,$serieValue,"Pie"); + + $poly = array( + array($middleX,$middleY), + array($firstThirdX,$firstThirdY), + array($secondThirdX,$secondThirdY), + ); + $this->addPolyToImageMap($poly,$serieName,$serieValue,"Pie"); + + $poly = array( + array($middleX,$middleY), + array($secondThirdX,$secondThirdY), + array($lastX,$lastY), + ); + $this->addPolyToImageMap($poly,$serieName,$serieValue,"Pie"); } } @@ -3420,21 +3456,41 @@ /* Add a box into the image map */ function addToImageMap($X1,$Y1,$X2,$Y2,$SerieName,$Value,$CallerFunction) { - $this->addPointToImageMap($X1,$Y1,$SerieName,$Value,$CallerFunction); - $this->addPointToImageMap($X2,$Y1,$SerieName,$Value,$CallerFunction); - $this->addPointToImageMap($X2,$Y2,$SerieName,$Value,$CallerFunction); - $this->addPointToImageMap($X1,$Y2,$SerieName,$Value,$CallerFunction); + $poly = array(array($X1,$Y1),array($X2,$Y1),array($X2,$Y2),array($X1,$Y2)); + $this->addPolyToImageMap($poly,$SerieName,$Value,$CallerFunction); } - function addPointToImageMap($X1,$Y1,$SerieName,$Value,$CallerFunction) + function addPolyToImageMap($poly,$SerieName,$Value,$CallerFunction) { if ( $this->MapFunction == NULL || $this->MapFunction == $CallerFunction) { - $this->ImageMap["$SerieName--$Value"][] = array(round($X1), round($Y1)); + $this->ImageMap[] = array( + 'n' => (string)$SerieName, + 'v' => (string)$Value, + 'p' => $poly, + ); $this->MapFunction = $CallerFunction; } } + /* Draw image map to the current chart image */ + function debugImageMap() + { + foreach ($this->ImageMap as $polygon) + { + $points = array(); + foreach ($polygon['p'] as $point) + { + $points[] = $point[0]; + $points[] = $point[1]; + } + + $color = $this->AllocateColor($this->Picture,rand(0,255),rand(0,255),rand(0,255)); + imagefilledpolygon($this->Picture,$points,(count($points)+1)/2,$color); + } + + } + /* Load and cleanup the image map from disk */ function getImageMap($MapName,$Flush=TRUE) { diff --git a/libraries/chart/pma_pchart_chart.php b/libraries/chart/pma_pchart_chart.php index 457079b1a..f3556c1dd 100644 --- a/libraries/chart/pma_pchart_chart.php +++ b/libraries/chart/pma_pchart_chart.php @@ -161,7 +161,7 @@ abstract class PMA_pChart_Chart extends PMA_Chart $output = ob_get_contents(); ob_end_clean(); - // encode the current part + // base64 encode the current part $partEncoded = base64_encode($output); $this->partsEncoded[$i] = $partEncoded; } @@ -174,6 +174,8 @@ abstract class PMA_pChart_Chart extends PMA_Chart $this->prepareDataSet(); $this->prepareChart(); + //$this->chart->debugImageMap(); + if ($this->isContinuous()) { $this->render(1); }