Turning a class into a snippet?

372 Posts

bwente Reply #1, 18 years ago

I thought I could just cut and paste some code and make a new snippet. No such luck. I know smarter people than me could make this happen. I think it is a perfect fit for MODx. I don’t actually need anything like it right now, but I am sure it would come in handy when I do.

Please check it out.
http://pchart.sourceforge.net/index.php

Charts from sql queries or cvs too. Can someone adopt this?

In pinch, this will work too. http://bluff.jcoglan.com/

DropboxUploader -- Upload files to a Dropbox account.
DIG -- Dynamic Image Generator
gus -- Google URL Shortener
makeQR -- Uses google chart api to make QR codes.
MODxTweeter -- Update your twitter status on publish.

956 Posts

ganeshXL Reply #2, 18 years ago

This wouldn’t be very hard to implement. You would probably just have to adjust the paths, so your include-calls are correct.

With most of these types of scripts, the rendered image (what you see in the browser) is the actual script itself, i.e. the php file, probably with a special header for filetype GIF or PNG. In other words, you create a regular img-tag in your html-page, but you point to a php-file instead of a static image.

Also, don’t forget JpGraph: http://www.aditus.nu/jpgraph/
Very powerful library, though not 100% open-source/free...

http://www.fantastique.ch/
http://www.dnik.ch/
http://www.flickr.com/photos/dnik/

24,544 Posts

BobRay Reply #3, 18 years ago

For an example of what ganeshXL is talking about, you can look at the veriword.php file in /manager/includes. It’s called as the "img" source for a CAPTCHA image.

Bear in mind that such a file is real pain to debug because if *anything* is wrong in the file all you get is a broken image and no debugging print or echo statements will produce any output. If anyone has any debugging tips for this kind of file, I’d be curious to hear them.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 18 years ago

I’m all fuzzy in the head and blurry in the eyes today from fall allergies (at first I thought this was "turning glass into a slipper" shocked

) but I do recall a snippet that has the most amazing debug console. I just can’t remember which one it is. But it’s got tabs, and can tell you everything you need to set up the configuration and find any problems. Surely somebody else can remind me which one that is. Anyway, that might be a good example of how to provide debugging for just about anything. Although eForm doesn’t do so bad; it has lots of debugging information inserted into the class output if the &debug parameter is turned on. (it’s on for the contact form on my site, although I did hack it a bit to remove a couple of sensitive fields, if anybody’s interested in seeing it live - http://sottwell.com/contact.html ).

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

372 Posts

bwente Reply #5, 18 years ago

Thanks for the input I will give it a try calling it differently. The first time I tried calling it as an include I got an error trying to get the font. I see that from some of the documentation on the graphng class that it can be processor intensive and has the ability to cache. Would MODx’s ability to cache be negated by calling it as an image every time? I am sure any site I would use it on would have pretty low traffic, but it seems a same to have to generate the image everytime the page loads.

DropboxUploader -- Upload files to a Dropbox account.
DIG -- Dynamic Image Generator
gus -- Google URL Shortener
makeQR -- Uses google chart api to make QR codes.
MODxTweeter -- Update your twitter status on publish.

2,310 Posts

bunk58 Reply #6, 18 years ago

Didn’t it mention it’s own caching class on their web site?

964 Posts

charliez Reply #7, 18 years ago

Susan: maybe you are referring to FeedX? when you activate the debugging feature, it tells you everything that the snippet and the feed are doing, very nice and niffty...

Website: www.mercologia.com
MODX Revo Tutorials: www.modxperience.com

MODX Professional Partner

372 Posts

bwente Reply #8, 18 years ago

So here is an example of my simple cut n’ paste.

<?php
$snippetPath = $modx->config['base_path'] . 'assets/snippets/pChart/pChart/';
include_once($snippetPath.'pData.class');
include_once($snippetPath.'pChart.class');

 // Dataset definition 
 $DataSet = new pData;
 $DataSet->AddPoint(array(0,70,70,0,0,70,70,0,0,70),"Serie1");
 $DataSet->AddPoint(array(0.5,2,4.5,8,12.5,18,24.5,32,40.5,50),"Serie2");

 $DataSet->AddAllSeries();
 $DataSet->SetAbsciseLabelSerie();
 $DataSet->SetSerieName("January","Serie1");
 $DataSet->SetSerieName("February","Serie2");

 // Initialise the graph
 $Test = new pChart(700,230);
 $Test->setFontProperties("Fonts/tahoma.ttf",8);
 $Test->setGraphArea(50,30,585,200);
 $Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
 $Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
 $Test->drawGraphArea(255,255,255,TRUE);
 $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);
 $Test->drawGrid(4,TRUE,230,230,230,50);

 // Draw the 0 line
 $Test->setFontProperties("Fonts/tahoma.ttf",6);
 $Test->drawTreshold(0,143,55,72,TRUE,TRUE);

 // Draw the line graph
 $Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());
 $Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);

 // Set labels
 $Test->setFontProperties("Fonts/tahoma.ttf",8);
 $Test->setLabel($DataSet->GetData(),$DataSet->GetDataDescription(),"Serie1","2","Daily incomes",221,230,174);
 $Test->setLabel($DataSet->GetData(),$DataSet->GetDataDescription(),"Serie2","6","Production break",239,233,195);

 // Finish the graph
 $Test->setFontProperties("Fonts/tahoma.ttf",8);
 $Test->drawLegend(600,30,$DataSet->GetDataDescription(),255,255,255);
 $Test->setFontProperties("Fonts/tahoma.ttf",10);
 $Test->drawTitle(50,22,"Example 9",50,50,50,585);
 $Test->Render("chart.png");
