kopia lustrzana https://github.com/pimoroni/pimoroni-pico
358 wiersze
7.8 KiB
HTML
358 wiersze
7.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<!-- HTML Codes by Quackit.com -->
|
|
|
|
<title>
|
|
</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<head>
|
|
|
|
<style>
|
|
body {background-color:#050505;background-repeat:no-repeat;background-position:top left;background-attachment:fixed;}
|
|
h1{font-family:Arial, sans-serif;color:#ffffff;}
|
|
h2{font-family:Arial, sans-serif;color:#ffffff;}
|
|
p {font-family:Arial, serif;font-size:16px;font-style:normal;font-weight:normal;color:#ffffff}
|
|
table.GeneratedTable {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-collapse: collapse;
|
|
border-width: 2px;
|
|
border-color: #8f8f8f;
|
|
border-style: solid;
|
|
color: #000000;
|
|
}
|
|
|
|
table.GeneratedTable td, table.GeneratedTable th {
|
|
border-width: 2px;
|
|
border-color: #8f8f8f;
|
|
border-style: solid;
|
|
padding: 3px;
|
|
width: 50%;
|
|
}
|
|
|
|
table.GeneratedTable thead {
|
|
background-color: #fafafa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Automation 2040 W IO Interface</h1>
|
|
<p>This displays the status of all the Automation 2040 W inputs and outputs.</p>
|
|
|
|
<p id="LedOn" ></p>
|
|
|
|
|
|
<h2>ADC Readings</h2>
|
|
<table class="GeneratedTable">
|
|
<thead>
|
|
<tr>
|
|
<th>IO</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ADC1</td>
|
|
<td id="ADC1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ADC2</td>
|
|
<td id="ADC2"></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>ADC3</td>
|
|
<td id="ADC3"></td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Input Readings</h2>
|
|
<table class="GeneratedTable">
|
|
<thead>
|
|
<tr>
|
|
<th>IO</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>INPUT1</td>
|
|
<td id="INPUT1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>INPUT2</td>
|
|
<td id="INPUT2"></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>INPUT3</td>
|
|
<td id="INPUT3"></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>INPUT4</td>
|
|
<td id="INPUT4"></td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2>Button Readings</h2>
|
|
<table class="GeneratedTable">
|
|
<thead>
|
|
<tr>
|
|
<th>IO</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Button A</td>
|
|
<td id="SW_A"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Button B</td>
|
|
<td id="SW_B"></td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
<h2>Outputs</h2>
|
|
<table class="GeneratedTable">
|
|
<thead>
|
|
<tr>
|
|
<th>IO</th>
|
|
<th>Status</th>
|
|
<th>Toggle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>OUT1</td>
|
|
<td id="OUT1"></td>
|
|
<td><input type="button" onclick="toggleOutput('one')" value="Toggle"></input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>OUT2</td>
|
|
<td id="OUT2"></td>
|
|
<td><input type="button" onclick="toggleOutput('two')" value="Toggle"></input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>OUT3</td>
|
|
<td id="OUT3"></td>
|
|
<td><input type="button" onclick="toggleOutput('three')" value="Toggle"></input></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2>Relays</h2>
|
|
<table class="GeneratedTable">
|
|
<thead>
|
|
<tr>
|
|
<th>IO</th>
|
|
<th>Status</th>
|
|
<th>Toggle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>RELAY1</td>
|
|
<td id="RELAY1"></td>
|
|
<td><input type="button" onclick="toggleRelay('one')" value="Toggle"></input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RELAY2</td>
|
|
<td id="RELAY2"></td>
|
|
<td><input type="button" onclick="toggleRelay('two')" value="Toggle"></input></td>
|
|
</tr>
|
|
<tr>
|
|
<td>RELAY3</td>
|
|
<td id="RELAY3"></td>
|
|
<td><input type="button" onclick="toggleRelay('three')" value="Toggle"></input></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- Javascripts-->
|
|
<script>
|
|
|
|
var getUrl = window.location;
|
|
var baseUrl = getUrl .protocol + "//" + getUrl.host;
|
|
|
|
|
|
//prototype arrays for holding current state information
|
|
var outputState;
|
|
var relayState;
|
|
var ADCState;
|
|
var inputState;
|
|
var buttonState;
|
|
var LEDState;
|
|
|
|
|
|
|
|
//functions for updating current states
|
|
function updateOutputStates(){
|
|
fetch(baseUrl+ '/outputs')
|
|
.then((Response) => {
|
|
return Response.json()
|
|
})
|
|
.then((data) =>{
|
|
outputState = data;
|
|
console.log('outputs', outputState);
|
|
|
|
})
|
|
}
|
|
function updateRelayStates(){
|
|
fetch(baseUrl+ '/relays')
|
|
.then((Response) => {
|
|
return Response.json()
|
|
})
|
|
.then((data) =>{
|
|
relayState = data;
|
|
console.log('relays', relayState);
|
|
|
|
})
|
|
}
|
|
function updateInputStates(){
|
|
fetch(baseUrl+ '/inputs')
|
|
.then((Response) => {
|
|
return Response.json()
|
|
})
|
|
.then((data) =>{
|
|
inputState = data;
|
|
console.log('inputs', inputState);
|
|
})
|
|
}
|
|
function updateADCStates(){
|
|
fetch(baseUrl+ '/adcs')
|
|
.then((Response) => {
|
|
return Response.json()
|
|
})
|
|
.then((data) =>{
|
|
ADCState = data;
|
|
console.log('ADCs', ADCState);
|
|
})
|
|
}
|
|
function updateLEDStates(){
|
|
fetch(baseUrl+ '/leds')
|
|
.then((Response) => {
|
|
return Response.json()
|
|
})
|
|
.then((data) =>{
|
|
LEDState = data;
|
|
console.log('LEDs', LEDState);
|
|
})
|
|
}
|
|
|
|
function updateButtonStates(){
|
|
fetch(baseUrl+ '/buttons')
|
|
.then((Response) => {
|
|
return Response.json()
|
|
})
|
|
.then((data) =>{
|
|
buttonState = data;
|
|
console.log('Buttons', buttonState);
|
|
})
|
|
}
|
|
|
|
function getCurrentStates(){
|
|
updateOutputStates()
|
|
updateRelayStates()
|
|
updateInputStates()
|
|
updateADCStates()
|
|
updateButtonStates()
|
|
}
|
|
|
|
setInterval(getCurrentStates, 3000);
|
|
|
|
setInterval(displayADCValues, 1000);
|
|
setInterval(displayButtonValues, 1000);
|
|
setInterval(displayOutputValues, 1000);
|
|
setInterval(displayInputValues, 1000);
|
|
setInterval(displayRelayValues, 1000);
|
|
|
|
|
|
|
|
function displayADCValues(){
|
|
document.getElementById('ADC1').innerHTML = ADCState['one']
|
|
document.getElementById('ADC2').innerHTML = ADCState['two']
|
|
document.getElementById('ADC3').innerHTML = ADCState['three']
|
|
}
|
|
function displayInputValues(){
|
|
document.getElementById('INPUT1').innerHTML = inputState['one']
|
|
document.getElementById('INPUT2').innerHTML = inputState['two']
|
|
document.getElementById('INPUT3').innerHTML = inputState['three']
|
|
document.getElementById('INPUT4').innerHTML = inputState['four']
|
|
}
|
|
function displayButtonValues(){
|
|
document.getElementById('SW_A').innerHTML = buttonState['SW_A']
|
|
document.getElementById('SW_B').innerHTML = buttonState['SW_B']
|
|
|
|
}
|
|
function displayOutputValues(){
|
|
document.getElementById('OUT1').innerHTML = outputState['one']
|
|
document.getElementById('OUT2').innerHTML = outputState['two']
|
|
document.getElementById('OUT3').innerHTML = outputState['three']
|
|
}
|
|
function displayRelayValues(){
|
|
document.getElementById('RELAY1').innerHTML = relayState['one']
|
|
document.getElementById('RELAY2').innerHTML = relayState['two']
|
|
document.getElementById('RELAY3').innerHTML = relayState['three']
|
|
}
|
|
//output Handlers
|
|
|
|
function updateRemote(funct, attribute, value ){
|
|
|
|
fetch(baseUrl+"/"+funct+"?"+attribute+"="+value)
|
|
.then(response => {
|
|
// indicates whether the response is successful (status code 200-299) or not
|
|
if (!response.ok) {
|
|
throw new Error(`Request failed with status ${reponse.status}`)
|
|
}
|
|
return response.json()
|
|
})
|
|
.then(data => {
|
|
console.log(data)
|
|
|
|
})
|
|
.catch(error => console.log(error))
|
|
|
|
}
|
|
|
|
function toggleOutput(outNumb){
|
|
var newState = '0'
|
|
var currentOutputState = outputState[outNumb]
|
|
if (currentOutputState == newState){
|
|
newState = '1';
|
|
}
|
|
else{
|
|
newState = '0'
|
|
}
|
|
updateRemote('outputs', outNumb, newState )
|
|
updateOutputStates()
|
|
|
|
|
|
|
|
}
|
|
function toggleRelay(outNumb){
|
|
var newState = '0'
|
|
var currentRelayState = relayState[outNumb]
|
|
if (currentRelayState == newState){
|
|
newState = '1';
|
|
}
|
|
else{
|
|
newState = '0'
|
|
}
|
|
updateRemote('relays', outNumb, newState )
|
|
updateRelayStates()
|
|
|
|
}
|
|
|
|
updateOutputStates()
|
|
updateRelayStates()
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|