Tablet UI und Digitaler Bilderrahmen

buchner51 · 09 Oktober 2016, 14:50:25

Hallo,

ich würde gerne einen Digitalen Bilderrahmen auf einer der html Seiten darstellen bez. einbinden.

Hat hiermit jemand erfahrungen, oder sowas umgesetzt?

Danke für eure Unterstützung.

Update:

Hat keiner einen Ansatz??

Update:

Habe folgenden Code gefunden/zusammengesetzt:

Code Auswählen

<html>
<title>FHEM</title>
<head>


<title>automatischer Bildwechsel 01-A f&uuml;r Grafiken mit Vorladen tauschen mit JavaScript</title>
<meta name="description" content="automatischer Bildwechsel 01-A f&uuml;r Grafiken mit Vorladen der Grafiken tauschen mit JavaScript">
<meta name="keywords" content="automatischer, Bildwechsel 01-A, Grafiken, Vorladen, Bildtausch, zeitgersteuert, JavaScript, Images, change, swap">

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="shortcut icon" type="image/x-icon" href="../../favicon.ico">

<meta name="publisher" CONTENT="Wilhelm Jansen">
<meta name="copyright" CONTENT="Wilhelm Jansen">
<meta name="page-topic" CONTENT="Web-Design JavaScript">
<meta name="author" content="Wilhelm Jansen">

<meta name="audience" CONTENT="Alle">
<meta name="robots" CONTENT="INDEX,FOLLOW">
<meta name="Content-Language" content="de">
<meta name="generator" content="U.Meybohm HTML EDITOR phase5">

<link rel="stylesheet" href="../../styles01.css" type="text/css">
<script type="text/javascript" language="JavaScript" src="../../funktionen.js"></script>

           <script type="text/javascript" language="JavaScript">
<!--

// www.web-toolbox.net

// Anzeigezeit in ms
var WechselZeit = 2000;

ImageArr = new Array()

// URL der Bilder  hier eintragen
ImageArr[ImageArr.length] = "bilder/blumen-01.jpg";
ImageArr[ImageArr.length] = "bilder/blumen-02.jpg";
ImageArr[ImageArr.length] = "bilder/blumen-03.jpg";
ImageArr[ImageArr.length] = "bilder/blumen-04.jpg";
ImageArr[ImageArr.length] = "bilder/blumen-05.jpg";
ImageArr[ImageArr.length] = "bilder/blumen-06.jpg";
ImageArr[ImageArr.length] = "bilder/blumen-07.jpg";


var xAnzahl = ImageArr.length;
var xCounter=-1;


function Bildwechsel01() {
xCounter = xCounter+1;
  if (xCounter < xAnzahl) {
     document.getElementById('Foto01').src = ImageArr[xCounter];
     setTimeout ("Bildwechsel01()",WechselZeit);
     }
  else {
     xCounter = -1;
     Bildwechsel01();
     }
}

// Startverzögerung
setTimeout('Bildwechsel01()', 4000);

// -->
</script>
 <style type="text/css">
<!--

#Alles {
position: relative;
top: 0px;
left: 0px;
border: none;
width: 600px;
height: 412px;
}

#Text {
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #000000;
width: 188px;
height: 400px;
background-color: #5F5F5F;
}

#TextInnen {
position: absolute;
top: 10px;
left: 10px;
border: none;
width: 168px;
height: 380px;
color:#FFFFFF;
text-align: left;
font-family: Verdana,sans-serif;
font-size: 12px;
line-height: 130%;
}

#Grafik {
position: absolute;
top: 0px;
left: 200px;
border: none;
width: 400px;
height: 400px;
}


#Foto01 {
border: 1px solid #000000;
width: 400px;
height: 400px;
}

-->
</style>
   
</head>
<body>
  <div class="page" id="content1">
    <div class="gridster">
    <ul>
	<li data-row="1" data-col="1" data-sizex="14" data-sizey="8">

<!-- wichtig der Eintrag für die id -->


<div id="Alles">

<div id="Text"><div id="TextInnen">
<b>Text-Box</b><br><br>
Hallo,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
</div></div>

<div id="Grafik">
<img id="Foto01" src="bilder/startgrafik.jpg" width="400" height="400" alt="">
</div>

</div>

<br>




<br><br>    
    </li>   
	</ul>
    </div></div>
</body>
</html>

findet einer den fehler ?

Esjay · 10 Oktober 2016, 21:12:12

Hi..Ich hab mir deinen Code jetzt nicht genau angeschaut,aber ich hätte vll einen anderen Simpleren ansatz für dich..

Schau mal hier unter dem Punkt Autoplay.
http://knowthelist.github.io/fhem/tablet/demo_swiper.html

Mfg

buchner51 · 12 Oktober 2016, 21:08:42

Super, Danke.

Das hab ich gesucht, ich meine ich hätte diese Demo schon mal gesehen.

Um so ärgerlicher.

Ich such noch eine Anleitung, hab aber noch nichts gefunden!?!

Ich bekomme den Internen verweiß nicht hin.

Code Auswählen

<li><div data-type="image" data-url="http://lorempixel.com/200/200/" data-refresh="60" class="nocache"></div></li>
        <li><div data-type="image" data-url="http://lorempixel.com/200/200/" data-refresh="60" class="nocache"></div></li>
        <li><div data-type="image" data-url="http://192.168.55.14/photo/Enzo" data-refresh="60" class="nocache"></div></li>
        <li><div data-type="image" data-url="bilder" data-refresh="60" class="nocache"></div></li>

die beiden oberen sind Original und OK, der dritte ist auf meinem NAS und der vierte ist auf dem Fhem Rechner.

Aber die Bilder werden nicht angezeigt, weiß jemand wo der fehler liegt??

setstate · 12 Oktober 2016, 21:15:13

Die URL muss auf genau ein Bild zeigen, nicht auf ein Verzeichnis. Bei lorempixel.com ist noch Magic dahinter, die genau ein Bild unter dieser URL liefert.

Code Auswählen

<li><div data-type="image" data-url="/home/ich/Bilder/img01.png" data-refresh="60" class="nocache"></div></li>

buchner51 · 12 Oktober 2016, 21:32:09

Danke, für die Antwort.

Ich wollte mehrere Bilder in form eines Digitalen Bilderrahmens laufenlassen, wenn ich aber jedes bild einzeln eingeben muss... nö.

Es muss einen anderen weg geben!

Aber auch mit deinem Code zeigt er mir das Bild nicht an ! Kann das ein rechte Problem sein?

setstate · 12 Oktober 2016, 22:24:28

Mein Beispiel war falsch. Das Image muss per HTTML Request erreichbar sein. Das passt die lokale Pfadangabe natürlich nicht. Der Webserver muss das Bild liefern.

data-url="http://server/photo/Enzo/img_01.png"

Der Client kennt nicht den Inhalt des Servers, deshalb muss das Bild genau angeben werden. Wenn es eine Diashow sein soll, muss auf Serverseite ein Script (PHP, ASP) gebaut werden, was die Folder durchsucht und per Zufall ein beliebiges Bild auf ein und derselben URL zurückgibt.

Als PHP gab es hier mal einige Beispiele. Wo, müsste man mal suchen ....

SaschaH · 07 Dezember 2020, 14:04:55

Falls jemand wie ich auch mal hier drüber stolpert, hier die URL zur Swiper-Doku:

https://wiki.fhem.de/wiki/FTUI_Widget_Swiper