Monthly Archives: January 2024

A non dropdown color chooser

Leave a comment

This is a non dropdown color chooser.
Here is an example:

colorSelectText

This is the code:

<!DOCTYPE HTML>
<html>
<body style=”background:black”>

<div id = “frame2” style = “position: absolute; width: 100%; height: 100%”>
<div id=”d3″ style=”position: absolute; top:100px; left: 100px; width: 300px; height: 300px; border: 1px solid white; border-radius: 20px”></div>
<div id=”d4″ style=”position: absolute; top:100px; left: 500px; width: 300px; height: 300px; border: 1px solid white; border-radius: 20px”></div>
</div>

<center><div id=”frame” style=”position: relative; width: 210px”>
<div id=”d1″ style=”position: absolute; left: 10px;width:30px; height: 30px; background: red;” ></div><div id=”d2″ style=” position: absolute; left: 40px; width:30px; height: 30px; background: black;” ></div><input type = “text” id=”t1″ style = “position: absolute; left: 70px; width: 120px” value = “” ondblclick=’chngCol();’/>
</div></center>
<script>
var cnt1 = 0; var d1 = document.getElementById(“d1”); var d2 = document.getElementById(“d2”); var r = 0; var g = 0; var b = 0; var ccnt = -1; var clrs = []; var a = 0; var b = 0; var oldURL = “tmpColor.html”;
document.onkeydown = setOption;

function setOption(e) {
if (e.keyCode == 187) {
if (d1.style.backgroundColor == “red”) r += 2;
if (d1.style.backgroundColor == “green”) g += 2;
if (d1.style.backgroundColor == “blue”) b += 2;
if (r > 255) r = 255;
if (g > 255) g = 255;
if (b > 255) b = 255;
d2.style.backgroundColor = “rgb(” + r + “,” + g + “,” + b + “)”;
document.getElementById(“t1”).value = d2.style.backgroundColor;
}

if (e.keyCode == 189) {
if (d1.style.backgroundColor == “red”) r -= 2;
if (d1.style.backgroundColor == “green”) g -= 2;
if (d1.style.backgroundColor == “blue”) b -= 2;
if (r < 0) r = 0;
if (g < 0) g = 0;
if (b < 0) b = 0;
d2.style.backgroundColor = “rgb(” + r + “,” + g + “,” + b + “)”;
document.getElementById(“t1”).value = d2.style.backgroundColor;
}

if (e.keyCode == 18) {
cnt1 ++;
if (cnt1 == 0) d1.style.backgroundColor = “red”;
if (cnt1 == 1) d1.style.backgroundColor = “green”;
if (cnt1 == 2) d1.style.backgroundColor = “blue”;
if (cnt1 == 2) cnt1 = -1;
}
if (e.keyCode== 13) makeColors();
if (e.keyCode== 17) setColors();
if (e.keyCode== 32) sve();
}

function makeColors() {
ccnt ++;
clrs[ccnt] = d2.style.backgroundColor;
}

function setColors() {
document.body.style.backgroundColor = clrs[0];
document.getElementById(“d3”).style.backgroundColor = clrs[1];
document.getElementById(“d4”).style.backgroundImage = ‘-webkit-linear-gradient(left,’ + clrs[2] + ‘,’ + clrs[3] + ‘,’ + clrs[2] + ‘)’;
document.getElementById(“d4”).style.backgroundColor = ‘linear-gradient(left,’ + clrs[2] + ‘,’ + clrs[3] + ‘,’ + clrs[2] + ‘)’;
}

function chngCol() {
d2.style.backgroundColor = document.getElementById(“t1”).value;
a = d2.style.backgroundColor.indexOf(“,”);
b = a + 2;
r = d2.style.backgroundColor.substr(4,a-4);
a = d2.style.backgroundColor.indexOf(“,”, b);
g = d2.style.backgroundColor.substr(b,a-b);
b = a + 2;
a = d2.style.backgroundColor.indexOf(“)”, b);
b = d2.style.backgroundColor.substr(b,a-b);
}

function sve() {
var textToSave = ‘<!DOCTYPE HTML> <html> <style> body{background-color: ‘ + clrs[0] + ‘} </style> <body> ‘ + document.getElementById(“frame2”).innerHTML;
textToSave += ‘</body></html>’;
document.getElementById(“t1”).value = textToSave;
alert(textToSave);
var textToSaveAsBlob = new Blob([textToSave], {type:”text/plain”});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
fileNameToSaveAs = prompt(“FileName to save as”,oldURL);
oldURL = fileNameToSaveAs;
var downloadLink = document.createElement(“a”);
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = “Download File”;
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = “none”;
document.body.appendChild(downloadLink);
downloadLink.click();
}

function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
</script>
</body></html>

There is a square that shows the active color. Clicking Alt cycles between red, green and blue. The = key increases the value and the – key decreases it. This can be done for red,green and blue. Another square show the composite square. A text box shows the rgb vale of the composite:
if (e.keyCode == 18) {
cnt1 ++;
if (cnt1 == 0) d1.style.backgroundColor = “red”;
if (cnt1 == 1) d1.style.backgroundColor = “green”;
if (cnt1 == 2) d1.style.backgroundColor = “blue”;
if (cnt1 == 2) cnt1 = -1;
}

function setOption(e) {
if (e.keyCode == 187) {
if (d1.style.backgroundColor == “red”) r += 2;
if (d1.style.backgroundColor == “green”) g += 2;
if (d1.style.backgroundColor == “blue”) b += 2;
if (r > 255) r = 255;
if (g > 255) g = 255;
if (b > 255) b = 255;
d2.style.backgroundColor = “rgb(” + r + “,” + g + “,” + b + “)”;
document.getElementById(“t1”).value = d2.style.backgroundColor;
}

if (e.keyCode == 189) {
if (d1.style.backgroundColor == “red”) r -= 2;
if (d1.style.backgroundColor == “green”) g -= 2;
if (d1.style.backgroundColor == “blue”) b -= 2;
if (r < 0) r = 0;
if (g < 0) g = 0;
if (b < 0) b = 0;
d2.style.backgroundColor = “rgb(” + r + “,” + g + “,” + b + “)”;
document.getElementById(“t1”).value = d2.style.backgroundColor;
}

This can also be done by entering a value in the text box and doubleclicking it:
function chngCol() {
d2.style.backgroundColor = document.getElementById(“t1”).value;
a = d2.style.backgroundColor.indexOf(“,”);
b = a + 2;
r = d2.style.backgroundColor.substr(4,a-4);
a = d2.style.backgroundColor.indexOf(“,”, b);
g = d2.style.backgroundColor.substr(b,a-b);
b = a + 2;
a = d2.style.backgroundColor.indexOf(“)”, b);
b = d2.style.backgroundColor.substr(b,a-b);
}

Hitting Enter than adds the selected color to an array:
if (e.keyCode== 13) makeColors();
function makeColors() {
ccnt ++;
clrs[ccnt] = d2.style.backgroundColor;
}

Hitting Control then finishes the operation:
if (e.keyCode== 17) setColors();
function setColors() {
document.body.style.backgroundColor = clrs[0];
document.getElementById(“d3”).style.backgroundColor = clrs[1];
document.getElementById(“d4”).style.backgroundImage = ‘-webkit-linear-gradient(left,’ + clrs[2] + ‘,’ + clrs[3] + ‘,’ + clrs[2] + ‘)’;
document.getElementById(“d4”).style.backgroundColor = ‘linear-gradient(left,’ + clrs[2] + ‘,’ + clrs[3] + ‘,’ + clrs[2] + ‘)’;
}

Hitting s saves the result.

Simulating Key Events

Leave a comment

