为ESP8266 Arduino项目的HTML页面添加RGB取色交互元素

以下是基于你现有代码扩展的完整取色网页，已添加颜色预览框、滑块实时更新预览和RGB值发送按钮功能，完全适配你的ESP8266项目需求：

完整代码 #

HTML 部分 #

<h1>ESP8266 取色器</h1>

<div class="slidecontainer">
  <p>拖动滑块选择RGB颜色:</p>
  <a>R</a><input type="range" min="0" max="255" value="50" class="rSlider" id="rRange" oninput="updateColor()">
  <br><br>
  <a>G</a><input type="range" min="0" max="255" value="50" class="gSlider" id="gRange" oninput="updateColor()">
  <br><br>
  <a>B</a><input type="range" min="0" max="255" value="50" class="bSlider" id="bRange" oninput="updateColor()">
  <br><br>
  
  <!-- 颜色预览框 -->
  <div class="color-preview" id="colorPreview"></div>
  <br><br>
  
  <!-- 发送按钮 -->
  <button onclick="sendRGB()">发送RGB值到ESP8266</button>
</div>

CSS 部分 #

.slidecontainer {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.rSlider {
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  background: #FF0000;
  outline: 1;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.rSlider:hover {
  opacity: 1;
}

.rSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.rSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.gSlider {
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  background: #00FF00;
  outline: 1;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.gSlider:hover {
  opacity: 1;
}

.gSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.gSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.bSlider {
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  background: #0000FF;
  outline: 1;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.bSlider:hover {
  opacity: 1;
}

.bSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.bSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

/* 颜色预览框样式 */
.color-preview {
  width: 150px;
  height: 150px;
  border: 2px solid #333;
  background-color: rgb(50,50,50); /* 初始颜色对应滑块默认值 */
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #04AA6D;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #038a57;
}

JavaScript 部分 #

// 更新颜色预览框
function updateColor() {
  // 获取三个滑块的当前值
  const r = document.getElementById('rRange').value;
  const g = document.getElementById('gRange').value;
  const b = document.getElementById('bRange').value;
  
  // 生成RGB颜色字符串
  const rgbColor = `rgb(${r}, ${g}, ${b})`;
  
  // 更新预览框背景色
  document.getElementById('colorPreview').style.backgroundColor = rgbColor;
}

// 发送RGB值到ESP8266
function sendRGB() {
  const r = document.getElementById('rRange').value;
  const g = document.getElementById('gRange').value;
  const b = document.getElementById('bRange').value;
  
  // 这里替换为你的ESP8266 HTTP请求地址
  const espUrl = 'http://你的ESP8266IP地址/api/set-color';
  
  // 使用fetch发送请求（也可以用XMLHttpRequest）
  fetch(espUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `r=${r}&g=${g}&b=${b}`
  })
  .then(response => response.text())
  .then(data => {
    alert('颜色值发送成功：' + data);
  })
  .catch(error => {
    alert('发送失败：' + error);
  });
  
  // 测试阶段可先打印到控制台
  // console.log(`发送RGB值：R=${r}, G=${g}, B=${b}`);
}

// 页面加载时初始化预览框颜色
window.onload = updateColor;

关键功能说明 #

• 实时颜色预览：每个滑块绑定了oninput="updateColor()"事件，拖动滑块时立即获取当前RGB值并更新预览框背景色。
• 发送功能：点击按钮触发sendRGB()函数，将当前RGB值通过HTTP请求发送到ESP8266。需替换代码中的你的ESP8266IP地址为设备实际地址，并确保ESP8266端已实现对应的接收接口。
• 样式优化：新增预览框和按钮的基础样式，提升界面易用性。

内容的提问来源于stack exchange，提问作者E_Blue