Question

我有一个用于家庭自动化的网站，我可以控制电视，闪电等。

我想要做的是将照片作为我的电视机按钮“关闭”，当我按下时，图片会更改并更新我运行的网页的每个实例（在我的电脑，笔记本电脑，平板电脑等）并将图片更改为电视“开启”。

我希望你们明白我想做什么 - 我很抱歉没有任何代码可以显示，我不知道从哪里开始，因为我不熟悉HTML和CSS。

提前致谢！

修改

我有一个基于“Eventghost”程序的家庭自动化系统 - 在这个程序中有一个插件，可以让你创建一个与所述程序对话的网站。这允许我从我的网站控制我的闪电，电视，媒体中心等。

这是我的“主窗口”的图片，我已经编辑过，以显示我想要的东西，如果这可能会有所帮助。

Click here to see how my website looks now and what I want

正如你在这里看到的 - 我想要建立的是我的电视画面，显示屏幕是黑色的，然后当我按下所说的图片时，它变成了电视上有一些静电或类似的东西，并使用websocket事件向eventghost发送命令。我甚至都不知道。

我确实设法得到了接近这个的东西，但是没有图片，按钮会改变颜色。这是代码：

<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("tv.is.on").style.backgroundColor="green";
        document.getElementById("tv.is.on").style.color ="white";
        document.getElementById("tv.is.off").style.backgroundColor="black";
        document.getElementById("tv.is.off").style.color ="white";
    }
    if (evt.data.match("tv off")) {
        document.getElementById("tv.is.on").style.backgroundColor="black";
        document.getElementById("tv.is.on").style.color ="white";
        document.getElementById("tv.is.off").style.backgroundColor="red";
        document.getElementById("tv.is.off").style.color ="white";
    }
}

window.addEventListener("load", init, false); 
</script>

然后我在我的按钮中有这个：

<button id="tv.is.on" onMouseDown="doSend('TV_ON', this)" data-action="tv.on" data-theme="b">På</button>
            <button id="tv.is.off" onMouseDown="doSend('TV_OFF', this)" data-action="tv.off">Av</button>

现在，我想要做的是创建这些东西，但只在图片内部，当你按下它时改变状态从开启和关闭（也就是当你点击它时改变2张图片） - 并且让网站使用websockets来更新页面的每个实例。

我希望我现在更清楚了，先谢谢:)

动态图片作为按钮与websocets

0 个答案: