julianstricker.com

How to add a "Save and List" Action Button to Symfony Admin Generator Form.

2010-11-15T11:47:00.000-08:00

To improve the workflow sometimes it may be better to redirect the user back to the list after the Save-action. This tutorial shows how to implement this in Symfony 1.3 and 1.4

First copy the "processForm"-function from the action.class.php in your cache-directory ( /cache/dev/modules/auto[Modulename]/actions/actions.class.php ) to your action.class.php and change the lines:


      if ($request->hasParameter('_save_and_add'))
      {
        $this->getUser()->setFlash('notice', $notice.' You can add another one below.');

        $this->redirect('@[Modulename]_new');
      }      
      else
      {
        $this->getUser()->setFlash('notice', $notice);

        $this->redirect(array('sf_route' => '[Modulename]_edit', 'sf_subject' => $[Modulename]));
      }

to:



      if ($request->hasParameter('_save_and_add'))
      {
        $this->getUser()->setFlash('notice', $notice.' You can add another one below.');

        $this->redirect('@[Modulename]_new');
      }
      else if ($request->hasParameter('_save_and_list'))
      {
        $this->getUser()->setFlash('notice', $notice);

        $this->redirect('@[Modulename]');
      }
      else
      {
        $this->getUser()->setFlash('notice', $notice);

        $this->redirect(array('sf_route' => '[Modulename]_edit', 'sf_subject' => $[Modulename]));
      }

Open the file /apps/[Appname]/modules/[Modulename]/lib/[Modulename]GeneratorHelper.class.php and add the function:


public function linkToSaveAndList($object, $params)
  {
    
    return '
';
  }

In /apps/[Appname]/modules/[Modulename]/config/generator.yml:


    ...
    config:
      ...
      form:
        actions:
           save_and_list: ~
           ...

Now there is a new button "Save and list" at the bottom of the Edit-form that will redirect the user to the list after saving the form. Maybe it would be useful to change the generator-classes to auto generate this button for every module.

Fun with HTML5 Canvas Effects

2010-09-14T08:51:00.001-07:00

During my work on the new AIE Ajax Image Editor, I have done some experiments with the new HTML5 features, especially the new Canvas tag. This script is basically a new implementation in JavaScript of a old Director-Movie which I have made about 10 years ago.

Simply move over the image to distort it. Click to switch effect.

The script is very simple: first it gets the content of a image ("getImageData"-function).


window.onload = function() {

  canvas = document.getElementById("area");

  context = canvas.getContext("2d");

  image = document.getElementById("canvasSource");

  context.drawImage(image, 0, 0);

  imgdo = context.getImageData(0, 0, imgsizex, imgsizey);

  document.getElementById("area").onmousemove=draw;

  document.getElementById("area").onclick=function(){ mode++; if(mode>2) mode=0; }; 

};

Then it distorts the image using some trigonometric functions:


function draw(){

  var imgd = context.getImageData(0, 0, imgsizex, imgsizey);



  var opix = imgdo.data;

  var npix = imgd.data;



  var mpos={x:100,y:100};

  var area=document.getElementById("area");

  mpos.x=Mouse.x-area.offsetLeft;

  mpos.y=Mouse.y-area.offsetTop;

  for (iy=0; iy    for (ix=0; ix      var a=(ix - mpos.x);

      var b=(iy - mpos.y);

      var c=Math.abs(Math.sqrt(Math.abs(a*a)+Math.abs(b*b)));

      var w=getwinkel(a,b);

      if (mode==0) {

              var wd=90-(c);

              if (wd<0) wd=0;

              if (wd>90) wd=90;

              var neww=grad2rad(w+wd/1);

              var newa=Math.sin(neww)*c;

              var newb=Math.cos(neww)*c;

              var z=(iy*imgsizex+ix)*4;

              var nz=Math.round((Math.round(mpos.y+newb)*imgsizex+Math.round(mpos.x+newa)))*4;

            }else if (mode==1){

              var wd=90-(c);

              if (wd<0) wd=0;

              if (wd>90) wd=90;

              var neww=grad2rad(w);

              var newc=c+wd/10;

              var newa=Math.sin(neww)*newc;

              var newb=Math.cos(neww)*newc;

              var z=(iy*imgsizex+ix)*4;

              var nz=Math.round((Math.round(mpos.y+newb)*imgsizex+Math.round(mpos.x+newa)))*4;

            }else{

              var wd=(c);

              if (wd<0) wd=0;

              if (wd>90) wd=90;

              var neww=grad2rad(w);

              var newc=c+wd/10;

              var newa=Math.sin(neww)*newc;

              var newb=Math.cos(neww)*newc;

              var z=(iy*imgsizex+ix)*4;

              var nz=Math.round((Math.round(mpos.y+newb)*imgsizex+Math.round(mpos.x+newa)))*4;

            }

      npix[z  ] = opix[nz  ] || 0; 	// red

      npix[z+1] = opix[nz+1] || 0; 	// green

      npix[z+2] = opix[nz+2] || 0; 	// blue



    }

  }

  var a=10;

  var b=10;

  var c=Math.sqrt(a*a+b*b);        

  context.putImageData(imgd, 0, 0);

}

It basically calculates the distance and the angle to the mouse position of every pixel. Then it adds a percentage of the distance to the angle and recalculates the new pixel-position. Then it copies the RGB-value of the pixel at the calculated position in the original image to the pixel in the new image.

I have made those functions to convert between Rad and grad and to calculate the angle:


function rad2grad(rad){

  return rad*180/Math.PI;

}

function grad2rad(grad){

  return grad*Math.PI/180;

}

function getwinkel(a,b){

  var c=Math.abs(Math.sqrt(Math.abs(a*a)+Math.abs(b*b)));

  var nw=rad2grad(Math.asin(a/c));

  if (a<0 && b<0){

    nw= -nw-180;

  }else if (b<0){

    nw= 180-nw;

  }

  return nw;

}

...and the complete Code:








  

    

    Fun with HTML5 Canvas Effects

  



  

    Fun with HTML5 Canvas Effects - Example 


    Author: 2010 Julian Stricker - www.julianstricker.com

Validate size of a uploaded Image in Symfony 1.3/1.4

2010-06-24T13:41:00.000-07:00

The sfValidatorFile has no options to check the size of a image in pixel. For that I have written a simple validator that extends the sfValidatorFile-class.

Create the file jsValidatorImage.php in your /lib directory:


class jsValidatorImage extends sfValidatorFile
{
  protected function configure($options = array(), $messages = array())
  {
    parent::configure($options, $messages);
    
    $this->addOption('minx', false);
    $this->addOption('miny', false);
    $this->addOption('maxx', false);
    $this->addOption('maxy', false);
    
    $this->addMessage('not_a_image', 'The file is not a image.');
    $this->addMessage('minx', 'Das Bild muss mindestens %minx% Pixel breit sein.');
    $this->addMessage('maxx', 'Das Bild darf maximal %maxx% Pixel breit sein.');
    $this->addMessage('miny', 'Das Bild muss mindestens %miny% Pixel hoch sein.');
    $this->addMessage('maxy', 'Das Bild darf maximal %maxy% Pixel hoch sein.');   
    
  }
  
 
  protected function doClean($value)
  {
    $validatedFile = parent::doClean($value);   
    
    // check image size
    
    $imagedata=getimagesize($value['tmp_name']);
    
    if (!$imagedata){
      throw new sfValidatorError($this, 'not_a_image');
    }
    if ($this->hasOption('minx') && $this->getOption('minx')!==false && $imagedata[0] < $this->getOption('minx'))
    {
      throw new sfValidatorError($this, 'minx', array('minx' => $this->getOption('minx'), 'size' => (int) $imagedata[0]));
    }
    if ($this->hasOption('maxx') && $this->getOption('maxx')!==false && $imagedata[0] > $this->getOption('maxx'))
    {
      throw new sfValidatorError($this, 'maxx', array('maxx' => $this->getOption('maxx'), 'size' => (int) $imagedata[0]));
    }
    if ($this->hasOption('miny') && $this->getOption('miny')!==false && $imagedata[1] < $this->getOption('miny'))
    {
      throw new sfValidatorError($this, 'miny', array('miny' => $this->getOption('miny'), 'size' => (int) $imagedata[1]));
    }
    if ($this->hasOption('maxy') && $this->getOption('maxy')!==false && $imagedata[1] > $this->getOption('maxy'))
    {
      throw new sfValidatorError($this, 'maxy', array('maxy' => $this->getOption('maxy'), 'size' => (int) $imagedata[1]));
    }
      
    return $validatedFile;
  }
}

In your [model]Form.class.php extend the "configure()"-function with something like this:


  public function configure()
  {
    ...
    $this->widgetSchema['img'] = new sfWidgetFormInputFileEditable(array(
      ...
    ));        
    $this->validatorSchema['img'] = new jsValidatorImage(array(
      'required'        => true, 
      'path'            => sfConfig::get('sf_upload_dir').'/images',              
      'mime_categories' => 'web_images',
      'minx'            => 100,
      'maxx'            => 120,
      'miny'            => 80,
      'maxy'            => 90
      
    ));
    ...
  }

The validator will now throw a error if the image-width is not between 100 and 120 pixel or the image-height is not between 80 and 90 pixel

Googles Web Fonts

2010-05-20T09:17:00.000-07:00

Increasing the diversity of fonts on the web using the Google Font API, the Google Font Directory and the Webfont Loader.

The selection of fonts used on the Web is very small. This has changed with the new in CSS3 defined @font-face. This allows fonts to be loaded from the web, which works in all modern browsers. This mechanism requires appropriate fonts and the right to make them available on the web or to download from other sources. For this Google has created his Google Font Directory and the Google Font API.

http://code.google.com/intl/de/apis/webfonts/

Embedding the font into your page is very easy. Embed the right stylesheet of the font in your page:

Simply use the font in your CSS font stack like any other font, for example:


h1 { font-family: 'Lobster', arial, serif; }

Filter Admin-List in Symfony 1.4 + Doctrine

2010-03-31T07:45:00.000-07:00

Some time ago I wrote an article about filtering the admin-list in Symfony 1.0 and Propel. Now in Symfony 1.4 and Doctrine the steps to do this are completely different:

First we have to change the auto-generated file in apps/[APP]/modules/[MODULE]/actions/actions.class.php and to add a function "buildQuery()" to the [module]Actions-class:


class hotelActions extends autoHotelActions
{
  protected function buildQuery()
  { 
    $query = parent::buildQuery();
    //Here you can extend your $query to filter the result.
    return $query;
  }
}

So if we have a "creator_id"-field in our schema and we want to filter the result to show only the entries created by the current user, we have to add the following code:


class hotelActions extends autoHotelActions
{
  protected function buildQuery()
  { 
    $query = parent::buildQuery();
    $rootAlias = $query->getRootAlias(); 
    $query->andWhereIn($rootAlias.'.creator_id', Array($this->getUser()->getGuardUser()->getId()));
    return $query;
  }
}

Firefox implements new W3C File API specification

2009-11-27T11:31:00.000-08:00

Web applications can access local files and upload multiple files.

The current fourth beta of Firefox 3.6 comes with support for the File API. The relevant W3C draft specification is from Mozilla developer Arun Ranganathan. The File API provides different objects. This includes FileList containing an array of individually responsive files. It should be integrated over an input tag in HTML 5 pages. Several files can be uploaded at once.

This allows Firefox to upload via drag and drop, so that files can be moved easily from the desktop into a corresponding area in a website. It is also possible to directly create smaller thumbnails in the browser and display, even during the upload of files running in the background.

Checkout developer.mozilla.org for examples for using the File API.

Workaround for Flash CS3 Bug in internationalization using Strings Panel : Error 1009

2009-06-25T13:33:00.000-07:00

Flash CS3 has a Bug when creating multilanguage projects using the Strings-Panel with String-replacement-setting set to "Automatically at Runtime".

A Bug description can be found at http://www.kirupa.com/forum/showthread.php?t=281170
I did spend a lot of time on trying to find a solution for that problem:

Assuming you have a dynamic textbox linked to a Strings-Panel-ID in Frame 1 - 5 you will receive a TypeError #1009 if the Player comes to frame 6.


TypeError: Error #1009: Cannot access a property or method of a null object reference.

Workaround: The error does not occur if the textbox is embedded in a movieclip that has only one frame.

Filter filename on fileupload and prevent execution of uploaded files

2009-06-23T08:50:00.000-07:00

Its a good way to allways rename uploaded files using something like a MD5-hash and store the original filename in a database.

If for some reason you dont want to rename it using a hash, you should filter the filename using some code like this one:


$filename = strip_tags($_FILES["upload"]["name"]);
$filename = str_replace(array('|','<','>','"','\'',':','\\','/','*','?'),'',$filename);

It's a good idea to deny the execution of all uploaded files: place a .htaccess file in your upload-directory:


RemoveHandler .cgi .shtm .shtml
RemoveType .php .php3 .php4 .php5

deny from all


order deny,allow
deny from all

AIE AJAX Image Editor for Drupal

2009-06-17T12:29:00.000-07:00

Today I found this great tutorial on how to integrate my AIE (Ajax Image Editor) into the Drupal imagefield module:

