Webcams im Vollbildmodus per Doppelklick
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
abstand
anpassen
auslese
bild
bilderrahmen
code
datei
ende
frage
index
kamera
kanal
pixel
problem
programm
server
text
turmfalke
url
zeile
-
Hallo an Alle,
ich betreibe eine Website zur Beobachtung von Turmfalken. In die Seite sind 2 Kameras eingebunden. Da es bei der Einbindung der Kameras per Flash, Java, ActiveX oder Real Viewer immer wieder zu Darstellungsproblemen kam ( keiner der Viewer läuft in ALLEN gängigen Browsern ) habe ich mich für den Simple Jpeg Viewer entschieden.
Die Kameras unterstützen leider nur den gleichzeitigen Zugriff von 3 Benutzern. Daher mußte ich den Umweg über eine Webserversoftware gehen.
Nun würde ich aber gern den Gästen meiner Seite die Möglichkeit bieten per Doppelklick das Bild ins Vollbild zu bringen und per weiterem Doppelklick wieder zurück in die normale Ansicht.
Die Kameras übertragen mit einer Auflösung von 640 x 480 .
Leider kenne ich mich mit derartigen Programmierungen überhaupt nicht aus. Das Durchforsten diverser Foren brachte mich auch nicht weiter. Die Fachsimpeleien dort sind für mich völlig unverständlich da mir die Vorkenntnisse fehlen-
Hat jemand eine Idee wie das zu realisieren wäre und kann mir das so erklären das ich das auch ohne Informatikstudium verstehe?
Im Voraus schon mal herzlichen Dank!
Herzliche Grüße aus Spandau
von den Turmfalken in St. Nikolai -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn du keine Ahnung hast, müsste ich weit ausholen mit dem Erklären.
Ich habe es nun einfach programmiert und mit Kommentaren versehen. Ich hoffe das ist selbsterklärend. Ansonsten einfach nachfragen.
http://test42test.lima-city.de/Webcam.htm
Wenn du den Code sehen möchtest, öffne einfach das Kontextmenü(Rechtsklick) und lasse dort den Seitenquelltext anzeigen.
Was ich noch nicht drin habe, ist die Möglichkeit, den Kanal zu wechseln. Jedoch ist alles dafür vorbereitet. -
Hallo test42test,
Na wie cool ist das denn? Ich bedanke mich recht herzlich!
Eigentlich schade das ich da einfach zu dusselig zu bin.
Vielleicht sollte ich doch mal n Kurs in HTML belegen (
ja, ich weiß zumindest wie die Programmiersprache heisst 
)
Aber das nächste Problem ist ja: Ich kann kaum Englisch
Würdest Du mir die anderen Cams auch da einbauen? Die 3. müßte ich allerdings erst ins System einbinden. Die ist noch nicht installiert.
Viel wichtiger aber die Frage: Wie kann ich mich revanchieren?
Naja aber immerhin hab ich die Hardware inkl. Einrichtung zumindestens auf die Reihe bekommen.
Herausforderung war, die beiden ( später 3 ) Kamerasignale vom Kirchturm zu mir nach Hause zu bekommen da mir dort kein Internetanschluß zur Verfügung steht und ich das Signal nur von zu Hause aus ins Netz bekomme.
Herzliche Grüße aus Spandau
-
Jetzt kann man auch noch zwischen 1 und 2 umschalten.
turmfalken-nikolai schrieb:
Viel wichtiger aber die Frage: Wie kann ich mich revanchieren?
Wie wär's mit einer positiven Bewertung?
Die paar Minuten, die ich zum Erstellen gebraucht habe, sind der Rede nicht wert. -
Würde ich gern tun aber ich bekomm immer folgende Meldung:
Damit du Beiträge bewerten kannst müssen mindestens 3 unterschiedliche Benutzer Beiträge von dir positiv bewertet haben
Sollte das irgendwann eingetreten sein werde ich das selbstverständlich nachholen
Herzlichen Dank auf jeden Fall schon mal! -
So wie du den Code momentan umgesetzt hast, macht es wenig Sinn.
Auf einer neuen Seite reicht es doch, das Bild direkt im Vollbildmodus anzuzeigen (ok, vielleicht mag nicht jeder die Pixel sehen, sondern nur die Originalgröße).
Ich würde dir vorschlagen, das Bild direkt in deine Seite einzubinden..
Hier bitte nicht den Quellcode kopieren, sondern ins CMS einbauen. -
Hallo test24test,
ja, so hatte ich mir das vorgestellt, es aber nicht hinbekommen.
Es war zwar im CMS drin aber es passierte nichts beim Doppelklick. Deswegen hab ich das als neu öffnende Seite eingebaut.
Wird mich damit nochmal beschäftigen und sehn ob ich das gebacken krieg.
Herzlichen Dank auf jeden Fall! Du hast mir sehr geholfen!
Update:
Nun hab ich es tatsächlich geschafft die Seite online zu bringen. Leider ist ein Einfügen in den ZetaProducer so nicht möglich ( habe nur die Home Edition ). Das heißt also, das ich diese Seite nicht mehr bearbeiten kann.
Was das CMS angeht haben wir da wahrscheinlich aneinander vorbei geredet. Ich meinte ZetaProducer CMS, test24test sicher was Anderes
Kennt eventuell jemand ein ähnliches Programm mit dem das möglich ist und in das ich die vorhandene Seite importieren kann? Früher gabs da ja FrontPage Express von Microsoft ( ich weiß! Die Fachleute lachen sich jetzt tot
) , ich hab es mit Mirabyte Web Architect versucht, kriegs aber auch nicht hin weil ich auch da den HTML Code verändern muß um Dinge einzufügen oder zu ändern. Dazu wiederum fehlen mir die Grundlagen HTML.
Ich mag aber auch nicht immer andere Leute damit behelligen und in Anspruch nehmen! Schon deswegen nicht weil ich mich kaum revanchieren kann.
Beitrag zuletzt geändert: 14.3.2016 21:32:35 von turmfalken-nikolai -
Mit CMS meinte ich, was immer du verwendest
Ich kenne das CMS nicht und auf der Herstellerseite konnte ich die gewünschte Info nicht finden.
Aber ich hoffe, dass du HTML (und JS) Code direkt einfügen kannst (also dort wo du den normalen Text für die Internetseite schreibst) und dieser dann umgesetzt wird und nicht als Code angezeigt wird( also Text und nicht <u>Text</u>).
Dann kannst du meinen Code direkt hinein kopieren (falls du dir unsicher bist, welchen und wo -> fragen).
Ansonsten fällt mir gerade nur eine etwas hässliche Möglichkeit ein:
Dein CMS produziert doch HTML-Seiten, welche du/das Programm anschließend auf den Server hochladen.
Dort könntest du dann von Hand (und womöglich jedes mal, wenn du an deiner Seite etwas änderst) den Code einfügen.
Zumindest könnte ich es vereinfachen, indem du nur eine Zeile Code hineinschreiben musst, welche du auch (leider) schnell auswendig können wirst. -
Leider bietet das Programm nicht die Möglichkeit den Seitencode direkt anzuzeigen bzw. Teile einzufügen.
Ich kann nur im entsprechenden Frame ein Textfeld öffnen, dort einen Code eingeben und dann wandelt das Programm diesen in den entsprechenden Inhalt an dieser Stelle um.
Dies bedeutet allerdings auch, das ich jetzt schon nach jeder Aktualisierung der Website diese Teilseite ( falkencams.htm ) auf dem Server gegen die von Dir erstellte austauschen muß da auch ein Import von *.htm Dateien in das Programm nicht möglich ist.
-
So, ich habe das Problem jetzt so gut es geht gelöst:
Bei deiner falkencams.html musst du künftig nur deinen Text durch
<script src="Kamera.js"></script>
ersetzen:
<div class="zpRow standard "> <div class="zpColumn zpColumnWidth1"> <div class="zpColumnItem"> <div id="a1445" class="articlearea"> <script src="Kamera.js"></script> </div> </div> </div> </div>
In deinem CMS musst du zuvor den ganzen Text löschen und am besten nur genau ein Wort (z.B. HierKommtDasScript) schreiben.
Anschließend öffnest du die HTML Seite mit einem Editor und suchst nach diesem Wort und ersetzt es durch <script src="Kamera.js"></script>
Seite speichern und hochladen. Fertig!
Damit das Script Kamera.js aufgerufen werden kann, muss es natürlich auch noch auf dem Server liegen.
test42test.lima-city.de/Kamera.js -
Hurraaa, funzt super! Vielen Dank!
Dürfte ich Dich eventuell noch um eins bitten? Es gibt noch eine 3. Kamera für die im Sommer stattfindende Beringung.
Würdest Du mir die auch noch einbauen?
Achso eins wäre noch schön: Nämlich etwas Abstand vom Kamerabild zur Fußzeile .
Beitrag zuletzt geändert: 19.3.2016 20:50:35 von turmfalken-nikolai -
Die Anpassung darfst du selber machen. Dann kannst du in Zukunft es dir auch so Einrichten, wie es dir gefällt.
Leider ist meine Problemlösung etwas hässlich, daher musst du etwas mehr beachten als sonst.
Der gesamte Code für die Webcam befindet sich in der Kamera.js
In der ersten Zeile steht
(Dokument.schreibe)document.write("
damit wird in deine HTML Seite geschrieben und zwar alles was zwischen (" (Zeile 1) und ") (Zeile 33) steht.
Damit keine Fehler auftreten darf dazwischen kein doppelten " , sondern nur die einfachen Anführungszeichen ' vorkommen.
Außerdem muss am Ende jeder Zeile ein \ stehen (Achtung auf die Richtung! Der Schrägstrich beim ß).
Zuerst findest du einen Bereich mit CSS zwischen <style> und </style>. Darin kannst du das Aussehen verändern.
Und so kommen wir schon zur ersten Änderung wegen der Fußzeile. Diese liegt nämlich über dem Bild im Vollbildmodus. Daher musst du noch unter #Bilderrahmen{ eine Zeile einfügen:
z-index:1
Der z-index gibt die Position im Stapel / die Tiefe an. Unsere Bedienung hat einen z-Index von zwei und liegt damit auf dem Bild. Bekommt der Bilderrahmen einen z-Index von 1, so liegt er über dem Rest der Seite, aber unter den Bedienelementen.
Nach diesem Style-Bereich findest du <div>. Ein Div ist eine Hülle.
Der Div mit der id Bedienung beinhaltet zwei <input> Elemente. Das sind die Knöpfe.
value='Text' gibt die Beschriftung des Knopfes an. onClick (beiKlick) führt eine Aktion beim Anklicken durch. Bei uns die Funktion "Wechsel()", welche weiter unten im Code steht.
Die Zahl in der Klammer gibt den Kanal an.
Für eine dritte Kamera musst du folglich nur eine <input> Zeile kopieren, den value ändern und die Zahl in der Klammer durch eine 3 ersetzen. Bitte auf das \ am Ende der Zeile achten.
Im Div Bilderrahmen findest du das <img> Element (img für Image = Bild). src (Source = Quelle) gibt die URL des Bildes an, welches beim Start geladen werden soll. Das ?ch= am Ende der URL gibt den Kanal an.
Wenn sich die Adresse mal ändern sollte, einfach dort anpassen.
Mit "); endet der Bereich von document.write, somit können wieder doppelte Anführungszeichen " verwendet werden und am Ende der Zeile fällt der \ weg.
In der Funktion LoadImage() findest du wieder ein src=
Dort musst du die URL natürlich auch anpassen.
Das waren eigentlich die wichtigsten Stellen im Code.
Fragen darfst du natürlich immer noch, aber kleine Änderungen kannst du nun selbst machen. -
Herzlichen Dank! Werde mich damit in Ruhe beschäftigen, am Besten wenn ich ausgeschlafen bin
ähm wie bzw. womit öffne ich am Besten eine .js Datei?
-
Genau wie die HTML Dateien genügt ein ganz normaler Texteditor (etwa notepad.exe).
js steht für JavaScript, die Sprache, mit der der Inhalt ausgeführt wird.
Für's Programmieren gibt es auch extra Programme (da gibt es hier viele Threads), welche etwa auch den Code einfärben, Fehler erkennen und Befehle vorschlagen können.
Darüber brauchst du dir aber erstmal keine Gedanken machen, das brauchst du nicht.
-
naja wenn ich meine html Dateien über nen einfachen Editor öffne habe ich immer ellenlange Zeilen die völlig unübersichtlich sind. Habe Bedenken das ich da was übersehen oder nicht sehe.
Daher wäre es besser ein ordenliches Programm zu haben was den Dateiinhalt etwas "geordnet" anzeigt.
Update: Ok, das hab ich! Aber nun überlagert das Kamerabild beim Öffnen der Seite unten die Fußzeile.
siehe http://turmfalken-nikolai.lima-city.de/testseite.html
Was ist da falsch?
Beitrag zuletzt geändert: 19.3.2016 22:22:53 von turmfalken-nikolai -
OK, ich hatte gehofft, dass es dir so reicht.
Nungut. Um nach unten einen Abstand zu haben, machen wir den Bildschirm kleiner:
In Kamera.js findest du in der Zeile 60
Height=window.innerHeight;//Höhe auslesen
Diese änderst du in:
Height=window.innerHeight - 48;//Höhe auslesen
um das Bild bündig an die Fußleiste anzupassen (quasi so wie zuvor, nur dass die Fußleiste das Bild nicht mehr verdeckt) oder du erhöhst die 48 (deine Fußzeile ist 48 Pixel hoch) um einen Spalt zwischen der Fußzeile und dem Bild zu bekommen.
Solltest du dein Design ändern und eine andere Größe der Fußzeile haben, musst du den Wert wieder anpassen (darum hatte ich die Überlagerung "vorgeschlagen").
Möchtest du auch nach oben einen Abstand haben, so musst du auch diesen von der Bildschirmhöhe abziehen (entweder -48-48 oder -92, ich empfehle es getrennt, dann erkennst du später wieder, wie die Zahl zustande kommt).
Dann musst du noch den Abstand von oben in die Zeile 69 eintragen:
document.getElementById('Bilderrahmen').style.top='48px';
Beitrag zuletzt geändert: 19.3.2016 22:31:56 von test42test -
Eine "dumme" Frage hab ich aber immer noch.
Ich hatte im Script den Startkanal von Kanal 2 auf Kanal 1 geändert. Trotzdem startet die Seite immer mit Kanal 2.
instar.de:8082/video.jpg?ch=1
Fullscreen=false;
Kanal=1;
function LoadImage(){
???
OK, nu geht's auf einmal!
Aber den Abstand zwischen Kamerabild und Fußzeile mit dem Copyright krieg ich nicht hin! Trotz der von Dir beschriebenen Änderungen tut sich da nix.
Beitrag zuletzt geändert: 19.3.2016 22:52:35 von turmfalken-nikolai -
Du hast an den richtigen Stellen die Änderung gemacht.
Kann es sein, dass du die Änderung noch nicht hochgeladen hast?
Ich bekomme immer noch die Version ohne eingebundene Kamera.js angezeigt.
Die Kamera.js hast du jedoch schon hochgeladen. -
Hab erst mal ne Seite Namens "Testseite" erstellt ( im Menü unter Falkencam für Mobilgeräte" ) damit im Falle eines Falles die Kameras soweit erreichbar bleiben
-
Ok, gefunden.
Das Problem liegt bei deinem Browser. Webseiten werden gespeichert, damit diese schneller wieder angezeigt werden können.
Damit du der Browser die neue Version anzeigt, musst du die Seite neu laden.
F5 oder der Aktualisierungsknopf. Sollte das nicht klappen, klicke in die Adressleiste und dann auf Enter.
Eines von beiden sollte eigentlich immer funktionieren.
Den kompletten Cache kannst du auch in den Einstellungen deines Browsers leeren. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
