Lav en Cirkel

[Bech]

Hej

Jeg er Meget ny med HTML og web programmering. Jeg sidder og arbejder med Programmering af en PLC som har en indbygget Web Server. I PLCen har jeg et tag der kan have to værdier aktiv = 1 og ikke aktiv = 0.

Nu har jeg behov for og lave en Cirkel på en hjemmeside der er grøn når den er aktiv og rød når den ikke er aktiv.

Men hvordan laver jeg en Cirkel?
Hvordan får jeg den til og skifte efter værdien på mit Tag?
Er det muligt kun med HTML kode, eller skal jeg bruge CSS?
Kan det slet ikke lade sig gøre og jeg skal prøve noget med to billeder der skifter, et rød billed og grøn billed?

Jeg har svært ved at forklare min problem stilling, så stil endelig udybende spørgsmål til det.

[Daniel]

Hej Bech.

Først og fremmest så velkommen til NemProgrammering.

Det du efterspørger kan ikke lade sig gøre med ren HTML eller CSS, der skal du over i noget JavaScript eller PHP, hvor du benytter nogle variabler og if og else statements.

[Bech]

Hej Bech.

Først og fremmest så velkommen til NemProgrammering.

Det du efterspørger kan ikke lade sig gøre med ren HTML eller CSS, der skal du over i noget JavaScript eller PHP, hvor du benytter nogle variabler og if og else statements.

Ok. så er det noget JavaScript jeg skal læse lidt omkring. IF og ELSE er også noget jeg bedre kender til fra C kode.

Ved du om det skal gøres med man skifter et billed ud eller er den en anden løsning?

[scootergrisen]

Hvordan får du værdien til tagget ?
Hvad kommer HTML koden til at være når den er 0 og når den er 1 ?

[Bech]

Hvordan får du værdien til tagget ?

Det gør jeg via min PLC, den giver værdien 1 eller 0. Det kan f.eks. komme ved tryk på en knap, hvor knappen er forbunden på en PLC indgang. Der efter giver PLCen informationen vidre til Web serveren.

Giver det mening?

Hvad kommer HTML koden til at være når den er 0 og når den er 1 ?

Det spørgsmål forstår jeg ikke helt.

[scootergrisen]

Jeg forstår det heller ikke.

Men her er noget kode der minder lidt om det du søger hvor farven skifter alt efter om browseren er sat til at være online eller offline. Altså om der er netforbindelse.

Kode: Vælg alt

<style type="text/css" scoped>

   #statusb {
      padding: 5px;
      color: #fff;
      background: #ccc;
   }

   #statusb.offline {
      background: #c00;
   }

   #statusb.online {
      background: #0c0;
   }

</style>

<article>
  <p>Browserens netværks status : <span id="statusb">undersøger...</span></p>
</article>

<script type="text/javascript">

   var statusElemb = document.getElementById('statusb')

   setInterval(function (){

      statusElemb.className = navigator.onLine ? 'online' : 'offline';
      statusElemb.innerHTML = navigator.onLine ? 'online' : 'offline';  

   }, 250);

</script>

Fordelen ved det er at det opdateres uden at skulle indlæse siden.
Men hvis du sætter din værdi serverside i HTML kode så kan det være du skal genindlæse siden før du kan få skitet farve men det kan jo også være det er fint nok for dig.

Kan du ikke lave en test side hvor vi kan se værdien er sat.

[Bech]

Prøver og uddybe det lidt med et eksempel.

Jeg har en Fysisk knap. Der er forbundet til min PLC (Lille programbar enhed) med et par ledninger. PLCen har en tag (Variabel / Bit / bool - kært barn har mange navne) som har værdien 0 (false) når man trykker på knappen får det tag værdien 1 (true).

Denne PLC har indbygget en Web server. Hvis vi forstiller os at taget til knappen i PLCen hedder "Knap"

Så starter jeg på følgende måde hvis jeg vil kunne ændre værdien af et Tag i PLCen.

Kode: Vælg alt

  <!-- AWP_In_Variable Name='"Knap"'  -->
    <form method="POST">
    Ændre værdi i PLC: <input name='"Knap"' value=:="Knap": type="text"> 
    </form>

AWP kommandoen fungere som en kommentar i HTML kode, men PLCen ser det som kode. så den kan koble Web server og PLC kode sammen.

Nu har jeg så behov for og skifte mellem to billeder alt efter om værdien af taget "Knap" er 1 eller 0.

Det eksempel du kommer med er noget i den stil jeg er på jagt efter.

Håber denne forklaring giver mere mening.

[scootergrisen]

Prøv sådan her.

Kode: Vælg alt

<style type="text/css">

   #billede {
      padding: 5px;
      color: #fff;
      background: #ccc;
   }

   #billede.offline {
      background: #c00;
   }

   #billede.online {
      background: #0c0;
   }

</style>

<!-- AWP_In_Variable Name='"Knap"'  -->
<script>

var status = :="Knap":; // 0 eller 1
var billede = document.getElementById('billede');

billede.className = status ? 'online' : 'offline';

</script>

[Bech]

Har du mulighed for og forklare koden lidt.

Hvor definere jeg hvilke to billeder der skal bruges. og hvordan ved den hvilket billed den skal tage ved en given værdi?

Og mange tak for hjælpen, det er lækkert du tager dig tiden til det.

[Daniel]

Det kommer også lidt an på hvordan du vil have det til at fungere, hvis du er ligeglad med at siden opdatere hver gang du trykker på knappen, så er almindeligt JavaScript fint, men hvis du vil have siden ikke skal opdatere hver gang du trykker, så skal du bruge Ajax, er noget mere kompliceret da du skal hen og rode med XML, men ser også rigtig godt ud, og så galt er det heller ikke som nogen mener.

[scootergrisen]

I mit sidste eksempel er der ikke noget med billede, kun en farve som skifter.
Men hvis du kan få det til at virke med farven der skifter så er det let at lave om til at det skal være et billede der skifter.

[Bech]

Det kommer også lidt an på hvordan du vil have det til at fungere, hvis du er ligeglad med at siden opdatere hver gang du trykker på knappen, så er almindeligt JavaScript fint, men hvis du vil have siden ikke skal opdatere hver gang du trykker, så skal du bruge Ajax, er noget mere kompliceret da du skal hen og rode med XML, men ser også rigtig godt ud, og så galt er det heller ikke som nogen mener.

Til og starte med er det ok den opdatere hver gang der trykkes på en knap.

I mit sidste eksempel er der ikke noget med billede, kun en farve som skifter.
Men hvis du kan få det til at virke med farven der skifter så er det let at lave om til at det skal være et billede der skifter.

Ok jeg vil teste det imorgen, det behøves ikke være med billeder der skifter. Kan endelig bedre lige dit eksempel hvor der ikke bruges billeder, men CSS (tror jeg det er )

[Daniel]

Hvis du vil have en cirkel der skifter farve med rent CSS, kan du bruge en style som fx denne:

Kode: Vælg alt

<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;
}
</style>

Har bare sat dette CSS på en tom div, navne skal selvfølgelig ændres efter hvad der står i dit script.
Selve JavaScript delen vil jeg ikke rode mig ind i, der er scootergrisen vist noget bedre end mig til at finde en løsning, når jeg laver JavaScript bliver det aldrig så kompakt, min store glæde ligger i PHP og jQuery.

[Bech]

Her er den komplette kode, men det virker ikke rigtig. Hvad er det jeg gør forkert nu?

Kode: Vælg alt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>

    		<title>Test</title>
		<meta http-equiv="Content-Language" content="en" >
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
		<meta http-equiv="Content-Script-Type" content="text/javascript" >


  	</head>

  <body>
    Test <br clear="none">

<style type="text/css">

   #billede {
      padding: 5px;
      color: #fff;
      background: #ccc;
   }

   #billede.offline {
      background: #c00;
   }

   #billede.online {
      background: #0c0;
   }

</style>

<!-- AWP_In_Variable Name='"Knap"'  -->
<script>

var status = :="Knap":; // 0 eller 1
var billede = document.getElementById('billede');

billede.className = status ? 'online' : 'offline';

</script> 

  </body>
</html>

[Daniel]

Som sagt er jeg ikke JavaScript ekspert, men umiddelbart skulle denne kode virke:

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Status cirkel</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;
		}
	</style>
	
	<!-- AWP_In_Variable Name='"Knap"'  -->
	
	<script>
		function cirkel() {
			var status = Knap;
			var cirkel = document.getElementById("cirkel");
			
			if(status == 0) {
				cirkel.className = "cirkelOffline";
			} else {
				cirkel.className = "cirkelOnline";
			}
		}
	</script>
</head>
<body onload="cirkel()">
<div id="cirkel"></div>
</body>
</html>

[Bech]

Som sagt er jeg ikke JavaScript ekspert, men umiddelbart skulle denne kode virke:

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Status cirkel</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;
		}
	</style>
	
	<!-- AWP_In_Variable Name='"Knap"'  -->
	
	<script>
		function cirkel() {
			var status = Knap;
			var cirkel = document.getElementById("cirkel");
			
			if(status == 0) {
				cirkel.className = "cirkelOffline";
			} else {
				cirkel.className = "cirkelOnline";
			}
		}
	</script>
</head>
<body onload="cirkel()">
<div id="cirkel"></div>
</body>
</html>

Det virkede desværre ikke. men ved en lille ændring fik jeg noget til og ske.

Denne linje ændrede jeg fra :

Kode: Vælg alt

			var status = Knap;

Til :

Kode: Vælg alt

			var status = "Knap";

Nu kommer der en grøn kasse frem, men den er grøn lige meget hvad værdien er på "knap"

Nogle gode forslag?

[Bech]

Nyt forsøg. Ændret fra :

Kode: Vælg alt

         var status = "Knap";

Til :

Kode: Vælg alt

         var status = :="Knap":;

Og nu virker det. Det er godt nok ikke en cirkel men en firkant. Det er mindre vigtig. men er der nogen der har en ide om hvorfor det er sådan?