Add a simple example for the WebPanel
might serve as a skeleton or is it a "hello world" panel?
This commit is contained in:
Torsten Dreyer
parent
649ad4880c
commit
651005b4b0
4 changed files with 174 additions and 0 deletions
43
webgui/examples/FGPanel-Sample.html
Normal file
43
webgui/examples/FGPanel-Sample.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>FlightGear - FGPanel 2.0</title>
|
||||
<style type="text/css" media="screen">
|
||||
body,html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.big {
|
||||
width: 512px;
|
||||
height: 512px;
|
||||
}
|
||||
|
||||
.instrument {
|
||||
}
|
||||
|
||||
|
||||
#Position1 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" charset="utf-8"
|
||||
src="/gui/3rdparty/jquery/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/gui/lib/jquery.fganimate.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="/gui/lib/fgfs.js"></script>
|
||||
</head>
|
||||
<body data-fgpanel="true" data-fgpanel-props="fgpanel.json">
|
||||
<div id="Position1" class="big instrument" data-fgpanel-instrument="FGPanel-Sample.json"></div>
|
||||
</body>
|
||||
</html>
|
||||
26
webgui/examples/FGPanel-Sample.json
Normal file
26
webgui/examples/FGPanel-Sample.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"src": "FGPanel-Sample.svg",
|
||||
|
||||
"animations": [
|
||||
{
|
||||
"element": "#Ground",
|
||||
"type": "transform",
|
||||
"transforms": [{
|
||||
"type": "rotate",
|
||||
"a": {
|
||||
"property": "roll",
|
||||
"scale": -1
|
||||
},
|
||||
"x": 256,
|
||||
"y": 256
|
||||
},{
|
||||
"type": "translate",
|
||||
"x": 0,
|
||||
"y": {
|
||||
"property": "pitch",
|
||||
"scale": 10
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
94
webgui/examples/FGPanel-Sample.svg
Normal file
94
webgui/examples/FGPanel-Sample.svg
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
id="FGPanel-Sample"
|
||||
inkscape:version="0.48.3.1 r9886"
|
||||
sodipodi:docname="FGPanel-Sample.svg"
|
||||
viewBox="0 0 512 512"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<title
|
||||
id="title3984">FGPanel-Sample</title>
|
||||
<defs
|
||||
id="defs3747" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#4c4fc2"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="1"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.1015625"
|
||||
inkscape:cx="357.83995"
|
||||
inkscape:cy="256"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="FGPanel-Sample"
|
||||
showgrid="false"
|
||||
borderlayer="true"
|
||||
inkscape:window-width="1236"
|
||||
inkscape:window-height="782"
|
||||
inkscape:window-x="40"
|
||||
inkscape:window-y="-1"
|
||||
inkscape:window-maximized="1"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true" />
|
||||
<metadata
|
||||
id="metadata3750">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>FGPanel-Sample</dc:title>
|
||||
<dc:creator>
|
||||
<cc:Agent>
|
||||
<dc:title>Torsten Dreyer</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:creator>
|
||||
<dc:rights>
|
||||
<cc:Agent>
|
||||
<dc:title>Torsten Dreyer</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:rights>
|
||||
<dc:publisher>
|
||||
<cc:Agent>
|
||||
<dc:title>flightgear.org</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:publisher>
|
||||
<cc:license
|
||||
rdf:resource="http://www.gnu.org/licenses/gpl-2.0.html" />
|
||||
<dc:date>2014-09-22</dc:date>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="Ground"
|
||||
inkscape:label="Ground">
|
||||
<rect
|
||||
style="fill:#a74d0f;fill-opacity:1;stroke:none"
|
||||
id="rect3986"
|
||||
width="725"
|
||||
height="725"
|
||||
x="-106.5"
|
||||
y="256" />
|
||||
<rect
|
||||
style="fill:#fafafa;fill-opacity:1;stroke:none"
|
||||
id="rect3988"
|
||||
width="725"
|
||||
height="4"
|
||||
x="-106.5"
|
||||
y="254" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
11
webgui/examples/fgpanel.json
Normal file
11
webgui/examples/fgpanel.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"instrumentSelector": ".instrument",
|
||||
"instrumentDataKey": "fgpanel-instrument",
|
||||
"updateInterval": 50,
|
||||
|
||||
"propertyMirror": [
|
||||
[ "roll", "/instrumentation/attitude-indicator/indicated-roll-deg" ],
|
||||
[ "pitch", "/instrumentation/attitude-indicator/indicated-pitch-deg" ]
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue