怎样用HTML应用程序控制RGB LED
步骤1：电路和安装
所需的硬件仅是arduino和rgb带220欧姆电阻的led。只需按照图中的方式连接引脚即可。
从软件角度来看，您需要下载involt并将其安装为chrome打包应用（因此需要google chrome浏览器）：
下载involt（github链接）
打开chrome》设置》扩展程序，然后切换开发人员模式。
单击“加载未打包的扩展名。..”，然后选择www文件夹。
现在，您可以从列表中打开应用程序，使用chrome app launcher或在桌面上创建快捷方式。
启动应用程序后，您应该可以看到加载程序。从项目文件夹打开index.html在浏览器中将无法使用。
步骤2：arduino草图
由于本教程是最简单的方法，因此在arduino草图中（从involt/arduino文件夹中）唯一要做的就是将directmode更改为true 。此模式将直接将值从应用发送到引脚。对于如此简单的互动，可以使用它。请记住，在特定硬件上工作时，请勿使用此功能。
。..
//change only this to true inside sketch
boolean directmode = true;
。..
没有此模式，只需编写analogwrite（involtdigital ［index］），其中index是目标引脚号。值会自动更新。
现在不建议使用此方法。
直接模式不可用受支持并且在新版本中，involtdigital已更改为involtpin
第3步：involt html rangesliders
现在是时候进行html部件了，就像上一步一样简单。 involt为每个ui元素翻译css类，以使它们与硬件通信。您需要定义哪个ui元素与哪个引脚（或要发送哪个变量）以及基本参数（如value或它们的范围）进行通信。对于rgb滑块，我们需要在index.html中添加三个rangelider，其css类如下所示：
p9，p10，p11数字代表目标pwm引脚。 rangeslider的默认起始值为0，范围为0-255，因此在此示例中不必包括其他参数。要设置自定义属性，只需将它们添加为另一个css类。
要了解involt的工作原理，请查看入门页面。
现在打开应用程序，选择arduino端口并检查结果。您应该看到与所附图片相同的内容。对于基本用法，这是本教程的结尾。下一步是添加不需要工作的基于jquery的颜色显示。
步骤4：显示颜色
i希望我的应用显示所选颜色，因为……为什么不呢？ ：）为此，我添加了带有“ display-color”类的html div。
将基本css属性添加到core/framework.css文件中，或者将您自己的文件添加到index.html头中部分。
.display-color{
background： rgb（0，0，0）;
width： 100px;
height： 100px;
}
在用户界面事件时进入arduino的involt的值在involtpin ［］数组中（对于字符串，非数字值则在involtstring中）。 arduino草图中的involtpin ［］数组中的值相同。对于jquery，当rangeslider的值更改时，我将仅使用.css（）方法作为背景色。您需要将此脚本添加到自己的文件中，并将其包含在html头部分中。
$（document）.ready（function（） {
$（“.slider”）.on（{
slide： function（）{
//this is the tricky way to update the rgb value of background
var background = involtpin［11］+“，”+involtpin［10］+“，”+involtpin［9］;
$（“.display-color”）.css（‘background’， ‘rgb（’+background+‘）’）;
}
}）;
}）;
再次打开应用程序并查看结果。我对布局进行了小的视觉更改。最终的项目文件位于最后一步。
第5步：结束
您可以看到，本教程可以在10分钟内完成而无需任何操作
仅当您要在involt ui工具包之外创建自定义交互时，才需要有关jquery的知识。 framework是基于js/jquery的，因此在使用css和dom操作创建接口时非常灵活。
感谢您阅读我的教程。我希望你喜欢我的项目。查看我的其他教程或访问involt网站以获取更多信息。
随时向我提问@ ernestwarzocha@gmail.com
IC-MCU-ST系列集成电路L6562DTR 单片机 MCU 22+ SOIC8 原装正品
3D打印对生活有什么影响？
广汽埃安V 5G版全球首款5G量产车正式落地：首搭“华为芯”
FPGA布线拥塞主要原因及解决方法
中兴通讯顺利完成中国5G技术研发试验2.6GHz频段测试
怎样用HTML应用程序控制RGB LED
贴片电感和功率电感之间的区别是什么
拭目以待：即将掀起的2015年64位处理器大战
研究人员利用3D生物打印技术，打造人体微型器官
单片机的一生如同人类
柴油机故障诊断和状态监测系统的设计与实现
镭拓揭秘激光圆管切割机只能切圆形管材吗
格兰仕微波炉工作原理电路图分析
电力电子技术中的整流电路结构及特点分析
走近AR与VR技术 共同迎接下一轮技术热潮
高端VR头显StarVR one亮相 集成了Tobii眼动追踪系统
电动机保护控制器在矿用配电上的应用探讨
线性稳压器的关键技术及主要参数
16bit/24bit模数转换器AD7796/AD7797概述
HNS 2023 | 华为数通创新峰会亚太站嘉宾金句集锦
所需的硬件仅是arduino和rgb带220欧姆电阻的led。只需按照图中的方式连接引脚即可。
从软件角度来看，您需要下载involt并将其安装为chrome打包应用（因此需要google chrome浏览器）：
下载involt（github链接）
打开chrome》设置》扩展程序，然后切换开发人员模式。
单击“加载未打包的扩展名。..”，然后选择www文件夹。
现在，您可以从列表中打开应用程序，使用chrome app launcher或在桌面上创建快捷方式。
启动应用程序后，您应该可以看到加载程序。从项目文件夹打开index.html在浏览器中将无法使用。
步骤2：arduino草图
由于本教程是最简单的方法，因此在arduino草图中（从involt/arduino文件夹中）唯一要做的就是将directmode更改为true 。此模式将直接将值从应用发送到引脚。对于如此简单的互动，可以使用它。请记住，在特定硬件上工作时，请勿使用此功能。
。..
//change only this to true inside sketch
boolean directmode = true;
。..
没有此模式，只需编写analogwrite（involtdigital ［index］），其中index是目标引脚号。值会自动更新。
现在不建议使用此方法。
直接模式不可用受支持并且在新版本中，involtdigital已更改为involtpin
第3步：involt html rangesliders
现在是时候进行html部件了，就像上一步一样简单。 involt为每个ui元素翻译css类，以使它们与硬件通信。您需要定义哪个ui元素与哪个引脚（或要发送哪个变量）以及基本参数（如value或它们的范围）进行通信。对于rgb滑块，我们需要在index.html中添加三个rangelider，其css类如下所示：
p9，p10，p11数字代表目标pwm引脚。 rangeslider的默认起始值为0，范围为0-255，因此在此示例中不必包括其他参数。要设置自定义属性，只需将它们添加为另一个css类。
要了解involt的工作原理，请查看入门页面。
现在打开应用程序，选择arduino端口并检查结果。您应该看到与所附图片相同的内容。对于基本用法，这是本教程的结尾。下一步是添加不需要工作的基于jquery的颜色显示。
步骤4：显示颜色
i希望我的应用显示所选颜色，因为……为什么不呢？ ：）为此，我添加了带有“ display-color”类的html div。
将基本css属性添加到core/framework.css文件中，或者将您自己的文件添加到index.html头中部分。
.display-color{
background： rgb（0，0，0）;
width： 100px;
height： 100px;
}
在用户界面事件时进入arduino的involt的值在involtpin ［］数组中（对于字符串，非数字值则在involtstring中）。 arduino草图中的involtpin ［］数组中的值相同。对于jquery，当rangeslider的值更改时，我将仅使用.css（）方法作为背景色。您需要将此脚本添加到自己的文件中，并将其包含在html头部分中。
$（document）.ready（function（） {
$（“.slider”）.on（{
slide： function（）{
//this is the tricky way to update the rgb value of background
var background = involtpin［11］+“，”+involtpin［10］+“，”+involtpin［9］;
$（“.display-color”）.css（‘background’， ‘rgb（’+background+‘）’）;
}
}）;
}）;
再次打开应用程序并查看结果。我对布局进行了小的视觉更改。最终的项目文件位于最后一步。
第5步：结束
您可以看到，本教程可以在10分钟内完成而无需任何操作
仅当您要在involt ui工具包之外创建自定义交互时，才需要有关jquery的知识。 framework是基于js/jquery的，因此在使用css和dom操作创建接口时非常灵活。
感谢您阅读我的教程。我希望你喜欢我的项目。查看我的其他教程或访问involt网站以获取更多信息。
随时向我提问@ ernestwarzocha@gmail.com
IC-MCU-ST系列集成电路L6562DTR 单片机 MCU 22+ SOIC8 原装正品
3D打印对生活有什么影响？
广汽埃安V 5G版全球首款5G量产车正式落地：首搭“华为芯”
FPGA布线拥塞主要原因及解决方法
中兴通讯顺利完成中国5G技术研发试验2.6GHz频段测试
怎样用HTML应用程序控制RGB LED
贴片电感和功率电感之间的区别是什么
拭目以待：即将掀起的2015年64位处理器大战
研究人员利用3D生物打印技术，打造人体微型器官
单片机的一生如同人类
柴油机故障诊断和状态监测系统的设计与实现
镭拓揭秘激光圆管切割机只能切圆形管材吗
格兰仕微波炉工作原理电路图分析
电力电子技术中的整流电路结构及特点分析
走近AR与VR技术 共同迎接下一轮技术热潮
高端VR头显StarVR one亮相 集成了Tobii眼动追踪系统
电动机保护控制器在矿用配电上的应用探讨
线性稳压器的关键技术及主要参数
16bit/24bit模数转换器AD7796/AD7797概述
HNS 2023 | 华为数通创新峰会亚太站嘉宾金句集锦