Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Real Weather (Bald)

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.4k

Real Weather (Bald)

Geplant Angeheftet Gesperrt Verschoben Visualisierung
43 Beiträge 13 Kommentatoren 6.7k Aufrufe 28 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • GlasfaserG Glasfaser

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

    Widgets1.gif

    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/

    sigi234S Online
    sigi234S Online
    sigi234
    Forum Testing Most Active
    schrieb am zuletzt editiert von
    #22

    @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
    

    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
    Immer Daten sichern!

    GlasfaserG 1 Antwort Letzte Antwort
    0
    • sigi234S 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
      
      GlasfaserG Offline
      GlasfaserG Offline
      Glasfaser
      schrieb am zuletzt editiert von
      #23

      @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
      

      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

      sigi234S 1 Antwort Letzte Antwort
      0
      • GlasfaserG 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
        
        sigi234S Online
        sigi234S Online
        sigi234
        Forum Testing Most Active
        schrieb am zuletzt editiert von sigi234
        #24

        @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

        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
        Immer Daten sichern!

        GlasfaserG 1 Antwort Letzte Antwort
        0
        • sigi234S 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

          GlasfaserG Offline
          GlasfaserG Offline
          Glasfaser
          schrieb am zuletzt editiert von
          #25

          @sigi234

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

          Hast du den vorhanden :

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

          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

          sigi234S 1 Antwort Letzte Antwort
          0
          • GlasfaserG Glasfaser

            @sigi234

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

            Hast du den vorhanden :

            daswetter.0.NextHours.Location_1.Day_1.current.iconURL
            
            sigi234S Online
            sigi234S Online
            sigi234
            Forum Testing Most Active
            schrieb am zuletzt editiert von
            #26

            @glasfaser

            Ja

            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
            Immer Daten sichern!

            GlasfaserG 1 Antwort Letzte Antwort
            0
            • sigi234S sigi234

              @glasfaser

              Ja

              GlasfaserG Offline
              GlasfaserG Offline
              Glasfaser
              schrieb am zuletzt editiert von
              #27

              @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

              Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

              sigi234S 1 Antwort Letzte Antwort
              0
              • GlasfaserG 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

                sigi234S Online
                sigi234S Online
                sigi234
                Forum Testing Most Active
                schrieb am zuletzt editiert von
                #28

                @glasfaser sagte in Real Weather (Bald):

                Das steht bei mir

                Habe ja andere Icons bei mir
                /vis.0/Wettericons/Wetter Hd/3.png

                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                Immer Daten sichern!

                GlasfaserG 1 Antwort Letzte Antwort
                0
                • sigi234S sigi234

                  @glasfaser sagte in Real Weather (Bald):

                  Das steht bei mir

                  Habe ja andere Icons bei mir
                  /vis.0/Wettericons/Wetter Hd/3.png

                  GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  schrieb am zuletzt editiert von
                  #29

                  @sigi234

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

                  er holt sich hier den Wert her ,und slice Ihn ,
                  obwohl die Nummer in den Datenpunkt auch bei dir schreibt

                  0_userdata.0.RealWeather.WeatherAnimation
                  

                  nur dann anschließend nicht in

                  0_userdata.0.RealWeather.Weatherurl
                  

                  Habe mich nur kurz mit dem Script befasst .

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  sigi234S 1 Antwort Letzte Antwort
                  0
                  • GlasfaserG Glasfaser

                    @sigi234

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

                    er holt sich hier den Wert her ,und slice Ihn ,
                    obwohl die Nummer in den Datenpunkt auch bei dir schreibt

                    0_userdata.0.RealWeather.WeatherAnimation
                    

                    nur dann anschließend nicht in

                    0_userdata.0.RealWeather.Weatherurl
                    

                    Habe mich nur kurz mit dem Script befasst .

                    sigi234S Online
                    sigi234S Online
                    sigi234
                    Forum Testing Most Active
                    schrieb am zuletzt editiert von
                    #30

                    @glasfaser sagte in Real Weather (Bald):

                    nur dann anschließend nicht in
                    0_userdata.0.RealWeather.Weatherurl

                    Jupp, DP ist leer.

                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                    Immer Daten sichern!

                    1 Antwort Letzte Antwort
                    0
                    • wawyoW wawyo

                      Hallo,
                      bald Online ;)

                      https://youtu.be/uAf3McTm65g

                      OliverIOO Offline
                      OliverIOO Offline
                      OliverIO
                      schrieb am zuletzt editiert von
                      #31

                      @wawyo

                      cih dachte das sei eher sowas
                      51947574-e360-43ad-b22d-f170dd9f73a9-image.png

                      Meine Adapter und Widgets
                      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                      Links im Profil

                      NashraN 1 Antwort Letzte Antwort
                      0
                      • OliverIOO OliverIO

                        @wawyo

                        cih dachte das sei eher sowas
                        51947574-e360-43ad-b22d-f170dd9f73a9-image.png

                        NashraN Offline
                        NashraN Offline
                        Nashra
                        Most Active Forum Testing
                        schrieb am zuletzt editiert von
                        #32

                        @oliverio sagte in Real Weather (Bald):

                        @wawyo

                        cih dachte das sei eher sowas
                        51947574-e360-43ad-b22d-f170dd9f73a9-image.png

                        :+1: :joy: :joy: :joy: :joy:

                        Gruß Ralf
                        Mir egal, wer Dein Vater ist! Wenn ich hier angel, wird nicht übers Wasser gelaufen!!

                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                        wawyoW 1 Antwort Letzte Antwort
                        0
                        • NashraN Nashra

                          @oliverio sagte in Real Weather (Bald):

                          @wawyo

                          cih dachte das sei eher sowas
                          51947574-e360-43ad-b22d-f170dd9f73a9-image.png

                          :+1: :joy: :joy: :joy: :joy:

                          wawyoW Offline
                          wawyoW Offline
                          wawyo
                          Developer
                          schrieb am zuletzt editiert von
                          #33

                          Die Bilder habe ich unter:
                          Screenshot_20210828-231221~2.png

                          Datenpunkte:
                          Screenshot_20210828-230948~2.png

                          Ich habe mehrere Datenpunkte weil ich habe meine eigene Wetterstation produziert 🤫
                          IMG_20210702_162202~2.jpg

                          wawyoW wendy2702W 2 Antworten Letzte Antwort
                          0
                          • wawyoW wawyo

                            Die Bilder habe ich unter:
                            Screenshot_20210828-231221~2.png

                            Datenpunkte:
                            Screenshot_20210828-230948~2.png

                            Ich habe mehrere Datenpunkte weil ich habe meine eigene Wetterstation produziert 🤫
                            IMG_20210702_162202~2.jpg

                            wawyoW Offline
                            wawyoW Offline
                            wawyo
                            Developer
                            schrieb am zuletzt editiert von
                            #34

                            Wir gehen einen Schritt weiter ;)
                            Tag: Sonne
                            Nacht: Mondphasen animation (Real Moon).
                            Unbenannt.png

                            https://youtu.be/0HJOBPwInDo

                            ChaotC 1 Antwort Letzte Antwort
                            1
                            • wawyoW wawyo

                              Wir gehen einen Schritt weiter ;)
                              Tag: Sonne
                              Nacht: Mondphasen animation (Real Moon).
                              Unbenannt.png

                              https://youtu.be/0HJOBPwInDo

                              ChaotC Offline
                              ChaotC Offline
                              Chaot
                              schrieb am zuletzt editiert von
                              #35

                              @wawyo Richtig schön geworden.

                              Wirst du das als Adapter/Widget umsetzen oder wird das bei der Scriptlösung bleiben?

                              ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

                              wawyoW 1 Antwort Letzte Antwort
                              0
                              • ChaotC Chaot

                                @wawyo Richtig schön geworden.

                                Wirst du das als Adapter/Widget umsetzen oder wird das bei der Scriptlösung bleiben?

                                wawyoW Offline
                                wawyoW Offline
                                wawyo
                                Developer
                                schrieb am zuletzt editiert von
                                #36

                                @chaot Ja, der Adapter kommt noch :)
                                Als erstes möchte ich alle Ideen realisieren.

                                KnallochseK ChaotC 2 Antworten Letzte Antwort
                                1
                                • wawyoW wawyo

                                  @chaot Ja, der Adapter kommt noch :)
                                  Als erstes möchte ich alle Ideen realisieren.

                                  KnallochseK Offline
                                  KnallochseK Offline
                                  Knallochse
                                  schrieb am zuletzt editiert von Knallochse
                                  #37

                                  @wawyo ich finde das echt klasse. Selbst benutze ich animierte Wettersymbole (gif)
                                  Diese animierten Wettersymbole habe ich käuflich erworben
                                  Beispiel:
                                  ebc4db2235034.560a96356930d.gif
                                  XHqB.gif

                                  So sieht meiner Wetterview gerade aus.
                                  FullSizeRender.gif

                                  Ich hätte noch ein paar Anregungen für dich.
                                  Ich fände es gut, wenn dein Hintergrund transparent wäre (deine Horizontgrafik & Eiszapfen am oberen Rand abschaltbar?)
                                  So wäre man flexibler in der freien Gestaltung in der VIS.
                                  Deine Regentropfen finde ich ein bisschen groß (nur mein Empfinden).
                                  Das mit dem Herbstlaub finde ich richtig schön 👍
                                  Falls du ein paar meiner animierten Gifs zur Anregung möchtest, melde dich einfach.

                                  HM&HMIP über 100 Geräte + IoBroker auf DS918+ uvm.

                                  wendy2702W 1 Antwort Letzte Antwort
                                  2
                                  • Ro75R Online
                                    Ro75R Online
                                    Ro75
                                    schrieb am zuletzt editiert von Ro75
                                    #38

                                    Hier mal meine animierten Wetterbilder für Tag und Nacht.
                                    11.svg

                                    11.svg

                                    wetter_tag.zip wetter_nacht.zip

                                    Ro75.

                                    SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                                    1 Antwort Letzte Antwort
                                    0
                                    • wawyoW wawyo

                                      @chaot Ja, der Adapter kommt noch :)
                                      Als erstes möchte ich alle Ideen realisieren.

                                      ChaotC Offline
                                      ChaotC Offline
                                      Chaot
                                      schrieb am zuletzt editiert von
                                      #39

                                      @wawyo sagte in Real Weather (Bald):

                                      @chaot Ja, der Adapter kommt noch :)
                                      Als erstes möchte ich alle Ideen realisieren.

                                      So am Rande. Ist das irgendwo weiterentwickelt worden und ich habe das übersehen?

                                      ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

                                      1 Antwort Letzte Antwort
                                      1
                                      • J Offline
                                        J Offline
                                        jwerlsdf
                                        schrieb am zuletzt editiert von jwerlsdf
                                        #40

                                        Hallo,
                                        es ist schon lange her, aber ich versuche es doch noch einmal hier. Ich hoffe, es kann mir jemand helfen:

                                        Ich habe den Code folgendermaßen geändert, da dieser Fehler produziert hat. Jetzt schaut der COde bei mir so aus, aber ich bekomme folgenden Fehler:

                                        ImageNumber ist undefined
                                        

                                        Hier der überarbeitetet COde:

                                        var ImageName, ImageNumber, ImageNumberConverted, NewLink;
                                        
                                        on({id: "daswetter.0.NextHours.Location_1.Day_1.current.iconURL", change: "any"}, async function (obj) {
                                          // Sicherstellen, dass obj.state und obj.state.val existieren
                                          if (!obj.state || typeof obj.state.val === 'undefined') {
                                            console.error("obj.state.val ist undefined!");
                                            return; // Früher zurückkehren, wenn der Wert nicht definiert ist
                                          }
                                        
                                          var value = obj.state.val;
                                          var oldValue = obj.oldState.val;
                                          
                                          // Extrahiert den ImageNumber aus der URL
                                          ImageName = (obj.state ? obj.state.val : "").split('/');
                                          
                                          // Sicherstellen, dass ImageName genügend Teile hat
                                          if (ImageName.length > 6) {
                                            ImageNumber = ImageName[6]; // Greife auf den 7. Teil der URL zu (Index 6)
                                          } else {
                                            console.error("Die URL hat nicht genügend Teile. ImageName:", ImageName);
                                            return; // Rückgabe, wenn die URL nicht das erwartete Format hat
                                          }
                                        
                                          // Überprüfet, ob ImageNumber existiert und berechnet ImageNumberConverted
                                          if (ImageNumber) {
                                            ImageNumberConverted = parseFloat(ImageNumber.slice(0, ImageNumber.length - 4));
                                          } else {
                                            console.error("ImageNumber ist undefined");
                                            return; // Früher zurückkehren, wenn ImageNumber nicht definiert ist
                                          }
                                        
                                          // Berechnet die Zeit für Sonnenaufgang und Sonnenuntergang
                                          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();
                                        
                                          // Setzt den Wert für die Animation
                                          setState("0_userdata.0.Wetter.WeatherAnimation.WeatherAnimation", ImageNumberConverted);
                                        
                                          // Logik für unterschiedliche Tageszeiten
                                          if (now_m > sunset_m - 60 && now_m <= sunset_m + 60) {
                                            log("dusk " + sunrise_m + " " + sunset_m);
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", obj.state.val, true);
                                          } else if (now_m > sunrise_m - 60 && now_m <= sunrise_m + 60) {
                                            log("dawn " + sunrise_m + " " + sunset_m);
                                            NewLink = ['http://192.168.178.70:8082/vis.0/Wetter/WeatherAnimation/', ImageNumberConverted + 50, '.png'].join('');
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", NewLink, true);
                                          } else if (now_m > sunrise_m + 60 && now_m <= sunset_m - 60) {
                                            log("day " + sunrise_m + " " + sunset_m);
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", obj.state.val, true);
                                          } else {
                                            log("night " + sunrise_m + " " + sunset_m);
                                            NewLink = ['http://192.168.178.70:8082/vis.0/Wetter/WeatherAnimation/', ImageNumberConverted + 50, '.png'].join('');
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", NewLink, true);
                                          }
                                        
                                          // Konsolenausgaben für Debugging
                                          console.log("ImageName:", ImageName);
                                          console.log("ImageNumber:", ImageNumber);
                                          console.log("ImageNumberConverted:", ImageNumberConverted);
                                          console.log("sunrise_m:", sunrise_m);
                                          console.log("sunset_m:", sunset_m);
                                          console.log("now_m:", now_m);
                                        });
                                        

                                        Ich habe folgenden DAtenpunkte angelegt:

                                        0_userdata.0.Wetter.WeatherAnimation.WeatherAnimation
                                        0_userdata.0.Wetter.WeatherAnimation.Weatherurl
                                        

                                        Der DAtenpunkt Animation wird befüllt mit einer Zahl, auch die WeatherURL. Aber ich erhalte dann eine z.B. Animation 2 und url http://192.168.178.70:8082/vis.0/Wetter/WeatherAnimation/52.png

                                        In der VIS wird dann logischerweise auch nicht das richtige Bild angezeigt. Kann mir jemand bitte helfen?

                                        edit:
                                        Ich habe den Code wie folgt abgeändert:

                                        var ImageName, ImageNumber, ImageNumberConverted, NewLink;
                                        
                                        on({id: "daswetter.0.NextHours.Location_1.Day_1.current.iconURL", change: "any"}, async function (obj) {
                                          // Sicherstellen, dass obj.state und obj.state.val existieren
                                          if (!obj.state || typeof obj.state.val === 'undefined') {
                                            console.error("obj.state.val ist undefined!");
                                            return; // Früher zurückkehren, wenn der Wert nicht definiert ist
                                          }
                                        
                                          var value = obj.state.val;
                                          var oldValue = obj.oldState.val;
                                          
                                          // Ausgabe der URL, um zu sehen, wie sie aussieht
                                          console.log("URL:", value);
                                          
                                          // Falls die URL leer oder ungültig ist, logge eine Fehlermeldung
                                          if (!value) {
                                            console.error("Die URL (obj.state.val) ist leer oder ungültig!");
                                            return;
                                          }
                                          
                                          // Extrahiere den ImageNumber aus der URL
                                          ImageName = value.split('/');
                                          console.log("ImageName Teile:", ImageName); // Ausgabe der Teile nach dem Split
                                        
                                          // Versuchen, den Dateinamen zu extrahieren
                                          if (ImageName.length > 0) {
                                            // Der Dateiname könnte der letzte Teil der URL sein
                                            const filename = ImageName[ImageName.length - 1];
                                            console.log("Dateiname:", filename);
                                        
                                            // Versuchen, die Bildnummer aus dem Dateinamen zu extrahieren
                                            const match = filename.match(/^(\d+)\.png$/); // Annahme: Der Dateiname ist eine Zahl gefolgt von .png
                                            if (match) {
                                              ImageNumber = match[1];
                                              ImageNumberConverted = parseFloat(ImageNumber);
                                              console.log("Extrahierte Bildnummer:", ImageNumber);
                                            } else {
                                              console.error("Kein gültiger Dateiname gefunden");
                                              return;
                                            }
                                          } else {
                                            console.error("Die URL hat nicht genügend Teile.");
                                            return; // Rückgabe, wenn die URL nicht das erwartete Format hat
                                          }
                                        
                                          // Berechne die Zeit für Sonnenaufgang und Sonnenuntergang
                                          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();
                                        
                                          // Setze den Wert für die Animation
                                          setState("0_userdata.0.Wetter.WeatherAnimation.WeatherAnimation", ImageNumberConverted);
                                        
                                          // Logik für unterschiedliche Tageszeiten
                                          if (now_m > sunset_m - 60 && now_m <= sunset_m + 60) {
                                            log("dusk " + sunrise_m + " " + sunset_m);
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", obj.state.val, true);
                                          } else if (now_m > sunrise_m - 60 && now_m <= sunrise_m + 60) {
                                            log("dawn " + sunrise_m + " " + sunset_m);
                                            NewLink = ['http://192.168.178.70:8082/vis.0/Wetter/WeatherAnimation/', ImageNumberConverted + 50, '.png'].join('');
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", NewLink, true);
                                          } else if (now_m > sunrise_m + 60 && now_m <= sunset_m - 60) {
                                            log("day " + sunrise_m + " " + sunset_m);
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", obj.state.val, true);
                                          } else {
                                            log("night " + sunrise_m + " " + sunset_m);
                                            NewLink = ['http://192.168.178.70:8082/vis.0/Wetter/WeatherAnimation/', ImageNumberConverted + 50, '.png'].join('');
                                            setState("0_userdata.0.Wetter.WeatherAnimation.Weatherurl", NewLink, true);
                                          }
                                        
                                          // Konsolenausgaben für Debugging
                                          //console.log("ImageName:", ImageName);
                                          //console.log("ImageNumber:", ImageNumber);
                                          //console.log("ImageNumberConverted:", ImageNumberConverted);
                                          //console.log("sunrise_m:", sunrise_m);
                                          //console.log("sunset_m:", sunset_m);
                                          //console.log("now_m:", now_m);
                                        });
                                        
                                        

                                        Jetzt bekomme ich in

                                        0_userdata.0.Wetter.WeatherAnimation.Weatherurl = /vis.0/main/Wetter/Wetter Hd/2.png
                                        

                                        und

                                        0_userdata.0.Wetter.WeatherAnimation.WeatherAnimation = 2
                                        

                                        Außerdem erhalte ich noch folgenden Fehler, den ich schon einmal hatte:

                                        web.0
                                        2025-03-25 16:37:01.785	error	Invalid pattern on subscribe: The pattern "id: "daswetter.0.NextHours.Location_1.Day_1.current.iconURL", change: "any"" is not a valid ID pattern
                                        
                                        1 Antwort Letzte Antwort
                                        0
                                        • KnallochseK Knallochse

                                          @wawyo ich finde das echt klasse. Selbst benutze ich animierte Wettersymbole (gif)
                                          Diese animierten Wettersymbole habe ich käuflich erworben
                                          Beispiel:
                                          ebc4db2235034.560a96356930d.gif
                                          XHqB.gif

                                          So sieht meiner Wetterview gerade aus.
                                          FullSizeRender.gif

                                          Ich hätte noch ein paar Anregungen für dich.
                                          Ich fände es gut, wenn dein Hintergrund transparent wäre (deine Horizontgrafik & Eiszapfen am oberen Rand abschaltbar?)
                                          So wäre man flexibler in der freien Gestaltung in der VIS.
                                          Deine Regentropfen finde ich ein bisschen groß (nur mein Empfinden).
                                          Das mit dem Herbstlaub finde ich richtig schön 👍
                                          Falls du ein paar meiner animierten Gifs zur Anregung möchtest, melde dich einfach.

                                          wendy2702W Online
                                          wendy2702W Online
                                          wendy2702
                                          schrieb am zuletzt editiert von
                                          #41

                                          @knallochse sagte in Real Weather (Bald):

                                          @wawyo ich finde das echt klasse. Selbst benutze ich animierte Wettersymbole (gif)
                                          Diese animierten Wettersymbole habe ich käuflich erworben
                                          Beispiel:
                                          ebc4db2235034.560a96356930d.gif
                                          XHqB.gif

                                          So sieht meiner Wetterview gerade aus.
                                          FullSizeRender.gif

                                          Ich hätte noch ein paar Anregungen für dich.
                                          Ich fände es gut, wenn dein Hintergrund transparent wäre (deine Horizontgrafik & Eiszapfen am oberen Rand abschaltbar?)
                                          So wäre man flexibler in der freien Gestaltung in der VIS.
                                          Deine Regentropfen finde ich ein bisschen groß (nur mein Empfinden).
                                          Das mit dem Herbstlaub finde ich richtig schön 👍
                                          Falls du ein paar meiner animierten Gifs zur Anregung möchtest, melde dich einfach.

                                          Wo bekommt man denn diese Gifs? Nutzt du das noch so und funktioniert alles noch?

                                          Bitte keine Fragen per PN, die gehören ins Forum!

                                          Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                          KnallochseK 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          805

                                          Online

                                          32.5k

                                          Benutzer

                                          81.6k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe