1312 lines
60 KiB
HTML
1312 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
|
||
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
||
|
||
<script src="jquery-2.1.0.min.js"></script>
|
||
<script src="jquery.cookie.js"></script>
|
||
<script type="text/javascript" src="Lu_Math_Driver.js"></script>
|
||
<script type="text/javascript" src="Lu_MySQL_Driver.js"></script>
|
||
<script type="text/javascript" src="paperjs-v0.12.15/docs/assets/js/paper.js"></script>
|
||
<script type="text/javascript" type="text/javascript">
|
||
var Car_Global_rx=0;
|
||
var Car_Global_ry=0;
|
||
var Car_Global_Theta=0;
|
||
|
||
var Ref_std_rx=0;
|
||
var Ref_std_ry=0;
|
||
var Ref_std_rt=0;
|
||
var languageIndex ='';
|
||
|
||
function Timer(){
|
||
Car_Global_rx=parseFloat($.cookie('Car_Global_rx'));
|
||
Car_Global_ry=parseFloat($.cookie('Car_Global_ry'));
|
||
Car_Global_Theta=parseFloat($.cookie('Car_Global_Theta'));
|
||
|
||
Ref_std_rx=parseFloat($.cookie('Ref_std_rx'));
|
||
Ref_std_ry=parseFloat($.cookie('Ref_std_ry'));
|
||
Ref_std_rt=parseFloat($.cookie('Ref_std_rt'));
|
||
//console.log(Car_Global_rx.toFixed(3)+" "+Car_Global_ry.toFixed(3)+" "+Car_Global_Theta.toFixed(3));
|
||
}
|
||
var T1 = window.setInterval("Timer()",100);
|
||
/////////////////////////////////////////////////////////////////
|
||
paper.install(window);
|
||
|
||
var sleep = function(time) {
|
||
var startTime = new Date().getTime() + parseInt(time, 10);
|
||
while(new Date().getTime() < startTime) {}
|
||
};
|
||
|
||
|
||
function client_request(str){
|
||
$('#output').html("");
|
||
window.parent.postMessage(
|
||
{
|
||
event_id: 'client_request',
|
||
data: {
|
||
v1: str
|
||
}
|
||
},
|
||
"*" //or "www.parentpage.com"
|
||
);
|
||
}
|
||
|
||
function receiveMessage(event){
|
||
//console.log(event.data);
|
||
switch(event.data.event_id){
|
||
case "client_response":{
|
||
var data=event.data.data;
|
||
var result=data.v1;
|
||
var ROS_String_Output=data.v2;
|
||
var Rec_HMI_String_Input=data.v3;
|
||
var Client_Request_Cmd=Rec_HMI_String_Input.split(':');
|
||
//console.log(data);
|
||
switch(Client_Request_Cmd[0]){
|
||
case "GetPathTable":{
|
||
Lu_Parse_PathTable(ROS_String_Output);
|
||
Get_PathTable_File_OK=true;
|
||
//console.log(PathTable_Line_Arr);
|
||
//document.getElementById('output').innerText=ROS_String_Output;
|
||
}
|
||
break;
|
||
case "GetNodePointManagerTable":{
|
||
//console.log("GetNodePointManagerTable"+ROS_String_Output);
|
||
Lu_Parse_NodePointManagerTable(ROS_String_Output);
|
||
//console.log(NodePointManagerTable_PathNode_Arr);
|
||
//document.getElementById('output').innerText=ROS_String_Output;
|
||
Get_NodePointManagerTable_File_OK=true;
|
||
}
|
||
break;
|
||
case "GetStationFloorIndexTable": {
|
||
//console.log("GetStationFloorIndexTable"+ROS_String_Output);
|
||
Lu_Parse_StationFloorIndexTable(ROS_String_Output);
|
||
Lu_Create_NodePoint_Map_With_Name();
|
||
Get_StationFloorIndexTable_File_OK=true;
|
||
}
|
||
break;
|
||
case "GetPointCloud":{
|
||
//console.log("GetPointCloud"+ROS_String_Output);
|
||
Lu_Parse_PointCloud(ROS_String_Output);
|
||
|
||
//console.log(PointCloud_Map);
|
||
Get_PointCloud_File_OK=true;
|
||
}break;
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
window.addEventListener("message", receiveMessage, false);
|
||
|
||
function client(str){
|
||
$('#output').html("");
|
||
var client_HMIString=new ROSLIB.Service({
|
||
ros:ros,
|
||
name:'/Service_HMIString',
|
||
serviceType:'lu_ps20l_msgs/Srv_HMIString'
|
||
});
|
||
|
||
var request = new ROSLIB.ServiceRequest({
|
||
HMI_String_Input:str
|
||
});
|
||
client_HMIString.callService(request,function(result) {
|
||
});
|
||
}
|
||
var Get_PathTable_File_OK=false;
|
||
var Get_NodePointManagerTable_File_OK=false;
|
||
var Get_StationFloorIndexTable_File_OK=false;
|
||
var Get_PointCloud_File_OK=false;
|
||
client_request("GetPathTable");
|
||
client_request("GetNodePointManagerTable");
|
||
client_request("GetStationFloorIndexTable");
|
||
client_request("GetPointCloud");
|
||
|
||
/////////////////////////////////////////////////////////////////////////////
|
||
function addEvent(obj,xEvent,fn) {
|
||
if(obj.attachEvent){
|
||
obj.attachEvent('on'+xEvent,fn);
|
||
}else{
|
||
obj.addEventListener(xEvent,fn,false);
|
||
}
|
||
}
|
||
/////////////////////////////////////////////////////////////////////////////
|
||
//var MouseDownPoint=new Point(0.0,0.0);
|
||
//var ScreenDrag=new Point(0.0,0.0);
|
||
//console.log("ScreenDrag:"+ScreenDrag);
|
||
//var ScreenPan=new Point(100.0,-100.0);
|
||
//var ScreenPan=new Point(100.0,-100.0);
|
||
//console.log("ScreenPan"+ScreenPan);
|
||
|
||
//var Zoom=1.0;
|
||
var ZoomMin=1e-4;
|
||
var ZoomMax=1e3;
|
||
var Resolution=20.0;
|
||
|
||
var Button_Vertical_FollowCar=false;
|
||
var Button_Vertical_FollowCar_Record=false;
|
||
|
||
var HMIMapInfo_Read_OK=false;
|
||
var HMIMapInfo_Record=decodeURIComponent($.cookie('HMIMapInfo_Record'));
|
||
|
||
const ScreenPanInitx=100.0;
|
||
const ScreenPanInity=300.0;
|
||
//console.log(ScreenPanInit);
|
||
var ZoomInit=1.0;
|
||
var ScreenPanRecord=new Point(ScreenPanInitx,ScreenPanInity);
|
||
var ZoomRecord=ZoomInit;
|
||
if(HMIMapInfo_Record!=""){
|
||
console.log("HMIMapInfo_Record:"+HMIMapInfo_Record);
|
||
var HMIMapInfo_arr=HMIMapInfo_Record.split(' ');
|
||
if(HMIMapInfo_arr[0]!="NaN")ScreenPanRecord.x=parseFloat(HMIMapInfo_arr[0]);
|
||
if(HMIMapInfo_arr[1]!="NaN")ScreenPanRecord.y=parseFloat(HMIMapInfo_arr[1]);
|
||
//ScreenDrag.x=parseFloat(HMIMapInfo_arr[2]);
|
||
//ScreenDrag.y=parseFloat(HMIMapInfo_arr[3]);
|
||
if(HMIMapInfo_arr[4]!="NaN")ZoomRecord=parseFloat(HMIMapInfo_arr[4]);
|
||
if(HMIMapInfo_arr[5]=="false")Button_Vertical_FollowCar_Record=false;
|
||
else Button_Vertical_FollowCar_Record=true;
|
||
|
||
HMIMapInfo_Read_OK=true;
|
||
}
|
||
else{
|
||
HMIMapInfo_Read_OK=true;
|
||
}
|
||
|
||
function Lu_Record_HMIMapInfo(CoordinateCanvasLine){
|
||
var HMIMapInfo=CoordinateCanvasLine.OriginCanvasPosition.x+" "+CoordinateCanvasLine.OriginCanvasPosition.y+" "+0.0+" "+0.0+" "+paper.view.zoom+" "+Button_Vertical_FollowCar;
|
||
//setCookie("HMIMapInfo",encodeURIComponent(HMIMapInfo),10000);
|
||
//setCookie("HMIMapInfo",encodeURIComponent(HMIMapInfo),86400000);
|
||
$.cookie("HMIMapInfo",encodeURIComponent(HMIMapInfo),{secure:true});
|
||
}
|
||
|
||
function Lu_Init_ButtonImage_Vertical_FollowCar(){
|
||
//Disable
|
||
if(Button_Vertical_FollowCar_Record){
|
||
document.getElementById("ButtonImage_Vertical_FollowCar").setAttribute("src","Led_Display/Button_Vertical_On.bmp");
|
||
}
|
||
else{
|
||
document.getElementById("ButtonImage_Vertical_FollowCar").setAttribute("src","Led_Display/Button_Vertical_Off.bmp");
|
||
}
|
||
Button_Vertical_FollowCar=Button_Vertical_FollowCar_Record;
|
||
}
|
||
/*
|
||
function Lu_GetPan(){
|
||
var obj = new Point(0.0,0.0);
|
||
obj.x=(ScreenPan.x+ScreenDrag.x);
|
||
obj.y=(ScreenPan.y+ScreenDrag.y);
|
||
return (obj);
|
||
}
|
||
|
||
function Lu_ModelVToCanvasV(lu_value){
|
||
return lu_value * Resolution * paper.view.zoom;
|
||
}
|
||
|
||
function Lu_ModelToCanvas(Model)
|
||
{
|
||
var canvas = document.getElementById('myCanvas');
|
||
var canvas_height=parseFloat(canvas.style.height);
|
||
var Pan=Lu_GetPan();
|
||
|
||
var x = Model.x * Resolution + Pan.x;
|
||
var y = canvas_height -Model.y + Pan.y;
|
||
//var x = Model.x * Resolution * paper.view.zoom + Pan.x;
|
||
//var y = canvas_height -Model.y * Resolution * paper.view.zoom + Pan.y;
|
||
var obj = new Object();
|
||
//console.log("Panx:"+Pan.x+" Pany:"+Pan.y);
|
||
//console.log( paper.view.center );
|
||
obj.x=x;//Math.floor(x);
|
||
obj.y=y;//Math.floor(y);
|
||
return obj;
|
||
}
|
||
|
||
function Lu_CanvasToModel(Canvas){
|
||
var canvas = document.getElementById('myCanvas');
|
||
var canvas_height=parseFloat(canvas.style.height);
|
||
var Pan=Lu_GetPan();
|
||
var x = Canvas.x - Pan.x;
|
||
var y = canvas_height - (Canvas.y - Pan.y);
|
||
|
||
var obj = new Object();
|
||
obj.x=x/ (Resolution);
|
||
obj.y=y/ (Resolution);
|
||
//obj.x=x/ (Resolution * paper.view.zoom);
|
||
//obj.y=y/ (Resolution * paper.view.zoom);
|
||
//console.log("x="+obj.x+" y="+obj.y);
|
||
return obj;
|
||
}
|
||
*/
|
||
function Lu_TransferModelToCanvasForCoordinateCanvas(Model,OriginCanvasInitPosition){
|
||
var canvas = document.getElementById('myCanvas');
|
||
var canvas_height=parseFloat(canvas.style.height);
|
||
//var Pan=Lu_GetPan();
|
||
|
||
var x = Model.x * Resolution + OriginCanvasInitPosition.x;
|
||
var y = canvas_height -Model.y * Resolution + OriginCanvasInitPosition.y;
|
||
var obj = new Object();
|
||
//console.log("Panx:"+Pan.x+" Pany:"+Pan.y);
|
||
//console.log( paper.view.center );
|
||
obj.x=x;//Math.floor(x);
|
||
obj.y=y;//Math.floor(y);
|
||
return obj;
|
||
}
|
||
function Lu_TransferModelToCanvasWithCoordinateCanvas(Model,CoordinateCanvasLine){
|
||
var canvas = document.getElementById('myCanvas');
|
||
// var canvas_height=parseFloat(canvas.style.height);
|
||
|
||
|
||
var x = Model.x * Resolution + CoordinateCanvasLine.OriginCanvasPosition.x;
|
||
var y = 0 -Model.y * Resolution + CoordinateCanvasLine.OriginCanvasPosition.y;
|
||
var obj = new Object();
|
||
//console.log("Panx:"+Pan.x+" Pany:"+Pan.y);
|
||
//console.log( paper.view.center );
|
||
obj.x=x;//Math.floor(x);
|
||
obj.y=y;//Math.floor(y);
|
||
return obj;
|
||
}
|
||
|
||
function Lu_Create_DebugCanvas(CanvasPosition,str,Color,Size,DebugCanvasArr){
|
||
var DebugCanvas=new PointText(CanvasPosition);
|
||
DebugCanvas.justification = 'center';
|
||
DebugCanvas.fillColor =Color;
|
||
DebugCanvas.content = str;
|
||
DebugCanvas.fontSize=Size;
|
||
DebugCanvasArr.push(DebugCanvas);
|
||
}
|
||
function Lu_Refresh_Debug_Canvas(DebugCanvasArr,CoordinateCanvasLine){
|
||
//console.log(CoordinateCanvasLine);
|
||
|
||
if(DebugCanvasArr.length>0)
|
||
{
|
||
var CarModelPosition = new Point(Car_Global_rx, Car_Global_ry);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(CarModelPosition,CoordinateCanvasLine);
|
||
|
||
CanvasPosition.y=CanvasPosition.y+20;
|
||
CanvasPosition.x=CanvasPosition.x+50;
|
||
DebugCanvasArr[0].content="x:"+Car_Global_rx.toFixed(3)+"m y:"+Car_Global_ry.toFixed(3)+"m tx:"+Car_Global_Theta.toFixed(3)+"°";
|
||
DebugCanvasArr[0].position=CanvasPosition;
|
||
}
|
||
|
||
}
|
||
|
||
function Lu_Create_CarModel(CarModelArr){
|
||
var CarModel=new Object();
|
||
CarModel.x_m=Car_Global_rx;
|
||
CarModel.y_m=Car_Global_ry;
|
||
CarModel.t_deg=Car_Global_Theta;
|
||
CarModelArr.push(CarModel);
|
||
}
|
||
|
||
function Lu_Create_RefModel(RefModelArr){
|
||
var RefModel=new Object();
|
||
RefModel.x_m=Ref_std_rx;
|
||
RefModel.y_m=Ref_std_ry;
|
||
RefModel.t_deg=Ref_std_rt;
|
||
RefModelArr.push(RefModel);
|
||
}
|
||
|
||
function Lu_Create_TextModel(ModelPosition,Str,Color,Size,TextModelArr){
|
||
var TextModel=new Object();
|
||
TextModel.ModelPosition=ModelPosition;
|
||
TextModel.Str=Str;
|
||
TextModel.Color=Color;
|
||
TextModel.Size=Size;
|
||
TextModelArr.push(TextModel);
|
||
}
|
||
|
||
function Lu_Create_CoordinateModelLine(modellength){
|
||
|
||
var OriginPoint=new Point(0.0,0.0);
|
||
var XPoint=new Point(modellength,0.0);
|
||
var YPoint=new Point(0.0,modellength);
|
||
|
||
var XModelText=new Object();
|
||
XModelText.ModelPosition=XPoint;
|
||
XModelText.Str="x";
|
||
XModelText.Color="red";
|
||
XModelText.Size=25;
|
||
|
||
var YModelText=new Object();
|
||
YModelText.ModelPosition=YPoint;
|
||
YModelText.Str="y";
|
||
YModelText.Color="green";
|
||
YModelText.Size=25;
|
||
|
||
var XModelLine=new Object();
|
||
XModelLine.ModelStart=OriginPoint;
|
||
XModelLine.ModelEnd=XPoint;
|
||
XModelLine.Color="red";
|
||
|
||
var YModelLine=new Object();
|
||
YModelLine.ModelStart=OriginPoint;
|
||
YModelLine.ModelEnd=YPoint;
|
||
YModelLine.Color="green";
|
||
|
||
var CoordinateModelLine=new Object();
|
||
CoordinateModelLine.XModelText=XModelText;
|
||
CoordinateModelLine.YModelText=YModelText;
|
||
CoordinateModelLine.XModelLine=XModelLine;
|
||
CoordinateModelLine.YModelLine=YModelLine;
|
||
return CoordinateModelLine;
|
||
}
|
||
|
||
function Lu_Create_PathModelLine(ModelStart,ModelEnd,Color,PathModelLineArr){
|
||
var PathModelLine=new Object();
|
||
PathModelLine.ModelStart=ModelStart;
|
||
PathModelLine.ModelEnd=ModelEnd;
|
||
PathModelLine.Color=Color;
|
||
PathModelLineArr.push(PathModelLine);
|
||
}
|
||
function Lu_Create_PathModelArc(from,to,through,Color,PathModelLineArr){
|
||
var PathModelArc=new Object();
|
||
PathModelArc.from=from;
|
||
PathModelArc.to=to;
|
||
PathModelArc.through=through;
|
||
PathModelArc.Color=Color;
|
||
PathModelLineArr.push(PathModelArc);
|
||
}
|
||
function Lu_Create_PathModelWayPoint(PathTable_WayPoint,Color,PathModelWayPointArr){
|
||
var PathModelWayPoint=new Object();
|
||
PathModelWayPoint.PathTable_WayPoint=PathTable_WayPoint;
|
||
PathModelWayPoint.Color=Color;
|
||
PathModelWayPointArr.push(PathModelWayPoint);
|
||
}
|
||
function Lu_Create_PathModelBezier(PathTable_Bezier,Color,PathModelBezierArr){
|
||
var PathModelBezier=new Object();
|
||
PathModelBezier.PathTable_Bezier=PathTable_Bezier;
|
||
PathModelBezier.Color=Color;
|
||
PathModelBezierArr.push(PathModelBezier);
|
||
}
|
||
function Lu_Create_PathModelOriginTurn(PathTable_OriginTurn,Color,PathModelOriginTurnArr){
|
||
var PathModelOriginTurn=new Object();
|
||
PathModelOriginTurn.PathTable_OriginTurn=PathTable_OriginTurn;
|
||
PathModelOriginTurn.Color=Color;
|
||
PathModelOriginTurnArr.push(PathModelOriginTurn);
|
||
//console.log(PathModelOriginTurn);
|
||
}
|
||
function Lu_Create_PathNodeModel(PathNode,Color,Size,PathNodeModelArr){
|
||
var PathNodeModel=new Object();
|
||
PathNodeModel.PathNode=PathNode;
|
||
PathNodeModel.Color=Color;
|
||
PathNodeModel.Size=Size;
|
||
PathNodeModelArr.push(PathNodeModel);
|
||
}
|
||
function Lu_Create_PointCloud(PointCloud,Color,Size,PointCloudModelArr){
|
||
var PointCloudModel=new Object();
|
||
PointCloudModel.PointCloud=PointCloud;
|
||
PointCloudModel.Color=Color;
|
||
PointCloudModel.Size=Size;
|
||
PointCloudModelArr.push(PointCloudModel);
|
||
}
|
||
|
||
|
||
|
||
function Lu_Draw_CarCanvasArr(CarModelArr,CarCanvasArr,CoordinateCanvasLine){
|
||
for(let i=0;i<CarModelArr.length;i++){
|
||
//var CarModel=CarModelArr[i];
|
||
var CarModelPosition=new Point(Car_Global_rx,Car_Global_ry);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(CarModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition=Lu_ModelToCanvas(CarModelPosition);
|
||
|
||
var Heading=Lu_GetNextPoint_By_xs_ys_dirdeg(Car_Global_rx,Car_Global_ry,Car_Global_Theta+90,1.0);
|
||
var CanvasHeading = Lu_TransferModelToCanvasWithCoordinateCanvas(Heading,CoordinateCanvasLine);
|
||
//var CanvasHeading=Lu_ModelToCanvas(Heading);
|
||
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 10,
|
||
strokeColor: 'red'
|
||
});
|
||
circle.position = CanvasPosition;
|
||
|
||
var path=new paper.Path();
|
||
path.moveTo(CanvasPosition);
|
||
path.lineTo(CanvasHeading);
|
||
path.strokeColor = "purple";
|
||
path.strokeWidth = 3;
|
||
|
||
var CarCanvas = new Object();
|
||
CarCanvas.circle=circle;
|
||
CarCanvas.path=path;
|
||
|
||
CarCanvasArr.push(CarCanvas);
|
||
}
|
||
}
|
||
|
||
function Lu_Draw_RefCanvasArr(RefModelArr,RefCanvasArr,CoordinateCanvasLine){
|
||
for(let i=0;i<RefModelArr.length;i++){
|
||
//var CarModel=CarModelArr[i];
|
||
var RefModelPosition=new Point(Ref_std_rx,Ref_std_ry);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(RefModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition=Lu_ModelToCanvas(CarModelPosition);
|
||
|
||
var Heading=Lu_GetNextPoint_By_xs_ys_dirdeg(Ref_std_rx,Ref_std_ry,Ref_std_rt+90,1.5);
|
||
var CanvasHeading = Lu_TransferModelToCanvasWithCoordinateCanvas(Heading,CoordinateCanvasLine);
|
||
//var CanvasHeading=Lu_ModelToCanvas(Heading);
|
||
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 15,
|
||
strokeColor: 'green'
|
||
});
|
||
circle.position = CanvasPosition;
|
||
|
||
var path=new paper.Path();
|
||
path.moveTo(CanvasPosition);
|
||
path.lineTo(CanvasHeading);
|
||
path.strokeColor = "green";
|
||
path.strokeWidth = 3;
|
||
|
||
var RefCanvas = new Object();
|
||
RefCanvas.circle=circle;
|
||
RefCanvas.path=path;
|
||
|
||
RefCanvasArr.push(RefCanvas);
|
||
}
|
||
}
|
||
|
||
|
||
function Lu_Refresh_CarCanvasArr(CarCanvasArr,CoordinateCanvasLine){
|
||
if(CarCanvasArr.length>0) {
|
||
var CarCanvas = CarCanvasArr[0];
|
||
var CarModelPosition = new Point(Car_Global_rx, Car_Global_ry);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(CarModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition = Lu_ModelToCanvas(CarModelPosition);
|
||
var Heading = Lu_GetNextPoint_By_xs_ys_dirdeg(Car_Global_rx, Car_Global_ry, Car_Global_Theta + 90, 1.0);
|
||
var CanvasHeading = Lu_TransferModelToCanvasWithCoordinateCanvas(Heading,CoordinateCanvasLine);
|
||
//var CanvasHeading = Lu_ModelToCanvas(Heading);
|
||
CarCanvas.circle.position = CanvasPosition;
|
||
CarCanvas.path.segments[0].point = CanvasPosition;
|
||
CarCanvas.path.segments[1].point = CanvasHeading;
|
||
//console.log(Car_Global_rx.toFixed(3)+" "+Car_Global_ry.toFixed(3)+" "+Car_Global_Theta.toFixed(3));
|
||
//console.log(CarCanvas.path.segments.length);
|
||
//console.log(CarCanvas.path.segments[0].point);
|
||
//console.log(CarCanvas.path.segments[1].point);
|
||
//console.log(CarCanvas.circle.position);
|
||
}
|
||
}
|
||
|
||
function Lu_Refresh_RefCanvasArr(RefCanvasArr,CoordinateCanvasLine){
|
||
if(RefCanvasArr.length>0) {
|
||
var RefCanvas = RefCanvasArr[0];
|
||
var RefModelPosition = new Point(Ref_std_rx, Ref_std_ry);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(RefModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition = Lu_ModelToCanvas(CarModelPosition);
|
||
var Heading = Lu_GetNextPoint_By_xs_ys_dirdeg(Ref_std_rx, Ref_std_ry, Ref_std_rt + 90, 1.5);
|
||
var CanvasHeading = Lu_TransferModelToCanvasWithCoordinateCanvas(Heading,CoordinateCanvasLine);
|
||
//var CanvasHeading = Lu_ModelToCanvas(Heading);
|
||
RefCanvas.circle.position = CanvasPosition;
|
||
RefCanvas.path.segments[0].point = CanvasPosition;
|
||
RefCanvas.path.segments[1].point = CanvasHeading;
|
||
}
|
||
}
|
||
|
||
|
||
function Lu_Draw_CoordinateCanvasLine(CoordinateModelLine,OriginCanvasInitPosition){
|
||
|
||
var XModelText=CoordinateModelLine.XModelText;
|
||
var YModelText=CoordinateModelLine.YModelText;
|
||
var XModelLine=CoordinateModelLine.XModelLine;
|
||
var YModelLine=CoordinateModelLine.YModelLine;
|
||
|
||
var XCanvasTextPosition=Lu_TransferModelToCanvasForCoordinateCanvas(XModelText.ModelPosition,OriginCanvasInitPosition);
|
||
//var XCanvasTextPosition=Lu_ModelToCanvas(XModelText.ModelPosition);
|
||
var XCanvasText=new PointText(new Point(XCanvasTextPosition.x,XCanvasTextPosition.y));
|
||
XCanvasText.justification = 'center';
|
||
XCanvasText.fillColor = XModelText.Color;
|
||
XCanvasText.content = XModelText.Str;
|
||
XCanvasText.fontSize=XModelText.Size;//'25px';
|
||
|
||
var YCanvasTextPosition=Lu_TransferModelToCanvasForCoordinateCanvas(YModelText.ModelPosition,OriginCanvasInitPosition);
|
||
//var YCanvasTextPosition=Lu_ModelToCanvas(YModelText.ModelPosition);
|
||
var YCanvasText=new PointText(new Point(YCanvasTextPosition.x,YCanvasTextPosition.y));
|
||
YCanvasText.justification = 'center';
|
||
YCanvasText.fillColor = YModelText.Color;
|
||
YCanvasText.content = YModelText.Str;
|
||
YCanvasText.fontSize=YModelText.Size;//'25px';
|
||
|
||
|
||
var XCanvasLine = new paper.Path();
|
||
var XCanvasLineStart=Lu_TransferModelToCanvasForCoordinateCanvas(XModelLine.ModelStart,OriginCanvasInitPosition);
|
||
var XCanvasLineEnd=Lu_TransferModelToCanvasForCoordinateCanvas(XModelLine.ModelEnd,OriginCanvasInitPosition);
|
||
//var XCanvasLineStart = Lu_ModelToCanvas(XModelLine.ModelStart);
|
||
//var XCanvasLineEnd = Lu_ModelToCanvas(XModelLine.ModelEnd);
|
||
XCanvasLine.strokeColor = XModelLine.Color;
|
||
XCanvasLine.moveTo(XCanvasLineStart);
|
||
XCanvasLine.lineTo(XCanvasLineEnd);
|
||
|
||
var YCanvasLine = new paper.Path();
|
||
var YCanvasLineStart=Lu_TransferModelToCanvasForCoordinateCanvas(YModelLine.ModelStart,OriginCanvasInitPosition);
|
||
var YCanvasLineEnd=Lu_TransferModelToCanvasForCoordinateCanvas(YModelLine.ModelEnd,OriginCanvasInitPosition);
|
||
//var YCanvasLineStart = Lu_ModelToCanvas(YModelLine.ModelStart);
|
||
//var YCanvasLineEnd = Lu_ModelToCanvas(YModelLine.ModelEnd);
|
||
YCanvasLine.strokeColor = YModelLine.Color;
|
||
YCanvasLine.moveTo(YCanvasLineStart);
|
||
YCanvasLine.lineTo(YCanvasLineEnd);
|
||
|
||
var CoordinateCanvasLine=new Object();
|
||
CoordinateCanvasLine.XCanvasText=XCanvasText;
|
||
CoordinateCanvasLine.YCanvasText=YCanvasText;
|
||
CoordinateCanvasLine.XCanvasLine=XCanvasLine;
|
||
CoordinateCanvasLine.YCanvasLine=YCanvasLine;
|
||
CoordinateCanvasLine.OriginCanvasPosition=XCanvasLineStart;
|
||
console.log(CoordinateCanvasLine.OriginCanvasPosition);
|
||
return CoordinateCanvasLine;
|
||
}
|
||
|
||
function Lu_Draw_TextCanvasArr(TextModelArr,TextCanvasArr,CoordinateCanvasLine){
|
||
for(let i=0;i<TextModelArr.length;i++){
|
||
var TextModel=TextModelArr[i];
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(TextModel.ModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition=Lu_ModelToCanvas(TextModel.ModelPosition);
|
||
var text=new PointText(new Point(CanvasPosition.x,CanvasPosition.y));
|
||
text.justification = 'center';
|
||
text.fillColor = TextModel.Color;
|
||
text.content = TextModel.Str;
|
||
text.fontSize=TextModel.Size;//'25px';
|
||
TextCanvasArr.push(text);
|
||
}
|
||
}
|
||
function Lu_Draw_PathCanvasLineArr(PathModelLineArr,PathCanvasLineArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PathModelLineArr.length;i++) {
|
||
var PathModelLine=PathModelLineArr[i];
|
||
var path = new paper.Path();
|
||
var CanvasStart = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelLine.ModelStart,CoordinateCanvasLine);
|
||
//var CanvasStart = Lu_ModelToCanvas(PathModelLine.ModelStart);
|
||
var CanvasEnd = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelLine.ModelEnd,CoordinateCanvasLine);
|
||
//var CanvasEnd = Lu_ModelToCanvas(PathModelLine.ModelEnd);
|
||
|
||
//var Lu_PathCanvasLine=new Object();
|
||
path.strokeColor = PathModelLine.Color;
|
||
path.moveTo(CanvasStart);
|
||
path.lineTo(CanvasEnd);
|
||
//Lu_PathCanvasLine.Path=path;
|
||
//Lu_PathCanvasLine.CanvasStart=CanvasStart;
|
||
//Lu_PathCanvasLine.CanvasEnd=CanvasEnd;
|
||
//PathCanvasLineArr.push(Lu_PathCanvasLine);
|
||
PathCanvasLineArr.push(path);
|
||
}
|
||
}
|
||
function Lu_Draw_PathCanvasArcArr(PathModelArcArr,PathCanvasArcArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PathModelArcArr.length;i++){
|
||
var PathModelArc=PathModelArcArr[i];
|
||
var path = new paper.Path();
|
||
|
||
var Canvasfrom = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelArc.from,CoordinateCanvasLine);
|
||
var Canvasto = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelArc.to,CoordinateCanvasLine);
|
||
var Canvasthrough = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelArc.through,CoordinateCanvasLine);
|
||
//var Canvasfrom=Lu_ModelToCanvas(PathModelArc.from);
|
||
//var Canvasto=Lu_ModelToCanvas(PathModelArc.to);
|
||
//var Canvasthrough=Lu_ModelToCanvas(PathModelArc.through);
|
||
|
||
var path = new paper.Path.Arc(Canvasfrom, Canvasthrough, Canvasto);
|
||
path.strokeColor = PathModelArc.Color;
|
||
|
||
PathCanvasArcArr.push(path);
|
||
}
|
||
}
|
||
function Lu_Draw_PathCanvasWayPointArr(PathModelWayPointArr,PathCanvasWayPointArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PathModelWayPointArr.length;i++){
|
||
var PathModelWayPoint=PathModelWayPointArr[i];
|
||
var PathCanvasWayPoint=new Array();
|
||
for(let j=0;j<PathModelWayPoint.PathTable_WayPoint.length;j++){
|
||
var Line=PathModelWayPoint.PathTable_WayPoint[j];
|
||
var path = new paper.Path();
|
||
var CanvasStart = Lu_TransferModelToCanvasWithCoordinateCanvas(Line.startpoint,CoordinateCanvasLine);
|
||
var CanvasEnd = Lu_TransferModelToCanvasWithCoordinateCanvas(Line.endpoint,CoordinateCanvasLine);
|
||
//var CanvasStart = Lu_ModelToCanvas(Line.startpoint);
|
||
//var CanvasEnd = Lu_ModelToCanvas(Line.endpoint);
|
||
path.strokeColor = PathModelWayPointArr[i].Color;
|
||
path.moveTo(CanvasStart);
|
||
path.lineTo(CanvasEnd);
|
||
PathCanvasWayPoint.push(path);
|
||
}
|
||
PathCanvasWayPointArr.push(PathCanvasWayPoint);
|
||
}
|
||
}
|
||
function Lu_Draw_PathCanvasBezierArr(PathModelBezierArr,PathCanvasBezierArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PathModelBezierArr.length;i++){
|
||
var PathModelBezier=PathModelBezierArr[i];
|
||
var PathCanvasBeizer=new Array();
|
||
for(let j=0;j<PathModelBezier.PathTable_Bezier.length;j++){
|
||
var Line=PathModelBezier.PathTable_Bezier[j];
|
||
//console.log(Line);
|
||
var path = new paper.Path();
|
||
var CanvasStart = Lu_TransferModelToCanvasWithCoordinateCanvas(Line.startpoint,CoordinateCanvasLine);
|
||
var CanvasEnd = Lu_TransferModelToCanvasWithCoordinateCanvas(Line.endpoint,CoordinateCanvasLine);
|
||
//var CanvasStart = Lu_ModelToCanvas(Line.startpoint);
|
||
//var CanvasEnd = Lu_ModelToCanvas(Line.endpoint);
|
||
path.strokeColor = PathModelBezierArr[i].Color;
|
||
path.moveTo(CanvasStart);
|
||
path.lineTo(CanvasEnd);
|
||
PathCanvasBeizer.push(path);
|
||
}
|
||
PathCanvasBezierArr.push(PathCanvasBeizer);
|
||
}
|
||
}
|
||
function Lu_Draw_PathCanvasOriginTurnArr(PathModelOriginTurnArr,PathCanvasOriginTurnArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PathModelOriginTurnArr.length;i++){
|
||
var PathModelOriginTurn=PathModelOriginTurnArr[i].PathTable_OriginTurn;
|
||
var Color=PathModelOriginTurnArr[i].Color;
|
||
//console.log(PathModelOriginTurn);
|
||
//console.log(PathModelOriginTurn);
|
||
var PathCanvasOriginTurn=new Object();
|
||
var Canvasfrom = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.frompoint,CoordinateCanvasLine);
|
||
var Canvasto = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.topoint,CoordinateCanvasLine);
|
||
var Canvasthrough = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.throughpoint,CoordinateCanvasLine);
|
||
//var Canvasfrom=Lu_ModelToCanvas(PathModelOriginTurn.frompoint);
|
||
//var Canvasto=Lu_ModelToCanvas(PathModelOriginTurn.topoint);
|
||
//var Canvasthrough=Lu_ModelToCanvas(PathModelOriginTurn.throughpoint);
|
||
|
||
var patharc = new paper.Path.Arc(Canvasfrom, Canvasthrough, Canvasto);
|
||
patharc.strokeColor = Color;
|
||
|
||
var pathlinefrom = new paper.Path();
|
||
var CanvasStartfrom = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.centerpoint,CoordinateCanvasLine);
|
||
var CanvasEndfrom = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.frompoint,CoordinateCanvasLine);
|
||
//var CanvasStartfrom = Lu_ModelToCanvas(PathModelOriginTurn.centerpoint);
|
||
//var CanvasEndfrom = Lu_ModelToCanvas(PathModelOriginTurn.frompoint);
|
||
pathlinefrom.strokeColor = Color;
|
||
pathlinefrom.moveTo(CanvasStartfrom);
|
||
pathlinefrom.lineTo(CanvasEndfrom);
|
||
|
||
var pathlineto = new paper.Path();
|
||
var CanvasStartto = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.centerpoint,CoordinateCanvasLine);
|
||
var CanvasEndto = Lu_TransferModelToCanvasWithCoordinateCanvas(PathModelOriginTurn.topoint,CoordinateCanvasLine);
|
||
//var CanvasStartto = Lu_ModelToCanvas(PathModelOriginTurn.centerpoint);
|
||
//var CanvasEndto = Lu_ModelToCanvas(PathModelOriginTurn.topoint);
|
||
pathlineto.strokeColor = Color;
|
||
pathlineto.moveTo(CanvasStartto);
|
||
pathlineto.lineTo(CanvasEndto);
|
||
|
||
PathCanvasOriginTurn.patharc=patharc;
|
||
PathCanvasOriginTurn.pathlinefrom=pathlinefrom;
|
||
PathCanvasOriginTurn.CanvasEndto=pathlineto;
|
||
|
||
PathCanvasOriginTurnArr.push(PathCanvasOriginTurn);
|
||
}
|
||
}
|
||
|
||
function Lu_Draw_PointCloudCanvasArr(PointCloudModelArr,PointCloudCanvasArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PointCloudModelArr.length;i++){
|
||
var PointCloudModel=PointCloudModelArr[i].PointCloud;
|
||
var Color=PointCloudModelArr[i].Color;
|
||
var CanvasSize=PointCloudModelArr[i].Size;
|
||
var PointCloudModelPosition=new Point(PointCloudModel.x,PointCloudModel.y);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(PointCloudModelPosition,CoordinateCanvasLine);
|
||
var circle = new Path.Circle({
|
||
center: [0, 0],
|
||
radius: 1,
|
||
strokeColor: Color
|
||
});
|
||
circle.position = CanvasPosition;
|
||
circle.fillColor="Color"
|
||
var PointCloudCanvas = new Object();
|
||
PointCloudCanvas.circle=circle;
|
||
PointCloudCanvasArr.push(PointCloudCanvas);
|
||
}
|
||
}
|
||
|
||
function Lu_Draw_PathNodeCanvasArr(PathNodeModelArr,PathNodeCanvasArr,CoordinateCanvasLine){
|
||
for(let i=0;i<PathNodeModelArr.length;i++){
|
||
var PathNodeModel=PathNodeModelArr[i].PathNode;
|
||
var Color=PathNodeModelArr[i].Color;
|
||
var CanvasSize=PathNodeModelArr[i].Size;
|
||
var NodeModelPosition=new Point(PathNodeModel.Node_x,PathNodeModel.Node_y);
|
||
var CanvasPosition = Lu_TransferModelToCanvasWithCoordinateCanvas(NodeModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition=Lu_ModelToCanvas(NodeModelPosition);
|
||
var Heading=Lu_GetNextPoint_By_xs_ys_dirdeg(PathNodeModel.Node_x,PathNodeModel.Node_y,PathNodeModel.Node_thetax+90,0.5);
|
||
var CanvasHeading = Lu_TransferModelToCanvasWithCoordinateCanvas(Heading,CoordinateCanvasLine);
|
||
//var CanvasHeading=Lu_ModelToCanvas(Heading);
|
||
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 5,
|
||
strokeColor: Color
|
||
});
|
||
circle.position = CanvasPosition;
|
||
|
||
var path=new paper.Path();
|
||
path.moveTo(CanvasPosition);
|
||
path.lineTo(CanvasHeading);
|
||
path.strokeColor = "orange";
|
||
path.strokeWidth = 1;
|
||
|
||
var text=new PointText(new Point(CanvasHeading.x,CanvasHeading.y+2));
|
||
text.justification = 'center';
|
||
text.fillColor = "purple";
|
||
text.content = PathNodeModel.NodeID+PathNodeModel.NodeName;
|
||
|
||
|
||
|
||
text.fontSize=CanvasSize;//'25px';
|
||
|
||
var PathNodeCanvas = new Object();
|
||
PathNodeCanvas.circle=circle;
|
||
PathNodeCanvas.path=path;
|
||
PathNodeCanvas.text=text;
|
||
|
||
PathNodeCanvasArr.push(PathNodeCanvas);
|
||
}
|
||
}
|
||
|
||
function Lu_ParallelMoveDraw_CoordinateCanvasLine(CoordinateCanvasLine,offset){
|
||
CoordinateCanvasLine.XCanvasText.position.x+=offset.x;
|
||
CoordinateCanvasLine.XCanvasText.position.y+=offset.y;
|
||
CoordinateCanvasLine.YCanvasText.position.x+=offset.x;
|
||
CoordinateCanvasLine.YCanvasText.position.y+=offset.y;
|
||
CoordinateCanvasLine.XCanvasLine.position.x+=offset.x;
|
||
CoordinateCanvasLine.XCanvasLine.position.y+=offset.y;
|
||
CoordinateCanvasLine.YCanvasLine.position.x+=offset.x;
|
||
CoordinateCanvasLine.YCanvasLine.position.y+=offset.y;
|
||
CoordinateCanvasLine.OriginCanvasPosition.x+=offset.x;
|
||
CoordinateCanvasLine.OriginCanvasPosition.y+=offset.y;
|
||
//console.log(CoordinateCanvasLine.OriginCanvasPosition);
|
||
}
|
||
function Lu_ParallelMoveDraw_TextCanvasArr(TextCanvasArr,offset){
|
||
for(let i=0;i<TextCanvasArr.length;i++){
|
||
var text=TextCanvasArr[i];
|
||
text.position.x+=offset.x;
|
||
text.position.y+=offset.y;
|
||
}
|
||
}
|
||
function Lu_ParallelMoveDraw_PathCanvasLineArr(PathCanvasLineArr,offset){
|
||
for(let i=0;i<PathCanvasLineArr.length;i++) {
|
||
var path=PathCanvasLineArr[i];
|
||
path.position.x+=offset.x;
|
||
path.position.y+=offset.y;
|
||
//console.log(path.position);
|
||
}
|
||
}
|
||
function Lu_ParallelMoveDraw_PathCanvasArcArr(PathCanvasArcArr,offset){
|
||
for(let i=0;i<PathCanvasArcArr.length;i++) {
|
||
var path=PathCanvasArcArr[i];
|
||
path.position.x+=offset.x;
|
||
path.position.y+=offset.y;
|
||
}
|
||
}
|
||
function Lu_ParallelMoveDraw_PathCanvasWayPointArr(PathCanvasWayPointArr,offset){
|
||
for(let i=0;i<PathCanvasWayPointArr.length;i++){
|
||
var PathCanvasWayPoint=PathCanvasWayPointArr[i];
|
||
for(let j=0;j<PathCanvasWayPoint.length;j++){
|
||
var path=PathCanvasWayPoint[j];
|
||
path.position.x+=offset.x;
|
||
path.position.y+=offset.y;
|
||
}
|
||
}
|
||
}
|
||
function Lu_ParallelMoveDraw_PathCanvasBezierArr(PathCanvasBezierArr,offset){
|
||
for(let i=0;i<PathCanvasBezierArr.length;i++){
|
||
var PathCanvasBezier=PathCanvasBezierArr[i];
|
||
for(let j=0;j<PathCanvasBezier.length;j++){
|
||
var path=PathCanvasBezier[j];
|
||
path.position.x+=offset.x;
|
||
path.position.y+=offset.y;
|
||
}
|
||
}
|
||
}
|
||
function Lu_ParallelMoveDraw_PathCanvasOriginTurnArr(PathCanvasOriginTurnArr,offset){
|
||
for(let i=0;i<PathCanvasOriginTurnArr.length;i++){
|
||
var PathCanvasOriginTurn=PathCanvasOriginTurnArr[i];
|
||
PathCanvasOriginTurn.patharc.position.x+=offset.x;
|
||
PathCanvasOriginTurn.patharc.position.y+=offset.y;
|
||
PathCanvasOriginTurn.pathlinefrom.position.x+=offset.x;
|
||
PathCanvasOriginTurn.pathlinefrom.position.y+=offset.y;
|
||
PathCanvasOriginTurn.CanvasEndto.position.x+=offset.x;
|
||
PathCanvasOriginTurn.CanvasEndto.position.y+=offset.y;
|
||
}
|
||
}
|
||
|
||
function Lu_ParallelMoveDraw_PathNodeCanavsArr(PathNodeCanvasArr,offset){
|
||
for(let i=0;i<PathNodeCanvasArr.length;i++){
|
||
var PathNodeCanvas=PathNodeCanvasArr[i];
|
||
PathNodeCanvas.circle.position.x+=offset.x;
|
||
PathNodeCanvas.circle.position.y+=offset.y;
|
||
PathNodeCanvas.path.position.x+=offset.x;
|
||
PathNodeCanvas.path.position.y+=offset.y;
|
||
PathNodeCanvas.text.position.x+=offset.x;
|
||
PathNodeCanvas.text.position.y+=offset.y;
|
||
}
|
||
}
|
||
function Lu_ParallelMoveDraw_PointCloudCanvasArr(PointCloudCanvasArr,offset){
|
||
for(let i=0;i<PointCloudCanvasArr.length;i++){
|
||
var PointCloudCanvas=PointCloudCanvasArr[i];
|
||
PointCloudCanvas.circle.position.x+=offset.x;
|
||
PointCloudCanvas.circle.position.y+=offset.y;
|
||
}
|
||
}
|
||
/*
|
||
function Lu_Draw_PathNode(PathNode,Color,nodearr,Size,ismodel){
|
||
var NodeModelPosition=new Point(PathNode.Node_x,PathNode.Node_y);
|
||
var CanvasPosition=Lu_ModelToCanvas(NodeModelPosition);
|
||
|
||
var Heading=Lu_GetNextPoint_By_xs_ys_dirdeg(PathNode.Node_x,PathNode.Node_y,PathNode.Node_thetax+90,0.1);
|
||
var CanvasHeading=Lu_ModelToCanvas(Heading);
|
||
|
||
if(Lu_Judge_Point_In_Canvas(CanvasPosition)==false && Lu_Judge_Point_In_Canvas(CanvasHeading)==false)return;
|
||
|
||
var CanvasSize;
|
||
if(ismodel){
|
||
CanvasSize=Lu_ModelVToCanvasV(Size);
|
||
}
|
||
else{
|
||
CanvasSize=Size*25;
|
||
}
|
||
|
||
if(CanvasSize<10)return;
|
||
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 5,
|
||
fillColor: Color
|
||
});
|
||
circle.position = CanvasPosition;
|
||
|
||
var path=new paper.Path();
|
||
path.moveTo(CanvasPosition);
|
||
path.lineTo(CanvasHeading);
|
||
path.strokeColor = "green";
|
||
path.strokeWidth = 5;
|
||
|
||
|
||
|
||
|
||
var text=new PointText(new Point(CanvasHeading.x+5,CanvasHeading.y-5));
|
||
text.justification = 'center';
|
||
text.fillColor = "green";
|
||
text.content = PathNode.NodeID;
|
||
text.fontSize=CanvasSize;//'25px';
|
||
|
||
var node = new Object();
|
||
node.circle=circle;
|
||
node.path=path;
|
||
node.text=text;
|
||
|
||
nodearr.push(node);
|
||
}
|
||
|
||
|
||
function Lu_Draw_OriginTurn(PathTable_OriginTurn,Color,patharr){
|
||
Lu_Draw_Arc(PathTable_OriginTurn.frompoint,PathTable_OriginTurn.topoint,PathTable_OriginTurn.throughpoint,Color,patharr);
|
||
Lu_Draw_Line(PathTable_OriginTurn.centerpoint,PathTable_OriginTurn.frompoint,Color,patharr);
|
||
Lu_Draw_Line(PathTable_OriginTurn.centerpoint,PathTable_OriginTurn.topoint,Color,patharr);
|
||
|
||
}
|
||
function Lu_Draw_Bezier(PathTable_Bezier,Color,patharr){
|
||
for(i=0;i<PathTable_Bezier.length;i++){
|
||
var Line=PathTable_Bezier[i];
|
||
Lu_Draw_Line(Line.startpoint,Line.endpoint,Color,patharr,2);
|
||
}
|
||
}
|
||
function Lu_Draw_Arc(from,to,through,Color,patharr,threshold=5){
|
||
var Canvasfrom=Lu_ModelToCanvas(from);
|
||
var Canvasto=Lu_ModelToCanvas(to);
|
||
var Canvasthrough=Lu_ModelToCanvas(through);
|
||
if(Lu_Judge_Point_In_Canvas(Canvasfrom)==false && Lu_Judge_Point_In_Canvas(Canvasthrough)==false && Lu_Judge_Point_In_Canvas(Canvasthrough)==false)return;
|
||
var dist=Lu_Get_Dist(Canvasfrom.x,Canvasfrom.y,Canvasto.x,Canvasto.y);
|
||
if(dist<=threshold)return;
|
||
var path = new Path.Arc(Canvasfrom, Canvasthrough, Canvasto);
|
||
path.strokeColor = Color;
|
||
|
||
patharr.push(path);
|
||
}
|
||
function Lu_Draw_Text(ModelPosition,str,Color,textarr,Size,ismodel){
|
||
var CanvasPosition=Lu_ModelToCanvas(ModelPosition);
|
||
var CanvasSize;
|
||
if(ismodel){
|
||
CanvasSize=Lu_ModelVToCanvasV(Size);
|
||
}
|
||
else{
|
||
CanvasSize=Size*25;
|
||
}
|
||
var text=new PointText(new Point(CanvasPosition.x,CanvasPosition.y));
|
||
text.justification = 'center';
|
||
text.fillColor = Color;
|
||
text.content = str;
|
||
text.fontSize=CanvasSize;//'25px';
|
||
textarr.push(text);
|
||
}
|
||
|
||
function Lu_Draw_Line(ModelStart,ModelEnd,Color,patharr,threshold=5){
|
||
var path=new paper.Path();
|
||
var CanvasStart=Lu_ModelToCanvas(ModelStart);
|
||
var CanvasEnd=Lu_ModelToCanvas(ModelEnd);
|
||
|
||
path.strokeColor = Color;
|
||
path.moveTo(CanvasStart);
|
||
path.lineTo(CanvasEnd);
|
||
patharr.push(path);
|
||
}
|
||
*/
|
||
var draw_sch=0;
|
||
var period_times=0;
|
||
window.onload = function() {
|
||
Lu_Init_Canvas();
|
||
//paper.view.zoom=Zoom;
|
||
//console.log("Zoom="+Zoom);
|
||
|
||
var CoordinateModelLine;
|
||
var CoordinateCanvasLine;
|
||
|
||
var TextModelArr=new Array();
|
||
var TextCanvasArr=new Array();
|
||
|
||
var PathModelLineArr=new Array();
|
||
var PathCanvasLineArr=new Array();
|
||
|
||
var PathModelArcArr=new Array();
|
||
var PathCanvasArcArr=new Array();
|
||
|
||
var PathModelBezierArr=new Array();
|
||
var PathCanvasBezierArr=new Array();
|
||
|
||
var PathModelWayPointArr=new Array();
|
||
var PathCanvasWayPointArr=new Array();
|
||
|
||
var PathModelOriginTurnArr=new Array();
|
||
var PathCanvasOriginTurnArr=new Array();
|
||
|
||
var PathNodeModelArr=new Array();
|
||
var PathNodeCanvasArr=new Array();
|
||
|
||
var PointCloudModelArr=new Array();
|
||
var PointCloudCanvasArr=new Array();
|
||
|
||
var CarModelArr=new Array();
|
||
var CarCanvasArr=new Array();
|
||
|
||
var RefModelArr=new Array();
|
||
var RefCanvasArr=new Array();
|
||
|
||
var DebugCanvasArr=new Array();
|
||
|
||
// var path = new Path.Rectangle([75, 75], [100, 100]);
|
||
// path.strokeColor = 'blue';
|
||
|
||
var Mouse_circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 10,
|
||
fillColor: 'green'
|
||
});
|
||
CoordinateModelLine=Lu_Create_CoordinateModelLine(2.0);
|
||
//Lu_Create_TextModel(new Point(2.0,0.0),"x","red",25,TextModelArr);
|
||
//Lu_Create_TextModel(new Point(0.0,2.0),"y","green",25,TextModelArr);
|
||
//Lu_Create_PathModelLine(new Point(0.0,0.0),new Point(2.0,0.0),"red",PathModelLineArr);
|
||
//Lu_Create_PathModelLine(new Point(0.0,0.0),new Point(0.0,2.0),"green",PathModelLineArr);
|
||
Lu_Create_RefModel(RefModelArr);
|
||
Lu_Create_CarModel(CarModelArr);
|
||
Lu_Create_DebugCanvas(new Point(50, 50),"Info1","red","15px",DebugCanvasArr);
|
||
//Lu_Draw_PathCanvasLineArr(PathModelLineArr,PathCanvasLineArr);
|
||
/*
|
||
Lu_Draw_Text(new Point(2.0,0.0),"x","red",textarr,1,false);
|
||
Lu_Draw_Line(new Point(0.0,0.0),new Point(2.0,0.0),"red",patharr);
|
||
Lu_Draw_Text(new Point(0.0,2.0),"y","green",textarr,1,false);
|
||
Lu_Draw_Line(new Point(0.0,0.0),new Point(0.0,2.0),"green",patharr);
|
||
*/
|
||
view.onFrame = function(event) {
|
||
//console.log(draw_sch);
|
||
if(draw_sch==0){
|
||
if(Get_PointCloud_File_OK && Get_StationFloorIndexTable_File_OK && Get_NodePointManagerTable_File_OK && Get_PathTable_File_OK){
|
||
draw_sch=1;
|
||
}
|
||
}
|
||
else if(draw_sch==1){
|
||
for(let j=0;j<PathTable_Line_Arr.length;j++){
|
||
var PathTable_Line=PathTable_Line_Arr[j];
|
||
//console.log(PathTable_Line);
|
||
Lu_Create_PathModelLine(PathTable_Line.start_point,PathTable_Line.end_point,"blue",PathModelLineArr);
|
||
}
|
||
for(let k=0;k<PathTable_Arc_Arr.length;k++){
|
||
var PathTable_Arc=PathTable_Arc_Arr[k];
|
||
Lu_Create_PathModelArc(PathTable_Arc.frompoint,PathTable_Arc.topoint,PathTable_Arc.throughpoint,"blue",PathModelArcArr);
|
||
}
|
||
for(let l=0;l<PathTable_Bezier_Arr.length;l++){
|
||
var PathTable_Bezier=PathTable_Bezier_Arr[l];
|
||
Lu_Create_PathModelBezier(PathTable_Bezier,"blue",PathModelBezierArr);
|
||
}
|
||
for(let l=0;l<PathTable_WayPoint_Arr.length;l++){
|
||
var PathTable_WayPoint=PathTable_WayPoint_Arr[l];
|
||
//console.log(PathTable_WayPoint);
|
||
Lu_Create_PathModelWayPoint(PathTable_WayPoint,"blue",PathModelWayPointArr);
|
||
}
|
||
for(let m=0;m<PathTable_OriginTurn_Arr.length;m++){
|
||
var PathTable_OriginTurn=PathTable_OriginTurn_Arr[m];
|
||
Lu_Create_PathModelOriginTurn(PathTable_OriginTurn,"blue",PathModelOriginTurnArr);
|
||
}
|
||
for(let n=0;n<NodePointManagerTable_PathNode_Arr.length;n++){
|
||
var PathNode=NodePointManagerTable_PathNode_Arr[n];
|
||
Lu_Create_PathNodeModel(PathNode,"orange",5,PathNodeModelArr);
|
||
}
|
||
for(let u=0;u<PointCloud_Arr.length;u++){
|
||
var p=PointCloud_Arr[u];
|
||
Lu_Create_PointCloud(p,"black",1,PointCloudModelArr);
|
||
//console.log(p);
|
||
}
|
||
|
||
draw_sch=2;
|
||
|
||
}
|
||
else if(draw_sch==2){
|
||
var canvas = document.getElementById('myCanvas');
|
||
var canvas_height=parseFloat(canvas.style.height);
|
||
|
||
CoordinateCanvasLine=Lu_Draw_CoordinateCanvasLine(CoordinateModelLine,new Point(ScreenPanRecord.x,ScreenPanRecord.y-canvas_height));
|
||
paper.view.zoom=ZoomRecord;
|
||
//CoordinateCanvasLine=Lu_Draw_CoordinateCanvasLine(CoordinateModelLine,new Point(100,-100));
|
||
Lu_Draw_RefCanvasArr(RefModelArr,RefCanvasArr,CoordinateCanvasLine);
|
||
Lu_Draw_CarCanvasArr(CarModelArr,CarCanvasArr,CoordinateCanvasLine);
|
||
Lu_Draw_TextCanvasArr(TextModelArr,TextCanvasArr,CoordinateCanvasLine);
|
||
Lu_Draw_PathCanvasLineArr(PathModelLineArr,PathCanvasLineArr,CoordinateCanvasLine);
|
||
Lu_Draw_PathCanvasArcArr(PathModelArcArr,PathCanvasArcArr,CoordinateCanvasLine);
|
||
Lu_Draw_PathCanvasBezierArr(PathModelBezierArr,PathCanvasBezierArr,CoordinateCanvasLine);
|
||
Lu_Draw_PathCanvasWayPointArr(PathModelWayPointArr,PathCanvasWayPointArr,CoordinateCanvasLine);
|
||
Lu_Draw_PathCanvasOriginTurnArr(PathModelOriginTurnArr,PathCanvasOriginTurnArr,CoordinateCanvasLine);
|
||
Lu_Draw_PathNodeCanvasArr(PathNodeModelArr,PathNodeCanvasArr,CoordinateCanvasLine);
|
||
Lu_Draw_PointCloudCanvasArr(PointCloudModelArr,PointCloudCanvasArr,CoordinateCanvasLine);
|
||
paper.project.view.update();
|
||
draw_sch=3;
|
||
}
|
||
else if(draw_sch==3){
|
||
if(HMIMapInfo_Read_OK){
|
||
Lu_Init_ButtonImage_Vertical_FollowCar();
|
||
draw_sch=4;
|
||
}
|
||
}
|
||
else if(draw_sch==4){
|
||
|
||
}
|
||
// path.rotate(3);
|
||
|
||
period_times=period_times+1;
|
||
if(draw_sch==4 && period_times>=5){
|
||
Lu_Refresh_RefCanvasArr(RefCanvasArr,CoordinateCanvasLine);
|
||
Lu_Refresh_CarCanvasArr(CarCanvasArr,CoordinateCanvasLine);
|
||
Lu_Refresh_Debug_Canvas(DebugCanvasArr,CoordinateCanvasLine);
|
||
|
||
if(Button_Vertical_FollowCar){
|
||
Lu_Draw_CanvasWithCarCenter();
|
||
}
|
||
|
||
period_times=0;
|
||
}
|
||
|
||
|
||
}
|
||
view.onMouseDown = function(event){
|
||
//MouseDownPoint=event.point;
|
||
//textarr_record=textarr;
|
||
}
|
||
view.onMouseDrag = function(event){
|
||
Mouse_circle.position = event.point;
|
||
//ScreenDrag.x+=event.delta.x;//(event.point.x-MouseDownPoint.x);
|
||
//ScreenDrag.y+=event.delta.y;//(event.point.y-MouseDownPoint.y);
|
||
//console.log(event.point+" "+MouseDownPoint+" "+ScreenDrag);
|
||
Lu_ParallelMoveDraw_CoordinateCanvasLine(CoordinateCanvasLine,event.delta);
|
||
Lu_ParallelMoveDraw_PathCanvasLineArr(PathCanvasLineArr,event.delta);
|
||
Lu_ParallelMoveDraw_PathCanvasArcArr(PathCanvasArcArr,event.delta);
|
||
Lu_ParallelMoveDraw_PathCanvasBezierArr(PathCanvasBezierArr,event.delta);
|
||
Lu_ParallelMoveDraw_PathCanvasWayPointArr(PathCanvasWayPointArr,event.delta);
|
||
Lu_ParallelMoveDraw_PathCanvasOriginTurnArr(PathCanvasOriginTurnArr,event.delta);
|
||
Lu_ParallelMoveDraw_PathNodeCanavsArr(PathNodeCanvasArr,event.delta);
|
||
Lu_ParallelMoveDraw_PointCloudCanvasArr(PointCloudCanvasArr,event.delta);
|
||
Lu_ParallelMoveDraw_TextCanvasArr(TextCanvasArr,event.delta);
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
paper.project.view.update();
|
||
}
|
||
view.onMouseUp = function(event){
|
||
//ScreenPan.x = ScreenPan.x+ScreenDrag.x;
|
||
//ScreenPan.y = ScreenPan.y+ScreenDrag.y;
|
||
//ScreenDrag.x=0;
|
||
//ScreenDrag.y=0;
|
||
}
|
||
|
||
//https://blog.csdn.net/u014205965/article/details/46045099/
|
||
//接着利用我们自己封装的函数给canvas绑定事件，
|
||
var canvas = document.getElementById('myCanvas');
|
||
addEvent(canvas,'mousewheel',onMouseWheel);
|
||
addEvent(canvas,'DOMMouseScroll',onMouseWheel);
|
||
// 当滚轮事件发生时，执行onMouseWheel这个函数
|
||
function onMouseWheel(ev) {
|
||
var ev = ev || window.event;
|
||
var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
|
||
down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
|
||
var delta = ev.wheelDelta?ev.wheelDelta:ev.detail*(-40);
|
||
if(down){
|
||
//console.log("wheeldown!"+delta);
|
||
}else{
|
||
//console.log("wheelup!"+delta);
|
||
}
|
||
//console.log(paper.view.zoom);
|
||
var ZoomDelta = 1.25 * Math.abs(delta) / 120.0;
|
||
|
||
if(delta<0){
|
||
paper.view.zoom=paper.view.zoom/ZoomDelta;
|
||
if(paper.view.zoom<=ZoomMin){
|
||
paper.view.zoom=ZoomMin;
|
||
//Zoom=paper.view.zoom;
|
||
}
|
||
}
|
||
else{
|
||
paper.view.zoom=paper.view.zoom*ZoomDelta;
|
||
if(paper.view.zoom>=ZoomMax){
|
||
paper.view.zoom=ZoomMax;
|
||
//Zoom=paper.view.zoom;
|
||
}
|
||
}
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
if(ev.preventDefault){/*FF 和 Chrome*/
|
||
ev.preventDefault();// 阻止默认事件
|
||
}
|
||
return false;
|
||
}
|
||
|
||
var Button_FindCar = document.getElementById('Button_FindCar');
|
||
var ButtonImage_Vertical_FollowCar= document.getElementById('ButtonImage_Vertical_FollowCar');
|
||
|
||
addEvent(Button_CanvasInit,'click',Lu_CanvasInit);
|
||
addEvent(Button_FindCar,'click',Lu_FindCar);
|
||
addEvent(Button_ZoomIn,'click',Lu_ZoomIn);
|
||
addEvent(Button_ZoomOut,'click',Lu_ZoomOut);
|
||
addEvent(ButtonImage_Vertical_FollowCar,'click',Lu_FollowCar);
|
||
|
||
function Lu_Draw_CanvasWithCarCenter(){
|
||
var CarModelPosition=new Point(Car_Global_rx,Car_Global_ry);
|
||
Lu_Draw_CanvasWithPosCenter(CarModelPosition);
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
}
|
||
|
||
function Lu_Draw_CanvasWithPosCenter(ModelPosition){
|
||
var CanvasPosition=Lu_TransferModelToCanvasWithCoordinateCanvas(ModelPosition,CoordinateCanvasLine);
|
||
//var CanvasPosition=Lu_ModelToCanvas(ModelPosition);
|
||
var canvas = document.getElementById('myCanvas');
|
||
var canvas_width=parseFloat(canvas.style.width);
|
||
var canvas_height=parseFloat(canvas.style.height);
|
||
|
||
var offset=new Point(canvas_width/2.0-CanvasPosition.x,canvas_height/2.0-CanvasPosition.y);
|
||
|
||
//ScreenPan.x =ScreenPan.x + offset.x;
|
||
//ScreenPan.y =ScreenPan.y + offset.y;
|
||
|
||
//console.log(ScreenPan);
|
||
//ScreenDrag=new Point(0.0,0.0);
|
||
Lu_ParallelMoveDraw_CoordinateCanvasLine(CoordinateCanvasLine,offset)
|
||
Lu_ParallelMoveDraw_PathCanvasLineArr(PathCanvasLineArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasArcArr(PathCanvasArcArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasBezierArr(PathCanvasBezierArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasWayPointArr(PathCanvasWayPointArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasOriginTurnArr(PathCanvasOriginTurnArr,offset);
|
||
Lu_ParallelMoveDraw_PathNodeCanavsArr(PathNodeCanvasArr,offset);
|
||
Lu_ParallelMoveDraw_PointCloudCanvasArr(PointCloudCanvasArr,offset);
|
||
Lu_ParallelMoveDraw_TextCanvasArr(TextCanvasArr,offset);
|
||
}
|
||
|
||
function Lu_CanvasInit(ev){
|
||
console.log("CanvasInit "+ScreenPanInitx+" "+ScreenPanInity+" "+ZoomInit);
|
||
|
||
var offset=new Point(0.0,0.0);
|
||
offset.x=ScreenPanInitx-CoordinateCanvasLine.OriginCanvasPosition.x;
|
||
offset.y=ScreenPanInity-CoordinateCanvasLine.OriginCanvasPosition.y;
|
||
paper.view.zoom=ZoomInit;
|
||
Lu_ParallelMoveDraw_CoordinateCanvasLine(CoordinateCanvasLine,offset)
|
||
Lu_ParallelMoveDraw_PathCanvasLineArr(PathCanvasLineArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasArcArr(PathCanvasArcArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasBezierArr(PathCanvasBezierArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasWayPointArr(PathCanvasWayPointArr,offset);
|
||
Lu_ParallelMoveDraw_PathCanvasOriginTurnArr(PathCanvasOriginTurnArr,offset);
|
||
Lu_ParallelMoveDraw_PathNodeCanavsArr(PathNodeCanvasArr,offset);
|
||
Lu_ParallelMoveDraw_PointCloudCanvasArr(PointCloudCanvasArr,offset);
|
||
Lu_ParallelMoveDraw_TextCanvasArr(TextCanvasArr,offset);
|
||
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
}
|
||
|
||
function Lu_FindCar(ev){
|
||
console.log("Lu_FindCar");
|
||
Lu_Draw_CanvasWithCarCenter();
|
||
}
|
||
|
||
function Lu_ZoomIn(ev){
|
||
var ZoomDelta = 1.25;
|
||
paper.view.zoom=paper.view.zoom/ZoomDelta;
|
||
if(paper.view.zoom<=ZoomMin){
|
||
paper.view.zoom=ZoomMin;
|
||
}
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
}
|
||
|
||
function Lu_ZoomOut(ev){
|
||
var ZoomDelta = 1.25;
|
||
paper.view.zoom=paper.view.zoom*ZoomDelta;
|
||
if(paper.view.zoom>=ZoomMax){
|
||
paper.view.zoom=ZoomMax;
|
||
}
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
}
|
||
|
||
function Lu_FollowCar(ev){
|
||
if(Button_Vertical_FollowCar==false){
|
||
Button_Vertical_FollowCar=true;
|
||
document.getElementById("ButtonImage_Vertical_FollowCar").setAttribute("src","Led_Display/Button_Vertical_On.bmp");
|
||
}
|
||
else{
|
||
Button_Vertical_FollowCar=false;
|
||
document.getElementById("ButtonImage_Vertical_FollowCar").setAttribute("src","Led_Display/Button_Vertical_Off.bmp");
|
||
}
|
||
Lu_Record_HMIMapInfo(CoordinateCanvasLine);
|
||
}
|
||
}
|
||
|
||
function Lu_Init_Canvas(){
|
||
var canvas = document.getElementById('myCanvas');
|
||
paper.setup(canvas);
|
||
var ctx = canvas.getContext('2d');
|
||
//构建数学平面直角坐标系
|
||
var canvas_width=canvas.width;
|
||
var canvas_height=canvas.height;
|
||
console.log("Height:"+ canvas_height);
|
||
console.log("Width:"+ canvas_width);
|
||
}
|
||
window.onresize = () => {
|
||
let width = document.body.clientWidth*0.95;
|
||
let height = document.body.clientHeight*0.7;
|
||
console.log(`body宽度：${document.body.clientWidth},,,,${width}`);
|
||
console.log(`body高度：${document.body.clientHeight},,,,${height}`);
|
||
var canvas = document.getElementById('myCanvas');
|
||
canvas.style.width = width;
|
||
canvas.style.width = height;
|
||
};
|
||
|
||
</script>
|
||
<title>Title</title>
|
||
</head>
|
||
<body>
|
||
<div class="top">
|
||
<img id="ButtonImage_Vertical_FollowCar" src="Led_Display/Button_Vertical_Off.bmp"/>
|
||
<input type=button class="btn" id="Button_CanvasInit" data-i18n-value="map.canvasInit" value="初始化" style="width:10%;height:50px;background:#FD4F00FF"></input>
|
||
<input type=button class="btn" id="Button_FindCar" data-i18n-value="map.findCar" value="车辆位置" style="width:10%;height:50px;background:#FD4F00FF"></input>
|
||
<input type=button class="btn" id="Button_ZoomIn" data-i18n-value="map.zoomIn" value="缩小" style="width:10%;height:50px;background:#FD4F00FF"></input>
|
||
<input type=button class="btn" id="Button_ZoomOut" data-i18n-value="map.zoomOut" value="放大" style="width:10%;height:50px;background:#FD4F00FF"></input>
|
||
</div>
|
||
<div id="output"></div>
|
||
<canvas id="myCanvas" style="border:5px solid rgb(153, 153, 153);background:white;width:1550px;height:730px;" width="1550px" height="730px"></canvas>
|
||
</body>
|
||
<script type="text/javascript" src="js/i18n/TimeI18n.js"></script>
|
||
<script type="text/javascript">
|
||
loadText();
|
||
</script>
|
||
<style>
|
||
.top{
|
||
margin-bottom: 10px;
|
||
}
|
||
.top img{
|
||
vertical-align: middle;
|
||
margin: 0px 5px;
|
||
}
|
||
.top input{
|
||
display: inline-block;
|
||
margin: 0px 5px;
|
||
color: white;
|
||
}
|
||
</style>
|
||
</html> |