<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Color Macthing Formula App</title>
<script src="jquery.3.3.1.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="bootstrap.js"></script>
<script src="utils2.js"></script>
<script type='text/javascript' src='w3color.js'></script>
<link rel="stylesheet" href="fonts.css" type="text/css" media="screen">
<style>
body{
margin: 0px;
font-family: HelveticaInseratCyrUprightRg;
overflow: auto;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*table {
border-collapse: collapse;
border: 1px none black;
}
td{
min-width: 25px;
}*/
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
</style>
<script>
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
function rgb2hex(red, green, blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1)
}
</script>
<script type="text/javascript">
var cl=console.log;
function elid(id) {
return document.getElementById(id);
}
function elsid(id) {
return document.getElementById(id).style;
}
var gl;
function mixc(c1,c2) {
var base = c1;//[140, 112, 97, 0.7];
var added = c2;//[164,135,119,0.8];
var mix = [0,0,0,0];
mix[3] = 1 - (1 - added[3]) * (1 - base[3]);
mix[0] = Math.round((added[0] * added[3] / mix[3]) + (base[0] * base[3] * (1 - added[3]) / mix[3])); // red
mix[1] = Math.round((added[1] * added[3] / mix[3]) + (base[1] * base[3] * (1 - added[3]) / mix[3])); // green
mix[2] = Math.round((added[2] * added[3] / mix[3]) + (base[2] * base[3] * (1 - added[3]) / mix[3])); // blue
return mix;
}
var changeColLoc,newColLoc,changeCol=[0,0,0,1],thresh=0.2,threshLoc;
function init() {
}
var amoR=0,amoG=0,amoB=0,amoY=0,amoC=0,amoM=0,amoW=0,amoBL=0,amoOr=0,amoLi=0,amoMi=0,amoRo=0,amoAz=0,amoVi=0;
var pickCol=function(e) {
if (!mDown) {
return ;
}
var pos = findPos(elid("i"));
var x = e.pageX - 250;
var y = e.pageY - 380;
var coord = "x=" + x + ", y=" + y;
var c = elid("i").getContext('2d');
var p = c.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
changeCol[0]=p[0]/255;
changeCol[1]=p[1]/255;
changeCol[2]=p[2]/255;
//convertToCWB(p[0]/255,p[1]/255,p[2]/255,true);
convertCWBFunc(p[0]/255,p[1]/255,p[2]/255,true);
}
var convertCWBFunc=convertToCWB6;
function setCol(e,cid) {
var aaid=e.target.id.substring(1);
//cl('setCol',e.target.value);
editing=true;
editingSlider=true;
editingStartVal=Number(elid(aaid).innerHTML);
editingWhat={id:aaid};
cl(Number(e.target.value),editingStartVal);
enterVal(Number(e.target.value)-editingStartVal);
elid(aaid).innerHTML=Number(elid(aaid).innerHTML)+(Number(e.target.value)-editingStartVal);
editing=false;
editingSlider=false;
}
var editing=false,editingWhat,editingStartVal=0,editingSlider=false;
function clickTD(e) {
//cl(e,e.target);
if (editing) {
return ;
}
editing=true;
//cl(e.target.innerHTML);
editingStartVal=Number(e.target.innerHTML);
elid('inp').value=editingStartVal;
e.target.innerHTML="";
editingWhat=e.target;
setTimeout(function(){
e.target.appendChild(elid('inp'));
elsid('inp').display="block";
},1);
}
function gco(cid,oth){
if (!oth) {
if (ccs[0].c==cid) {
return ccs[0];
}
if(ccs.length>1)if (ccs[1].c==cid) {
return ccs[1];
}
}else{
if (ccs[0].c!=cid) {
return ccs[0];
}
if(ccs.length>1)if (ccs[1].c!=cid) {
return ccs[1];
}
}
return false;
}
$(document).ready(function(){
fromInput();
});
function fromInput(e) {
//alert(elid("rawCol").value);
//var color = w3color(elid("rawCol").value).toRgb();
//cl(color.toRgb());
//cl(color);
//changeCol[0]=color.r/255;
//changeCol[1]=color.g/255;
//changeCol[2]=color.b/255;
if (Number(elid('rawR').value)>255)elid('rawR').value=255;
if (Number(elid('rawR').value)<0)elid('rawR').value=0;
if (Number(elid('rawG').value)>255)elid('rawG').value=255;
if (Number(elid('rawG').value)<0)elid('rawG').value=0;
if (Number(elid('rawB').value)>255)elid('rawB').value=255;
if (Number(elid('rawB').value)<0)elid('rawB').value=0;
convertCWBFunc(Number(elid('rawR').value),Number(elid('rawG').value),Number(elid('rawB').value),true);
}
</script>
<style>
tr{
margin: 4px;
}
</style>
</head>
<body onload="init();" class="noselect">
<img src="logo.png" style="position: absolute;left: 136px;">
<div style="position: absolute;text-align: center;width: 250px;font-size: 20px;height: 60px;top: 100px;">Color Matching<br/>Formula App</div>
<div style="position: absolute;top: 160px; font-weight:normal;width: 250px;">
<canvas id="cpr" style="border: none;width: 238px;height: 130px;margin-left:6px;" width="250" height="130"></canvas><br>
<div style="margin-top: 4px;text-align: center;font-size: 16px;">
Please enter the RGB color<br>
values of the color you want<br>
to match. Then click the<br>
generate CWB formula button
</div><br>
<table style="width: 250px;">
<tr>
<td style="text-align: center;">Red<br><input id="rawR" type="text" value="0" style="width: 70px;text-align: center;" /></td>
<td style="text-align: center;">Green<br><input id="rawG" type="text" value="0" style="width: 70px;text-align: center;" /></td>
<td style="text-align: center;">Blue<br><input id="rawB" type="text" value="0" style="width: 70px;text-align: center;" /></td>
</tr>
</table>
<br>
<div style="margin-top: 0px;text-align: center;font-size: 16px;">
Wieght to be mixed<br>
in ounces<br><input id="weight" type="text" value="1200" style="width: 125px;text-align: center;" /><br>
<button type="button" class="btn btn-success" onclick="fromInput(event)" style="margin-top: 8px;">Generate the CWB formula
</button>
</div>
</div>
<div style="position: absolute;text-align: center;width: 250px;font-size: 20px;height: 60px;top: 100px;left: 240px;">The CWB Color<br>
matching formula is
</div>
<div id="info" style="position: absolute;top: 160px;left: 270px;">
<div id="componentsr">
<table id="components" style="font-size: 18px;">
</table>
<br>
</div>
<input id="rawCol" type="text" value="rgb(34,156,100)"style="display: none;" />
<input style="display: none;width: 35px;" id="inp" type="text" >
</div>
</body>
</html>
