ABB机器人二次开发：使用Web网页读取机器人系统信

ABB机器人二次开发：使用Web网页读取机器人系统信息的操作方法

述

对于ABB机器人进行远程监控，除了使用PC SDK二次开发后生成远程监控程序以外，还可以使用ABB机器人的OPC Service软件，但是使用这两种方法都需要机器人安装PC Interface系统选项，这势必造成机器人购买成本的提高，而且还不支持手机端远程访问。

除了以上两种方法以外，对于机器人控制器版本（Robotware）在6.0以上的，还可以通过Web网页对机器人进行远程监控，使用Web网页对机器人进行监控无需安装PC Interface系统选项，只需要连接上机器人控制器自带的以太网接口即可，方便快捷、节约成本，还支持手机端访问。本期，就来为大家介绍一下使用Web网页获取机器人系统信息的方法，为对ABB机器人二次开发感兴趣的小伙伴做一个入门。

Robotstudio软件：RobotStudio 6.08

网页开发软件：Microsoft Visual Studio Professional 2019

接口测试软件：Postman v7.27.0

网页浏览器：Google Chrome

接口测试

在RobotStudio软件中创建一个ABB机器人虚拟控制器，机器人型号可以随便选择，系统选项参数也可以随便选择，或直接保持默认。

打开Postman软件，然后点击左上角的“New”。在弹出的对话框中选择“Request”，创建新的请求接口。

在弹出的SAVE REQUEST对话框中Request name后输入请求名称，Select a collection or folder to save to下点击“Created Folder”按钮，创建一个接口集合，名称可以自定义，如RWS，最后点击下方的“Save to RWS”。

此时，创建的测试接口项目是空的，点击“Authorization”，为接口添加登录信息，详细设置信息如下：

登录方式（TYPE）：Basic Auth

用户名（Username）：Default User

密码（Password）：robotics

继续设置接口登录信息，详细设置信息如下：

登录方式（TYPE）：Digest Auth

用户名（Username）：Default User

密码（Password）：robotics

查看ABB机器人Robot Web Services的API文档，依次展开“Robot Web Services”→“RobotWare Services”→“System service”，点击其下的System Information，可以看到获取ABB机器人系统信息的Web接口的操作地址（URL）、操作方法（Method）等接口信息。

回到Postman软件中，按照ABB机器人Robot Web Services的API文档设置接口访问参数，接口操作方法选择为“GET”，在其后输入接口操作地址：http://127.0.0.1:80/rw/system。其中，http://127.0.0.1是Robotstudio软件中机器人虚拟控制器的默认IP地址，80是默认端口号，当然这里也可以使用http://localhost代替IP地址http://127.0.0.1:80；若是连接真实的控制器，那么IP地址应设置为真实ABB机器人控制IP地址，默认情况下ABB机器人控制器Service接口IP地址为http://192.168.125.1；rw/system是获取ABB机器人系统信息的Web接口的操作地址。设置完成后，点击“Send”，可以看到请求接口返回的机器人系统信息，默认显示格式为XML，可以将其切换为HTML显示格式，如下图所示。

完整的接口返回信息代码如下所示。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>system</title>
    <base href="http://127.0.0.1:80/rw/system/" />
</head>

<body>
    <div class="state"><a href="" rel="self"></a>
        <ul>
            <li class="sys-system-li" title="system"> <span class="name">IRB_120_3kg_0.58m</span>
                <span class="rwversion">6.08.0134</span>
                <span class="sysid">{C08D83E6-785C-421B-BC28-D69FF1F3E33C}</span>
                <span class="starttm">2020-06-25 T 16:13:32</span> <span class="rwversionname">6.08.00.00</span> </li>
            <li class="sys-options-li" title="options"> <a href="options" rel="self"></a>
                <ul>
                    <li class="sys-option-li" title="0"> <span class="option">RobotWare Base</span> </li>
                    <li class="sys-option-li" title="1"> <span class="option">Chinese</span> </li>
                    <li class="sys-option-li" title="2"> <span class="option">709-1 DeviceNet Master/Slave</span> </li>
                    <li class="sys-option-li" title="3"> <span class="option">616-1 PC Interface</span> </li>
                    <li class="sys-option-li" title="4"> <span class="option">608-1 World Zones</span> </li>
                    <li class="sys-option-li" title="5"> <span class="option">623-1 Multitasking</span> </li>
                    <li class="sys-option-li" title="6"> <span class="option">617-1 FlexPendant Interface</span> </li>
                    <li class="sys-option-li" title="7">
                        <span class="option">Drive System IRB 120/140/260/360/910SC/1200/1400/1520/1600/1660ID</span>
                    </li>
                    <li class="sys-option-li" title="8"> <span class="option">ADU-790A in position X3</span> </li>
                    <li class="sys-option-li" title="9"> <span class="option">ADU-790A in position Y3</span> </li>
                    <li class="sys-option-li" title="10"> <span class="option">ADU-790A in position Z3</span> </li>
                    <li class="sys-option-li" title="11"> <span class="option">Axis Calibration</span> </li>
                    <li class="sys-option-li" title="12"> <span class="option">IRB 120-3/0.6</span> </li>
                </ul>
            </li>
            <li class="sys-energy-li" title="energy"> <a href="energy" rel="self" /> </li>
            <li class="sys-license-li" title="license"> <a href="license" rel="self" /> </li>
        </ul>
    </div>
</body>

</html>

Web网页编写

获得了Web网页接口返回信息后，就可以将其转换为Web网页了。在Microsoft Visual Studio软件中创建Web网页项目，项目模板选择“ASP.NET Web应用程序（.NET Framework）”。

配置新项目中，可以设置项目名称、位置、解决方案名称、框架版本等内容。

创建新的ASP.NET Web应用程序中选择“空”，点击“创建”按钮。

项目创建完成后，在软件右侧“解决方案资源管理器”中，右击项目名称，然后依次选择“添加”→“新建项”，添加新项中选择“HTML页”。

HTML页添加完成后，参考Postman软件中测试的机器人系统信息获取接口返回的信息，将其转换为HTML网页获取机器人系统信息程序代码。

完整HTML网页获取机器人系统信息程序代码如下所示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>测试</title>
    <base xmlns="http://www.w3.org/1999/xhtml" />
    <!--<base href="http://localhost" />-->
    <base href="http://127.0.0.1:80"/>
</head>
<body>
    <h4>读取机器人系统信息</h4>
    <form id="state" method="get" action="rw/system">
        <input type="submit" value="点击读取" />
    </form>
</body>
</html>

当然，对于精通HTML网页编程的小伙伴，也可以使用记事本编写程序，并生成HTML网页，这里不再过多介绍。

Web网页运行测试

项目编译完成后，在项目根目录下可以找到编写的HTML网页文件HtmlPage1。

右击HTML网页文件HtmlPage1，打开方式选择为“Google Chrome”。

网页打开后，点击网页中的“点击读取”按钮，若是之前没有登录过机器人系统，则需要先登录机器人系统，用户名为Default User，密码为robotics，系统成功登录后即可获得机器人系统信息，测试效果如下方动态图所示。

真实机器人Web网页运行测试

对于真实的机器人需要将编写好的HTML网页文件加载到机器人控制器中，如将其保存到Home中的docs文件夹中，然后在Google Chrome网页地址中输入http://127.0.0.1/docs/ HtmlPage1.html，就可以打开读取机器人系统信息的网页了。当然IP地址需要根据实际设置情况自行设置，并且HTML网页文件中的IP地址也要与之对应一致。

The End

上一篇：Robotstudio软件：ABB机器人机器视觉位姿引导虚拟仿真

、语法：

<meta name="name" content="string">

二、参数解析：

1)name选项：Keywords(关键字)，description(网站内容描述)，author(作者)，robots(机器人向导)等等

2)http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。

3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。

1.添加对手机设备的支持

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">（禁止缩放）

2.兼容IE

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3.规定utf-8编码

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

4.让搜索引擎搜索到关键字

<meta name="Keywords" content="网页关键字">
<meta name="description" content="网页描述文字" />

5.设置双核浏览器的浏览模式

<meta name="renderer" content="webkit">
<meta name=“renderer” content=“webkit|ie-comp|ie-stand”>（分别为极速模式，兼容模式，以及IE模式）

6.产生特殊效果

< meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=n)" >(n的取值范围为0-23)

7、标注作者：

<meta name="author" content="二度空间">

8、控制页面缓冲，如不要页面缓冲的代码这样写：

<meta http-equiv="Cache-Control" CONTENT="no-cache">

9.让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写：

<meta http-equiv="refresh" content="10">

10.让一个页面过上一定的时间，自动转到另一个页面或者站点去，如：

< meta HTTP-EQUIV="refresh" content="6; url=http://hi.baidu.com/tesalo/" >

11.content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如：

面用canvas 做了电脑端和手机端，发现手机端签名时不够丝滑，重新修改下这块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>签名</title>
		<link href="./css/mui.css" rel="stylesheet" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            border: 1px solid black;
        }

    </style>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./data/webData.js"></script>
    <script src="js/jquery.min.js"></script>
	<script src="./js/mui.js"></script>
	<script type="text/javascript">
		mui.init()
	</script>
	<style >
	body, html { /* set size of body to full page and remove margins */
	    width: 100%;
	    height: 100%;
	    padding: 0;
	    margin: 0;
	}
	#div1 { /* set div to full width and height */
		width: 100%;
		height: auto;
	}

	 #canvas{
		 height: 300px;
		 width: auto;
	 }
	 </style>
</head>
<body>
<div id="div1">
		<canvas  style="border: 1px darkgray solid;">您当前浏览器不支持canvas，建议更换浏览器！</canvas>
</div>
<button class="mui-btn-blue"  style="float: right;" >保存签名</button>
<button class="mui-btn-danger" type="button" value="清空画布"  style="float: left;">清空签名</button>

</body>
<script type="text/javascript">
   var canvas=document.querySelector('canvas'),
       oBtn=document.querySelectorAll('button'),
       ctx=canvas.getContext('2d');
   var _x=0,
       _y=0,
       x=0,
       y=0;
   // 设置画布大小
   canvas.width=screen.width;
   canvas.height=300;
   // 开始绘制
   canvas.addEventListener('touchstart', function (e) {
     e.preventDefault();
     _x=e.touches[0].pageX,
     _y=e.touches[0].pageY;
     // 路径开始
     ctx.beginPath();
     ctx.moveTo(_x - canvas.offsetLeft, _y - canvas.offsetTop);
   
     // 路径移动
     this.addEventListener('touchmove', function (e) {
       x=e.touches[0].pageX,
       y=e.touches[0].pageY;
       ctx.lineTo(x - canvas.offsetLeft, y - canvas.offsetTop);
       ctx.stroke();
     });
   });
   // 导出图片
    var oImg=new Image();
   oBtn[0].onclick=function () {
    
	 oImg.id="image1";
     ctx.drawImage(oImg, 0, 0);
     oImg.src=canvas.toDataURL('image/png');
     document.body.appendChild(oImg);
     // var imgs=document.getElementById("imgs");
     // var images=canvas.toDataURL('image/png');
     // imgs.innerHTML=`<img id="image1" src='${images}'>`
	 uploadAutograph();
   }
   // 清空画布
   oBtn[1].onclick=function () {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
   }   
   
   function dataURLtoFile(dataurl, filename) {

        var arr=dataurl.split(','),
            mime=arr[0].match(/:(.*?);/)[1],
            bstr=atob(arr[1]),
            n=bstr.length,
            u8arr=new Uint8Array(n);

        while(n--){
            u8arr[n]=bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, {type:mime});
    }
    //上传签名
    function uploadAutograph(imgData) {
        let formData=new FormData();

        let imagesName=new Date().getUTCMinutes()+".png";
        let fileData=document.getElementById('image1');
        let fileOfBlob=dataURLtoFile(fileData.src,imagesName);

        formData.append("file",fileOfBlob);
        let url=sensorServer.getUploadFileUrl1();
        $.ajax({
            url:url,
            type:"post",
            data:formData,
            processData:false,
            contentType:false,
            success:function(data){
                console.log(JSON.stringify(data));
                if(data.msg=="操作成功"&&data.data!=null){
                    let uploadSuccessData=data.data;

                    if(uploadSuccessData!=null) {
                        let fileName=imagesName ; //;document.getElementById('file_1').files[0].name;
                        let serverUrl=uploadSuccessData.url;
                        let params={"fileUrl":serverUrl,"fileName":fileName};
                        let parm={"id":curInfo.id,"autographAttachmentId":uploadSuccessData.attachmentId};
                        let result=sensorServer.updateAccount(parm);//上传保存数据逻辑
                        if(result==1)
                        {
							 mui.toast('已保存！',{ duration:'long', type:'div' })
                        } else
                        {
                            mui.toast('保存失败！',{ duration:'long', type:'div' })
                        }
                    }else{
                        layer.msg("保存失败！");
                    }
                }else{
                    alert(JSON.stringify(data));
                    layer.msg("上传失败！");
                }
            },
            error:function(e){
                alert("错误！！");
            }
        });
    }

    function getQueryVariable(variable)
    {
        var query=window.location.search.substring(1);
        var vars=query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair=vars[i].split("=");
            if(pair[0]==variable){return pair[1];}
        }
        return(false);
    }
    var curInfo;

    $(function () {
		let loginUser=JSON.parse(localStorage.getItem("robotUser"));
		let accountId=loginUser.id;
        let pid=accountId; //getQueryVariable("id");
        var  accountInfo=sensorServer.getAccountInfoById({"id": parseInt(pid)});
        curInfo=accountInfo;
        if(curInfo.autographAttachmentUrl!=null&&curInfo.autographAttachmentUrl!=""){
            $("#imgOld")[0].src=curInfo.autographAttachmentUrl;
        }
    });
</script>
</html>

看下效果啊，更为丝滑了很多。这是电脑端模拟手机端的。

在线咨询

上一篇：Word文档里能插入在线视频，这个隐藏功能你知道吗？
下一篇：自定义vue2.0全局组件（上篇）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。