Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Wollstonecraft 1792

    Încărcat de

    Ahmad Rehan
    9 vizualizări3 pagini
    this is the research from my side which you must go through to have a better understanding of the wor;d

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    TXT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    this is the research from my side which you must go through to have a better understanding of the wor;d

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    9 vizualizări3 pagini

    Wollstonecraft 1792

    Încărcat de

    Ahmad Rehan
    this is the research from my side which you must go through to have a better understanding of the wor;d

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca TXT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 3

    <!

    DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
    .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    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;
    border-radius: 50%;
    cursor: pointer;
    }

    .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    }
    #redSlider::-webkit-slider-thumb {background: red;}
    #redSlider::-moz-range-thumb {background: red;}
    #greenSlider::-webkit-slider-thumb {background: green;}
    #greenSlider::-moz-range-thumb {background: green;}
    #blueSlider::-webkit-slider-thumb {background: blue;}
    #blueSlider::-moz-range-thumb {background: blue;}
    </style>

    <body>
    <div class="w3-container">
    <h1>RGB Color</h1>
    <div class="w3-cell-row">
    <div class="w3-container w3-cell w3-mobile">
    <p><input type="range" min="0" max="255" value="0" class="slider"
    id="redSlider"></p>
    <p><input type="range" min="0" max="255" value="0" class="slider"
    id="greenSlider"></p>
    <p><input type="range" min="0" max="255" value="0" class="slider"
    id="blueSlider"></p>
    </div>
    <div class="w3-container w3-cell w3-mobile" style="background-color:black"
    id="colorShow">
    <div></div>
    </div>
    </div>
    <p>Or pick a color: <input type="color" id="pickColor"></p>
    </div>
    <script
    src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <script src="https://www.w3schools.com/lib/w3color.js"></script>
    <script>
    var socket = io(); //load socket.io-client and connect to the host that serves the
    page
    var rgb = w3color("rgb(0,0,0)"); //we use the w3color.js library to keep the color
    as an object
    window.addEventListener("load", function(){ //when page loads
    var rSlider = document.getElementById("redSlider");
    var gSlider = document.getElementById("greenSlider");
    var bSlider = document.getElementById("blueSlider");
    var picker = document.getElementById("pickColor");

    rSlider.addEventListener("change", function() { //add event listener for when red


    slider changes
    rgb.red = this.value; //update the RED color according to the slider
    colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
    color"
    socket.emit("rgbLed", rgb); //send the updated color to RGB LED via WebSocket
    });
    gSlider.addEventListener("change", function() { //add event listener for when
    green slider changes
    rgb.green = this.value; //update the GREEN color according to the slider
    colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
    color"
    socket.emit("rgbLed", rgb); //send the updated color to RGB LED via WebSocket
    });
    bSlider.addEventListener("change", function() { //add event listener for when
    blue slider changes
    rgb.blue = this.value; //update the BLUE color according to the slider
    colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
    color"
    socket.emit("rgbLed", rgb); //send the updated color to RGB LED via WebSocket
    });
    picker.addEventListener("input", function() { //add event listener for when
    colorpicker changes
    rgb.red = w3color(this.value).red; //Update the RED color according to the
    picker
    rgb.green = w3color(this.value).green; //Update the GREEN color according to
    the picker
    rgb.blue = w3color(this.value).blue; //Update the BLUE color according to the
    picker
    colorShow.style.backgroundColor = rgb.toRgbString(); //update the "Current
    color"
    rSlider.value = rgb.red; //Update the RED slider position according to the
    picker
    gSlider.value = rgb.green; //Update the GREEN slider position according to the
    picker
    bSlider.value = rgb.blue; //Update the BLUE slider position according to the
    picker
    socket.emit("rgbLed", rgb); //send the updated color to RGB LED via WebSocket
    });
    });
    </script>
    </html>
    </body>
    </html>

    S-ar putea să vă placă și