Arduino 上的 Html(获取)表单 RGB 选择器-6ren

Arduino 上的 Html(获取)表单 RGB 选择器

转载作者：太空宇宙更新时间：2023-11-04 09:43:25

25

4

元素

我正在制作一个基于 Arduino 的 RGB-Ledstrip Controller 。我目前的硬件正在运行，但我希望通过托管在 Arduino 上的页面(理想情况下)使其可控。

问题

我的 Arduino 目前可以生成此 HTML，但是，如果用户有某种类型的反馈，它会很实用。

<!DOCTYPE html>
<html>
    <body>
       <form method="get" action="?">
          R <input type="range" name="R" value="0" min="0" max="255"></br>
          G <input type="range" name="G" value="0" min="0" max="255"></br>
          B <input type="range" name="B" value="0" min="0" max="255"></br>
          <div style="width:100px;height:100px; background:#f00;"></div>
          <input type="submit" value="Send color">
       </form>
    </body>
</html>

我正在寻找一种显示所选颜色的方法。理想情况下，它应该使正方形按照 slider 设置的方式着色。所以，如果我能得到当前的 slider 值并将它们作为背景颜色，我就会被设置。

但是，据我所知，这根本不是 HTML 的工作方式。

问题

我可以使用 CSS 获取当前 slider 值并将其应用为框的颜色吗？

我尝试过的

我最擅长的是:

<!DOCTYPE html>
<html>
    <body>
       <form method="get" action="?">
          R <input type="range" id="R" name="R" value="0" min="0" max="255"></br>
          G <input type="range" id="G" name="G" value="0" min="0" max="255"></br>
          B <input type="range" id="B" name="B" value="0" min="0" max="255"></br>
          <div style="width:100px;height:100px; background: rgb(attr(R), attr(G),attr(B));"></div>
          <input type="submit" value="Send color">
       </form>
    </body>
</html>

但它根本不解析“rgb()”函数。我想我很接近，但还没有。

请注意，Arduino 的内存非常有限，这就是为什么我尽量减少它的原因。它可以用 Javascript 轻松完成，使用精美的色轮等。但这可能会占用太多字节的内存。

最佳答案

由于在纯 HTML/CSS 中无法实现，我创建了一个 javascript，使用提供的 HTML 代替，因为这是我所知道的唯一解决方案。

<form method="get" action="?">
      R <input type="range" id="r" name="R" value="0" min="0" max="255">
      G <input type="range" id="g" name="G" value="0" min="0" max="255">
      B <input type="range" id="b" name="B" value="0" min="0" max="255">
      <div id="color" style="width:100px;height:100px;"></div>
      <input type="submit" value="Send color">
 </form>

当范围发生变化并相应地编辑预览框颜色时，脚本会简单地采用不同的范围值。

var inputs=document.getElementsByTagName('input'),
    i=0,
    color = document.getElementById('color');
do{
    switch(inputs[i].type){
    case 'range':
      inputs[i].addEventListener('change', onChange)
    break;
  }
}
while(inputs[++i])

function onChange(){
    var r = document.getElementById('r').value,
    g = document.getElementById('g').value,
    b = document.getElementById('b').value;

    color.style.background = "rgb("+r+","+g+","+b+")";
}

我创建了一个 fiddle供引用。

关于Arduino 上的 Html(获取)表单 RGB 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39699027/

25

4

0

文章推荐： ruby-on-rails - 没有权限。 Rails 无法完成安装

文章推荐： python - 如何清除 Bokeh 图中的选区？

文章推荐： linux - Linux 中的串行半双工通信

文章推荐： python - 在 y 轴上绘制特定值而不是增加数据帧的比例

arduino - 将文本从 arduino 发送到 arduino
我尝试使用键盘和 TVout 库制作一个简单的 arduino 计算机。由于库不兼容，我想使用 arduino mega 作为主板，使用 arduino uno 作为图形芯片。但它总是在电视上只显
arduino - 评估一个值是增加还是减少(arduino)
我正在尝试学习如何评估一个值是增加还是减少。在这种情况下，我使用从 0 - 14 映射的电位计。基本上我需要它来查看当前值，如果当前值增加，则打印一件事，如果该值减小，则打印其他内容。到目前为止，这
arduino - Arduino 上的模拟读数返回错误值
我曾尝试使用 Arduino IDE 中提供的标准草图测量模拟引脚值。然而，即使没有连接到引脚，它也会打印出随机值。有什么需要注意的吗？我有一个从 5V+ 连接到模拟引脚 0 的 FSR 传感器最
arduino - Arduino 如何与字符串一起打印整数？
我正在尝试在字符串旁边打印一个整数，但它并没有真正起作用并且我感到困惑。 int cmdSeries = 3; Serial.println("Series : " + cmdSeries);// T
arduino - Arduino 串行是否需要一个共同点
我有一个使用不同电源供电的设备，我正在尝试与其串行通信，它有 TX 和 RX 线、GND 和 2.7+ 线，它非常笨拙，所以它有自己的 PS。目前我得到了一些奇怪的结果，所以想知道是否需要在 Ard
arduino - BlackWidow和YellowJacket(Arduino)
使用Arduino Blackwidow或Yellowjacket有运气吗？在评论方面，我找不到关于它们的在线信息。我想连接到无线路由器，发送与已读取的电阻有关的小型POST请求，并以JSON格式接
arduino - 无法将代码上传到 Arduino
我的 Arduino Uno 已全部设置完毕并且运行良好。项目:Arduino 根据给定的命令控制 9v 电机。由于 Arduino 仅提供 5v，我通过晶体管为其添加了 9v 电池我决定将新代码
arduino - Arduino 的内存限制
我最近买了一个Arduino Uno ，现在我正在尝试一下。我有几个 18B20 传感器和一个连接到它的 ENC28J60 网络模块，然后我正在制作一个草图，以便我可以从浏览器连接到它，并以简单的网页
arduino - Arduino 串行是否需要一个共同点
我有一个使用不同电源供电的设备，我正在尝试与其串行通信，它有 TX 和 RX 线、GND 和 2.7+ 线，它非常笨拙，所以它有自己的 PS。目前我得到了一些奇怪的结果，所以想知道是否需要在 Ard
arduino - 将许多输入连接到 Arduino
已结束。这个问题是 off-topic .它目前不接受答案。想要改进这个问题？ Update the question所以它是on-topic堆栈溢出。关闭 9 年前。 Improve this
arduino - 如何区分 Arduino 中的有源和无源蜂鸣器？
我有一个 Arduino 入门套件，它带有主动和被动蜂鸣器。不幸的是，我似乎不知道哪个是哪个。我只知道一个比另一个长一点，我可以看到下面的绿色电路板。最佳答案有源蜂鸣器会自行发出声音。你基本上只是
arduino - Arduino 支持哪些 CPU？
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 9年前关闭。 Improve this q
arduino - 在 Arduino 中创建端点
我想从 Arduino 中的几个传感器获取一些数据，然后创建一些端点，以便我可以从 Web 应用程序中的传感器获取数据。那可能吗？最佳答案您可以使用 Firebase 或 Thingspeak 服
arduino - 如何将已经编写的库包含到 Arduino 中的自定义库中
我正在创建一个新库来一起控制键盘和 LCD。大多数代码似乎都可以编译，但是当它到达我定义 LiquidCristal 变量的行时，它说: 'LiquidCrystal' does not name a
arduino - Arduino AttachInterrupt()似乎运行了两次
我从最近刚开始使用arduino的我的一个学生那里得到了一些代码。他试图做一个中断，并且有点奏效。问题是它运行了两次(他调用了该函数)，所以 bool 值被重置了。我试图找到答案，但找不到任何答案
arduino - 为什么 Arduino 程序称为草图？
我最近开始了 Arduino 开发，在向 friend 和同事解释时，我收到的一个问题我没有答案，也想知道为什么微 Controller 运行的程序称为草图?这是从电气工程继承下来的惯例吗？我不熟悉这
arduino - 确定 Arduino 的板类型
如何在编译时确定 Arduino 的板类型(例如 Uno vs Nano)？不要与确定处理器类型混淆。正如我所看到的那样，例如#如果定义(__AVR_ATmega32U4__)... 同样，我想要一
arduino - arduino 中的多个选项卡/文件？
我已经看了很多，但还没有找到涵盖所有这些的好教程。因此，我需要将项目分成多个选项卡/ino 文件，只是为了使其更清晰。所以当你打开一个新标签后，我想问几个问题: 如果主项目文件(例如 main)还有
arduino - PubNub Arduino 订阅
您好，我正在使用 https://github.com/pubnub/arduino 中的 PubNubsubscriber 示例我能够接收消息，只要我收到消息，一切都运行正常，如果一段时间过去了，比
arduino - 通过串行(Arduino)拆分逗号分隔的字符串
所以我的 arduino 正在从串行接收一个字符串，由三个用逗号分隔的值组成，我试图将这些值分成三个不同的变量，其余的我可以做。字符串看起来像这样“1000,1.5,0.9”或“5000,20,0.

首页

博学

6Ren·AI

商城

Arduino 上的 Html(获取)表单 RGB 选择器