Howto:Adding a canvas to a GUI dialog: Difference between revisions

Jump to navigation Jump to search
m
no edit summary
mNo edit summary
Line 9: Line 9:
<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
<canvas>
<canvas>
              <name>fgplot</name>
  <name>fgplot</name>
              <valign>fill</valign>
  <valign>fill</valign>
              <halign>fill</halign>
  <halign>fill</halign>
              <stretch>true</stretch>
  <stretch>true</stretch>
              <pref-width>600</pref-width>
  <pref-width>600</pref-width>
              <pref-height>400</pref-height>
  <pref-height>400</pref-height>
<nasal>       
  <nasal>       
<!--  
  <!--  
    this is the Canvas-specific Nasal section where you can run your own Nasal code  
      this is the Canvas-specific Nasal section where you can run your own Nasal code  
    to access the canvas region
      to access the canvas region
-->
  -->
<load><![CDATA[
    <load>
 
      <![CDATA[
# you can add your canvas-specific code here
     
var my_canvas = canvas.get( cmdarg() ); # this will get a handle to the parent canvas :
              # you can add your canvas-specific code here
              var my_canvas = canvas.get( cmdarg() ); # this will get a handle to the parent canvas :


print("Hello world from the embedded canvas section!\n");
              print("Hello world from the embedded canvas section!\n");


]]></load>
      ]]>
</nasal>
    </load>
  </nasal>
</canvas>
</canvas>
</syntaxhighlight>
</syntaxhighlight>
Line 59: Line 61:
     <empty><stretch>true</stretch></empty>
     <empty><stretch>true</stretch></empty>


<canvas>
    <canvas>
              <name>fgplot</name>
      <name>fgplot</name>
              <valign>fill</valign>
      <valign>fill</valign>
              <halign>fill</halign>
      <halign>fill</halign>
              <stretch>true</stretch>
      <stretch>true</stretch>
              <pref-width>600</pref-width>
      <pref-width>600</pref-width>
              <pref-height>400</pref-height>
      <pref-height>400</pref-height>
<nasal>       
      <nasal>       
<!--  
      <!--
    this is the Nasal/canvas section where you can run your own Nasal code  
          this is the Nasal/canvas section where you can run your own Nasal code  
    to access the canvas section  
          to access the canvas section  
-->
      -->
<load><![CDATA[
        <load>
# you can add your canvas-specific code here
          <![CDATA[
var my_canvas = canvas.get( cmdarg() ); # this will get a handle to the parent canvas:
                  # you can add your canvas-specific code here
 
                  var my_canvas = canvas.get( cmdarg() ); # this will get a handle to the parent canvas:
var root = my_canvas.createGroup();
var text = root.createChild("text")
.setText("Hello world from FGPlot v. 0.1 !")
.setTranslation(10, 30)
.setAlignment("left-top")
.setFontSize(20)
.setFont("LiberationFonts/LiberationSans-Regular.ttf")
.set("max-width", 380)
.setColor(1,0,0);


                  var root = my_canvas.createGroup();
                  var text = root.createChild("text")
                                  .setText("Hello world from FGPlot v. 0.1 !")
                                  .setTranslation(10, 30)
                                  .setAlignment("left-top")
                                  .setFontSize(20)
                                  .setFont("LiberationFonts/LiberationSans-Regular.ttf")
                                  .set("max-width", 380)
                                  .setColor(1,0,0);


var graph = root.createChild("group");


var x_axis = graph.createChild("path", "x-axis")
                  var graph = root.createChild("group");
.moveTo(10, 150)
.lineTo(380, 150)
.setColor(1,0,0)
.setStrokeLineWidth(3);


var y_axis = graph.createChild("path", "y-axis")
                  var x_axis = graph.createChild("path", "x-axis")
.moveTo(10, 30)
                                    .moveTo(10, 150)
.lineTo(10, 250)
                                    .lineTo(380, 150)
.setColor(1,0,0)
                                    .setColor(1,0,0)
.setStrokeLineWidth(3);
                                    .setStrokeLineWidth(3);


var plot = graph.createChild("path", "data")
                  var y_axis = graph.createChild("path", "y-axis")
.setStrokeLineWidth(2)
                                    .moveTo(10, 30)
.setColor(0,0,1)
                                    .lineTo(10, 250)
.moveTo(10,150); # origin
                                    .setColor(1,0,0)
                                    .setStrokeLineWidth(3);


var samples = [ # absolute coordinates
                  var plot = graph.createChild("path", "data")
[50, 150], [100,140], [200,110], [270, 55]
                                  .setStrokeLineWidth(2)
];
                                  .setColor(0,0,1)
                                  .moveTo(10,150); # origin


foreach(var set; samples) {
                  var samples = [ # absolute coordinates
plot.lineTo( set[0], set[1] );
                                  [50, 150], [100,140], [200,110], [270, 55]
}
                                ];


]]>
                  foreach(var set; samples) {
</load>
                                              plot.lineTo( set[0], set[1] );
</nasal>
                  }
</canvas>
          ]]>
        </load>
      </nasal>
    </canvas>


     <button>
     <button>
15

edits

Navigation menu