Persistent Inappeasable Mind - Software hints

AngularJS: show progress of a form by counting the number of disabled fields

nospam@example.com (Matjaž Kljun) — Mon, 04 Mar 2013 09:54:00 +0100

Let say we have a survey with many questions. Some questions are enabled and some disabled at first and this keeps changing based on what is selected or entered. At any given time we want to know the count of all fields in a form, how many of them are disabled and how many still required. The number of all and required fields is easy as AngularJS keeps an array of all form elements. Disabled elements are something else.

Counting disabled fields can be a challenge if many radio buttons are used, as every radio button is counted as one element.

Lets take this code for example:

 <!doctype html>
 <html>
    <head>    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>
    
    <form>
     <input type="radio" name="typeComputer2" disabled> 1<br>
     <input type="radio" name="typeComputer2" disabled> 2<br>
     <input type="radio" name="typeComputer2" disabled> 3<br>
    </form>           
    <div id="res"></div>

    <script>
      var bla = $(':disabled').length;
      $('#res').text("Number of disabled elements: " + bla);
    </script>
    </body>
 </html>

Will produce this:

The number of disabled elements is 3. But in fact this is the same group of radio buttons and could be counted as one element (only one radio button can be selected at once).

Lets look at the solution using AngularJS.

We have this HTML document with 3 form elements.

First one is 3 radio buttons that are disabled and not required until the checkbox is selected
Second is a required radio button
Third is a required input field

<html ng-app>
  <head>
     <script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
     <script src="controller.js"></script>
  </head>
  <body>           
    <div ng-controller="ctrlRead">

      <form name="survey">
        <input type="radio" name="n1" value="1" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 1<br>
        <input type="radio" name="n1" value="2" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 2<br>
        <input type="radio" name="n1" value="3" ng-model="s.el1" 
                        ng-required="s.el2" ng-disabled="!s.el2"> 3<br><br>

        <input type="checkbox" name="n2" ng-model="s.el2" ng-required="true"> a<br><br>

        <input type="text" name="n3" ng-model="s.el3" ng-required="true">
      </form>           

      <div id="res"> 
        Disabled: {{eDisabled}} <br>
        All: {{eAll}}  <br>
        Required: {{eRequired}} <br>
        Done in %: {{eDonePercent}} <br>
        Valid: {{survey.$valid}}
      </div>

    </div>
  </body>
</html>

Now we need to write our controller.js

function ctrlRead($scope, $timeout) {

  //a variable to store our survey data
  var s = {}; 
  $scope.s = s;

  //watch for the sur variable to change
  $scope.$watch("s", function () {
     //timeout to fire events 100ms later 
     //for DOM to register the changes
     $timeout($scope.countPercentageDone, 100);
  }, true);

  $scope.countPercentageDone = function() {      
    var requiredTrue=0;
    var requiredFalse=0;
    var disabledElementNames = new Array();    
 
    if ($scope.survey) { 
      //this traverses the form elements stored in form name
      $.each($scope.survey, function(index, value) {
        //survey holds other elements ... 
        //only form elements have $error object
        if ($scope.survey[index].$error) { 
          if ($scope.survey[index].$error.required == true) {
            requiredTrue++;
          } else {
            requiredFalse++;
            //check if the form element is disabled
            if ($("[name="+$scope.survey[index].$name+"]:disabled")) {
              //if it is and it is not just element filled in 
              //element also become disabled once filled in!!
              if ($("[name="+$scope.survey[index].$name+"]:disabled").length != 0) { 
                disabledElementNames.push($scope.survey[index].$name);
              }
            }
          }
        }
      });
    }

    $scope.eDisabled = disabledElementNames.length;
    $scope.eAll = requiredTrue+requiredFalse;
    $scope.eRequired = requiredTrue;
    $scope.eDonePercent = 100-((requiredTrue*100)/(requiredTrue+requiredFalse-disabledElementNames.length));
  }

};

To summarise the code:

We traverse all form elements in the $scope.survey array.
Because this array contains other elements as well as form elements, we have to look only at those that have an $error object defined.
In all elements that are not required we look for those that have lenght > 0.
We do this because elements that we fill in also become disabled by AngularJS.

This example is also available in jsfiddle.

For the progress bar we could use bootstrap:

  
  <div class="progress">
     <div class="bar" style="width: {{eDonePercent}}%"></div>
  </div>

or any of the solutions I wrote about here to support older browsers.

A big thanks to Tine for all the suggestions and help.

Bootstrap progress bar in 100 images for older browsers

nospam@example.com (Matjaž Kljun) — Mon, 11 Feb 2013 06:33:00 +0100

These are assumptions taken here:

Bootstrap progress bars are nice
They do not work in IE 6-9 (I really wonder why 24% of web users don't upgrade their browsers):
"Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox."
I needed a progress bar for a web form that would work in all browsers
I'm calculating how much of a web form is completed with AngularJS and change the progress bar on he fly.

Let's start.

1. Create 100 progress bars using a php loop and a Bootstrap progress bar code:

 <!doctype html>
 <html>
    <head>    
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
        <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div id="progress_bar" style="width: 500px; margin: 10px auto 0 auto">
            <?php
            for ($i=0; $i<101; $i++) { 
                echo '  <div class="progress" style="margin: 2px">
                            <div class="bar" style="width: '.$i.'%"></div>
                        </div>';
            }                    
            ?>
        </div>
    </body>
 </html>

It is possible to use other colours and stripes, etc ... but I'll use simplest progress bar. Keep in mind that my outer div is 500px wide as this is the size of a progress bar I wanted.

2. Crop the progress bars from a web page produces by the above code

The simplest way is to use Awesome screenshot extension for Chrome, Safari or Firefox. It is also good to cut down the image size with e.g. re-saving it for the web so it would be smaller in size (not resolution).

I ended up with this image (original size can be downloaded here):

This can be already the end of the story. The only thing wee need is to use this image as a background of a div and slide up or down based on the percentage we want to show.

3. Show the progress bar

3.1 Using CSS background-position and AngularJS binding

 <div style="float: left;">Progress: </div>
 <div style="width: 500px; height: 22px; float: left;
                  background-image:url('progressbar_small.png'); 
                  background-position:0px -{{Math.round(22*(percentage))}}px;">
 </div>

Each progress bar is 22px high and I multiply it with the percentage I calculate based on how much of the form is filled in. I also use the Math JS in binding for multiplication (maybe there's a better way but I'm not aware of any). To do this I had to define the Math object in my $scope this way $scope.Math = window.Math;

For some reason the above did not work in IE 8 (which I really care about). Although it apparently works on some web sites. So i decided to slice up the above image in 100 images.

3.2 Using individual images

This is not the optimum solution as for every change there is an Ajax get call to retrieve a desired image. We did this only once in the above example.

This procedure was also explained in a previous post.

First I sliced up the image with ImageMagick using a crop flag (the second command should be in one line) using a bash one line script:

 mk@here/$ ls
 progressbar_small.png

 mk@here/$ for((i=0; i<101; i++)) ; do n=$[i*22]; \ 
          convert progressbar_small.png -crop 500x22+0+$n +repage progressbar${i}.png; \
          done

 mk@here/$ ls
 progressbar0.png    progressbar32.png  progressbar56.png  progressbar7.png
 ...
 progressbar2.png    progressbar53.png  progressbar77.png  progressbar_small.png

The -crop flag slices up images 500px wide and 22px high and starts at 0px on the X axis and goes down 22*i where i runs from 0 to 100. The end results are 100 images.

And finally the HTML bit:

 <div style="float: left;">Progress: </div>
 <div style="width: 500px; height: 22px; float: left;">
     <img src=progressbar{{Math.round(22*(percentage))}}.png">
 </div>

All images are available in this zip file.

I hope this can help someone.

Any other suggestions greatly appreciated.

A big thank you to Tine for all the suggestions and help.

Slice up an image in equal slices with ImageMagick or a progress bar in 100 images

nospam@example.com (Matjaž Kljun) — Mon, 04 Feb 2013 07:38:00 +0100

Let's assume we need a progress bar in 101 images where each shows a particular percentage form 0 to 100. How to create such image will be explained in the next post (not ready yet at the time of writing). I already prepared the image here.

The easiest way to slice up an image is in a command line using ImageMagick's a crop flag. The first command shows the image file we are going to slice. The second command (which should be in one line) is a simple a bash for loop and in each iteration we create a new slice. The third command just lists files that we created.

 mk@here/$ ls
 progressbar_small.png

 mk@here/$ for((i=0; i<101; i++)) ; do n=$[i*22]; \ 
           convert progressbar_small.png -crop 500x22+0+$n +repage progressbar${i}.png; \
           done

 mk@here/$ ls
 progressbar0.png    progressbar32.png  progressbar56.png  progressbar7.png
 ...
 progressbar2.png    progressbar53.png  progressbar77.png  progressbar_small.png

The -crop flag slices up images 500px wide and 22px high and starts at 0px on the X axis and goes down 22*i where i runs from 0 to 100. The end results are 100 images.

All images are available in this zip file.

LaTeX - insert a PDF table as an image in a table environment

nospam@example.com (Matjaž Kljun) — Mon, 17 Dec 2012 06:31:00 +0100

On of the most painful (at least IMHO) things to create in LaTeX are complex or big tables. It is easier to make them in a spreadsheet software (Libreoffice Calc, MS Excel or even Word) and export them as PDFs (either File->Export as PDF, File->Save as or using PDFCreator). It is possible to insert PDFs as images in figure environment like this:

\begin{figure}[!ht]

 \begin{center}

   \includegraphics[width=0.85\textwidth]{images/table-frameworks-overlap.pdf}

 \end{center}

 \caption{Similarities and overlap between the two PIM frameworks}

 \label{fig:table-frameworks-overlap}

\end{figure}

However, this caption starts with the word "Image X: ..." while I want to have a caption stating with "Table X: ...".

It is possible to insert a PDF in a table environment as well like this:

\begin{table}[ht]

  \caption{A table}

  \centering

  \begin{tabular}{c}

    \begin{center}

      \includegraphics[width=0.85\textwidth]{images/table-studies.pdf}

    \end{center}

  \end{tabular}

  \label{tab:}

\end{table}

If a PDF needs to be cropped you can do it like this:

                                                       %left, bottom, right, top
\includegraphics[width=0.85\textwidth, clip=true, trim=0cm 0cm 0cm 0cm]

You might also need the following package:

\usepackage{graphicx}

Add a blur to a part of a video with Avidemux

nospam@example.com (Matjaž Kljun) — Sat, 14 Jul 2012 10:16:44 +0200

I made a video of how to emphasize (add a circle over a face) things in a video with Avidemux. The same can be done for adding a blur with a different filter - Mplayer delogo.

However, blurring just one part of the video with the Mplayer delogo filter once failed on me. I wanted to add a blur just for five seconds over a face in a longer video. If I didn't specify the frames (Partial button in step 5 of the previous tutorial) I got the blur over the whole length of the video. With Partial selected I ended up with a destroyed video.

Let say I want to add a blur from the frame 500 to the frame 600 on a video of 1000 frames.

1. Split the video in 3 parts
Use the reddish buttons A & B at the bottom of the video to select UNDESIRED parts of it and use Edit->Delete to cut bits of the video out. Save each part as it's own file (no encoding needed so both video and audio remain on Copy) so we end up with 3 files: first from frame 0-499, second from frame 500-600 and third from frame 601-100.

2. Add a blur to the second video file
Use the procedure of the previous tutorial but select Mplayer delogo as a filter (and don't forget to encode the video).

3. Concatenate the three videos.
Open the first one and select File->Append to add the other two in the right order

Here's the video (sorry I forgot to turn the mic on but it's short and self explanatory).

Add circle, logo, image or blur to video with Avidemux

nospam@example.com (Matjaž Kljun) — Mon, 25 Jun 2012 02:37:30 +0200

I needed to add a red circle on a video to emphasize the content over a period of a few seconds. It turns out that this is fairly simple with Avidemux.

Steps:
1. Create a PNG image of a circle with a transparent background (I did it in Gimp and its beyond this tutorial)
2. Open a video file in avidemux.
3. From the menu select Video -> Filter to open Video Filter Manager, then select Miscellaneous on the left and doubleclick on Logo (add a png as logo) on the right.
4. In new window select a logo file, enter X and Y positions in pixels from the top left corner, choose transparency (0 means fully transparent and 255 not) and click OK button.
5. Back on Video Filter Manager click on Partial button on the bottom of the window, in a new window enter the frames (which can be found out on the main video window) and click OK button.
6. Click on the Close button on the Video Filter Manager to return to the main video window and left to the video select the encoding type instead of default Copy.
7. Just re-save the video.

A logo can be added the same way, just don't use a partial filter (step 5) and alpha should be 255 (no transparency in step 4).

To blur a certain part of a video (square shaped), just use another filter instead (step 3): Mplayer delogo, enter the position and size of the blurred square/rectangle area.

To move an image (circle) together with the video (for example to follow the face of a person) use several Logo filters and adjust X and Y accordingly to each of them.

Taps 13: confusing pulling and turning

nospam@example.com (Matjaž Kljun) — Wed, 23 May 2012 12:00:46 +0200

This one was tricky even for me, not to mention my son who tried to rotate the left knob (the right one is for soap) for at least a minute before he started to complain. The tap has usual two features:

Controlling the flow: by pulling out the little stick on the knob out
Controlling the temperature: by turning the knob left and right

Also not clear is on which side the temperature is cold and on which hot.

Multiprotocol IM clients on OS X - a list I have tried so far

nospam@example.com (Matjaž Kljun) — Fri, 30 Mar 2012 06:14:00 +0200

IM is one of the PIM applications I often rely to. I still use ICQ for that matter (and AIM, Yahoo! MSN, Skype). For anyone who needs a multiprotocol IM client on Mac OS X. I won't go into details and what I like/dislike about these clients as it is a personal thing. Some are more developed than others. Some are more native than others. Some ore more opensource than others. And some are easier to set up than others.

Make Skype (5.3 OS X) show your contacts instead of recent history on the left sidebar

nospam@example.com (Matjaž Kljun) — Tue, 20 Sep 2011 06:50:00 +0200

The new version of Skype for OS X (5+) received a lot of negative comments from users. It is getting better but I was still missing to see all my contacts at once.

I know it is possible to open the Contacts monitor, but that is a separate always-on-the-top window. Instead I wanted to see all my contacts on the left sidebar. On default, the left sidebar or sidepanel includes the most useless information possible: a log of my last conversations - my history of Skype usage. I couldn't care less who I called. I call people when I need them and not based on looking at my history ;).

However, it is possible to have all contacts on the left if they are added to favorites (as of version 5.3):

1. Click on the Contacts on the left side below the username

2. In Contact list click on the white star on the right of the first contact's name (it becomes grey after a click)
A new category Favorites shows in the left sidebar.

3. Keep clicking until all your contacts are on the left

Not the fanciest solution, but it works.

Now the dial pad windows pops up automatically every time I open Skype, but I'm not giving up on new UI yet :)

OS X equivalent to lsusb

nospam@example.com (Matjaž Kljun) — Sat, 10 Sep 2011 06:18:00 +0200

This is one of the (not many) annoyances using a Mac computer :). Not all Linux/Unix terminal commands work. One of them is lsusb. I tried it and got "command not found". Then I tried to install it via MacPorts (sudo port install usbutils with no luck). Then I checked the web and found out that some people compiled the code and apparently it works (read comments). But I did not want to compile anything. I knew there should be a OS X equivalent. I found this French and this German page (both languages that I don't understand) and found this command:

$ system_profiler SPUSBDataType

PCI Vendor ID: 0x8086 Bus Number: 0x3a USB Bus: Host Controller Location: Built-in USB Host Controller Driver: AppleUSBUHCI PCI Device ID: 0x2830 PCI Revision ID: 0x0003 PCI Vendor ID: 0x8086 Bus Number: 0x1d ..........

I wanted to share this in English as well.

And yes, the output is not the same as with lsusb.

EDIT (26. 7. 2012): Takaite (comments) shared the tip to get this info graphically:

Click on the Apple in the left top corner
Select About this mac
Click on the button More info
In the contents select Hardware->USB

Or you can go to Applications->Utilities->System profiler

Running out of inodes, no space left on device, php not cleaning sessions

nospam@example.com (Matjaž Kljun) — Wed, 20 Apr 2011 14:38:00 +0200

Today I run into a weird problem. When I tried to open my (Serendipity) blog I got this strange error:

Query failed: 

SELECT 
                    
	e.id,
	...
	ORDER BY timestamp DESC
	LIMIT 15

/ Can't create/write to file '/tmp/#sql_6ee_0.MYI' (Errcode: 28)

I was kind of puzzled. All other sites were working fine (such us wiki and list of pim prototypes). I sshed to a server and checked the disk usage:

myusername@pim:~$ df -h
Filesystem            Size  Used Avail Use% Mounted on
/dev/sda1             3.8G  3.0G  685M  82% /

Everything fine here. I checked the /tmp folder

myusername@pim:/tmp# ls -la 
total 32
drwxrwxrwt  4 root root 20480 Apr 18 12:42 .
drwxr-xr-x 22 root root  4096 Apr 18 11:20 ..
drwxrwxrwt  2 root root  4096 Mar 24 22:42 .ICE-unix

Nothing strange here either. I tried to login to mysql:

myusername@pim:/tmp$ mysql -u myusername -p
Enter password: 
Welcome to the MySQL monitor

Everything worked fine. So I checked the ERROR 28 the web page was giving me

myusername@pim:/tmp$ perror 28
OS error code  28:  No space left on device

I tried to create a file with no success:

myusername@pim:/tmp$ touch bla.txt
touch: cannot touch `bla.txt': No space left on device

Then I googled a bit and found out that I might be running out of inodes.

myusername@pim:/tmp$ df -i
Filesystem            Inodes   IUsed   IFree IUse% Mounted on
/dev/sda1             250976  250957      19  100% /

Yep, that was it. Now I had to find which folder had a lot of files that were taking up the inodes (as root). Not all results are shown in the below output.

myusername@pim:/var$ cd /
myusername@pim:/$ sudo bash 
root@pim:/$ for i in /*; do echo $i; find $i -type f | wc -l; done
/bin 91
/boot 23
/dev 346
/etc 745
/home 5
/lib 1709
/media 0
/proc 11435
/root 5
/sbin 103
/sys 3863
/tmp 0
/usr 45188
/var    186774

I went to /var and run the same command

root@pim:/var$ for i in ; do echo $i; find $i -type f | wc -l ;done
backups 1
cache 55
lib 173682
log 47
mail 2
run 16
spool 19
www 12950

So I needed to check /var/lib

mkljun@pim:/var/lib$ for i in ; do echo $i; sudo find $i -type f | wc -l ;done
apt 9
doc-base 37
dpkg 2342
misc 2
mlocate 1
mysql 665
php5 170453
screen-profiles 21
ucf 23
xml-core 2

The folder /var/lib/php5 contained 170k files! It was kind of strange why all these files were not deleted after a session timeout. I certainly did not have 170k users visiting my pages (I wished this to be true though).

root@pim:/var/lib# cd php5
root@pim:/var/lib/php5# ls -l | wc -l
170453

I checked the maximum time set for a php5 sessions to live.

root@pim:/var/lib/php5# /usr/lib/php5/maxlifetime
24

24 minutes. I decided to delete older files.

root@pim:/var/lib/php5# find /var/lib/php5/ -type f -cmin +$(/usr/lib/php5/maxlifetime) -print0 -exec rm {} \;
root@pim:/var/lib/php5# ls -la
total 11768
drwx-wx-wt  2 root     root     12017664 Apr 18 12:35 .
drwxr-xr-x 38 root     root         4096 Sep 22  2010 ..
-rw-------  1 www-data www-data      168 Apr 18 12:23 sess_389b8191e2563e8bb43c41e20e015c0d
-rw-------  1 www-data www-data      118 Apr 18 12:11 sess_52c9acc7779f5cfd7e7e92a900fe7f19
-rw-------  1 www-data www-data      160 Apr 18 12:27 sess_bb8cfa842ceb0027cc9e4082ad8b0419

I checked the inodes usage.

root@pim:/tmp# df -i
Filesystem            Inodes   IUsed   IFree IUse% Mounted on
/dev/sda1             250976   80524  170452   33% /

That was it.

Why PHP is not deleting expired sessions is another question. I went to my php.ini file and found this:

; After this number of seconds, stored data will be seen as 'garbage' and
; cleaned up by the garbage collection process.
session.gc_maxlifetime = 1440

; NOTE: If you are using the subdirectory option for storing session files
;       (see session.save_path above), then garbage collection does not
;       happen automatically.  You will need to do your own garbage
;       collection through a shell script, cron entry, or some other method.

So all I needed to do was to create a cron job (I decided to rut it every hour as root)

root@pim:/tmp# crontab -e 

0      /usr/bin/find /var/lib/php5/ -type f -cmin +$(/usr/lib/php5/maxlifetime) -print0 -exec /bin/rm {} \;

Hopefully this will help some other soul out there.

A list of open source PDF applications

nospam@example.com (Matjaž Kljun) — Wed, 30 Mar 2011 07:22:00 +0200

A week ago, Lifehacker published a list of 5 best PDF applications. They are all closed source and some cost money. Nothing wrong with it, but I thought that many open source alternatives exist. So I made a list of open source PDF applications I'm using. Some very often and some occasionally.

Sumatra: a lightweight PDF viewer for Windows [blog.kowalczyk.info]
PDFCreator: a PDF printer for Widows (prints PDF's from any application) [www.pdfforge.org]
PDFsam: crossplatform splitting and merging PDF documents [www.pdfsam.org]
PDFEdit: a powerful PDF editor for Linux [sourceforge.net]
PDF import extension for OpenOffice 3: a nice crossplatform PDF editor (for OOo Draw or Impress) [extensions.services.openoffice.org]
Skim & Formulate pro: PDF annotating for OS X: [skim-app.sourceforge.net] [code.google.com]
Ghostscrip and Ghostview :) [pages.cs.wisc.edu/~ghost/]

I might have missed some. In my opinion these are nice tools that can do pretty much everything wtih PDFs.

FormulatePro - add an image to a PDF file

nospam@example.com (Matjaž Kljun) — Sat, 18 Dec 2010 15:33:50 +0100

In a previous post I explained how to add an image to a PDF in OS X Preview. That procedure involves converting a PDF to an image and than back to a PDF which looses all the PDF benefits. I needed a quick and dirty solution and I did not dig into other applications which could do a better job. I posted the tip to Mac OS X Hints which received a lot of negative comments :) and a lot of better solutions and I learned about better ways of achieving this.

Among all, I liked best the application called FormulatePro which even provides a simpler solution.

1. Download the FormulatePro

2. Open the PDF

3. Select File -> Place Image, choose the image and move it to a desired place.

4. Select File -> Save and the job is done.

Thanks all for the suggestions in comments at Mac OS X Hints.

OS X Preview - add an image to a PDF file

nospam@example.com (Matjaž Kljun) — Wed, 15 Dec 2010 08:19:00 +0100

EDIT 18. 12. 2010: I posted a better solution with FormulatePro.

EDIT 17. 12. 2010: Before commenting - As said at the end, this procedure is quick and dirty adding an image to an existing PDF AND the end result is an image converted to PDF which has lost all PDF advantages and benefits! Such documents are fine for e.g. quick printing. For better results try the command line tool pdftk (options stamp or multistamp), Formulate Pro, or Acrobat Pro.

I wanted to add a logo of a university (a PNG image) on a document I had in PDF. It is fairly simple to do this in Preview:

Document.PDF

1. Convert the PDF to an image with File -> Save As -> ... Choose PNG as a Format and change Resolution as desired

Logo.PNG

2. Switch to the logo image and select the whole image with Edit -> Select All (Command+A) (or select just a part of it with a mouse if you wish)

3. Copy the selection Edit -> Copy (Command+C)

Document.PNG

4. Back on the document (which is now the PNG image!) paste the selection with Edit -> Paste (Command+V) and resize it as you wish

5. Save it as PDF with File -> Save As -> ... Choose PDF as Format (rename it if the original PDF needs to be preserved!!!!).

There are some drawbacks in this procedure (a PDF made from an image is not searchable), but that's another story :).

OS X Finder versioning and duplicating files or folders

nospam@example.com (Matjaž Kljun) — Sat, 20 Nov 2010 08:12:00 +0100

I just found out about the interesting file manipulating techniques in Finder file manager:

Option (ALT) + dragging the file or folder in its own parent folder: creates a new version of a file or folder by adding a consecutive number in the file or folder name.

Examples:
- Dragging a file named Thesis.doc to its parent folder (while holding down the Option key) creates a file named Thesis 2.doc
- If the extension of the file is more exotic (e.g. printer.ppd) it will add the consecutive number after the extension (e.g. printer.ppd 2).
- If the name of the file has the integer number preceded by the space (e.g. Thesis 2.doc) it will add the consecutive number (e.g. Thesis 3.doc)
- If the number is not integer or is not preceded by the space (e.g. Thesis2.doc, Thesis 1.3.doc) it will just add the number 2 to it (e.g. Thesis2 2.doc, Thesis 1.3 2.doc)
- If numbers are preceded by zeros (e.g. Thesis 002.doc, 001.doc, 00.doc) it will delete them (e.g. Thesis 3.doc, 2.doc, 1.doc)
- If multiple files are dragged and dropped (e.g. Thesis 2.doc, Thesis 3.doc, Thesis 4.doc), it will add consecutive numbers from the highest of them (e.g. Thesis 5.doc, Thesis 6.doc, Thesis 7.doc)
Command + D: creates a new file of folder and adds the word copy to it

E.g.: Thesis.doc will be copied in a new file named Thesis copy.doc

Original post at Mac OS X Hints.