Webcams DIS locations

index.html

<div class="dis-container active">
  <article class="webcam simple js-copenhagen">
    <section class="label">Copenhagen</section>
    <section class="webcam-container">
    
    </section>
  </article>
  <article class="webcam simple js-st-paul">
    <section class="label">Saint Paul</section>
    <section class="webcam-container">
    </section>
  </article>
  <article class="webcam simple js-stockholm">
    <section class="label">Stockholm</section>
    <section class="webcam-container">
    </section>
  </article>
</div>

script.js

/*
 *  Main function to set the clock times
 */
(function() {
  var webcams = getWebcams();
  refreshWebcamImages(webcams);
})();

function getWebcams() {
  var webcams = [
    {
      jsclass: 'js-copenhagen',
      jsalt_text: 'Copenhagen Inner City',
      jswebcam_id: '1511514946',
      jswebcam_imageurl: 'http://api.deckchair.com/v1/viewer/camera/588ef5bffe981d131a543540',
      
    },
    {
      jsclass: 'js-stockholm',
      jsalt_text: 'Stockholm Harbour',
      jswebcam_id: '1511213367',
      jswebcam_imageurl: 'http://api.deckchair.com/v1/viewer/camera/58b8226690edad536d9669d0',
    },
    {
      jsclass: 'js-st-paul',
      jsalt_text: 'St. Paul / Stillwater Saint Croix River and Historic Lift Bridge',
      jswebcam_id: '1400790255',
      // no imageurl outside webcamstravel api
    }
  ];
  var request = new XMLHttpRequest();
  var webcamIds = webcams.map(function(webcam){return webcam.jswebcam_id; }).join(',');
  var reqUrl = 'https://webcamstravel.p.rapidapi.com/webcams/list/webcam='+webcamIds+'&show=webcams:image'; 
  request.open('GET', reqUrl , true);
  request.setRequestHeader('X-RapidAPI-Key', 'ffbf7c9670msh6fd7ff022fdd76fp14683bjsncd29275700e7')
  request.onload = function () {
    // Begin accessing JSON data here
    var data = JSON.parse(this.response)['result']['webcams'];
    if (request.status >= 200 && request.status < 400) {
      data.forEach(webcam => {
        for(i =0; i < webcams.length; i++) {
          if(webcams[i].jswebcam_id == webcam['id']) {
            if (webcam['status'] == 'active') {
              if( webcams[i].jswebcam_imageurl == undefined  ) {
                 webcams[i].jswebcam_imageurl = webcam['image']['current']['preview'];
              }
            } else {
              webcams[i].jswebcam_imageurl = webcam['image']['daylight']['preview'];
              webcams[i].jsmod = 'blurred'; 
            }
          }
        }  
      });
      
    } else {
      console.log('error');
    }
    console.log('initializing');
    initializeWebcamImages(webcams);
  }
  request.send();
  return webcams;
}

function initializeWebcamImages(webcams) {
  console.log('initializing:');
  console.log( webcams);
  for(var i = 0; i < webcams.length; i++) {
    if (webcams[i].jswebcam_imageurl) {
      var elements = document.querySelectorAll('.' + webcams[i].jsclass);
      elements.forEach(function(cam) {
        cam.className = cam.className + ' ' + webcams[i].jsmod + ' show';
        cam.appendChild(createImgElement(webcams[i]));
      });
    }
  }
}

function refreshWebcamImages(webcams) {
  // Then continue with a 300 (5min) second interval
  setInterval(function() {
    for (var i = 0; i < webcams.length; i++) {
      console.log('refreshing: ');
      console.log(webcams);
    }
  }, 6000);//300000);
}

function createImgElement(webcam){
  console.log('creating img ' + webcam.jsalt_text);
  var webcamImg = document.createElement("img");
  var now = new Date();
  var url  =  webcam.jswebcam_imageurl + '?' + now.getTime();
  webcamImg.setAttribute("src", url);
  webcamImg.setAttribute("width", "300");
  webcamImg.setAttribute("height", "200");
  webcamImg.setAttribute("alt", webcam.jsalt_text);
  console.log(webcamImg);
  return webcamImg;
}

style.scss

body {
  margin: 0;
}

.dis-container {
  background: #EDEDED;
  padding: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.webcam.simple {
  display: inline-block;
  margin: 1%;
  margin-top: 5%;
  padding-bottom: 0%;
  position: relative;
  top: 0%;
  width: 31%;
  opacity: 0;
  transform: translateY(15%);
}

.webcam img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.webcam.blurred img {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.webcam.blurred::before, .webcam.blurred:after {
    position: absolute;
    content: '';
    background: rgba(255, 0, 0, 0.3);
    display: block;
    width: 100%;
    height: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.webcam.blurred:after {
    -webkit-transform: rotate(45deg);  
    transform: rotate(45deg);
}
// Put in a no-js alternative so they're not invisible

.webcam.show {
  opacity: 1;
}

.label {
  background: #fff;
  border-radius: 0.25em;
  color: #000;
  font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.5em 0.75em 0.25em;
  position: absolute;
  top: -4em;
  left: 50%;
  transform: translate(-50%, 0);
}

webcams-dis-locations.markdown

Webcams DIS locations

A Pen by Gissur Jónsson on CodePen.

License.