Archive

Archive for the ‘tools’ Category

Improved Preview Handling

October 10th, 2010 1 comment

Recently the preview handling was improved and partly rewritten. The speed boost by the Fast File Responder was previously described here. Before r632 each preview was rendered by the original image which consumed a lot of time. Now an image preview manager was introduced which reuses existing down sampled images to gain speed. While each conversion from the original image costs about 4.4s, the down sampling from an 600px to 220px requires only 0.2s Further each preview configuration (defined in the Preview Manager Component) might be depend on a greater preview image. These dependencies might trigger the generation of all previews before calculating the requested one.

Unfortunately, the preview cache file schema changed and all previews have to be recalculated again. However, since r639 phTagr supports the batch generation of previews with a CakePHP shell script preview. You can create these previews at the command with

$ cd <phtagr base>
$ cakephp/lib/Cake/Console/cake preview generate
Generate preview files
 
Usage:
cake preview [subcommand] [options]
 
Subcommands:
 
generate  Create preview files
 
To see help on a subcommand use `cake preview [subcommand] --help`
 
Options:
 
--help, -h         Display this help.
--verbose, -v      Enable verbose output.
--quiet, -q        Enable quiet output.
--max              Maximum generation count. Default is 10. Use 0 to
                   generate all previews
--start-chunk      Set the start chunk number. A chunk has a size of 100
                   media. Default is 1
--size             Set the minimum preview size. Default is thumb
                   (choices: mini|thumb|preview|high)
--user             Generate only previews for given user
$ cakephp/lib/Cake/Console/cake preview generate --size mini -v
Page 1/180 (0.56%)
Page 2/180 (1.11%)
Page 3/180 (1.67%)
...

Update 2012-07-22: Updated commands to version 2.2-dev.

Categories: tools, user Tags: ,

Theme Your CakePHP Application – Make it Mobile Device Aware

July 26th, 2010 4 comments

This post shows how easy your CakePHP applications becomes mobile device aware by using CakePHP theming feature. At the end of this post the mobile theme is selected automatically on requests of mobile devices.

Theming in CakePHP is really a piece of cake! Since CakePHP is a Model-View-Control framework, the data, the data logic and the view is well separated. For theming you just need to replace your view templates without changing the logic or data handling. Theming is quite easy and you don’t need to be a professional software programmer. While a nice theme needs some knowledge of HTML and CSS theming CakePHP requires just basic PHP skills.

CakePHP’s Layout and Views

In standard cases all view templates are located in ./app/views and CakePHP selects by its magic the correct page layout and the view for the current logic. So you have your layouts (the basic document structure) in ./app/views/layouts and your view templates (the specific view of one action) of your current action in ./app/views/[controller]/[action].ctp. For detailed information please have a look at http://book.cakephp.org/de/view/94/Views.

The CSS and JS files have a little different place. The style sheets are located in ./app/webroot/css and the javascript files are located in ./app/webroot/js.

The important structure of CakePHP’s view templates is shown below:

./app/views/
    views/
        layouts/           <-- Location of page layouts
            default.ctp
        helpers/           <-- View template helpers
        elements/          <-- Little view templates
        home/
            index.ctp      <-- Specific view template of the index action in the home controller
        explorer/
            index.ctp
        ...
        /themed            <-- Directory of CakePHP themes
    webroot/               <-- Application's webroot (like htdocs for apache)
        css/               <-- Style sheets
        js/                <-- Javascript directory

Now the cool part: You can theme all your views with a very similar view structure. But you don’t have to theme all layouts and views. If your theme does not have a required view CakePHP uses the original one. So you can just theme required layouts and/or views.

The Birth of a New Theme

Now we want to create a mobile version of our application. As example application I use the open source social photo gallery phTagr from www.phtagr.org. I assume that your phTagr gallery is installed and accessible at http://localhost/phtagr. But you can easily adapt these steps to any other CakePHP application.

Basic Folder Structure of a CakePHP Theme

First we need to create a theme folder with its basic theme structure. Goto theme directory ./app/views/themed and create your own theme, I call it “mobile”. Further some required directories are also required. We theme the default layout and some basic actions, for phTagr it is the home, the photo explorer and the image view.

cd app/views/
mkdir -d themed/mobile
cd themed/mobile
mkdir -p layouts elements webroot/css home explorer images

Now we have following folder structure

./app/views/themed
    /mobile
        layouts/           <-- Default theme layouts
        elements/          <-- Folder for element templates
        webroot/
            css/           <-- Folder for mobile CSS
        home/              <-- Your themed views of home controller
        explorer/          <-- Your themed views of explorer controller
        images/            <-- Your themed views of images controller

Note: ./app/views/themed/mobile is now referred as ./mobile.

Activate Your Theme

To activate the new theme you set it in before_render() at ./app/app_controller.php. Later we automate this theme selection but for now the hard coded version is just fine. Important is, that the views are theme aware by this->view = 'Theme'; and of cause your theme name.

  function beforeRender() {
    // ... other code
    $this->view = "Theme";
    $this->theme = "mobile";
  }

Your Themed Page Layout

If we call now our side http://localhost/phtagr nothing is changed. Thats fine, than CakePHP did not find any themed layouts or views to use and uses the standard one. Therefore we want to change the default layout in ./mobile/layouts/default.ctp to see some differences.

Edit ./mobile/layouts/default.ctp

<?php echo $html->docType('xhtml-strict'); ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title><?php echo $title_for_layout; ?></title>
<?php
  echo $html->charset('UTF-8');
  echo $html->meta('icon');
?>
</head>

<body>
<?php echo $content_for_layout; ?>
</body>
</html>

Now we see some changes http://localhost/phtagr with a plain layout.

Layout Your Views

My profession is not quite a web designer but here I show you howto style your mobile version.

You create your css in ./mobile/webroot/css/mobile.css and add it to your default theme in the <head> section.

...
<?php
  echo $html->charset('UTF-8');
  echo $html->meta('icon');
  echo $html->css('mobile');
?>
...
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  color: black;
  font-family: Druid, Verdana, Sans;
  font-size: 10pt;
  background: white;
}

h1,h2,h3 { font-weight: bold; }
h1 { font-size: 130%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }

a { text-decoration: none; }
a img { border: 1px black solid; }

Add Header and Footer

Now we want to add some containers for header and footer. These parts could be rendered in special containers, CakePHP calls them elements template. Header and footer are perfect candidates for such elements.

Adapt your default HTML body layout in ./mobile/layouts/default.ctp

<body>
<div><?php echo View::element('header'); ?></div>
<div><?php echo $content_for_layout; ?></div>
<div><?php echo View::element('header'); ?></div>
</body>

Now create the elements ./mobile/elements/header.ctp and ./mobile/elements/footer.ctp.

header.ctp:

<h1>phTagr<span>mobile</span></h1>

footer.ctp:

<p>Social Web Gallery <a href="http://www.phtagr.org">phTagr</a> - mobile version.</p>

And we add new styles to ./mobile/webroot/css/mobile.css:

.header * {
  display: inline;
}
.header {
  display: block;
  background: #3d3;
  padding: 2px 5px;
}
.header h1 span.subheader {
  color: white;
  font-size: 80%;
  font-style: italic;
}
.footer {
  display: block;
  background: #888;
}

Adapt Views

Now some views will be adapted from the original ones. The original versions are located in ./app/views/[controller]/. In the theme they are located in ./app/themed/[theme]/[controller], in ./mobile/[controller].

For a theme view of the index action of the home controller CakePHP will look first in ./mobile/home/index.ctp. If it does not exists CakePHP take the standard one. So I copied the original version index.php to the theme folder ./mobile/home and made some changes.

Further I copied and adapt ./app/views/explorer/index.ctp and ./app/views/images/index.ctp. All other themes are not very important to adapt. The same with the view action of images controller.

For the forms I added some basic form style definitions to ./mobile/webroot/css/mobile.css:

fieldset {
  margin: 5pt;
  border: none;
}
fieldset legend {
  font-weight: bold;
}
fieldset div label {
  display: block;
  width: 100%;
}
fieldset div input[type=textfield],
fieldset div input[type=text] {
  width: 100%;
  font-size: 150%;
}
input[type=checkbox] + label {
  display: inline;
}
form * input[type=submit] {
  font-size: 150%;
  border: 2px solid black;
  background: #3d3;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

And styled the flag message:

.message {
  display: block;
  font-size: 120%;
  margin: 5pt;
  padding: 5pt;
  border: 1px solid black;
  background: #fd3;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

Fix iPhone

The iPhone (and iPod Touch) requires a special viewport meta information to render without any scaling. This is added to the default layout in the head section:

<title><?php echo $title_for_layout; ?></title>
<meta name="viewport" content="initial-scale=1.0">
...

Automatic Theme Selection

After adjusting the views and improving the style sheets the automatic theme switch is build in. For this we need the RequestHandler component in our basic app_controller.php which is added to the $components variable:

  var $components = array('RequestHandler');

We use the isMobile() function of RequestHandler component to evaluate the client device type and select the mobile theme for mobile devices

  function beforeRender() {
    // ... other code
    if ($this->RequestHandler->isMobile()) {
      $this->view = "Theme";
      $this->theme = "mobile";
    }
  }

Summary

The theme feature of CakePHP is straight forward and easy to use. You can customize your CakePHP application easily by changing the page layout or partial theming by writing single view templates of specific controller actions. The example showed how easy your application becomes mobile device aware.

You can see the full mobile theme of phTagr at http://trac.phtagr.org/browser/trunk/views/themed/mobile.

Categories: tools, user Tags: ,

Resize Control PResizeControl for Google Maps

March 20th, 2010 4 comments



This Google map control adds a dynamic resize function to Google’s map API: You can enlarge or shrink the size of your google map via the resize handle in the right lower corner of the map.

The map control PResizeControl is based on map-in-a-box from Wolfgang Pichler (which bases on Dynamically Resize Google Maps With Mouse). Compared to Wolfgang Pichler’s version it is completed as standalone Google Map control. It also embeds the resize handle image and does not need an external image file (only older IE’s below version 8 could not handle embedded data (But IMHO this is a feature – not a bug!). Further you can resize only the height or widht depending on your configuration. Minimum and maximum of height and/or width is also suppored.


<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=..."></script>
<!-- Include resize control PResizeControl -->
<script type="text/javascript" src="./presizecontrol.js"></script>
<script>
function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(52.521653, 13.41091), 14);
    // Add resize control PResizeControl with default settings.
    map.addControl(new PResizeControl());
    map.setUIToDefault();
  }
}
</script>
</head>
<body onload="initialize">
<div id="map" style="width: 450px; height: 250px;"></div>
</body>
</html>

Note: The PResizeControl is used in the open-source project phTagr – a social photo gallery for its Geo coding and map display. The javascript file ./presizecontrol.js is extracted from the source of pmap.js of the photo gallery phtagr. Updates of PResizeControl will be commited to the phtagr source.

Variables of PResizeControl

PResizeControl.mode
Resize modes. Possible values are PResizeControl.RESIZE_BOTH, PResizeControl.RESIZE_WIDTH or PResizeControl.RESIZE_HEIGHT. Default is PResizeControl.RESIZE_BOTH
PResizeControl.minWidth
Minimal width of the map. 0 disables the minimum width. Default is 150.
PResizeControl.minHeight
Minimal height of the map. 0 disables the minimum height. Default is 150.
PResizeControl.maxWidth
Maximal width of the map. 0 disables the minimum width. Default is 0 (disabled).
PResizeControl.maxHeight
Maximal height of the map. 0 disables the minimum height. Default is 0 (disabled).

More PResizeControl examples

PResizeControl: Resize Width Only


var resizeControl2 = new PResizeControl();
map2.addControl(new resizeControl2);
resizeControl2.mode = PResizeControl.RESIZE_WIDTH;

PResizeControl: Resize Height Only


var resizeControl3 = new PResizeControl();
map3.addControl(new resizeControl3);
resizeControl3.mode = PResizeControl.RESIZE_HEIGHT;

PResizeControl: Minimal Size


var resizeControl4 = new PResizeControl();
map4.addControl(resizeControl4);
resizeControl4.minWidth = 450;
resizeControl4.minHeight = 250;

PResizeControl: Maximum Size


var resizeControl5 = new PResizeControl();
map5.addControl(resizeControl5);
resizeControl5.maxWidth = 450;
resizeControl5.maxHeight = 250;
Categories: Related Links, source, tools Tags: , , ,

Eliminated Software Requirements

January 5th, 2010 Comments off

