255 lines
7.1 KiB
Plaintext
255 lines
7.1 KiB
Plaintext
<!--关闭network proxy-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<script src="jquery-2.1.0.min.js"></script>
|
||
<script src="jquery.cookie.js"></script>
|
||
|
||
|
||
<script type="text/javascript" src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
|
||
<script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
|
||
<script type="text/javascript" src="canvas-gauges/js/gauge.min.js"></script>
|
||
<script type="text/javascript" src="Lu_Math_Driver.js"></script>
|
||
<script type="text/javascript" src="Lu_Display_Driver.js"></script>
|
||
<script type="text/javascript" src="Lu_HMI_CAN_Reader.js"></script>
|
||
<script type="text/javascript" type="text/javascript">
|
||
|
||
|
||
var ros = new ROSLIB.Ros({
|
||
url : 'ws://localhost:9090'
|
||
});
|
||
|
||
ros.on('connection', function() {
|
||
console.log('Connected to websocket server.');
|
||
});
|
||
|
||
ros.on('error', function(error) {
|
||
console.log('Error connecting to websocket server: ', error);
|
||
});
|
||
|
||
ros.on('close', function() {
|
||
console.log('Connection to websocket server closed.');
|
||
});
|
||
|
||
|
||
function changeImage()
|
||
{
|
||
element=document.getElementById('myimage')
|
||
if (element.src.match("bulbon"))
|
||
{
|
||
element.src="eg_bulboff.gif";
|
||
}
|
||
else
|
||
{
|
||
element.src="eg_bulbon.gif";
|
||
}
|
||
|
||
var value = Math.round(Math.random() * 100);
|
||
//gauge.value = value;
|
||
// Update the declarative chart...
|
||
//document.getElementById("gauge-a").setAttribute("data-value", value);
|
||
}
|
||
|
||
|
||
function talker1(canframeid,data0,data1,data2,data3,data4,data5,data6,data7){
|
||
var p0=Lu_StrToByte(data0);
|
||
var p1=Lu_StrToByte(data1);
|
||
var p2=Lu_StrToByte(data2);
|
||
var p3=Lu_StrToByte(data3);
|
||
var p4=Lu_StrToByte(data4);
|
||
var p5=Lu_StrToByte(data5);
|
||
var p6=Lu_StrToByte(data6);
|
||
var p7=Lu_StrToByte(data7);
|
||
/*
|
||
alert("talker1函数:"+canframeid+" "+data0+" "+data1+" "+data2+" "+data3+" "+data4+" "+data5+" "+data6+" "+data7+"\n"+ p0+" "+p1+" "+p2+" "+p3+" "+p4+" "+p5+" "+p6+" "+p7);
|
||
*/
|
||
var can_pub = new ROSLIB.Topic({
|
||
ros : ros,
|
||
name : '/js_can',
|
||
messageType : 'lu_ps20l_msgs/Msg_CANFrame'
|
||
});
|
||
|
||
var can_msg = new ROSLIB.Message({
|
||
header: {
|
||
stamp: {
|
||
secs: 0,
|
||
nsecs: 0
|
||
},
|
||
frame_id: "",
|
||
seq: 0
|
||
},
|
||
id:parseInt(canframeid),
|
||
is_rtr:false,
|
||
is_extended:false,
|
||
is_error:false,
|
||
dlc:8,
|
||
data:[p0,p1,p2,p3,p4,p5,p6,p7]
|
||
|
||
});
|
||
can_pub.publish(can_msg);
|
||
}
|
||
|
||
function talker2(id){
|
||
element = document.getElementById(id);
|
||
alert("talker2函数:"+element.value);
|
||
}
|
||
|
||
function listener(){
|
||
/*
|
||
var listener = new ROSLIB.Topic({
|
||
ros : ros,
|
||
name : '/chatter',
|
||
messageType : 'std_msgs/String'
|
||
});
|
||
|
||
listener.subscribe(function(message) {
|
||
//console.log('Received message on ' + listener.name + ': ' + message.data);
|
||
listener.unsubscribe();
|
||
});
|
||
*/
|
||
var can_sub = new ROSLIB.Topic({
|
||
ros : ros,
|
||
name : '/Topic_HMI_CAN_SendFrame',//'js_can',
|
||
messageType : 'lu_ps20l_msgs/Msg_CANFrame'
|
||
});
|
||
|
||
can_sub.subscribe(function(message){
|
||
|
||
var p = atob(message.data);
|
||
|
||
|
||
/*
|
||
var str= 'Received can message on ' + can_sub.name + ':\n 0x' + message.id.toString(16) +'\n'+message.is_rtr +'\n'+message.is_extended +'\n'+message.is_error+'\n'+message.dlc+'\n'
|
||
|
||
+'0x'+p.charCodeAt(0).toString(16)+' '
|
||
+'0x'+p.charCodeAt(1).toString(16)+' '
|
||
+'0x'+p.charCodeAt(2).toString(16)+' '
|
||
+'0x'+p.charCodeAt(3).toString(16)+' '
|
||
+'0x'+p.charCodeAt(4).toString(16)+' '
|
||
+'0x'+p.charCodeAt(5).toString(16)+' '
|
||
+'0x'+p.charCodeAt(6).toString(16)+' '
|
||
+'0x'+p.charCodeAt(7).toString(16)+'\n';
|
||
*/
|
||
//console.log(str);
|
||
|
||
//document.getElementById('test').innerText= str;
|
||
|
||
|
||
Lu_HMI_CAN_Reader_Handle(message.id,p.charCodeAt(0),p.charCodeAt(1),p.charCodeAt(2),p.charCodeAt(3),p.charCodeAt(4),p.charCodeAt(5),p.charCodeAt(6),p.charCodeAt(7));
|
||
|
||
Refresh();
|
||
can_sub.unsubscribe();
|
||
});
|
||
|
||
}
|
||
|
||
var increment = 0;
|
||
function Refresh(){
|
||
document.getElementById('AGV_ID').innerText= 'AGV_ID='+AGV_ID;
|
||
document.getElementById('Sys_Mode').innerText= 'Sys_Mode='+Sys_Mode;
|
||
document.getElementById('Throttle').innerText= 'Throttle='+Throttle;
|
||
document.getElementById('WarningCode').innerText= 'WarningCode='+WarningCode;
|
||
document.getElementById('Car_Global_rx').innerText= 'Car_Global_rx='+Car_Global_rx;
|
||
document.getElementById('Car_Global_ry').innerText= 'Car_Global_ry='+Car_Global_ry;
|
||
document.getElementById('Car_Global_rt').innerText= 'Car_Global_rt='+Car_Global_rt;
|
||
document.getElementById('StartNode').innerText= 'StartNode='+StartNode;
|
||
document.getElementById('EndNode').innerText= 'EndNode='+EndNode;
|
||
|
||
//gauge.value = Throttle;
|
||
// Update the declarative chart...
|
||
document.getElementById("gauge-a").setAttribute("data-value", Throttle);
|
||
|
||
increment++;
|
||
$.cookie("Car_Global_rt",increment);
|
||
//$.cookie("Car_Global_rt",Car_Global_rt);
|
||
|
||
}
|
||
|
||
var t2 = window.setInterval("listener()",30);
|
||
//var t3 = window.setInterval("Refresh()",100);
|
||
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<h1>Simple roslib Example 你好 欢迎使用AGV</h1>
|
||
<p>Check your Web Console for output.</p>
|
||
|
||
|
||
|
||
<div id='test'> </div>
|
||
<div id='AGV_ID'> </div>
|
||
<div id='Sys_Mode'> </div>
|
||
<div id='Throttle'> </div>
|
||
<div id='WarningCode'></div>
|
||
<div id='Car_Global_rx'></div>
|
||
<div id='Car_Global_ry'></div>
|
||
<div id='Car_Global_rt'></div>
|
||
<div id='StartNode'></div>
|
||
<div id='EndNode'></div>
|
||
|
||
<div class="wrapper">
|
||
<p>Declarative approach w/ data- attributes</p>
|
||
<canvas data-type="radial-gauge" id="gauge-a"
|
||
data-width="300"
|
||
data-height="300"
|
||
data-units="units"
|
||
data-value="0"
|
||
data-min-value="-4096"
|
||
data-start-angle="90"
|
||
data-ticks-angle="180"
|
||
data-value-box="false"
|
||
data-max-value="4095"
|
||
data-major-ticks="-4096,-3000,-2000,-1000,0,1000,2000,3000,4095"
|
||
data-minor-ticks="5"
|
||
data-stroke-ticks="true"
|
||
data-highlights='[
|
||
{"from": -1000, "to": 1000, "color": "rgba(200, 50, 50, .75)"}
|
||
]'
|
||
data-color-plate="#fff"
|
||
data-border-shadow-width="0"
|
||
data-borders="false"
|
||
data-needle-type="arrow"
|
||
data-needle-width="3"
|
||
data-needle-circle-size="10"
|
||
data-needle-circle-outer="true"
|
||
data-needle-circle-inner="false"
|
||
data-animation-duration="800"
|
||
data-animation-rule="linear"
|
||
></canvas>
|
||
<hr/>
|
||
<p>JS-based approach.</p>
|
||
<canvas id="gauge"></canvas>
|
||
<p><a href="https://canvas-gauges.com/">
|
||
https://canvas-gauges.com/</a></p>
|
||
</div>
|
||
|
||
<iframe src="Flight_Display/Test_Flight.html" frameborder="0" width="500" scrolling="Yes" height="300" leftmargin="0" topmargin="0"></iframe>
|
||
|
||
|
||
|
||
|
||
|
||
<form name=f1>
|
||
<p><input type=text name=canframeid></input></p>
|
||
<p><input type=text name=data0></input></p>
|
||
<p><input type=text name=data1></input></p>
|
||
<p><input type=text name=data2></input></p>
|
||
<p><input type=text name=data3></input></p>
|
||
<p><input type=text name=data4></input></p>
|
||
<p><input type=text name=data5></input></p>
|
||
<p><input type=text name=data6></input></p>
|
||
<p><input type=text name=data7></input></p>
|
||
<p><input type=button value=ok onclick=talker1(canframeid.value,data0.value,data1.value,data2.value,data3.value,data4.value,data5.value,data6.value,data7.value)></input></p>
|
||
</form>
|
||
<img id="myimage" onclick="changeImage()" src="eg_bulboff.gif">
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|