I'm trying to find some way to convert a number 1 - 5 into a star rating, which can also accomodate decimals, like 4.3 or 3.34, and be very precise (like on Amazon.com). The rating doesn't have to be usable, it just has to be a static image. Any help?
I'm fine with using PHP or jQuery, whichever it needs to be.
You could create an image that is white with transparent star cutouts. Then place that over the top of a yellow div of a given length. Lets say your image was 100px wide. If you had a 3 star rating you would make the yellow div 100*(3/5) and 3 of the stars would be filled in.
EDIT:
A similar idea. You could have an image with all 5 stars on it. Place this image within a div with overflow:hidden. Then you set the width of the div the same way as above. The smaller the div the less stars you'll see.
EDIT2:
Fiddle just for fun. All the granularity you could ask for.
http://jsfiddle.net/qFMyC/
This must be sufficient for your purpose:
http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I wrote this ages ago. I was obsessed with not using JS. It needs some work, but I think it's exactly what you're looking for.
http://yefomit.com/internet/simple_css_rater
I'm hoping you mean turning the 1 -5 value into an actual star representation.
It depends how granular you want to be, I think Amazon's is accurate to tenth's (0.1), this is probably achieved server side to save on client load and take advantage of caching the images; but it could be done client side.
#kingjiv posted a good client side solution but for server side:
If you're not too worried about granularity you could create 11 images 0, 0.5, 1, 1.5 etc. etc. and pass the value into the image src attribute. This would serve the right image and they'd be nicely cached for re-use over and over on your pages.
If you want to be really granular though you could create them in code server side, cache them on creation each time ready for quickly serving afterwards. With this method you could go to whatever degree of accuracy took your fancy.
For PHP I'd recommend looking at Imagik
What I have done in the past is to create 2 divs and put them on top of each other.
On the bottom div you set the width equal to the width of 5 stars. So, if your star is 50px wide, your bottom div is 250px wide.
On the top div you use the same star with a different color. Then you set the width of that div in php or javascript to 50 * $decimalStarRating.
Related
So, here's what I'm attempting to do:
I have an image of a target, and I'd like to dynamically place the location of each arrow on the target. I'd also like to have the shot location be referenceable with a dynamically generated tooltip (JQuery?) so that when the user hovers over the shot location, they can see what the score for that shot is.
So, in the image shown here, the "target" is a standard image and the numbers (in white) are added based upon data in my database and indicate the shot sequence and approximate location of that shot. I'm storing the location in two parts: score and clock position. So, for the second shot, the score is "5" and the clock position is 14:30 (approximately!) For the third shot, the score is "2" and the clock position is 16:15.
What's my best approach? I think I can use the PHP GD libraries to get the shot sequence number added to the base image, but I'm not sure how to get the hover/tooltip to work in conjunction with this.
Update: Mission accomplished: here's the semi-finished product:
If you want JavaScript to be able to interact with it, you might be better just having a <div> with the target as a background-image, then placing more <div>s with position:absolute in the right places, applying the tooltips to these. Much simpler than generating the image in PHP and then implementing tooltips over certain areas.
I don't know what the best technology to use here is, I know PHP can do vaguely similar things but point me in the right direction if I'm wrong.
I'm building an online store and I'd like an easy (automated) way to categorise the colours of each item for sale.
I've seen numerous posts on Stack which are related to this, here are some good discussions for those interested:
Programmatically determine human readable colours
Get Image Colour
Detect overall average colour of a picture
These are all well and good. However, my issue is a little different. The images in question are all on different coloured backgrounds, and these affect the "average colour" of the image. I've tried resizing my images down to 1px to get a colour average, but this doesn't quite work.
As you can see, for image #1 the average colour is going to be a lot whiter than the product colour; for #2 and #3 it's going to be a lot more brown.
Can anyone think of any methods I could use to get the right average colour, in an automated way, with PHP, Ruby, Python, or anything similar? My idea was to take a section from the middle of each photo (which is usually where the product in question is) and take the average of that. For instance, get a 30px x 30px square in the centre of the image and process that.
This won't be absolutely perfect though, and I'm completely new to this sort of programming - is there any better way to determine foreground colour?
I'd suggest you explode the image, giving weight to the center of the image.
convert image_source.jpg -implode -32 image_destination.jpg
Then calculate the average color (by scaling to 1x1) or pick an average from a centered box.
If you need more precision, you'll need a computer vision algorithm, to segregate the foreground from the background; you can have a look at OpenCV
It's quite a hard task what your up to.
My suggestion is that you maybe use quite a little more input
One picture only the background (without the object) and one with the object.
Now if you threshold the subtraction you can get the object pixels. (I meen just take those who change between the two pictures)
Using these Pixels you could take the histogramm and select the most common ones.
(http://php.net/manual/en/imagick.getimagehistogram.php)
I am trying different methods to turn an image into divs that represent each pixel.
One method has been using php imagecolorat to create divs with a background-color which works well.
However what if I had thousands of divs width:1px;height:1px; each with the same css background-image with incremented background position?
What performance hit would this have? Ie: does the browser draw the entire image many times or only the section that is visible as the background? Note the original image is several hundred kb.
Thanks
Only the section of the image should be drawn, however the drawing operation will be called as many times as the amount of pixels, so that will be a performance hit. Did you try writing any test code and measuring how it works?
Thousands of divs will hurt your performance no matter what, because the browser has to parse each div, add it to the DOM, then render it.
The actual performance will be different on different browsers. Only the part of the image being requested will be drawn, but the rendering function that draws the image will be called for EVERY div. It's more or less whether the specific browser's implementation can render one pixel of an image faster or parse a string and print the image. If the browser has the image in-memory, the difference might be moot. But if the browser has to open the image file every time, then the disk access will kill you.
That being said, I'm willing to bet there are better ways of doing what you are trying to do. You can get the pixel the mouse clicked/hovered/etc using JavaScript, and then add an absolute div at that specific point to create the "filter" you are talking about. Furthermore, if two pixels next to each other get tagged, you can just expand the former div, rather than creating a new one, which will help the performance by a lot
In other words, look into just loading the image with an img tag, and then using JavaScript to do what you are trying to do.
A lot of websites are starting to offer generated image banners for server admins to display live stats on their websites. As a lot of our customers have requested this from us for a specific server type, I started looking into it.
Here is an mockup I did for explanation...
1) Basically I will have this image minus the white text as a template. What would be the most efficient way to do this, since we will most likely have quite a few of these? Should I just have it rebuild the image when someone views it (query server/build new image), or should I query the server every X minutes, keep data in database, and rebuild image every X minutes?
2) The text on it now is a custom font with white text and a 2px black stroke. Can I use custom fonts with stroke effects in PHP when generating it?
3) For generating a (Players over last 24 Hours Graph) I was looking at Figure B for Bar Graphs. Would I just put a background image on the banner, and then draw the bar graph over the top of it based off data from the database?
the most efficient way is to generate the image the least amount of times.
There would is no point quering the database every x minutes to generate these images if people only look at the graph twice per day, for example.
If performance becomes an issue, you can cache the output image for x mins and only requery the database after that time. (it depends on how fast the data changes)
Also if you want to keep load off you main server, this is an ideal task for using a secondary server.
Font handling in php is fairly limited. have a look at gd for image handling.
Like you mention, you best bet is to render the graph, then overlay that image and the text on the background image you have designed.
For #1, you should query every X minutes. You could speed it up more by checking if anything actually changed, as well. Rendering images through PHP can be costly (at least in my experience) and you'll definitely want to minimize how often you do it, especially if you have a lot to do.
Can we measure height of a div using php?
This is not possible at all: PHP serves HTML code. The browser renders it. Only after it is rendered, can height be determined reliably. Different browsers may end up with different heights. Different user settings (like font size) may end up with different heights.
The only way to find out an element's height is using JavaScript which runs in the browser. You can theoretically send the results back to a separate PHP script using Ajax, but I doubt that'll make much sense.
You could use jQuery's .height() like so:
var height = $("#elementID").height();
(there are native JavaScript approaches to this as well, but they tend to be a bit long and complicated.)
As others have said here, you cannot use PHP to read the height/width of a div already rendered. However, aside from the javascript options already presented keep in mind that you can use PHP to set the height/width of a div before it is sent to the browser. This would be in the form of an inline style of course. This is not the most elegant solution and to be honest I would avoid it, but you did not state what specifically it is that you want to do, and why.
Not sure if that info will help you in your implementation but it wasn't mentioned so far and thought I would contribute it.
No, we cannot. div is rendered by a browser based on CSS/JS. in a different browsers it can be different (IE, Firefox). It does not depends of PHP.
In case you are using text inside the div you could use strlen() to have some kind of measurement of height. I am saying some kind ofcourse because you are just counting the number of characters which then can be equated to some height depending on the font-size of the text, the line-height, the width of the div.
Lets say one screenheight can output 2000 characters on your website
If you count 4000 characters you have 2 screenheigths.
954 characters = almost half of a screenheight ...
i have used this method once to calculate the amount of ads i could implement in the sidebanners on a blog styled website with mainly textcontent on it ...
The height of a vertical ad was about one screenheight. If the text that needed to be outputted was 7000 characters i knew i had room for 3 ads ...