Antworten
Aug 21, 2023 - 21:03
Das müstest Du ausprobieren ob der iPad dazu in der Lage ist das mit CSS zu skalieren, im NEO CREATOR selber ist scale mit CSS möglich. Warum der iPad die FullHD Auflösung nicht anzeigen kann, ist für mich von der Ferne auch nicht nachvollziehbar.
Wenn Du ein iframe im HTML-Grundgerüst nutzt, kannst Du ein div Tag als wrapper benutzen und dem iframe eine id zuweisen. Dann kannst Du mit scale und CSS den Inhalt des iframe skalieren.
Ein Beispiel bzw. eine Erläuterung zu scale mit CSS findest Du unter
How to Scale the Content of < iframe > Element
Das CCS ergänzt Du im Header des HTML-Grundgerüst zwischen <style> </style>
scale(2.0)
hättest Du dann die doppelte Größe im Vergleich zum Original. Du bekommst aber dann halt auch mögliche Artefakte durch die Skalierung angezeigt, wenn Du von einer geringen Auflösung hochskalierst. Im Bild aufgrund der geringeren Bildauflösung nicht vorhandene Informationen kann der Browser ja nicht erfinden. Der Wrapper (Div Tag) setzt Du dann auf die gewünschte Größe der Anzeige und schaust um welchen Faktor Du scale setzen musst, damit Du das Bild füllend hinbekommst.
Kannst ja Rückmeldung geben ob scale bei Deinem iPad den gewünschten Erfolg gebracht hat bzw. so funktioniert, wie von Dir gewünscht.
Wenn Du ein iframe im HTML-Grundgerüst nutzt, kannst Du ein div Tag als wrapper benutzen und dem iframe eine id zuweisen. Dann kannst Du mit scale und CSS den Inhalt des iframe skalieren.
Ein Beispiel bzw. eine Erläuterung zu scale mit CSS findest Du unter
How to Scale the Content of < iframe > Element
Das CCS ergänzt Du im Header des HTML-Grundgerüst zwischen <style> </style>
scale(2.0)
hättest Du dann die doppelte Größe im Vergleich zum Original. Du bekommst aber dann halt auch mögliche Artefakte durch die Skalierung angezeigt, wenn Du von einer geringen Auflösung hochskalierst. Im Bild aufgrund der geringeren Bildauflösung nicht vorhandene Informationen kann der Browser ja nicht erfinden. Der Wrapper (Div Tag) setzt Du dann auf die gewünschte Größe der Anzeige und schaust um welchen Faktor Du scale setzen musst, damit Du das Bild füllend hinbekommst.
Kannst ja Rückmeldung geben ob scale bei Deinem iPad den gewünschten Erfolg gebracht hat bzw. so funktioniert, wie von Dir gewünscht.
Sep 02, 2023 - 13:35
Hallo Fonzo,
vielen Dank für diesen super Tipp!
Ich bin Laie was iframes und CSS betrifft, konnte aber durch Probieren ein funktionierendes Ergebnis (getestet in AiO Creator und auf iPad, iPhone) erzielen!
Ich habe folgendes HTML Gerüst im Webseiten-Element auf meiner AIO-Remote Seite für das Live-Kamerabild der IN-9008FullHD festgelegt:
Im Bereich "Dokument-Beginn":
<style>
#wrap {
width: 1024px;
height: 768px;
padding: 0;
border: 0;
overflow: hidden;
}
#scaled-frame {
zoom: 1.6;
-moz-transform: scale(1.6);
-moz-transform-origin: 0 0;
-o-transform: scale(1.6);
-o-transform-origin: 0 0;
-webkit-transform: scale(1.6);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame {
zoom: 1;
}
}
</style>
Im Bereich "Hauptbereich":
<div id="wrap">
<iframe id= "scaled-frame" name=Cam width=100% height=100% frameborder=0 src="http://IP:80/mjpegstream.cgi?-chn=12&usr=xxxxx&pwd=
yyyyy"><p>Ihr Browser unterstützt keinen iframe!</p></iframe>
</div>
Den Bereich "Dokument-Ende" habe ich leer gelassen.
Schöne Grüße,
Martin
vielen Dank für diesen super Tipp!
Ich bin Laie was iframes und CSS betrifft, konnte aber durch Probieren ein funktionierendes Ergebnis (getestet in AiO Creator und auf iPad, iPhone) erzielen!
Ich habe folgendes HTML Gerüst im Webseiten-Element auf meiner AIO-Remote Seite für das Live-Kamerabild der IN-9008FullHD festgelegt:
Im Bereich "Dokument-Beginn":
<style>
#wrap {
width: 1024px;
height: 768px;
padding: 0;
border: 0;
overflow: hidden;
}
#scaled-frame {
zoom: 1.6;
-moz-transform: scale(1.6);
-moz-transform-origin: 0 0;
-o-transform: scale(1.6);
-o-transform-origin: 0 0;
-webkit-transform: scale(1.6);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame {
zoom: 1;
}
}
</style>
Im Bereich "Hauptbereich":
<div id="wrap">
<iframe id= "scaled-frame" name=Cam width=100% height=100% frameborder=0 src="http://IP:80/mjpegstream.cgi?-chn=12&usr=xxxxx&pwd=
yyyyy"><p>Ihr Browser unterstützt keinen iframe!</p></iframe>
</div>
Den Bereich "Dokument-Ende" habe ich leer gelassen.
Schöne Grüße,
Martin
Neuen Kommentar hinzufügen