I have a simple div where i display three different icons that have different colors.
Acctualy icons are displayed, but it shows all the time the same icons either attention-warning or attention-error icon, knowing that the html code contains different icons depending on the condition.
Here i have an example where the second icon should be an attention-warning icon (yellow) but it display an attention-error icon (red) instead.
I have tested my code in both browsers, Chrome and Edge and i get same result (all red or all yellow).
Bellow code generated.
Any help please to fix this problem.
Here is my code in stackblitz
The icons should be in this color
The problem comes from my SVG, they have same ids
after changing those ids the icons displayed perfectely as expected.
Before:
After :
Related
I would like to have a box (div or canvas?) that filters all the colors that are behind that box.
Like for example I would like to remove all colors except red, or turn everything B&W except yellow.
I tried using a canvas or CSS filters but without luck.
Is there a way to determine the html code of the color of a section in an image.
In my case I have a logo in png format and I want to know the color's html code of a section in the logo so that the menu items have the same color.
Thank you
These are the steps that worked for me:
open the image in gimp
Make sure the toolbox dialog is visible. If it is not use "Windows -> new Toolbox".
Make sure The colors dialog is visible. If it is not "Windows -> Dockable Dialogs -> Coulours"
Select the eye drop icon in the toolbox dialog (when you hover it it will show this text: Color Picker Tool: Set Coulours from image pixels).
click on the area of the image that you want to get the color code (the code will automatically show at the bottom of the coulors dialog).
If I understand you correctly you wanted to get the color of what you see on your screen. Then perform these steps.
Take a screenshot of what you see and paste it in mspaint.
Then use colour picker from tools menu and click on the place for which you wanted to know the colour.
Then under color menu use edit Colors option.
There in the edit Colors menu in the right side you will get the right color coordinates.
Now use editors like Visual Studio Code to get what you want.
In line with Temani's comment, keep it simple.
For Chrome: Right click anywhere, click "Inspect". If you don't see any colors on the bottom left, click on element.style and type something like color: black;. Then, click on the little black box that appears next to the color and click on your image. color: black; will now become color: #fea43d; or whatever the color you clicked is.
For Firefox: Right click anywhere, click "Inspect Element". If you don't see any colors on the right, click on element and type something like color: black;. Then, click on the little black circle that appears next to the color, click the eyedropper tool on the bottom left of the box that pops up, and click on your image. color: black; will now become color: #fea43d; or whatever the color you clicked is.
For html elements, you can right click on which color you want and
'inspect' it. You can find the color code in CSS.
For images in the pages:
You can install color picker extension/plugin for your browser, in which you just right click and get color code in hex or rgb formats.
OR
Download the image, open it in any photo editors which can read color.
#Karim maybe I can help you with your problem.
Here is the link - https://imagecolorpicker.com, I found yesterday while exploring the internet and I am damn sure that it will definitely help you.
just upload your Image file(or anything which is a screenshot, etc) or any websites URL to below mentioned the website and click on submit button.
Then your image or your uploaded content will appear with all its color details written at the adjacent side. You can click on your image at any pixel(position) and the details of color will be updated for that pixel(position) in HEX, RGB, HSV(HSL)
Here is the [Image] - : https://i.stack.imgur.com/s5elS.png for your reference.
May this will help You.
Looking at Sikuli (in conjunction with Selenium) as a possibility for automating the more visual elements of our UI testing, in particular issues that may crop up when the expected branding is not applied.
In my test, I have a white navigation icon image sat on a purple nav bar. I take a screen grab of the white icon sat on it's purple background and that is used as my Pattern in the Sikuli test class. If I then change the CSS in my web app so the nav bar is red, I want the test to fail.
Unfortunately, the background colour change is ignored and the icon is clicked regardless. If I set the pattern's similarity value to 1f (i.e. an exact match), the icon is not clicked. However, it also does not clicked the icon if I change the nav bar colour to the correct purple so it matches the icon screenshot I am using for the pattern.
A "similar" parameter value of anything from 0 to 0.9 lets the test pass once again, regardless of the nav bar colour.
Is this a restriction in the ability of Sikuli or am I missing something?
Edit:
So I found THIS ANSWER to a similar question and it prompted me to check the score returned when trying to match the white icon on red pattern and the white icon on purple pattern to the web page which had the purple branding. The score for both was over 0.9, with the difference from about the second decimal place onward, hence the match of both when I set the "similar" property of the pattern to 0.9.
It prompted me to try increasing the area of the screen shot to include more background relative to the icon size. This resulted in a score of 0.9x for the white on purple pattern and 0.7x for the white on red pattern.
So my conclusion is that the matching does take account of the background colour but if the majority of the screenshot pattern you are using is the same colour, the difference in score is minute.
Can you bypass the background directly behind the icon and look to the side of it? Excuse my lack of coding knowledge just trying to help come up up with a work-around
exists (icon):
if exists(whitebg): #capture a small area with just the color near the icon
pass
if exists(redbg):
fail
If you go to a page like youtube.com and drag the mouse around while holding down the left button all kinds of things get selected. In the image below, for example, I'm just dragging the mouse along the red arrow and all the stuff at the top got selected and turned blue.
But if I create a jsfiddle - http://jsfiddle.net/nxwLc/ - with a simple div and drag the mouse around with the left button down, I'm not able to select anything. I can even drag completely around the box without selecting it.
Does anyone know what the difference is?
Thanks
<div id="box1"></div>
The selection (highlight) you see is being applied to textual content elements specifically text and images. In your example you have nothing but a <div> element
Now you'll have something to highlight: http://jsfiddle.net/nxwLc/2/
<div id="box1"><img src="//placehold.it/100x100/cf5"/> asdasdasd</div>
Also worth noting that Firefox will highlight exactly what should be highlighted, while in Chrome the highlight area will have unspecific and also unpredicted results, element-related, keeping an eye to line-heights content-flows etc... strange in any case.
Chrome vs. Firefox
Is there a simple css way to display text with every letter replaced with a filled square?
My idea was to find a font-family that has squares for all letters, but I didn't find anything like that existing. Google is no friend as it gives hits of posted issues with boxes that appear when fonts fail in some way.
Letters should be displayed as squares, not replaced with squares. Also, I need to be able to control the square fill color with the usual html/css.
I'm fine to use font-face, but am trying to avoid the learning curve for creating my own font.
Update: here is an example:
div.innerHTML = "some arbitrary text".
Should be displayed like this:
"■■■■ ■■■■■■■■■ ■■■■".
#NoobEditor is right although. Many online font editors available (e.g.: http://fontark.net/farkwp/ ), you can create such font family in few minutes and can embed with your app.
Get a square font, define it in your we page style, asign it to an object, a div must work, put your text there. Voila.