?>

and the error it produces

« MODx Parse Error »
MODx encountered the following error while attempting to parse the requested resource:
« PHP Parse Error »
 
PHP error debug
  Error: 	imageftbbox() [function.imageftbbox]: Could not find/open font	 
  Error type/ Nr.: 	Warning - 2	 
  File: 	/Users/bmw/Sites/modx/assets/snippets/pChart/pChart/pChart.class	 
  Line: 	447	 
  Line 447 source: 	$Position = imageftbbox($this->FontSize,0,$this->FontName,$Value);

If I go to an example directly it does not error and renders correctly. I am testing this on my local machine. I think it is having a problem locating the ttf’s. Not sure.

DropboxUploader -- Upload files to a Dropbox account.
DIG -- Dynamic Image Generator
gus -- Google URL Shortener
makeQR -- Uses google chart api to make QR codes.
MODxTweeter -- Update your twitter status on publish.

1,336 Posts

shamblett Reply #9, 18 years ago

Looks as though you haven’t got the font your using installed locally, either install it or just as a test change the font parameters to one you have installed.

Use MODx, or the cat gets it!

372 Posts

bwente Reply #10, 18 years ago

Ok, I kinda got it. Thanks shamblett.

It was a problem with the font paths.

<?php
$snippetPath = $modx->config['base_path'] . 'assets/snippets/pChart/pChart/';
$fontPath = $modx->config['base_path'] . 'assets/snippets/pChart/Fonts/';

include_once($snippetPath.'pData.class');
include_once($snippetPath.'pChart.class');

 // Dataset definition 
 $DataSet = new pData;
 $DataSet->AddPoint(array(0,70,70,0,0,70,70,0,0,70),"Serie1");
 $DataSet->AddPoint(array(0.5,2,4.5,8,12.5,18,24.5,32,40.5,50),"Serie2");

 $DataSet->AddAllSeries();
 $DataSet->SetAbsciseLabelSerie();
 $DataSet->SetSerieName("January","Serie1");
 $DataSet->SetSerieName("February","Serie2");

 // Initialise the graph
 $Test = new pChart(700,230);
 $Test->setFontProperties($fontPath . "tahoma.ttf",8);
 $Test->setGraphArea(50,30,585,200);
 $Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
 $Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
 $Test->drawGraphArea(255,255,255,TRUE);
 $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);
 $Test->drawGrid(4,TRUE,230,230,230,50);

 // Draw the 0 line
 $Test->setFontProperties($fontPath . "tahoma.ttf",6);
 $Test->drawTreshold(0,143,55,72,TRUE,TRUE);

 // Draw the line graph
 $Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());
 $Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);

 // Set labels
 $Test->setFontProperties($fontPath . "tahoma.ttf",8);
 $Test->setLabel($DataSet->GetData(),$DataSet->GetDataDescription(),"Serie1","2","Daily incomes",221,230,174);
 $Test->setLabel($DataSet->GetData(),$DataSet->GetDataDescription(),"Serie2","6","Production break",239,233,195);

 // Finish the graph
 $Test->setFontProperties($fontPath . "tahoma.ttf",8);
 $Test->drawLegend(600,30,$DataSet->GetDataDescription(),255,255,255);
 $Test->setFontProperties($fontPath . "tahoma.ttf",10);
 $Test->drawTitle(50,22,"Example 9",50,50,50,585);
 $Test->Render("assets/images/charts/chart.png");
return '<img src="assets/images/charts/chart.png"/>';
?>

It works. But the image path is hard coded. The next step would be to create parameters to pass and to check if the file exists, before creating the image again. Is there a better way? Or is that basically it? I would like not to touch the class, and make easy to update.

DropboxUploader -- Upload files to a Dropbox account.
DIG -- Dynamic Image Generator
gus -- Google URL Shortener
makeQR -- Uses google chart api to make QR codes.
MODxTweeter -- Update your twitter status on publish.