Jeg viser lige hvad jeg har nu.
Her er et billeder der viser to eksempler på siden.
Billed Link
Her er den komplette kode.
Kode: Vælg alt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<title>Status test</title>
<style type="text/css">
.cirkelOnline {
height: 100px;
width: 100px;
border-radius: 80px;
border: solid 3px;
background-color: green;
}
.cirkelOffline {
height: 100px;
width: 100px;
border-radius: 80px;
border: solid 3px;
background-color: red;
}
.motorstart {
height: 80px;
width: 80px;
background-image: url(billeder/Pumpe_Gron.png);
}
.motorstop {
height: 80px;
width: 80px;
background-image: url(billeder/Pumpe_Rod.png);
}
.motormanuel {
height: 80px;
width: 80px;
background-image: url(billeder/Pumpe_Gul.png);
}
.motorfejl {
height: 80px;
width: 80px;
background-image: url(billeder/Pumpe_Fejl.png);
}
</style>
<script type ="text/javascript">
function cirkel() {
var status = :="Knap":;
var cirkel = document.getElementById("cirkel");
if(status == 0) {
cirkel.className = "cirkelOffline";
} else {
cirkel.className = "cirkelOnline";
}
}
</script>
<script type ="text/javascript">
function motor() {
var status = :="Motor_Status":;
var motor = document.getElementById("motor");
if(status == 1) {
motor.className = "motorstart";
} else if(status == 2) {
motor.className = "motorstop";
} else if(status == 3) {
motor.className = "motormanuel";
} else {
motor.className = "motorfejl";
}
}
// window.onload = cirkel;
// window.onload = motor;
</script>
<!-- AWP_In_Variable Name='"Motor_Start"' -->
<!-- AWP_In_Variable Name='"Motor_Stop"' -->
<!-- AWP_In_Variable Name='"Motor_Manuel"' -->
<!-- AWP_In_Variable Name='"Start_Knap"' -->
<!-- AWP_In_Variable Name='"Stop_Knap"' -->
</head>
<body onload="cirkel(); motor()">
Status of plant <br>
<br>
<form method="post" action="">
<input type="submit" value="Start_Knap" style="height: 30px; width: 100px;" type="submit">
<input type="hidden" name='"Start_Knap"' value="1">
</form>
<form method="post" action="">
<input type="submit" value="Stop_Knap" style="height: 30px; width: 100px;" type="submit">
<input type="hidden" name='"Stop_Knap"' value="1">
</form>
<br>
<div id="cirkel"></div>
<br>
Knap: :="Knap":<br>
<br>
<div id="motor"></div>
<br>
<form method="post" action="">
<input type="submit" value="Motor_Start" style="height: 30px; width: 100px;" type="submit">
<input type="hidden" name='"Motor_Start"' value="1">
</form>
<form method="post" action="">
<input type="submit" value="Motor_Stop" style="height: 30px; width: 100px;" type="submit">
<input type="hidden" name='"Motor_Stop"' value="1">
</form>
<form method="post" action="">
<input type="submit" value="Motor_Manuel" style="height: 30px; width: 100px;" type="submit">
<input type="hidden" name='"Motor_Manuel"' value="1">
</form>
<br>
Motor_status: :="Motor_Status":<br>
</body>
</html>
Den variabel der hedder Motor_Status er den der bestemmer hvilket billed der bliver valgt.
Motor_Status = 1 - vises et rødt billed
Motor_Status = 2 - vises et grønt billed
Motor_Status = 3 - vises et gult billed
Men hvis motor status ændres fra 1 til 3 skifter billedet først når siden opdateres.
Det er dette jeg gerne vil have skal gøres automatisk, men ikke med Meta refresh da det vil opdatere hele siden og der skal være en del indtastninge felter der ikke skal opdateres.
Kan man dele siden op med CSS frame og få en CSS frame til og opdatere automatik hver 10 sek.
Går udfra at det er et nye billede du skal have vist hvert 30. sekund?