<?
$version = file_get_contents('raspi-version');
?><!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	  <meta name="theme-color" content="#4CAF50">
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      
	  <link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png">
	  <link rel="icon" type="image/png" href="fav/favicon-32x32.png" sizes="32x32">
	  <link rel="icon" type="image/png" href="fav/favicon-16x16.png" sizes="16x16">
	  <link rel="manifest" href="fav/manifest.json?v=2">
	  <link rel="mask-icon" href="fav/safari-pinned-tab.svg" color="#5bbad5">
	  <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
	  <title>RaspiStream <?=$version?></title>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script type="text/javascript" src="js/lib.js?v=<?=$version?>"></script>
      <link rel="stylesheet" href="css/my.css?v=<?=$version?>"/>
    </head>
 
    <body>
      <script>
      	$(document).ready(function(){
      		getGames();
      		setInterval( function(){ if($(".active").html() == "Status") cpuLoad(); ramLoad(); }, 1000);
      	});
	  </script>
	  
		<div class="navbar-fixed">
			<nav>
				<div class="nav-wrapper green">
					<a href="#" class="brand-logo">&nbsp;RaspiStream</a>
				</div>
				<div class="nav-wrapper">
					<ul class="tabs">
				        <li class="tab"><a href="#games" class="active">Apps</a></li>
				        <li class="tab"><a href="#tools">Tools</a></li>
				        <li class="tab"><a href="#config">Config</a></li>
				        <li class="tab"><a href="#status">Status</a></li>
				        <li class="tab"><a href="#credits">Credits</a></li>
				    </ul>
				</div>  
			</nav>
		</div>

		<div style="width: 100%; height: 50px;">&nbsp;</div>

		<div id="games" class="col s12"></div>

		<div id="tools" class="center">
			
			<br /><br />
			<a class="waves-effect waves-light btn-large green sameWidth" onclick="initpads()">Init pads</a>
			<br /><br />
			<a class="waves-effect waves-light btn-large green sameWidth" onclick="stopStream()">Stop running stream</a>
			<br /><br />
			<a class="waves-effect waves-light btn-large green sameWidth" onclick="pair()">Pair with server</a>
			<br /><br />
			<a class="waves-effect waves-light btn-large green sameWidth" onclick="unpair()">Unpair from server</a>
		</div>
		
		<div id="config">

			<div class="input-field col s12">
				<select data="resolution" id="settingsResolution">
				      <option value="1280×720">1280×720</option>
				      <option value="1920x1080">1920x1080</option>
				</select>
		        	<label>Streaming resolution</label>
			</div>

            <div class="input-field col s12">
                    <select data="fps" id="settingsFps">
                          <option value="30">30fps</option>
                          <option value="60">60fps</option>
                    </select>
                    <label>FPS</label>
            </div>

            <div class="input-field col s12">
                    <select data="forcehevc" id="settingsForcehevc">
                          <option value="false">Disabled</option>
                          <option value="true">Enabled</option>
                    </select>
                    <label>Use high efficiency video decoding (H.265)</label>
            </div>

            <div class="input-field col s12">
                    <select data="remote" id="settingsRemote">
                          <option value="false">Disabled</option>
                          <option value="true">Enabled</option>
                    </select>
                    <label>Enable remote optimizations</label>
            </div>

            <div class="input-field col s12">
                    <select data="localaudio" id="settingsLocalaudio">
                          <option value="false">Stream remotely</option>
                          <option value="true">Stream locally</option>
                    </select>
                    <label>Audio</label>
            </div>
            
		</div>

		<div id="status" class="center">
			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content">
							<span class="card-title">CPU load</span>
							<table id="cpuValues"></table>
						</div>
						<div class="card-content">
							<span class="card-title">RAM load</span>
							<table id="ramValue"></table>
						</div>
					</div>
				</div>
			</div>

			<div class="row center">
				<br /><br />
				<a class="waves-effect waves-light btn-large green" style="min-width: 47%" onclick="poweroff()">Shutdown</a>
			
				<a class="waves-effect waves-light btn-large green" style="min-width: 47%" onclick="reboot()">Reboot</a>
			</div>
		</div>
		
		<div id="credits">

			<div class="row">
				<div class="col s12 center">
					<br />
				 	<div class="chip">All technologies implemented in this project</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content">
							<span class="card-title">RaspiStream <?=$version?></span>
							<p>Idea, implementation, configuration and code automations by Daniele Callari.</p>
						</div>
						<div class="card-action">
							<a target="_blank" href="http://www.daxtech.net">Info</a>
						</div>
					</div>
				</div>
			</div> 

			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content ">
							<span class="card-title">Materialize</span>
							<p>A modern responsive front-end framework based on Material Design</p>
						</div>
						<div class="card-action">
							<a target="_blank" href="http://materializecss.com/">Info</a>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content ">
							<span class="card-title"><?php echo str_replace('(EMBEDDED;PI)', null, shell_exec("sudo moonlight | grep Embedded"))?></span>
							<p>An open source NVIDIA gamestream client</p>
							
						</div>
						<div class="card-action">
							<a target="_blank" href="http://moonlight-stream.com/">Info</a>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content">
							<span class="card-title">xboxdrv</span>
							<p>Opensource drivers for xBox USB pads</p>
						</div>
						<div class="card-action">
							<a target="_blank" href="https://github.com/xboxdrv/xboxdrv">Info</a>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content">
							<span class="card-title">jQuery</span>
							<p>Javascript framework</p>
						</div>
						<div class="card-action">
							<a target="_blank" href="https://www.raspberrypi.org/downloads/raspbian/">Info</a>
						</div>
					</div>
				</div>
			</div> 
			
			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content">
							<span class="card-title">Raspbian</span>
							<p>ARM Linux operative system</p>
						</div>
						<div class="card-action">
							<a target="_blank" href="https://www.raspberrypi.org/downloads/raspbian/">Info</a>
						</div>
					</div>
				</div>
			</div> 

		</div>
		
    </body>
  </html>
