Real Weather (Bald)

wawyo

@liv-in-sky
es sind 14 Bilder in png Format.
Die Animation ist spielerei mit JS und CSS Filter

liv-in-sky

@wawyo

bin gespannt auf die"spielereien"

sigi234

@wawyo

Geilomat......Wann Online?

Burg_Io

@wawyo

schöne sache. da ist man auf´s testen gespannt.

wawyo

@sigi234
Es dauert (2-3 Wochen)!
Aber zum testen gerne
Weather-Dateien.zip

ich habe die Bilder unter http://xxx.xxx.xxx.xxx:8082/vis.0/Wetter/WeatherAnimation (Iobroker IP)

Edit1:

ACHTUNG! getestet nur mit FireFox, Chrome und Fully.
Unter Weather.html muss die IP Adresse angepasst werden.

sigi234

@wawyo

Ok, wie bringe ich das jetzt in Vis? Die HTML?

Erledigt.

Die Schrift kann man bei einen schwarzen Hintergrund nicht lesen.

Screenshot (4217).png

wawyo

@sigi234
1- Weather.html anpassen:
ändere alle

Weather-Dateien/**.png

zu

http://192.168.xxx.xx:8082/vis.0/Wetter/WeatherAnimation/**.png

2- Erstelle Basic html unter vis (600px X 300px)
3- Weater.html Code kopieren unter Basic html .

4- Importiere die Daten von DasWetter Adapter.
(Du brauchst WeatherStation.0.Weatherurl Datenpunkt)

Datenpunkt Code:

{
  "common": {
    "name": "WeatherAnimation",
    "desc": "WeatherAnimation",
    "type": "number",
    "role": "value",
    "read": true,
    "write": true,
    "def": false
  },
  "native": {},
  "acl": {
    "object": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator",
    "state": 1636
  },
  "_id": "WeatherStation.0.WeatherAnimation",
  "type": "state",
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1629733667565
}

5- Script unter Javascript Adapter:

var ImageName, ImageNumber, ImageNumberConverted, NewLink;

on({id: "daswetter.0.NextHours.Location_1.Day_1.current.iconURL", change: "any"}, async function (obj) {
  var value = obj.state.val;
  var oldValue = obj.oldState.val;
  ImageName = (obj.state ? obj.state.val : "").split('/');
  ImageNumber = ImageName[6];
  ImageNumberConverted = parseFloat((ImageNumber.slice(0, ImageNumber.length - 4)));
  var sunrise = getDateObject(getAstroDate("sunrise", undefined, 0));
  var sunrise_m = sunrise.getHours() * 60 + sunrise.getMinutes();

  var sunset = getDateObject(getAstroDate("sunset", undefined, 0));
  var sunset_m = sunset.getHours() * 60 + sunset.getMinutes();

  var now = new Date();
  var now_m = now.getHours() * 60 + now.getMinutes();

setState("WeatherStation.0.WeatherAnimation", ImageNumberConverted);

if (now_m > sunset_m - 60 && now_m <= sunset_m + 60) {
    log("dusk" + sunrise_m + " " + sunset_m);
    setState("WeatherStation.0.Weatherurl", (obj.state ? obj.state.val : ""));
} else if (now_m > sunrise_m - 60 && now_m <= sunrise_m + 60) {
    log("dawn" + sunrise_m + " " + sunset_m);
    NewLink = ['http://192.168.xxx.xx:8082/vis.0/Wetter/myweather/',ImageNumberConverted + 50,'.png'].join('');
    setState("WeatherStation.0.Weatherurl", NewLink);
} else if (now_m > sunrise_m + 60 && now_m <= sunset_m - 60) {
    log("day" + sunrise_m + " " + sunset_m);
    setState("WeatherStation.0.Weatherurl", (obj.state ? obj.state.val : ""));
} else {
    log("night" + sunrise_m + " " + sunset_m);
    NewLink = ['http://192.168.xxx.xx:8082/vis.0/Wetter/myweather/',ImageNumberConverted + 50,'.png'].join('');
    setState("WeatherStation.0.Weatherurl", NewLink);
}
});

Glasfaser

@wawyo sagte in Real Weather (Bald):

(Du brauchst WeatherStation.0. Weatherurl Datenpunkt)

Kommt noch ein Adapter von dir , sonst für selbst erstellte Datenpunkte ist das sehr schlecht gewählt ?

wawyo

@glasfaser
Ja, der Adapter ist geplant.
Es wird dauern bis zum Release.

@all ich bin offen für alle Anfragen ️

Edit:
Bitte verzeiht mir wenn ich nicht sofort antworten kann.

sigi234

@wawyo

Puh, jetzt wird es kompliziert, warte auf den Adapter.

Habe mal es in einen iFrame Widget getestet.

Das Non plus ultra wären natürlich sound effects

Chaot

@sigi234 sagte in Real Weather (Bald):

Das Non plus ultra wären natürlich sound effects

Nachts um Vier Gewitter am Tablet.
Ich fürchte dann könnte ich zukünftig mit dem IoBroker in die Garage umziehen.......

sigi234

@chaot sagte in Real Weather (Bald):

@sigi234 sagte in Real Weather (Bald):

Das Non plus ultra wären natürlich sound effects

Nachts um Vier Gewitter am Tablet.
Ich fürchte dann könnte ich zukünftig mit dem IoBroker in die Garage umziehen.......

Eventuell als Option und nur zwischen Zeit xy

sigi234

@glasfaser sagte in Real Weather (Bald):

Kommt noch ein Adapter von dir , sonst für selbst erstellte Datenpunkte ist das sehr schlecht gewählt ?

Hast du das schon getestet? Punkte 1-5
Punkt 4 ?

DP sollte eher unter 0_userdata.0 sein?

Glasfaser

@sigi234
Ja habe es unter 0_userdata.0 angelegt .

Alles soweit geändert ,
nur bei der Scenenänderung behält er die alte Auswahl im Hintergrund , dadurch sind zwei Scenen vorhanden und erst bei einem View neuladen ist die gewünschte Scene richtig.

var ImageName, ImageNumber, ImageNumberConverted, NewLink;



on({id: "daswetter.0.NextHours.Location_1.Day_1.current.iconURL", change: "any"}, async function (obj) {

 var value = obj.state.val;

 var oldValue = obj.oldState.val;

 ImageName = (obj.state ? obj.state.val : "").split('/');

 ImageNumber = ImageName[6];

 ImageNumberConverted = parseFloat((ImageNumber.slice(0, ImageNumber.length - 4)));

 var sunrise = getDateObject(getAstroDate("sunrise", undefined, 0));

 var sunrise_m = sunrise.getHours() * 60 + sunrise.getMinutes();



 var sunset = getDateObject(getAstroDate("sunset", undefined, 0));

 var sunset_m = sunset.getHours() * 60 + sunset.getMinutes();



 var now = new Date();

 var now_m = now.getHours() * 60 + now.getMinutes();



setState("0_userdata.0.RealWeather.WeatherAnimation", ImageNumberConverted);



if (now_m > sunset_m - 60 && now_m <= sunset_m + 60) {

   log("dusk" + sunrise_m + " " + sunset_m);

   setState("0_userdata.0.RealWeather.Weatherurl", (obj.state ? obj.state.val : ""));

} else if (now_m > sunrise_m - 60 && now_m <= sunrise_m + 60) {

   log("dawn" + sunrise_m + " " + sunset_m);

   NewLink = ['http://192.168.178.11:8082/vis.0/Wetter/myweather/',ImageNumberConverted + 50,'.png'].join('');

   setState("0_userdata.0.RealWeather.Weatherurl", NewLink);

} else if (now_m > sunrise_m + 60 && now_m <= sunset_m - 60) {

   log("day" + sunrise_m + " " + sunset_m);

   setState("0_userdata.0.RealWeather.Weatherurl", (obj.state ? obj.state.val : ""));

} else {

   log("night" + sunrise_m + " " + sunset_m);

   NewLink = ['http://192.168.178.11:8082/vis.0/Wetter/myweather/',ImageNumberConverted + 50,'.png'].join('');

   setState("0_userdata.0.RealWeather.Weatherurl", NewLink);

}

});

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
 <body onload="FirstStartWeather()">

   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/01.png" id="SkyBack" class="Sky"></div>
   <div class="twinkling"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/02.png" id="Startshoot" class="StartShooting" style="--Shoot-X1: 0px; --Shoot-X2: 600px; --Shoot-Z1: 280deg; --Shoot-Z2: 280deg; --Shoot-Time: 3000ms; animation-play-state: paused; visibility: hidden;"></div>

   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/2.png" id="Ray" class="AnimateRay" style="visibility: visible; animation-play-state: running;"> </div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/1.png" id="Sun" class="AnimateSun" style="visibility: visible; animation-play-state: running;"></div>

   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/3.png" id="Cloud1" class="AnimateChildCloud" style="visibility: hidden; animation-play-state: paused;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/3.png" id="Cloud2" class="AnimateSubCloud" style="visibility: hidden; animation-play-state: paused;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/3.png" id="Cloud3" class="AnimateCloud" style="visibility: hidden; animation-play-state: paused; --Cloud-Y1: -10%;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/3.png" id="Cloud4" class="AnimateDarkCloud" style="visibility: hidden; animation-play-state: paused;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/3.png" id="Cloud5" class="AnimateSubDarkCloud" style="visibility: hidden; animation-play-state: paused;"></div>

   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/5.png" id="Lightning" class="AnimateLightning" style="animation-play-state: paused; visibility: hidden;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/6.png" id="LightningChild" class="AnimateLightningChild" style="animation-play-state: paused; visibility: hidden;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/7.png" id="LightningSub" class="AnimateLightningSub" style="animation-play-state: paused; visibility: hidden;"></div>
   <div><img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/7.png" id="LightningBack" class="AnimateLightningBack" style="animation-play-state: paused; visibility: hidden;"></div>

   <div class="Rainstorm" id="RainAnimation">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDropBack" class="Rain-Back">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop1" class="Rain-1" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop2" class="Rain-2" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop3" class="Rain-3" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop4" class="Rain-4" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop5" class="Rain-5" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop6" class="Rain-6" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop7" class="Rain-7" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop8" class="Rain-8" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop9" class="Rain-9" style="visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="RainDrop10" class="Rain-10" style="visibility: hidden; animation-play-state: paused;">
   </div>

   <div class="Snowstorm" id="SnowAnimation">
   	<img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-1" class="fallingSnow-1" style="--animation-time: 6s; visibility: hidden; animation-play-state: paused;">
   	<img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-2" class="fallingSnow-2" style="--animation-time: 5s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-3" class="fallingSnow-3" style="--animation-time: 4s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-4" class="fallingSnow-4" style="--animation-time: 6s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-5" class="fallingSnow-5" style="--animation-time: 6s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-6" class="fallingSnow-6" style="--animation-time: 7s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-7" class="fallingSnow-7" style="--animation-time: 5s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-8" class="fallingSnow-8" style="--animation-time: 5s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-9" class="fallingSnow-9" style="--animation-time: 7s; visibility: hidden; animation-play-state: paused;">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="Snow-10" class="fallingSnow-10" style="--animation-time: 5s; visibility: hidden; animation-play-state: paused;">
   </div>

   <div class="wrapLeaf">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/9.png" id="Leaf" class="AnimateWind" style="animation-play-state: paused; visibility: hidden;">
   	<img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/8.png" id="Leaf2" class="AnimateSubWind" style="animation-play-state: paused; visibility: hidden;">
   </div>

   <div class="Icicle">
       <img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/4.png" id="Icicle1" class="Icicle-1" style="--animation-W: 1; --animation-H: 1; --animation-Y: -27.5%;">
   	<img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/10.png" id="IcicleSub1" class="IcicleWater-1" style="--animation-W1: 187.5%; --animation-W2: 217.5%;">
   	<img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/12.png" id="IcicleSub2" class="IcicleGlass-1" style="visibility: hidden;">
   	<img src="http://192.168.178.11:8082/vis.0/Wetter/myweather/4.png" id="Icicle2" class="Icicle-2">
   </div>



   <div class="controlWeather">
       <div>
   	    <p></p>Animation Number: <input type="number" style="margin-top: 40%;" id="myWeather" value="1">
   		<button onclick="FirstStartWeather()">Change Weather</button>
       </div>
       <div><label id="State"> Sun Ray</label></div>
   	<div><input type="checkbox" id="WindCheckBox" onclick="FirstStartWind()"></div>
   </div>

<style>


body {
   height: 300px;
   width: 600px;
   position: absolute;
}

.controlWeather{
   margin-top: 15%;
   margin-left: 5%;
}

/*-----------------------------------------Sky--------------------------------------*/
.Icicle {
   width: 600px;
   height: 280px;
   margin-top: -50%;
   margin-left: -2%;
   z-index: 19;
   background: #ff0000;
}


.Icicle-1 {
   position: absolute;
   margin-top: 5%;
   margin-left: 20%;
   width: 25px;
   height: 100px;
   z-index: 10;
   transform: translateY(var(--animation-Y)) scaleX(var(--animation-W)) scaleY(var(--animation-H));
}

.IcicleWater-1{
   position: absolute;
   margin-top: 5%;
   margin-left: 20%;
   width: 25px;
   height: 25px;
   z-index: 11;
   animation: AnimationIcicle-1 3s linear infinite;
}

@keyframes AnimationIcicle-1 {

   0%{
   	transform: translateY(30%) rotate(3deg);
   }
   10%{
   	transform: translateY(60%) rotate(6deg);
   }
   20%{
   	transform: translateY(90%) rotate(0deg);
   }
   30%{
   	transform: translateY(120%) rotate(3deg) scaleY(2);
   }
   40%{
   	transform: translateY(210%) rotate(6deg);
   }
   50%{
   	transform: translateY(var(--animation-W1)) rotate(3deg);
   }
   60%{
   	transform: translateY(var(--animation-W2)) rotate(0deg);
   	opacity : 1;
   }
   70%{
   	transform: translateY(var(--animation-W2)) scaleY(2) scaleX(0.8);
   }
   80%{
   	transform: translateY(500%) rotate(3deg) scaleY(1);
   }
   90%{
   	transform: translateY(975%) scaleX(1) scaleY(0.3) rotate(0);
   	filter:contrast(200%) brightness(150%) saturate(8);
   	opacity : 1;
   }
   95%{
       transform: translateY(950%) scaleX(3) scaleY(0.1);
   	filter: blur(5px);
   	opacity : 0.5;
   }
   100%{
   	transform: translateY(925%) rotate(180deg) scaleX(5) scaleY(0.8) rotate(180deg);
   	filter: brightness(10000%) sepia(80) saturate(10) hue-rotate(180deg);
       opacity : 0;
   }
}

.IcicleGlass-1 {
   position: absolute;
   margin-top: 42%;
   margin-left: 5%;
   width: 200px;
   height: 70px;
   z-index: 11;
   filter: invert(100%) brightness(2000%);
}

.Icicle-2 {
   position: absolute;
   margin-top: 5%;
   margin-left: 30%;
   width: 15px;
   height: 75px;
   z-index: 10;
}

/*-----------------------------------------Sky--------------------------------------*/
.Sky {
   margin-top: -2%;
   margin-left: -2%;
   position: absolute;
   height: 300px;
   width: 600px;
   background: #000000;
   z-index: 0;
}
.twinkling{
   margin-top: -2%;
   margin-left: -2%;
   position: absolute;
   height: 300px;
   width: 600px;
   background: transparent url('http://xxx.xxx.xxx.xxx:8082/vis.0/Wetter/WeatherAnimation/00.png') repeat center;
   z-index: 1;
   animation: SkyAnimation 50s linear infinite;
}
.StartShooting {
   position: absolute;
   margin-top: -20%;
   margin-left: -5%;
   width: 30px;
   height: 30px;
   z-index: 2;
   animation: ShootingAnimation var(--Shoot-Time) infinite;
}
@keyframes SkyAnimation {
   0% {
   background-position: 600px -300px;
   background-size: 150px 150px;
   }
   50% {
   background-position: 0px 0px;
   background-size: 500px 500px;
   }
   100% {
   background-position: 600px -300px;
   background-size: 150px 150px;
   }
}

@keyframes ShootingAnimation {
   0% {
   transform: translate(var(--Shoot-X1), 300px) scaleX(1) scaleY(1) rotate(var(--Shoot-Z1));
   opacity : 1;
   }
   100% {
   transform: translate(var(--Shoot-X2), 50px) scaleX(0.1) scaleY(0.1) rotate(var(--Shoot-Z2));
   opacity : 0;
   }
}

