Page 1 of 1

html fråga i relation till nexushome

Posted: Fri Mar 17, 2023 9:45 am
by sam
Hej

Jag har gjort en 3d rendering på en lägenhet, detta har genererat 8 bilder.
Jag använder mig av en hoover effekt när man för muspekaren över en lampa och då tänds det spotlights i det specifika rummet.

html koden är klar för just den biten. men sen insåg jag att det går ju mer eller mindre inte att implementera detta otroligt snygga gui tillsammans med nexushome.

Dock så undrar jag efter som min kunskap äro bristande i denna fråga. Finns det möjlighet att få ut rena html länkar istället för de omständiga formulär kod blocken?
Det skulle ju vara så mycket bättre.

Kan jag använda mitt gui tillsammans med nexushome på något sätt?

Re: html fråga i relation till nexushome

Posted: Fri Mar 17, 2023 9:45 am
by hekj
sam wrote:Jag har gjort en 3d rendering på en lägenhet, detta har genererat 8 bilder.
Jag använder mig av en hoover effekt när man för muspekaren över en lampa och då tänds det spotlights i det specifika rummet.

html koden är klar för just den biten. men sen insåg jag att det går ju mer eller mindre inte att implementera detta otroligt snygga gui tillsammans med nexushome.

Dock så undrar jag efter som min kunskap äro bristande i denna fråga. Finns det möjlighet att få ut rena html länkar istället för de omständiga formulär kod blocken?
Det skulle ju vara så mycket bättre.

Kan jag använda mitt gui tillsammans med nexushome på något sätt?
För att få till efterfrågad effekt ska du utföra följande:

1) ladda hem testversion 2.3.3
http://nexahome.se/NexaHome_2.3.3.jar

2) skapa filen demo2.html i "mywebserver" biblioteket enligt följande exempel:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>NexaHome - Life Made Easy With Home Automation</title>
<link rel="Shortcut Icon" href="http://nexahome.se/favicon32x32.ico">
<meta http-equiv="refresh" content="60;#URL#?mypage=demo2&psw=#PSW#">

<script type="text/javascript">

if (document.images)
{
	on = new Image();
	on.src = "#URL#/on.png";

	off = new Image();
	off.src = "#URL#/off.png";

	onoff = new Image();
	onoff.src = "#URL#/onoff.png";
	
	on150 = new Image();
	on150.src = "#URL#/on150.png";

	off150 = new Image();
	off150.src = "#URL#/off150.png";

	onoff150 = new Image();
	onoff150.src = "#URL#/onoff150.png";
}

function imgChange(name, image)
{
    if (document.images)
    {
		if (image.indexOf("on.png") != -1) {
			document[name].src = eval("on.src");
			
		} else if (image.indexOf("off.png") != -1) {
			document[name].src = eval("off.src");

		} else if (image.indexOf("onoff.png") != -1) {
			document[name].src = eval("onoff.src");
			
		} else if (image.indexOf("on150.png") != -1) {
			document[name].src = eval("on150.src");
			
		} else if (image.indexOf("off150.png") != -1) {
			document[name].src = eval("off150.src");
			
		} else if (image.indexOf("onoff150.png") != -1) {
			document[name].src = eval("onoff150.src");
			
		} else {
			alert("Image not found: " + image);
		}
	}
}

function cmdTimeout(href)
{
	cmd = href;
	setTimeout("cmdExec()", 1000);
}

function cmdExec()
{
	if (cmd) {
		document.location.href = cmd;
	}
}

</script>

</head>

<!-- device="Kök (bord)" on="on.png" off="off.png" onoff="onoff.png" onhover="on150.png" offhover="off150.png" onoffhover="onoff150.png" -->
<!-- device="Vardagsrum (gul)" on="on.png" off="off.png" onoff="onoff.png" onhover="on150.png" offhover="off150.png" onoffhover="onoff150.png"-->

<body bgcolor="#ffffff" background="/nexahome/nexahome_bg.jpg">

<img style="position:absolute;top:0px;left:0px" src="/nexahome/house_819_layout.png">

<div style="position: absolute; top: 176px; left: 291px">
<a href="#URL#?mypage=demo2&psw=#PSW#&device=#ID#Kök (bord)#&cmd=#CMD#Kök (bord)#&rnd=#RND#"
	onMouseOver='
		imgChange("device_#ID#Kök (bord)#", "#IMAGEHOVER#Kök (bord)#");
		cmdTimeout("#URL#?mypage=demo2&psw=#PSW#&device=#ID#Kök (bord)#&cmd=#CMD#Kök (bord)#&rnd=#RND#")'
	onMouseOut='imgChange("device_#ID#Kök (bord)#", "#IMAGE#Kök (bord)#")'>
<img name="device_#ID#Kök (bord)#" src="#IMAGE#Kök (bord)#" border="0" alt="?"></a>
</div>

<div style="position: absolute; top: 205px; left: 105px">
<a href="#URL#?mypage=demo2&psw=#PSW#&device=#ID#Vardagsrum (gul)#&cmd=#CMD#Vardagsrum (gul)#&rnd=#RND#"
	onMouseOver='imgChange("device_#ID#Vardagsrum (gul)#", "#IMAGEHOVER#Vardagsrum (gul)#")'
	onMouseOut='imgChange("device_#ID#Vardagsrum (gul)#", "#IMAGE#Vardagsrum (gul)#")'>
<img name="device_#ID#Vardagsrum (gul)#" src="#IMAGE#Vardagsrum (gul)#" border="0" alt="?"></a>
</div>

<div style="position: absolute; top: 310px; left: 25px;">
<form action="nexahome" method="get">
<input type=hidden name="mypage" value="demo2">
<input type=hidden name="psw" value="#PSW#">
<input type=hidden name="rnd" value="#RND#">
<input type=submit value="#TIMESTAMP#">
</form>
</div>

</body>
</html>
3) ändra till rätt namn på mottagare och bilder

4) starta NexaHome 2.3.3

5) öppna websidan demo2 och för muspekaren över de två mottagarna, en av mottagarna är definierad så att kommandot går iväg utan att man behöver klicka

/Henrik

Re: html fråga i relation till nexushome

Posted: Fri Mar 17, 2023 9:45 am
by sijto
I brist på bättre tråd så har jag en annan html-fråga... Någon som fått till sliders för att ställa dimningsnivån?

I HTML5 är det ju uberlätt men stödet från weblasare för range-funktionen är begränsat till Chrome.