I often find keys more convenient to use than buttons, but they can not be used on virtual keyboard devices.
To port apps to mobile devices touch events must be substituted, which can lead to much rewriting, greatly increasing file size.
This alternative is to use touch events to simulate key events.
I wrote this example on a keyboard, so I used mousedown, but it should work with touchdown. The click and change work on an Android phone.
Here is an example:

keytestText

 

This is the code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Simulate a Keypress Event</title>
</head>
<body>
<input type=”button” id=”b1″ value = “click” /> <select id=”s1″><option>choose</option><option>option1</option><option>option2</option></select> <select id=”s2″><option>choose</option><option>option1</option><option>option2</option></select> <input type=”button” id=”b2″ style = “font: normal normal 800 20px Georgia” value = “<” /> <input type=”button” id=”b3″ style = “font: normal normal 800 20px Georgia” value = “>” /> <input type = “text” id = “t1″style = “font: normal normal 800 20px Georgia” value = “” />
<script>
var txt = document.getElementById(“t1”); var cnt = 0;
window.addEventListener(‘keydown’, (e) => {
t1.value = e.key;
if (e.key == “-“) cnt –;
if (e.key == “=”) cnt ++;
t1.value += ” ” + cnt;
});

document.addEventListener(‘mousedown’, (ev) => {
if(ev.target.id == “b2”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘-‘}));
if(ev.target.id == “b3”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘=’}));
});

document.addEventListener(‘click’, (ev) => {
if(ev.target.id == “b1”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘h’}));
});

document.addEventListener(‘change’, (ev) => {
if (ev.target.id == “s1”) {
if(ev.target.value == “option1”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘Space’}));
if(ev.target.value == “option2”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘Enter’}));
}
if (ev.target.id == “s2”) {
if(ev.target.value == “option1”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘c’}));
if(ev.target.value == “option2”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘d’}));
}
document.getElementById(“s1”).value = “choose”;
document.getElementById(“s2”).value = “choose”;
document.activeElement.blur();
});
</script>
</body>
</html>

The key is the use of dispatchEvent:
document.addEventListener(‘mousedown’, (ev) => {
if(ev.target.id == “b2”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘-‘}));
if(ev.target.id == “b3”) window.dispatchEvent(new KeyboardEvent(‘keydown’, {‘key’: ‘=’}));
});

Pressing a button simulates pressing a key. In lines above the keys are – and =.
You can also combine that with a simultaneous control or alt by adding congrol = “true” or alt = “true”.

In the example above, the text box showed the simulated key as well as an incremented counter:
var cnt = 0;
window.addEventListener(‘keydown’, (e) => {
t1.value = e.key;
if (e.key == “-“) cnt –;
if (e.key == “=”) cnt ++;
t1.value += ” ” + cnt;
});

Interacrive Shadow Generator

Leave a comment

This app creates box and text shadows interactively, using a color input for the color.

Here is an example:

shadowText

This is the source:

<html>
<body>
<select id=”s1″ onchange=’prc();’ onclick=’prc();’><option>choose</option><option>font color</option><option>border color</option><option>font shadow color</option><option>border shadow color</option><option>font shadow width</option><option>border shadow width</option><option>font shadow left</option><option>border shadow left</option><option>font shadow top</option><option>border shadow top</option><option>font shadow opacity</option><option>border shadow opacity</option></select> <input type = “color” id = “clr” /> <input type=”button” id=”b1″ style = “font-size: 20px” value = “<” onclick=’dec();’/> <input type=”button” id=”b2″ style = “font-size: 20px” value = “>” onclick=’inc();’/>

<div id=”d1″ style = “position: absolute; width: 800px; height: 400px; left: 50%; top: 50%; margin-left: -400px; margin-top: -200px; border: 1px solid; font: italic normal 500 56px Georgia” contenteditable = “true” ></div>

<script>

