I have been looking at the YouTube Insight function and want to learn how their chart PNGs are created.
If you have a video and look at the statistics, you get a bunch of PNG-images that in many ways can be considered interactive. Look at the image below.
As far as I can tell, everything consist of PNG images. I expected to see flash elements, but I do not.
For example: The slider where you chose date range can be dragged, clicked and the image updates dynamically without the page reloading. I am thinking, maybe ajax-style calls are made that replaces the image? It is totally seamless as far as I can see.
Another example: You can chose country by clicking the world map. The images are instantly updated to display the demography chosen. Are something simple as image maps used to catch the clicks?
Google/YouTube Insight screenshot http://www.mattis.st/images/google_insight.png
My questions are:
1). How do you create PNG images with information from a database? I prefer to use PHP so if you like tweak your answers in that direction. I am not looking for any third part "plugins", other than perhaps jQuery.
2). How are they creating the "interactivity" on their PNGs?
The PNGs are only clickeable and interactive when you check Google Insight on your own videos. Checking normal statistics for a video only loads static PNGs.
I know about Open Flash Chart and the likes, however I want to create my own code to learn as much as possible and be able to tailor the code for my use.
I truly appreciate any answers. Please ask for clarification if I am unclear.
EDIT: I examined the Google/YouTube source code further and found one of the images to be:
<img src="http://chart.apis.google.com/chart?chs=422x110&cht=lc&chco=808080&chd=s:At9j0jSUPJKMM&chls=1&chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">
Which looks like this (saved from my valid session):
Image from source http://www.mattis.st/images/google_insight2.png
As you can see, this is the background PNG image without the bars and the range selection overlay.
<div id="GEOMAP_map" style="">
<embed type="application/x-shockwave-flash"
src="/insights/search/resources/544738731-geomap.swf"
width="500" height="310" style="undefined" id="geomap"
name="geomap" bgcolor="#FFFFFF" quality="high"
allowscriptaccess="always" wmode="opaque" flashvars="(...)"></div>
Looks like flash to me.
AFAIK you will always need a plugin to generate images from PHP (be it GD or ImageMagick). I don't have any experience with ImageMagick, but I know GD isn't the quickest of cats.. I wouldn't count on it to generate your charts on-the-fly!
And as suggested by justkt, you could use any js library to create interactivity. No fancy flash required :)
After thinking about it, examining the source even more, and considering the replies you guys have made I have come to the following conclusions:
1). The PNG's are generated with the Google Charts API (thanks Tom!).
2). The interactivity is created with nifty javascript programming. The seamlessness of it is hugely impressive, and I will try to implement something alike in my project.
Thank you for your replies and your time.
Related
I'm using Galleria.js to create a background slideshow in a site I'm working on, and I'd like to be able to serve different resolutions to different devices. I'm using adaptive-images.php which is generating the needed files, but it seems as though galleria is still pulling the original full resolution ones no matter what. Is there a way to make this work, or perhaps an alternative solution like picturefill.js?
Thanks!
I'd love to see this, too. Unfortunately this could only be done in Javascript - not in PHP. Probably it would be possible to use picturefill.js as a Galleria plugin but unfortunately I don't know enough Javascript to do this.
Explanation: Galleria dynamically looks for the image referenced and shows that one. Something is needed to tell Galleria to use a different image source (depending on the screen size e.g.). To do this the method that picturefill.js uses (replacing src by srcset) would be perfect but it has to be integrated as a function in Galleria.
It's probably not too hard for someone with a good knowledge of Javascript - anybody?
This recently has also been asked at Galleria's support: http://support.galleria.io/discussions/questions/18040-compatible-with-picturefilljs
However Galleria provides a somewhat useful functionality out of the box: You can use three different sizes of an image by serving markup like this:
<div class="galleria">
<img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description">
<img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description">
</div>
The 'data-big' size will be shown in fullscreen mode out of the box - not depending on screen size.
Perhaps it's a workaround until something more useful comes up.
Everything truly adaptive needs a Javascript plugin for Galleria.
Okay, I know questions like this exist in multiple forms across StackOverflow and other places on the web, but none of them is pointing me to what I actually need (maybe I missed a question that was more catered to my problem).
I need a Facebook-style image upload mechanism, using Codeigniter and javascript/jquery. Here's what it's supposed to do -
Using a single file upload control (or for that matter any clickable control), open up the "Choose Files" dialog window, and allow the user to select multiple images from it. (I know this cannot yet be done in IE, and I do not really care about the multiple file selection not working in IE).
Once the user has selected the files, the page should display a series of progress bars (like Facebook does). As each image gets uploaded, the corresponding progress bar reaches 100% (if it's simpler to implement, I am willing to forego the graphical progress bar for a text that displays the progress percentage), and the thumbnail of the image is displayed next to the completed progress bar (or text). At this point, the user should have the option to delete the uploaded image by clicking a cancel button (I think I can get this part working on my own).
The upload can be sequential (like Facebook does), or asynchronous (some upload libraries I found work this way).
What's most important (and the part that is stumping me) is the thumbnail generation. I know that there's some HTML5/CSS3 technique that allows you to display the thumbnail before the files have actually been uploaded, pulling them directly from the user's hard drive. But that won't work in IE8, and while I am not concerned about the multiple image selection not working in IE8, I need for the thumbnail generation to work cross-browser, and that includes IE8 (deciding on the browser compatibility is not something I can command, so please don't come up with a "screw IE!" solution).
I have tried using uploadify (I have no constraints against using Flash), but cannot seem to able to customize it to my needs. While uploadify does indeed display progress bars, I was unable to find a way to generate (and display) thumbnails on the fly, in accordance with the behavior I described above. I know how thumbnail generation works on PHP, just cannot figure out how to implement this together with the progress indicators. Am I looking for a suitable jQuery/ajax call?
Any help and/or pointers would be appreciated. I admit that I might have missed a StackOverflow question that would solve my issue, so please direct me to that page, or to any other page you believe will help me. Please feel free to suggest upload libraries other than uploadify, which you believe I might find useful.
Thanks in advance. And thanks for reading through all this - I tried my best to make the question properly descriptive!
I have used Jquery file upload with good results. It does need IE to be in compatibility mode, but worked well for chrome/firefox.
UPDATE. It now claims to support IE 6.0+.
I'll focus on point 4 here. It can be done, but you'll end up using iframes (yeah, I now).
They can be 1px small, but you'll need them if you want to create thumbnail previews.
A good starting point would be here: http://www.zurb.com/playground/ajax_upload
As for creating the actual preview images (smaller versions) you can use CI's image library.
Let me know how it works out.
I want to have a map (which is image-mapped) show green in areas where some criteria applies, yellow in some other areas and red in other areas.
The goal is to display a clickable image which will will colour certain states which match certain criteria. I was previously considering flash but the owner simply doesn't want flash. One possible alternative would be to display 'clickable' coloured labels on the map but I don't know how to do this either. Does anyone know how I can solve this? Any help will be much appreciated. Thanks!
Check out Raphael: http://raphaeljs.com/
So this is what I finally did.
I found an svg map of Nigeria on wikipedia (which has the svg maps of
almost every country).
I downloaded InkScape and cut out the parts I didn't need from
the map.
I used the Raphael SVG to HTML Converter tool to convert it to
code usable by raphael.
From here it was quite very easy, I could use path.fill to 'colorify'
the image and it was easy to set different functions for clicking any
part. Scaling was also not an issue as the image could be scaled
dynamically based on the container.
Thanks to everyone especially Olle for pointing me in the right direction!
jQuery Vector Map http://jqvmap.com/
or
JVectorMap
JVectorMap comes with more pre-generated maps than jqvmap. But you should be able to generate your own.
Take a look at jQuery. PHP is not where you will do this, its going to be client side Javascript to manipulate an html image map using either overlay images or a change in CSS via the Javascript.
For what its worth, this can be done in php using the gd extensions. Essentially what you do is load an all white version of the image, and then using coordinates on the image, fill the image with a given color using imagefilltoborder (http://www.php.net/manual/en/function.imagefilltoborder.php) .
However, to make it clickable, you would need to use an image map or javascript on the clientside anyway.
I'd like to know which up-and-crop tools you suggest to me. I tried couple of scripts like JCrop but I always get stack with some type of format like bmp. I either can't upload or I can upload but can't crop. If you use (or know) one that works well with different formats, then please just give me its name and I'll be strongly appreciated!
Well, i dont know much about JCrop but you can build it up with several tools.
I think image processing kind of works should be done on server side.
There is a good OOP Library called Imagine. It's mostly based on Python's Imaging Library which is awesome and has decent documentation. And this is its crop functions documentation.
On client side you can use some kind of image area selection tool to let the user determine desired area to crop. imgAreaSelect is good to go. Then you can send crop area to php by JQuery's post function or any other way.
It's amassing that in all this time this haven't got any other answers, I hope this helps.
Like stated in the other answer you should combine a few tools to solve each part of the problem.
To let the user select the cropping area:
If you don't like jCrop you can try Guillotine. It's very lightweight, easy to set up and allows to crop, zoom and rotate images. It has touch support and it's responsive (fluid).
Keep in mind that you can't display image types that the browser doesn't support, but you can convert them in step 3.
To upload the images:
For most cases, once you have the cropping area, with a simple file input will suffice.
Now, if you want to upload files asynchronously check out
this
for a quick and easy set up or this
for a more complex solution.
To actually crop and process the image:
Once uploaded you can crop, convert and process the images on the server, ImageMagick is a great tool for this. It's Open Source and many languages have wrappers for it.
You've tagged the question with PHP so here is a PHP wrapper for ImageMagick.
I am wondering if there is a script similar to the facebook status update thing,
What I mean, is when for ex. I paste a youtube/other video site/image/link it automatically detects the contents of the page and associates an embed code with it (if its a video)..
So I'm wondering if there is a ready script that has a large database of websites and can associate video site url's with embed codes.
I could actually do something like that by myself but the problem is that I want to support a lot of websites, like facebook does.
Please help me find a solution.
Thanks.
Take a look at the Embedly API: http://api.embed.ly/
It gets the embed code for a lot of the popular video sites out there and also for some images sites. I highly recomend it,
you can try it out here.
You really wouldn't have to scan that large of a database. With videos, you could keep track of maybe the top three or so uploading sources (youtube, vimeo, metcafe...) and their embed codes.
As for images and links, those are pretty easy to detect and don't require any special embed code. By pretty easy, I mean very simple. Just use a simple regular expression to search for a link in their post.
If it's a picture, you can easily tell by looking at the file extension of the link (jpg, png, gif, etc.). If so, do whatever is proper to embed any old image. If it's just an ordinary old link (doesn't match any of your video sites, or doesn't end in a file extension for an image), just use the link itself.
The only marginally tricky part would be getting the unique embed codes for the video sites. But perhaps there is some external library/api that could do that small part for you (another answerer has provided has a proper API/pre-built library for this). However, images and links are mostly pretty simple.
EDIT It seems I misread your problem, and that you are only looking for pre-built libraries with video embed codes. In that case, the other answer is exactly what you want.