I have put together some code in HTML and have a Color picker, that is working perfect. I also put in a some code and create a slider bar to try and control the brightness of the selected color. The problem is when I choose a color the slider bar wont change the brightness of the selected color. How do I connect the slider value to my color brightness? I will put my code for the slider and color picker below. Please let me know if anyone can help. Thank you -Austin
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");
client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");
client.println("</head><body>");
client.println("<form>");
client.println("<hr>");
client.println("<section class=intensity>");
client.println("<label for=intensity>Light Brightness");
client.println("<br>");
client.println("<span>Dim</span>");
client.println("<input id=intensity type=range name=Dim min=0 max=255 step=1>");
client.println("<span>Bright</span>");
client.println("</section>");
client.println("</form>");
client.println("<div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");
client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");
client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");
client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");
//client.println("<script>function update(intensity)");
client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" + Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + intensity + \"&\";}</script></body></html>");
You need maybe use option opacity.
Example:
div {
opacity : 0.5;
}
Related
I want to have a button to insert an image into primefaces text editor when click. The image may be as
<img src=\"data:image/png;base64," + imgToBase64String("Test") + "\">
I used the function PrimeFaces.widgets.editorA.editor.editor.insertText(PrimeFaces.widgets.editorA.editor.getSelection().index, ImageInfo, 'bold', true)"
But it just show the text about "<img src="data:image/png;base64," + imgToBase64String("Test") + "">", not an image, is there has anyway to insert an image just like call function as editor.editor.insertText?
Thanks a lot!
I have two different projects (PWA and a webpage):
<img [src]="fileFirebaseUrl" class="image">
<div [ngStyle]="{'background-image': 'url(' + imageURL + ')'}">
Some images are not displaying correctly, when I inspect the html I can't find any background properties set. I have tried with svg, jpeg and png.
Some images work when I transform them to another format, or when I export a new image with another format.
Background image is not same as image tag. So it's repeated by default and position is not correct. So you should do like the following:
<div [ngStyle]="{'background': 'url(' + imageURL + ') no-repeat 0 0'}"></div>
No background-image, use background for all-in-one styling. Otherwise, you can use background-repeat, background-position, background-size etc separately.
I solved this with this function (trim is for possible linebreaks)
getCssUrl(url: string) {
if (url) {
return 'url(\'' + url.trim() + '\')';
}
}
I have a text area with one string binded to it. With the text color as white by default.
<textarea style="background-color: black;color:#fff;" [(ngModel)]="outputText"></textarea>
The bound string contains multiple variables.
return this.outputText = this.test1 + " test1Stat" + this.test2 + " test2Stat" + this.test3 + " test3Stat";
What I want to do is, if test1 is less than 1, it should show "test1 test1Stat" in red, while everything else is in green. Is there a way to do this?
It's not possible to color part of the text in a textarea,
However- you can try to use the 'contenteditable' property instead.
It basically turns your div into a textbox, and you can use html tags and such inside.
.greenText{
color:green;}
div{
border:black solid 1px;
padding:20px;
}
<div contenteditable="true">text text <span class='greenText'>GREEN TEXT</span> more text that you can edit</div>
If you create an infobox with the Bing Maps v7 Ajax control and set the htmlContent to some html with a select element in it, nothing happens when you click on the drop down arrow on the select.
var options = {
htmlContent: '<div style="width: 200px;border: #727272 1px solid; background: #fff;">' +
' Show Range: <select>' +
' <option value="default">Default</option>' +
' <option value="a">A</option>' +
' <option value="b">B</option>' +
' <option value="c">C</option>' +
' </select>' +
'</div>'
};
jsFiddle here: http://jsfiddle.net/bryantlikes/8E2KK/1/
Any ideas?
The main reason is that the generate div that has MicrosoftMap css class applied captures the click event and does not it propagates on the select element.
If you use 'tab' key and then the arrow keys, you can change the values so the select is working fine but the click does not behave in the good way.
I'll try to find a workaround and help you.
I am adding the link button and a image logo with that link dynamically from code behind. On the page it is showing linktext and then the image '[LinkText][Image]'. I want to show in the other manner like '[Image][LinkText]'. How we can implement it, please help.
Here is my code snippet:
HtmlGenericControl imgToAdd = new HtmlGenericControl("img");
imgToAdd.Attributes.Add("src", "../Images/Click.png");
imgToAdd.Attributes.Add("id", "img" + containerCountForLabels);
imgToAdd.Style.Add("height", "16px");
imgToAdd.Style.Add("vertical-align", "top");
HtmlGenericControl linkToAdd = new HtmlGenericControl("a");
linkToAdd.Attributes.Add("id", "linkbtn" + containerCountForLabels);
linkToAdd.Style.Add("margin-bottom", "5px");
linkToAdd.Style.Add("margin-top", "6px");
linkToAdd.Style.Add("margin-left", "10px");
linkToAdd.Style.Add("margin-right", "10px");
linkToAdd.Style.Add("font-size", "13px");
linkToAdd.Style.Add("float", "left");
linkToAdd.Style.Add("cursor", "pointer");
linkToAdd.Style.Add("color", "white");
linkToAdd.Style.Add("text-decoration", "underline");
linkToAdd.Style.Add("vertical-align", "top");
linkToAdd.Attributes.Add("onclick", "ShowHideDiv('img" + containerCountForLabels + "','divMain" + containerCountForLabels + "');");
linkToAdd.InnerText = dtReportLocal.Rows[0]["SubExpenseName"].ToString();
linkToAdd.Controls.Add(imgToAdd);
divForLink.Controls.Add(linkToAdd);
containerCountForLabels++;
I dont know why it shows before, but what you can do is to add the image and text as an innerHTML of the link instead using InnerText, something like the code below:
linkToAdd.InnerHTML = "<img src='../Images/Click.png' id='img"+ containerCountForLabels+"' style='height:16px;vertical-align:top;'>"+dtReportLocal.Rows[0]["SubExpenseName"].ToString();