Skifte mellom 2 bilder onclick med bruk av websocket

[Eirik226]

Hei,

 

Beklager om tittel er feil - men er ikke en guru innen webutvikling så vet ikke helt hva jeg skal kalle dette.

 

Uansett, jeg driver med hjemmeautomasjon og har laget en webside som kjører på localhost som jeg kan styre rommet mitt fra - styrer belysning, tv, datamaskin osv.

 

Det jeg prøver på er å ha et bilde av en TV som er av (mørk skjerm) og når jeg trykker på dette bildet så skifter det til et bildet av en TV som er på og oppdaterer alle instanser som kjører denne websiden (så bildet er likt over alle)

 

- Altså om jeg trykker på bildet på datamaskinen min, så vil bildet være det samme på taben min.

 

Jeg tror jeg har JS koden rett men får det rett og slett ikke til å fungere, og jeg blir ikke noe klokere av en googlesøk.

	<script language="javascript">

    function init() { 
        var output = document.getElementById("container"); 
        var ip = location.host;
        //alert(location.host);
        var wSocket = new WebSocket("ws://"+ip);
        if (wSocket) {
            wSocket.onopen = function() {
                ws = wSocket;
                doSend("Watching_TV");
            }
            wSocket.onmessage = wsMessage;
            wSocket.onclose = function() {
                ws = null;
            }
        }
    } 					

    
    function doSend(strng) {
        if (ws != null) {
            ws.send(JSON.stringify(strng));
        }
    }
    

    function wsMessage(evt) {
        if (evt.data.match("tv on")) {
            document.getElementById("cf2_on").style.backgroundColor="green";
            document.getElementById("cf2_on").style.color ="white";
            document.getElementById("cf2_off").style.backgroundColor="black";
            document.getElementById("cf2_off").style.color ="white";
        }
        if (evt.data.match("tv off")) {
            document.getElementById("cf2_on").style.backgroundColor="black";
            document.getElementById("cf2_on").style.color ="white";
            document.getElementById("cf2_off").style.backgroundColor="red";
            document.getElementById("cf2_off").style.color ="white";
            <!-- Jeg vet dette er feil, men har fått det til å funke med knapper AV og PÅ som skifter farge mellom grønn (som er på) og rød (som er av) - men vil bruke bilder -->
        }
    }

window.addEventListener("load", init, false);

Så har jeg denne CSS og HTML koden:

#cf2 {
  position:relative;
  height:100pxpx;
  width:75px;
  margin:0 auto;
}
#cf2 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}

Dette er CSSen som skifter mellom 2 bilder - fungerer ikke helt.

Dette er HTML som garantert er noen feil på - men føler jeg har prøvd det meste og er helt blank.

<div id="cf2" class="shadow">
					<img id="cf2_on" onMouseDown="doSend('TV_ON', this)" data-action="tv.on" src="/images/tv_on.PNG" />
					<img id="cf2_off" class="top" src="/images/tv_off.PNG" id="cf_onclick" data-action="TV.ON-OFF.Toggle" />
					</div>

img ID="cf2_on" og "cf2_off" er noe jeg bare prøvde ut, tviler på at det er riktig.

Jeg vet at mye av koden er ufullstendig, css og HTML iallefall, men jeg har møtt en vegg her og setter pris på all hjelp! Takk på forhand for alle svar som kan hjelpe meg å fikse dette