/*-------------------------------------Sun---------------------------------------*/
.AnimateSun {
   position: absolute;
   margin-top: -5%;
   margin-left: 20%;
   width: 300px;
   height: 300px;
   z-index: 4;
   animation-name : sunRotate;
   animation-duration : 10s;
   animation-iteration-count : infinite;
   animation-direction : alternate;
}
@keyframes sunRotate {
   from {
   transform: rotate(0deg);
   }
   to {
   transform: rotate(59deg);
   }
}
/*-------------------------------------Ray---------------------------------------*/
.AnimateRay {
   position: absolute;
   margin-top: -15%;
   margin-left: 15%;
   width: 400px;
   height: 400px;
   z-index: 3;
   animation-name : RayRotate, RayShrink;
   animation-duration : 10s, 5s;
   animation-iteration-count : infinite , infinite ;
   animation-direction : alternate , alternate ;
}
@keyframes RayRotate {
   from {
   transform: rotate(0deg);
   opacity : 0;
   }
   to {
   transform: rotate(359deg);
   }
}
@keyframes RayShrink {
   0%{
   transform: scale(0.2);
   opacity : 0.2;
   }
   50%{
   transform: scale(0.5);
   opacity : 0.5;
   }
   75%{
   opacity : 0.3;
   transform: scale(2);
   }
   100%{
   opacity : 0;
   transform: scale(0.3);
   }
}


/*------------------------------------Cloud 1---------------------------------------*/
.AnimateCloud {
   position: absolute;
   margin-top: var(--Cloud-Y1);
   margin-left: 2%;
   width: 400px;
   height: 350px;
   z-index: 5;
   animation-name : CloudFade, CloudMove;
   animation-duration : 5s, 20s;
   animation-iteration-count : infinite , infinite ;
   animation-direction : alternate , alternate ;
   animation-delay: -2s;
}
@keyframes CloudFade {
   from {
   opacity : 0.7;
   }
   to {
   opacity : 0.5;
   }
}
@keyframes CloudMove {
   0% {
   transform: translateX(30%);
   }
   50% {
   transform: translateX(5%);
   }
   100% {
   transform: translateX(40%);
   }
}
@keyframes CloudShrink {
   0%{
   transform: scale(0.7);
   box-shadow: none;
   }
   100%{
   transform: scale(0.3);
   box-shadow: none;
   }
}
/*-------------------------------------Cloud 2------------------------------------*/
.AnimateChildCloud {
   position: absolute;
   margin-top: var(--CloudChild-Y1);
   margin-left: 2%;
   width: 300px;
   height: 250px;
   z-index: 5;
   animation-name : ChildCloudFade, ChildCloudMove;
   animation-duration : 5s, 15s;
   animation-iteration-count : infinite , infinite ;
   animation-direction : alternate , alternate ;
   animation-delay: -3s;
}
@keyframes ChildCloudFade {
   from {
   opacity : 0.7;
   }
   to {
   opacity : 0.5;
   }
}
@keyframes ChildCloudMove {
   0% {
   transform: translateX(30%);
   }
   50% {
   transform: translateX(5%);
   }
   100% {
   transform: translateX(40%);
   }
}
/*------------------------------------Cloud 3---------------------------------------*/
.AnimateSubCloud {
   position: absolute;
   margin-top: var(--CloudSub-Y1);
   margin-left: -10%;
   width: 450px;
   height: 400px;
   z-index: 5;
   animation-name : SubCloudFade, SubCloudMove;
   animation-duration : 5s, 25s;
   animation-iteration-count : infinite , infinite ;
   animation-direction : alternate , alternate ;
   animation-delay: -1s;
}
@keyframes SubCloudFade {
   from {
   opacity : 0.7;
   }
   to {
   opacity : 0.5;
   }
}
@keyframes SubCloudMove {
   0% {
   transform: translateX(30%);
   }
   50% {
   transform: translateX(5%);
   }
   100% {
   transform: translateX(40%);
   }
}

/*------------------------------------Cloud 4---------------------------------------*/
.AnimateDarkCloud {
   position: absolute;
   margin-top: -20%;
   margin-left: -10%;
   width: 450px;
   height: 400px;
   z-index: 5;
   animation-name : DarkCloudFade, DarkCloudMove;
   animation-duration : 2s, 20s;
   animation-iteration-count : infinite , infinite ;
   animation-direction : alternate , alternate ;
   animation-delay: -2s;
}
@keyframes DarkCloudFade {
   from {
   opacity : 1;
   }
   to {
   opacity : 0.8;
   }
}
@keyframes DarkCloudMove {
   0% {
   transform: translateX(15%) rotate(-5deg);
   filter: grayscale(100%) contrast(100%) invert(90%);
   }
   50% {
   transform: translateX(30%) rotate(5deg);
   filter: grayscale(100%) contrast(80%) invert(100%);
   }
   100% {
   transform: translateX(40%) rotate(0deg);
   /*filter: saturate(5) grayscale(100%) contrast(200%) brightness(100) blur(1px) invert(1000%) sepia(100%) hue-rotate(180deg) opacity(50%);*/
   filter: grayscale(100%) contrast(100%)invert(90%);
   }
}

/*------------------------------------Cloud 5---------------------------------------*/
.AnimateSubDarkCloud {
   position: absolute;
   margin-top: -15%;
   margin-left: -10%;
   width: 450px;
   height: 400px;
   z-index: 5;
   animation-name : SubDarkCloudFade, SubDarkCloudMove;
   animation-duration : 5s, 25s;
   animation-iteration-count : infinite , infinite ;
   animation-direction : alternate , alternate ;
   animation-delay: -4s;
}
@keyframes SubDarkCloudFade {
   from {
   opacity : 1;
   }
   to {
   opacity : 0.8;
   }
}
@keyframes SubDarkCloudMove {
   0% {
   transform: translateX(30%);
   filter: grayscale(100%) contrast(100%) invert(90%);
   }
   50% {
   transform: translateX(10%);
   filter: grayscale(100%) contrast(80%) invert(100%);
   }
   100% {
   transform: translateX(40%);
   filter: grayscale(100%) contrast(100%)invert(90%);
   }
}

/*-------------------------------------lightning---------------------------------------*/
.AnimateLightning {
   position: absolute;
   margin-left: 20%;
   width: 300px;
   height: 300px;
   z-index: 6;
   animation: fadeLightning 10s linear infinite;
}
@keyframes fadeLightning {
   0% {
   opacity : 1;
   }
   2% {
   opacity : 0;
   }
   4% {
   opacity : 1;
   }
   6% {
   opacity : 0;
   }
   100% {
   opacity : 0;
   }
}
/*-------------------------------------lightningChild---------------------------------------*/
.AnimateLightningChild {
   position: absolute;
   margin-left: 20%;
   width: 300px;
   height: 300px;
   z-index: 6;
   animation: fadeLightningChild 7s linear infinite;
}
@keyframes fadeLightningChild {
   0% {
   opacity : 1;
   }
   2% {
   opacity : 0;
   }
   4% {
   opacity : 1;
   }
   6% {
   opacity : 0;
   }
   100% {
   opacity : 0;
   }
}
/*-------------------------------------lightningSub---------------------------------------*/
.AnimateLightningSub {
   position: absolute;
   margin-left: 10%;
   margin-top: -15%;
   width: 400px;
   height: 400px;
   z-index: 6;
   animation: fadeLightningSub 5s linear infinite;
}
@keyframes fadeLightningSub {
   0% {
   opacity : 1;
   }
   2% {
   opacity : 0;
   }
   4% {
   opacity : 1;
   }
   6% {
   opacity : 0;
   }
   100% {
   opacity : 0;
   }
}
/*-------------------------------------lightningBacK---------------------------------------*/
.AnimateLightningBack {
   position: absolute;
   margin-left: 10%;
   margin-top: -5%;
   border-radius: 90%;
   box-shadow: 0px 0px 50px 50px rgba(255,255,255,1);
   width: 400px;
   height: 300px;
   filter:blur(50px);
   z-index: 3;
   animation: fadeLightningBack 7s linear infinite;
}
@keyframes fadeLightningBack {
   0% {
   opacity : 1;
   background-color: #ffffff;
   }
   2% {
   opacity : 0;
   }
   100% {
   opacity : 0;
   }
}

/*----------------------------------------Rain---------------------------------------*/
.Rainstorm {
   position: relative;
   width: 600px;
   height: 280px;
}
.Rain-1 {
   position: absolute;
   margin-left: 30%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
}
.Rain-2 {
   position: absolute;
   margin-left: 20%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -1s;
}
.Rain-3 {
   position: absolute;
   margin-left: 35%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -1.5s;
}
.Rain-4 {
   position: absolute;
   margin-left: 60%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -2s;
}
.Rain-5 {
   position: absolute;
   margin-left: 40%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -2.5s;
}
.Rain-6 {
   position: absolute;
   margin-left: 50%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -3s;
}
.Rain-7 {
   position: absolute;
   margin-left: 25%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -2s;
}
.Rain-8 {
   position: absolute;
   margin-left: 55%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -2.5s;
}
.Rain-9 {
   position: absolute;
   margin-left: 45%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -2s;
}
.Rain-10 {
   position: absolute;
   margin-left: 65%;
   margin-top: 20%;
   width: 30px;
   height: 30px;
   z-index: 3;
   animation: RainSubAnimation 0.8s infinite;
   animation-delay: -1.5s;
}
.Rain-Back {
   position: absolute;
   margin-left: 2%;
   margin-top: 40%;
   width: 500px;
   height: 5px;
   z-index: 3;
   border-radius: 70%;
   box-shadow: 0px 5px 20px 10px rgba(255,255,255,1);
   filter: brightness(10000%) contrast(100000%);
   background: white;
   opacity : 0.1;
}
@keyframes RainSubAnimation {
   0% {
   opacity : 0.4;
   transform: translate(10%, -50%) scaleX(0.5) scaleY(1) rotate(-16deg);

   }
   70% {
   transform: translate(10%, 340%) scaleX(0.7) scaleY(1) rotate(-16deg);
   }
   90% {
   transform: translate(10%, 350%) scaleX(1.5) scaleY(0) rotate(0);
   opacity : 1;
   }
   100% {
   transform: translate(10%, 330%) scaleX(5) scaleY(2) rotate(180deg);
   filter: brightness(10000%) sepia(80) saturate(10) hue-rotate(180deg);
   opacity : 0;
   }
}

/*----------------------------------------Snow---------------------------------------*/
.Snowstorm {
   position: absolute;
   width: 600px;
   height: 280px;
}
.fallingSnow-1 {
   margin-top: -25%;
   margin-left: 0%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
}

.fallingSnow-2 {
   margin-top: -25%;
   margin-left: 15%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -2s;
}

.fallingSnow-3 {
   margin-top: -25%;
   margin-left: 40%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -4s;
}

.fallingSnow-4 {
   margin-top: -25%;
   margin-left: 20%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -3s;
}

.fallingSnow-5 {
   margin-top: -25%;
   margin-left: 30%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -5s;
}

.fallingSnow-6 {
   margin-top: -25%;
   margin-left: 5%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -4s;
}

.fallingSnow-7 {
   margin-top: -25%;
   margin-left: 35%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -3s;
}

.fallingSnow-8 {
   margin-top: -25%;
   margin-left: 25%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -2s;
}

.fallingSnow-9 {
   margin-top: -25%;
   margin-left: 45%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -4s;
}

.fallingSnow-10 {
   margin-top: -25%;
   margin-left: 10%;
   position: absolute;
   height: 0px;
   width: 0px;
   z-index: 7;
   border-radius: 100%;
   box-shadow: 0px 0px 5px 5px rgba(255,255,255,1);
   filter: brightness(100%) contrast(100%);
   animation: fallingSnow var(--animation-time) infinite linear;
   animation-delay: -2s;
}

@keyframes fallingSnow {
 0% {
   opacity: 1;

   transform: translate(100px, 0) rotateZ(0deg);
 }
 15% {
   opacity: 0.9;
   transform: translate(95px, 20px) rotateZ(90deg);
 }

 30% {
   opacity: 1;
   transform: translate(100px, 40px) rotateZ(180deg);
 }

 45% {
   opacity: 0.9;
   transform: translate(95px, 60px) rotateZ(270deg);
 }

  60% {
   opacity: 1;
   transform: translate(100px, 80px) rotateZ(270deg);
 }

  75% {
   opacity: 0.9;
   transform: translate(95px, 100px) rotateZ(270deg);
 }

 85% {
   opacity: 1;
   transform: translate(100px, 115px) rotateZ(270deg);
 }

 100% {
   opacity: 0;
   transform: translate(95px, 110px) rotateZ(360deg) scaleX(3) scaleY(2) ;
 }
}

/*-------------------------------------Wind---------------------------------------*/
.wrapLeaf {
   width: 600px;
   height: 280px;
   margin-top: -50%;
   margin-left: -2%;
   z-index: 19;
   background: #ff0000;
}

.AnimateWind {
   position: absolute;
   margin-top: 10%;
   margin-left: 0%;
   width: 200px;
   height: 200px;
   z-index: 10;
   animation-name : shrinkLeaf;
   animation-duration :  var(--Leaf-Z1);
   animation-iteration-count : infinite ;
}

@keyframes shrinkLeaf {
   0%{
   transform: translateY(var(--Leaf-X1)) scaleX(0.5) rotate(180deg);
   }
   10%{
   transform: translateX(var(--Leaf-X2)) scale(0.2) rotate(270deg);
   }
   20%{
   transform: translateX(var(--Leaf-X3)) scaleX(0.2) rotate(360deg);
   }
   30%{
   transform: translateX(var(--Leaf-X4)) scaleY(0.1) rotate(90deg);
   }
   40%{
   transform: translateX(var(--Leaf-X5)) scaleX(0.8) rotate(0deg);
   }
   50%{
   transform: translateY(var(--Leaf-X6)) scaleY(0.2) rotate(270deg);
   }
   10%{
   transform: translateX(var(--Leaf-X7)) scale(0.7) rotate(180deg);
   }
   70%{
   transform: translateX(var(--Leaf-X8)) scale(0.7) rotate(360deg);
   }
   80%{
   transform: translate(var(--Leaf-X9)) scaleY(0.1) scaleX(0.4) rotate(1440deg);
   }
   90%{
   transform: translateX(var(--Leaf-X10)) scaleX(0.4);
   }
   100%{
   transform: translateX(var(--Leaf-X10)) scale(0.2) rotate(270deg) scaleX(0.2);
   opacity : 0.9;
   }
}

.AnimateSubWind {
   position: absolute;
   margin-top: 10%;
   margin-left: 40%;
   width: 100px;
   height: 100px;
   z-index: 10;
   animation-name : shrinkLeaf2;
   animation-duration :  var(--Leaf2-Z1);
   animation-iteration-count : infinite ;
}

@keyframes shrinkLeaf2 {
   0%{
   transform: translateX(var(--Leaf2-X1)) rotate(180deg) scaleX(0.8);
   }
   20%{
   transform: translateY(var(--Leaf2-X2)) scale(0.7) scaleY(0.3);
   }
   30%{
   transform: scaleX(1) scaleY(0.7) rotate(270deg);
   }
   40%{
   transform: translateX(var(--Leaf2-X4)) scaleX(2) scaleY(0.7) rotate(720deg);
   }
   50%{
   transform: translate(var(--Leaf2-X3)) scaleX(0.2) scaleY(0.7) rotate(270deg);
   opacity : 1;
   }
   60%{
   transform: translateY(var(--Leaf2-X2)) scaleX(2) scaleY(0.7) rotate(720deg);
   }
   70%{
   transform: translateX(var(--Leaf2-X6))  scaleX(0.2) scaleY(0.5) rotate(360deg);
   }
   80%{
   transform: translateY(var(--Leaf2-X5)) translateX(var(--Leaf2-X6)) scaleY(1);
   }
   90%{
   transform: translateY(var(--Leaf2-X2)) scale(0.7) scaleY(0.3) rotate(720deg);
   }
   100%{
   transform: translateX(var(--Leaf2-X1)) rotate(180deg) scaleX(0.8);
   }
}

</style>
<script type="text/javascript">

//======================================Variable======================================================================
var WeatherValue = 0;
var OldWeatherValue = 0;
var WindValue = 0;
//======================================Get Variable===============================================================
var stateValue = Number(parseFloat('{daswetter.0.NextHours.Location_1.Day_1.current.clouds_value}'));
WindValue = Number(parseFloat('{daswetter.0.NextHours.Location_1.Day_1.current.wind_value}'));
WeatherValue = Number(parseFloat('{0_userdata.0.RealWeather.WeatherAnimation}'));
console.log("Cloud: " + stateValue);
console.log("Wind: " + WindValue);
console.log("Weather Icon: " + WeatherValue);

//=============================

/*var ImageName, ImageNumber, ImageNumberConverted, NewLink;

on({id: "daswetter.0.NextHours.Location_1.Day_1.current.iconURL", change: "any"}, async function (obj) {
 var value = obj.state.val;
 var oldValue = obj.oldState.val;
 ImageName = (obj.state ? obj.state.val : "").split('/');
 ImageNumber = ImageName[6];
 ImageNumberConverted = parseFloat((ImageNumber.slice(0, ImageNumber.length - 4)));
 var sunrise = getDateObject(getAstroDate("sunrise", undefined, 0));
 var sunrise_m = sunrise.getHours() * 60 + sunrise.getMinutes();

 var sunset = getDateObject(getAstroDate("sunset", undefined, 0));
 var sunset_m = sunset.getHours() * 60 + sunset.getMinutes();

 var now = new Date();
 var now_m = now.getHours() * 60 + now.getMinutes();

setState("0_userdata..0.WeatherAnimation", ImageNumberConverted);

if (now_m > sunset_m - 60 && now_m <= sunset_m + 60) {
   log("dusk" + sunrise_m + " " + sunset_m);
   setState("0_userdata..0.Weatherurl", (obj.state ? obj.state.val : ""));
} else if (now_m > sunrise_m - 60 && now_m <= sunrise_m + 60) {
   log("dawn" + sunrise_m + " " + sunset_m);
   NewLink = ['http://xxx.xxx.xxx.xxx:8082/vis.0/Wetter/myweather/',ImageNumberConverted + 50,'.png'].join('');
   setState("0_userdata..0.Weatherurl", NewLink);
} else if (now_m > sunrise_m + 60 && now_m <= sunset_m - 60) {
   log("day" + sunrise_m + " " + sunset_m);
   setState("0_userdata..0.Weatherurl", (obj.state ? obj.state.val : ""));
} else {
   log("night" + sunrise_m + " " + sunset_m);
   NewLink = ['http://xxx.xxx.xxx.xxx:8082/vis.0/Wetter/myweather/',ImageNumberConverted + 50,'.png'].join('');
   setState("0_userdata..0.Weatherurl", NewLink);
}
});*/

//======================================Start======================================================================
FirstStartWeather();
FirstStartWind();
RandomSnow(4, 7);
RandomShoot();
ShrinkIcicle();


function FirstStartWeather() {
   var WeatherVal = document.getElementById("myWeather").value;
   WeatherValue = parseFloat(WeatherVal);
   console.log("Cloud: " + stateValue);
   console.log("Wind: " + WindValue);
   console.log("Weather Icon: " + WeatherValue);
}

function FirstStartWind() {
   var checkBox = document.getElementById("WindCheckBox");
   if (checkBox.checked == true) {
       AnimateLeaf();
       AnimateLeaf2();
       document.getElementById('Leaf').style.visibility = 'visible';
       document.getElementById('Leaf2').style.visibility = 'visible';
       document.getElementById("Leaf").style.webkitAnimationPlayState = "running";
       document.getElementById("Leaf2").style.webkitAnimationPlayState = "running";

   } else {
       document.getElementById("Leaf").style.webkitAnimationPlayState = "paused";
       document.getElementById("Leaf2").style.webkitAnimationPlayState = "paused";
       document.getElementById('Leaf').style.visibility = 'hidden';
       document.getElementById('Leaf2').style.visibility = 'hidden';
       clearTimeout(LeafTimer1);
       clearTimeout(LeafTimer2);
   }
}
//======================================Update====================================================================
setInterval(function() {
    WeatherValue = Number(parseFloat('{0_userdata.0.RealWeather.WeatherAnimation}'));
   if (OldWeatherValue !== WeatherValue) {
       document.getElementById('State').innerText = "";
       //console.log(WeatherValue);
       OldWeatherValue = WeatherValue;
       switch (WeatherValue) {

           case 1:
               ShowSun();
               ShowRay();
               HideCloud1();
               HideCloud2();
               HideCloud3();
               HideCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               HideSnow();
               break;
           case 2:
               ShowSun();
               ShowRay();
               ShowCloud1();
               ShowCloud2();
               HideCloud3();
               HideCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               HideSnow();
               break;
           case 3:
               ShowSun();
               HideRay();
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               HideCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               HideSnow();
               break;
           case 4:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               HideSun();
               HideRay();
               HideSnow();
               break;
           case 5:
               ShowSun();
               ShowRay();
               ShowRain();
               HideLightning();
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               HideCloud4();
               HideCloud5();
               Rain1();
               HideSnow();
               break;
           case 6:
               ShowSun();
               HideRay();
               ShowRain();
               HideLightning();
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               HideCloud4();
               HideCloud5();
               Rain2();
               HideSnow();
               break;
           case 7:
               ShowRain();
               HideLightning();
               Rain3();
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               HideCloud5();
               HideSun();
               HideRay();
               HideSnow();
               break;
           case 8:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               HideCloud5();
               ShowSun();
               ShowRay();
               ShowRain();
               HideLightning();
               Rain1();
               HideSnow();
               break;
           case 9:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               ShowCloud5();
               ShowSun();
               HideRay();
               ShowRain();
               HideLightning();
               Rain2();
               HideSnow();
               break;
           case 10:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               ShowCloud5();
               ShowRain();
               HideLightning();
               Rain3();
               HideSun();
               HideRay();
               HideSnow();
               break;
           case 11:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               HideCloud4();
               HideCloud5();
               ShowSun();
               ShowRay();
               ShowRain();
               Rain1();
               ShowLightning();
               HideSnow();
               break;
           case 12:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               HideCloud5();
               ShowSun();
               HideRay();
               ShowRain();
               Rain2();
               ShowLightning();
               HideSnow();
               break;
           case 13:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               ShowCloud5();
               ShowRain();
               Rain3();
               ShowLightning();
               HideSun();
               HideRay();
               HideSnow();
               break;
           case 17:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               HideCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               ShowSun();
               ShowRay();
               ShowSnow();
               break;
           case 18:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               HideSun();
               HideRay();
               RandomSnow(3, 6);
               ShowSnow();
               break;
           case 19:
               ShowCloud1();
               ShowCloud2();
               ShowCloud3();
               ShowCloud4();
               ShowCloud5();
               HideRain();
               HideLightning();
               HideSun();
               HideRay();
               RandomSnow(2, 5);
               ShowSnow();
               break;
           default:
               HideCloud1();
               HideCloud2();
               HideCloud3();
               HideCloud4();
               HideCloud5();
               HideRain();
               HideLightning();
               Rain1();
               HideSun();
               HideRay();
               HideSnow();
               break;
       }
   }

}, 1000);

//======================================Shoot======================================================================
function randomTime(mval) {
   var RetTVar = Math.floor(Math.random() * mval) + .5;
   return RetTVar;
}

function RandomShoot() {
   var ShootCord = [
       [600, -100, 160, 180, 1000, 8000],
       [0, 600, 280, 280, 2000, 5000],
       [600, -100, 160, 180, 500, 8000],
       [0, 600, 280, 280, 3000, 10000],
       [0, 600, 280, 280, 500, 2000],
   ];
   var ShootCrdIndex = randomInterval(0, 4)
   document.querySelector('.StartShooting').style.setProperty('--Shoot-X1', ShootCord[ShootCrdIndex][0] + 'px');
   document.querySelector('.StartShooting').style.setProperty('--Shoot-X2', ShootCord[ShootCrdIndex][1] + 'px');
   document.querySelector('.StartShooting').style.setProperty('--Shoot-Z1', ShootCord[ShootCrdIndex][2] + 'deg');
   document.querySelector('.StartShooting').style.setProperty('--Shoot-Z2', ShootCord[ShootCrdIndex][3] + 'deg');
   document.querySelector('.StartShooting').style.setProperty('--Shoot-Time', ShootCord[ShootCrdIndex][4] + 'ms');

   setTimeout(function() {
       document.getElementById("Startshoot").style.webkitAnimationPlayState = "paused";
       document.getElementById('Startshoot').style.visibility = 'hidden';

       setTimeout(function() {
           RandomShoot();
           document.getElementById("Startshoot").style.webkitAnimationPlayState = "running";
           document.getElementById('Startshoot').style.visibility = 'visible';
       }, ShootCord[ShootCrdIndex][5]);

   }, ShootCord[ShootCrdIndex][4]);
}


//======================================Sun=====================================================================
function ShowSun() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Sun";

   document.getElementById("Sun").style.visibility = 'visible';
   document.getElementById("Sun").style.webkitAnimationPlayState = "running";
}

function HideSun() {
   document.getElementById("Sun").style.visibility = 'hidden';
   document.getElementById("Sun").style.webkitAnimationPlayState = "paused";
}

//======================================Sun=====================================================================
function ShowRay() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Ray";

   document.getElementById("Ray").style.visibility = 'visible';
   document.getElementById("Ray").style.webkitAnimationPlayState = "running";
}

function HideRay() {
   document.getElementById("Ray").style.visibility = 'hidden';
   document.getElementById("Ray").style.webkitAnimationPlayState = "paused";
}

//======================================Cloud=====================================================================
function ShowCloud1() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Cloud 1";

   document.getElementById("Cloud1").style.visibility = 'visible';
   document.getElementById("Cloud1").style.webkitAnimationPlayState = "running";
   document.querySelector('.AnimateChildCloud').style.setProperty('--CloudChild-Y1', '-5%');
   document.querySelector('.AnimateSubCloud').style.setProperty('--CloudSub-Y1', '-15%');
}

function HideCloud1() {
   document.getElementById("Cloud1").style.visibility = 'hidden';
   document.getElementById("Cloud1").style.webkitAnimationPlayState = "paused";
}

function ShowCloud2() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Cloud 2";

   document.getElementById("Cloud2").style.visibility = 'visible';
   document.getElementById("Cloud2").style.webkitAnimationPlayState = "running";
}

function HideCloud2() {
   document.getElementById("Cloud2").style.visibility = 'hidden';
   document.getElementById("Cloud2").style.webkitAnimationPlayState = "paused";
}

function ShowCloud3() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Cloud 3";

   document.getElementById("Cloud3").style.visibility = 'visible';
   document.getElementById("Cloud3").style.webkitAnimationPlayState = "running";
}

function HideCloud3() {
   document.getElementById("Cloud3").style.visibility = 'hidden';
   document.getElementById("Cloud3").style.webkitAnimationPlayState = "paused";
   document.querySelector('.AnimateCloud').style.setProperty('--Cloud-Y1', '-10%');
}

function ShowCloud4() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Cloud 4";

   document.getElementById("Cloud4").style.visibility = 'visible';
   document.getElementById("Cloud4").style.webkitAnimationPlayState = "running";
   document.querySelector('.AnimateChildCloud').style.setProperty('--CloudChild-Y1', '-10%');
   document.querySelector('.AnimateCloud').style.setProperty('--CloudSub-Y1', '-20%');
}

function HideCloud4() {
   document.getElementById("Cloud4").style.visibility = 'hidden';
   document.getElementById("Cloud4").style.webkitAnimationPlayState = "paused";
}

function ShowCloud5() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Cloud 5";

   document.getElementById("Cloud5").style.visibility = 'visible';
   document.getElementById("Cloud5").style.webkitAnimationPlayState = "running";
   document.querySelector('.AnimateSubCloud').style.setProperty('--CloudSub-Y1', '-11%');
}

function HideCloud5() {
   document.getElementById("Cloud5").style.visibility = 'hidden';
   document.getElementById("Cloud5").style.webkitAnimationPlayState = "paused";
}

//======================================Rain=======================================================================
function ShowRain() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Rain";

   document.getElementById("RainDrop1").style.visibility = 'visible';
   document.getElementById("RainDrop2").style.visibility = 'visible';
   document.getElementById("RainDrop3").style.visibility = 'visible';
   document.getElementById("RainDrop4").style.visibility = 'visible';
   document.getElementById("RainDrop5").style.visibility = 'visible';
   document.getElementById("RainDrop6").style.visibility = 'visible';
   document.getElementById("RainDrop7").style.visibility = 'visible';
   document.getElementById("RainDrop8").style.visibility = 'visible';
   document.getElementById("RainDrop9").style.visibility = 'visible';
   document.getElementById("RainDrop10").style.visibility = 'visible';

   document.getElementById("RainDrop1").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop2").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop3").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop4").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop5").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop6").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop7").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop8").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop9").style.webkitAnimationPlayState = "running";
   document.getElementById("RainDrop10").style.webkitAnimationPlayState = "running";
}

function HideRain() {
   document.getElementById("RainDrop1").style.visibility = 'hidden';
   document.getElementById("RainDrop2").style.visibility = 'hidden';
   document.getElementById("RainDrop3").style.visibility = 'hidden';
   document.getElementById("RainDrop4").style.visibility = 'hidden';
   document.getElementById("RainDrop5").style.visibility = 'hidden';
   document.getElementById("RainDrop6").style.visibility = 'hidden';
   document.getElementById("RainDrop7").style.visibility = 'hidden';
   document.getElementById("RainDrop8").style.visibility = 'hidden';
   document.getElementById("RainDrop9").style.visibility = 'hidden';
   document.getElementById("RainDrop10").style.visibility = 'hidden';

   document.getElementById("RainDrop1").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop2").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop3").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop4").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop5").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop6").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop7").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop8").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop9").style.webkitAnimationPlayState = "paused";
   document.getElementById("RainDrop10").style.webkitAnimationPlayState = "paused";
}

function Rain1() {
   document.getElementById("RainDrop1").style.animationDuration = "800ms";
   document.getElementById("RainDrop2").style.animationDuration = "800ms";
   document.getElementById("RainDrop3").style.animationDuration = "800ms";
   document.getElementById("RainDrop4").style.animationDuration = "800ms";
   document.getElementById("RainDrop5").style.animationDuration = "800ms";
   document.getElementById("RainDrop6").style.animationDuration = "800ms";
   document.getElementById("RainDrop7").style.animationDuration = "800ms";
   document.getElementById("RainDrop8").style.animationDuration = "800ms";
   document.getElementById("RainDrop9").style.animationDuration = "800ms";
   document.getElementById("RainDrop10").style.animationDuration = "800ms";
}

function Rain2() {
   document.getElementById("RainDrop1").style.animationDuration = "600ms";
   document.getElementById("RainDrop2").style.animationDuration = "600ms";
   document.getElementById("RainDrop3").style.animationDuration = "600ms";
   document.getElementById("RainDrop4").style.animationDuration = "600ms";
   document.getElementById("RainDrop5").style.animationDuration = "600ms";
   document.getElementById("RainDrop6").style.animationDuration = "600ms";
   document.getElementById("RainDrop7").style.animationDuration = "600ms";
   document.getElementById("RainDrop8").style.animationDuration = "600ms";
   document.getElementById("RainDrop9").style.animationDuration = "600ms";
   document.getElementById("RainDrop10").style.animationDuration = "600ms";
}

function Rain3() {
   document.getElementById("RainDrop1").style.animationDuration = "300ms";
   document.getElementById("RainDrop2").style.animationDuration = "300ms";
   document.getElementById("RainDrop3").style.animationDuration = "300ms";
   document.getElementById("RainDrop4").style.animationDuration = "300ms";
   document.getElementById("RainDrop5").style.animationDuration = "300ms";
   document.getElementById("RainDrop6").style.animationDuration = "300ms";
   document.getElementById("RainDrop7").style.animationDuration = "300ms";
   document.getElementById("RainDrop8").style.animationDuration = "300ms";
   document.getElementById("RainDrop9").style.animationDuration = "300ms";
   document.getElementById("RainDrop10").style.animationDuration = "300ms";
}


//======================================Snow======================================================================
function RandomSnow(min, max) {
   var time;
   //setInterval(function() {
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-1').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-2').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-3').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-4').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-5').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-6').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-7').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-8').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-9').style.setProperty('--animation-time', time + 's');
   time = randomInterval(min, max);
   document.querySelector('.fallingSnow-10').style.setProperty('--animation-time', time + 's');
   //}, 7000);
}

//======================================Snow======================================================================
function ShowSnow() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Snow";

   document.getElementById("Snow-1").style.visibility = 'visible';
   document.getElementById("Snow-2").style.visibility = 'visible';
   document.getElementById("Snow-3").style.visibility = 'visible';
   document.getElementById("Snow-4").style.visibility = 'visible';
   document.getElementById("Snow-5").style.visibility = 'visible';
   document.getElementById("Snow-6").style.visibility = 'visible';
   document.getElementById("Snow-7").style.visibility = 'visible';
   document.getElementById("Snow-8").style.visibility = 'visible';
   document.getElementById("Snow-9").style.visibility = 'visible';
   document.getElementById("Snow-10").style.visibility = 'visible';

   document.getElementById("Snow-1").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-2").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-3").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-4").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-5").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-6").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-7").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-8").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-9").style.webkitAnimationPlayState = "running";
   document.getElementById("Snow-10").style.webkitAnimationPlayState = "running";
}

function HideSnow() {
   document.getElementById("Snow-1").style.visibility = 'hidden';
   document.getElementById("Snow-2").style.visibility = 'hidden';
   document.getElementById("Snow-3").style.visibility = 'hidden';
   document.getElementById("Snow-4").style.visibility = 'hidden';
   document.getElementById("Snow-5").style.visibility = 'hidden';
   document.getElementById("Snow-6").style.visibility = 'hidden';
   document.getElementById("Snow-7").style.visibility = 'hidden';
   document.getElementById("Snow-8").style.visibility = 'hidden';
   document.getElementById("Snow-9").style.visibility = 'hidden';
   document.getElementById("Snow-10").style.visibility = 'hidden';

   document.getElementById("Snow-1").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-2").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-3").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-4").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-5").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-6").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-7").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-8").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-9").style.webkitAnimationPlayState = "paused";
   document.getElementById("Snow-10").style.webkitAnimationPlayState = "paused";
}

//======================================Lightning================================================================
function ShowLightning() {
   var OldWeatherString = document.getElementById('State').textContent;
   document.getElementById('State').innerText = OldWeatherString + " Lightning";

   document.getElementById('Lightning').style.visibility = 'visible';
   document.getElementById('LightningChild').style.visibility = 'visible';
   document.getElementById('LightningSub').style.visibility = 'visible';
   document.getElementById('LightningBack').style.visibility = 'visible';

   //setInterval(function() {
   document.getElementById("Lightning").style.webkitAnimationPlayState = "running";
   document.getElementById("LightningChild").style.webkitAnimationPlayState = "running";
   document.getElementById("LightningSub").style.webkitAnimationPlayState = "running";
   document.getElementById("LightningBack").style.webkitAnimationPlayState = "running";
   //}, 500);
}

function HideLightning() {
   document.getElementById("Lightning").style.webkitAnimationPlayState = "paused";
   document.getElementById("LightningChild").style.webkitAnimationPlayState = "paused";
   document.getElementById("LightningSub").style.webkitAnimationPlayState = "paused";
   document.getElementById("LightningBack").style.webkitAnimationPlayState = "paused";

   //setInterval(function() {
   document.getElementById('Lightning').style.visibility = 'hidden';
   document.getElementById('LightningChild').style.visibility = 'hidden';
   document.getElementById('LightningSub').style.visibility = 'hidden';
   document.getElementById('LightningBack').style.visibility = 'hidden';
   //}, 500);
}

//======================================Wind==================================================================
var LeafTimer1, LeafTimer2;
if (isNumber(WindValue)) {
   console.log("New Wind: " + WindValue);
   if (WindValue > 13) {
       AnimateLeaf();
       AnimateLeaf2();

       document.getElementById('Leaf').style.visibility = 'visible';
       document.getElementById('Leaf2').style.visibility = 'visible';
       document.getElementById("Leaf").style.webkitAnimationPlayState = "running";
       document.getElementById("Leaf2").style.webkitAnimationPlayState = "running";
   } else {
       clearTimeout(LeafTimer1);
       clearTimeout(LeafTimer2);

       document.getElementById("Leaf").style.webkitAnimationPlayState = "paused";
       document.getElementById("Leaf2").style.webkitAnimationPlayState = "paused";
       document.getElementById('Leaf').style.visibility = 'hidden';
       document.getElementById('Leaf2').style.visibility = 'hidden';
   }
}

function AnimateLeaf() {
   var LeafX1Pos = randomInterval(-200, 150);
   var LeafX2Pos = randomInterval(50, 100);
   var LeafX3Pos = randomInterval(-300, 150);
   var LeafX4Pos = randomInterval(300, 400);
   var LeafX5Pos = randomInterval(150, 200);
   var LeafX6Pos = randomInterval(-200, 150);
   var LeafX7Pos = randomInterval(400, 450);
   var LeafX8Pos = randomInterval(0, 100);
   var LeafX9Pos = randomInterval(-200, 450);
   var LeafX10Pos = randomInterval(-200, -300);
   var LeafZ1Pos = randomInterval(8, 12);

   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X1', LeafX1Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X2', LeafX2Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X3', LeafX3Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X4', LeafX4Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X5', LeafX5Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X6', LeafX6Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X7', LeafX7Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X8', LeafX8Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X9', LeafX9Pos + 'px');
   document.querySelector('.AnimateWind').style.setProperty('--Leaf-X10', LeafX10Pos + 'px');
   ShowLeaf();

   LeafTimer1 = setTimeout(function() {
       HideLeaf();
       document.querySelector('.AnimateWind').style.setProperty('--Leaf-Z1', LeafZ1Pos + 's');
       AnimateLeaf();
   }, LeafZ1Pos * 1000);
};

function ShowLeaf() {
   document.getElementById('Leaf').style.visibility = 'visible';
   document.getElementById("Leaf").style.webkitAnimationPlayState = "running";
}

function HideLeaf() {
   document.getElementById('Leaf').style.visibility = 'hidden';
   document.getElementById("Leaf").style.webkitAnimationPlayState = "paused";
}

function AnimateLeaf2() {
   var Leaf2X1Pos = randomInterval(-200, 250);
   var Leaf2X2Pos = randomInterval(50, 100);
   var Leaf2X3Pos = randomInterval(-350, -400);
   var Leaf2X4Pos = randomInterval(-200, 250);
   var Leaf2X5Pos = randomInterval(-200, 150);
   var Leaf2X6Pos = randomInterval(200, 250);
   var Leaf2Z1Pos = randomInterval(8, 12);

   document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-X1', Leaf2X1Pos + 'px');
   document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-X2', Leaf2X2Pos + 'px');
   document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-X3', Leaf2X3Pos + 'px');
   document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-X4', Leaf2X4Pos + 'px');
   document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-X5', Leaf2X5Pos + 'px');
   document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-X6', Leaf2X6Pos + 'px');
   ShowLeaf2();

   LeafTimer2 = setTimeout(function() {
       HideLeaf2();
       document.querySelector('.AnimateSubWind').style.setProperty('--Leaf2-Z1', Leaf2Z1Pos + 's');
       AnimateLeaf2();
   }, Leaf2Z1Pos * 1000);

};

function ShowLeaf2() {
   document.getElementById('Leaf2').style.visibility = 'visible';
   document.getElementById("Leaf2").style.webkitAnimationPlayState = "running";
}

function HideLeaf2() {
   document.getElementById('Leaf2').style.visibility = 'hidden';
   document.getElementById("Leaf2").style.webkitAnimationPlayState = "paused";
}

//======================================Icicle=======================================================================
var IcicleShrink, IcicleShrink2;
var WIcicle = 1;
var HIcicle = 1;
var YIcicle = 0;
var W1Icicle = 270;
var W2Icicle = 300;
var IcicleMove;
let BrGlVal = 1;
var BrokenGlass;
var NewIcicle;
let NeIcVal = -100;
document.getElementById('IcicleSub2').style.visibility = 'hidden';

IcicleShrink = setInterval(function() {
   ShrinkIcicle();
}, 1000);

function ShrinkIcicle() {

   //WIcicle -= 0.00625;
   //HIcicle -= 0.00625;
   YIcicle -= 0.625;
   W1Icicle -= 1.875;
   W2Icicle -= 1.875;

   if (WIcicle <= 0.6) {
       WIcicle = 1;
   }
   if (HIcicle <= 0.6) {
       HIcicle = 1;
   }
   if (YIcicle <= -50) {
       console.log("Shrink Icicle Y: " + YIcicle + " Icicle W: " + WIcicle + " Icicle H: " + HIcicle);
       YIcicle = -30;

   	WIcicle = 0.7;
   	HIcicle = 0.6;
   	document.querySelector('.Icicle-1').style.setProperty('--animation-W', WIcicle);
   	document.querySelector('.Icicle-1').style.setProperty('--animation-H', HIcicle);
   	document.querySelector('.Icicle-1').style.setProperty('--animation-Y', YIcicle + '%');

       clearTimeout(IcicleShrink);
   	clearTimeout(IcicleShrink2);

   	setTimeout(function() {
           var iC = -30;

   	   IcicleMove = setInterval(function() {

   			document.querySelector('.Icicle-1').style.setProperty('--animation-Y', iC + '%');
   			iC += 50;
               if (iC > 230) {

   			    document.getElementById('IcicleSub1').style.visibility = 'hidden';
                   document.getElementById("IcicleSub1").style.webkitAnimationPlayState = "paused";

   			    document.getElementById('IcicleSub2').style.visibility = 'visible';
   				document.getElementById("IcicleSub2").style.opacity = "1";

                   clearTimeout(IcicleMove);

   				document.querySelector('.Icicle-1').style.setProperty('--animation-W', "3");
   				document.querySelector('.Icicle-1').style.setProperty('--animation-H', "0.05");
   				document.getElementById("Icicle1").style.filter = "blur(5px)";

   				setTimeout(function() {
   					document.getElementById("Icicle1").style.opacity = "0.5";
   					document.getElementById("Icicle1").style.filter = "blur(10px)";
   				}, 200);

   				setTimeout(function() {
   					document.getElementById('Icicle1').style.visibility = 'hidden';
   					document.getElementById("Icicle1").style.opacity = "0.2";
   					document.getElementById("Icicle1").style.filter = "blur(5px)";
   				}, 300);

   				setTimeout(function() {
   					document.getElementById('Icicle1').style.visibility = 'hidden';
   					document.getElementById("Icicle1").style.opacity = "1";
   					document.getElementById("Icicle1").style.filter = "blur(0px)";
   				}, 500);

   				BrGlVal = 1;
   				BrokenGlass = setInterval(function() {
   				BrGlVal -= 0.1;
   				//console.log(BrGlVal);
   				document.getElementById("IcicleSub2").style.opacity = BrGlVal;
   				if (Number(BrGlVal) >= 0) {clearTimeout(BrokenGlass);}
   				}, 3000);

   				NeIcVal = -100;
   				NewIcicle = setInterval(function() {
   				    if (Number(NeIcVal) <= -5) {
   				        NeIcVal += 5;}
   					//console.log(NeIcVal);
   				    document.querySelector('.Icicle-1').style.setProperty('--animation-Y', NeIcVal + '%');
   				    WIcicle = 1;
   					HIcicle = 1;
   					document.querySelector('.Icicle-1').style.setProperty('--animation-W', WIcicle);
   					document.querySelector('.Icicle-1').style.setProperty('--animation-H', HIcicle)
   					document.getElementById('Icicle1').style.visibility = 'visible';
   				}, 1000);

                   YIcicle = 0;
   				setTimeout(function() {
   				    clearTimeout(NewIcicle);
   				    IcicleShrink2 = setInterval(function() {
   					    document.querySelector('.Icicle-1').style.setProperty('--animation-Y', '5%');
   					    document.getElementById('IcicleSub1').style.visibility = 'visible';
                           document.getElementById("IcicleSub1").style.webkitAnimationPlayState = "running";
                           ShrinkIcicle();
   					}, 1000);
   				}, 20000);
               }
           }, 50);
       }, 2000);
   }

   if (W1Icicle <= 120) {
       W1Icicle = 270;
   }
   if (W2Icicle <= 150) {
       W2Icicle = 300;
   }

   document.querySelector('.Icicle-1').style.setProperty('--animation-W', WIcicle);
   document.querySelector('.Icicle-1').style.setProperty('--animation-H', HIcicle);

   document.querySelector('.Icicle-1').style.setProperty('--animation-Y', YIcicle + '%');

   document.querySelector('.IcicleWater-1').style.setProperty('--animation-W1', W1Icicle + '%');
   document.querySelector('.IcicleWater-1').style.setProperty('--animation-W2', W2Icicle + '%');
}

//======================================Helper======================================================================
function randomInterval(min, max) { // min and max included
   return Math.floor(Math.random() * (max - min + 1) + min)
}

function makeNewPosition(CalcleafPos) {
   var NewCalcleafPos = Math.floor(Math.random() * CalcleafPos);
   return NewCalcleafPos;
}

function isNumber(i) {
   return !isNaN(i && i !== true ? Number(i) : parseFloat(i)) && [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY].indexOf(i) === -1;
}

void setInterval( () => {
   setTimeout( function () {}, 1000)
}, 100)


</script>


</body></html>

Die Bilder sind unter /vis.0/Wetter/myweather/

sigi234

@glasfaser

Hallo, kommt das bei dir auch im Skript?

javascript.0
2021-08-28 18:00:14.838	error	at processImmediate (internal/timers.js:461:21)

javascript.0
2021-08-28 18:00:14.838	error	at Immediate.<anonymous> (C:\Program Files\iobroker\Home\node_modules\iobroker.js-controller\lib\adapter.js:5706:41)

javascript.0
2021-08-28 18:00:14.838	error	at Object.stateChange (C:\Program Files\iobroker\Home\node_modules\iobroker.javascript\main.js:525:29)

javascript.0
2021-08-28 18:00:14.838	error	at Object.callback (C:\Program Files\iobroker\Home\node_modules\iobroker.javascript\lib\sandbox.js:1087:38)

javascript.0
2021-08-28 18:00:14.838	error	at Object.<anonymous> (script.js.Sigi.myweather:15:49)

javascript.0
2021-08-28 18:00:14.837	error	script.js.Sigi.myweather: TypeError: Cannot read property 'slice' of undefined

javascript.0
2021-08-28 17:51:06.590	error	at processImmediate (internal/timers.js:461:21)

javascript.0
2021-08-28 17:51:06.590	error	at Immediate.<anonymous> (C:\Program Files\iobroker\Home\node_modules\iobroker.js-controller\lib\adapter.js:5706:41)

javascript.0
2021-08-28 17:51:06.590	error	at Object.stateChange (C:\Program Files\iobroker\Home\node_modules\iobroker.javascript\main.js:525:29)

javascript.0
2021-08-28 17:51:06.590	error	at Object.callback (C:\Program Files\iobroker\Home\node_modules\iobroker.javascript\lib\sandbox.js:1087:38)

javascript.0
2021-08-28 17:51:06.590	error	at Object.<anonymous> (script.js.Sigi.myweather:15:49)

javascript.0
2021-08-28 17:51:06.589	error	script.js.Sigi.myweather: TypeError: Cannot read property 'slice' of undefined

javascript.0
2021-08-28 17:00:14.555	error	at Immediate.<anonymous> (C:\Program Files\iobroker\Home\node_modules\iobroker.js-controller\lib\adapter.js:5706:41)

javascript.0
2021-08-28 17:00:14.555	error	at Object.callback (C:\Program Files\iobroker\Home\node_modules\iobroker.javascript\lib\sandbox.js:1087:38)

javascript.0
2021-08-28 17:00:14.554	error	at Object.<anonymous> (script.js.Sigi.myweather:15:49)

javascript.0
2021-08-28 17:00:14.555	error	at Object.stateChange (C:\Program Files\iobroker\Home\node_modules\iobroker.javascript\main.js:525:29)

javascript.0
2021-08-28 17:00:14.555	error	at processImmediate (internal/timers.js:461:21)

javascript.0
2021-08-28 17:00:14.554	error	script.js.Sigi.myweather: TypeError: Cannot read property 'slice' of undefined

Glasfaser

@sigi234
Nein kein Fehler , welches Script hast du genommen ?

Hast du beide Datenpunkte angelegt
( so bei mir ) :

0_userdata.0.RealWeather.WeatherAnimation
0_userdata.0.RealWeather.Weatherurl

sigi234

@glasfaser sagte in Real Weather (Bald):

@sigi234
Nein kein Fehler , welches Script hast du genommen ?

Hast du beide Datenpunkte angelegt
( so bei mir ) :
0_userdata.0.RealWeather.WeatherAnimation
0_userdata.0.RealWeather.Weatherurl

Ja , dein Skript

Screenshot (4222).png

Glasfaser

@sigi234

Du Editer ..... war gerad am schreiben ....

Hast du den vorhanden :

daswetter.0.NextHours.Location_1.Day_1.current.iconURL

sigi234

@glasfaser

Ja

Glasfaser

@sigi234

Trigger mal den Wert in

daswetter.0.NextHours.Location_1.Day_1.current.iconURL

Das steht bei mir
/adapter/daswetter/icons/tiempo-weather/galeria1/6.png
ändere mal auf
adapter/daswetter/icons/tiempo-weather/galeria1/1. png

Es kommt eine Fehlermeldung von dasWetter aber nicht beachten .
.... so das das Script selber triggert

NEWS

Real Weather (Bald)

Support us

782
Online

31.7k
Users

79.7k
Topics

1.3m
Posts

NEWS

Real Weather (Bald)

Support us

782Online

31.7kUsers

79.7kTopics

1.3mPosts

782
Online

31.7k
Users

79.7k
Topics

1.3m
Posts