Variabel som viser statuslys på nettside

Garrian · 26. august 2018

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.

:="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 26. august 2018 av Garrian

Wattengård · 27. august 2018

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";
}

Garrian · 27. august 2018

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?

Wattengård · 28. august 2018

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.

Garrian · 28. august 2018

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.

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

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

</form>

</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?

RulleRimfrost · 29. august 2018

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>

Garrian · 29. august 2018

Takk for bra info. Skal prøve dette ut senere.

Variabelen ligger i PLSen. Når denne er 0 er motoren av, og når den er 1 er den på. Hvordan får jeg denne til å switche mellom 1 og 0 når jeg klikker flere ganger?

RulleRimfrost · 30. august 2018

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;

}

Logg inn

Variabel som viser statuslys på nettside

Anbefalte innlegg

Garrian

Lenke til kommentar

Videoannonse

Wattengård

Lenke til kommentar

Garrian

Lenke til kommentar

Wattengård

Lenke til kommentar

Garrian

Lenke til kommentar

RulleRimfrost

Lenke til kommentar

Garrian

Lenke til kommentar

RulleRimfrost

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer