From 651005b4b0aa2bcef865f6f188758211f727560b Mon Sep 17 00:00:00 2001
From: Torsten Dreyer <Torsten@t3r.de>
Date: Mon, 22 Sep 2014 21:48:53 +0200
Subject: [PATCH] Add a simple example for the WebPanel

might serve as a skeleton or is it a "hello world" panel?
---
 webgui/examples/FGPanel-Sample.html | 43 +++++++++++++
 webgui/examples/FGPanel-Sample.json | 26 ++++++++
 webgui/examples/FGPanel-Sample.svg  | 94 +++++++++++++++++++++++++++++
 webgui/examples/fgpanel.json        | 11 ++++
 4 files changed, 174 insertions(+)
 create mode 100644 webgui/examples/FGPanel-Sample.html
 create mode 100644 webgui/examples/FGPanel-Sample.json
 create mode 100644 webgui/examples/FGPanel-Sample.svg
 create mode 100644 webgui/examples/fgpanel.json
diff --git a/webgui/examples/FGPanel-Sample.html b/webgui/examples/FGPanel-Sample.html
new file mode 100644
index 000000000..68776942e
--- /dev/null
+++ b/webgui/examples/FGPanel-Sample.html
@@ -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>
diff --git a/webgui/examples/FGPanel-Sample.json b/webgui/examples/FGPanel-Sample.json
new file mode 100644
index 000000000..4416a981b
--- /dev/null
+++ b/webgui/examples/FGPanel-Sample.json
@@ -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
+          }
+        }] 
+      }   
+    ]   
+}     
diff --git a/webgui/examples/FGPanel-Sample.svg b/webgui/examples/FGPanel-Sample.svg
new file mode 100644
index 000000000..32c8b1794
--- /dev/null
+++ b/webgui/examples/FGPanel-Sample.svg
@@ -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>
diff --git a/webgui/examples/fgpanel.json b/webgui/examples/fgpanel.json
new file mode 100644
index 000000000..a92202321
--- /dev/null
+++ b/webgui/examples/fgpanel.json
@@ -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" ]
+  ]
+}
+
