How to convert rgba value into human readable text - css

Need to find the button color into human-readable format below code is returning rgba value
Here is my code:
WebElement findbuttonColor = driver.findElement(By.id("color"));
String color = findbuttonColor.getCssValue("background-color");
System.out.println("Button color is :"+color);

I am not sure what human-readable format mean, there are millions of colors which is possible to set for the element. Far not all of them have the names like green, blue, red, etc.
You get the value in rgba because the designer set up the value in rgba. The thing you could do is to define a structure that would map some well-known color codes to rgb (even not considering alpha channel) so that you could pich the "human-readable" format from that map.
Here is the example that might give a clue: Convert RGB values to color name

You can get the element color(Background color of element) by:
element.getCssValue("background-color");
You can get the element text/caption color by:
element.getCssValue("color");
For example if you want to get the background and text color of "Sign in" button for LinkedIn, the code is as follows:
driver.get("https://www.amazon.com/");
String buttonColor = driver.findElement(By.id("searchDropdownBox")).getCssValue("background-color");
String buttonTextColor = driver.findElement(By.id("searchDropdownBox")).getCssValue("color");
System.out.println("Button color: " + buttonColor);
System.out.println("Text color " + buttonTextColor);

When you do getCssValue(), it return rgb value. You can convert it into hex by using below
backgroundColor = element.getCssValue("background-color");
Color.fromString(backgroundColor).asHex();
this returns hex code, something like "#def3ff". You can later compare it with your availbale hexcode in yous css.
Assert.assertEquals(def3ff, ExpectedHexCode);
Note:
You can get hex code of your element by inspecting it > Styles. Refer below screenshot for details
how to get Hexcodefrom
Thank You,

Related

How can I programmatically get text selection in Adobe After Effects with ExtendScripts

I have object TextLayer with white text color string. Then I animate text color selection (second character changes color white -> blue).
How can I get this selection and color programmatically?
Seems like you can't reach the selection start and end values by scripting. But you can add expression controller effect and get the values from that one.
The code below asumes you have one comp in your project with an text layer called "my text layer".
Add an expression controller for color to that layer. Add the expression text.animator("Animator 1").property.fillColor to that effect.
You can do the same thing with the values from your selection.
var preExpression = true;
var currentTime = 5; // in seconds
// get the sourceText? works!
var val = app.project.item(1).layer("my text layer").property("ADBE Text Properties").property("ADBE Text Document").valueAtTime(currentTime, preExpression);
// get the Text Percent Start? Wont work!
var sel = app.project.item(1).layer("my text layer").property("ADBE Text Properties").property("ADBE Text Animators").property("ADBE Text Animator").property("ADBE Text Selectors").property("ADBE Text Selector").property("ADBE Text Percent Start").valueAtTime(currentTime, preExpression);
// add an expression controller for color and get the color from that one? works!
var col = app.project.item(1).layer("my text layer").property("ADBE Effect Parade").property("ADBE Color Control").property("ADBE Color Control-0001").valueAtTime(currentTime, false);
$.writeln(val);
$.writeln(sel);
$.writeln(col);
Take a look into the After Effects Scripting Guide. Use redefinery's rd_GimmePropPath script to get the match names of properties.

TTTAttributedLabel setbackground color

I am using TTTAttributedLabel and need to set background color. I can set text color like this.
[mutableAttributedString addAttribute:NSForegroundColorAttributeName
value:color
range:range];
self.lblContent.attributedText = mutableAttributedString;
But it is not working for background color.
[mutableAttributedString addAttribute:NSBackgroundColorAttributeName
value:color
range:range];
self.lblContent.attributedText = mutableAttributedString;
May I know what is wrong?
You should use kTTTBackgroundFillColorAttributeName. See TTTAttributedLabel.h for details on that constant and several other attribute constants that are specific to TTTAttributedLabel.

Embed CSS attribute in HTML

I have the color theme of a website I'm working on change on refresh and would like to display the css background color attribute in my HTML. Is that possible?
i.e.
<footer>The color of the moment is <insert the background color attribute>. Refresh for a makeover</footer>
would display something like
"The color of the moment is #DB0C0C. Refresh for a makeover"
Since the hex color changes based on the style sheet loaded, I don't want to hardcode it. If I had a ruby variable #color which = #ff0000 and wanted to display it in html I could do something like
<%= #color%>
I'm wondering if there is any way to do something similar to access a CSS attribute.
You don't even need jQuery for this.. you can use just vanilla javascript with .getComputedStyle():
<span id='color-map'></span>
var element = document.getElementById("id-goes-here");
var style = window.getComputedStyle(element);
document.getElementById('color-map').innerHTML = style.backgroundColor;
However, it would appear that this does not give the color as a hex, but rather an 'rpg(x, y, z)' string. To get the hex from that, you can parse it using regex and return the result:
function rgbsToHex(str) {
var hex = "#";
var matches = str.match(/rgb\((\d+),\s(\d+),\s(\d+)\)/);
hex += Number(matches[1]).toString(16);
hex += Number(matches[2]).toString(16);
hex += Number(matches[3]).toString(16);
return hex;
}
DEMO
You can use the .css() function in jQuery.
$('footer').find('span').text($('.bg').css('background-color'));
This will give you the color in rgb, if you would like to show it in HEX then check this for more info.

Flex 3 Multicolored Text in DataGrid Cell

I am having an issue with styling individual cells in a DataGrid. I want to go through the text in a DataGrid cell and only color a specific portion of the text.
When a User uses a search filter, we want to color and bold the text in the cell that matches the search phrase. For example, the User filters a column of job titles with the search phrase "Adjust" and one of the cell values is "Claim Adjusters", we want "Claim " and "ers" at the end to be black font color and the "Adjust" to be another color (let's say red).
I noticed that if the String passed to the DataGrid was of the form:
value.substring(0,start) + "(b)" + value.substring(start,finish) + "(/b)" + value.substring(finish);
With "<>" rather than "()", the text between the bold tags gets displayed with a bold font, but it does not work with (font color=\"red\") ... (/font).
Any suggestions on how I can get the search text to color here as well as bold?
Only hexadecimal color (#FFFFFF) values are supported.
A simple alternative with lots of flexibility is to make your itemRendrer support html formatting:
public class HtmlItemRenderer extends DataGridItemRenderer {
override public function validateProperties():void {
super.validateProperties();
if (text.indexOf('<') > -1) {
htmlText = text;
}
}
}
The conditional doesn't need to be very strict, it will still save some cycles for most cells that contain no markup.

Degrafa color changer

<degrafa:LinearGradientFill id="bluedream">
<degrafa:GradientStop color="#6ab5d0"/>
<degrafa:GradientStop color="#388aae"/>
</degrafa:LinearGradientFill>
<degrafa:GeometryComposition graphicsTarget="{[bgCanvas]}">
<degrafa:RoundedRectangle id="color_preset" fill="{bluedream}"/>
</degrafa:GeometryComposition>
I have issue with degrafa code which I have defined a set of different gradients for color_preset.fill to be dynamic change when user select different color in the combobox.
I replaced fill="{bluedream}" with fill="using_variable" and lead to error compiled message: Initializer for 'fill': values of type com.degrafa.core.IGraphicsFill cannot be represented in text.
Is there a solution to use this code as a color changer?
The fill property in your example is pointing to the LinearGradientFill with id "bluedream". You can either replace the fill with a different gradient (or solid or other fill) or change the colors of the gradient fill itself:
<degrafa:LinearGradientFill id="bluedream">
<degrafa:GradientStop color="{your_combobox.selectedItem}"/>
<degrafa:GradientStop color="{your_other_combobox.selectedItem}"/>
</degrafa:LinearGradientFill>
<degrafa:GeometryComposition graphicsTarget="{[bgCanvas]}">
<degrafa:RoundedRectangle id="color_preset" fill="{bluedream}"/>
</degrafa:GeometryComposition>
I haven't run that code, but it should work. The idea is to change the color of the GradientStop with your dropdown's selectedItem (provided that is a string).
This example does something very similar, but with a color picker instead of a dropdown:
http://degrafa.org/source/CS4IconPreviewer/CS4IconPreviewer.html

Resources