Is there any way to set Gradient with different Colors in Shinobi Controls for iOS - ios

I have 4 SChartLineSeries (different line colors say Read, Green, Yellow, Blue). These all 4 may cross each others at any point. I have to fill it with Gradient also. My Points are :
If we have Yellow line at lowest place along with x-axis, we can manage the Gradient according to Yellow.
series.style.showFill = YES;
series.style.areaColor = [UIColor colorWithRed:65.0 / 255.0 green:165.0 / 255.0 blue:65.0 / 255.0 alpha:1];
series.style.areaColorLowGradient = [UIColor colorWithRed:35.0 / 255.0 green:75.0 / 255.0 blue:35.0 / 255.0 alpha:1];
BUT, if Red line crosses Yellow line at any point ( Yellow line is no longer at bottom place) and become the most bottom line. Now I have to make gradient effect in such a manner that Yellow Line will be having Gradient with Yellow effect under it and Red line will be having Gradient with Red effect under it. and so on.
AND, same for the line just above the most bottom line. we have to make gradient effect for it. and if other line crosses this then color for gradient should be change. and if third line cut the second one, again color is to be changed. and so on. BUT gradient effect should NOT go to bottom, it should be stopped where it meets to next line.
I have to show these effect for all lines.
So, any idea please.
Thanks for response.

It sounds like you'll need to stack your series and split your series into smaller series:
To stack your series, set the stackIndex property of each to the same NSNumber - for example:
lineSeries.stackIndex = #0;
This will mean that your line fills draw in bands, the 'lowest' up to the next lowest, and so on. You'll also need to provide the yValues for each datapoint as an offset from the previous (lower) series yValue for the same xValue.
This alone won't fix your issue with the lines overlapping though - to address this you can split your data into different sections (different series) at each point where the ordering of the series changes (whenever two lines cross). This approach means that your datasource will have to do a fair amount of work before you pass your data to the chart - and you may end up with lots of series - but it should produce the effect you're after. Hope this helps! =)
Disclaimer: I work on ShinobiCharts.

Related

Colour scale HP Bar colors?

I am attempting to use Color scale between two cells. The Right Cell is the maximum of the character's Hit points and the Left cell is their current Hit Points. I want it to scale between Red for less than 10%, Yellow if less than 65% and Green at 100%
But using the scale it shows as just Red to Yellow and then Pops in at full green value OR just stays red until it is 100% instead of scaling
I think you need a couple of (v. simple!) formulae:
Midpoint has been truncated and is actually:
=C$1*0.65
Change Minpoint from 0 to =C$1*0.1 if you prefer, but seems not necessary.
use Number instead of Percentile where:
min: =C$1*0.1
mid: =C$1*0.65
max: =C$1

UIView background color set is not what appears

I created a UIView with a set background color. Lets say RGB value 185, 45, 42. For some reason, when I take a screenshot of this view, it is not that color. It is a little bit darker. Is there a reason why UIView would do this?
The UIView background color is set in interface builder like this:
When I run it on the simulator and take a screenshot and use the eye drop tool to determine the color, the numbers that show up are a little bit darker than what I entered. Same with a button.
I have other screens with the same red color and the screenshot I take of those, the red actually comes out correctly. I've been trying to determine what the difference is between those screens, but so far have not seen any. So I was just wondering if anyone would have any knowledge of anything that "could" case such a color change.
A common mistake when setting a color numerically in Interface Builder is to neglect the color space:
Different color spaces will give different colors (visually) for the same RGB values.
When you set RGB color, you should notice that all the three color values range from 0 to 1, so give them a value greater than 1 would never work. Try this:
RGB(185 / 255.0, 45 / 255.0, 42 / 255.0)

Eliminating various backgrounds from image and segmenting object?

Let say I have this input image, with any number of boxes. I want to segment out these boxes, so I can eventually extract them out.
input image:
The background could anything that is continuous, like a painted wall, wooden table, carpet.
My idea was that the gradient would be the same throughout the background, and with a constant gradient. I could turn where the gradient is about the same, into zero's in the image.
Through edge detection, I would dilate and fill the regions where edges detected. Essentially my goal is to make a blob of the areas where the boxes are. Having the blobs, I would know the exact location of the boxes, thus being able to crop out the boxes from the input image.
So in this case, I should be able to have four blobs, and then I would be able to crop out four images from the input image.
This is how far I got:
segmented image:
query = imread('AllFour.jpg');
gray = rgb2gray(query);
[~, threshold] = edge(gray, 'sobel');
weightedFactor = 1.5;
BWs = edge(gray,'roberts');
%figure, imshow(BWs), title('binary gradient mask');
se90 = strel('disk', 30);
se0 = strel('square', 3);
BWsdil = imdilate(BWs, [se90]);
%figure, imshow(BWsdil), title('dilated gradient mask');
BWdfill = imfill(BWsdil, 'holes');
figure, imshow(BWdfill);
title('binary image with filled holes');
What a very interesting problem! Here's my solution in an attempt to solve this problem for you. This is assuming that the background has the same colour distribution throughout. First, transform your image from RGB to the HSV colour space with rgb2hsv. The HSV colour space is an ideal transform for analyzing colours. After this, I would look at the saturation and value planes. Saturation is concerned with how "pure" the colour is, while value is the intensity or brightness of the colour itself. If you take a look at the saturation and value planes for the image, this is what is shown:
im = imread('http://i.stack.imgur.com/1SGVm.jpg');
out = rgb2hsv(im);
figure;
subplot(2,1,1);
imshow(out(:,:,2));
subplot(2,1,2);
imshow(out(:,:,3));
This is what I get:
By taking a look at some locations in the gray background, it looks like the majority of the saturation are less than 0.2 as well as the elements in the value plane are greater than 0.3. As such, we want to find the opposite of those pixels to get our objects. As such, we find those pixels whose saturation is greater than 0.2 or those pixels with a value that is less than 0.3:
seg = out(:,:,2) > 0.2 | out(:,:,3) < 0.3;
This is what we get:
Almost there! There are some spurious single pixels, so I'm going to perform an opening with imopen with a line structuring element.
After this, I'll perform a dilation with imdilate to close any gaps, then use imfill with the 'holes' option to fill in the gaps, then use erosion with imerode to shrink the shapes back to their original form. As such:
se = strel('line', 3, 90);
pre = imopen(seg, c);
se = strel('square', 20);
pre2 = imdilate(pre, se);
pre3 = imfill(pre2, 'holes');
final = imerode(pre3, se);
figure;
imshow(final);
final contains the segmented image with the 4 candy boxes. This is what I get:
Try resizing the image. When you make it smaller, it would be easier to join edges. I tried what's shown below. You might have to tune it depending on the nature of the background.
close all;
clear all;
im = imread('1SGVm.jpg');
small = imresize(im, .25); % resize
grad = (double(imdilate(small, ones(3))) - double(small)); % extract edges
gradSum = sum(grad, 3);
bw = edge(gradSum, 'Canny');
joined = imdilate(bw, ones(3)); % join edges
filled = imfill(joined, 'holes');
filled = imerode(filled, ones(3));
imshow(label2rgb(bwlabel(filled))) % label the regions and show
If you have a recent version of MATLAB, try the Color Thresholder app in the image processing toolbox. It lets you interactively play with different color spaces, to see which one can give you the best segmentation.
If your candy covers are fixed or you know all the covers that are coming into the scene then Template matching is best for this. As it is independent of the background in the image.
http://docs.opencv.org/doc/tutorials/imgproc/histograms/template_matching/template_matching.html

threshold between 3 color in line charts of highcharts

I have to do a line charts with threshold y=5 where y>5 circle color is green y<5 circle color is red and circle y=5 circle color is orange. Using simple threshold i can draw only 2 color in red and green but i can't do the orange one.
{
name: 'Series1',
data: [
{y:2},
{y:6},
{y:5},
{y:6.5},
{y:3},
{y:10}
],
threshold: 4,
negativeColor: "red",
color: "green"
}
How can i do my chart with 3 color circle using threshold? and how can i take color only in circle but grey in line connected circle?
To do what you are asking will require using multiple series, as in this example:
http://jsfiddle.net/jlbriggs/yHn2D/
You can use the linkedTo property to make them all sit under one legend entry.
However, this kind of display inevitably leads to a a cluttered, overly colored, hectic display.
My example, even though the colors are toned down, looks a bit circus-like.
I would be much more inclined to do soemthing like this:
http://jsfiddle.net/jlbriggs/yHn2D/3/
Highlight the target range on the chart, in a subtle manner. When looking at such a chart day after day, watching for data that is outside of the acceptable range, a chart like this will make it very easy to see.
A chart that highlights every singly point, with multiple colors, whether they require attention or not, will drown the important information in visual clutter.
FWIW.

Non-scaling / absolute gradient for scatter plots in CorePlot?

I've added a gradient to my scatter plot in the usual manner:
CPTFill areaGradientFill = [CPTFill fillWithGradient:areaGradient1];
boundLinePlot.areaFill = areaGradientFill;
boundLinePlot.areaBaseValue = 0;
Setting the minimum for the gradient is easy to do with the areaBaseValue property. However, the gradient will always stretch such that the entire range of color defined by areaGradient1 appears below the line plot.
What I'd like to do is set an absolute y-axis range (e.g., 0 to 100) and have the gradient always be set to that range. So if my line is at y=50, only the bottom 50% of the gradient would be rendered below the line. I thought setting boundLinePlot.areaBaseValue2 = 100; would do this, but it doesn't have any effect.
Does CorePlot support this? If not, what's the 'right' way to go about implementing it?
(This is my first question so apologies if I'm not clear. Be gentle. :) )
While there's no direct way to make this happen you could use a trick. Make your horizontal global range wider than what you would show normally and do not make the graph horizontally scrollable. Add a value to the graph in the hidden area that is always your maximum value. This will be filled with the full gradient. Other parts however will only get a partial gradient, depending on their height.
I found this trick by accident while looking at one of my graphs. Look:
The overview at the top shows where the big graph is currently (the green limit band). Now compare this with another part:
You can clearly see that the tip of the large value has a different gradient value as the tip of the smaller one.
You can use a "background limit band" to draw a fill at a certain size behind the plots, but that won't be clipped to the plot line.

Resources