Board index FlightGear Support Interfacing

help getting panel in a browser to work

Connecting two computers, using generic protocol, connecting with Matlab?

help getting panel in a browser to work

Postby StompingAround » Sun Jun 10, 2018 3:17 pm

Hello
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>
StompingAround
 
Posts: 5
Joined: Sun May 20, 2018 2:12 pm

Re: help getting panel in a browser to work

Postby wkitty42 » Mon Jun 11, 2018 11:38 pm

i've pinged Torsten since he's the Phi developer/guru...
"You get more air close to the ground," said Angalo. "I read that in a book. You get lots of air low down, and not much when you go up."
"Why not?" said Gurder.
"Dunno. It's frightened of heights, I guess."
User avatar
wkitty42
 
Posts: 9146
Joined: Fri Feb 20, 2015 4:46 pm
Location: central NC, USA
Callsign: wk42
Version: git next
OS: Kubuntu 20.04

Re: help getting panel in a browser to work

Postby StompingAround » Fri Jun 15, 2018 9:56 am

I've found the built in Phi - The FlightGear User Interface web page, I'll try and work through the code on that and see if I can extract the key bits to help myself.
StompingAround
 
Posts: 5
Joined: Sun May 20, 2018 2:12 pm


Return to Interfacing

Who is online

Users browsing this forum: No registered users and 2 guests