API tools faq
paste
Advertisement
SonnyL

Untitled

SonnyL
Feb 9th, 2024
139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Python 9.78 KB | None | 0 0
raw download clone embed print report
  1. html = """
  2. <!DOCTYPE html>
  3. <html>
  4.  <head>
  5.    <meta charset="UTF-8">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <title>Robot Arm Controller</title>
  8.    <link rel="stylesheet" href="/style.css">
  9.  </head>
  10.  <body>
  11.    <div id="slider-cont">
  12.      <div id="base-cont" class="container">
  13.        <div id="base-title" class="title-text">Base Pivot</div>
  14.        <div id="base-toggle" class="toggle-button"></div>
  15.        <input id="base-slider" class="slider" type="range" min="0" max="180"
  16.          value="90">
  17.        <input type="text" id='base-value' class='value-text' maxlength="3">
  18.      </div>
  19.  
  20.      <div id="pivot1-cont" class="container">
  21.        <div id="pivot1-title" class="title-text">Pivot 1</div>
  22.        <div id="pivot1-toggle" class="toggle-button"></div>
  23.        <input id="pivot1-slider" class="slider" type="range" min="0" max="180"
  24.          value="0">
  25.        <input type="text" id='base-value' class='value-text' maxlength="3">
  26.      </div>
  27.  
  28.      <div id="pivot2-cont" class="container">
  29.        <div id="pivot2-title" class="title-text">Pivot 2</div>
  30.        <div id="pivot2-toggle" class="toggle-button"></div>
  31.        <input id="pivot2-slider" class="slider" type="range" min="0" max="180"
  32.          value="180">
  33.        <input type="text" id='base-value' class='value-text' maxlength="3">
  34.      </div>
  35.  
  36.      <div id="grabber-cont" class="container">
  37.        <div id="grabber-title" class="title-text">End Effector Pivot</div>
  38.        <div id="grabber-toggle" class="toggle-button"></div>
  39.        <input id="grabber-slider" class="slider" type="range" min="0" max="180"
  40.          value="180">
  41.        <input type="text" id='base-value' class='value-text' maxlength="3">
  42.      </div>
  43.  
  44.      <div id="effector-cont" class="container">
  45.        <div id="effector-title" class="title-text">End Effector</div>
  46.        <div id="effector-close"> <span
  47.            style="position: relative; bottom: 0.15vh;"></span></div>
  48.        <div id="torque-toggle"> <span
  49.            style="position: relative; bottom: 0.15vh;">HI</span></div>
  50.      </div>
  51.  
  52.      <div id="program-cont" class="container">
  53.        <div id="program-button"><span>Program Runner</span></div>
  54.      </div>
  55.    </div>
  56.  </body>
  57.  <script>
  58.    const toggleButton = document.getElementsByClassName('toggle-button');
  59. const sliders = document.getElementsByClassName('slider');
  60. const valueText = document.getElementsByClassName('value-text');
  61. const containers = document.getElementsByClassName('container');
  62. const grabber = document.getElementById('effector-close');
  63. const effectorSpan = grabber.getElementsByTagName('span')
  64. const torque = document.getElementById('torque-toggle');
  65. const torqueSpan = torque.getElementsByTagName('span');
  66. const programButton = document.getElementById('program-button')
  67. let torqueSelection = 40
  68. let xhr = new XMLHttpRequest();
  69.  
  70. for (let i = 0; i < containers.length - 2; i++) {
  71.    toggleButton[i].addEventListener('click', function () {
  72.        if (!toggleButton[i].classList.contains('toggled')) {
  73.            toggleButton[i].style = 'background-color:#45f542';//Green
  74.            toggleButton[i].classList.add('toggled');
  75.  
  76.        } else if (toggleButton[i].classList.contains('toggled')) {
  77.            toggleButton[i].style = 'background-color:#f55142';//Red
  78.            toggleButton[i].classList.remove('toggled');
  79.        };
  80.    });
  81.    valueText[i].addEventListener('keydown', function (e) {
  82.        if (e.keyCode == 13) {
  83.            sliders[i].value = valueText[i].value
  84.            setTimeout(() => {
  85.                xhr.open("GET", `/slider${i}?` + sliders[i].value, true);
  86.                xhr.send();
  87.                console.log(sliders[i].value);
  88.            }, 250);
  89.        };
  90.    });
  91.  
  92.    sliders[i].addEventListener('input', function () {
  93.        valueText[i].value = sliders[i].value;
  94.        console.log('UPDATE!')
  95.  
  96.    });
  97.  
  98.    sliders[i].addEventListener('change', function () {
  99.        if (toggleButton[i].classList.contains('toggled')) {
  100.            setTimeout(() => {
  101.                xhr.open("GET", `/slider${i}?` + sliders[i].value, true);
  102.                xhr.send();
  103.                console.log(sliders[i].value);
  104.            }, 250);
  105.        };
  106.    });
  107. };
  108. torque.addEventListener('click', function () {
  109.    if (!torque.classList.contains('toggled')) {
  110.        torque.classList.add('toggled');
  111.        torqueSpan[0].innerHTML = 'LO'
  112.        torqueSelection = 40
  113.  
  114.    } else if (torque.classList.contains('toggled')) {
  115.        torque.classList.remove('toggled');
  116.        torqueSpan[0].innerHTML = 'HI';
  117.        torqueSelection = 50
  118.    };
  119. });
  120. grabber.addEventListener('click', function () {
  121.    if (!grabber.classList.contains('toggled')) {
  122.        grabber.style = 'background-color:#45f542';//Green
  123.        grabber.classList.add('toggled');
  124.        effectorSpan[0].innerHTML = 'Opened'
  125.        setTimeout(() => {
  126.            xhr.open("GET", `/slider5?` + 0, true);
  127.            xhr.send();
  128.        }, 250);
  129.  
  130.    } else if (grabber.classList.contains('toggled')) {
  131.        grabber.style = 'background-color:#f55142';//Red
  132.        grabber.classList.remove('toggled');
  133.        effectorSpan[0].innerHTML = 'Closed'
  134.        setTimeout(() => {
  135.            xhr.open("GET", `/slider5?` + torqueSelection, true);
  136.            xhr.send();
  137.        }, 250);
  138.    };
  139.  
  140. });
  141.  
  142. let isToggled = false;
  143. programButton.addEventListener('click', function() {
  144.  isToggled = !isToggled;
  145.  if(isToggled == true) {
  146.    programButton.style.backgroundColor = 'rgb(69, 245, 66)'
  147.    xhr.open("GET", `/slider6?` + 1, true);
  148.    xhr.send();
  149.  } else {
  150.    programButton.style.backgroundColor = '#f55142'
  151.    xhr.open("GET", `/slider6?` + 0, true);
  152.    xhr.send();
  153.  }
  154. });
  155.  
  156.  </script>
  157. </html>
  158. """
  159.  
  160. cssString = """
  161.      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');
  162.  
  163. #slider-cont {
  164.  width: 20vw;
  165.  height: 100%;
  166.  margin-left: auto;
  167.  margin-right: auto;
  168.  display: flex;
  169.  flex-direction: column;
  170.  align-items: center;
  171.  justify-content: center;
  172.  
  173. }
  174.  
  175. .container {
  176.  display: flex;
  177.  flex-direction: row;
  178.  align-items: center;
  179.  justify-content: center;
  180.  width: 100%;
  181.  flex-wrap: wrap;
  182. }
  183.  
  184. .title-text {
  185.  font-family: 'Poppins', sans-serif;
  186.  font-size: 1.7vw;
  187.  font-weight: 700;
  188.  color: black;
  189.  text-align: center;
  190.  width: 100%;
  191.  
  192. }
  193.  
  194. .slider {
  195.  -webkit-appearance: none;
  196.  /* Override default CSS styles */
  197.  appearance: none;
  198.  width: 10vw;
  199.  /* Full-width */
  200.  height: 0.983vw;
  201.  /* Specified height */
  202.  background: #d3d3d3;
  203.  /* Grey background */
  204.  outline: none;
  205.  /* Remove outline */
  206.  opacity: 0.7;
  207.  /* Set transparency (for mouse-over effects on hover) */
  208.  -webkit-transition: .2s;
  209.  /* 0.2 seconds transition on hover */
  210.  transition: opacity .2s;
  211.  border-radius: 25px;
  212. }
  213.  
  214. .slider::-webkit-slider-thumb {
  215.  appearance: none;
  216.  -webkit-appearance: none;
  217.  width: 0.781vw;
  218.  height: 0.781vw;
  219.  border-radius: 50%;
  220.  background-color: black;
  221.  border: none;
  222. }
  223.  
  224. .slider::-moz-range-thumb {
  225.  width: 1.302vw;
  226.  height: 1.302vw;
  227.  border-radius: 100%;
  228.  background-color: black;
  229.  border: none;
  230. }
  231.  
  232. .toggle-button {
  233.  width: 2.5vw;
  234.  height: 2.5vw;
  235.  background-color: #f55142;
  236.  border-radius: 50%;
  237.  position: relative;
  238.  right: 1vw;
  239. }
  240.  
  241. .value-text {
  242.  width: 5vw;
  243.  height: 2vw;
  244.  background-color: #4b4b4b;
  245.  border-radius: 1vw;
  246.  font-family: 'Poppins', sans-serif;
  247.  font-size: 1.5vw;
  248.  font-weight: 700;
  249.  color: white;
  250.  text-align: center;
  251.  border: none;
  252.  position: relative;
  253.  left: 1vw;
  254. }
  255.  
  256. #effector-close {
  257.  width: 7vw;
  258.  height: 2vw;
  259.  background-color: rgb(69, 245, 66);
  260.  border-radius: 1vw;
  261.  font-family: 'Poppins', sans-serif;
  262.  font-size: 1.5vw;
  263.  font-weight: 700;
  264.  color: white;
  265.  text-align: center;
  266.  user-select: none;
  267.  position: relative;
  268.  right: 1.5vw;
  269. }
  270.  
  271. #torque-toggle {
  272.  width: 7vw;
  273.  height: 2vw;
  274.  background-color: #4b4b4b;
  275.  border-radius: 1vw;
  276.  font-family: 'Poppins', sans-serif;
  277.  font-size: 1.5vw;
  278.  font-weight: 700;
  279.  color: white;
  280.  text-align: center;
  281.  user-select: none;
  282.  position: relative;
  283.  left: 1.5vw;
  284. }
  285.  
  286. #program-button {
  287.  width: 9vw;
  288.  height: 4vw;
  289.  border-radius: 4vw;
  290.  background-color: #f55142;
  291.  text-align: center;
  292.  margin-top: 1.5vw;
  293. }
  294. #program-button:hover {
  295.  background-color: #e64c3e;
  296. }
  297. #program-button:active {
  298.  background-color: #b33b30;
  299. }
  300. #program-button > span {
  301.  font-family: 'Poppins', sans-serif;
  302.  font-size: 1.3vw;
  303.  font-weight: 700;
  304.  color: white;
  305.  width: 100%;
  306.  user-select: none;
  307.  position: relative;
  308.  top: 0.1vw;
  309. }
  310. @media only screen and (max-width: 600px) {
  311.  #slider-cont {
  312.    width: 100%;
  313.  }
  314.  
  315.  .title-text {
  316.    font-size: 4.7vw;
  317.  }
  318.  
  319.  .toggle-button {
  320.    width: 6.5vw;
  321.    height: 6.5vw;
  322.    position: relative;
  323.    right: 3vw;
  324.  }
  325.  
  326.  .slider {
  327.    width: 50vw;
  328.    height: 3.0vw;
  329.  }
  330.  
  331.  .slider::-webkit-slider-thumb {
  332.    width: 4.3vw;
  333.    height: 4.3vw;
  334.  }
  335.  
  336.  .slider::-moz-range-thumb {
  337.    width: 4.3vw;
  338.    height: 4.3vw;
  339.  }
  340.  
  341.  .value-text {
  342.    width: 11vw;
  343.    height: 5vw;
  344.    font-size: 4.5vw;
  345.    border-radius: 2.3vw;
  346.    position: relative;
  347.    left: 3vw;
  348.  }
  349.  
  350.  #effector-toggle {
  351.    position: relative;
  352.    right: 13.5vw;
  353.  }
  354.  
  355.  #effector-close {
  356.    width: 30vw;
  357.    height: 6vw;
  358.    border-radius: 5vw;
  359.    font-size: 4.5vw;
  360.  }
  361.  
  362.  #torque-toggle {
  363.    width: 12vw;
  364.    height: 6vw;
  365.    font-size: 4.5vw;
  366.    border-radius: 2.3vw;
  367.    position: relative;
  368.    left: 13.4vw;
  369.  }
  370.  #program-button {
  371.    width: 30vw;
  372.    height: 12vw;
  373.    border-radius: 12vw;
  374.    margin-top: 3vw;
  375.  }
  376.  #program-button > span {
  377.    font-size: 3.6vw;
  378.    font-weight: 700;
  379.    position: relative;
  380.    top: 0.4vw;
  381.  }
  382. }
  383. """
  384.  
  385.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!