var sel = document.getElementById(“s1”); var el = document.getElementById(“d1”); var swd = 8; var slft = 5; var stp = 5; var sa = 1;
function prc() {
if (sel.value == “font color”) el.style.color = clr.value;
if (sel.value == “border color”) el.style.borderColor = clr.value;
if (sel.value == “font shadow color”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow color”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “font color” || sel.value == “border color” || sel.value == “font shadow color” || sel.value == “border shadow color”) sel.value = “choose”;
}

document.onkeydown = sm;
function sm(e) {
if (e.keyCode == 66 || e.keyCode == 67) {
if (e.keyCode == 66) sel.value = “border color”;
if (e.keyCode == 67) sel.value = “font color”;
sel.click();
sel.value = “choose”;
}
if (e.keyCode == 187) document.getElementById(“b2”).click();
if (e.keyCode == 189) document.getElementById(“b1”).click();
}

function inc () {

if (sel.value == “font shadow left” || sel.value == “border shadow left”) {
slft ++;
if (sel.value == “font shadow left”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow left”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

if (sel.value == “font shadow top” || sel.value == “border shadow top”) {
stp ++;
if (sel.value == “font shadow top”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow top”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

if (sel.value == “font shadow width” || sel.value == “border shadow width”) {
swd ++;
if (sel.value == “font shadow width”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow width”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

if (sel.value == “font shadow opacity” || sel.value == “border shadow opacity”) {
sa += .1;
if (sa > 1) sa= 1;
if (sel.value == “font shadow opacity”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow opacity”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}
}

function dec () {

if (sel.value == “font shadow left” || sel.value == “border shadow left”) {
slft –;
if (sel.value == “font shadow left”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow left”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

if (sel.value == “font shadow top” || sel.value == “border shadow top”) {
stp –;
if (sel.value == “font shadow top”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow top”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

if (sel.value == “font shadow width” || sel.value == “border shadow width”) {
swd –;
if (sel.value == “font shadow width”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow width”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

if (sel.value == “font shadow opacity” || sel.value == “border shadow opacity”) {
sa -= .1;
if (sa < 0) sa= 0;
if (sel.value == “font shadow opacity”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow opacity”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}
}

function hexToRgba(hex) {
var r = parseInt(clr.value.substr(1,2),16);
var g = parseInt(clr.value.substr(3,2),16);
var b = parseInt(clr.value.substr(5,2),16);
return “rgba(” + r + “,” + g + “,” + b + “,” + sa + “)”;
}

</script>
</body></html>

The shadow formula is h offset, v offset, width, rgba.

The function hexToRgba(hex) is used to get the color from the color input.
The dialog output is a hex value so it must be converted to rgb with a independentally added:

function hexToRgba(hex) {
var r = parseInt(clr.value.substr(1,2),16);
var g = parseInt(clr.value.substr(3,2),16);
var b = parseInt(clr.value.substr(5,2),16);
return “rgba(” + r + “,” + g + “,” + b + “,” + sa + “)”;
}

It is written so key events can be used for some actions, as well as mouse events. Rather than write two functions, I used the key events to simulate mouse events:

document.onkeydown = sm;
function sm(e) {
if (e.keyCode == 66 || e.keyCode == 67) {
if (e.keyCode == 66) sel.value = “border color”;
if (e.keyCode == 67) sel.value = “font color”;
sel.click();
sel.value = “choose”;
}
if (e.keyCode == 187) document.getElementById(“b2”).click();
if (e.keyCode == 189) document.getElementById(“b1”).click();
}

The key forces a select value and then simulates a click. The select element can still be used by using its chang event.

The following can be set:shadowText2

A typical operation is the following:

if (sel.value == “font shadow left” || sel.value == “border shadow left”) {
slft ++;
if (sel.value == “font shadow left”) el.style.textShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
if (sel.value == “border shadow left”) el.style.boxShadow = slft + “px ” + stp + “px ” + swd + “px ” + hexToRgba(clr.value);
}

This is done with either the increase button or its simulation with the +/= key.