diff --git a/workflow/engine/controllers/dashboard.php b/workflow/engine/controllers/dashboard.php index 21b2cf49f..a68b979dc 100644 --- a/workflow/engine/controllers/dashboard.php +++ b/workflow/engine/controllers/dashboard.php @@ -16,7 +16,18 @@ class Dashboard extends Controller { } public function renderDashletInstance($dasInsUid) { - // + require_once ( PATH_METHODS . 'dashboard/class.gauge.php' ); + $gauge = new pmGauge(); +/* + $gauge->value = x; + $gauge->maxValue = x; +*/ + //falta el width de la imagen + $w = isset($_REQUEST['w']) ? intval($_REQUEST['w']) : 610; + if ( intval($_REQUEST['w']) < 50 ) $w = 50; + $gauge->w = $w; + + $gauge->render(); } // Functions for the dashboards users module - End diff --git a/workflow/engine/methods/dashboard/class.gauge.php b/workflow/engine/methods/dashboard/class.gauge.php new file mode 100755 index 000000000..bb57ed6af --- /dev/null +++ b/workflow/engine/methods/dashboard/class.gauge.php @@ -0,0 +1,194 @@ +h = $this->w / 2; + $im = imagecreatetruecolor($this->w, $this->h); + $width = $this->w; + $height = $this->h; + $center_x = intval($width / 2); + $center_y = intval($height / 2); + + //gauge color + $bgcolor = ImageColorAllocate($im, 247, 247, 247); + $extRing = ImageColorAllocate($im, 214, 214, 214); + $blueRing = ImageColorAllocate($im, 70, 132, 238); + $blueRingLine = ImageColorAllocate($im, 106, 114, 127); + $arrowBody = ImageColorAllocate($im, 228, 114, 86); + $arrowLine = ImageColorAllocate($im, 207, 74, 42); + $redArc = ImageColorAllocate($im, 220, 57, 18); + $yellowArc = ImageColorAllocate($im, 255, 153, 0); + + $black = ImageColorAllocate($im, 0,0,0); + $white = ImageColorAllocate($im, 255, 255, 255); + $gray = ImageColorAllocate($im, 190, 190, 190); + + $fontArial = PATH_THIRDPARTY . 'html2ps_pdf/fonts/arial.ttf'; + $fontCourier = PATH_THIRDPARTY . 'html2ps_pdf/fonts/cour.ttf'; + $fontCourbd = PATH_THIRDPARTY . 'html2ps_pdf/fonts/courbd.ttf'; + + ImageFilledRectangle($im, 0, 0, $width-1, $height-1, $white); + ImageRectangle ($im, 0, 0, $width-1, $height-1, $gray); + + //center coords + $cX = intval($this->w /2); + $cY = intval($this->h /2); + + //diameter for gauge + $diameter = intval( $this->h * 4/5 ); + $dX = intval($diameter *8/7 ); //for now ratio aspect is 8:7 + $dY = intval($diameter); + $dXRing = intval($dX * 0.90); + $dYRing = intval($dY * 0.90); + + $dXRingColor = intval($dX * 0.86); + $dYRingColor = intval($dY * 0.86); + + $dXRingCenter = intval($dX * 0.66); + $dYRingCenter = intval($dY * 0.66); + + imagefilledellipse($im, $cX, $cY, $dX, $dY, $extRing); + + imagefilledellipse($im, $cX, $cY, $dXRing, $dYRing, $bgcolor); + + //drawing the red arc + $redFrom = $this->redFrom/$this->maxValue*300 - 240 ; + $redTo = $this->redTo/$this->maxValue*300 - 240; + $yellowFrom = $this->yellowFrom/$this->maxValue*300 - 240; + $yellowTo = $this->yellowTo/$this->maxValue*300 - 240; + imagefilledarc ($im, $cX, $cY, $dXRingColor, $dYRingColor, $redFrom, $redTo, $redArc, IMG_ARC_PIE ); + imagefilledarc ($im, $cX, $cY, $dXRingColor, $dYRingColor, $yellowFrom, $yellowTo, $yellowArc, IMG_ARC_PIE ); + + imagefilledellipse($im, $cX, $cY, $dXRingCenter, $dYRingCenter, $bgcolor); + + //ticks + $radiusX = intval($dX * 0.42); + $radiusY = intval($dY * 0.42); + $min = 5; + while($min <= 55) { + if ($min % 5 == 0) + $len = $radiusX / 8; + else + $len = $radiusX / 25; + + $ang = (2 * M_PI * $min) / 60; + $x1 = sin($ang) * ($radiusX - $len) + $cX; + $y1 = cos($ang) * ($radiusY - $len) + $cY; + $x2 = sin($ang) * $radiusX + $cX; + $y2 = cos($ang) * $radiusY + $cY; + + ImageLine($im, $x1, $y1, $x2, $y2, $black); + + + if ($min % 5 == 0) { + $textToDisplay = sprintf("%d", (55-$min)*$this->maxValue/50 ); + $bbox = imagettfbbox(8, 0, $fontArial, $textToDisplay ); + $x1 = sin($ang) * ($radiusX - 2*$len) + $cX - $bbox[4] / 2; + $y1 = cos($ang) * ($radiusY - 2*$len) + $cY +2;// - abs($bbox[5]); + imagettftext ( $im, 8, 0, $x1, $y1, $gray, $fontArial, $textToDisplay ); + } + $min++; + } + + //drawing the arrow, simple way + $radiusX = intval($dX * 0.35); + $radiusY = intval($dY * 0.35); + + $ang = - M_PI/6 + 2*M_PI - ( 2 * M_PI * $this->value )*50/60 /$this->maxValue ; + $x1 = sin($ang) * ($radiusX) + $cX; + $y1 = cos($ang) * ($radiusY) + $cY; + ImageLine($im, $cX, $cY, $x1, $y1, $arrowLine); + + /* + //arrowLine + $arrowHeight = intval($dY * 0.02); + $arrowWidth = intval($dX * 0.35); + $arrowTail = intval($dX * 0.15); + $values = array( + 0, -$arrowHeight, + -$arrowTail, 0, + 0, $arrowHeight, + $arrowWidth, 0, + 0, -$arrowHeight + ); + + //rotate n degrees + $n = 20; + $ang = (2 * M_PI * $n) / 60; + + foreach ( $values as $k => $val ) { + if ( $k % 2 == 0 ) { + //$values[$k] = sin($ang)*$val + 20; + $values[$k] = sin($ang)*($val/$cX)*$; + $values[$k] += $cX; + } + else { + //$ys = intval(sin($sec * M_PI/30 - M_PI/2) * R); + //$values[$k] = intval(sin($n * M_PI/30 - M_PI/2) *$val); + $values[$k] = (cos($ang))*($val/$cY)*$cY; + $values[$k] += $cY; + } + } + + imagefilledpolygon ($im, $values, 5, $arrowBody); + imagepolygon ($im, $values, 5, $arrowLine); + */ + //blue ring + $dXBlueRing = $dX * 0.07; + $dYBlueRing = $dY * 0.07; + imagefilledellipse($im, $cX, $cY, $dXBlueRing, $dXBlueRing, $blueRing); + imageellipse ($im, $cX, $cY, $dXBlueRing, $dYBlueRing, $blueRingLine); + + imageellipse ($im, $cX, $cY, $dX, $dY, $black); + + $textToDisplay = sprintf ( "%5.2f%%", $this->value ); + $bbox = imagettfbbox(9, 0, $fontArial, $textToDisplay ); + $centerX = $cX - $bbox[4] / 2; + $centerY = $cY+$dYRing/2+3-abs($bbox[5]); + imagettftext ( $im, 9, 0, $centerX, $centerY, $black, $fontArial, $textToDisplay ); + + Header("Content-type: image/png"); + ImagePng($im); + + } + +} \ No newline at end of file diff --git a/workflow/engine/templates/dashboard/index.js b/workflow/engine/templates/dashboard/index.js index 49ab68904..32e0a1e1b 100644 --- a/workflow/engine/templates/dashboard/index.js +++ b/workflow/engine/templates/dashboard/index.js @@ -65,7 +65,7 @@ Ext.onReady(function(){ var np = new Ext.ux.Portlet ( { //title: 'Panel nuevo', //tools: tools, - html: 'hello world', + html: 'gauge placeholder', listeners: { 'render': function(p){ p.html = 'hello ' + p.getWidth(); @@ -76,8 +76,8 @@ Ext.onReady(function(){ }, 'resize' : function(p,w,h){ var randomnumber=Math.floor(Math.random()*1000000) - var img = new Ext.XTemplate("").apply({ - page: 'http://javaserver.colosa.net/ext/examples/portal/gauge.php', width:w, random: randomnumber }) + var img = new Ext.XTemplate("").apply({ + page: 'dashboard/renderDashletInstance', width:w, random: randomnumber, id:'123456ABCDEF' }) p.update(img ); } @@ -141,29 +141,15 @@ Ext.onReady(function(){ items:[{ columnWidth:.33, style:'padding:10px 0 10px 10px', - items:[{ - title: 'Grid in a Portlet', - layout:'fit', - tools: tools, - html: 'Learn Use the included files to view samples and our API documentation. For advanced, hands-on support, please see our premium support subscriptions. Larger organizations can use our enterprise training and services.' - //items: new SampleGrid([0, 2, 3]) - }] + items:[] },{ columnWidth:.33, style:'padding:10px 0 10px 10px', - items:[{ - title: 'Panel 2', - tools: tools, - html: 'Learn Use the included files to view samples and our API documentation. For advanced, hands-on support, please see our premium support subscriptions. Larger organizations can use our enterprise training and services.' - }] + items:[] },{ columnWidth:.33, style:'padding:10px', - items:[{ - title: 'Panel 3', - tools: tools, - html: 'Learn Use the included files to view samples and our API documentation. For advanced, hands-on support, please see our premium support subscriptions. Larger organizations can use our enterprise training and services.' - }] + items:[] }] /*