Реализуем наш "iPaper"

"iPaper" coding

kuznecov.sg // 2009-04-10

Для начала я хочу показать некоторые скриншоты очень ранних версий виджета ENinja (в заключительной части будет кое-что поинтереснее):

For starting point I want to show some screenshots of very early version of ENinja (at the end of post you could find something more interesting):

Итак, первым делом нам расширение должно позволить добавить PDF-документ в БД, разбив его предварительно на страницы и преобразовав в другой формат.

Ok! First of all our extension should let us upload a PDF document, split it to pages, convert them to another image format and deploy to database.

Для решения поставленной задачи Linux и многие другие *nix дистрибутивы предлагают нам воспользоваться такими программами, как ghostscript, convert (часть библиотеки imagemagick), wvHtml. Грех отказываться от проверенного временем ПО, ими мы и воспользуемся.

To solve our problem about converting different images to different formats we can use time-proved *nix programs and libraries, such as ghostscript, convert (part of imagemagick library).

Реализацию начнём с общего алгоритма:

Let's think about future algorithm:

Файл принимается сервером и временно сохраняется (на время текущего запуска приложения).

Web-server gets a pdf-file and temporarily saves it (for a current php runtime).
Мы выясняем тип этого файла (нас интересуют PDF-файлы).

We need to determine a filetype of uploaded file (More interesting are PDF files for us).
Начнём транзакцию.

Starting transaction.
1. Преобразуем полученный файл в набор PCX изображений - для каждой из страниц документа своё изображение. Все картинки сохраняются во временной папке (/tmp и созданная внутри неё папка нам вполне подойдет).
  
  Convert uploaded file to a set of PCX images - one for each page of a document. All pictures are stored in temporary directory (/tmp, for example).
2. Сортируем полученные изображения в соответствии с их номерами страниц.
  
  Sort images with right page order.
3. Конвертируем их в формат PNG (эти действием в качестве мы почти ничего не теряем, а размер итоговых файлов раза в 4—5 будет меньше).
  
  Convert pages (PCX files) to PNG format (size of end file will be at 4—5 times smaller).
4. Заносим каждое изображение в базу данных.
  
  INSERT each image-file to database.
5. Для пущей верности занесём в БД и оригинал полученного файла.
  
  For future purposes we insert original document to database too.
6. Если вставка данных в базу завершилась успешно, то коммитим транзакцию и «облегченно вздыхаем».
  
  If inserting data to DB was completed successfully, we commit transaction and say "Ohh!..Yeah!"

Приведём реализацию этого алгоритма для случая с PostgreSQL:

Here is a part of code (for PostgreSQL RDBMS):

 public function upload($update, $document_id, $uploadedImage)

```
 {
```
```
     $this->documentId = $document_id;
```
```
  
```

     $ghostscript_cmd = "nice " . exec("which ghostscript") . " -sDEVICE=pcx256 -r150x150 -dNOPAUSE";

     $convert_cmd = "nice " . exec("which convert");

     $wvhtml_cmd = "nice " . exec("which wvHtml");

     $file_cmd = "nice " . exec("which file");

```
     $tmp_dir = "/tmp";
```
```
  
```
```
     if ($uploadedImage->hasError)
```
```
     {
```

         switch($uploadedImage->getError())

```
         {
```
```
             case 1:
```
```
                 return false;
```
```
                 break;
```
```
             default:
```
```
                 break;
```
```
         }
```
```
     }
```
```
     else
```
```
     {
```

         $out_dir = $tmp_dir . "/isodc" . md5(uniqid('adsf'));

```
  
```

         if (strstr(exec($file_cmd . " " . $uploadedImage->getTempName()), "PDF"))

```
         {
```
```
             $filetype = 'pdf';
```
```
         }
```

         else if (strstr(exec($file_cmd . " " . $uploadedImage->getTempName()), "Microsoft Office"))

```
         {
```
```
             $filetype = 'doc';
```
```
         }
```
```
         else
```
```
         {
```
```
             $filetype = 'unknown';
```
```
         }
```
```
  
```
```
         switch($filetype)
```
```
         {
```
```
             case 'pdf':
```
```
                 mkdir($out_dir);
```

                 $cmd = $ghostscript_cmd . " -sOutputFile=\"$out_dir/%d.pcx\" \"" . $uploadedImage->getTempName() . "\"";

```
                 exec($cmd);
```

                 $dir_handle = @opendir($out_dir) or die("Unable to open $out_dir");

```
                 $pages = array();
```

                 while ($file = readdir($dir_handle))

