GPSmap196: more work on the widget

Aircraft/Instruments-3d/GPSmap196/gpsmap196.nas

@@ -1,7 +1,8 @@
-print("Load Garmin GPSmap196 canvas");
+
 
 var GPSmap196 = {
-  new: func {
+  new: func(canvas_group) {
+    print("Load Garmin GPSmap196 canvas");
     m             = { parents : [GPSmap196] };
     m.node        = props.globals.initNode("/instrumentation/gps196");
     m.rockerUp    = m.node.initNode("inputs/rocker-up", 0, "BOOL");
@@ -17,32 +18,32 @@ var GPSmap196 = {
     m.buttonPower = m.node.initNode("inputs/button-power", 0, "BOOL");
     m.rockerRight = m.node.initNode("inputs/rocker-right", 0, "BOOL");
     m.buttonEnter = m.node.initNode("inputs/button-enter", 0, "BOOL");
+
+    m.text = canvas_group.createChild("text", "optional-id-for element")
+                  .setFontSize(14)
+                  .setColor(1,0,0)
+                  .setTranslation(10, 20)
+                  .setAlignment("left-center")
+                  .setText("This is a text element")
+                  .setFont("LiberationFonts/LiberationSans-Regular.ttf");
+
     return m;
   },
-  update: func {
+  update: func() {
 
+    settimer(func me.update(), 0);
   }
 };
 
-var myGPSmap196 = GPSmap196.new();
+setlistener("sim/signals/fdm-initialized", func() {
-
+  var gpsmap196Screen = canvas.new({
-var myCanvas = canvas.new({
+    "name": "GPSmap196-screen",
-  "name": "GPSmap196-screen",   # The name is optional but allow for easier identification
+    "size": [512, 512],
-  "size": [512, 512],   # Size of the underlying texture (should be a power of 2, required) [Resolution]
+    "view": [320, 240],
-  "view": [320, 240],   # Virtual resolution (Defines the coordinate system of the canvas [Dimensions]
+    "mipmapping": 1
-                        # which will be stretched the size of the texture, required)
+  });
-  "mipmapping": 1       # Enable mipmapping (optional)
+  gpsmap196Screen.addPlacement({"node": "gps196.screen"});
+  gpsmap196Canvas = GPSmap196.new(gpsmap196Screen.createGroup());
+  gpsmap196Canvas.update();
 });
 
-myCanvas.addPlacement({"node": "gps196.screen"});
-myCanvas.setColorBackground(0.6,0.64,0.545);
-
-var group = myCanvas.createGroup();
-var text = group.createChild("text", "optional-id-for element")
-                .setTranslation(10, 20)      # The origin is in the top left corner
-                .setAlignment("left-center") # All values from osgText are supported (see $FG_ROOT/Docs/README.osgtext)
-                .setFont("LiberationFonts/LiberationSans-Regular.ttf") # Fonts are loaded either from $AIRCRAFT_DIR/Fonts or $FG_DATA/Fonts
-                .setFontSize(14)             # Set fontsize and optionally character aspect ratio
-                .setColor(0,0,0)             # Text color
-                .setText("This is a text element");
-text.show();

Aircraft/Instruments-3d/GPSmap196/gpsmap196.xml

@@ -292,8 +292,69 @@
         <command>nasal</command>
         <script>
           <![CDATA[
-            var dlg = canvas.Window.new([320, 240], "dialog").set("resize", 1).set("title", "Garmin GPSmap196");
+            var dlg = canvas.Window.new([512, 256], "dialog").set("resize", 1).set("title", "Garmin GPSmap196");
-            dlg.setCanvas(canvas.get({name: "GPSmap196-screen"}));
+            var gps196Widget = dlg.createCanvas().setColorBackground(0,0,1,1);
+            var root = gps196Widget.createGroup();
+            canvas.parsesvg(root, "Aircraft/Instruments-3d/GPSmap196/widget/gpsmap196-widget.svg");
+
+            var display = root.getElementById("gps196.widget.screen");
+
+            var buttonIn = root.getElementById("gps196.widget.button.in");
+            buttonIn.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-in", 1); });
+            buttonIn.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-in", 0); });
+
+            var buttonOut = root.getElementById("gps196.widget.button.out");
+            buttonOut.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-out", 1); });
+            buttonOut.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-out", 0); });
+
+            var buttonDto = root.getElementById("gps196.widget.button.dto");
+            buttonDto.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-dto", 1); });
+            buttonDto.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-dto", 0); });
+
+            var buttonPage = root.getElementById("gps196.widget.button.page");
+            buttonPage.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-page", 1); });
+            buttonPage.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-page", 0); });
+
+            var buttonQuit = root.getElementById("gps196.widget.button.quit");
+            buttonQuit.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-quit", 1); });
+            buttonQuit.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-quit", 0); });
+
+            var buttonMenu = root.getElementById("gps196.widget.button.menu");
+            buttonMenu.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-menu", 1); });
+            buttonMenu.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-menu", 0); });
+
+            var buttonNrst = root.getElementById("gps196.widget.button.nrst");
+            buttonNrst.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-nrst", 1); });
+            buttonNrst.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-nrst", 0); });
+
+            var buttonEnter = root.getElementById("gps196.widget.button.enter");
+            buttonEnter.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-enter", 1); });
+            buttonEnter.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-enter", 0); });
+
+            var buttonPower = root.getElementById("gps196.widget.button.power");
+            buttonPower.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/button-power", 1); });
+            buttonPower.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/button-power", 0); });
+
+            var rockerUp = root.getElementById("gps196.widget.rocker.up");
+            rockerUp.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/rocker-up", 1); });
+            rockerUp.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/rocker-up", 0); });
+
+            var rockerDown = root.getElementById("gps196.widget.rocker.down");
+            rockerDown.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/rocker-down", 1); });
+            rockerDown.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/rocker-down", 0); });
+
+            var rockerLeft = root.getElementById("gps196.widget.rocker.left");
+            rockerLeft.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/rocker-left", 1); });
+            rockerLeft.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/rocker-left", 0); });
+
+            var rockerRight = root.getElementById("gps196.widget.rocker.right");
+            rockerRight.addEventListener("mousedown", func(e) { setprop("instrumentation/gps196/inputs/rocker-right", 1); });
+            rockerRight.addEventListener("mouseup", func(e) { setprop("instrumentation/gps196/inputs/rocker-right", 0); });
+
+            var gps196CanvasInstance = canvas.get({name: "GPSmap196-screen"});
+            display.createChild("image").setFile(gps196CanvasInstance);
+
+            #dlg.setCanvas(canvas.get({name: "GPSmap196-screen"}));
           ]]>
         </script>
       </binding>