Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
257 lines (214 sloc) 8.4 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<link rel="stylesheet" type="text/css" href=""/>
<script src="" type="text/javascript"></script>
<script type="text/javascript" src=""></script>
<script src="jquery.openwordcloud.js" type="text/javascript"></script>
<script type='text/javascript'>
g_openWordCloud = null;
var wordsForm = $('#wordsform')
wordsForm.bind('submit', onChange);
g_openWordCloud = new $().OpenWordCloud('#openwordcloud_container');
var settings = g_openWordCloud.settings;
for (var settingKey in settings) {
var cookieValue = $.cookie(settingKey);
if (cookieValue == null) {
$.cookie(settingKey, settings[settingKey]);
} else {
settings[settingKey] = cookieValue;
if (settings.textColor=='#000000') {
} else if (settings.textColor=='#ffffff') {
} else {
if (settings.largestTextSize == 16) {
} else if (settings.largestTextSize == 40) {
} else {
var words = $.cookie('words');
if (words != null) {
function onFormSubmit() {
var words = $('#words').val();
$.cookie('words', words);
var settings = g_openWordCloud.settings;
for (var settingKey in settings) {
$.cookie(settingKey, settings[settingKey]);
return false;
function startCloudGeneration(words) {
g_openWordCloud.settings.spacing = 1;
if (words.length>200) {
g_openWordCloud.settings.sortBySize = true;
} else {
g_openWordCloud.settings.sortBySize = false;
function saveImage() {'image/png'), '_blank');
return false;
function onChange() {
var settings = g_openWordCloud.settings;
settings.font = $('#fontselect').val();
settings.rotationType = $('#rotationselect').val();
var shapeValue = $('#shapeselect').val();
if ((shapeValue=='outwards') || (shapeValue=='spiral') || (shapeValue=='random')) {
settings.shapeImage = 'none';
settings.searchWalk = shapeValue;
settings.maxIterations = 1000;
} else {
settings.shapeImage = shapeValue;
settings.searchWalk = 'random';
settings.maxIterations = 1;
var colorVal = $('#colorselect').val();
if (colorVal=='white') {
settings.textColor = '#000000';
settings.backgroundColor = '#ffffff';
} else if (colorVal=='black') {
settings.textColor = '#ffffff';
settings.backgroundColor = '#000000';
} else {
settings.textColor = 'rainbow';
settings.backgroundColor = '#000000';
var sizeVal = $('#sizeselect').val();
if (sizeVal=='small') {
settings.smallestTextSize = 4;
settings.largestTextSize = 16;
} else if (sizeVal=='medium') {
settings.smallestTextSize = 8;
settings.largestTextSize = 40;
} else {
settings.smallestTextSize = 16;
settings.largestTextSize = 64;
if (settings.shapeImage=='text') {
var text = $('#words').val();
var words = text.split(' ');
settings.shapeText = words[0];
return onFormSubmit();
<div class="ui-corner-all" style="font-size: 175%; margin-top: 40px; margin-left: 150px; width: 940px;">
<div style="float:left; width: 620px;">
An example of the <a href="">OpenWordCloud</a> JQuery plugin.
<form id="wordsform">
<textarea rows="10" cols="90" id="words">
Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty, and
dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing
whether that nation, or any nation so conceived and so
dedicated, can long endure. We are met on a great battle-
field of that war. We have come to dedicate a portion of
that field as a final resting-place for those who here gave
their lives that that nation might live. It is altogether
fitting and proper that we should do this.
But, in a larger sense, we cannot dedicate…we cannot
consecrate…we cannot hallow…this ground. The brave men,
living and dead, who struggled here, have consecrated it
far above our poor power to add or detract. The world
will little note nor long remember what we say here, but
it can never forget what they did here. It is for us, the
living, rather, to be dedicated here to the unfinished
work which they who fought here have thus far so nobly
advanced. It is rather for us to be here dedicated to the
great task remaining before us…that from these honored
dead we take increased devotion to that cause for which
they gave the last full measure of devotion; that we here
highly resolve that these dead shall not have died in vain;
that this nation, under God, shall have a new birth of
freedom; and that government of the people, by the people,
for the people, shall not perish from the earth.
<!-- Thanks to Chris Spooner for this list of 'semi-safe' web fonts - -->
<select id="fontselect">
<option value="Myriad Pro, Trebuchet MS, Arial, Sans-Serif">Myriad</option>
<option value="Garamond, Times New Roman, Serif">Garamond</option>
<option value="Palatino, Palatino Linotype, Serif">Palatino</option>
<option value="Impact, Haettenschweiler, Sans-Serif">Impact</option>
<option value="Tahoma, Geneva, Sans-Serif">Tahoma</option>
<option value="Century Gothic, Arial, Sans-Serif">Century Gothic</option>
<option value="Gill Sans, Arial, Sans-Serif">Gill Sans</option>
<option value="Lucida Sans Unicode, Lucida Grande, Sans-Serif">Lucida</option>
<option value="Futura, Verdana, Sans-Serif">Futura</option>
<option value="Baskerville, Times New Roman, Serif">Baskerville</option>
<option value="Hoefler Text, Georgia, Serif">Hoefler</option>
<option value="Cooper Black, Arial Black, Sans-Serif">Cooper Black</option>
<option value="Rockwell, Georgia, Serif">Rockwell</option>
<select id="sizeselect">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<select id="rotationselect">
<option value="random">Jumbled</option>
<option value="rightangle">Aligned</option>
<option value="across">Horizontal</option>
<select id="shapeselect">
<option value="spiral">Clump</option>
<option value="random">Scatter</option>
<option value="heart.png">Heart</option>
<select id="colorselect">
<option value="white">White</option>
<option value="black">Black</option>
<option value="rainbow">Colors</option>
<input type="submit" value="Create Cloud"/>
<input type="submit" value="Get Screenshot" onclick="return saveImage();"/>
<div style="clear:both;"></div>
<div id="openwordcloud_container" style="width: 840px; height: 570px; position: relative;">
Created by <a href="">Pete Warden</a>
Full code is available at <a href=""></a>