Userbase

Op m'n Raspberry Pi (RPi) kan ik het kippenhok hier bedienen, dit werkt nu al meer dan een jaar.
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.

Nu heb ik gelezen dat je dit kan aanpassen met responsive design, maar ik heb niet echt een idee hoe ik dit moet doen.
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>

Dit is de code die ik heb op dit moment, verschrik niet:

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>

Zoals je ziet heb ik op dit moment ook een iframe met 640x480 resolutie, maar dit zou ik weg willen, want ik denk dat de video zich daardoor niet goed aanpast aan het scherm.
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 ?

Ik zou een template van http://html5up.net/ downloaden en aan jouw wensen aanpassen.
Een goede introductie van HTML5 vind je op http://www.w3schools.com/html/html5_intro.asp

[ Afbeelding

Post made via mobile device ]

raf1 schreef:Ik zou een template van http://html5up.net/ downloaden en aan jouw wensen aanpassen.

Zijn die templates niet wat overkill voor wat hij wilt?

Je kunt je JavaScript en CSS inderdaad in aparte bestanden stoppen, maar da's echt niet nodig voor zoiets kleins.
Je zou media queries kunnen gebruiken om het wat meer responsive te maken. Je kan dan je CSS aanpassen naargelang je device width bijvoorbeeld, maar da's in dit voorbeeld ook niet echt nodig. Ipv <center> en align="center" te gebruiken, is het misschien beter om het echt met CSS te doen.

Je gebruikt best een container div met daarin je content. Je video feed staat trouwens in je head...

Je kunt blijven de iframe gebruiken, maar om het "responsive" te maken moet je wel weer CSS gebruiken.

Code: Selecteer alles

#container {
    width: 100%;
    text-align: center;
}

#content {
    display: inline-block;
}

iframe {
    display: block;
    max-width: 100%;
}

Daarvoor moet je wel nog een div rond je content div zetten:

Code: Selecteer alles

<div id="container">
    <div id="content">
        <iframe
		img src="http://192.168.1.13/clean.php"
		width="640"
		height="480"
		frameborder="0"
		marginheight="0"
		marginwidth="0"
		scrolling="no">
	    </iframe>
    </div>
</div>

Zoiets zou normaal wel moeten werken. Vergeet dus wel niet die iframe uit je head te verwijderen.

Gebruik Bootstrap (van Twitter), heel eenvoudig.

http://getbootstrap.com/

Een template vind ik ook wat overdreven, want het moet zo simpel mogelijk blijven.

Die oplossing van dean3009 dat lijkt wel iets, maar ik begrijp het niet helemaal.

Ik heb nu wat jij hebt geschreven van code in de body gezet, maar als ik dan het test dan zijn mijn knoppen weg
en zie ik dit:

De code:

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">
</head>
        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>


<body>
        <div id="content" align="center"></div>
#container {
    width: 100%;
    text-align: center;
}

#content {
    display: inline-block;
}

iframe {
    display: block;
    max-width: 100%;
}

<div id="container">
    <div id="content">
        <iframe
      img src="http://192.168.1.13/clean.php"
      width="640"
      height="480"
      frameborder="0"
      marginheight="0"
      marginwidth="0"
      scrolling="no">
       </iframe>
    </div>
</div>


</body>
</html>

Als het kan mag van mij dat iframe weg, ik heb het vroeger zo gedaan omdat het streamingbeeld nog
groter was.

EDIT: Ben nog wat aan het prullen geweest en het begint te beteren.
Hier is mijn code:

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">
</head>
        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>


<body>
<style>
#container {
    width: 100%;
    text-align: center;
}

#content {
    display: inline-block;
}

iframe {
    display: block;
    max-width: 100%;
}
</style>

<div id="container">
    <div id="content">
        <iframe
      img src="http://192.168.1.13/clean.php"
      width="640"
      height="480"
      frameborder="0"
      marginheight="0"
      marginwidth="0"
      scrolling="no">
       </iframe>
    </div>
</div>

</body>
</html>

Nu staat het videobeeld in het midden bovenaan, maar de knoppen zie ik nog niet.

