637浏览
查看: 637|回复: 5

[高级教程] 工作灯--让我安静工作一会好不好

[复制链接]
本帖最后由 创客达闻西 于 2021-8-31 13:25 编辑

“我现在正在工作啊,有什么事情我们等下在说好嘛?”
“啊啊啊,老妈,我正在写作业啊,你突然闯进来,我好不容易有了一点思路全被打断了”
“我打着游戏唱着歌,突然就被劫去洗厕所了”
“我今天心情这么差,这个大猪蹄子看不出来嘛,还不快来哄我”

不知你是否有这种体验,写作业时思路被突然打断,工作时被无端打扰,在创作时灵感被突然打乱。于是我就想做一个免打扰灯,提醒看到灯的人,里面的人正在工作。

那是一个风雨交加的晚上,我看见外面闪着七彩的光芒,我开始以为是我的意中人踩着七彩祥云来接我了。结果我仔细定睛一看,是一双紫色椰子鞋,他带着一个闪着七彩光芒的手套。吵着闹着要打什么响指之类的,我当时上去就是一个滑铲。把他手套上的宝石一颗一颗的拆下来了。大家来看看这些宝石值钱嘛,能不能在上海整个海景房。
FriAugust-202108274000..png
“想要我的宝石吗?如果想要的话,那就到下文去找吧,我全部都放在哪里了。”


功能:
1.内附磁体可贴在金属门及金属制品上。
2.可使用手机远程控制工作灯亮,告知其他人自己的工作状态
3.可当做表示自己心情的心情指示灯,如:红色代表今天很生气,蓝色代表今天很开心。(有女票的同志再也不用跪搓衣板了,有么有。)

一、准备材料

1.硬件材料:


FriAugust-202108276158..png



二、制作过程
1.将各个模块按下图进行连接
FriAugust-202108278545..png


2.安装开发板和库文件


三、了解并使用SIoT

3.1 了解SIoT
       SIoT“虚谷物联”项目的核心软件,是为了帮助中小学生理解物联网原理,并且能够基于物联网技术开发各种创意应用。



3.2 SIoT软件下载


       下载地址:http://mindplus.dfrobot.com.cn/siot
       根据自己电脑的系统,对应下载SIoT软件压缩包,例如Windows系统建议下载win32。

       如果想使用本应用,可使用我在GitHub上传的软件包。链接地址:点击链接

3.3SIoT软件准备
SIoT是一个绿色软件,将下载的压缩包解压并打开

FriAugust-202108271612..png


3.4 运行SIoT
      双击SIoT_win.exe,可以看到一个黑色的CMD窗口。
FriAugust-202108271797..png

3.5 获取电脑IP
  • 同时按下键盘上的“WIN”+“R”
  • 输入"cmd",点击确定,弹出小黑框
  • 在小黑框输入”ipconfig“,点击键盘”enter“,在小黑框中可以看到IP地址,如下图的IP为192.168.0.104.


FriAugust-202108279334..png

3.6 打开SIoT网页端

  •   打开电脑浏览器,在网址栏输入获得的IP地址加上“:8080”,如:192.168.0.104:8080
  •   登录SIoT,账号:siot      密码:dfrobot
FriAugust-202108273574..png

打不开怎么办?
       检查siot的小黑窗是否打开
       检查ip地址是否错误,如果有多个ip地址就一个一个尝试
       关闭网络防火墙

3.7 登录之后的页面展示
  • 如果看到此页面就完成了我们第一个小目标

FriAugust-202108273157..png

3.8 开机就自动打开这个程序
  • win+R 输入shell:startup
  • 创建SIoT1.2.exe的快捷方式
  • 粘贴快捷方式到开机启动项


FriAugust-202108273819..png


四、烧录代码远程点亮灯带

4.1 烧录代码
  1. #include <DFRobot_Iot.h>
  2. #include <FastLED.h>
  3. #define NUM_LEDS 7
  4. #define DATA_PIN D6
  5. #define CLOCK_PIN 13
  6. CRGB leds[7];
  7. void obloqMqttEventT0(String& message);
  8. const String topics[1] = {"DFRobot/Seifer"}; //项目名称/设备名称
  9. const MsgHandleCb msgHandles[1] = {obloqMqttEventT0};
  10. DFRobot_Iot myIot;
  11. void obloqMqttEventT0(String& message) {
  12.   if ((message==String("Red"))) { //判断发送信息是否为“Red”
  13.   fill_solid(leds, 7, CRGB::Red);    //灯带灯珠7颗,显示颜色为红色
  14.   FastLED.show();                      //刷新灯带颜色
  15.   }
  16.   else if ((message==String("off"))) {
  17.     FastLED.clear();                   //关闭灯带
  18.     FastLED.show();                     //刷新灯带颜色
  19.   }
  20.   else if ((message==String("Green"))) {
  21.   fill_solid(leds, 7, CRGB::Green);      //灯带灯珠7颗,显示颜色为绿色
  22.   FastLED.show();
  23.   }
  24.   else if ((message==String("Blue"))) {
  25.   fill_solid(leds, 7, CRGB::Blue);        //灯带灯珠7颗,显示颜色为蓝色
  26.   FastLED.show();
  27.   }
  28.   else if ((message==String("Yellow"))) {
  29.   fill_solid(leds, 7, CRGB::Yellow);     //灯带灯珠7颗,显示颜色为黄色
  30.   FastLED.show();
  31.   }
  32.   else if ((message==String("White"))) {
  33.   fill_solid(leds, 7, CRGB::White);    //灯带灯珠7颗,显示颜色为白色
  34.   FastLED.show();
  35.   }
  36.   else if ((message==String("Purple"))) {
  37.   fill_solid(leds, 7, CRGB::Purple);  //灯带灯珠7颗,显示颜色为紫色
  38.   FastLED.show();
  39.   }
  40. }
  41. void setup() {
  42.   Serial.begin(115200);
  43.   FastLED.addLeds<NEOPIXEL, DATA_PIN>(leds, NUM_LEDS);
  44.   myIot.setMqttCallback(msgHandles);
  45.   myIot.wifiConnect("dfrobotOffice", "dfrobot2011"); //WiFi账号:dfrobotOffice,WiFi密码:dfrobot2011
  46.   while (!myIot.wifiStatus()) {yield();}
  47.   myIot.init("192.168.0.104","siot","","dfrobot", topics, 1883); //IPv4地址:192.168.0.104,siot账号:siot,siot密码:dfrobot
  48.   myIot.connect();
  49.   Serial.println("发起连接");
  50.   while (!myIot.connected()) {yield();}
  51.   Serial.println("MQTT链接成功");
  52.   myIot.publish(topic_0, "hello");
  53. }
  54. void loop() {
  55. }
复制代码


4.2 在SIoT网页端点亮灯带

  • 登录SIoT网页端之后,点击DFRobot项S目中的查看设备列表
  • 在设备列表里找到Seifer,点击查看消息
  • 输入你想要执行的执行的指令,点击发送消息

FriAugust-202108273987..png

  • 灯带点亮成功
FriAugust-202108277858..png


五、制作手机端远程控制界面

5.1选择你喜欢的插...插图
FriAugust-202108277574..png


5.2 写一个简单的静态网页
  • 修改dingzhi.html的IPv4地址
