menu

Questions & Answers

Is there any improvement for the moving brightness button? (Color Code Selector/ Colour picker)

(Color Code Selector/Colour picker) you can move the cursor on the color scheme panel and select your desired color code;

Anyone can improve moving Brightness button with a better Javascript code for below snippet? how the brightness moving button can be improved? it has lagging sometimes, it's been used a lot of events but still it has some problems (it's been working perfectly on any PC's browsers, but it's not compatible with cell phones browsers, how to make it compatible with cell phones browsers too?)

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-size: 20px;
      outline: 1px dashed black;
    }
  </style>
</head>

<body onmousemove="shc();mmove('movebar');" onload="colorbuilder(100);" onmouseup="mup();">
  <div style='border:1px solid black;width:fit-content;'>
    <label id="lablesize" for='size' style='font-size:20px;'></label><input oninput="scsizechange(this.value);" type='range' id='size' name='size' min='1' max='5'>
  </div>
  <div id="colormaker" onclick="clickoncolor();" onmouseover="oncolorover();" onmouseout="colormout();"
    onmouseleave="itsonclick=0;itsoncolor=0;"
    style='outline:1px dashed black;outline-offset:2px;width:fit-content;margin:2px;'></div>
  <div id="showcolor" style='font-size:20px;outline:1px solid black;outline-offset:2px;width:fit-content;margin:2px;'>
  </div>
  <br>
  <div id="clickshow"
    style="font-size:15px;font-weight:bold;font-style:italic;outline:1px solid black;width:fit-content;visibility:hidden;">
  </div>
  <script language="javascript">
    itsoncolor=0;
         brightnessvalue=100;
         itsonclick=0;
         var xm,testvalue=0,sto,leftv,sto1,opv=0,leftbrightnessv=370;
         function clickoncolor()
         {
         itsonclick=1;
         colorcodemaker();
         document.getElementById("clickshow").style.visibility="visible";
         document.getElementById("clickshow").innerHTML="Now you can copy your selected color code above<br>Note: Move out and return back your mouse cursor to the color scheme for continuous change";
         }
         
         function oncolorover()
         {
         itsoncolor=1;
         leftbrightnessv=parseInt(document.getElementById("movebar").style.left);
         brightnessvalue=100-parseInt((leftbrightnessv-370)/1.3);
         document.getElementById("brightshow").innerHTML=(brightnessvalue+"%");
         }
         
         function colormout()
         {
         if(itsonclick==0)
         {
         itsoncolor=0;
         colorout();
         }
         
         }
         
         
         function colorout()
         {
         
         csccv=document.getElementById("size").value;
         topstart=34;
         leftstart=9;
         tov=(topstart+csccv*100);
          coloroutst="<p><div style='text-align:center;margin-left:-200px;'>Brightness: </div></p><p id='cnote'>Move your mouse cursor on the color scheme to show its color code and Click to select your color</p>";
         coloroutst+="<div style='position:absolute;left:370px;top:"+(tov+28)+"px;border-radius:5px;z-index:0;width:150px;height:9px;background-image:linear-gradient(to right";
         
         hslbc=95;
         while (hslbc>=30)
         {
         coloroutst+=(","+h_s_lToHex(240, 100, hslbc));
         hslbc-=5;
         }
         leftbarsh=(-8*(parseInt(Math.log10(brightnessvalue))+1)-14);
         coloroutst+=");'></div>";
         coloroutst+=("<div id='movebar' style='position:absolute;left:"+leftbrightnessv+"px;top:"+(tov+23)+"px;z-index:1'><div style='padding:10px;border-radius:50%;border:1px solid black;background-image:radial-gradient(white , lightgrey , grey);z-index:1;'></div><div id='bluebutton' style='position:absolute;padding:6px;left:4px;top:4px;border-radius:50%;border:1px solid blue;background-image:radial-gradient(lightblue, blue);z-index:2;'></div> <div id='visiblebar' style='position:absolute;z-index:2;top:23px;left:6px;opacity:0;' ><div style='width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid grey;'></div><div id='brightshow' style='position:absolute;padding:20px;border-radius:5px;background-color:grey;z-index:2;top:6px;left:"+leftbarsh+"px;width:fit-content;'>"+brightnessvalue+"%</div></div> </div>");
         document.getElementById("showcolor").innerHTML=coloroutst;
         
         document.getElementById("movebar").onmousedown= function() {mdown("movebar")};
         document.getElementById("movebar").onmouseup= function() {mup()};
         document.getElementById("movebar").onmouseover= function() {mmover()};
         document.getElementById("movebar").onmouseout= function() {mout()};
         }
         
         function hsl_to_r_g_b(h,s,l,rgbp)
         {
             s /= 100;
             l /= 100;
             C = (1 - Math.abs(2 * l - 1)) * s;
             var hue = h / 60;
             X = C * (1 - Math.abs(hue % 2 - 1));
             r = g = b = 0;
             if (hue >= 0 && hue < 1) {
                 r = C;
                 g = X;
             } else if (hue >= 1 && hue < 2) {
                 r = X;
                 g = C;
             } else if (hue >= 2 && hue < 3) {
                 g = C;
                 b = X;
             } else if(hue >= 3 && hue < 4) {
                 g = X;
                 b = C;
             } else if (hue >= 4 && hue < 5) {
                 r = X;
                 b = C;
             } else {
                 r = C;
                 b = X;
             }
             m = l - C / 2;
             r += m;
             g += m;
             b += m;
             r *= 255.0;
             g *= 255.0;
             b *= 255.0;
             if(rgbp=="r") return Math.round(r);
             if(rgbp=="g") return Math.round(g);
             if(rgbp=="b") return Math.round(b);
           
         }
         
         function h_s_lToHex(h, s, l) {
           h /= 360;
           s /= 100;
           l /= 100;
           var r, g, b;
           if (s === 0) {
             r = g = b = l;
           } else {
             const hue2rgb = function(p, q, t) {
               if (t < 0) t += 1;
               if (t > 1) t -= 1;
               if (t < 1 / 6) return p + (q - p) * 6 * t;
               if (t < 1 / 2) return q;
               if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
               return p;
             };
             const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
             const p = 2 * l - q;
             r = hue2rgb(p, q, h + 1 / 3);
             g = hue2rgb(p, q, h);
             b = hue2rgb(p, q, h - 1 / 3);
           }
           const toHex = function(x) {
             const hex = Math.round(x * 255).toString(16);
             return hex.length === 1 ? '0' + hex : hex;
           };
           return '#'+toHex(r)+toHex(g)+toHex(b);
         }
         
         function shc()
         {
         if(itsoncolor==1 && itsonclick==0)
         {
         document.getElementById("clickshow").style.visibility="hidden";
         document.getElementById("clickshow").innerHTML="";
         colorcodemaker();
         }
         }
         
         function colorcodemaker()
         {
         stringv="";
         csccv=document.getElementById("size").value;
         topstart=34;
         leftstart=9;
         ntopv=0;
         xmouse=event.clientX;
         ymouse=event.clientY;
         huev=parseInt((event.clientX-leftstart)/csccv);
         satv=(100-parseInt((event.clientY-topstart)/csccv));
         stringv+=("<p><b>rgb</b>("+hsl_to_r_g_b(huev,brightnessvalue,satv,"r")+","+hsl_to_r_g_b(huev,brightnessvalue,satv,"g")+","+hsl_to_r_g_b(huev,brightnessvalue,satv,"b")+")</p>");
         stringv+=("<p><b>hex :</b>"+h_s_lToHex(huev, brightnessvalue, satv)+"</p>");
         stringv+=("<p><b>hsl</b>("+huev+","+brightnessvalue+"%,"+satv+"%)</p>");
         ntopv=((100*csccv)+(topstart+15));
         stringv+=("<div style='outline:1px solid black;outline-offset:2px;margin:2px;position:absolute;padding:50px;left:300px;top:"+ntopv+"px;border:3px outset hsl("+huev+","+brightnessvalue+"%,"+Math.abs(100-satv)+"%);color:hsl("+huev+","+brightnessvalue+"%,"+Math.abs(100-satv)+"%);border-radius:5%;background-color:hsl("+huev+","+brightnessvalue+"%,"+satv+"%)'>Color Display</div>");
         
         document.getElementById("showcolor").innerHTML=stringv;
         }
         
         function scsizechange(ssize)
         {
         colorout();
         document.getElementById("lablesize").innerHTML=("Resolution of Color Scheme("+ssize+"):");
         for (i=0;i<100;i++)
         {
         divc=("cc"+(i+1));
         document.getElementById(divc).style.height=(ssize+"px");
         document.getElementById(divc).style.width=((ssize*360)+"px");
         }
         }
         
         function brightnesschange(svalue1)
         {
         
         hvalue1=100;
         
         for(i=0;i<100;i++)
         {
         
         st="linear-gradient(to right";
         
         huev=0;
         
         do {
         
         st+=(","+h_s_lToHex(huev, svalue1, hvalue1));
         
         huev++;
         
         } while (huev<=360);
         
         hvalue1--;
         
         st+=")";
         
         cid=("cc"+(i+1));
         
         document.getElementById(cid).style.backgroundImage=st;
         }
         
         }
         
         
         function colorbuilder(svalue)
         {
         
         st="";
         hvalue=0;
         lvalue=100;
         topvalue=10;
         csize=2;
         document.getElementById("size").value=csize;
         colorout();
         document.getElementById("lablesize").innerHTML=("Resolution of Color Scheme("+csize+"):");
         for(i=0;i<100;i++)
         {
         st+=("<div id='cc"+(i+1)+"' style='height:"+(csize*1)+"px;width:"+(csize*360)+"px;top:"+topvalue+"px;left:10px;background-image:linear-gradient(to right");
         do {
         st+=(","+h_s_lToHex(hvalue, svalue, lvalue));
         hvalue++;
         } while (hvalue<=360);
         st+=");'></div>";
         hvalue=0;
         lvalue--;
         topvalue+=csize;
         }
         
         document.getElementById("colormaker").innerHTML=st;
         
         return svalue;
         }
         
         function mdown(ss)
         {
         testvalue=1;
         
         xm=event.clientX;
         
         leftv=parseInt(document.getElementById(ss).style.left);
         
         }
         
         function mmove(ss1)
         {
         
         if (testvalue==1)
         {
         
         
         document.getElementById("cnote").style.visibility="hidden";
         
         brightvalue=0;
         
         xm=(event.clientX-xm);
         
         document.getElementById(ss1).style.left=((leftv+xm)+"px");
         
         xm=(event.clientX);
         
         leftv=parseInt(document.getElementById(ss1).style.left);
         
         if(leftv>500)
         document.getElementById(ss1).style.left=(500+"px");
         else if (leftv<370)
         document.getElementById(ss1).style.left=(370+"px");
         
         brightvalue=parseInt(document.getElementById(ss1).style.left);
         
         brightvalue=100-parseInt((brightvalue-370)/1.3);
         
         bslvalue=parseInt(Math.log10(brightvalue+1));
         
         document.getElementById("brightshow").innerHTML=(brightvalue+"%");
         
         document.getElementById("brightshow").style.left=((-8*(bslvalue+1)-14)+"px");
         
         brightnesschange(brightvalue);
         
         }
         sto=setTimeout(mmove);
         }
         
         function mup()
         {
         
         testvalue=0;
         clearTimeout(sto);
         }
         
         function mmover()
         {
         document.getElementById("cnote").style.visibility="hidden";
         
         document.getElementById("visiblebar").style.visibility="visible";
         if(opv<=0.5)
         {
         
         document.getElementById("visiblebar").style.opacity=opv;
         opv+=0.1;
         } else {
         
         clearTimeout(sto1);
         }
         sto1=setTimeout(mmover,150);
         }
         
         function mout()
         {
         document.getElementById("cnote").style.visibility="visible";
         
         if(testvalue==0)
         {
         opv=0;
         document.getElementById("visiblebar").style.opacity=0;
         document.getElementById("visiblebar").style.visibility="hidden";
         clearTimeout(sto1);
         }
         }
         
         
  </script>
</body>

</html>

Comments:
2023-01-11 09:00:47
scheme is a programming language, not schemes in general.
2023-01-11 09:00:47
Sorry , my bad , not seen the proper tag!
Answers(0) :