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