By default, unselected states in the Anycharts Anymap are colored as white, and aren't affected by the anychart.scales color definitions as far as I can determine.
I am using
series.colorScale(anychart.scales.linearColor('#002626', '#027575'));
and when I am rendering a map that intentionally only shows one state, it shows that one state as the high color, but shows all the unset states as white.
Is there a way to set that color as well, preferably with an alpha channel?
If you want to use transparent colors for your states, you need to use anychart.scales.ordinalColor(); instead of anychart.scales.linearColor();
example:
var colorScale = anychart.scales.ordinalColor();
colorScale.colors(['rgba(0,0,0,0.2)', 'rgba(0,0,0,0.9)']);
Will run from 80% transparent black to 10% transparent black;
Related
Right now when I change color mode via a dark / light theme button toggle, the page background color will blend into the new background color over 0.2 seconds or so, and all other colors will instantly change to the new color. I'd either like to define a color mode switch transition time, or at least make them the same between elements.
I just set the background of everything explicitly, that way everything changes color instantly. But I'd like it if I can have the quick transition instead.
Ok so I figured it out immediately after posting this question. Pretty simple really, just pass something like transition="background-color 200ms linear" or transitionDuration="200ms" into your ui component.
Is there a way to detect the background color at one certain point of the page dynamically? I have a website with a fixed header, and the default logo on it is white (default background is black). However, as I scroll down there are sections that have white background, so the logo would have to change colour to black.
Setting it based on scrolling position is not possible, because all sections have different heights and the height is often dependent on the content.
I have found mix-blend-color, but unfortunately its support is pretty bad across browsers. Also tried numerous npm packages, but none of them seem to pick up the background colour.
Is there another way to dynamically change the logo color without getting the background color?
Answer 1
I never tried this, but I think this might lead to the answer.
You can use document.elementFromPoint.
This will retrieve the top element at some (x, y) point.
So you can set the x and y to 1px down the border of your modal ( or some place where you know that will only have element with the background color you want) and get the element.
And check, on a scroll event listener, what is the element at that position and get it's background color.
Is this a good thing to do? Maybe not, but it works and it have good support across browsers.
Answer 2
Setting it based on scrolling position is not possible
Of course it's possible!
If your modal is with position absolute, what you can do is get the modal's ref and use element.getBoundingClientRect() to get it's position.
Then on each section, you also get the ref (you will have an array of section's ref) in the parent component, which knows the modal's refs and section's ref.
Then, on a scroll event, you use getBoundingClientRect on each section element and check if it's inside the modal logo.
To check if it's inside, you can simply use the top and bottom ( if the scroll is vertical).
This is harder to implement, but I think it's the way to go.
I have an OnOffSwitch in my UI. It has its UUID set to a specific style.
when I modify the colors of this style, the full OnOffSwitch is affected. How can I make it so the sliding piece has one background color and the area inside the full box has another? I'd like a green square with a black border sliding over a transparent background with a slightly thicker black border.
You will have to make your own OnOffSwitch images, 3 of them:
switchOffImage = the off state image (In your case, a slightly thicker black border image)
switchOnImage = the on state image (In your case, a green square with a black border)
switchMaskImage = A square transparent mask image
To get an idea of what the 3 images should be like, open your GUI Builder -> Select Theme -> switch to constants tab at the UIID section and you will find the 3 UIID mentioned above there. If they're not, click add and look for them in the dropdown, then add them all.
After finishing designing your switch images, replace the default images. Keep modifying and testing until your OnOffSwitch flow smoothly.
1) Imagine a DataGridColumnHeader control is meant to be in Green color by default.
2) If I click on it, it would activate the Sorting to "Sorted Ascending", this is when it should become Orange. Clicking again on it would change it to "Sorted Descending", which still should remain in Orange color.
The two cases above are easy to do with VSM. However the following two scenarios seem to me impossible without a Multi-trigger (which we dont have in Silverlight)
1b) Whenever I hover with the mouse over the non-sorted control, it should become light green.
I hover away, it should go back to base green.
2b) Whenever I hover with the mouse over the sorted control, it should become light orange.
I hover away, it should go back to base Orange.
How should I determine within
MouseOver state, in which mode sorted
state is, in order to choose light
orange or light green accordingly?
Alternatively is it possible to
lighten the current color up, without
knowing what color it actually is?
The easiest would probably be to just make the opacity lower when mouse over, effectively making both green and orange lighter.
Or alternatively you could create a visual state group for sorted states, set it with a data trigger and change the colour of the mouse over element accordingly.
I want to fade some elements (rectangles and ellipses) from the accent color to transparent using a LinearGradientBrush. However - the transparent color is always a color and it seems like the color "Transparent" is #00FFFFFF - that is white with 0% opacity.
I would like to fade from PhoneAccentColor to PhoneTransparentAccentColor. So if my accent color is red I would like to fade to #00FF0000 and if it is green I would like to fade to #0000FF00.
I can't find any built in color resource for transparent accent so what are my options here? I've tried the options below but with no real success and I can't find much on this topic by normal search channels so I'm not really sure what I'm missing here.
Some suggestions I came up with (however with no real success as stated earlier):
Create a custom resource in code behind and push it into the application wide resource dictionary?
Can I expose a property on my ViewModels with the Color and bind to it?
I can't think of a way to specify a transparent accent color directly with xaml. I do have a couple of possible solutions.
If possible you could animate the opacity of the object rather than the color itself.
Of you could generate the color in code (probably during start up)
var accentColor = (Color)Application.Current.Resources["PhoneAccentColor"];
var transparentAccentColor = accentColor.A = 0;
You could then store the color as a resource and reference it in xaml.
Application.Current.Resources.Add("TransparentPhoneAccentColor", transparentAccentColor);
Hope this helps.
As a general guideline, avoid using gradients on the phone due to the colour support available.
You could try using an OpacityMask in your LinearGradientBrush to achieve your desired results though.
Although not applicable in your case as you're using the accent colour, if you were able to produce images including gradients you should see How can I correct color banding in windows phone 7? for detais on how to avoid banding.