Browser Ponies

▶ ■ ▮▮ ▮▶ ↕ ×

What is this?

Browser Ponies lets you place ponies on websites (see the ponies here). You can create a bookmarklet which adds your favourite ponies to any website.

This is a reimplementation of Desktop Ponies in JavaScript. It doesn't behave exactly like the original but is close enough (no games and no cursor avoidance etc.).

Browser Ponies work best with Google Chrome, but they also work okay in Mozilla Firefox.

The artwork used is from the Ponychan fork of Desktop Ponies, My Little Pony: Friendship Is Magic is © by Hasbro and Lauren Faust.

Short URL

You can put ponies on a website by simply putting "http://tinyurl.com/ponyfy#" in front of the URL of the website. So e.g. "example.com" becomes "http://tinyurl.com/ponyfy#example.com".

Note that not all websites allow embedding in an iframe (which is used here). E.g. Google does not work.

Make a Bookmarklet

Choose your ponies belown and then drag this link into your Bookmark Toolbar:

Ponies!

Click it whenever you feel a website needs more ponies.

You can also bookmark the control links above in order to have control over ponies on any website. However, the Toggle ponies in background function needs special support by the website in order to work.

px
px

Change settings and choose your ponies

(Your Browser does not support HTML5 Audio. Get a better browser.)
%
%
sec

Bookmarks Menu

If you'd like you can download a bookmarks file with links to add a certain pony and the controls from the top of this page. Just right click-save this link and import the resulting file in your browser (only tested in Chrome and Firefox):

Bookmarks Menu

Feedback

Send me feedback via email, write a comment, tweet me or write a bug report.

Advanced User Stuff

Browser Support

Firefox has a bug concerning the animation speed of animated GIFs (I tried to work around this by shortening all effect durations when using Firefox). Also I found no way to control the animation playback of individual images in Firefox, which sometimes causes animation errors (when a effect is shown twice both effect animations are synchronized).

In Internet Explorer I managed to control GIF animation playback using iframes, but you can't make them transparent and border less. In Chrome iframes do not suffer from this limitation.

Toggle ponies in background

In order to support the Toggle ponies in background function websites need to define a special function called toggleBrowserPoniesToBackground. This function changes the z-index of everything that should appear in front of the ponies. The ponies have a z-index of 9000000 + distance from top window border to bottom of the pony. The speak bubbles have a z-index of 9009000 (I assumed noone has a screen higher than 9000 pixels).

For instance, this webpage defines the toggleBrowserPoniesToBackground function like so: 

function toggleBrowserPoniesToBackground () {
	var main = document.getElementById('main');
	if (main.style.zIndex === '') {
		main.style.zIndex = '100000000';
	}
	else {
		main.style.zIndex = '';
	}
}

In addition to that it defines these style rules: 

#main {
	position: relative;
	background: rgba(255, 255, 255, 0.8);
	border: 5px solid rgba(163, 204, 222, 0.8);
}

Using your own ponies

If you want to use your own ponies you can convert the INI files to JavaScript using the tools below. Just load the INI files, fix the filenames/URLs if needed and generate the JavaScript. The resulting pony script will use the settings from above except for which pony is loaded.

Note: This currently only works with Firefox and Chrome. Opera does currently not support files being dropped (so click to use the file open dialog) and Internet Explorer currently cannot read files at all in JavaScript (probably in version 10 it will be able to do that).

Your Ponies:

Click or drop Pony.ini files here.

As a next step you may need to adapt the URLs of the images and sounds to where they really are hosted. If they are hosted on some web server with the files of each pony in a seperate distinct directory you just need to change the base URL to the location of said directory. Don't forget the / (slash) at the end of the base URL and please note that the web is case sensitive. This means the file names as they are on the server have to exactly the ones defined here.

If the files are all at some more or less random location, you need to adapt all the URLs individually. In this case just enter an absolute URL in the URL fields of each file. If the URL of an file is absolute the base URL will be ignored.

As a third option you can also embed the files directly in the generated script. Note that this encodes the whole files into data URLs, which might cause the generated script to be a lot bigger than the sum size of all the files. Also Internet Explorer does not support data URLs of the length of 2048 characters, and the pony sprites are usually an order of magnitude bigger than that.

Your Interacions:

Click or drop Interactions.ini files here.

Then put the contents of the text area above into a file called e.g. "your-ponies.js" and host it somewhere on the web. You can then embed your ponies on your web site by adding this code somewhere in the HTML code of your web site (I recommend somewhere between <head> and </head>): 

<script type="text/javascript"
        src="browser-ponies.js"></script>
<script type="text/javascript"
        src="http://example.org/your-ponies.js"></script>

Of course you need to replace http://example.org/your-ponies.js with the URL where you really host the file.

If you want to you can also copy the browserponies.js file and serve it yourself. This server here does not have the best uptime so you might want to do that.

Best Pony

What is your favourite pony? Resort the list to tell me!

Download

You can download the source without images/sounds here:
browser-ponies-source.zip

Or with images/sounds:
browser-ponies-plus-resources.zip

Note that none of the images are made by me. They simply are the images of the Ponychan fork of Desktop Ponies. Go there for a full list of art credits. The only changes I made are fixes to the file names, because the web is case sensitive.

A git repository can be found here:
https://github.com/panzi/Browser-Ponies

License

The code of this software is licensed under the MIT license. This applies to all JavaScript files (except basecfg.js and ponycfg.js), HTML, CSS, unix shell script and Python files in this project. The license does not apply to any pony images, *.ini files (or files compiled from these INI files) or sound files. These files are copied from Desktop Ponies. The images and INI files are under various licenses (mostly CC BY-NC-SA 3.0).

Copyright © 2011-2013 Mathias Panzenböck

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments

Show Comments