http://drupal.org/node/442800

As expected, it seems to be pretty easy to integrate AIE into Drupal :-)

Symfony 1.0 Admin List: Highlight last edited entry

2009-05-19T08:48:00.000-07:00

To highlight the last created or edited entry in a Admin-Generator-List copy the _list.php file from cache to your /apps/[APPNAME]/modules[MODULENAME]/templates directory and modify the code:


...
<tbody>
getResults() as $mymodel): $odd = fmod(++$i, 2) ?>
<tr class="sf_admin_row_getParameter("id",0)==$mymodel->getId()) echo " rowsel"; ?>">
 $mymodel)) ?>
 $mymodel)) ?>
</tr>

</tbody>
...

Add a stylesheet like this:


#sf_admin_container .sf_admin_list .rowsel td {
border-bottom:1px solid #DDDDDD;
border-right:1px solid #DDDDDD;
padding:3px;
background-color: #DDDDEE !important;
}

Done!

Symfony Sortable I18n-field in Admin-List

2009-05-18T11:50:00.000-07:00

Works with Symfony 1.0

This Article shows how to make a I18n Field in a Symfony-Admin-List Sortable.
In this example i use the "name"-field as I18n-field.

First, open the file apps/[APPNAME]/modules/[MODULENAME]/action/actions.class.php and add the function:


protected function addSortCriteria($c)
  {
    if ($sort_column = $this->getUser()->getAttribute('sort', null, 'sf_admin/[MODULENAME]/sort'))
    {
      if ($sort_column=='name'){      
        if (strlen(sfContext::getInstance()->getUser()->getCulture())==2) {
          $culture=sfContext::getInstance()->getUser()->getCulture();
        }else{
          $culture="de";
        }
        $culture=strtolower($culture);        
        $c->addJoin([MODULENAME]I18nPeer::ID,[MODULENAME]Peer::ID);
        $c->add([MODULENAME]I18nPeer::CULTURE, $culture);
        $sort_column=[MODULENAME]I18nPeer::NAME;
      }else{
        $sort_column = [MODULENAME]Peer::translateFieldName($sort_column, BasePeer::TYPE_FIELDNAME, BasePeer::TYPE_COLNAME);
      }
      if ($this->getUser()->getAttribute('type', null, 'sf_admin/[MODULENAME]/sort') == 'asc')
      {
        $c->addAscendingOrderByColumn($sort_column);
      }
      else
      {
        $c->addDescendingOrderByColumn($sort_column);
      }
    }
  }

Create a __toString function in /lib/model/[MODULENAME].php:


public function __toString () {
    if (strlen(sfContext::getInstance()->getUser()->getCulture())==2) {
      $culture=sfContext::getInstance()->getUser()->getCulture();
    }else{
      $culture="de";
    }
    $culture=strtolower($culture);
    $culture[0]=strtoupper($culture[0]);
    return $this->__call("getNameI18n".$culture,"");
  }   
  public function __call($m, $a)
  {
    $data = @split('I18n', $m, 2);
    if( count($data) != 2 ) 
      throw new Exception('Tried to call unknown method '.get_class($this).'::'.$m);
    list( $method, $culture ) = $data;
    $this->setCulture( $culture );
    return call_user_func_array(array($this, $method), $a);
  }

Next, create a File "_name.php" in apps/[APPNAME]/modules/[MODULENAME]/templates/_name.php:


echo $[MODELNAME]->__toString();
?>

In generator.yml add the _name-field to the display section in list:


...
  list:
    display: [_name, ... ]
....

Next, copy the _list_th_tabular.php file from the cache-directory to your apps/[APPNAME]/modules/[MODULENAME]/templates directory and change the <th />-tag of the name-field to something like this:


...
<th id="sf_admin_list_th_name">
        getAttribute('sort', null, 'sf_admin/[MODULENAME]/sort') == 'name'): ?>
      getAttribute('type', 'asc', 'sf_admin/[MODULENAME]/sort') == 'asc' ? 'desc' : 'asc')) ?>
      (getAttribute('type', 'asc', 'sf_admin/[MODULENAME]/sort')) ?>)
      
      
              
</th>
...

That's it

New version of jsThumbnailPlugin released

2008-12-03T16:37:00.000-08:00

Today I have released version 1.1.0 of the jsThumbnailPlugin for the Symfony framework. It contains a important bugfix for Symfony 1.1 and a new feature.