FriAugust-202108272617..png
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  5.        <meta charset="utf-8" />
  6.        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  7.        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  8.        <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" >
  9.        <script src="js/jquery-2.1.4.min.js"></script>
  10.        <script src="js/jquery.cookie.min.js"></script>
  11. <link rel="stylesheet" href="css/style.css">
  12.        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  13.        <script src="js/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
  14.        <script src="js/vue.js"></script>
  15.        <!-- <script src="js/app.js"></script> -->
  16.        <title></title>
  17.        <meta name="description" />
  18. </head>
  19. <body>
  20.        <div class="container text-center">
  21.        <img width="300px" src="./ziyuan/DF.png" alt="">
  22.        </div>
  23.        <br>
  24.        <div class="container text-center">
  25.        <button type="button" id="Red" class="btn btn-danger btn-lg">红灯开</button>
  26.        <button type="button" id="Blue" class="btn btn-info btn-lg">蓝灯开</button>
  27.        </div>
  28.        <br>
  29.        <div class="container text-center">
  30.        <button type="button" id="White" class="btn btn-default btn-lg">白灯开</button>
  31.        <button type="button" id="Purple" class="btn btn-primary btn-lg">紫灯开</button>
  32.        </div>
  33.        <br>
  34.        <div class="container text-center">
  35.        <button type="button" id="Green" class="btn btn-success btn-lg">绿灯开</button>
  36.        <button type="button" id="Yellow" class="btn btn-warning btn-lg">黄灯开</button>
  37.        </div>
  38.        <br>
  39.                <div class="container text-center">
  40.        <button type="button" id="off" class="btn btn-danger btn-lg">关闭</button>
  41.        </div>
  42.       
  43.        <script>
  44.                $(function(){
  45.                        $('#Red').click(function(){
  46.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=Red&iname=siot&ipwd=dfrobot");
  47.                        });
  48.                        $('#off').click(function(){
  49.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=off&iname=siot&ipwd=dfrobot");
  50.                        });
  51.                        $('#Blue').click(function(){
  52.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=Blue&iname=siot&ipwd=dfrobot");
  53.                        });
  54.                        $('#White').click(function(){
  55.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=White&iname=siot&ipwd=dfrobot");
  56.                        });
  57.                        $('#Purple').click(function(){
  58.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=Purple&iname=siot&ipwd=dfrobot");
  59.                        });
  60.                        $('#Green').click(function(){
  61.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=Green&iname=siot&ipwd=dfrobot");
  62.                        });
  63.                        $('#Yellow').click(function(){
  64.                                $.get("http://192.168.0.104:8080/publish?topic=DFRobot/Seifer&msg=Yellow&iname=siot&ipwd=dfrobot");
  65.                        });
  66.                });
  67.        </script>
  68. </body>
  69. </html>
复制代码


  • 电脑网页端界面效果展示


5.3  打开手机浏览器输入网址

  1. http://192.168.0.104:8080/html/dingzhi.html
复制代码





5.4 用手机app生成器,把输入的网址生成一个手机app

  • 下载压缩包:
  • 安装到手机端


  • 创建app的名称


  • app中的界面展示
FriAugust-202108277782..png


  • 安装已经生成的工作灯app
FriAugust-202108271174..png

  • 打开我们刚才安装的工作灯app
  • 点击按钮,就可以看见灯的变化了
FriAugust-202108275263..png


  • Now go boldly and show your mood and work state




现在让我们采访拥有这个工作灯的小郑:主持人:“小郑你好,请问你看完这篇帖子你学会了嘛,感觉怎么样?”
小郑:“腰不酸了,腿不疼了,一口气能上六楼了”
主持人:“小郑你是不是串台了,我问你这个灯的感受”
小郑:“灯的感受啊,自从使用了这个灯啊。我跟你讲,平时在家工作效率蹭蹭的提升啊。在家打游戏也天天拿五杀了,我直接一口气上了个白银,你说厉不厉害嘛。特别是女票有了这个灯之后啊,我能随时知道今天是的天空是什么颜色的,搓衣板都扔了”
主持人:“屏幕前的你还在等什么,赶快行动起来吧”

hnyzcj  版主

发表于 2021-8-27 12:08:58

漂亮……

……
我说的是那个手机上的妹子,阿哈哈哈
……

作品也不错
回复

使用道具 举报

创客达闻西  初级技师
 楼主|

发表于 2021-8-27 13:27:37


帅啊.....

........
我说的是你回复的评论,啊哈哈哈哈

........
当然你本人也很帅
回复

使用道具 举报

hnyzcj  版主

发表于 2021-8-27 13:35:52


哈哈哈哈
回复

使用道具 举报

RRoy  NPC

发表于 2021-9-8 11:57:41

好详细的教程!
回复

使用道具 举报

创客达闻西  初级技师
 楼主|

发表于 2021-9-9 15:43:54

RRoy 发表于 2021-9-8 11:57
好详细的教程!

大佬的教程才是
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2021 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail