I'm working on a simple image gallery project and I'd like to implement the ability to search based on a color hex code. So if someone enters 'ff1212' into the search, it will display only those images that contain that particular shade of red. I've seen a website that has a search that works the way I want: http://cssline.com (the AJAX part is nice, but its the server-side stuff I'm after).
I can't figure out how to store the color data from each image. Should I get each unique hex code used in an image and store them as tags in a database? It seems like this would create a huge dataset which would slow down the search. What about storing the images themselves in the database and scanning their colors during the search? That also sounds like it would be slow. I know that once I figure out how to store the data for speedy searching I can figure out how to code the search itself.
Does anybody have any tips or advice that can help me?
First of all, bring the number of colors in the images down to an amount that is workable (max 16 or so).
Then, to be able to compare different images, i think it's a good idea to store only websafe values (the intervals #erelander was talking about) to normalize the results.
You may try storing color intervals of each image in a database rather than storing each unique color value. Of course, searching these intervals may require a different search algorithm.
I dont think that storing color values in database will make it slow. It will, although, make it insanely large! And given that you can index data on color values, the process will be fast.
Related
I have a standard jpeg image, which I use within some commercial software to colorize other data (by mapping the image's color onto the data). Then I export the colored data from this software to an XYRGB ascii file, i.e. I store the data information in the first two columns of each row and then the three RGB colors in the last three columns.
Since I need to convert the color to CIELab or CIELuv, it seems I need to know which exact colorspace (RGB, sRGB, gamma, whitepoint - you name it) my RGB values are in. But the question is: How can I find out? Or could I just assume a certain profile being a good approximation?
(Remark: The company of the commercial software I used was not able to tell me any specifics...)
If you don't know the provenance of the image, there's not anything you can do to determine the color space from the RGB data alone. It's a little like having a blueprint without a scale. You could guess and check with an application like Photoshop that can assign a profile to an image but even then it's not always obvious which is correct unless the image contains colors you can recognize as correct.
For many images sRGB is good guess. Most image on the web are sRGB and many non-color managed apps assume sRGB. But just understand that it is still a guess. If color accuracy is critical, you need the profile.
I'm looking at some new options for displaying a percentage value as a fill in a custom shape. Consider the effect to be similar to a "progress thermometer" in a traditional dashboard UI sense.
Considerations
Goal - a graphic element showing a percentage value for a custom report.
Format - Either a full graphic (or infographic) itself, or part of a PDF via Photoshop/InDesign or even iBooks (as an excuse to use it).
Usage - I'd like the process to be programmatic, for re-use. It needs to be accurate, and I'd like the solution to be somewhat object oriented to apply to other datasets and graphical containers. This rules out hand-drawn charting.
Source data - currently a pivot table in Excel, but I can work with any other host as required.
Shape - is a custom vector shape that will originate from Illustrator/Inkscape. final format as best fits resolution and rendering of the report. I would also be interested in any other generative shape ideas (such as java/javascript).
Fill - I'd like to be able to represent the fill as both an actual percentage of total area (true up), and as a percentage of the vertical scale. I'd imagine this flexibility would also help reuse of the method as a fill value against selected object variables (height, area, whatever).
I know I'm being slightly vague in the programming languages or hosts side of things, but this gives me an opportunity to break out of the usual analytic toolchain and scope out some innovative or new solutions. I'm specifically interested in open source solutions, but I'm very keen to review other current methods you might suggest.
This might be a little open ended for you, but d3.js is very powerful. There might be some useful templates on the site, or you can build your own from the library.
If you limit yourself to shapes where the percentage can be easily converted into a new shape by varying one of the dimensions, then the display part can be covered by creating a second shape based on the first one, and filling in 100% of the second shape.
This obviously works best with simple shapes like squares, rectangles, circles, etc, where it is simple to convert "50% of the area" or "75% of the height" into manipulation of vector nodes.
However, things gets significantly more difficult if you want to support genuinely arbitrary custom shapes. One way to handle that would be to break up a complex "progress bar" into "progress pieces" (e.g. a thermometer bulb that represents 10% of total progress, then a simple bar for the remaining 90%).
As has been mentioned, D3 seems like it would meet your needs - here are some simple examples of what I think you are asking:
Changing the fill color of a distinct shape: http://jsfiddle.net/jsl6906/YCMb8/
Changing the 'fill amount' of a simple shape: http://jsfiddle.net/jsl6906/YCMb8/1/
I have a sequence of images taken from a camera. The images consists of hand and surroundings. I need to remove everything except the hand.
I am new to Image processing. Would anyone help me in regard with the above Question. I am comfortable using C and Matlab.
A really simple approach if you have a stationary background and a moving hand (and quite a few images!) is simply to take the average of the set of images away from each image. If nothing else, it's a gentle introduction to Matlab.
The name of the problem you are trying to solve is "Image Segmentation". The Wikipedia page here: wiki is a good start.
If lighting consistency isn't a problem for you, I'd suggest starting with simple RGB thresholding and see how far that gets you before trying anything more complicated.
Have a look at OpenCV, a FOSS library for computer vision applications. Specifically, see the Video Surveillance module. For a walk through of background subtraction in MATLAB, see this EETimes article.
Can you specify what kind of images you have. Is the background moving or static? For a static background it is a bit straightforward. You simply need to subtract the incoming image from the background image. You can use some morphological operations to make it look better. They all depend on the quality of images that you have. If you have moving background I would suggest you go for color based segmentation. Convert the image to YCbCr then threshold appropriately. I know there are some papers available on it(However I dont have time to locate them). I suggest reading them first. Here is one link which might help you. Read the skin segmentation part.
http://www.stanford.edu/class/ee368/Project_03/Project/reports/ee368group08.pdf
background subtraction is simple to implement (estimate background as average of all frames, then subtract each frame from background and threshold resulting absolute difference) but unfortunately only works well if 1. camera has manual gain and exposure 2. lighting conditions do not change 3.background is stationary. 4. the background is visible for much longer than the foreground.
given your description i assume these are not the case - so what you can use - as already pointed out - is colour as a means of segmenting foreground from background. as it's a hand you are trying to isolate best bet is to learn the hand colour. opencv provides some means of doing this. if you want to do this yourself you just get the colour of some of the hand pixels (you would need to specify this manually for at least one frame) and convert them to HUE (which encapsulates the colour in a brightness independen way. skin colour has a very constant hue) and then make a HUE histogram. compare this to the rest of the pixels and then decided if the hue is simmilar enough.
I've just created my first WPF application (3 calculators inside 3 different tabs).
The entire application has been built using widths/margins/paddings as static values, since I originally didn't know that dynamic values can be used by just putting an asterix after the value.
The client has come back to me though and has asked me to increase the size of the app, that includes form fields, tabs, font-sizes, grids etc...
What would be the easiest (and/or quickest) way to do this? I'd hate to go value by value resizing every single element since there are quite a few.
I can provide code but there is lots of it and I'm not sure of how much help it would be.
Appreciate your help,
Marko
Put it all in one ViewBox, play with viewbox size to change the app size
Write an XSLT transform to take your XAML as input and spit out appropriate modified XAML, which you put back in your app.
I'm putting in a function which will allow a user to input a color (eg: purple) and it will change the look of their profile to be purple. It's interpreted from text into a 'Color' class which stores them inside itself as RGB numbers (int for red, one for green and other for blue). What i don't know how to do is logically turn these three numbers into another 3 which will make a readable colour.
Can anyone help me on how to do this?
Joe
If I'm interpreting your question correctly, you're looking for a readable text color after someone has chosen a background theme color. This was answered in an older question:
Good text foreground color for a given background color
Obviously, there's not a name for every possible RGB combination! Presumably you want to find a nearby combination that you have specified a name for?
So really all you need is a way of defining how "close" one RGB is to another. For simplicity, I would suggest Euclidean-distance-squared, i.e. (R2-R1)^2 + (G2-G1)^2 + (B2-B1)^2. Then all you need to do is iterate through all your "named" colours, and find the one with the smallest distance.
You could look at the rgb.txt file that comes with X11.
A parser for that could provide a translation between those strings and the RGB values wouldn't be terribly hard to build and would likely do what you're looking for.
As others already say, there are 16.7 million possible combinations, all of which obviously can't have a defined name.
You're not going into detail about your use case, but if you want to make it end user friendly, how about using percentages?
80% red, 50% green, 23% blue
this is perfectly understandable for a non-technical person as well. You would limit (from 256^3 to 100^3) the number of possibilities if you use integer percentage values, but not as much as confining the user to a fixed palette of named colours.