I am happy to announce with revision r505 that the software requirements are finally reduced to a minimum! phTagr requires now only a basic LAMP:

  • Webserver (tested with Apache)
  • PHP (tested with PHP5)
  • GD or ImageMagick
  • database engine (tested with mysql)

This change improves and simplifies the initial steps to run this great gallery! Further, the installation documentation was updated and improved.

exiftool and ffmpeg are no longer required to run the basic operations. Further the dependend PEAR libraries are now included into the software. The new version could be downloaded as  ZIP archive or TAR ball – happy  testing.

Without exiftool the meta data like tags, categories or geo location are imported from photos but not be written back to them. Without ffmpeg only flash movies could be imported. If you have ffmpeg other video formats are supported and the videos are automatically converted from AVI, MPEG or MOV to the flash file format. ffmpeg also creates the a video preview. If now preview exists a default image is shown.

Photo Resizer

August 21st, 2009 Comments off

Recently I looked for a nice and easy photo resize tool to downsize a heap of photos under Windows and found the coolest tool ever: Picture Resizer.

It is only 300k small and has an indirect parameterisation for the resize command. All parameters are given in the filename of the tool itself. You download the tool and rename according to the documentation.

E.g. Rename it to PhotoResize1280MSQ85O.exe and move the desired JPEGs per drag’n’drop over the exe file – done. The commands in the name say: resize the photos to maximum of 1280 pixels, copy the Meta data, with the Quality of 85% and doesn’t wait for the enter (O).

Than zip all resized pictures and upload the zip archive to the phtagr gallery. (And later I will merge the previews to the original photos with the DupFinder plugin.)

Awesome.

Categories: tools Tags: , ,

First plugin released: DupFinder

August 11th, 2009 Comments off

As by today the first phTagr plugin is released: The DupFinder plugin finds media duplicates and merges the copies to one master media.

This plugin is very helpful if first lower quality media are uploaded to phTagr and the original data are uploaded on a later stage.

Example Scenario: Bob is traveling and want to upload his new vacation images as quick as possible. However, the Internet connection at the NetCafe is slow and upload of all original media is time consuming. Bob selects the best images and creates preview of it, which he uploads to phTagr. While Bob continue to travel his friends can tag the image and write comments.

When Bob arrives at home he uploads the original media and merges the tags and comments of the previews to the original.

See the wiki page of DupFinder for more details.

Categories: announce, Related Links, source, tools Tags:

Cadaver for Windows

April 1st, 2009 6 comments

phTagr supports the WebDAV network storage protocol to upload and manage your media files. While WebDAV is supported by all common OSs it is tricky within Windows (especially without encryption and the advanced Digest Authentication Schema). Free and simple alternatives for Windows are rare. On the other hand cadaver is a simple command line WebDAV client for Unix/Linux. There is also a cadaver package for cygwin to run it in Windows – but cygwin is bloody huge.

Therefore, I created a minimalistic version of cadaver for Windows from the cygwin packages and pack them to a useful zip archive. The minimalistic version comes with the required DLLs only. You can unzip the archive and use it (of cause the origin licenses of cadaver and its dependencies applies).

screenshot-cadaver-windows

[Update] The command ‘ls.exe’ is now included to inspect the local directory. Call ‘lls’ within cadaver to see current directory content. Furthe the script ‘cadaver.bat’ sets the path of cadaver to the PATH environment variable to find ‘ls.exe’. So call ‘cadaver.bat’ instead ‘cadaver.exe’!

Download cadaver with required DLLs: cadaver-0.23.3-1 (updated version from 2011-04-29)
Download cadaver with required DLLs: cadaver-0.23.2-minimalistic-2.zip
Download all cygwin packages: cadaver-0.23.2-minimalistic.pkgs-2.zip

Enjoy.

Categories: tools Tags: , ,

WordPress Plugin gSlideShow

August 16th, 2008 Comments off

As mentioned in the post Embedded Slideshow for Your Side I wrote a small WordPress plugin called gSlideShow, which embeds the JavaScript slideshow of your Media RSS in your sidebar. With the plugin it is easy to link your newest images from phTagr to your blog. It is based on on the WordPress plugin FlickrRSS and the plugin is now available – online at wordpress.org!

Just download and install the plugin and enter the Media RSS from phtagr (explorer/media/media.rss). Enjoy.

Categories: tools Tags: , , , ,