Beiträge von lasco1995

lasco1995 · 2. Oktober 2018

Moin Moin,

vielen dank für eure Hilfe.
Funktioniert

Habe aber noch eine Frage. Und zwar wollte ich das Erstelldatum noch mit auslesen:

Code

$date = filemtime($filetmp);
$meindatumsformat = date(' m.d.y', $date); 

$sql = "INSERT INTO images (name,erstelldatum) VALUES ('$filename','$meindatumsformat');
$result = mysqli_query($db,$sql) or die ("MYSQL-Error:".mysqli_error($db));

Bekomme immer folgendes Datum in meine Datenbank geschrieben: 2010-02-18

erstelldatum ist in meiner SQL Typ date. Liegt wahrscheinlich an dem Parameter ,,filetmp" oder ? Komme aber nicht drauf wie bzw. was sonst verwendet werden soll.

Liebe Grüße

lasco1995 · 1. Oktober 2018

Naja die habe ich bei der Einzelabfrage ( da wo es auch funktioniert) ebenfalls drin um nacher die Bilder darzustellen.

Würde mich echt über Hilfe freuen
Bekomme zudem manchmal angezeigt: undefined index img in line 10 bis 12.

lasco1995 · 1. Oktober 2018

Ende vom php teil ?!

lasco1995 · 1. Oktober 2018

Hallo Leute,

ich versuche aktuell mehrere Bilder gleichzeitig in eine SQL Datenbank zu schreiben.
Datenbank: photos-tabelle: images -> Spalten id (int255) , name (varchar(255)), text (varchar(255)),

Der einfach Upload funktioniert auch soweit, jedoch bereitet mir der multible Upload arge Probleme.

Aktuell wird einfach nichts in die Datenbank geschrieben. Erkennt jemand vielleicht den Fehler ?

Hier mal mein code:

PHP

<?php
  // Create database connection
  $db = mysqli_connect("localhost", "root", "", "photos");

 // If upload button is clicked ...
  if (isset($_POST['upload'])) 
  {
      for($i = 0; $i < count($_FILES['img']['name']); $i++)
    {
        $filetmp = $_FILES["img"]["tmp_name"][$i];
        $filename = $_FILES["img"]["name"][$i];
        $filetype = $_FILES["img"]["type"][$i];
        $filepath = "photo/".$filename;
    
    move_uploaded_file($filetmp,$filepath);
    
    $sql = "INSERT INTO images (name, text) VALUES ('$filename','$filepath')";
    $result = mysql_query($sql);
    
    }
     
  }
  $result = mysqli_query($db, "SELECT * FROM images");
?>


<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div id="content">
   

  <form method="POST" action="index.php" enctype="multipart/form-data">
   <div>
    <input multiple=""; type="file" accept="image/*" id="dateien" name="img[]"  />
   </div>
   <div>
     <button type="submit" name="upload">Upload</button>
   </div>
  </form>
</div>
</body>
</html>

Alles anzeigen

Würde mich über jede Hilfe sehr freuen.

Liebe Grüße

lasco1995 · 7. September 2018

Ok aber danke schonmal

Sempervivum dein Beispiel ist echt gut und funktioniert auch so schonmal wie ich es mir vorstelle.

Prüfe es nun mal komplett durch.

Grüße

lasco1995 · 7. September 2018

Exactly.

Halt für jedes Bild einen Link.

Aktuell sieht es so aus: http://localhost/pannellum-2.4…-V0040005%20-%20lokal.htm

Wenn ich es manuell für jedes Bild im Skript ändere.

Dieser Teil müsste ja dann dynamisch werden: pannellum-2.4.0/examples/Baustelle-Foto-V0040005%20-%20lokal

Vielleicht gibt es ja Ideen eurerseits ?
Grüße

lasco1995 · 7. September 2018

Hey,

danke für eure Hilfe.

Ok sorry, ich versuche es mal genauer zu erklären.

Also ich habe ein Tool, dem ich ein Excel Liste vorgebe.(Anhang) In der Excel Liste befinden sich unzählige Bilder mit deren Metadaten. (Name/Pfad/Datum/GPS-Koordinaten).Diese Excel Liste wird auch im Tool angezeigt und das Tool generiert dann automatisch aus den Daten eine Weltkarte mit den jeweiligen Standpunkten.

Bei diesen Bildern handelt es sich um 360° Fotos. Es soll möglich sein sich jedes einzelne Foto mit dem Viewer zu betrachten. Das heißt ich verwende immer wieder das oben angebene Skript aber änder nur die Bildsource (dynamisch). Letztendlich möchte ich dann pro Bild einen Hyperlink haben, sodass ich mir in der Tooloberfläche jedes Bild individuell über den Link ansehen kann. Sprich wenn nun neue Bilder in die Excel Datei gelesen werden, wird automatisch zu jedem Bild ein Hyperlink zur Betrachtung mit dem Viewer generiert.

