278 lines
9.0 KiB
HTML
278 lines
9.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel=stylesheet href="/misc/bootstrap.min.css">
|
|
<style>
|
|
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
body {
|
|
margin-top: 60px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="TemplateTextHeader" style="position:fixed;top:0px;left:100px">
|
|
<center>
|
|
<p id="TemplateHeaderText" style="font-size:35px">
|
|
Herzlich Willkommen zur Fotobox!<br>
|
|
Drücke einfach auf "Aufnahme" und los geht es!
|
|
</p>
|
|
</center>
|
|
</div>
|
|
|
|
<!-- Template Bild Oben rechts / 1.png-->
|
|
<div id="TemplatePicOR" style="position:fixed;top:0px;right:0px">
|
|
<img src="/bilder/geburtstag/1.png">
|
|
</div>
|
|
|
|
<!-- Template Bilder rechts / 2.png-->
|
|
<div id="TemplatePicR1" style="position:fixed;top:300px;right:0px">
|
|
<img src="/bilder/geburtstag/2.png">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
|
|
<font size="12"><p id="TemplatePicR1Text">Aufnehmen</p></font>
|
|
</div>
|
|
</div>
|
|
<div id="TemplatePicR2" style="position:fixed;top:450px;right:0px">
|
|
<img src="/bilder/geburtstag/2.png">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
|
|
<font size="12"><p id="TemplatePicR2Text">Ansehen</p></font>
|
|
</div>
|
|
</div>
|
|
<div id="TemplatePicR3" style="position:fixed;top:600px;right:0px">
|
|
<img src="/bilder/geburtstag/2.png">
|
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
|
|
<font size="12"><p id="TemplatePicR3Text"> - </p></font>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Bild unten / 3.png-->
|
|
<div id="TemplatePicUN" style="position:fixed;bottom:0px;left:0px">
|
|
<img src="/bilder/geburtstag/3.png">
|
|
</div>
|
|
|
|
<!-- Bild Kamera / TestbildKamera.jpg-->
|
|
<div id="TemplateKameraBild" style="position:fixed;top:140px;left:100px">
|
|
<img id="TemplateKameraTestBild" src="/pic/TestbildKamera.jpg">
|
|
</div>
|
|
|
|
|
|
<script language=javascript src="/misc/jquery.min.js"></script>
|
|
<script language=javascript src="/misc/mqttws31.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var PageMode = "start";
|
|
var AnzeigeFoto = "";
|
|
$(document).ready(function() {
|
|
|
|
// Laden der Config
|
|
$.ajax({
|
|
method: "GET",
|
|
contentType:'application/json; charset=utf-8',
|
|
url: '/_api/config',
|
|
dataType: "json",
|
|
data: "",
|
|
success: function(content){
|
|
LoadTemplate(content.Template);
|
|
MakeMQTTConnection(content.MQTTServer, content.MQTTPort);
|
|
|
|
// Wenn auf dem Pi ausgeführt wird, soll das Testbild nicht angezeigt werden
|
|
if(content.OS!="windows") {
|
|
$("#TemplateKameraTestBild").remove();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function LoadTemplate(TemplateName) {
|
|
$("#TemplatePicOR").html('<img src="/bilder/'+TemplateName+'/1.png">');
|
|
$("#TemplatePicR1").html(LoadTemplateButtonRechts(TemplateName,"TemplatePicR1Text","2.png","Aufnehmen"));
|
|
$("#TemplatePicR2").html(LoadTemplateButtonRechts(TemplateName,"TemplatePicR2Text","2.png","Ansehen"));
|
|
$("#TemplatePicR3").html(LoadTemplateButtonRechts(TemplateName,"TemplatePicR3Text","2.png","- - - - - "));
|
|
$("#TemplatePicUN").html('<img src="/bilder/'+TemplateName+'/3.png">');
|
|
}
|
|
|
|
function LoadTemplateButtonRechts(TemplateName, Pid, Bild, Text) {
|
|
var html_ButtonRechts = '<img src="/bilder/'+TemplateName+'/'+Bild+'">'+
|
|
'<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">'+
|
|
'<font size="12"><p id="'+Pid+'">'+Text+'</p></font>'+
|
|
'</div>';
|
|
return html_ButtonRechts;
|
|
}
|
|
|
|
function MakeMQTTConnection(MQTTServer, MQTTPort) {
|
|
var MQTTClient = new Messaging.Client(MQTTServer, MQTTPort, "myclientid_" + parseInt(Math.random() * 100, 10));
|
|
|
|
var options = {
|
|
timeout: 3,
|
|
onSuccess: function () {
|
|
console.log("MQTT Client Connected!");
|
|
MQTTClient.subscribe('/pin'+'/#', {qos: 2});
|
|
},
|
|
onFailure: function (message) {
|
|
console.log("Connection failed: " + message.errorMessage);
|
|
}
|
|
};
|
|
MQTTClient.connect(options);
|
|
|
|
MQTTClient.onConnectionLost = function (responseObject) {
|
|
console.log("connection lost: " + responseObject.errorMessage);
|
|
};
|
|
|
|
MQTTClient.onMessageArrived = function (message) {
|
|
console.log('Payload: Topic: ' + message.destinationName + ' | ' + message.payloadString);
|
|
if(message.destinationName=="/pin/17") {
|
|
if(message.payloadString=="1") {
|
|
if(PageMode=="vorschau") {
|
|
Fotospeichern();
|
|
} else if(PageMode=="FotosAnschauen") {
|
|
FotosAnschauen("vor");
|
|
} else {
|
|
Aufnahme();
|
|
}
|
|
}
|
|
} else if(message.destinationName=="/pin/21") {
|
|
if(message.payloadString=="1") {
|
|
if(PageMode=="start") {
|
|
FotosAnschauen("start");
|
|
} else if(PageMode=="vorschau") {
|
|
Abbrechen();
|
|
} else if(PageMode=="FotosAnschauen") {
|
|
FotosAnschauen("zurueck");
|
|
}else {
|
|
//Aufnahme();
|
|
}
|
|
}
|
|
} else if(message.destinationName=="/pin/22") {
|
|
if(message.payloadString=="1") {
|
|
if(PageMode=="FotosAnschauen") {
|
|
Abbrechen();
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
async function Aufnahme() {
|
|
// x sec warten vor Aufnahme
|
|
for (i = 5; i >0 ; i--) {
|
|
console.log(i);
|
|
$("#TemplateHeaderText").html('Foto wird in '+i+' sec aufgenommen.<br>Bitte lächeln!');
|
|
await new Promise(r => setTimeout(r, 1000));
|
|
}
|
|
|
|
// Aufnahme starten
|
|
$.ajax({
|
|
method: "GET",
|
|
contentType:'application/json; charset=utf-8',
|
|
url: '/_api/aufnahme',
|
|
dataType: "json",
|
|
data: "",
|
|
success: function(content){
|
|
$("#TemplateKameraBild").html('<img width="800px" src="/pic/'+content+'?'+parseInt(Math.random() * 100, 10)+'">');
|
|
$("#TemplatePicR1Text").html('Speichern');
|
|
$("#TemplatePicR2Text").html('Abbrechen');
|
|
//$("#TemplatePicR3Text").html('<img src="/pic/'+content+'">');
|
|
PageMode = "vorschau";
|
|
}
|
|
});
|
|
}
|
|
|
|
function Fotospeichern() {
|
|
$.ajax({
|
|
method: "POST",
|
|
contentType:'application/json; charset=utf-8',
|
|
url: '/_api/aufnahme',
|
|
dataType: "json",
|
|
data: "",
|
|
success: function(content){
|
|
SetTemplateStart();
|
|
}
|
|
});
|
|
}
|
|
|
|
function FotosAnschauen(voroderzurueck) {
|
|
console.log("FotosAnschauen");
|
|
PageMode="FotosAnschauen";
|
|
|
|
$("#TemplatePicR1Text").html('Vor');
|
|
$("#TemplatePicR2Text").html('Zurück');
|
|
$("#TemplatePicR3Text").html('Abbrechen');
|
|
|
|
$.ajax({
|
|
method: "GET",
|
|
contentType:'application/json; charset=utf-8',
|
|
url: '/_api/fotoliste',
|
|
dataType: "json",
|
|
data: "",
|
|
success: function(content){
|
|
|
|
console.log("voroderzurueck: "+voroderzurueck);
|
|
|
|
// Wenn der Menüpunkt "Anschauen" ausgewöhlt wird, muss as letzte Bild angezeigt werden
|
|
if(voroderzurueck=="start") {
|
|
var Foto = content[content.length-1];
|
|
AnzeigeFoto=Foto;
|
|
$("#TemplateKameraBild").html('<img id="TemplateKameraTestBild" width="800px" height="600px" src="/'+Foto+'">');
|
|
}
|
|
|
|
if(voroderzurueck=="vor") {
|
|
var Foto = content[content.indexOf(AnzeigeFoto)+1]
|
|
if(Foto!==undefined) {
|
|
AnzeigeFoto=Foto;
|
|
$("#TemplateKameraBild").html('<img id="TemplateKameraTestBild" width="800px" height="600px" src="/'+Foto+'">');
|
|
}
|
|
}
|
|
|
|
if(voroderzurueck=="zurueck") {
|
|
var Foto = content[content.indexOf(AnzeigeFoto)-1]
|
|
if(Foto!==undefined) {
|
|
AnzeigeFoto=Foto;
|
|
$("#TemplateKameraBild").html('<img id="TemplateKameraTestBild" width="800px" height="600px" src="/'+Foto+'">');
|
|
}
|
|
}
|
|
|
|
console.log(AnzeigeFoto);
|
|
console.log("PageMode: "+PageMode);
|
|
}
|
|
});
|
|
}
|
|
|
|
function Abbrechen() {
|
|
SetTemplateStart();
|
|
}
|
|
|
|
//----------------------------------------------------------------------
|
|
// Hilsfunktionen
|
|
function sleep(milliseconds) {
|
|
return new Promise(resolve => setTimeout(resolve, milliseconds));
|
|
}
|
|
|
|
function SetTemplateStart() {
|
|
$("#TemplateHeaderText").html('Herzlich Willkommen zur Fotobox!<br>Drücke einfach auf "Aufnahme" und los geht es!');
|
|
$("#TemplateKameraBild").html('<img src="/pic/TestbildKamera.jpg">');
|
|
$("#TemplatePicR1Text").html('Aufnehmen');
|
|
$("#TemplatePicR2Text").html('Ansehen');
|
|
$("#TemplateKameraTestBild").remove();
|
|
PageMode = "start";
|
|
|
|
$.ajax({
|
|
method: "GET",
|
|
contentType:'application/json; charset=utf-8',
|
|
url: '/_api/kamerabild',
|
|
dataType: "json",
|
|
data: "",
|
|
success: function(content){
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |