ZOHO Viewer plugin for jQuery

I discovered ZOHO Viewer, which supports a lot more file types than Google Docs Viewer, after I wrote the Google Docs Viewer jQuery plugin I posted earlier. So, I wrote another jQuery plugin that automatically embeds the ZOHO viewer for viewing the doc, docx, xls, xlsx, ppt, pptx, pps, odt, ods, odp, sxw, sxc, sxi, wpd, pdf, rtf, txt, html, csv, tsv files it supports linked to by anchor tags.

The ZOHO Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This, just like Google Docs Viewer, bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.

Both plugins work exactly the same and has the same configuration options. I ended up going back to Google Docs Viewer for the application I was developing because it displays the document zoomed in to fit the width of the viewer by default and has a toolbar to help navigate the document unlike ZOHO viewer. However, because ZOHO Viewer supports a much large range of file types it is still likely to become very handy.

Usage


1. Add jQuery and the zohoViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zohoviewer.min.js"></script>
</head>

2. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the ZOHO Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download file</a>
<a href="urltofile.pdf" id="embedURL">Download file</a>

3. Initialize zohoViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
$('a.embed').zohoViewer();
$('#embedURL').zohoViewer();

Customization


The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized.
$('a.embed').zohoViewer({ width: 400, height: 500 });

The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "zohoviewer", which allow for styling all the zohoViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-zohoviewer'. See the demo source code for more details.

Demo


- Check out the live demonstration

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Download

- jquery.zohoviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!

Google Docs Viewer plugin for jQuery

Here's a little jQuery plugin I wrote recently that automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags.

The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.

Usage


1. Add jQuery and the gDocsViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gdocsviewer.min.js"></script>
</head>

2. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the Google Docs Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download file</a>
<a href="urltofile.pdf" id="embedURL">Download file</a>

3. Initialize gDocsViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
$('a.embed').gdocsViewer();
$('#embedURL').gdocsViewer();

Customization


The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized.
$('a.embed').gdocsViewer({ width: 400, height: 500 });

The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "gdocsviewer", which allow for styling all the gdocsViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-gdocsviewer'. See the demo source code for more details.

Demo


- Check out the live demonstration

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Download

- jquery.gdocsviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!

Thaana Text Render class for PHP 5 - v1.0

A (long) while back, I demoed a Thaana text rendering class for PHP I had written years ago that dynamically converts any given Thaana text into a formatted image of given dimensions with configuration options for important properties like font, font size and color. I am now releasing it, slightly improved, publicly for developers to use it in their applications.

Overview

The rationale for the class was that the use of images to display Thaana means that the information can be viewed on a large variety of devices and does away with the requirement for the device to support Thaana fonts. It can also be used for any purpose that requires dynamically generating an image with Thaana text in it, for example watermarking images or nice headings with your Thaana font of choice.

The class makes use of the powerful image manipulation services provided by the GD library to create images from text and hence inherits the wide range of features it offers. However, since the GD library does not support right-to-left scripts and does not offer line wrapping to fit text within a bounding box, the class requires the use of non-Unicode Thaana fonts and non-Unicode Thaana text. You can make use of my Thaana conversions class for PHP to dynamically convert Unicode Thaana text to ASCII Thaana text before passing it to this class for rendering.

Functions exposed

- render()
- renderImage()
- setFontPath()
- setFont()
- setFontSize()
- setTextColor()
- setTextLineSpacing()
- setBgColor()
- setShadow()

Requirements

- PHP 5
- GD for PHP

Usage


The class is well commented so have a look through the code for more details on the functions and their arguments.

The class takes ASCII Thaana text and an optional width, filename, filetype for the render functions. The render() function returns a handle that can be used with the PHP image functions for further processing if required. The renderImage() allows the output to be returned directly or saved to a file.

If the width is specified, the resultant image will be constraint to that width and text will be wrapped around and split into lines as appropriate. Specify either "gif", "png" or "jpg" for the class to save the rendered output. If the filename is omitted, then it will return the output directly.

The class will accept any HTML/CSS color specification (i.e. "#FFF000", "red", "rgb(127, 127, 127)") as a valid color for use as text color, background color and shadow color. You can also specify alpha values to accompany them in order to have transparency effects. Set the background alpha to 127 to produce text on a transparent background.

All fonts have to be placed in the font path directory and should be named, in lower case, exactly as the font names passed to the class.

Examples


Saving to a file:
This example shows how to render the text and save the output. It sets all the properties for font, background and shadows at object initialization. The renderImage() function has the filename and filetype specified for saving the rendered output.
<?php
// Load the class
include('thaanaTextRender.php');

// Initialize object
$ttr = new ThaanaTextRender('./fonts/', 'a_waheed', 20, 'white', 0, 50, 'rgb(0,0,0)', 0, 2, '#555555', 80);

// Render image and save output
$ttr->renderImage('swaincsc', 300, 'output.png', 'png');


Output directly to browser:
This example is ideal for use in scripts that dynamically generate the required rendering and return the output directly to the browser.
<?php
// Load the class
include('thaanaTextRender.php');

// Initialize object
$ttr = new ThaanaTextRender('./fonts/', 'a_waheed', 16, 'white', 0, 50, 'rgb(0,0,0)', 127);

// Render image and save output
$ttr->renderImage('gUgulunc aepwlc awaimUvIaW vWdwkurW kwhwlw aeve. gUgulc aencDcroaiDc fOnutwkwSc mihWru vwnI mUvI scTUDiaOaeac dIfw aeve.', 300, NULL, 'png');


You could use it by, for example, calling it via the image tag.
<img src="script.php" />


Demo

You can check out the original demo I posted to see it in action.

For a real-world application of the class, check out the Muraasil mobile site which has been making good use of it for almost 2 years now.

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Download

- ThaanaTextRender.zip (v1.0, 4.43KB)

Enjoy!

Javascript Thaana Keyboard version 4.2.1

Here's an update to my Javascript Thaana Keyboard library which provides easy entry of Thaana on web pages without the involvement of OS-based keyboard switching. Hit the demo page to see it in action.

This release is solely a bugfix release addressing an issue with the display of newly entered text in multiline fields where text exceeds the size of the visible area. I originally cut this release in February but decided to hold back on a public release till I had further issues to fix or had new features added, neither of which has come since...

Thanks goes to Ahmed Ali for bringing the bug to my attention.

Changelog

+ Fixed issue with the display of newly entered text in multiline fields where text exceeds the size of the visible area.

Usage

Usage remains same as before. Please refer to my detailed post on the 4.0 release.

Demo

As usual, a demonstration and testing page is available.

Download

- full source version (5.66 KB)
- packed version (2.47 KB) [recommended]

Thaana conversions class for PHP 5 - v0.4

Here is a major update to the Thaana Conversions class for PHP 5 that I have been maintaining. This new version adds two new functions convertLatinToAscii() and its counterpart convertAsciiToLatin(), which transliterates text to and from the latinized/romanized Thaana form. That means you can pass on text bits like "miadhakee reethi dhuvahekeve" and have it converted to "މިއަދަކީ ރީތި ދުވަހެކެވެ".

This feature would facilitate Thaana websites to add cool and interesting new features like, say, offering to display a news article in latinized Thaana if the user does not have the required fonts installed and/or cannot install the Thaana fonts!

Info

The Thaana Conversions class for PHP provides a number of useful functions for the conversion and transliteration of text between various Thaana representation formats.

Functions exposed

- convertUtf8ToUnicodeIntegers()
- convertUtf8ToAscii()
- convertUtf8ToEntities()
- convertEntitiesToUnicodeIntegers()
- convertEntitiesToUtf8
- convertEntitiesToAscii()
- convertUnicodeIntegersToUtf8()
- convertUnicodeIntegersToEntities()
- convertUnicodeIntegersToAscii()
- convertAsciiToUtf8()
- convertAsciiToEntities()
- convertAsciiToUnicodeIntegers()
- convertLatinToAscii()
- convertAsciiToLatin()

Requirements

PHP 5

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Usage

<?php
// Load the class
require 'thaana_conversions.obj.php';

// Initialize the Thaana object
$thaana = new Thaana_Conversions();

// Example: Converting latin to ascii
echo $thaana->convertLatinToAscii('miadhakee haadha reethi dhuvahekeve.');

// Example: Converting ascii to latin
echo $thaana->convertAsciiToLatin('miawdwkI hWdw rIti duvwhekeve.');
?>

Download

- Thaana_Conversions.zip (v0.4, 4.8KB)

Enjoy :-)

Thaana Transcoder 1.1

I received two feature requests in the email since I released the Thaana Transcoder late last month and both asked for the same thing; Unicode input text transcoding to Accent compatible ASCII output. It just so happened that the feature requested was something that I had actually programmed in, more or less, but left out in the public 1.0 release because I wasn't sure anyone would need it. So here is a new release with the said feature included and also bundles in a minor bug fix.

Info

Thaana Transcoder is a Windows-based tool that performs the often much needed conversion of Thaana text written in Accent, Faseyha Thaana, MS Word version 97 (and older) to and from the modern Unicode standard used by MS Word XP/2007 and OpenOffice.

Download

- Thaana Transcoder 1.1 Installer/Upgrade (185KB, MS Windows)
- Thaana Transcoder 1.1 Executable only (79.7KB, MS Windows)

ThaanaTranscoder screenshot

Thaana Transcoder 1.0

Thaana Transcoder is a Windows-based tool that performs the often much needed conversion of Thaana text written in Accent, Faseyha Thaana, MS Word version 97 (and older) to and from the modern Unicode standard used by MS Word XP/2007 and OpenOffice. This program hasn't been thoroughly tested and there is bound to be bugs and errors. If you do encounter such a bug or have a feature request, please drop me line.

Quite a few people have asked me for such a program over the years and I used to point people over to an online tool I had made available a few years ago but it is no longer alive. As ever, it wasn't until I had a real necessity for such a program a few days ago that I got around to writing a brand new version.

Download

- Thaana Transcoder 1.0 Installer (184KB, MS Windows)
- Thaana Transcoder 1.0 Executable only (78.8KB, MS Windows)

Enjoy :-)