Footer/Icon stays at the bottom of screen

I were looking for ways to fix some icons to be shown at the bottom of the screen and came across the following code. I haven’t test the code yet but it should fit my need.

html {
  position: relative;
  min-height: 100%;
}
body {
  margin: 0 0 100px; /* bottom = footer height */
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
}
Advertisements

animateTransform for a group of objects in SVG using InkScape

I recently try to do a presentation in SVG and wanted to do some simple animation on some of the components in the presentation. First of all, I am lucky to come across the Sozi extension for Inkscape. The extension makes Inkscape able to produce presentation very similar to Prezi.

With the framework setup, now it is time to do some element animation. Immediately, I encountered a problem, I used text editor (VIM) to edit the SVG file in order to insert the animation for the elements. The problem I encountered was that when I try to animate (e.g., rotating and scaling) a grouped objects, I cannot find the center. Even I calculate the center correctly, the rotation or scaling behave strangely.

After a few try and hacking, I eventually find a way create grouped object which can be moved or scaled without effecting the animation within the group.

Step 1. Create the component so that its center is at (0, 0) (upper left-hand coiner of Inkscape paper).

Step 2. Add the necessary animation code and put the code inside the group.

Step 3. Add an outer group to the group. In this way, When the group is moved, scaled or rotated, the transformation matrix will be add on the outer most group.

<g id="outer-group">
  <g id="inner-group">
    <path ... />
    <path ... />
    <animateTransform
      attributeType="xml"
      attributeName="transform" type="rotate"
      values="0; 360" dur="2s"
      repeatCount="indefinite" />
  </g>
</g>

The idea is that the inner group cannot have transformation matrix in it, otherwise,

Sleeping and Wake up of Perl script

I am working on a system that requires a Perl script to sleep when it is idle and wake up when new “job” arrive. After some search, the following is what I end up with:

$SIG{ALRM} = sub { print "Alarm!\n"; };
while (1) { # process loop
  if ($therearejobs) {
    # process the job
    ...
  }
else {
  print "No job, I am going to sleep now!\n";
  $st = sleep;
  print "Ok, after $st second, I am back to work.\n";
  }
}

To communicate with the about script, one can send alarm signal to the script by issue a kill command as follows:

kill -14 pid

Where -14 is the signal number of ALRM (alarm).

Joining MP4 files with mp4box

Recently I need to join some mp4 files (parts of a movie) back into one single file.  The best result that I got was from a program called MP4Box.  Because what I need is just to join these files together into a single file without changing format, MP4Box did a very good job.  The voice and the picture are perfectly in sync in the final result.  The command I used is:

mp4box -cat 0.mp4 -cat 1.mp4 -cat 2.mp4 ... -new result.mp4

However, there is one small problem.  The duration information for the final result is not correct.  It is much longer than the actual duration of the movie.  This may not be a problem if you are going to watch the movie from begin to end.  It does become a problem when you want to seek to the middle of the movie. I tried many different options in mp4box without any luck. I finally decided to look into the raw data of the result mp4 file. After a few trial and error, I finally found out where the duration information is stored. It appeared in two places (at file offset 0x34 and 0xC1) in the header of the mp4 file. The number was stored as a 4-byte integer with the higher significant digit stored in lower offset. I then used a Hex editor to modify the number to correct duration. When the result file was opened in a player, the duration was correct and the problem was fixed.

For example, let’s say that the correct duration is 1:24:35.013 (scale is 1000), then the number I need to put in 0x34 and 0xC1 is

(((1*60)+24)*60+35)*1000+13
= 5075013 = 0x004D7045

Thus, the number 0x004D7045 will be placed into 0x34 and 0xC1 with higher significant digit first as follows:

Address: 34 35 36 37
Content: 00 4D 70 45

I am thinking of writing a simple program to automate the process whether than edit the file by hand.

Web page template with Ajax

In modern web page design, we usually use some kind template system to make all pages to have the same layout and/or menu structure.  The most common way is to use PHP or some kind of server-side script to format your pages.  This is great if you have server-side scripting capability.  For site without server-side scripting capability, Ajax may be used.  The common way to use Ajax is to have template as the main page and use Ajax to load different page content in the web site.   This is good except that it posts problem for the search engine to index the content of your site.  Also, browser without Javascript enabled will not be able to view your site.  My solution for this is simple.

Continue reading “Web page template with Ajax”

Installing nginx + php in Windows

I recently found a light-weight web server called nginx and want to give it a try. Installing nginx in Windows 7 was simple, just put the content of the zip into a directory and run the nginx.exe file.  My main purpose of installing the server is try to test out some PHP programs, and installing php was a bit more complicated.  Luckily, I found a web page talking exactly what I was looking for. Continue reading “Installing nginx + php in Windows”