nettika/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image map enchancements.

Browse Source
This commit is contained in:
Martynas Mickevicius
2010-07-29 19:06:11 +03:00
parent 88b9e72597
commit 57614902eb
3 changed files with 97 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
js/pMap.js
View File

@@ -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)

96
libraries/chart/pChart/pChart.class
View File

@@ -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)
{

4
libraries/chart/pma_pchart_chart.php
View File

@@ -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);
}