Wiki Summary Box 0.1.2 update
A few updates to the Wiki Summary Box.
The first change is that it now uses the proper Mediawiki API to retrieve the article text instead of relying on the AppJet gateway. Of course now the user's browser has to download and parse the entire article text instead of just getting the small summary bit, but this way still feels a lot better.
Second, there is now a list of Wiki sources that the script checks against, making it more a general Wiki box rather than something tied to Wikipedia. Any links that match this list will get the summary box. Sources supported out of the box include Wikipedia, Wikiquote, Wikispecies, Wikinews, Wikisource, Wikibooks, Wiktionary and Wikiversity. It's relatively easy to add more sources, just be sure that the Wiki is a Mediawiki and that the API is available. There is more info in the JavaScript file about this. And do note that if the Wiki is very different from Wikipedia, the script might not be able to extract anything and/or look odd. The Wiki text can of course be styled with CSS like anything else, but you'll have to find the class names / element id's yourself. This has already been done to hide some elements from Wiktionary and Wikispecies.
If you know of any other Wikis that would be interesting to add, please leave a comment!
An 'loading' indicator has been added. As it is now, it's just a simple text that says "Loading..." but it's easily changed and styled in the CSS file if that's not good enough.
I've also added a small delay before showing and hiding the box, default is 200 and 300 ms, respectively. You can find these at the very top of the script if you want to alter them.
Also, I had to make an ugly workaround to deal with IE's inability to handle relative paths in the href attribute on links. I hope I can find a better way..
Test links:
Wikiquote test: Albert Einstein
Wikinews test: Scientology vs. Anonymous
Wikisource test: Obama saves the day
Wikispecies test: Tyrannosaurus rex, Eukaryota
Wiktionary test: consequently
Wikiversity test: Quantum mechanics study guide
Wikibooks test: Linear algebra
Thanks for the feedback in the earlier post!
Current version: 0.1.2
Files: sumbox.js and sumbox.css
Read more...
The first change is that it now uses the proper Mediawiki API to retrieve the article text instead of relying on the AppJet gateway. Of course now the user's browser has to download and parse the entire article text instead of just getting the small summary bit, but this way still feels a lot better.
Second, there is now a list of Wiki sources that the script checks against, making it more a general Wiki box rather than something tied to Wikipedia. Any links that match this list will get the summary box. Sources supported out of the box include Wikipedia, Wikiquote, Wikispecies, Wikinews, Wikisource, Wikibooks, Wiktionary and Wikiversity. It's relatively easy to add more sources, just be sure that the Wiki is a Mediawiki and that the API is available. There is more info in the JavaScript file about this. And do note that if the Wiki is very different from Wikipedia, the script might not be able to extract anything and/or look odd. The Wiki text can of course be styled with CSS like anything else, but you'll have to find the class names / element id's yourself. This has already been done to hide some elements from Wiktionary and Wikispecies.
If you know of any other Wikis that would be interesting to add, please leave a comment!
An 'loading' indicator has been added. As it is now, it's just a simple text that says "Loading..." but it's easily changed and styled in the CSS file if that's not good enough.
I've also added a small delay before showing and hiding the box, default is 200 and 300 ms, respectively. You can find these at the very top of the script if you want to alter them.
Also, I had to make an ugly workaround to deal with IE's inability to handle relative paths in the href attribute on links. I hope I can find a better way..
Test links:
Wikiquote test: Albert Einstein
Wikinews test: Scientology vs. Anonymous
Wikisource test: Obama saves the day
Wikispecies test: Tyrannosaurus rex, Eukaryota
Wiktionary test: consequently
Wikiversity test: Quantum mechanics study guide
Wikibooks test: Linear algebra
Thanks for the feedback in the earlier post!
Current version: 0.1.2
Files: sumbox.js and sumbox.css
Read more...
MojoZoom and MojoMagnify updates
Looks like I promised a bug fix or two and failed to deliver.
In case you missed the original posts, MojoZoom and MojoMagnify are JavaScript effects that let you view high-res portions of images, creating a zoom- or magnification-like effect. You can read the original posts here and here.
They were initially created as a response to similar effects released by Magic Toolbox, the difference being that MojoZoom and MojoMagnify are free, released under the MIT license and uses only JavaScript and DOM.
It was requested that it should be possible to make the zoomed image always show and not disappear on mouseout. For this purpose you can now use the attribute data-zoomalwaysshow="true" on the image (example on the demo page) just as an extra argument has been added to the MojoZoom.makeZoomable JavaScript function.
It was also reported that MojoZoom would make IE7 crash, but I just can't get it to do that. If anyone has the same problem and feels like digging into the code a bit to try and find the cause, that would be much appreciated.
Visit the MojoZoom page for demos and download links
I also found some issues when the image was relative positioned that I think are resolved now.
It still breaks if you use absolute positioning, but you can simply wrap the image in an absolutely positioned div if you need that.
Visit the MojoMagnify page for demos and download links
Also, there have been some comments about the use of the data-* attributes and suggestions that I should consider using something else, but since they're just another one of the many great things to come from HTML5 and I'm a fanboy, I think I'm going to stick to them. If it really bothers your need for validation, it's really rather to find and replace it in the JavaScript files. Using the MojoMagnify.makeMagnifiable and MojoZoom.makeZoomable functions to add the effects eliminates this problem, of course.
Finally, Giuseppe at extrowebsite.com has put up an Italian translation of much of the information on MojoMagnify and MojoZoom. Thanks! Read more...
Looks like I promised a bug fix or two and failed to deliver. In case you missed the original posts, MojoZoom and MojoMagnify are JavaScript effects that let you view high-res portions of images, creating a zoom- or magnification-like effect. You can read the original posts here and here.
They were initially created as a response to similar effects released by Magic Toolbox, the difference being that MojoZoom and MojoMagnify are free, released under the MIT license and uses only JavaScript and DOM.
MojoZoom
There was a bug in IE where, if you moved the mouse really fast out of the image, the zoomed image would not disappear. This has been fixed.It was requested that it should be possible to make the zoomed image always show and not disappear on mouseout. For this purpose you can now use the attribute data-zoomalwaysshow="true" on the image (example on the demo page) just as an extra argument has been added to the MojoZoom.makeZoomable JavaScript function.
It was also reported that MojoZoom would make IE7 crash, but I just can't get it to do that. If anyone has the same problem and feels like digging into the code a bit to try and find the cause, that would be much appreciated.
Visit the MojoZoom page for demos and download links
MojoMagnify
The same IE bug was present in MojoMagnify, so naturally that has been fixed as well. No other updates of note here.I also found some issues when the image was relative positioned that I think are resolved now.
It still breaks if you use absolute positioning, but you can simply wrap the image in an absolutely positioned div if you need that.
Visit the MojoMagnify page for demos and download links
Also, there have been some comments about the use of the data-* attributes and suggestions that I should consider using something else, but since they're just another one of the many great things to come from HTML5 and I'm a fanboy, I think I'm going to stick to them. If it really bothers your need for validation, it's really rather to find and replace it in the JavaScript files. Using the MojoMagnify.makeMagnifiable and MojoZoom.makeZoomable functions to add the effects eliminates this problem, of course.
Finally, Giuseppe at extrowebsite.com has put up an Italian translation of much of the information on MojoMagnify and MojoZoom. Thanks! Read more...
Getting your ASCII on with Flickr
A while back I made a JavaScript image-to-ASCII-art converter using the image data access available through the Canvas element. For this Thursday's afternoon of fun and code, I decided to pull it back out of the closet and see what else I could do with it.
I'd already worked a bit with the Flickr API and found it quite a pleasant experience, so I decided to make a small application that pulls out Flickr photos and asciifies them for retro fun and profit.
You can choose to have the characters colored the same color as the pixels they represent or simply leave them black/white. Optionally, you can have the background of the character colored as well by choosing "use blocks", making the final image more akin to a very blocky or pixelated version of the original, just made out of HTML rather than an actual image. Last, there's the option of having the background of the output be the average color of the original image. This may not look great for all images - and of course makes no sense if you're already using the blocks method.
Be aware that far from all Flickr images are suitable for Asciifying and some of the options just mentioned look better on some images than on others.
By default, the application will only ask for images that are licensed under the Creative Commons licenses to ensure that no feelings and/or intellectual property rights are hurt.
Since the application relies on the Canvas element and image data access, so far only Firefox, Opera and recent WebKit nightlies are supported.
Click here to start Asciifying Flickr
..or read on, if you're interested in
The image is then painted (and downscaled since we're not using all pixels) on a hidden Canvas element, the image data is retrieved using getImageData() and each pixel in the image is analyzed. The brightness of the pixel is calculated using a simple RGB to brightness formula and this level of brightness is then mapped to a list of characters selected for their varying apparent brightness. The list used here is [ .,:;i1tfLCG08@] for black/white output and [ CGO08@] for colored output.
If the output is black/white, we just write the character to a string and move on to the next. If we're using colored output, we create a span element styled with the appropriate color. All these spans are the reason it can appear a bit more sluggish when using colors than when using black/white output. If the "blocks" option is on, we simply set the background of the character span to be the same color as the character itself. This way, the block appears solid but we can still drag the mouse over the output and select the ASCII text. For the last option, background color, the original image is downscaled to a 1x1 pixel Canvas and the color of this single pixel is read and used as the background color of the containing element.
Feel free to leave a comment or ask any questions.
Get Asciified!
Read more...
A while back I made a JavaScript image-to-ASCII-art converter using the image data access available through the Canvas element. For this Thursday's afternoon of fun and code, I decided to pull it back out of the closet and see what else I could do with it.
I'd already worked a bit with the Flickr API and found it quite a pleasant experience, so I decided to make a small application that pulls out Flickr photos and asciifies them for retro fun and profit.
How it works
You simply enter the search query of your choice and click the "Asciify" button. A request is then sent off to the Flickr server and any photos that match the query are returned. The image data is analyzed and turned into ASCII characters.
You can choose to have the characters colored the same color as the pixels they represent or simply leave them black/white. Optionally, you can have the background of the character colored as well by choosing "use blocks", making the final image more akin to a very blocky or pixelated version of the original, just made out of HTML rather than an actual image. Last, there's the option of having the background of the output be the average color of the original image. This may not look great for all images - and of course makes no sense if you're already using the blocks method.Be aware that far from all Flickr images are suitable for Asciifying and some of the options just mentioned look better on some images than on others.
By default, the application will only ask for images that are licensed under the Creative Commons licenses to ensure that no feelings and/or intellectual property rights are hurt.
Since the application relies on the Canvas element and image data access, so far only Firefox, Opera and recent WebKit nightlies are supported.
Click here to start Asciifying Flickr
..or read on, if you're interested in
How it really works
The Flickr search part is pretty straight forward. A single request is sent, calling the "flickr.photos.search" method. We then get a list of photos from Flickr, but we can't access the data in these directly due to the same-origin policy of the Canvas element. To get around this, we're using a small proxy script (written in PHP) that does nothing other than retrieve the image file and pass it straight through to the browser.The image is then painted (and downscaled since we're not using all pixels) on a hidden Canvas element, the image data is retrieved using getImageData() and each pixel in the image is analyzed. The brightness of the pixel is calculated using a simple RGB to brightness formula and this level of brightness is then mapped to a list of characters selected for their varying apparent brightness. The list used here is [ .,:;i1tfLCG08@] for black/white output and [ CGO08@] for colored output.
If the output is black/white, we just write the character to a string and move on to the next. If we're using colored output, we create a span element styled with the appropriate color. All these spans are the reason it can appear a bit more sluggish when using colors than when using black/white output. If the "blocks" option is on, we simply set the background of the character span to be the same color as the character itself. This way, the block appears solid but we can still drag the mouse over the output and select the ASCII text. For the last option, background color, the original image is downscaled to a 1x1 pixel Canvas and the color of this single pixel is read and used as the background color of the containing element.
Feel free to leave a comment or ask any questions.
Get Asciified!
Read more...
Embed Wikipedia summaries in articles
A small, light-weight Wikipedia summary/preview widget that lets you include the first bit of a Wikipedia article in popups in your blog post, article, etc.
Links to Wikipedia are found everywhere in articles and blog posts, and I use them often myself when that extra level of information might be of interest to the reader but falls outside the scope of the actual article. However, sometimes a short blurb introducing the topic would be enough and would also keep the reader from disappearing into the time stealing rabbit hole that we all know Wikipedia can be.
Edit: The widget is now using the MediaWiki API rather than the AppJet gateway. Read update here.
One solution is to popup a small box with a summary from the Wikipedia article when the mouse moves over the word. There is one service that already provides something like this, the NBC owned Snap.com. Their SnapShot boxes display everything from website screenshots to Flickr images to Wikipedia summaries. That's cool, but I found it a bit too bulky just to display a few paragraphs of text and, as far I know, you don't get much in the way of customizing the appearance.
So I decided to create my own simple Wikipedia box. Fortunately most of Wikipedia is pretty neat and the first section usually contains a decent summary of what the article is about. So we can simply pull out all the text between the two first headings. Some articles have info boxes on the right that are ignored, as to only get pure text.
All this is done by a small AppJet JSON-P application that takes care of retrieving the article and locating the relevant portion of the text. The text is then processed a bit (ie. links are made to open in new windows and point to the absolute URL, reference ids are removed, etc) before it's all put in a nice little JSON package and returned to the client:
The 5000 most recently accessed articles are cached (there's a 50MB storage limit on each AppJet app and I'd rather err on the safe side.) making sure that delivery is speedy and that it doesn't hit Wikipedia's servers more than necessary.
The text is received by a bit of JavaScript which pops up a box containing the article summary and a small link to Wikipedia and the original article (and the GFDL license notice).
The box itself is rather simple, consisting of 4 simple elements. I know this is 2008 and there are no rounded corners or whatever the kids are using these days, but I wanted to keep it basic. The included style sheet should be self-explanatory and easy to change for your liking, although you might have to dive into the JS if you want something radically changed.
So, to use it, simply include the CSS and JS and start putting Wikipedia links in your text like this:
Example output (hover the mouse over the underlined words):
As you can see from this sample code, you simply make links to the relevant Wikipedia articles and the script should locate them automatically and enable the summary box.
Now, I'm not entirely sure whether or not this breaks the terms of use of Wikipedia. I do know they do not allow dynamically generated mirrors, but I'm not really sure in what category something like this would fall since the articles are dynamically downloaded (if not in cache) even if it isn't really a mirror as such. They used to have a crawl-delay of 1 page per second in their robots.txt, which is obeyed by the AppJet application. If you happen to get hit by that limitation (unlikely, I think) you'll be served a notice of that instead of the article text.
Another thing is that I'm not sure what kind of bandwidth quotas, if any, you might run into with AppJet. If every blog in the world started hitting the same AppJet application, I'm sure it would cause trouble, but that's unlikely to happen. Either way, it's very easy to simply clone the AppJet app if you want to use it on your own site and be safe.
I've tested the script in FF3, Opera 9.5, IE7, Safari 3.1 and Chrome and everything looks fine there.
Finally, download the files here: sumbox.js [4.8 KB] and sumbox.css [1.0 KB] Read more...
Links to Wikipedia are found everywhere in articles and blog posts, and I use them often myself when that extra level of information might be of interest to the reader but falls outside the scope of the actual article. However, sometimes a short blurb introducing the topic would be enough and would also keep the reader from disappearing into the time stealing rabbit hole that we all know Wikipedia can be.
Edit: The widget is now using the MediaWiki API rather than the AppJet gateway. Read update here.
One solution is to popup a small box with a summary from the Wikipedia article when the mouse moves over the word. There is one service that already provides something like this, the NBC owned Snap.com. Their SnapShot boxes display everything from website screenshots to Flickr images to Wikipedia summaries. That's cool, but I found it a bit too bulky just to display a few paragraphs of text and, as far I know, you don't get much in the way of customizing the appearance.
So I decided to create my own simple Wikipedia box. Fortunately most of Wikipedia is pretty neat and the first section usually contains a decent summary of what the article is about. So we can simply pull out all the text between the two first headings. Some articles have info boxes on the right that are ignored, as to only get pure text.
All this is done by a small AppJet JSON-P application that takes care of retrieving the article and locating the relevant portion of the text. The text is then processed a bit (ie. links are made to open in new windows and point to the absolute URL, reference ids are removed, etc) before it's all put in a nice little JSON package and returned to the client:
The 5000 most recently accessed articles are cached (there's a 50MB storage limit on each AppJet app and I'd rather err on the safe side.) making sure that delivery is speedy and that it doesn't hit Wikipedia's servers more than necessary.
The text is received by a bit of JavaScript which pops up a box containing the article summary and a small link to Wikipedia and the original article (and the GFDL license notice).
The box itself is rather simple, consisting of 4 simple elements. I know this is 2008 and there are no rounded corners or whatever the kids are using these days, but I wanted to keep it basic. The included style sheet should be self-explanatory and easy to change for your liking, although you might have to dive into the JS if you want something radically changed.
So, to use it, simply include the CSS and JS and start putting Wikipedia links in your text like this:
Example output (hover the mouse over the underlined words):
The sky above the port was the color of television, tuned to a dead channel.
"It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. The Chatsubo was a bar for professional expatriates; you could drink there for a week and never hear two words in Japanese.
- Neuromancer by William Gibson
"It's not like I'm using," Case heard someone say, as he shouldered his way through the crowd around the door of the Chat. "It's like my body's developed this massive drug deficiency." It was a Sprawl voice and a Sprawl joke. The Chatsubo was a bar for professional expatriates; you could drink there for a week and never hear two words in Japanese.
- Neuromancer by William Gibson
As you can see from this sample code, you simply make links to the relevant Wikipedia articles and the script should locate them automatically and enable the summary box.
Now, I'm not entirely sure whether or not this breaks the terms of use of Wikipedia. I do know they do not allow dynamically generated mirrors, but I'm not really sure in what category something like this would fall since the articles are dynamically downloaded (if not in cache) even if it isn't really a mirror as such. They used to have a crawl-delay of 1 page per second in their robots.txt, which is obeyed by the AppJet application. If you happen to get hit by that limitation (unlikely, I think) you'll be served a notice of that instead of the article text.
Another thing is that I'm not sure what kind of bandwidth quotas, if any, you might run into with AppJet. If every blog in the world started hitting the same AppJet application, I'm sure it would cause trouble, but that's unlikely to happen. Either way, it's very easy to simply clone the AppJet app if you want to use it on your own site and be safe.
I've tested the script in FF3, Opera 9.5, IE7, Safari 3.1 and Chrome and everything looks fine there.
Finally, download the files here: sumbox.js [4.8 KB] and sumbox.css [1.0 KB] Read more...
23 pretty JavaScript fractals
The previous post about the size optimized Mandelbrot renderers didn't really do the Mandelbrot set justice in terms of mathematical and aesthetical prettiness. So, armed with my two good friends, Canvas and JavaScript, I set out to further explore the infinite beauty and complexity of both the Mandelbrot set and other fractals.
The result is a small application that lets you view visualizations (colored or b/w) of different fractals and zoom in by simply clicking the mouse. There are a few different fractals available:
The controls should be fairly self-explanatory, but here they are anyway:
Note that changing some of the settings causes an immediate re-render of the image.
Be warned that the further you zoom in on any of the fractals, the more CPU time is needed to render, and of course a large image size is more demanding than a small one. I've found Safari with latest WebKit nightly to be the fastest but YMMV. Firefox 3 seems to have memory issues when you zoom in more than a few times and there is of course no IE support.
And for the finish, here are a few images from a zoomed-in Mandelbrot set.
Play with JavaScript fractals here Read more...
The previous post about the size optimized Mandelbrot renderers didn't really do the Mandelbrot set justice in terms of mathematical and aesthetical prettiness. So, armed with my two good friends, Canvas and JavaScript, I set out to further explore the infinite beauty and complexity of both the Mandelbrot set and other fractals.
The result is a small application that lets you view visualizations (colored or b/w) of different fractals and zoom in by simply clicking the mouse. There are a few different fractals available:
Mandelbrot set - The granddaddy of all fractals, the work of super smart mathemagician Benoît Mandelbrot. This one shouldn't need much introduction. Also available are a few Multibrots, variations on the Mandelbrot theme created by raising z to higher powers, rather than the standard z^2 of the Mandelbrot.
Tricorn - Another variation of the Mandelbrot set, also sometimes called the Mandelbar.- Burning Ship - Another famous fractal, named after the neat structures that appear when zooming in along the x-axis on the positive side. This is the one depicted at the very beginning of this post.
- Julia set - Created much like the Mandelbrot set, but using a constant complex number C. Depending on the complex number used, this will render in any number of different ways. A selection of numbers are available. Dendrite, Siegel Disk, Douady's Rabbit and San Marco are all also variations of the Julia set.
- Julia Cubed - A variation of the Julia set, using z^3 instead of z^2. Much like the Multibrot variations of the Mandelbrot set.
- Julia Sine/Cosine - More variations of the Julia set, now using trigonometric functions to create interesting structures. Note that these are a bit slower than the rest due to the many extra function calls.
The controls should be fairly self-explanatory, but here they are anyway:
- Image size: The dimensions of the rendered image. Smaller = faster.
- Color scheme: The color used when painting the fractal. Black/white might be a bit faster.
- Smooth colors: A prettier but slower coloring algorithm. The image may look darker when using smooth colors. Only works well for Mandelbrot and Julia set (using z^2) and causes banding when zooming in.
- Zoom factor: How much to zoom in when clicking.
Note that changing some of the settings causes an immediate re-render of the image.
Be warned that the further you zoom in on any of the fractals, the more CPU time is needed to render, and of course a large image size is more demanding than a small one. I've found Safari with latest WebKit nightly to be the fastest but YMMV. Firefox 3 seems to have memory issues when you zoom in more than a few times and there is of course no IE support.
And for the finish, here are a few images from a zoomed-in Mandelbrot set.
Play with JavaScript fractals here Read more...