```
                 {
```

                     if (strstr($file, '.pcx'))

```
                     {
```

                         array_push($pages, $file);

```
                     }
```
```
                 }
```
```
                 sort($pages);
```
```
                 $pageNumber = 1;
```
```
  
```
```
                 try
```
```
                 {
```

                     $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                     $this->pdo->beginTransaction();

```
  
```
```
                     if ($update)
```
```
                     {
```

                         $this->removePages();

                         $this->removeOriginal();

```
                     }
```
```
  
```

                     foreach($pages as $page)

```
                     {
```

                         $imageFile = $out_dir . "/" . $page;

                         //convert PCX to PNG format

                         $params = " \"$imageFile\" \"$imageFile\".png";

                         exec($convert_cmd . $params);

                         unlink($imageFile);

```
  
```

                         $imageFile .= ".png";

                         $this->insertPage($imageFile, $pageNumber);

                         $pageNumber++;

                         unlink($imageFile);

```
                     }
```
```
  
```

                     $this->insertOriginal($uploadedImage->getTempName());

```
  
```

                     $this->pdo->commit();

```
                 }
```
```
                 catch (Exception $e)
```
```
                 {
```

                     $this->pdo->rollBack();

```
                 }
```
```
  
```

                 closedir($dir_handle);

```
                 rmdir($out_dir);
```
```
                 break;
```
```
  
```
```
             default:
```
```
             return false;
```
```
         }
```
```
     }
```
```
 }
```
```
  
```
```
 private function removePages()
```
```
 {
```

     $stmt = $this->pdo->prepare("DELETE FROM " . self::PAGES_TABLE_NAME . " WHERE document_id = ?");

     $stmt->execute(array($this->documentId));

```
 }
```
```
  
```
```
 private function removeOriginal()
```
```
 {
```

     $stmt = $this->pdo->prepare("DELETE FROM " . self::DOCUMENTS_TABLE_NAME . " WHERE document_id = ?");

     $stmt->execute(array($this->documentId));

```
 }
```
```
  
```

 private function insertOriginal($documentFile)

```
 {
```

     $oid = $this->pdo->pgsqlLOBCreate();

     $stream = $this->pdo->pgsqlLOBOpen($oid, 'w');

     $local = fopen($documentFile, 'rb');

     if (!$local) die('couldnot open original: ' . $documentFile);

     stream_copy_to_stream($local, $stream);

```
     $local = null;
```
```
     $stream = null;
```

     $stmt = $this->pdo->prepare("INSERT INTO " . self::DOCUMENTS_TABLE_NAME . " (document_id, oid) VALUES (?, ?)");

     $stmt->execute(array($this->documentId, $oid));

```
 }
```
```
  
```

 private function insertPage($imageFile, $page_number)

```
 {
```

     $oid = $this->pdo->pgsqlLOBCreate();

     $stream = $this->pdo->pgsqlLOBOpen($oid, 'w');

```
     $local = fopen($imageFile, 'rb');
```

     if (!$local) die('couldnot open page: ' . $imageFile);

     stream_copy_to_stream($local, $stream);

```
     $local = null;
```
```
     $stream = null;
```

     $stmt = $this->pdo->prepare("INSERT INTO " . self::PAGES_TABLE_NAME .

             " (document_id, page_number, page_oid) VALUES (?, ?, ?)");

     $stmt->execute(array($this->documentId, $page_number, $oid));

```
 }
```

Код контроллера, в котором осуществляется валидация и загрузка файла в БД

Controller code for validation and uploading file to Database

```
 public function actionCreate()
```
```
 {
```
```
     $document=new Document;
```
```
     if(isset($_POST['Document']))
```
```
     {
```

         $document->attributes=$_POST['Document'];

```
  
```

         $uploadedFile = CUploadedFile::getInstance($document, 'content');

```
         if ($uploadedFile->hasError)
```
```
         {
```

             switch($uploadedFile->getError())

```
             {
```

                 // UPLOAD_ERR_INI_SIZE

                 // Value: 1; The uploaded file exceeds the upload_max_filesize directive in php.ini.

```
                 case 1:
```

                     $document->filesize = Document::EXCESS_MAX_FILESIZE_ERROR;

```
                     break;
```
```
                 default:
```
```
                     break;
```
```
             }
```
```
         }
```
```
         else
```
```
         {
```

             $document->filename = $uploadedFile->getName();

             $document->filetype = $uploadedFile->getType();

             $document->filesize = $uploadedFile->getSize();

```
  
```
```
             if($document->save())
```
```
             {
```

                 $ninja = Yii::createComponent('application.extensions.ninja.ENinja');

                 $ninja->upload(false, $document->id, $uploadedFile);

```
  
```

                 $this->redirect(CController::createUrl('show',array('document'=>$document)));

```
             }
```
```
         }
```
```
     }
```

     $this->render('create',array('document'=>$document));

```
 }
```

Разработка формы виджета

Widget form developing

Ремарка. У виджета меняются кнопки:

Remark. A new buttons on widget:

Форма отображения ENinja разработана с использованием XHTML и jQuery, на ней располагается несколько кнопок для управления содержимым документа, такие как: переход "в начало" документа, переход на "следующую" страницу, переход к "предыдущей" странице, "увеличение/уменьшение" масштаба, а также магическая кнопка, которая будет разворачивать отображение поля, через которое будет виден документ (чтобы не загромождать экран необязательной всё время информацией). Про метод создания кнопок, который я использовал в виджете, я рассказывал в прошлом посте, он называется Custom Buttons и является одной из первоначальный версий кнопок, которые используется в интерфейсе GMail.

Widget form for the ENinja component developed with XHTML+jQuery. We have some control buttons on its interface, such as: go "start" of document, go to the "next" page, go to the "previous" page, "zoomIn/zoomOut/zoomDefault", and of course a magic button which toggles displaying document window (so we don't have to show the document content all the time concealing the screen place). Method that I'm used for buttons in the interface of ENinja widget I wrote in previous post. In previous post i described the method I used for buttons of interface of ENinja widget which is used in GMail.

Несколько слов о коде, который отвечает за отрисовку формы просмотра документа. В него передаются параметры из PHP-класса компонента, такие как идентификатор подгружаемого документа, количество страниц (maximumPage) и многие другие. После первичной реализации почти сразу выяснилось, что несколько документов на одной странице приложения существовать не могут, т.к. имена переменных внутри каждого виджета одинаковые. Найденное решение, может, быть не столь изысканно, но работает. Я сделал так, что имя каждой переменной и функции, а также идентификатора элемента интерфейса внутри виджета получает идентификатор документа, который виджет отображает. Но у меня получился такой страшный код в секции java-скриптов:

I want to say a few words about code of widget. It takes parameters from parent PHP class of component, such as id of document, count of pages in document (maximumPage) and others. After first alpha release we had a problem with several documents on the same page of application. It happened because each widget had variables named like others. My solution may be not so refined, but it works. Now every variable, element identificator of function name in widget component adds an random parameter from PHP-class. But we got so ugly code in javascript section:

var documentId<?php echo $this->myHash; ?> = <?php echo $this->documentId; ?>

Сам код я приводить не буду, т.к. он займёт много места, лучше внизу я приведу ссылки для скачивания расширения целиком.

I am not going to post here the code of widget, because it would take too much place. At the end of post I put links to full extension package.

Рендеринг хранимого в БД изображения

Rendering image from Database

Сама отрисовка изображения будет осуществляться простой подменой атрибута src элемента img, которому будет присваиваться путь до контроллера с передачей параметров (идентификатора документа и номера страницы) в строке запроса.

Image rendering will be implement with a simple changing of src atribute of img object in our ENinja widget. In the src value we write a route to needed controller, its method and send GET parameters which reflect document identifier and page number.

Наш виджет должен знать о каком документе и его странице «идёт речь», когда его «просят» отрисовать изображение. То есть нам необходимо передвать эту информацию в запросах отрисовки изображения.

Our widget need to know what document it show to end user. We need to send this information in render requests.

Т.к. реализуем мы передачу этих параметров через вызов определенного метода нужного нам контроллера, то код, который нам нужно в метод контроллера поместить будет таким:

We implement this with an additional method of controller:

```
 public function actionNinja()
```
```
 {
```

     if(isset($_GET['document_id']) && isset($_GET['page_number']))

```
     {
```

         $ninja = Yii::createComponent('application.extensions.ninja.ENinja');

         echo $ninja->renderImage($_GET['document_id'], $_GET['page_number']);

```
     }
```
```
 }
```

Скринкаст демо-версии просмотрщика ENinja

Screencast of demo-version of ENinja Viewer

Напоследок, как я и обещал, видео того, как работает этот виджет:

At last, as I say at start of post, I make an video, which describe how our widget works:

Скачать расширение

Extension download

Download image Скачать архив tar.gz с расширением ENinja Download extension package (.tar.gz)

Тэги: yii pdf ipaper