<head>
<meta charset="utf-8">
<title>ControlPi</title>
- <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+ <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+ <style>
+ div {
+ display: inline-block;
+ padding: 10px;
+ border: 1px solid black;
+ margin: 5px;
+ }
+ </style>
</head>
<body>
<script>
var data = JSON.parse(event.data)
switch (data.event) {
case 'pinstate':
- var section_name = data.pin.split('-')[0]
- var section_root = document.getElementById('sections')
- if (section_root == null) {
- section_root = document.createElement('ul')
- document.body.appendChild(section_root)
- section_root.setAttribute('id', 'sections')
- }
- var section = document.getElementById(section_name)
- if (section == null) {
- var li = document.createElement('li')
- section_root.appendChild(li)
- li.setAttribute('id', section_name + '-li')
- var h2 = document.createElement('h2')
- li.appendChild(h2)
- var h2_content = document.createTextNode(section_name)
- h2.appendChild(h2_content)
- section = document.createElement('ul')
- li.appendChild(section)
- section.setAttribute('id', section_name)
- var sections = section_root.childNodes
- var section_array = []
- for (var s in sections) {
- if (sections[s].nodeType == 1) {
- section_array.push(sections[s])
- }
- }
- section_array.sort(function (a, b) {
- ai = a.getAttribute('id')
- bi = b.getAttribute('id')
- return ai == bi ? 0 : ai > bi ? 1 : -1
- })
- for (var i = 0; i < section_array.length; i++) {
- section_root.appendChild(section_array[i])
- }
- }
var pin = document.getElementById(data.pin)
- if (pin == null) {
- pin = document.createElement('li')
- section.appendChild(pin)
- pin.setAttribute('id', data.pin)
- var pin_content = document.createTextNode(data.pin)
- pin.appendChild(pin_content)
- if (data.settable) {
- var on = document.createElement('button')
- pin.appendChild(on)
- var on_content = document.createTextNode('On')
- on.appendChild(on_content)
- on.addEventListener('click', function (event) {
- ws.send(JSON.stringify({command: 'setpin', pin: data.pin, value: true}))
- })
- var off = document.createElement('button')
- pin.appendChild(off)
- var off_content = document.createTextNode('Off')
- off.appendChild(off_content)
- off.addEventListener('click', function (event) {
- ws.send(JSON.stringify({command: 'setpin', pin: data.pin, value: false}))
- })
+ if (pin != null) {
+ if (data.value) {
+ pin.setAttribute('style', 'background: green;')
+ } else {
+ pin.setAttribute('style', 'background: red;')
}
}
- if (data.value) {
- pin.setAttribute('style', 'background: green; margin-bottom: 5px;')
- } else {
- pin.setAttribute('style', 'background: red; margin-bottom: 5px;')
- }
break
default:
console.log(event.data)
- }
+ }
})
ws.addEventListener('open', function (event) {
- ws.send(JSON.stringify({command: 'getallpins'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Notaus'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Stop'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Dauerlauf'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Schmierung'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Vorlauf'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Rücklauf'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Öllampe'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Zentralschmierung'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Ölpumpe'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Schwungrad'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Takt'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Öldruck'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Bruchplatte'}))
+ ws.send(JSON.stringify({command: 'getpin', pin: 'Bruchplatte Einzug'}))
+ })
+ var parameter_button = document.getElementById('setparameters')
+ parameter_button.addEventListener('click', function (event) {
+ ws.send(JSON.stringify({command: 'setparameters'}))
})
</script>
<h1>ControlPi</h1>
+ <section>
+ <h2>Kontrollfeld</h2>
+ <div id="Notaus">Notaus</div>
+ <div id="Stop">Stop</div>
+ <div id="Dauerlauf">Dauerlauf</div>
+ <div id="Schmierung">Schmierung</div>
+ <div id="Vorlauf">Vorlauf</div>
+ <div id="Rücklauf">Rücklauf</div>
+ <div id="Öllampe">Öllampe</div>
+ </section>
+ <section>
+ <h2>Schütze</h2>
+ <div id="Zentralschmierung">Zentralschmierung</div>
+ <div id="Ölpumpe">Ölpumpe</div>
+ </section>
+ <section>
+ <h2>Sensoren</h2>
+ <div id="Schwungrad">Schwungrad</div>
+ <div id="Takt">Takt</div>
+ <div id="Öldruck">Öldruck</div>
+ <div id="Bruchplatte">Bruchplatte</div>
+ <div id="Bruchplatte Einzug">Bruchplatte Einzug</div>
+ </section>
+ <section>
+ <h2>FU</h2>
+ <button id="setparameters">Set Parameters</button>
+ </section>
</body>
</html>
git.graph-it.com / graphit / schaltschrank.git / commitdiff