全屏幻灯片分辨率

问题描述

我正在从 soggybag Github 项目创建幻灯片。 https://github.com/soggybag/js-tutorial-slide-show 此幻灯片在 raspBerrypi 4 上运行，操作系统为 raspbian，屏幕分辨率为 w1920Xh720。 我想在 Chromium 的 kiosk 模式下显示全屏图像，但我只看到让它运行两个图像而不是一个图像。 女巫不应该是这种情况，因为示例项目也有一张图像，但没有全屏演示。 我使用的图像的分辨率为 w1920Xh720。 如果我记录 document.getElementById(‘div id’).offsetHeight 和 Width，我会得到值 w3840Xh1440。当我将这些值附加到幻灯片中的图像时，我会在屏幕上看到两个图像。(see picture)

我猜我在定义屏幕和/或图像分辨率时犯了错误，但我似乎没有发现我做错了什么。

希望你能帮我解决这个问题。

//declaring variable//////////////
var sliderHeight ;
var sliderWidth ;
var mediaList = { normal: [],happy: [] };
var mediaLen;
var normalActive = Boolean;
var localhost = "http://localhost:1880/";
var index = 0;
var interval;
var noMediaFound = false;
var leftToRight = true;
var happyhour = {"happyHour": false};
var slidesWidth;
////////////////////////////////////
let delay = parseInt(slides.dataset.delay)
let transition = parseInt(slides.dataset.transition)
const slidesInner = slides.querySelector('.ms-slides__inner');

if (slides.dataset.delay === null) {
  delay = 2000
}
if (slides.dataset.transition === null) {
  transition = 400
}

slidesInner.style.transition = `${transition}ms`
//////////////////////////////////////////////////////////////////////

//when page get loaded/////////////////////////////////////////////////////
function startup() {
  let heigth = document.getElementById('slides').offsetHeight;//get size of de slides this 100 percents so full screen
  let width = document.getElementById('slides').offsetWidth;
  sliderWidth = width;
  sliderHeight = heigth;
  slidesWidth = width; //slidesWidth is for the transistion this part works correctly and will slide full screen width
  console.log("heigth "+heigth); //1440 onload in kiosk mode
  console.log("width "+width); //3840 onload in kiosk mode


  happyhourrequest = setInterval(function () {//this request is to check if it's happy hour to display the happyhour pictures
    let xhttp = new XMLHttpRequest();
    xhttp.open("GET","http://localhost:1880/Happyhour",false);
    try {
      xhttp.send();
      if (xhttp.status != 200) {
        console.log("error");
      } else {
        let response = JSON.parse(xhttp.responseText);
        happyhour = response;
        return 0;
      }
    } catch (err) { // instead of onerror
      alert("Request Failed");
    }
  },10000)  
  startInterval(); //starts interval to go to next or prevIoUs slide this Could be started and stopt when a video is started if video ends the interval will start again.
  MediaListRequest(); //request the medialist from the nodered server.
  media();
  if (document.readyState === 'ready' || document.readyState === 'complete') {
    if (normalActive) {
      if (mediaList.normal[0].endsWith(".mp4")) {
        let vidcontrol = document.getElementById(mediaList.normal[index]);
        vidcontrol.muted = "muted";
        vidcontrol.play(null);
        clearInterval(interval);
      }
    } else {
      if (mediaList.happy[0].endsWith(".mp4")) {
        let vidcontrol = document.getElementById(mediaList.happy[index]);
        vidcontrol.muted = "muted";
        vidcontrol.play(null);
        clearInterval(interval);
      }
    }
  }

}

function media() {// depending on if it's happy hour and if node red have scanned a usb drive the function called will add the media from the normal map,happyhour map or standaard map.
  if (happyhour) {
    if (mediaList.happy.length > 0) {
      mediaHappy();
    } else if ((mediaList.happy.length === 0) && (mediaList.normal.length > 0)) {
      medianormal();
    }
    else {
      standaardImage();
    }
  } else {
    if (mediaList.normal.length > 0) {
      medianormal();
    } else {
      standaardImage();
    }
  }
}

function standaardImage() {// adds the default image if nodered Could not find the media
  let idlist = [0];
  idlist[0] = "standaard";
  noMediaFound = true;
  clearInterval(interval);
  addImg('/home/pi/Documents/SlideShow/Media/standaard/standaard.jpg',idlist);
}

function clearMediaAndAddNew() { //this functie clears the webpage from the media if it needs to be switched from normal to happyhour media and from happyhour to normal
  //it als adds the nieuw media
  if (normalActive) {
    clearMediaLen = mediaList.normal.length;
    for (let i = 0; i < clearMediaLen; i++) {
      let clearobj = document.getElementById(mediaList.normal[i]);
      clearobj.remove();
    }
    if (mediaList.happy.length > 0) {
      mediaHappy();
    } else {
      standaardImage();
    }
  }
  else {
      clearMediaLen = mediaList.happy.length;
      for (let i = 0; i < clearMediaLen; i++) {
        let clearobj = document.getElementById(mediaList.happy[i]);
        clearobj.remove();
      }
      if (mediaList.normal.length > 0) {
        medianormal();
      } else {
        standaardImage();
      }
    }
  }

  function mediaHappy() {//adds media happyhour
    normalActive = false;
    mediaLen = mediaList.happy.length;
    for (let i = 0; i < mediaLen; i++) {
      if (mediaList.happy[i].endsWith(".mp4")) {
        let path = localhost + 'h' + mediaList.happy[i];
        addVid(path,i,mediaList.happy);
      }
      if (mediaList.happy[i].endsWith(".jpg")) {
        let path = localhost + 'h' + mediaList.happy[i];
        addImg(path,mediaList.happy);
      }
    }

  }

  function medianormal() {//adds media normal
    normalActive = true;
    mediaLen = mediaList.normal.length;
    for (let i = 0; i < mediaLen; i++) {
      if (mediaList.normal[i].endsWith(".mp4")) {
        let path = localhost + mediaList.normal[i];
        addVid(path,mediaList.normal);
      }
      if (mediaList.normal[i].endsWith(".jpg")) {
        let path = localhost + mediaList.normal[i];
        addImg(path,mediaList.normal);
      }
    }

  }

  function addImg(path,idList) { //adds a image
    var img = document.createElement("img");
    img.src = path;
    img.id = idList[i];
    img.width = sliderWidth;
    img.height = sliderHeight;
    document.getElementById("slider").appendChild(img);
  }

  function addVid(path,idList) { //adds a video
    var vid = document.createElement("video");
    vid.src = path;
    vid.id = idList[i];
    vid.width = sliderWidth;
    vid.height = sliderHeight;
    vid.onended = function () { nextSlide(); prevSlide(); startInterval(); }; // als de video geeindigd is ga naar volgende slide
    document.getElementById("slider").appendChild(vid);
  }



  function MediaListRequest() {// request the medialist from the nodered server
    let xhttp = new XMLHttpRequest();
    // let media= {settings: {happyHourStart: {hour: 0,minute : 0},happyHourEnd: {hour: 0,minute : 0}},normal: [],happy: []};
    xhttp.open("GET","http://localhost:1880/mediaList",false);
    try {
      xhttp.send();
      if (xhttp.status != 200) {
        console.log("error");
      } else {
        let media = JSON.parse(xhttp.responseText);
        settings = media.settings;
        mediaList.normal = media.normal;
        mediaList.happy = media.happy;
        return 0;
      }
    } catch (err) { // instead of onerror
      alert("Request Failed");
    }
  }


  //controls
  function startInterval() {//starts interval to go to next or prevIoUs slide this Could be started and stopt when a video is started if video ends the interval will start again.
    if (!isNaN(delay) && delay > 0) {
      interval = setInterval(function () {
        if (normalActive) {
          if (mediaList.normal[index].endsWith(".jpg")) {// index een foto is moet deze gewoon op de tijd gaan
            nextSlide();
            prevSlide();
          }
        }
        else {
          if (mediaList.happy[index].endsWith(".jpg")) {// index een foto is moet deze gewoon op de tijd gaan
            nextSlide();
            prevSlide();
          }
        }
      },delay)
      
    }
  }

  function nextSlide() {//go to next slide
    if (leftToRight) {
      index += 1
      if (index === mediaLen) {
        leftToRight = false;
        prevSlide();
      }
      showSlide()
    }
  }

  function prevSlide() {//go to prevIoUs slide
    if (leftToRight === false) {
      index -= 1
      if (index < 0) {
        index = 0;
        leftToRight = true;
        nextSlide();
      }
      showSlide()
    }
  }

  function showSlide() {// transition from slide to next slide or prevIoUs. if the next slide is a video the video will be started
    // CSS - transform : translate3d(0,0);
    if((happyhour.happyHour&&normalActive)||(!happyhour.happyHour&&!normalActive)){
      clearMediaAndAddNew();
      index= 0;
    }

    if (normalActive) {
      if (mediaList.normal[index].endsWith(".mp4")) {
        let vidcontrol = document.getElementById(mediaList.normal[index]);
        vidcontrol.muted = "muted";
        vidcontrol.play(null);
        clearInterval(interval);
      }
    }
    else {
      if (mediaList.happy[index].endsWith(".mp4")) {
        let vidcontrol = document.getElementById(mediaList.happy[index]);
        vidcontrol.muted = "muted";
        vidcontrol.play(null);
        clearInterval(interval);
      }
    }


    slidesInner.style.transform = `translate3d(${index * -slidesWidth}px,0)`
  }

.ms-slides__inner {
    display: flex;
    flex-direction: row;
    position: fixed;
    transform: translate3d(0,0);
    transition: 1000ms;
    width: 100%;
    height: 100%;
    padding: 0px;
    border: 0px ;
    margin: 0px;
}

.ms-slides {
    overflow: hidden;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="slider.css">
    <style>
        /* CSS Styles */

        body {
            font-family: Arial,Helvetica,sans-serif;
            width: 100%;
            height: 100%;
            position: fixed;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /* Developer Styles */
        #slides {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body onload="startup()">

<div id = "slides" class = "ms-slides"  data-delay="3000" data-transition="1000">
<div id="slider" class = "ms-slides__inner"> 
</div>
</div>



<script src="slider.js"></script>

</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）