Sorry, had niet door dat je er niet zo goed mee weg kan. Heb het ook niet echt goed uitgelegd.
De knoppen komen niet meer omdat je je head sluit na je <script> tag. JavaScript en CSS code (tussen style) zouden ook in je head moeten komen te staan. Kopieer eens deze code en zie wat het doet.

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;
                }

                #container {
                    width: 100%;
                    text-align: center;
                }

                #content {
                    display: inline-block;
                }

                iframe {
                    display: block;
                    max-width: 100%;
                }
      </style>
</head>
<body>
<div id="container">
    <div id="content">
        <iframe
      img src="http://192.168.1.13/clean.php"
      width="640"
      height="480"
      frameborder="0"
      marginheight="0"
      marginwidth="0"
      scrolling="no">
       </iframe>
    </div>
</div>
</body>
</html>

Edit:
Wacht hoor, ik probeer de iframe nog mee te verkleinen met het scherm, maar het is precies moeilijker dan gedacht.

De enigste ervaring die ik met html heb is van 11 jaar terug met MS Frontpage

Nu begrijp ik waarom de knoppen niet zichtbaar waren, ik heb je code eens geprobeerd en dan krijg ik volgend resultaat:

Zoals je kan zien staan de knoppen niet in het midden, op de desktop maakt dat niet veel uit, maar ik zie net dat het op m'n smartphone
niet zo goed uitkomt. Zie screenshot:

Het videobeeld past zich nog niet aan, aan het scherm en de knoppen staan misschien beter in het midden ?

Ik vind geen manier om de content in de iframe te verkleinen wanneer de breedte van het scherm kleiner wordt dan 640 pixels. Blijkbaar is het zelf niet mogelijk (behalve als je met JavaScript op een of andere manier de content kan resizen)... Het volgende zou normaal gezien de video wel op 100% breedte moeten tonen op je gsm, maar de inhoud (dus de video) kan niet verkleind worden.

't Is ook wat lastig te testen zonder de stream zelf.

Ik werk ook nooit met iframes, maar in jouw geval moet je wel met een iframe werken geloof ik. Of je moet ipv met een iframe te werken, hetgeen dat clean.php doet zelf in je "overzichtpagina" doen. Zo kan je de stream rechtstreeks manipuleren ipv via een iframe.

Sorry dat ik niet meer heb kunnen helpen.

Code: Selecteer alles

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "width=device-width,initial-scale=1" />
        <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;
                }

                #container {
                    width: 100%;
                }

                #content {
                    margin: 0 auto;
                    max-width: 640px;

                    text-align: center;
                }

                #content button {
                    margin-left: auto;
                    margin-right: auto;
                }

                .video  {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 0;
                    padding-bottom: 75%;
                }

                .video iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: 0;
                }
      </style>
</head>
<body>
<div id="container">
    <div id="content">
        <div class="video">
            <iframe src="http://192.168.1.13/clean.php" scrolling="no"></iframe>
        </div>
    </div>
</div>
</body>
</html>

Ik zal het straks eens proberen als ik thuis ben.

Heb helaas geen tijd om het ten gronde te bekijken, maar m.i. moet het mogelijk zijn om via php de andere pagina te includen en op die manier zonder iframe te werken, desnoods zelf parsen. Het zal wat werk zijn, maar kom...

Heb net eens de code van dean3009 gekopieerd en het ziet er al een pak beter uit, maar op de smartphone is er een deel wat er af gekapt wordt.

Op de desktop is het dan wel goed, alles staat mooi onder elkaar in het midden.

@cloink: voor mij is dat zowat gelijk Chinees

Zoals je in onderstaande screenshot kan zien, kan je heel wat instellen, zo ook de resolutie,
maar op dit moment staat deze normaal ingesteld op 4:3 full FOV.

zodat het full Field of View (FOV) is.

Code: Selecteer alles

Std FOV - 1920 x 1080
16:9 wide FOV - 1296 x 730
4:3 full FOV - 1296 x 976

Ik kan misschien beter het IP adres geven en wat poorten open zetten zodat er wat getest kan worden

Userbase

html css javascript en responsive design

html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design

Re: html css javascript en responsive design