eigene HTML Seiten

Antworten
Frank2018
Beiträge: 6
Registriert: Mi 6. Jun 2018, 17:08

Do 21. Jun 2018, 19:29

Ich hab es endlich geschafft die 'weather.json' per JS einzulesen und die Daten auf einer eigenen Seite darzustellen:
Raumklima.jpg
Raumklima.jpg (153.12 KiB) 2135 mal betrachtet
Da ja öfter schon nach soetwas gefragt wurde, hier meine beiden Dateien:

klima.htm

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Klima</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Cache-control" content="public,max-age=86400">

<link rel="stylesheet" type="text/css" href="klima.css"> 

<script>
function timedRefresh(timeoutPeriod) {
	setTimeout("location.reload(true);",timeoutPeriod);
}
window.onload = timedRefresh(60000);
</script>

</head>
<body>

<div class="balken kopfzeile" >
  <div class="text"> 
    <span class="tittel">
      Raumklima
    </span>
    <span class="menu">  
      <span class="menupunkt">
        Licht
      </span>
      <span class="menupunkt">
        <a href="index.htm">Szenen</a>
      </span>
    </span>  
  </div>

</div>

<div id="Raumklimadaten"></div>

<script>

var raumdaten = {
	"Wohnzimmer":"channel7",
	"Garten":"channel8",
	"Schlafzimmer":"channel6",  
	"Bad":"channel9"
};
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);   
      	for (x in raumdaten) {
		      kanal = raumdaten[x]; 
          if (myObj[kanal].temperature == "") 
            {
            document.getElementById("Raumklimadaten").innerHTML += "<div class='raum balken'><div class='text'><span class='raumname'>" + x + " :</span> keine Daten</div></div>";
            }
          
          else
            {
            document.getElementById("Raumklimadaten").innerHTML += "<div class='raum balken'><div class='text'><span class='raumname'>" + x + " :</span> " + myObj[kanal].temperature + "&deg;C  /  " + myObj[kanal].humidity + "%</div></div>";
	          }
        };
	  };
};
xmlhttp.open("GET", "weather.json", true);
xmlhttp.send();

</script>

<div class="wetter">
  <div id="cont_3cbbfaa59c0576f6944cb7edfc4cc9c4"><script type="text/javascript" async src="https://www.daswetter.com/wid_loader/3cbbfaa59c0576f6944cb7edfc4cc9c4"></script></div>
</div>
</body>
</html>
klima.css:

Code: Alles auswählen

body {
  font-family: 'Titillium Web',sans-serif;  
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQIW2NkwAQ+jGhiPgwMDFuQBcECIEUwQbgATBBFACQIALmgBFKywiuGAAAAAElFTkSuQmCC);	
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none; 
    color:white;
}

.balken
{
	position: relative;
	z-index: 10;
	height: 60px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: black;
	color: white;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
  font-size: 36px;
  border-radius: 20px;    
  margin:10px;
}
  
.kopfzeile
{			
	background: linear-gradient(to bottom,#a8e2a8 0%,#476b47 100%);	 
}  	  

.raum
{			
 	background: linear-gradient(to bottom,#ffaa00 0%,#ac7300 100%);	   
}  	

.text
{
  line-height: 60px;
  margin-left: 20px;
}

.tittel
{
   float:left;
} 

.menu
{
  float:right;  
  margin-right: 20px;
} 

.menupunkt
{
  float:inherit; 
  padding-left: 20px; 
  padding-right: 20px;
  margin-right: 0px;
  border-left-width: 5px;
  border-left-style: solid;
}

.wetter
{			
	position: relative;
	z-index: 10;
	padding: 20px;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: black;
	color: white;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background: linear-gradient(to bottom,#ffaa00 0%,#ac7300 100%);	   
  font-size: 36px;
  border-radius: 20px;  
  margin: 10px;
}  	  

span.raumname
{
  display:inline-block; 
  width:250px;
}
Finde es für meinen ersten Versuch ganz gut gelungen ;)
Simon
Beiträge: 564
Registriert: Sa 19. Mär 2016, 20:03

Sa 23. Jun 2018, 13:40

Danke dafür!
Habe ich mal als Vorlage für mich genommen, werde mal schauen, ob ich das auf mein kleines 7" Tablet anpasse.
Habe die Kanäle an meine angepasst, aber momentan zeigt er bei mir aber noch keine Tempdaten an, nur ~ostemp(5) / ~oshum(5) etc. pp. Mal schauen wo der Haken sitzt... :D

Also, die weather.json bekommt Daten, wenn ich sie via IP im Web auflöse. Aber woher kriegt denn Deine GUI diese Infos konkret her?
Frank2018
Beiträge: 6
Registriert: Mi 6. Jun 2018, 17:08

Mo 25. Jun 2018, 17:06

Das hört sich so an als wenn du die beiden Dateien nicht auf deinen Air übertragen hast, sondern auf deinem Rechner geöffnet hast.

Die beiden Dateien müssen in dein Theme Verzeichnis kopiert werden.
Bei mir ist das
D:\AirStudio\Theme 3
.
Dann im airStudio auf übertragen drücken und die Dateien sind auf deinem Air.

Jetzt kannst du mit ip.deines.air/klima.htm die Seite aufrufen.
Simon
Beiträge: 564
Registriert: Sa 19. Mär 2016, 20:03

Mo 25. Jun 2018, 17:33

Ah okay. Bäume und so. ;)
Danke für den Hint. :D
Klappt perfekt nun :!:
Frank2018
Beiträge: 6
Registriert: Mi 6. Jun 2018, 17:08

Di 26. Jun 2018, 05:09

Sehr schön, gern geschehen :D
Antworten