基于 Modbus 的工业数据采集、控制(part 2)

基本处理流程

服务器

parse_and_process(char * input)//input :post请求发送的正文
{
    ...
    // 请求 modbus 数据
    else if(strstr(input, "modbus_get"))
    {
        return handle_get(sock, input);
    }
    // 控制 modbus 设备
    else if(strstr(input, "modbus_set"))
    {
        return handle_set(sock, input);
    }
....
}

static int handle_get(int sock, const char *input)
{
    // 1.创建 key
    // 2.创建或打开共享内存
    // 3.映射
    // 4.读取共享内存中的数据
    // 5.发送
}

static int handle_set(int sock, const char *input)
{
    // 1.创建key
    // 2.创建或打开消息队列
    // 3.将 postman 中下发指令添加到消息队列
    // 4.发送
}

采集控制程序

// 采集传感器数据线程
void *info(void *arg)
{
    // 创建或打开共享内存、映射
    while(1)
    {
        // 读寄存器的数据
        // 写入共享内存
        sleep(1);
    }
}

// 控制设备线程
void *control(void *arg)
{
    // 创建或打开消息队列
    while(1)
    {
        // 读消息队列
        // 控制设备
    }
}

VsCode 开发环境

安装库“open in browser”

库安装完成后,编写 html 文件。
在编写文本位置右击 ——> open in other browser ——> 选择合适的浏览器,
即可在网页显示 html 标签内容。
基于 Modbus 的工业数据采集、控制(part 2)_第1张图片

Html 简介

HTML(Hyper Text Markup Language),中文译为“超文本标记语言”。是用来描述网页的一种语言。所谓超文本,是因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。
HTML 不是一种编程语言,而是一种标记语言(markup language)。
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

Html标签

标签格式

1、有尖括号包围的关键字,如:;
2、通常成对存在,如:;
3、上面的标签前面是开始标签,后面是结束标签。

标签分类

1、单标签:也称空标签 <标签名 /> 如:

2、双标签:成对存在 <标签名> 内容

常用标签

h1-h6 标题标签

格式: 标题文本

举例:

这是标题标签


这是标题标签


这是标题标签


这是标题标签


这是标题标签

这是标题标签

p 段落标签

格式:

文本内容


一个段落中会根据浏览器窗口的大小自动换行。

br 换行标签

格式:

div 标签

一个块级元素,可以把文档分割为独立的、不同的部分,可以在 div 中嵌套标签。
举例:


News headline 1


some text. some text. some text…



注:可以给 div 设置 class 或 id,通过选择器设置属性,则内部成员具有相同属性。

input 表单标签

格式:
基于 Modbus 的工业数据采集、控制(part 2)_第2张图片

当 type 为 text,表示文本输入框,用法如下:

当 type 为 radio,表示单选框,用法如下:

解释:name:控件名称,同一组单选框设置相同名称
value:必须要有,是当点击时会提交的数据
onclick:点击时会执行双引号中的处理函数
checked:默认选中,同一组中只设置一个即可

代码示例

DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>
      function fun(obj)
        {
          if(obj == 'man')
          {
            console.log("I am man!");
          }
          else{
            console.log("I am woman!");
          }
        }
      function get_info()
        {
          // 获取标签为usrname的标签,赋值给v
          var v = document.getElementsByName("usrname");
          // v[0].value="hello";
          var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
          var url="";

          xhr.open("post",url,true);

          xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200)//请求完成且成功
            {
              v[0].value = xhr.responseText;//响应正文
            }
          };
          xhr.send("modbus_get");//发送正文
        }
    script>
  head>

  <body>
    hello world!
    
    <br>
    你好
    <h1>一级标题h1>
    <div style="color: hotpink;background: ivory">
      <h2>二级标题h2>
      
      <p>
        HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言”。是用来描述网页的一种语言。
        所谓超文本,因为它可以加入图片、声音、动画、多媒体等内容,不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。
        HTML 不是一种编程语言,而是一种标记语言 (markup language)
        Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
      p>
    div>

    123456
    <br>
    学习新思想,争做新青年!
    <br>
    
    用户名:
    <input type="text" name="usrname" value="admin">
    刷新
    <input type="button" name="flash" onclick="get_info()">
    <br>
    
    男:
    <input type="radio" name="sex" id="man" checked="checked" onclick="fun(id)">
    女:
    <input type="radio" name="sex" id="woman" onclick="fun(id)">
  body>

html>

补充:当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
基于 Modbus 的工业数据采集、控制(part 2)_第3张图片

如果想要用多个文本框显示数据:

var response = xhr.responseText;	//获取响应数据
var v = response.split(',');			//用,拆分响应字符串
     // v[0]:表示第一个数据
     // v[1]: 表示第二个数据
     ....

你可能感兴趣的:(#,Modbus,网络,tcp/ip,https)