Permalink
Browse files

First commit

  • Loading branch information...
0 parents commit aa65fdf811b521ffbfbe0a07cbf4c799726c5307 @petewarden committed Feb 23, 2011
Showing with 1,197 additions and 0 deletions.
  1. +24 −0 README
  2. BIN heart.png
  3. +256 −0 index.html
  4. +917 −0 jquery.openwordcloud.js
24 README
@@ -0,0 +1,24 @@
+OpenWordCloud
+-------------
+
+A JQuery plugin to render word clouds using canvas, as used on http://wordlin.gs/
+
+See index.html for an example of how to use it.
+
+Released under the v3 GPL:
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+
+By Pete Warden <pete@petewarden.com>, freely reusable, see http://petewarden.typepad.com for more
BIN heart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,256 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Wordlings</title>
+<link rel="stylesheet" type="text/css" href="http://static.openheatmap.com/css/mainstyle.css"/>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
+<script type="text/javascript" src="http://static.openheatmap.com/scripts/cookie.js"></script>
+<script src="jquery.openwordcloud.js" type="text/javascript"></script>
+<script type='text/javascript'>
+
+g_openWordCloud = null;
+
+$(function()
+{
+ 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;
+ }
+ }
+
+ $('#fontselect').val(settings.font);
+ $('#rotationselect').val(settings.rotationType);
+ $('#shapeselect').val(settings.shapeImage);
+
+ if (settings.textColor=='#000000') {
+ $('#colorselect').val('white');
+ } else if (settings.textColor=='#ffffff') {
+ $('#colorselect').val('black');
+ } else {
+ $('#colorselect').val('rainbow');
+ }
+
+ if (settings.largestTextSize == 16) {
+ $('#sizeselect').val('small');
+ } else if (settings.largestTextSize == 40) {
+ $('#sizeselect').val('medium');
+ } else {
+ $('#sizeselect').val('large');
+ }
+
+ $('#fontselect').change(onChange);
+ $('#rotationselect').change(onChange);
+ $('#shapeselect').change(onChange);
+ $('#colorselect').change(onChange);
+ $('#sizeselect').change(onChange);
+
+ var words = $.cookie('words');
+ if (words != null) {
+ $('#words').val(words);
+ }
+ onFormSubmit();
+});
+
+function onFormSubmit() {
+
+ var words = $('#words').val();
+
+ $.cookie('words', words);
+
+ var settings = g_openWordCloud.settings;
+ for (var settingKey in settings) {
+ $.cookie(settingKey, settings[settingKey]);
+ }
+
+ startCloudGeneration(words);
+
+ return false;
+}
+
+function startCloudGeneration(words) {
+
+ g_openWordCloud.settings.spacing = 1;
+
+ if (words.length>200) {
+ g_openWordCloud.settings.sortBySize = true;
+ g_openWordCloud.startFromText(words);
+ } else {
+ g_openWordCloud.settings.sortBySize = false;
+ g_openWordCloud.startFromSmallText(words);
+ }
+}
+
+function saveImage() {
+ window.open(g_openWordCloud.toDataURL('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();
+}
+
+</script>
+</head>
+
+<body>
+
+<div class="ui-corner-all" style="font-size: 175%; margin-top: 40px; margin-left: 150px; width: 940px;">
+
+ <div style="float:left; width: 620px;">
+
+ <div>
+ An example of the <a href="http://github.com/petewarden/openwordcloud/">OpenWordCloud</a> JQuery plugin.
+ </div>
+ <br>
+
+ <div>
+
+ <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.
+</textarea>
+ <br/>
+ <!-- Thanks to Chris Spooner for this list of 'semi-safe' web fonts - http://line25.com/articles/semi-web-safe-fonts-to-spice-up-your-web-designs -->
+ <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>
+ <select id="sizeselect">
+ <option value="small">Small</option>
+ <option value="medium">Medium</option>
+ <option value="large">Large</option>
+ </select>
+ <select id="rotationselect">
+ <option value="random">Jumbled</option>
+ <option value="rightangle">Aligned</option>
+ <option value="across">Horizontal</option>
+ </select>
+ <select id="shapeselect">
+ <option value="spiral">Clump</option>
+ <option value="random">Scatter</option>
+ <option value="heart.png">Heart</option>
+ </select>
+ <select id="colorselect">
+ <option value="white">White</option>
+ <option value="black">Black</option>
+ <option value="rainbow">Colors</option>
+ </select>
+ <br/>
+ <input type="submit" value="Create Cloud"/>
+ <input type="submit" value="Get Screenshot" onclick="return saveImage();"/>
+ </form>
+
+ </div>
+
+ <div style="clear:both;"></div>
+
+ <div id="openwordcloud_container" style="width: 840px; height: 570px; position: relative;">
+ </div>
+
+ <div>
+ Created by <a href="http://petewarden.typepad.com/">Pete Warden</a>
+ </div>
+ <br>
+
+ <div>
+ Full code is available at <a href="http://github.com/petewarden/openwordcloud">github.com/petewarden/openwordcloud</a>
+ </div>
+ <br>
+
+</div>
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit aa65fdf

Please sign in to comment.