I have installed jqvmap 1.0 in a site. Everything works fine but the color of Gambia. It appears transparent.
This is the path of Gambia. jqvmap 1.0:
"gm":{"path":"M406.89,298.34l-0.13,1.11l6.92-0.1l0.35-1.03l-0.15-1.04l-1.99,0.81L406.89,298.34L406.89,298.34z","name":"Gambia"}
I did compare this path with the original. There are no differences between them.
I did download version 1.1 and placed its jquery.vmap.world.js (paths definition). The problem wasn't fixed.
I did set this color for Gambia an other countries.
"gm":"199.18" (light orange)
Gambia is the only country that is not showing its color. As you can see, even some tiny islands, smaller than Gambia, are showing correctly the color. Any idea?
Doing some tests I did realize that the problem was caused by a couple of issues:
The path is too narrow so the border was covering the shape (hidding its color).
Visually, the color of the shape plus the color and opacity (0.8) of the border did result in a color very similar to the background color.
So, the perception of a "non colored" shape was caused by an optical illusion.
To fix that I did change lines 51 an 52 of jquery.vmap.js from:
51 borderWidth: 1,
52 borderOpacity: 0.8,
to
51 borderWidth: 0.3,
52 borderOpacity: 0.5,
Thanks for the helps.
Related
I come from a WinForms background, so WPF is foreign to me. I am experimenting with it and trying to make a simple Hello World! application, except that the application displays different at runtime than how it is in the designer.
What I mean by that is I have a 'Hello!', and in the designer the location of the button is 12, 12, and and the Window is sized so that is the right/bottom edge of the button is 12, 12 pixels from the right/bottom edges of the window (so there is uniform 12 pixels around the button). When I run the application the button is still 12, 12 pixels from the top & left edges, but is 27, 27 pixels from the right/bottom edges of the Window. I have verified that the button dimensions are correct (I took a screenshot and measured the button in Adobe Photoshop and verified that the button width & height in the XAML code was the same as what was displaying on the screen). The Window is what is growing bigger.
I also verified it was not the canvas getting bigger by explicitly setting the width & height, changing the background color, and setting horizontal/vertical alignment to left/top. So when I ran it again, the canvas stayed the same size, but the Window still had an extra 15 pixels on the right/bottom.
I have tried Googling & searching here for this problem, but can't find an explanation as to why runtime is different from the designer.
I should note I am using Visual 2010, and I am using a simple for the layout.
Anyway, thanks for any clues as to why I am getting 15 extra pixels.
(Note I'd post a screenshot, but as a new user I'm not allowed).
You can use a tool like Snoop to diagnose this. It should allow you to inspect the entire visual tree of your application, and determine which UIElement is responsible for the extra pixels.
I have an Image element inside a Grid cell with a background colour set. The Image element has Stretch="UniformToFill" and HorizontalAlignment/VerticalAlignment set to "Center". In this configuration, in some instances (this is a tiled DataTemplate), 1px of the Grid's background shows through on the left hand side of the image.
I've tried UseLayoutRounding on the root element (and elsewhere) to no avail. It's hard to tell if it's to do with sub-pixel positioning/sizing from inspection alone, so I can't be sure if this is the cause.
Whilst I would of course love a magic fix, I would welcome any speculative theories as to the cause of the problem regardless of a solution if only to provide a basis for further research/fiddling.
Thanks in advance,
James
I'm making a media player speed selector, which goes from 0.5 to 2. This is how I have defined the Slider.
<Slider Maximum="2" Minimum="0.5" Ticks="0.5 0.75 1 2"/>
This is because 0.5, 0.75, 1 and 2 is the speeds that is the most desired play-speeds. So I could, if that was the only requirement, say IsSnapToTicksEnabled="True", but the user should also be allowed to select an value between these ticks, and at the same time still be able to snap to the specified ticks.
So, the thumb should snap to these ticks once the slider is close, but not when further away than ~0.1. Is this possible?
We also have the RadControls from Telerik, if there is something specifically implemented there.
What I've tried so far is to listen to ValueChanged and check if the new value is between 1.1 and 0.9, and set it to 1 if it is. But that disables dragging completely.
I did something similar.
I created 2 sliders:
One of them is invisible (from 0 to 100 for example), it's just a rectangle (invisible color) on top on the other slider, this is the one you will slide with your mouse.
The second slider is your graphic, from 0.5 to 2, like you actually have.
Now you just have to code your invisible slider, for example:
If InvisibleSlider < 10, then RealSlider stay at 0.5
If InvisibleSlider is between 10 and 30, then the value of RealSlider is InvisibleSlider * X ?
With that you can simulate that you stick where you have decided, eg: stick at 0.75 if the invisible slider is between 40 and 60, your mouse will move but the the graphic...
I don't know if I'm clear, and english is not my main language sorry
I have noticed when setting the selection of a text box in wpf to red, and using a color picker to verify the color, the color faded to #FF9999.
I have a specific color my client requires for the selection brush. Is there a way to calculate what color i should set the SelectionBrush to so when the text is selected, the exact color is displayed?
Currently I need to have the selection brush as #6599D1, but once set, the color is #C1D6ED.
How can I calculate the starting color so the end color is what I need?
Following up on the answer by H.B.
I've calculated opacity with the following formula in the past
Red = OriginalRed * Opacity + (1-Opacity) * BackgroundRed
which inverts to
(Red - (1-Opacity) * BackgroundRed) / Opacity = OriginalRed
The TextBox has default Background set to White and SelectionOpacity set to 0.4.
As H.B. explained, you can't achieve your color with these default settings since the Red value will come out as -130. This leaves you with 3 options, Change Background, change SelectionOpacity or don't do it :)
Changing the TextBox Background probably isn't something you wanna do so that leaves option 2, change SelectionOpacity
We don't want Red to go below 0 so
(101 - (1-Opacity) * 255) = 0
which gives
1 - (101/255) = Opacity
This results in 0,604 so with this SelectionOpacity value you can calculate that the SelectionBrush needs to be set to #0056B3 to become #6599D1 once the Opacity has been applied.
Here's how the TextBox look with these values
<TextBox SelectionBrush="#0056B3"
SelectionOpacity="0.604" />
Good question but i think this is impossible. If there is some overlay inside the ControlTemplate you cannot formulate a function which calculates a darker colour which then will end up as the intended colour.
e.g. when you input red which is: 255,0,0 you get 255,153,153, now the function that would need to be applied to your initial colour would need to darken the Red, this of course could only be done in the red channel as green and blue are already zero. The problem is not the red channel however (which ends up as 255 and hence is not affected), so any changes to that will only serve to desaturate the colour even more instead of darkening it.
Edit: To make this a bit more mathmatical, the function that is applied by the transparency of the selection is:
f(x) = 0.4x + 153
If you apply this to all the channels of your colour you will see that this is indeed the case. Now how do we get the values we want? Quite simple, we invert the function, which is this:
f^(-1)(x) = -2.5(153.0 - x)
Great! Now lets apply that to your colour:
R: -130.0
G: 0
B: 140
Hmm, not so great after all i suppose.
This negative value is exactly why this is not always possible, every colour which has components below 153 is not reversible.
I'm working on a Windows Form in VB.NET 2005 and I would like to have some buttons with images (I'm talking about the plain, vanilla System.Windows.Forms.Button). I have everything set up the way I want it but the images are displaying too low on the button, such that the bottom of the icon is almost right on the bottom of the button and there is a lot of space above the image.
Here is a screenshot:
Button Screenshot http://www.freeimagehosting.net/uploads/b28a5c63b8.jpg
See how the corner of the icon is brushing up against the bottom of the button?
My button is 23 pixels high and the image is a 16 x 16 icon (converted to a bitmap so that it can be assigned to the button's Image property).
I've tried setting the button's Margin.All property to 0, and verified that the Padding.All property is 0. I've also tried changing the button's ImageAlign to TopLeft, MiddleLeft, and BottomLeft, but none of those settings seem to have any affect.
Does anyone know how I can position the image to be of equal distance from the top and bottom edges of the button? I can resize the button or the image if necessary but they are at my preferred size and I would like to keep them that way if possible.
I just encountered a similar problem, which I was able to solve by thinking really hard. (Ain't those situations great?)
The explanation
First it's important to understand that ImageAlign does NOT mean where on the button do you want the image. It means what point (pixel) on the image should be used for positioning. So if you pick "TopLeft", then the top-left-most pixel of the image will be vertically CENTERED on the button.
The problem comes in when you have a button with a centered image, whose ImageAlign is set vertically to "center", and whose dimensions are of an even number of pixels. Your image is 16x16 pixels- 16 is an even number. The middle pixel would theoretically be somewhere between pixel 8 and pixel 9. Since there is no pixel 8.5, VB rounds down to 8, thereby using pixel 8 as your positioning pixel. This the root cause of your unwanted upper margin.
Your button has an odd pixel height (23px) which means it has a true center pixel- pixel 12. VB tries to position the image's center pixel (8) on top of the button's center pixel (12). This puts 8 of the image's pixels BELOW center, and 7 pixels ABOVE center. To even things out, a 1-pixel margin appears above the image.
The solution
Pad the image with 1 extra row of pixels on the bottom. The image now has a height that's odd (17 px), giving the image a true center pixel which can line up perfectly with the button's center pixel.
That's how I solved the problem for myself. However, a simpler possible solution just occurred to me. You could probably achieve the same result by assigning the image a bottom margin of 1px. I have not tested this solution but it seems theoretically equivalent to the first solution.
Additional note: Two objects of EVEN dimensions should theoretically be able to center-align perfectly. But strangely enough, the alignment problem occurs even if the button AND the image BOTH have even dimensions. (Apparently the compiler is not consistent in the way it determines the center pixel of one control vs another.) Nonetheless, in this case, the same solution applies.
Typically, we'll set the following properties (for an image on the right, for example):
ImageAlign: MiddleRight
TextAlign: MiddleLeft
You'll want to align both the text and image in a similar fashion. Outside of that, make sure that you are setting the Image property, not the BackgroundImage property and make sure you are doing the icon to plain bitmap conversion properly. Have you tried a plain bitmap file?
Just a question: are you positive that the bitmap contains no information on the top of the note image? I have had that happen to me more than once where a crop looked right in Photoshop and came out incorrect in the live code... :)
If that were the case your code may be perfect ;)