I fixed a bug with the sfFileCache object: In version 1.0 the sfFileCache wants a string as $file_cache_dir parameter, but version 1.1 wants a Array containing the parameters:


Symfony 1.0: $cache = new sfFileCache($file_cache_dir);
Symfony 1.1: $cache = new sfFileCache(Array('cache_dir'=>$file_cache_dir));

The problem was to find out which version of Symfony is running. I solved the problem by checking if the function "setFileLocking" exists. This function exists only in version 1.0 of Symfony:


if (method_exists('sfFileCache', 'setFileLocking')){ //symfony 1.0
$cache = new sfFileCache($file_cache_dir);
}else{ //symfony 1.1
$cache = new sfFileCache(array('cache_dir' => $file_cache_dir));
}

jsThumbnailPlugin 1.1.0 accepts a new parameter "mode". This parameter can be set to "normal", "crop" or "stretch".
normal: Sets the image to the maximum height or width, without changing the width/height proportion;
crop: The image will be cropped exactly to the given height and width without changing the width/height proportion;
stretch: Sets the image to the maximum height or width, the width/height proportion changes.

New great set of 24 Symfony tutorials

2008-12-02T17:59:00.000-08:00

The Symfony team has released a new set of 24 tutorials published day-by-day between December 1st and Christmas, like the "Askeet tutorial" in 2005.

As for askeet, every day including week-ends, a new tutorial will be published. Each tutorial is meant to last about one hour, and will be the occasion to learn symfony by coding a real web application, from start to finish.

New Symfony Plugin "jsThumbnailPlugin" for on-the-fly Thumbnails Creation

2008-11-04T19:48:00.000-08:00

Today I have released my first plugin for the Symfony-Framework. The jsThumbnailPlugin creates Thumbnails on the fly using the GD library. It uses the Symfony cache system to cache the thumbnails.

The plugin consists of a action and a helper. It creates a thumbnail of a image in the given size and stores it in cache for the next calls, until the image changes. You can download it from http://www.symfony-project.org/plugins/jsThumbnailPlugin

The use is very simple:
1. Install it:

$ symfony plugin-install http://plugins.symfony-project.com/jsThumbnailPlugin

2. Enable the module in the setting.yml file of your application:

all:
 .settings:
   enabled_modules:        [ default, jsThumbnail ]

3. Now you can view the thumbnail simply by open a link like this:

http://www.yourhost.com/yourapp.php/jsThumbnail/thumbnail?img=uploads/pictures/image.jpg&maxx=100&maxy=80

4. The plugin has a helper that creates a image-tag for a thumbnail. Include the helper in your template-file:

5. Call the Helper. The helper needs some params: the imagepath on server, maximum-width and maximum-height. The last parameter are additional HTML compliant tag parameters:

 'border: 1px solid #ff0000')) ?>

6. The Plugin automatically checks if the Original image was modificated.

7. To delete the cached thumbnails call:

$ symfony cc

Akoie is now AIE (Ajax-Image-Editor)!

2008-10-22T12:21:00.000-07:00

Akoie´s new name is AIE (Ajax-Image-Editor)! Also akoie moved from akoie.akanai.eu to his new official domain http://www.ajax-image-editor.com! New version comming soon!

Symfony - Listen im Admin Generator filtern

2008-09-03T23:51:00.000-07:00

Einträge in Selectboxen einer foreignTable filtern (z.B. nach creator):

schema.yml:

propel:     project:     _attributes:            { phpName: Project }     id:     creator_id:                { type: integer, foreignTable: creator foreignReference: id, required: true, onDelete: cascade }       name:                   { type: VARCHAR, size: 255, required: true }     description:            { type: VARCHAR, size: 255, required: true } ...

 /lib/model/ProjectPeer.php:

class ProjectPeer extends BaseProjectPeer {   public static function getCreatorfiltered() {   $c = new Criteria();        $c->add(ProjectPeer::CREATOR_ID, sfContext::getInstance()->getUser()->getGuardUser()->getId());      //oder Creator ID     }   return ProjectPeer::doSelect($c);  } }
  generator.yml:

..     fields:                project_id:               params:           name:         Project           peer_method:  getCreatorfiltered

Akoie 0.5

2008-08-22T13:02:00.001-07:00

Recently, I have released version 0.5 of my online image editor "Akoie". Because of the great interest and the many positive reactions, I'm already working on the next version. The new Version will use the Canvas tag to make possible a lot of new features for client-side image manipulation. This allows the free rotation of text and watermarks in smaller steps than 90°.