PHP: get relative path expression

The following code calculate the difference of paths given and return a relative path expression.

 


function getCommonPos($s0,$s1)
{
  $len=strlen($s0);
  $len1=strlen($s1);
  if($len1<$len)
    {
      $len=$len1;
    }
  while($s0[$i]==$s1[$i] && ++$i<$len1);
  return $i;
}

function diffStr($s0, $s1)
{
  $pos=getCommonPos($s0,$s1);
  $end=strrpos(substr($s0,0,$pos),"\\");
  return substr($s0,$end);
}

function countSlashes($str)
{
  return substr_count($str,"\\");
}

function getRelativePath($p0,$p1)
{
  $p0=realpath($p0);
  $p1=realpath($p1);
  $dir=diffStr($p0,$p1);

  if(!empty($dir))
    {
      $n=countSlashes($dir);
      $path="";
      for($i=0;$i<$n;$i++)
    {
      $path.="..";
      if($i<$n-1)
        {
          $path.="\\";
        }
    }
    }
  $newDir=diffStr($p0,$p1);
  $newDir=$path.$newDir;
  
  if(empty($newDir))
    $newDir=".";

  return $newDir;
}

Creating bookmarks with Silhouette Cameo

As the Silhouette Cameo is here, I wrote a Java program to draw regular convex polygons and cut out shapes from paper.  The photo shows the final product, a bookmark.  You can put any of your design into 'production'.  With Silhouette Cameo, you get the final products right away. 



The Studio software detects the outline of shapes automatically.  The procedure would be as follows:

1. Print out shapes with your own software or draw it with Studio.
2. Select Object|Trace... from the menu. 
         
   
         
   1. Click the "Select Trace Area" button.
            
   2. Select the area of the figure.
            
   3. Select "Trace Outer Edge".
            
   4. The red line appears surrounding the image.
            
   5. Delete the original image.
            
   6. Edit the outline.  Typically you would want to "Edit Points" from the left column of the window.
            
   7. When the editing is done, click the Silhouette icon from the tool menu.
            
   8. Place the paper on the cutting mat and set it to the machine.
            
   9. Click "Cut" button when everything is ready.
           

Send any shapes to Silhouette and find designs of your choice.  Try cutting shapes and figure out balances and sizes that fit your needs.  

Silhouette Cameo arrived

Silhouette Cameo, the cutting machine arrived yesterday.

Silhouette Cameo

This is the machine of the future. Basically what this machine does is to cut flat and thin materials in any shapes that you specify. It should cut anything paper made that you look at in our lives, including packages, cards, paper craft, etc.

Shamrock

What more, it can detect markings on a printed surface. Any figures that can be printed out on a piece of paper can be cut out. There are a lot of designs for 3D models made out of paper.

A word of caution is that creating cutting pattern can be a little tricky and time consuming. Very thin materials such as copy paper needs extra caution to take it off from the adhesive mat. Heavier thicker paper than copy paper would do a better job.

This paper cutting machine opens up great many fronts in many areas of technologies, sciences, and crafting. This is an excellent tool for education as well. Cut shapes would appeal more to students. The assembled 3D models is much more than the printed images of polygons. Printing out the images of makes 3D modeling not only makes it much more fun but means even more to students of science when it has three dimensions.

Free download of the Silhouette Cameo Studio is here: silhouettestudio

Screen refresh trigger of an input element value or src change

To which extent does a browser redraw the screen?  Would an element's value change trigger refreshing the screen?  

It turns out to be that the Javascript's setting values of an element, actually does not trigger redrawing. 

document.getElementById("test").value="new value";

What puzzled me was, why then the browser redraw the screen in case with setting an img element's src?

document.getElementById("test").src="data:image/png;base64, ...";

This makes it trickier to implement functions that changes value, or src since the behavior will differ when you would want to retain some values for the session.  

I hit upon this problem when I tried to implement a div section that is shown and hidden at a trigger of pressing a button.  The functionality was implemented in the Javascript function and first I implemented it so that it alter the value of an input element.  It worked.  When you press the button, the Javascript function altered the value of the type='button' input element, without refreshing the screen, that is retaining all the variable values.  Then I switched it so that it would alter an image of an type='image' input element.  Now it does not work.  It reset and initialized the screen, namely to a certain initial state and not the state that was specified as.