Gå til innhold

Variabel som viser statuslys på nettside

Garrian

Av Garrian
i Programmering og webutvikling

Anbefalte innlegg

Garrian

Garrian

Skrevet
Skrevet (endret)

Hei

 

Driver å setter opp en PLS (Programmerbar sak som f.eks stopper og starter motor). Denne har innebygget webserver, som jeg skal sette opp til å være kontrollpanel. Jeg må da lage en nettside med knapper som eksempelvis da kan slå av og på en motor.

 

Det jeg sliter med er å få til ett indikatorlys (gjerne bare en grønn firkant) som blir synlig, eller skifter farge når variabelen har status 1. Med denne koden vises kun 1 eller 0, ettersom motoren er på eller ikke.

 

<!-- AWP_In_Variable Name='"Webdata".int1' -->

:="Webdata".int1:

 

 

Er det en måte å få til dette på? Beklager om dette var dårlig forklart, men spør gjerne om noe er uklart. Setter pris på all hjelp :)

 

 

EDIT:

Om det er mulig å gjøre dette på ett vis med IF statement. Så må det blir noe slik:

 

IF :="Webdata".int1: = 1

 

Så vises f.eks en bildefil med en grønn firkant.

 

Vet ikke hvordan dette kodes riktig, og om det er mulig :)

Endret av Garrian
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Wattengård

Wattengård

Skrevet
Skrevet

Det hjelper kanskje hvis du forklarer litt nærmere hvilket server-side språk disse nettsidene støtter, fordi jeg kjenner ikke igjen språket sånn på stående fot.

 

Men det enkleste er sannsynligvis å transportere variablene fra server-side språket og til javascript variabler.

Ca sånn:

var minVariabel = :="Webdata".int1:;

if (minVariabel == 1) {
  document.getElementById("mittbilde").src = "grøntlys.gif";
  // eller
  document.getElementById("minindikator").style.backgroundColor = "green";
}
Lenke til kommentar
Garrian

Garrian

Skrevet
  • Forfatter
Skrevet

 

Det hjelper kanskje hvis du forklarer litt nærmere hvilket server-side språk disse nettsidene støtter, fordi jeg kjenner ikke igjen språket sånn på stående fot.

 

Men det enkleste er sannsynligvis å transportere variablene fra server-side språket og til javascript variabler.

Ca sånn:

var minVariabel = :="Webdata".int1:;

if (minVariabel == 1) {
  document.getElementById("mittbilde").src = "grøntlys.gif";
  // eller
  document.getElementById("minindikator").style.backgroundColor = "green";
}

 

 

Hei og takk. Siden støtter ihvertfall javascript, så det du foreslår her burde nok funke.

 

Men vet ikke helt hvordan jeg inkluderer dette i en html fil? Kan jeg sette <script> før og </script> etter? Eller må det kodes noe mer?

Lenke til kommentar
Garrian

Garrian

Skrevet
  • Forfatter
Skrevet

Ja dette skal pakkes inn i en script-tag ja.

Mitt forslag ville vært å gjort sånn med alle server-side variablene, for så å programmert alt med javascript.

 

Problemet er at hvis bare én av variablene feiler så vil alt av javascript feile. :)

 

 

 

Hei og takk for tips. Har nå prøvd ut dette, men funker dessverre ikke.

 

Sånn ser koden ut nå:

 

Først dette på første linje i html filen, for å laste inn variabelen fra PLSen.

 

 

<!-- AWP_In_Variable Name='"Webdata".1' -->

 

 

Så i <body> biten kommer dette for å sette verdien til 1 eller 0.

 

 

<form method="post" action="">

<input type="submit" value="Start" style="height: 30px; width: 80px">

<input type="hidden" name='"Webdata".1' value="1">

</form>

 

<form method="post" action="">

<input type="submit" value="Reset" style="height: 30px; width: 80px">

<input type="hidden" name='"Webdata".1' value="0">

</form>

 

 

Så kommer dette:

 

 

<script>

 

var minVariabel = :="Webdata".1:;

 

if (minVariabel == 1) {

  document.getElementById("mittbilde").src = "gronn.png";

}

 

</script>

 

Er det noe her som jeg gjør feil mon?

Lenke til kommentar
RulleRimfrost

RulleRimfrost

Skrevet
Skrevet

Kjør en sjekk på at det kommer noe fra server med javascript -> console.log(minVariabel);

En stk form-tag holder

 

Ellers ville jeg ryddet litt i filen om jeg var deg. Ikke testet, så dette er bare et eksempel på oppsett...

<!doctype html>

<head>
	<meta charset="utf-8">
	<title>min tittel</title>
</head>

<!--
	Kommentar / huskeliste.	Browseren leser ikke 
	mellom <!-- og --> tegn. Betyr ikkno
-->
<body>
	<!-- 
		Ikke peil på pls, men ikke kall variabler "1"
		Gå heller inn i setup og kall den servoA e.l.
	-->
	:="Webdata".1:
	
	<script>
	// kommentar i javascript...
	if ('"Webdata".1' == 1) {
		document.getElementById("mittbilde").src = "gronn.png";
	} else {
		document.getElementById("mittbilde").src = "rod.png";
	{
	</script>

	<!-- Av/på er kun 1 knapp, ellers kan den være av og på samtidig -->
	<img id="mittbilde" src="rod.png">
	<form method="post" action="">	
		<input name='"Webdata".1' type="text" />
		<button type="submit">Lagre</button>
	</form>
</body>
</html>
Lenke til kommentar
RulleRimfrost

RulleRimfrost

Skrevet
Skrevet
Samme knapp for av eller på, da bruker man javascript for å sjekke status ved onclick-event. Muligens noe enklere å bruke de innebygde knappene?

 

Enten/eller valginput i html heter radio buttons. Hvis 2 eller flere slike har samme name hindres bruker i å velge flere av disse samtidig




<input type="radio" name="lys" id="lysOn" checked />

<label for="lysOn">PÅ</label>

<input type="radio" name="lys" id="lysOf" />

<label for="lysOf">AV</label>


 

Egentlig bør man deretter override/endre send-knappen, men det er litt abstrakt for en ikke programmerer. Lurer på om det ikke er enklere å prøve en direkte sjekk med document.onload()?

(jeg er heller ikke programmerer, og skriver direkte fra hodet så...)




var knapper = document.getElementsByName('lys');

for (var i = 0, length = knapper.length; i < length; i++)

{

if (knapper[i].checked) 

{

if (knapper[i].id == "lysOn")

{

// sett inn kode for å slå på lys/markere påslått

} else {

// kode for lys av

}

}

break;

}

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...