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小時內與您取得聯系。