253 lines
8.6 KiB
HTML
253 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ln.ethercat Diagnostics Application</title>
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="/css/spa.css">
|
|
<!--link rel="stylesheet" href="/css/ln.vue.css"/-->
|
|
|
|
<script type="text/javascript" src="/js/ln.js"></script>
|
|
<script type="text/javascript" src="/js/lib/ln.promise.js"></script>
|
|
|
|
<script type="text/javascript" src="/js/vue/vue.js"></script>
|
|
<script type="text/javascript" src="/js/vue/vue-router.js"></script>
|
|
|
|
<script type="text/javascript" src="/js/pdopanel.js"></script>
|
|
<script type="text/javascript" src="/js/sdopanel.js"></script>
|
|
<script type="text/javascript" src="/js/sdotable.js"></script>
|
|
<script type="text/javascript" src="/js/sdoselect.js"></script>
|
|
|
|
<script type="text/javascript" src="/js/ecapp.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="frame">
|
|
<header>
|
|
<div class="wrapper">
|
|
<button @click="$ECAPP.requestState(0, 'PRE_OP');" class="state silver" v-bind:class="[ state.state == 'PRE_OP' ? 'active' : '' ]">PRE_OP</button>
|
|
<button @click="$ECAPP.requestState(0, 'SAFE_OP');" class="state orange" v-bind:class="[ state.state == 'SAFE_OP' ? 'active' : '' ]">SAFE_OP</button>
|
|
<button @click="$ECAPP.requestState(0, 'OPERATIONAL');" class="state green" v-bind:class="[ state.state == 'OPERATIONAL' ? 'active' : '' ]">OPERATIONAL</button>
|
|
Slave States:
|
|
<span
|
|
class="state"
|
|
v-for="slave in state.slaves"
|
|
:class="[slave.state]"
|
|
>{{ slave.id }}: {{ slave.state }}
|
|
</span>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div id="main">
|
|
<div>
|
|
<router-link to="/controller">Steuerung</router-link>
|
|
<router-link
|
|
v-for="slave in state.slaves"
|
|
:to="'/slave/' + slave.id"
|
|
>Slave {{ slave.id }}</router-link>
|
|
</div>
|
|
|
|
<router-view></router-view>
|
|
</div>
|
|
<aside class="right">
|
|
<pdo-panel
|
|
id="pdopanel"
|
|
:processdata="processdata"
|
|
@write="$ECAPP.sendMessage('sdowrite', $event);"
|
|
></pdo-panel>
|
|
</aside>
|
|
</main>
|
|
<footer>
|
|
|
|
</footer>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
var routes = [
|
|
{ path: "/", component: null },
|
|
];
|
|
|
|
var vueRouter = new VueRouter({ routes });
|
|
var $ECAPP = new EthercatApplication({});
|
|
|
|
LN
|
|
.$fetch("/pages/slave.html")
|
|
.then((src)=>{
|
|
vueRouter.addRoutes([{
|
|
path: "/slave/:slave_id",
|
|
props: true,
|
|
component: {
|
|
template: src,
|
|
props: ['slave_id'],
|
|
data: function(){ return $ECAPP; },
|
|
}
|
|
}]);
|
|
});
|
|
|
|
LN
|
|
.$fetch("/pages/controller.html")
|
|
.then((src)=>{
|
|
vueRouter.addRoutes([{
|
|
path: "/controller",
|
|
component: {
|
|
template: src,
|
|
data: function(){
|
|
let d = { controller: false, drive_controller: null };
|
|
d.socket = $ECAPP.connectWebSocket("/api/v1/sockets/controller");
|
|
d.socket.onmessage = (evt)=>{
|
|
let json = JSON.parse(evt.data);
|
|
d.controller = json.value.Controller;
|
|
let drives = []
|
|
for (let n=0;n<d.controller.DriveCount;n++)
|
|
drives.push(json.value["drives/" + n]);
|
|
d.drive_controller = drives;
|
|
};
|
|
return d;
|
|
},
|
|
methods: {
|
|
drive_set: function(drive, propName, propValue){
|
|
let jsonMessage = {
|
|
event: "set",
|
|
target: `drives/${drive}`,
|
|
value: {
|
|
name: propName,
|
|
value: propValue
|
|
}
|
|
};
|
|
this.socket.send(JSON.stringify(jsonMessage));
|
|
},
|
|
ctrl_set: function(propName, propValue){
|
|
let jsonMessage = {
|
|
event: "set",
|
|
target: "Controller",
|
|
value: {
|
|
name: propName,
|
|
value: propValue
|
|
}
|
|
};
|
|
this.socket.send(JSON.stringify(jsonMessage));
|
|
},
|
|
ctrl_action: function(methodName, arguments){
|
|
arguments = arguments || [];
|
|
let jsonMessage = {
|
|
event: "action",
|
|
target: "Controller",
|
|
value: {
|
|
method: methodName,
|
|
arguments: arguments
|
|
}
|
|
};
|
|
this.socket.send(JSON.stringify(jsonMessage));
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
vueRouter.addRoutes([{
|
|
path: "/controller/drives/:drive",
|
|
props: true,
|
|
component: {
|
|
props: ['drive'],
|
|
template: src,
|
|
data: function(){
|
|
let d = { sockets: {}, controller: {}, drive_controller: {} };
|
|
|
|
d.targetTorque = 0;
|
|
d.targetSpeed = 0;
|
|
d.targetPosition = 0;
|
|
|
|
d.sockets.controller = $ECAPP.connectWebSocket("/api/v1/sockets/controller");
|
|
d.sockets.controller.onmessage = (evt)=>{
|
|
let json = JSON.parse(evt.data);
|
|
d.controller = json;
|
|
};
|
|
d.sockets.drive = $ECAPP.connectWebSocket("/api/v1/sockets/controller/drives/" + this.drive);
|
|
d.sockets.drive.onmessage = (evt)=>{
|
|
let json = JSON.parse(evt.data);
|
|
d.drive_controller = json;
|
|
};
|
|
return d;
|
|
},
|
|
methods: {
|
|
setProperty: function(propName,propValue){
|
|
pv = {};
|
|
pv[propName] = propValue;
|
|
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "set",
|
|
value: pv
|
|
})
|
|
);
|
|
},
|
|
drive_poweroff: function(){
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "action",
|
|
value: "PowerOff"
|
|
})
|
|
);
|
|
},
|
|
drive_poweron: function(){
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "action",
|
|
value: "PowerOn"
|
|
})
|
|
);
|
|
},
|
|
drive_disable: function(){
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "action",
|
|
value: "DisableDrive"
|
|
})
|
|
);
|
|
},
|
|
drive_enable: function(){
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "action",
|
|
value: "EnableDrive"
|
|
})
|
|
);
|
|
},
|
|
drive_clearfault: function(){
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "action",
|
|
value: "ClearFault"
|
|
})
|
|
);
|
|
},
|
|
drive_drivemode: function(mode){
|
|
this.sockets.drive.send(
|
|
JSON.stringify({
|
|
event: "action",
|
|
value: "SetDriveMode" + mode
|
|
})
|
|
);
|
|
}
|
|
|
|
}
|
|
}
|
|
}]);
|
|
})
|
|
|
|
vueRouter.beforeEach((to,from,next)=>{
|
|
$ECAPP.closeWebSockets();
|
|
next();
|
|
});
|
|
|
|
var app = new Vue({
|
|
el: "#frame",
|
|
data: $ECAPP,
|
|
router: vueRouter
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |