Gisteren heb ik een nieuwe installatie gemaakt met een nieuwe videostreamer (op mijn tweede RPi) en nu vond ik het ook eens tijd dat
de html pagina onder handen werd genomen. Het is een simpele pagina dus ik denk toch niet dat het zo moeilijk kan zijn. :s
Het probleem dat ik nog altijd heb is dat het op de computer er goed uitziet, alles staat mooi in het midden,
maar als je het dan opent op een smartphone dan moet je altijd scrollen en de videostream staat niet mooi in het midden en is te groot.
Een aantal dingen heb ik al geprobeerd, maar dan zie ik ofwel niets van de videostream ofwel is het design nog slechter.
Zoals max-width: 90% heb ik geprobeerd, maar zonder succes, ik moet er wel bijvoegen dat ik eigenlijk niet veel ken van html,
ik sprokkel meestal wat dingen bij elkaar en als dat werkt is het goed voor me.
Als ik het goed begrijp dan zit er html, css en javascript in mijn bestand, maar wat ik heb gelezen is dat je dit kan opsplitsen naar
verschillende bestanden, dus al de css in één bestand en javascript in een ander.
Zoals vermeld op de Webiopi website:
Code: Selecteer alles
Write you Javascript code in a separated file
Put all your Javascript code inside a separated script.js file, next to your index.html. Then use <script> tag in index.html.
<html>
<head>
<title>My WebIOPi application</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
...
</body>
</html>
Take note of the heading slash used to load webiopi.js but not for script.js. Code: Selecteer alles
Write you CSS code in a separated file
Put all your CSS code inside a separated style.css file, next to your index.html. Then use <link> tag in index.html.
<html>
<head>
<title>My WebIOPi application</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
...
</body>
</html>
Code: Selecteer alles
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content = "height = device-height, width = 100%, user-scalable = no" />
<title>WebIOPi | Kippenhok</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
webiopi().setFunction(0,"out");
webiopi().setFunction(1,"out");
var content, button;
content = $("#content");
button = webiopi().createGPIOButton(0,"Deur");
content.append(button); // append button to content div
button = webiopi().createGPIOButton(1,"Licht");
content.append(button); // append button to content div
webiopi().refreshGPIO(true);
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 24pt;
font-weight: bold;
color: black;
}
input[type="range"] {
display: block;
width: 160px;
height: 45px;
}
.LOW {
background-color: White;
}
.HIGH {
background-color: Green;
}
</style>
<center style="margin-left: 10px; margin-right: 10px; margin-top: 20px;">
<iframe
img src="http://192.168.1.13/clean.php"
align="top"
width="640"
height="480"
frameborder="0"
marginheight="0"
marginwidth="0"
scrolling="no">
</iframe>
</center>
</head>
<body>
<div id="content" align="center"></div>
</body>
</html>
De img src="http://192.168.1.13/clean.php" zorgt voor de video
Mijn vraag is nu of er mensen zijn die me wat in de goed richting kunnen duwen, zodat de pagina op een desktop computer en op een smartphone goed weergegeven wordt. Moet ik 2 aparte bestanden aanmaken voor de css en javascript ?
Post made via mobile device ]
Je kunt blijven de iframe gebruiken, maar om het "responsive" te maken moet je wel weer CSS gebruiken.