Ich habe mir das ganze so gedacht (Beispiel)

für bild 1: www.viewer/C:/OrdnerX/0001.jpg

für bild 2: www.viewer/C:/OrdnerY/0002.jpg

für bild 3: www.viewer/C:/OrdnerY/0003.jpg

Sprich es wird immer nur der letzte Teil der URL mit dem Pfad und Namen abgeändert und dadurch können dann die Bilder individuell angezeigt werden. Dadurch wird dann quasi die dynamische Bildquelle vorgegeben.

Ich hoffe das ist nun ein bisschen verständlicher.

Liebe Grüße und vielen Dank für die Hilfe.

lasco1995 · 6. September 2018

Hey Leute,

ich verzweifel gerade ein wenig das HTML Skript dynamisch aufzubauen.
Der aktuelle Aufruf des html Skriptes erfolgt so : http://localhost/pannellum-2.4…-V0040005%20-%20lokal.htm

Im folgenden Skript wird halt immer ein festes lokales Bild zugewiesen, sodass ich für andere Bilder das immer anpassen muss.
Ziel ist es jedoch, dass das ganze dynamisch wird.
Sprich ich habe eine Excel-Liste mit einigen Bildern und deren Pfad. Ich möchte quasi nun das durch Änderung von V0040005%20-%20lokal auf ein anderes Bild/Pfad der Viewer das Bild öffnen kann.
Es soll quasi jedem Bild in der Liste automatisch ein Hyperlink zugefügt werden.

Das aktuelle Skript:

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto load</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
  pannellum.viewer('panorama', {
  "type": "equirectangular",
  "panorama": "V0040005.jpg",
  "autoLoad": true,
  "autoRotate": -2,
  "compass": true,
  "northOffset": 247.5,
  });
</script>

</body>
</html>

Alles anzeigen

Dazu habe ich diese Möglichkeiten gefunden:

Code: Möglichkeit 1

<body onload=""setImageSrc();"><br" mode="hold" /><img id="img1" src="c:users\xxxxx\xxxx\________"/>
</body



<script language="javascript">
function setImageSrc()
{
var img1=document.getElementById('img1');
img1.src='a.jpg';
}
</script>

Alles anzeigen

Code: Möglichkeit 2

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png";
}

Mit der Möglichkeit 1 habe ich das Panorama ersetzt:

Code

"panorama": "img1",

Gerade ein wenig verwirrt und stehe auf´m Schlauch

Jemand eine Idee bzw. könnte mir Hilfestellung leisten ?

Liebe Grüße

lasco1995 · 5. September 2018

Super jetzt funktioniert es mit dem relativem Pfad. War ein Syntax Fehler.
Besten Dank an euch Beiden.

Naja nun versuche ich das ganze ein wenig dynamisch zu gestalten, sodass das Skript nicht immer für jedes Bild neu angepasst werden muss, sondern die Auswahl eines Bildes aus einem Ordner erfolgen kann.

Danke für eure Hilfe.

lasco1995 · 5. September 2018

Hey, vielen Dank für die Antwort.

Habe es nun nach den beiden Varianten versucht:

Code: Versuch1

"panorama": file://C:/MeineHomepage/pannellum-2.4.0/examples/V0040005.jpg

Code: Versuch2

"panorama": "V0040005.jpg"

Leider erbringt keines von beiden den gewünschten Erfolg.

Es wird kein Bild geladen.

Viele Grüße

lasco1995 · 4. September 2018

Guten Tag alle Zusammen,

ich versuche aktuell mit meinem 360° Viewer auf lokale Bilder zuzugreifen.

Zuvor habe ich die Bilder erst mit dem Browser geöffnet, sodass eine URL zur Verfügung stand.

Das sah dann wie folgt aus:

Code

"panorama": "http://localhost/pannellum-2.4.0/examples/V0050006.JPG"

Dies ist der komplette Code mit der Änderung.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto load</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
    <style>
    #panorama {
        width: 600px;
        height: 400px;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": <img src="V0040005.jpg">,
    "autoLoad": true,
    "autoRotate": -2,
    "compass": true,
    "northOffset": 247.5,
    ]

});
</script>
</body>
</html>

Alles anzeigen

Ich würde mich über die ein oder andere Hilfe sehr freuen.

Viele Grüße

lasco1995 · 22. August 2018

Ja da hast du recht.

Super. Vielen Dank für die schnelle Hilfe.

Damit funktioniert es

lasco1995 · 22. August 2018

Servus,

möchte aktuell einen 360° Video Viewer erstellen. Dies bewerkstellige ich mit Pannellum.

Aktuelles Problem: Das Video wird nicht als 360° Video dargestellt so wie im Beispiel: Pannellum Video Beispiel, sondern als normales Video (keine Rotation etc.). Beispielbild im Anhang.

Den Beispielcode habe ich von Pannellum entnommen (auch im Link hinterlegt):

HTML: Pannellum Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pannellum Video Demo</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <link href="https://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet"
      type="text/css">
    <script src="https://vjs.zencdn.net/5.4.6/video.js"></script>
    <script src="/js/videojs-pannellum-plugin.js"></script>
</head>
<body>

<video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="none" style="width:100%;height:400px;"
  poster="/images/video/jfk-poster.jpg" crossorigin="anonymous">
    <source src="/images/video/jfk.webm" type="video/webm"/>
    <source src="/images/video/jfk.mp4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to
        a web browser that <a href="http://videojs.com/html5-video-support/"
        target="_blank">supports HTML5 video</a>
    </p>
</video>

<script>
videojs('panorama', {
    plugins: {
        pannellum: {}
    }
});
</script>

</body>
</html>

Alles anzeigen

HTML: Mein aktueller Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pannellum Video Demo</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

    <link href="https://vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet"
      type="text/css">
    <script src="https://vjs.zencdn.net/5.4.6/video.js"></script>
    <script src="/js/videojs-pannellum-plugin.js"></script>
</head>
<body>

<video id="panorama" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="none" style="width:100%;height:400px;"
  poster="/images/video/jfk-poster.jpg" crossorigin="anonymous">
    <source src="http://localhost/pannellum-2.4.0/examples/V0030004.MP4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to
        a web browser that <a href="http://videojs.com/html5-video-support/"
        target="_blank">supports HTML5 video</a>
    </p>
</video>

<script>
videojs('panorama', {
    plugins: {
        pannellum: {}
    }
});
</script>

</body>
</html>

Alles anzeigen

Das Video wird geöffnet, aber bei der Darstellung liegt aktuell noch ein Problem vor.

Würde mich über Hilfe freuen.

Grüße

lasco1995 · 21. August 2018

Marzipano beinhaltet aber nur 360° Fotos und keine Videos.
Daher teste ich aktuell Google VR View und Panellum.

lasco1995 · 20. August 2018

Hallo alle zusammen,

ich kann leider keine eigenen Dateien in das iframe vom Google VR Viewer einbinden. Es werden mir immer wieder folgender Fehler angezeigt: Render: Unable to load texture from "//share-your-photo.com/3ec6e26c90.jpg

Dieser Link beinhaltet mein hochgeladenes 360° Foto

Code: iframe Beispiel von Google (funktioniert)

<iframe style="border: 0px;" src="https://storage.googleapis.com/vrview/2.0/index.html?preview=//storage.googleapis.com/vrview/examples/coral-preview.jpg&amp;image=https://storage.googleapis.com/vrview/examples/coral.jpg&amp;is_stereo=true&amp;" width="100%" height="300" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Code: iframe für eigene Dateien

<iframe style="border: 0px;" src="https://storage.googleapis.com/vrview/2.0/index.html?preview=//share-your-photo.com/3ec6e26c90.jpg&amp;image=//share-your-photo.com/3ec6e26c90.jpg&amp;is_stereo=false&amp;" width="100%" height="300" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Liegt das am Hochladen des Fotos, sodass dieser Upload kein CORS erlaubt ?

Würde mich über Hilfe freuen.

Liebe Grüße

lasco1995 · 15. August 2018

Zitat von Sempervivum

Verstehe, dann ist natürlich Handarbeit angesagt und Du musst den Betrachter selber aufbauen.

Ok. Aber woran sehe ich nun welcher Code in die css und welcher in die js etc. Datei kommt.

http://www.marzipano.net/docs.html#apis-and-reference

Unter diesem Link befindet sich ja der komplette Code um das ganze zu erstellen. Bin aber ein wenig überfragt wo ich das ganze unterbringen muss.
Vielleicht besteht dort ja Hilfe deiner bzw. eurerseits.

lasco1995 · 15. August 2018

Zitat von Sempervivum

Das Marzipano-Tool generiert den kompletten Betrachter mit HTML, JS und Bildern. Hochladen ist nicht erforderlich, das Tool generiert den Betrachter im Browser und man kann das ZIP herunter laden. Das ZIP enthält dann eine lauffähige, komplette HTML-Seite mit dem Betrachter.

Das ist mit bewusst, allerdings benötige ich eine eigene Seite. Sprich ich möchte eine Seite haben, wo ich meine Bilder und Videos hochlade und direkt anzeigen lassen kann.

Auf Basis der ausgewählten Image Viewer soll jeweils eine Webseite als Test erstellt werden.

Die Webseite soll die bereitgestellten 360° Bilder und Videos darstellen.

lasco1995 · 15. August 2018

Zitat von Sempervivum

Dein ZIP habe ich nicht herunter geladen, aber eines meiner eigenen Panoramen mit dem Online-Tool bearbeitet. Ergebnis: Der Viewer braucht einen Webserver um zu laufen. Ohne das selbe Ergebnis wie bei dir: Nur ein schwarzes Fenster. Mit: Betrachter funktioniert einwandfrei.

Marzipano scheint auf den ersten Blick ein super Tool zu sein, danke für den Hinweis!

Hallo Sempervivum,

hast du nun lediglich das Marzipano Tool verwendet und dein Bild dort hochgeladen oder auch einen html code generiert und somit eine eigene page erstellt ?

lasco1995 · 15. August 2018

HTML: html

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="marzipano.css">
<meta charset="UTF-8">
<title>marzipano</title>
</head>
<body>
<html>
 <body>
 <script src="es5-shim.js"></script>
   <script src="eventShim.js"></script>
   <script src="marzipano.js"></script>
 </body>
</html>

Alles anzeigen

Code: css

var options = { swfPath: 'swf/marzipano.swf' };
 var viewer = new Marzipano.Viewer(element, options);
 
 npm install marzipano
 
 var Marzipano = require('./marzipano');
    
var panoElement = document.getElementById('pano');
var viewerOpts = {
  controls: {
    mouseViewMode: 'drag'    // drag|qtvr
  }
};

var viewer = new Marzipano.Viewer(panoElement, viewerOpts)
    
var levels = [
  { tileSize: 256, size: 256, fallbackOnly: true },
  { tileSize: 512, size: 512 },
  { tileSize: 512: size: 1024 }
];

var geometry = new Marzipano.CubeGeometry(levels);

var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg", {
  cubeMapPreviewUrl: "tiles/preview.jpg"
});

var initialView = {
  yaw: 90 * Math.PI/180,
  pitch: -30 * Math.PI/180,
  fov: 90 * Math.PI/180
};

var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120*Math.PI/180);

var view = new Marzipano.RectilinearView(initialView, limiter);

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view,
  pinFirstLevel: true
});
    
    
scene.switchTo({
  transitionDuration: 1000
});
    
var scene = viewer.scene(); // get the current scene
var view = scene.view();    // get the scene's view


// Get the view values

var yaw = view.yaw();
var pitch = view.pitch();
var fov = view.fov();      // fov is horizontal
var vfov = view.vfov();
var hfov = view.hfov();    // same as view.fov()


// Change the values

view.setYaw(45 * Math.PI/180);
view.setPitch(30 * Math.PI/180);
view.setFov(60 * Math.PI/180);

view.setParameters({
  yaw: 45 * Math.PI/180,
  pitch: 30 * Math.PI/180,
  fov: 60 * Math.PI/180
});


// Offset the values by some amount

view.offsetYaw(10 * Math.PI/180);
view.offsetPitch(10 * Math.PI/180);
view.offsetFov(10 * Math.PI/180);
    
var autorotate = Marzipano.autorotate({
  yawSpeed: 0.1,         // Yaw rotation speed
  targetPitch: 0,        // Pitch value to converge to
  targetFov: Math.PI/2   // Fov value to converge to
});

// Autorotate will start after 3s of idle time
viewer.setIdleMovement(3000, autorotate);  
// Disable idle movement
viewer.setIdleMovement(Infinity);

// Start autorotation immediately
viewer.startMovement(autorotate); 
// Stop any ongoing automatic movement
viewer.stopMovement();

Alles anzeigen

Dieser Link stellt den Quellcode des Viewers zur Verfügung: http://www.marzipano.net/docs.html#apis-and-reference

Ich denke das einige Sachen noch in das JavaScript eingepflegt werden müssen, bin mir aber total unsicher welche.
Aber vielen Dank schonmal m.scatello für die Verbesserungsvorschläge.

lasco1995 · 15. August 2018

Zitat von m.scatello

Der erste Fehler ist schon da.

Quellcodes in Zip-Dateien lädt sich kaum jemand runter.

Oh ok. Wie wäre es denn richtig ?

Beiträge von lasco1995

Multiple Images Upload in SQL

Multiple Images Upload in SQL

Multiple Images Upload in SQL

Multiple Images Upload in SQL

Dynamische Bildquelle

Dynamische Bildquelle

Dynamische Bildquelle

Dynamische Bildquelle

Lokale Bilder öffnen

Lokale Bilder öffnen

Lokale Bilder öffnen

360° Video - Panellum -falsche Darstellung

360° Video - Panellum -falsche Darstellung

Google VR View- eigene Fotos/Videos

Google VR View- eigene Fotos/Videos

360° Photo/Video Viewer

360° Photo/Video Viewer

360° Photo/Video Viewer

360° Photo/Video Viewer

360° Photo/Video Viewer