2010-07-12

X10 Mini Pro Cardboard Stand

X10 Mini Pro Cardboard Stand
I found a iPhone cardboard stand and liked the idea, so I created a version for the X10 mini pro. It's a passive stand, but you can use it with the usb cable connected.


Download the pdf template here.

I did a video of the first build, too:

At No comments:
Labels: ,

2010-05-09

Highlight Words In HTML

I got an interesting question on IRC recently. How can you highlight some words/word parts in an HTML document?

The Challenge

  • Wrap given words in text content with a span.
  • Add a class to the span depending on the word.
  • Do not touch elements, attributes, comments or processing instructions.
  • Do it case insensitive.
  • Do it the safe way.

Select The Text Content

Well this is the easy part. Get some FluentDOM object, find the part of the document to edit, select all text nodes in it.

$fd = FluentDOM($html, 'html')
  ->find('/html/body')
  ->find('descendant-or-self::text()');

I used two Xpath expressions because it are two steps. This way I can separate them later. In a single expression I could use the short syntax for the axis, shortening it to "/html/body//text()".

Loop

FluentDOM provides an "each()" method, expecting a callback for argument. The callback is executed for each node (in this case each text node). The first argument of the callback is the node itself.

$fd->each(
  function ($node) use ($check, $highlights) {
    ...
  }
);

Prepare The Words

$highlights = array(
  'word' => 'classNameOne',
  'word_two' => 'classNameTwo'
);

I need to check each node against the words and split it at the words. Is is a text value now, so the tool of choice are PCRE. To build a pattern from the words I sort them by length first, then loop, escape and concatinate them. The sorting is important if one word is part of another.

uksort(
  $highlights,
  function ($stringOne, $stringTwo) {
    $lengthOne = strlen($stringOne);
    $lengthTwo = strlen($stringTwo);
    if ($lengthOne > $lengthTwo) {
      return -1;
    } elseif ($lengthOne < $lengthTwo) {
      return 1;
    } else {
      return strcmp($stringOne, $stringTwo);
    }
  }
);
$check = '';
foreach ($highlights as $string => $class) {
  $check .= '|'.preg_quote(strtolower($string));
}
$check = '(('.substr($check, 1).'))iS';

Check And Divide

This pattern can now be used to check, as well to divide the text. A direct replace would be a bad idea, because I need to insert a new element node (the span). Creating nodes using the DOM functions takes care of any special chars.

if (preg_match($check, $node->nodeValue)) {
  $parts = preg_split(
    $check, $node->nodeValue, -1, PREG_SPLIT_DELIM_CAPTURE
  );
  ...
}

The option PREG_SPLIT_DELIM_CAPTURE puts the submatch into the $parts array, too. So it is possible to loop over all parts in their original order.

To Wrap Or Not To Wrap

The $parts array contains the words as well as the text around in separate strings. For each word, a span with the class is needed, all other become separate text nodes.

foreach ($parts as $part) {
  $string = strtolower($part);
  if (isset($highlights[$string])) {
    $span = $node
      ->ownerDocument
      ->createElement('span');
    $items[] = FluentDOM($span)
      ->addClass($highlights[$string])
      ->text($part)
      ->item(0);
  } else {
    $items[] = $node
      ->ownerDocument
      ->createTextNode($part);
  }
}

You now see the reason why I used lowercase versions of the words for keys in the $highlights array. It is easy to check if the $part is a word and get the class for the span.

Replace The Text

The last step is easy again, replace the node with the list of created ones.

FluentDOM($node)->replaceWith($items);

More

This is the basic solution and will only work with PHP 5.3, but I created another version defining a class. You can find the full source of the class example in the FluentDOM SVN at svn://svn.fluentdom.org in examples/tasks/highlightWords.php or on Gist.

At 6 comments:
Labels: , , , ,

2010-04-10

Using PHP DOM With XPath

Often I hear people say "We use SimpleXML, because DOM is so noisy and complex". Well, I don't think so. This article explains how you can parse a XML (an Atom feed) using the PHP DOM extension. No other libraries are involved.

Load the feed

To load the feed, you need to create an new DOMDocument document using it's load() method. This works with the PHP stream wrappers, so you can load local files or urls. DOMdocument, has dedicated methos for XML strings and HTML files and strings, too.

$feed = new DOMDocument();
$feed->load('http://www.a-basketful-of-papayas.net/feeds/posts/default');
...

If here is any problem with the resource, PHP will output error messages. You can use libxml_use_internal_errors() to block them. With libxml_clear_errors() the internal error list is cleared, libxml_get_errors() returns them so you could implemented you own error handling. Just ignore them for now:

$errorSetting = libxml_use_internal_errors(TRUE);
$feed = new DOMDocument();
$feed->load('http://www.a-basketful-of-papayas.net/feeds/posts/default');
libxml_clear_errors();
libxml_use_internal_errors($errorSetting);
...

In the next step you should check if you got some content. I use the documentElement property for this. If it is not here, the feed has to be invalid because any XML needs at least one element node.

if (isset($feed->documentElement)) {
  ...
} else {
  echo 'Invalid feed.';
}

Initialize XPath

Now a XPath object is needed to execute expressions. Atom feeds make use of namespaces, often declaring the atom namespace as default. But in XPath you have no default namespace, you need to register the namespace with an arbitrary prefix. It does not have to be the same prefix used in the XML file. It can't for the default namespace obviously because it has no prefix in the XML file.

...
$xpath = new DOMXPath($feed);
$xpath->registerNamespace('atom', 'http://www.w3.org/2005/Atom');
...

If you load HTML into the DOMDocument using the special methods, all namespaces are ignored. You can skip the registration in this case.

Executing XPath Expressions

The DOMXPath object has two methods for executing xpath expressions. One is query(), it always returns a DOMNodelist. You should use the second one: evaluate(). It will return DOMNodelist objects by default, but depending on the expression it can return other types, too. With evaluate() you have direct access to the title text, it will return an empty string if the feed has no title.

The code selects the element nodes in the registered namespace and casts them to string.

...
echo $xpath->evaluate('string(/atom:feed/atom:title)'), "\n";
echo $xpath->evaluate('string(/atom:feed/atom:subtitle)'), "\n";
...

Next we will loop over all entries. A DOMNodelist works with foreach, the expression will return an empty list if it does not match, so no additional checking is needed. Inside the loop the entry node is used as a context argument for evaluate().

...
foreach ($xpath->evaluate('//atom:entry') as $entryNode) {
  echo $xpath->evaluate('string(atom:title)', $entryNode), "\n";
  echo $xpath->evaluate(
    'string(atom:link[@rel="alternate" and @type="text/html"][1]/@href)',
    $entryNode
    ), "\n";
  echo "\n";
}
...

Conditions

XPath expression can be conditions. It can be used to check if a entry has categories (tags). The return value of the following expression is a boolean value.

... if ($xpath->evaluate('count(atom:category) > 0', $entryNode)) { ... } ...

Loop over attributes

Each entry can have several categories. The title of the category is in it's attribute "term". You can select these attributes directly into a list.

echo 'Categories: ';
foreach ($xpath->evaluate('atom:category/@term', $entryNode) as $index => $categoryAttribute) {
  if ($index > 0) {
    echo ', ';
  }
  echo $categoryAttribute->value;
}
echo "\n";

Complete Example

Here is the full script. Be aware that it outputs text. If you execute it using a webserver (and not the command line), you should add a header('Content-Type: text/plain') to the top.

<?php
$errorSetting = libxml_use_internal_errors(TRUE);
$feed = new DOMDocument();
$feed->load('http://www.a-basketful-of-papayas.net/feeds/posts/default');
libxml_clear_errors();
libxml_use_internal_errors($errorSetting);

if (isset($feed->documentElement)) {
  $xpath = new DOMXPath($feed);
  $xpath->registerNamespace('atom', 'http://www.w3.org/2005/Atom');
  echo $xpath->evaluate('string(/atom:feed/atom:title)'), "\n";
  echo $xpath->evaluate('string(/atom:feed/atom:subtitle)'), "\n";
  echo str_repeat('*', 72), "\n\n";
  foreach ($xpath->evaluate('//atom:entry') as $entryNode) {
    echo $xpath->evaluate('string(atom:title)', $entryNode), "\n";
    if ($xpath->evaluate('count(atom:category) > 0', $entryNode)) {
      echo 'Categories: ';
      foreach ($xpath->evaluate('atom:category/@term', $entryNode) as $index => $categoryAttribute) {
        if ($index > 0) {
          echo ', ';
        }
        echo $categoryAttribute->value;
      }
      echo "\n";
    }
    echo $xpath->evaluate(
      'string(atom:link[@rel="alternate" and @type="text/html"][1]/@href)',
      $entryNode
    ), "\n";
    echo "\n";
  }
} else {
  echo 'Invalid feed.';
}
?>

I hope, I could show you that DOM is really comfortable if you're using XPath. If you want it easier, try FluentDOM. It combines the power and comfort of XPath with the jQuery fluent interface.

At 5 comments:
Labels: , , ,
Subscribe to: Posts (Atom)
x