I've been struggling to get an instrument panel in a browser window functioning using the Phi interface.
Thus far I've got the html file to load but all I get is black bar across the top of the web page. It seems to be row one of the bootstrap grid layout system, but the rows have zero height, and no instrument svg files seem to draw. I have spent many hours fiddling around trying to understand the HTML/JS/CSS combo, and understand the concepts, just really struggling to get it working. My html code is below, as a starter.
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FlightGear - Cessna 172 Instrument Panel</title>
<style type="text/css" media="screen">
body,html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000000;
border: 0;
margin: 0;
padding: 0;
}
.instrument {
border: 1px solid #131313;
padding: 8px;
background-color: #111111;
}
</style>
<!--<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<!--script src="bootstrap/bootstrap.min.js"></script>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" file="///usr/share/games/flightgear/Phi/lib/jquery.fganimate.js"></script>
<script type="text/javascript" charset="utf-8" file="///usr/share/games/flightgear/Phi/lib/fgfs.js"></script>
</head>
<body data-fgpanel="true" data-fgpanel-props="c172p-webpanel-properties.json">
<div class="row">
<div id="ASI" class="instrument col-md-2" data-fgpanel-instrument="ASI.json"></div>
<div id="AI" class="instrument col-md-2" data-fgpanel-instrument="AI.json"></div>
<div id="ALT" class="instrument col-md-2" data-fgpanel-instrument="ALT.json"></div>
<div id="VOR1" class="instrument col-md-2" data-fgpanel-instrument="VOR1.json"></div>
<div class="instrument col-md-2" data-fgpanel-instrument="Empty.json"></div>
<div class="instrument col-md-2" data-fgpanel-instrument="Empty.json"></div>
</div>
</body>
</html>