Application.ewu.bak

$version 11.00

$rect <80,410,250,450>
$output false
class SlidingTempo : Core::Group
{
  $rect <500,10,700,50>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image background
  {
    preset Bounds = <0,0,480,272>;
    preset Bitmap = Res::MetronomeBackground;
    preset Opacity = 255;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Bounds = <174,16,291,61>;
    preset String = "TEMPO";
    preset Font = Res::FontBodoniLarge;
    preset Color = #2864FFFF;
  }

  $rect <20,20,160,60>
  object Views::Line Line
  {
    preset Point2 = <360,65>;
    preset Point1 = <122,65>;
    preset Color = #04208BFF;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay ValueDisplay
  {
    preset Bounds = <195,120,285,170>;
    preset Outlet = ^Application::Device.Tempo;
    preset Unit = "";
    preset Precision = 0;
    preset CurrentBias = 0.0;
    preset Appearance = WidgetSet::ValueDisplay_Large;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob RotaryKnob
  {
    preset Bounds = <154,65,314,225>;
    preset Outlet = ^Application::Device.Tempo;
    preset StepSize = 5;
    preset MaxValue = 150;
    preset MinValue = 30;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::HorizontalSlider HorizontalSlider
  {
    preset Bounds = <140,215,340,265>;
    preset Outlet = ^Application::Device.Tempo;
    preset StepSize = 5;
    preset MaxValue = 150;
    preset MinValue = 30;
    preset Appearance = Application::MyHorizontalSliderConfig;
  }
}

$rect <80,370,250,410>
$output false
class SlidingBeat : Core::Group
{
  $rect <510,0,710,40>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image background
  {
    preset Bounds = <0,0,480,272>;
    preset Bitmap = Res::MetronomeBackground;
    preset Opacity = 255;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Bounds = <190,24,290,54>;
    preset String = "BEAT";
    preset Font = Res::FontBodoniLarge;
    preset Color = #2864FFFF;
  }

  $rect <20,20,160,60>
  object Views::Line Line
  {
    preset Point2 = <360,65>;
    preset Point1 = <122,65>;
    preset Color = #04208BFF;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay ValueDisplay
  {
    preset Layout = Core::Layout[AlignToLeft, AlignToTop];
    preset Bounds = <230,126,290,158>;
    preset Outlet = ^Application::Device.Beat;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = WidgetSet::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob RotaryKnob
  {
    preset Bounds = <190,63,350,223>;
    preset Outlet = ^Application::Device.Beat;
    preset MaxValue = 8;
    preset MinValue = 2;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::VerticalSlider VerticalSlider
  {
    preset Bounds = <97,74,147,243>;
    preset Outlet = ^Application::Device.Beat;
    preset MaxValue = 8;
    preset MinValue = 2;
    preset Appearance = Application::MyVerticalSliderConfig;
  }
}

$rect <80,330,250,370>
$output false
class SlidingMain : Core::Group
{
  $rect <500,10,700,50>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image background
  {
    preset Bounds = <0,0,480,272>;
    preset Bitmap = Res::MetronomeBackground;
    preset Opacity = 250;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton StartStop
  {
    preset Bounds = <205,86,275,156>;
    preset Visible = true;
    preset OnActivate = onStartPress;
    preset Icon = Res::PlayIcon;
    preset Label = "Caption";
    preset Appearance = Application::PushButtonConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay TempoValue
  {
    preset Bounds = <11,97,128,129>;
    preset Outlet = ^Application::Device.Tempo;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = WidgetSet::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay BeatValue
  {
    preset Bounds = <291,97,413,129>;
    preset Outlet = ^Application::Device.Beat;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = WidgetSet::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob TempoRotaryKnob
  {
    preset Bounds = <7,25,167,185>;
    preset Appearance = Application::RotaryMaxConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob BeatRotaryKnob
  {
    preset Bounds = <311,24,471,184>;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <30,370,230,410>
  slot onStartPress
  {
    trace "Metronome Start";

    Application::Device.Running = ! Application::Device.Running;

    StartStop.Icon = Application::Device.Running ? Res::StopIcon : Res::PlayIcon;



  }

  $rect <20,20,160,60>
  object Views::Text BeatTxt
  {
    preset Bounds = <36,207,154,237>;
    preset ColorBL = #3A61D4FF;
    preset String = "TEMPO";
    preset Font = Res::FontBodoniLarge;
    preset Color = #3A61D4FF;
    preset Visible = true;
  }

  $rect <20,20,160,60>
  object Views::Text TempoTxt
  {
    preset Bounds = <342,207,442,237>;
    preset String = "BEAT";
    preset Font = Res::FontBodoniLarge;
    preset Color = #3A61D4FF;
    preset Visible = true;
  }

  // Touch screen events
  note group Note
  {
    attr Bounds = <10,310,260,510>;
  }
}

// GUI components
note group Note
{
  attr Bounds = <0,0,500,490>;
}

$rect <530,340,760,380>
$output false
class DeviceClass : Templates::DeviceClass
{
  $rect <0,40,200,80>
  inherited method Done()
  {
    // The following section is intended to perform de-initialization-related operations
    // in the underlying device or middleware. Consequently, the section is taken in
    // account only when generating code (not during prototyping).
    $if !$prototyper
      var object thisObject = this;

      /*
         TO DO:

         The following native statement is intended to enclose code to communicate with
         your device API. The variable 'thisObject' contains a pointer to the actually
         de-initialized Application::DeviceClass object. Use the 'thisObject' pointer to
         e.g. de-register the object from the middleware if you have registered it
         beforehand.
         
      */

      native ( thisObject )
      {
        /*
           TO DO:

           Depending on your application case you call functions of the underlying
           middleware (or access the device directly) in order to perform the necessary
           de-initialization steps. For example, you invoke some 'C' function:

             YourDevice_DeInitialize();

           IMPORTANT:
           ----------

           The variable 'thisObject' represents the actually de-initialized instance of the
           Application::DeviceClass. If you have stored this object at the initialization
           time (in the 'Init' method) in some global C variable or registered it by the
           middleware, it is important to perform now the opposite operation. Set the
           global variable to NULL or de-register 'thisObject' object from the middleware.
           
        */
      }
    $endif
  }

  $rect <0,0,200,40>
  inherited method Init()
  {
    // The following section is intended to perform initialization-related operations
    // in the underlying device or middleware. Consequently, the section is taken in
    // account only when generating code (not during prototyping).
    $if !$prototyper
      var object thisObject = this;

      /*
         TO DO:

         The following native statement is intended to enclose code to communicate with
         your device API. The variable 'thisObject' contains a pointer to the actually
         initialized Application::DeviceClass object. Use the 'thisObject' pointer to
         e.g. register the object by the middleware as receiver of events, etc.
         
      */

      native ( thisObject )
      {
        /*
           TO DO:

           Depending on your application case you call functions of the underlying
           middleware (or access the device directly) in order to perform the necessary
           initialization steps. For example, you invoke some 'C' function:

             YourDevice_Initialize();

           The variable 'thisObject' represents the actually initialized instance of the
           Application::DeviceClass. You can store this variable e.g. in the middleware
           and use it whenever the middleware needs to notify the GUI application about
           some state alternation or events. In this manner, the middleware will be able
           to invoke methods of the interface device object.

           For example, you can store 'thisObject' in some global C variable:

             // Declaration of the global C variable
             XObject theDeviceObject;

             // Store the instance in the global variable
             theDeviceObject = thisObject;

           Later use the global variable e.g. to provide the GUI application with events:

             ApplicationDeviceClass__TriggerSomeEvent( theDeviceObject );

           IMPORTANT:
           ----------

           If you store 'thisObject' for later use, don't forget to implement the opposite
           operation in the method 'Done'. Concrete, 'Done' should set the global variable
           again to the value NULL.

        */
      }
    $endif
  }

  $rect <200,90,400,130>
  property bool Running;

  $rect <600,90,800,130>
  onget Running
  {
    // Per default return the value stored already in the property.
    return pure Running;

    /*

      TO DO:

      If the property should return the value stored in the underlying device
      or in the middleware, remove the above 'return' statement and instead do
      following:

      Declare a local variable to receive the value from the underlying device.
      The type of the variable has to correspond to the data type of the property.
      For example in case of an 'int32' property:
      
        var int32 result;

      Implement a native statement to access the value and to store it in the
      variable 'result'. Then return the value. For example:

        $if !$prototyper
          native ( result )
          {
            result = YourDevice_GetSomeValue();
          }
        $endif

        return result;

    */
  }

  $rect <400,90,600,130>
  onset Running
  {
    // The property doesn't change -> nothing to do.
    if ( pure Running == value )
      return;

    // Remember the new value in the internal memory of the property.
    pure Running = value;

    // For target code generation you will use your specific device API 
    // to change the affected value.
    $if !$prototyper
      native ( value )
      {
        /*
           TO DO:

           You can call a function of your own device API or you simply
           modify a variable existing in your middleware to reflect the
           new value:

           YourDevice_SetSomeValue( value );

           or

           YourDevice_SomeVariable = value;
        */
      }
    $endif

    // Notify all associated property observers.
    notifyobservers ^Running;
  }

  // This method is intended to be called by the device to notify the GUI application \
  // about an alternation of its setting or state value.
  $rect <0,90,200,130>
  $output true
  method void UpdateRunning( arg bool aNewValue )
  {
    // Only if the reported value does differ from the one stored currently in the property.
    if ( aNewValue != pure Running )
    {
      // Remember the new value in the internal memory of the property.
      pure Running = aNewValue;

      // Notify all associated property observers.
      notifyobservers ^Running;
    }
  }

  $rect <200,130,400,170>
  property int32 Beat;

  $rect <600,130,800,170>
  onget Beat
  {
    // Per default return the value stored already in the property.
    return pure Beat;

    /*

      TO DO:

      If the property should return the value stored in the underlying device
      or in the middleware, remove the above 'return' statement and instead do
      following:

      Declare a local variable to receive the value from the underlying device.
      The type of the variable has to correspond to the data type of the property.
      For example in case of an 'int32' property:
      
        var int32 result;

      Implement a native statement to access the value and to store it in the
      variable 'result'. Then return the value. For example:

        $if !$prototyper
          native ( result )
          {
            result = YourDevice_GetSomeValue();
          }
        $endif

        return result;

    */
  }

  $rect <400,130,600,170>
  onset Beat
  {
    // The property doesn't change -> nothing to do.
    if ( pure Beat == value )
      return;

    // Remember the new value in the internal memory of the property.
    pure Beat = value;

    // For target code generation you will use your specific device API 
    // to change the affected value.
    $if !$prototyper
      native ( value )
      {
        /*
           TO DO:

           You can call a function of your own device API or you simply
           modify a variable existing in your middleware to reflect the
           new value:

           YourDevice_SetSomeValue( value );

           or

           YourDevice_SomeVariable = value;
        */
      }
    $endif

    // Notify all associated property observers.
    notifyobservers ^Beat;
  }

  // This method is intended to be called by the device to notify the GUI application \
  // about an alternation of its setting or state value.
  $rect <0,130,200,170>
  $output true
  method void UpdateBeat( arg int32 aNewValue )
  {
    // Only if the reported value does differ from the one stored currently in the property.
    if ( aNewValue != pure Beat )
    {
      // Remember the new value in the internal memory of the property.
      pure Beat = aNewValue;

      // Notify all associated property observers.
      notifyobservers ^Beat;
    }
  }

  $rect <200,170,400,210>
  property int32 Tempo;

  $rect <600,170,800,210>
  onget Tempo
  {
    // Per default return the value stored already in the property.
    return pure Tempo;

    /*

      TO DO:

      If the property should return the value stored in the underlying device
      or in the middleware, remove the above 'return' statement and instead do
      following:

      Declare a local variable to receive the value from the underlying device.
      The type of the variable has to correspond to the data type of the property.
      For example in case of an 'int32' property:
      
        var int32 result;

      Implement a native statement to access the value and to store it in the
      variable 'result'. Then return the value. For example:

        $if !$prototyper
          native ( result )
          {
            result = YourDevice_GetSomeValue();
          }
        $endif

        return result;

    */
  }

  $rect <400,170,600,210>
  onset Tempo
  {
    // The property doesn't change -> nothing to do.
    if ( pure Tempo == value )
      return;

    // Remember the new value in the internal memory of the property.
    pure Tempo = value;

    // For target code generation you will use your specific device API 
    // to change the affected value.
    $if !$prototyper
      native ( value )
      {
        /*
           TO DO:

           You can call a function of your own device API or you simply
           modify a variable existing in your middleware to reflect the
           new value:

           YourDevice_SetSomeValue( value );

           or

           YourDevice_SomeVariable = value;
        */
      }
    $endif

    // Notify all associated property observers.
    notifyobservers ^Tempo;
  }

  // This method is intended to be called by the device to notify the GUI application \
  // about an alternation of its setting or state value.
  $rect <0,170,200,210>
  $output true
  method void UpdateTempo( arg int32 aNewValue )
  {
    // Only if the reported value does differ from the one stored currently in the property.
    if ( aNewValue != pure Tempo )
    {
      // Remember the new value in the internal memory of the property.
      pure Tempo = aNewValue;

      // Notify all associated property observers.
      notifyobservers ^Tempo;
    }
  }

  $rect <200,220,400,260>
  property int32 GUIStyle;

  $rect <600,220,800,260>
  onget GUIStyle
  {
    // Per default return the value stored already in the property.
    return pure GUIStyle;

    /*

      TO DO:

      If the property should return the value stored in the underlying device
      or in the middleware, remove the above 'return' statement and instead do
      following:

      Declare a local variable to receive the value from the underlying device.
      The type of the variable has to correspond to the data type of the property.
      For example in case of an 'int32' property:
      
        var int32 result;

      Implement a native statement to access the value and to store it in the
      variable 'result'. Then return the value. For example:

        $if !$prototyper
          native ( result )
          {
            result = YourDevice_GetSomeValue();
          }
        $endif

        return result;

    */
  }

  $rect <400,220,600,260>
  onset GUIStyle
  {
    // The property doesn't change -> nothing to do.
    if ( pure GUIStyle == value )
      return;

    // Remember the new value in the internal memory of the property.
    pure GUIStyle = value;

    // For target code generation you will use your specific device API 
    // to change the affected value.
    $if !$prototyper
      native ( value )
      {
        /*
           TO DO:

           You can call a function of your own device API or you simply
           modify a variable existing in your middleware to reflect the
           new value:

           YourDevice_SetSomeValue( value );

           or

           YourDevice_SomeVariable = value;
        */
      }
    $endif

    // Notify all associated property observers.
    notifyobservers ^GUIStyle;
  }
}

$rect <530,440,760,480>
autoobject Application::DeviceClass Device;

$rect <530,390,760,430>
$variant $prototyper
vclass DeviceClassForPrototype : Application::DeviceClass
{
  $rect <20,110,220,150>
  inherited onset Running
  {
    super(value);

    if(value)
      trace "Started." ;
    else
      trace "Stop." ;
  }

  $rect <10,10,160,50>
  inherited onset Beat
  {
    super(value);
    trace "Beat set to " , value;
  }

  $rect <0,60,160,100>
  inherited onset Tempo
  {
    super(value);
    trace "Tempo set ", value;
  }
}

// Device
note group Note2
{
  attr Bounds = <510,300,800,490>;
}

$rect <830,140,1090,180>
$output false
autoobject WidgetSet::HorizontalSliderConfig MyHorizontalSliderConfig
{
  preset ThumbTintActive = #4A4EFFFF;
  preset ThumbTintDefault = #141547FF;
  preset ThumbActive = Res::ThumbIcon;
  preset ThumbDefault = Res::ThumbIcon;
  preset TrackRightTintActive = #B8B5E7E1;
  preset TrackRightTintDefault = #B8B5E7FF;
  preset TrackRightActive = Res::TrackHorizontal;
  preset TrackRightDefault = Res::TrackHorizontal;
  preset TrackLeftTintActive = #4A4EFFFF;
  preset TrackLeftTintDefault = #141547FF;
  preset TrackLeftActive = Res::TrackHorizontal;
  preset TrackLeftDefault = Res::TrackHorizontal;
}

$rect <830,180,1090,220>
$output false
autoobject WidgetSet::VerticalSliderConfig MyVerticalSliderConfig
{
  preset ThumbTintActive = #4A4EFFFF;
  preset ThumbTintDefault = #141547FF;
  preset ThumbActive = Res::ThumbIcon;
  preset ThumbDefault = Res::ThumbIcon;
  preset TrackAboveTintActive = #BCBDFFB3;
  preset TrackAboveTintDefault = #BCBDFFFF;
  preset TrackAboveActive = Res::TrackVertical;
  preset TrackAboveDefault = Res::TrackVertical;
  preset TrackBelowTintActive = #4A4EFFFF;
  preset TrackBelowTintDefault = #141547FF;
  preset TrackBelowActive = Res::TrackVertical;
  preset TrackBelowDefault = Res::TrackVertical;
}

$rect <830,50,1090,90>
$output false
autoobject WidgetSet::RotaryKnobConfig RotaryMaxConfig
{
  preset TrackRightColorActive = #141547FF;
  preset TrackRightColorDefault = #141547FF;
  preset CoverTintActive = #2B2D9AFF;
  preset CoverTintFocused = #141547FF;
  preset CoverTintDisabled = #141547FF;
  preset CoverTintDefault = #141547FF;
  preset ThumbMaxAngle = 2;
  preset ThumbMinAngle = 270;
  preset ThumbPivot = <80,80>;
  preset ThumbTintActive = #3B3DD2FF;
  preset ThumbTintDefault = #3B3DD2FF;
  preset ThumbActive = Res::RotaryThumbMax;
  preset ThumbFocused = Res::RotaryThumbMax;
  preset ThumbDefault = Res::RotaryThumbMax;
  preset ScaleTintActive = #2B2D9AFF;
  preset ScaleTintFocused = #4D8DFFFF;
  preset ScaleTintDisabled = #141547FF;
  preset ScaleTintDefault = #141547FF;
  preset ScaleActive = Res::RotaryBackground;
  preset ScaleFocused = Res::RotaryBackground;
  preset ScaleDisabled = Res::RotaryBackground;
  preset ScaleDefault = Res::RotaryBackground;
  preset WidgetMaxSize = <160,160>;
  preset WidgetMinSize = <160,160>;
}

$rect <830,90,1090,130>
$output false
autoobject WidgetSet::RotaryKnobConfig RotaryMinConfig
{
  preset TrackRightColorActive = #8C81FFFF;
  preset TrackRightColorFocused = #8C81FFFF;
  preset TrackRightColorDisabled = #8C81FFFF;
  preset TrackRightColorDefault = #8C81FFFF;
  preset TrackLeftColorActive = #2B2D9AFF;
  preset TrackLeftColorFocused = #2B2D9AFF;
  preset TrackLeftColorDisabled = #2B2D9AFF;
  preset TrackLeftColorDefault = #2B2D9AFF;
  preset CoverTintActive = #2B2D9AFF;
  preset CoverTintFocused = #141547FF;
  preset CoverTintDisabled = #141547FF;
  preset CoverTintDefault = #141547FF;
  preset ThumbMaxAngle = 90;
  preset ThumbMinAngle = 358;
  preset ThumbPivot = <0,80>;
  preset ThumbTintActive = #2B2D9AFF;
  preset ThumbTintFocused = #2B2D9AFF;
  preset ThumbTintDisabled = #2B2D9AFF;
  preset ThumbTintDefault = #2B2D9AFF;
  preset ThumbActive = Res::RotaryThumbMin;
  preset ThumbFocused = Res::RotaryThumbMin;
  preset ThumbDefault = Res::RotaryThumbMin;
  preset ScaleTintActive = #2B2D9AFF;
  preset ScaleTintFocused = #141547FF;
  preset ScaleTintDisabled = #141547FF;
  preset ScaleTintDefault = #141547FF;
  preset ScaleActive = Res::RotaryBackground;
  preset ScaleFocused = Res::RotaryBackground;
  preset ScaleDisabled = Res::RotaryBackground;
  preset ScaleDefault = Res::RotaryBackground;
  preset WidgetMaxSize = <160,160>;
  preset WidgetMinSize = <160,160>;
}

// This object contains configuration information for a push button widget.
$rect <841,229,1080,269>
$output false
autoobject WidgetSet::PushButtonConfig PushButtonConfig
{
  preset IconTintActive = #616365FF;
  preset IconTintFocused = #292A2BFF;
  preset IconTintDisabled = #292A2BFF;
  preset IconTintDefault = #292A2BFF;
  preset FaceLayout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop];
  preset FaceTintActive = #1E1E1EFF;
  preset FaceTintFocused = #363636FF;
  preset FaceTintDisabled = #363636FF;
  preset FaceTintDefault = #363636FF;
  preset FaceFrameActive = 1;
  preset FaceFrameFocused = 0;
  preset FaceFrameDefault = 0;
  preset FaceActive = Res::ButtonFace;
  preset FaceFocused = null;
  preset FaceDisabled = null;
  preset FaceDefault = Res::ButtonFace;
}

$rect <840,269,1080,309>
$output false
autoobject WidgetSet::PushButtonConfig NavigationButton
{
  preset LabelColorActive = #2860FFFF;
  preset LabelColorDefault = #1840A3FF;
  preset IconTintActive = #000000FF;
  preset IconTintFocused = #FFFFFFFF;
  preset IconTintDisabled = #FFFFFFFF;
  preset IconTintDefault = #000000FF;
  preset LabelFont = Res::FontBodoniMedium;
  preset FaceTintActive = #E0F5FFFF;
  preset FaceTintDisabled = #FFFFFFFF;
  preset FaceTintDefault = #E1E6FFFF;
  preset FaceActive = Res::NavigationButtonFace;
  preset FaceDefault = Res::NavigationButtonFace;
}

$rect <50,110,250,150>
$output false
class OnePageMetronom : Core::Group
{
  $rect <250,290,450,330>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Bounds = <0,0,482,272>;
    preset Bitmap = Res::MetronomeBackground;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay TempoValue
  {
    preset Bounds = <63,74,144,138>;
    preset Outlet = ^Application::Device.Tempo;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = Application::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay BeatValue
  {
    preset Bounds = <346,74,416,138>;
    preset Outlet = ^Application::Device.Beat;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = Application::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton PushButton
  {
    preset Bounds = <205,86,275,156>;
    preset Visible = true;
    preset OnRelease = onTogleStartStop;
    preset OnActivate = null;
    preset Icon = Res::PlayIcon;
    preset Label = "Caption";
    preset Appearance = Application::PushButtonConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob TempoRotary
  {
    preset Bounds = <23,25,183,185>;
    preset Outlet = ^Application::Device.Tempo;
    preset StepSize = 5;
    preset MaxValue = 150;
    preset MinValue = 30;
    preset Appearance = Application::RotaryMaxConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob BeatRotary
  {
    preset Bounds = <301,26,461,186>;
    preset Outlet = ^Application::Device.Beat;
    preset MaxValue = 8;
    preset MinValue = 2;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <20,340,220,380>
  slot onTogleStartStop
  {
    Application::Device.Running = !  Application::Device.Running;

    PushButton.Icon = Application::Device.Running ? Res::StopIcon : Res::PlayIcon;



  }

  $rect <20,20,160,60>
  object Views::Text BeatTxt
  {
    preset Bounds = <36,207,154,237>;
    preset ColorBL = #3A61D4FF;
    preset String = "TEMPO";
    preset Font = Res::FontBodoniLarge;
    preset Color = #3A61D4FF;
  }

  $rect <20,20,160,60>
  object Views::Text TempoTxt
  {
    preset Bounds = <342,207,442,237>;
    preset String = "BEAT";
    preset Font = Res::FontBodoniLarge;
    preset Color = #3A61D4FF;
  }

  // Touch screen events
  note group Note
  {
    attr Bounds = <0,290,240,420>;
  }
}

$rect <50,160,250,200>
$output false
class NavigationMetronom : Core::Group
{
  $rect <500,0,700,40>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Bounds = <0,0,482,272>;
    preset Bitmap = Res::MetronomeBackground;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay TempoValue
  {
    preset Bounds = <11,97,128,129>;
    preset Outlet = ^Application::Device.Tempo;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = WidgetSet::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay BeatValue
  {
    preset Bounds = <291,97,413,129>;
    preset Outlet = ^Application::Device.Beat;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = WidgetSet::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton PushButton
  {
    preset Bounds = <205,86,275,156>;
    preset Visible = true;
    preset OnRelease = onTogleStartStop;
    preset OnActivate = null;
    preset Icon = Res::PlayIcon;
    preset Label = "Caption";
    preset Appearance = Application::PushButtonConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton ButtonTempo
  {
    preset Bounds = <15,195,165,245>;
    preset OnRelease = onTempoPress;
    preset OnPress = null;
    preset Label = "TEMPO";
    preset Appearance = Application::NavigationButton;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton ButtonBeat
  {
    preset Bounds = <321,195,471,245>;
    preset OnRelease = onBeatPress;
    preset OnPress = null;
    preset Label = "BEAT";
    preset Appearance = Application::NavigationButton;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob TempoRotary
  {
    preset Bounds = <23,25,183,185>;
    preset Outlet = null;
    preset Appearance = Application::RotaryMaxConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob BeatRotary
  {
    preset Bounds = <301,26,461,186>;
    preset Outlet = null;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <10,350,210,390>
  slot onTogleStartStop
  {
    //if button is pressed it changes sate from start/stop and icon PlayIcon/StopIcon

    Application::Device.Running = !   Application::Device.Running;

    PushButton.Icon = Application::Device.Running ? Res::StopIcon : Res::PlayIcon ;



  }

  $rect <10,400,210,440>
  slot onTempoPress
  {
    tempo = new Application::NavigationTempo;

    tempo.OnCheck = onTempoClosed;

    SwitchToDialog ( tempo, Effects::SlideRightCentered, null, null, null, null, null,
                                null, null, null, false );

  }

  $rect <10,450,210,490>
  slot onBeatPress
  {
    beat = new Application::NavigationBeat;

    beat.OnCheck = onBeatClosed;

    SwitchToDialog( beat, Effects::SlideLeftCentered, null, null, null, null, null,
                               null, null, null, false );



  }

  $rect <410,400,610,440>
  slot onTempoClosed
  {
    DismissDialog( tempo, Effects::SlideLeftCentered, null, null, null, null, false);
  }

  $rect <210,400,410,440>
  var Application::NavigationTempo tempo;

  $rect <210,450,410,490>
  var Application::NavigationBeat beat;

  $rect <410,450,610,490>
  slot onBeatClosed
  {
    DismissDialog( beat, Effects::SlideRightCentered, null, null, null, null, false);
  }

  // Touch screen events
  note group Note
  {
    attr Bounds = <0,300,620,530>;
  }
}

$rect <80,200,250,240>
$output false
class NavigationTempo : Core::Group
{
  $rect <500,10,700,50>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Bounds = <0,0,480,272>;
    preset Bitmap = Res::MetronomeBackground;
    preset Opacity = 255;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Bounds = <174,16,291,61>;
    preset String = "TEMPO";
    preset Font = Res::FontBodoniLarge;
    preset Color = #2864FFFF;
  }

  $rect <20,20,160,60>
  object Views::Line Line
  {
    preset Point2 = <360,65>;
    preset Point1 = <122,65>;
    preset Color = #04208BFF;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay ValueDisplay
  {
    preset Bounds = <182,126,282,176>;
    preset Outlet = ^Application::Device.Tempo;
    preset Unit = "";
    preset Precision = 0;
    preset CurrentBias = 0.0;
    preset Appearance = WidgetSet::ValueDisplay_Large;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob RotaryKnob
  {
    preset Bounds = <153,71,313,231>;
    preset Outlet = ^Application::Device.Tempo;
    preset StepSize = 5;
    preset MaxValue = 150;
    preset MinValue = 30;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::HorizontalSlider HorizontalSlider
  {
    preset Bounds = <140,215,340,265>;
    preset Outlet = ^Application::Device.Tempo;
    preset StepSize = 5;
    preset MaxValue = 150;
    preset MinValue = 30;
    preset Appearance = Application::MyHorizontalSliderConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton PushButton
  {
    preset Bounds = <387,207,462,257>;
    preset Opacity = 250;
    preset OnRelease = onCheck;
    preset OnPress = null;
    preset Icon = Res::CheckIcon;
    preset Label = "";
    preset Appearance = Application::NavigationButton;
  }

  $rect <530,110,730,150>
  slot onCheck
  {
    signal OnCheck;
  }

  $rect <740,110,940,150>
  property slot OnCheck;

  // Touch screen events
  note group Note
  {
    attr Bounds = <510,60,960,180>;
  }
}

$rect <80,240,250,280>
$output false
class NavigationBeat : Core::Group
{
  $rect <500,0,700,40>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Bounds = <0,0,480,272>;
    preset Bitmap = Res::MetronomeBackground;
    preset Opacity = 255;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF92;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Bounds = <190,24,290,54>;
    preset String = "BEAT";
    preset Font = Res::FontBodoniLarge;
    preset Color = #2864FFFF;
  }

  $rect <20,20,160,60>
  object Views::Line Line
  {
    preset Point2 = <360,65>;
    preset Point1 = <122,65>;
    preset Color = #04208BFF;
  }

  $rect <20,20,160,60>
  object WidgetSet::ValueDisplay ValueDisplay
  {
    preset Bounds = <81,134,281,166>;
    preset Outlet = ^Application::Device.Beat;
    preset Unit = "";
    preset Precision = 0;
    preset Appearance = WidgetSet::ValueDisplay_Medium;
  }

  $rect <20,20,160,60>
  object WidgetSet::RotaryKnob RotaryKnob
  {
    preset Bounds = <181,70,341,230>;
    preset Outlet = ^Application::Device.Beat;
    preset MaxValue = 8;
    preset MinValue = 2;
    preset Appearance = Application::RotaryMinConfig;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton PushButton
  {
    preset Bounds = <384,207,459,257>;
    preset Opacity = 250;
    preset OnRelease = onCheck;
    preset OnPress = null;
    preset Icon = Res::CheckIcon;
    preset Label = "";
    preset Appearance = Application::NavigationButton;
  }

  $rect <510,90,710,130>
  slot onCheck
  {
    signal OnCheck;
  }

  $rect <20,20,160,60>
  object WidgetSet::VerticalSlider VerticalSlider
  {
    preset Bounds = <97,74,147,243>;
    preset Outlet = ^Application::Device.Beat;
    preset MaxValue = 8;
    preset MinValue = 2;
    preset Appearance = Application::MyVerticalSliderConfig;
  }

  $rect <720,90,920,130>
  property slot OnCheck;

  // Touch screen events
  note group Note
  {
    attr Bounds = <500,40,940,160>;
  }
}

$rect <50,290,250,330>
$output false
class SlidingMetronom : Core::Group
{
  $rect <0,290,170,330>
  inherited method Init()
  {
    Outline.ScrollOffset = point( -SliderTempo.Bounds.w, 0 );
  }

  $rect <0,330,170,370>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Core::Outline Outline
  {
    preset Bounds = <0,0,480,272>;
    preset SlideHandler = SlideTouchHandler;
    preset Formation = Core::Formation.LeftToRight;
  }

  $rect <20,20,160,60>
  object Application::SlidingTempo SliderTempo
  {
    preset Bounds = <0,0,480,272>;
    preset Embedded = true;
  }

  $rect <20,20,160,60>
  object Application::SlidingMain SliderMetronome
  {
    preset Layout = Core::Layout[AlignToLeft, AlignToTop];
    preset Bounds = <0,0,480,272>;
    preset Embedded = true;
  }

  $rect <20,20,160,60>
  object Application::SlidingBeat SliderBeat
  {
    preset Bounds = <0,0,480,272>;
    preset Embedded = true;
  }

  $rect <20,20,160,60>
  object Core::SlideTouchHandler SlideTouchHandler
  {
    preset Bounds = <0,0,480,272>;
    preset SnapLast = <480,0>;
    preset SnapNext = <480,0>;
    preset SnapFirst = <480,0>;
    preset SlideVert = false;
    preset RubberBandEffectElasticity = 100.0;
    preset RubberBandEffectDuration = 100;
    preset RetargetDelay = 100;
    preset RetargetCondition = Core::RetargetReason[LongPress];
    preset Friction = 1.0;
    preset Embedded = false;
  }
}

$rect <20,70,250,110>
$output false
class Application : Core::Root
{
  $rect <500,0,700,40>
  inherited property Bounds = <0,0,480,272>;

  $rect <0,290,200,330>
  inherited method DriveCursorHitting()
  {
    if (( menu != null) && (menu.Bounds != aPos ))
    {
      closeMenu();
    }

    return super( aDown, aFinger, aPos );
  }

  $rect <730,140,930,180>
  slot onOpenMenu
  {
    // If push button events is already a menu & scrim presented than close them
    if (menu != null) 
    {
      closeMenu();
      return;
    }

    // Create a new instance of the menu component and a 'scrim' dialog    
    menu = new Application::SettingsMenu;
    scrim = new Application::Scrim;

    menu.OnOpenNavigaton = onNavigation;
    menu.OnOpenSlider    = onSliding;
    menu.OnOpenOnePage   = onOnePage;

    // ... and present dialogs simultaniously   
    AppContainer.PresentDialog( scrim, Effects::FadeInOutCentered , null, null, null, null, null, null, null, false );  
    AppContainer.PresentDialog(  menu, Application::SlideDownCentered , null, null, null, null, null, null, null, true);


  }

  $rect <730,190,930,230>
  slot onNavigation
  {
    if ( menu != null )
    {
      menu  = null;
    }

    var Core::Group page = new Application::NavigationMetronom;

    AppContainer.SwitchToDialog( page, Effects::SlideUpCentered, Effects::SlideUpCentered, null, null, null, null,
                                null, null, null,false );


  }

  $rect <520,140,720,180>
  var Application::SettingsMenu menu = null;

  $rect <20,20,160,60>
  object Core::Group Wellcome
  {
    preset Bounds = <0,0,480,272>;
  }

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Bounds = <0,0,480,272>;
    preset Bitmap = Res::MetronomeBackground;
    preset Opacity = 250;
  }

  $rect <20,20,160,60>
  object Views::Rectangle TransparentBackg
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #FFFFFF6C;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Bounds = <109,46,327,180>;
    preset String = "HELLO";
    preset Font = Res::FontBodoniLarge;
    preset Color = #1D729DFF;
  }

  $rect <20,20,160,60>
  object Core::Group AppContainer
  {
    preset Bounds = <0,0,480,272>;
  }

  $rect <20,20,160,60>
  object WidgetSet::PushButton PushButton
  {
    preset Bounds = <0,0,54,46>;
    preset OnRelease = onOpenMenu;
    preset Icon = Res::MenuFace;
    preset Label = "";
    preset Appearance = Application::MenuButtonConfig;
  }

  $rect <730,230,930,270>
  slot onSliding
  {
    if ( menu != null )
    {
      menu  = null;
    }


    var Core::Group page = new Application::SlidingMetronom;

    AppContainer.SwitchToDialog( page, Effects::SlideUpCentered, Effects::SlideUpCentered, null, null, null, null,
                                null, null, null,false );
  }

  $rect <730,270,930,310>
  slot onOnePage
  {
    if ( menu != null )
    {
      menu  = null;
    }


    var Core::Group page = new Application::OnePageMetronom;

    AppContainer.SwitchToDialog( page, Effects::SlideUpCentered, Effects::SlideUpCentered, null, null, null, null,
                                null, null, null,false );
  }

  $rect <500,40,700,80>
  object Effects::ColorEffect HelloTextEffect
  {
    preset Enabled = true;
    preset Value2 = #1DF6D7B5;
    preset Value1 = #1C38DBF6;
    preset Outlet = ^Text.Color;
  }

  // Menu navigation
  note group Note1
  {
    attr Bounds = <500,90,950,370>;
  }

  $rect <520,190,720,230>
  var Application::Scrim scrim = null;

  $rect <730,310,930,350>
  method void closeMenu()
  {
    // If push button events is already a menu & scrim presented than close them
    if (menu != null) 
    {
      AppContainer.DismissDialog(menu, Application::SlideUpCentered, null, null,  null, null, false );
      AppContainer.DismissDialog( scrim, Effects::FadeInOutCentered, null, null, null, null, true );
      menu = null;
     
    }
  }
}

// This component implements a generic menu.
$rect <300,150,480,190>
$output false
class Menu : Templates::Menu
{
  $rect <20,410,220,450>
  inherited property Bounds = <0,0,300,220>;

  $rect <480,290,680,330>
  inherited method UpdateLayout()
  {
    // Always invoke the inherited method.
    super( aSize );

    // This method is called always when something has changed in the
    // layout of the menu. In particular when items are added, removed,
    // hidden or shown. It is also called when the menu itself changes
    // its size.

    // In our template we want the menu to adjust its size automatically
    // to the number of available items. Doing this however directly in
    // context of the UpdateLayout() method would cause the UpdateLayout()
    // method to be executed recursively.

    // Therefore, we delay the adjust operation by using the 'postsignal'.
    // The adjust operation takes place in the slot method 'autoResize'.

    postsignal autoResize;
  }

  // Layout management
  note group Note3
  {
    attr Bounds = <470,250,690,380>;
  }

  // State management
  note group Note2
  {
    attr Bounds = <240,250,460,460>;
  }

  // Keyboard events
  note group Note1
  {
    attr Bounds = <10,250,230,380>;
  }

  // This variable stores the current state of the menu. Please see the comments \
  // inside UpdateViewState().
  $rect <250,410,450,450>
  var bool focused;

  // This variable stores the current state of the menu. Please see the comments \
  // inside UpdateViewState().
  $rect <250,370,450,410>
  var bool modal;

  // This variable stores the current state of the menu. Please see the comments \
  // inside UpdateViewState().
  $rect <250,330,450,370>
  var bool enabled;

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <20,290,220,330>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.CursorKeys;
    preset OnHold = onPressKey;
  }

  // This slot method is called at the runtime after items have been added, removed, \
  // etc. Its job is to adapt the menu size to the of the items. In this manner the \
  // menu can resize itself according to the number of items within the menu.
  $rect <480,330,680,370>
  slot autoResize
  {
    // When you are editing the menu content in Composer, the automatic
    // adjustment would probably confuse you. Therefore, we test whether
    // 'this' component is actually opened in Composer. If 'true', we
    // leave the method immediately.

    $if $composer
      // Do we edit 'this' component in Composer? EwIsPrimaryObject() is
      // an internal function of Prototyper permitting to test whether
      // 'this' component is actually edited in Composer.
      if ( EwIsPrimaryObject( this ))
        return;
    $endif

    // In order to estimate the smallest possible width of the menu ...
    var int32      width;
    var Core::View view;

    // iterate over all visible items 
    while ( !!( view = Outline.FindNextView( view, Core::ViewState[ Visible ])))
    {
      var Core::Group item  = (Core::Group)view;
      width = math_max( width, item? item.GetMinimalSize().x : 0 );
    }

    // Determine the area occupied by all items
    var point s = Outline.GetContentArea( Core::ViewState[ Visible ]).size;

    // Use the previously estimated min width for the menu items
    s.x = width;

    // Take in account the area occupied by caption and borders. This can be
    // calculated from the difference between the actual size of the complete
    // menu and the size of the Outline area.
    s = s + Bounds.size - Outline.Bounds.size;

    // Ensure the menu is large enough to display at least the caption text
    // with an additional border around it.
    var point ts = CaptionText.GetContentArea().size + <20,20>;

    if ( s.x < ts.x ) s.x = ts.x;
    if ( s.y < ts.y ) s.y = ts.y;

    // Limit the max. menu size to e.g. 60% size of the screen size
    var int32 maxW = ( $ScreenSize.x * 3 ) / 5;
    var int32 maxH = ( $ScreenSize.y * 1 ) / 1;

    if ( s.x > maxW ) s.x = maxW;
    if ( s.y > maxH ) s.y = maxH;

    // Change the size of the menu
    Bounds.size = s;

    /*

      TO DO:

      If desired, you can also adjust the position of the menu so that it, for example,
      appears screen centered.

        Bounds = rect(<0,0>, s ) + point(( $ScreenSize.x - s.x ) / 2,
                                         ( $ScreenSize.y - s.y ) / 2 ); 

    */
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <20,330,220,370>
  slot onPressKey
  {
    var Core::Direction dir  = Core::Direction.None;
    var Core::View      item = Focus;

    // Determine the direction to look for other items to select
    switch ( KeyHandler.Code )
    {
      case Core::KeyCode.Left  : dir = Core::Direction.Left;
      case Core::KeyCode.Right : dir = Core::Direction.Right;
      case Core::KeyCode.Up    : dir = Core::Direction.Top;
      case Core::KeyCode.Down  : dir = Core::Direction.Bottom;
      default:;
    }

    // Look for the neighbor item accordingly the determined direction
    item = FindViewInDirection( item, dir, Core::ViewState[ Enabled, Focusable ]);

    // If found -> pass the focus to it
    // In case of large menus - scroll to the item with an animation effect
    if ( item != null )
    {
      Focus = item;

      // Prepare the animation effect. If you don't want the scroll animation,
      // just remove the following 3 lines and pass 'null' in the EnsureVisible()
      // method instead of 'effect'.
      var Effects::PointEffect effect = new Effects::PointEffect;

      effect.Timing        = Effects::Timing.FastIn_EaseOut;
      effect.CycleDuration = 100;

      // Scroll to the item
      Outline.EnsureVisible( item, true, effect, null );
    }
  }

  $rect <310,40,510,80>
  onset Caption
  {
     // The value doesn't change - nothing to do.
    if ( pure Caption == value )
      return;

    // Remember the property's new value.
    pure Caption = value;

    // ... and update the text displayed in the menu
    CaptionText.String = value;

    // Changing the caption can also affect the width of the
    // menu itself. Therefore trigger the routine to recalculate
    // the menu size
    postsignal autoResize;
  }

  $rect <20,20,160,60>
  object Views::Frame Background
  {
    preset Layout = Core::Layout[AlignToRight, AlignToTop];
    preset Bounds = <0,0,300,220>;
    preset ColorBL = #BBD5E079;
    preset ColorBR = #A6BDC7DB;
    preset ColorTR = #BBD5E049;
    preset ColorTL = #BBD5E0D2;
    preset Color = #BBD5E079;
    preset Bitmap = Res::NavigationButtonFace;
    preset Opacity = 230;
  }

  $rect <20,20,160,60>
  object Views::Frame Border
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,300,220>;
    preset Color = #FFFFFFFF;
    preset Bitmap = Res::ItemFace;
    preset Visible = false;
  }

  // This is a slide gesture handler. It allows the user to scroll the items within \
  // a large menu by touching the menu with the mouse or with the finger on a touch \
  // screen.
  $rect <20,20,160,60>
  object Core::SlideTouchHandler SlideTouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <10,40,290,210>;
    preset SlideHorz = false;
    preset Friction = 0.01;
  }

  // This is an outline view to group and scroll the items together.
  $rect <20,20,160,60>
  object Core::Outline Outline
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <10,40,290,210>;
    preset SlideHandler = SlideTouchHandler;
    preset SpaceVert = 3;
    preset Formation = Core::Formation.TopToBottom;
  }

  $rect <20,20,160,60>
  object Views::Text CaptionText
  {
    preset Layout = Core::Layout[AlignToLeft, AlignToRight, AlignToTop, ResizeHorz];
    preset Bounds = <10,0,290,40>;
    preset String = "Menu";
    preset Font = Res::FontBodoniSmall;
    preset Color = #141547FF;
  }

  // The property 'Caption' stores the text to display within the menu. 
  $rect <310,0,510,40>
  property string Caption = "Menu";
}

// This component implements a simple menu item.
$rect <300,190,480,230>
$output false
class MenuItem : Templates::MenuItem
{
  $rect <480,310,680,350>
  inherited property Bounds = <0,0,220,40>;

  $rect <940,190,1140,230>
  inherited method GetMinimalSize()
  {
    /*
       Calculate the minimum size of the item so the complete caption is visible.

       TO DO:

       If you have modified the appearance of the menu item, added some views or
       changed the layout of the item - adapt the following code and calculate the
       minimum width for the item.

    */

    // We assume: the item requires space for the caption and 20 pixel margin on
    // the left and on the right of the caption. Important: perform the calculation
    // without the caption text being evtl. truncated and replaced by an ellipsis
    // sign.
    var bool  ellipsis   = CaptionText.Ellipsis;
    CaptionText.Ellipsis = false;
    var point size       = point( CaptionText.GetContentArea().w + 20, 0 );
    CaptionText.Ellipsis = ellipsis;

    return size;
  }

  $rect <710,190,910,230>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited method.
    super( aState );

    // Determine the new state of the item.
    //
    // isEnabled  --> the item can react to user inputs.
    // isSelected --> the item can receive keyboard events.
    // isPressed  --> the item should appear pressed.
    //
    var bool isEnabled  = aState.contains( Core::ViewState[ Enabled  ]);
    var bool isSelected = aState.contains( Core::ViewState[ Selected ]);
    var bool isPressed  = ( TouchHandler.Down && TouchHandler.Inside ) || 
                            FlashTimer.Enabled;

    /*

      TO DO:

      Depending on your item design, you have surely added some new views
      to your item. In the below code you should update the properties of
      these views. For example, when your item has two images to appear
      exclusively for released and pressed item state, following can be
      done:

        imagePressed.Visible  =  isPressed;
        imageReleased.Visible = !isPressed;

      Depending on the state of the item, you can alternate any property 
      of your views. You can change their visibility, colors, opacity,
      bitmaps shown in image views, fonts used to render text, the position
      and the size the view, ...
       

      HINT:

      Instead of instantly alternate the views properties you can here also
      start effects to do this with an animation. Important: To decide when
      to start an effect you should compare the current state of the item
      (e.g. 'isPressed') with its preceding state (e.g. variable 'pressed').

      Assuming you have already added to your item component a new effect
      member, named it 'pressedEffect' and configured it to animate e.g. the
      opacity of an image within the item. Then following is sufficient to
      trigger the animation:

        if ( isPressed && !pressed )
        {
          pressedEffect.Reversed = false;
          pressedEffect.Enabled  = true;
        }
        else if ( !isPressed && pressed )
        {
          pressedEffect.Reversed = true;
          pressedEffect.Enabled  = true;
        }

    */

    if ( !isEnabled )
    {
      Background.Color  = #FFFFFFFF;
      Border.Visible    = false;
      CaptionText.Color = #141547FF;
    }

    else if ( isPressed )
    {
      Background.Color  = #9BBDDEC1;
      Border.Color      = #000000FF;
      Border.Visible    = true;
      //Border.Width = 1;
      CaptionText.Color = #FFFFFFFF;
    }

    else if ( isSelected )
    {
      Background.Color  = #D5EBFFFF;
      Border.Color      = #444444FF;
      Border.Visible    = true;
      // Border.Width = 1;
      CaptionText.Color = #FFFFFFFF;
    }

    // Enabled but not pressed nor selected.
    else
    {
      Background.Color  = #FFFFFFFF;
      Border.Visible    = false;
      CaptionText.Color = #000000FF;
    }

    // Remember the current state. Next time when the UpdateViewState() is called
    // you can compare the 'old' state with the 'new' state and perform more
    // sophisticated update, e.g. you can start an animation effect for the
    // pressed <<-->> not pressed transition.
    enabled  = isEnabled;
    selected = isSelected;
    pressed  = isPressed;
  }

  // Layout management
  note group Note6
  {
    attr Bounds = <930,150,1150,240>;
  }

  // State management
  note group Note4
  {
    attr Bounds = <700,150,920,360>;
  }

  // Feedback flash effect
  note group Note3
  {
    attr Bounds = <470,150,690,280>;
  }

  // Keyboard events
  note group Note2
  {
    attr Bounds = <240,150,460,280>;
  }

  // Touch screen events
  note group Note1
  {
    attr Bounds = <10,150,230,320>;
  }

  // This variable stores the current state of the item. Please see the comments \
  // inside UpdateViewState().
  $rect <710,310,910,350>
  var bool pressed;

  // This variable stores the current state of the item. Please see the comments \
  // inside UpdateViewState().
  $rect <710,270,910,310>
  var bool selected;

  // This variable stores the current state of the item. Please see the comments \
  // inside UpdateViewState().
  $rect <710,230,910,270>
  var bool enabled;

  // This timer object is used to flash the item when the user has tapped it very \
  // quickly or the item has been activated with the keyboard. This is just a visual \
  // feedback effect.
  $rect <480,190,680,230>
  object Core::Timer FlashTimer
  {
    preset OnTrigger = onFlashTimer;
    preset Period = 0;
    preset Begin = 50;
  }

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <250,190,450,230>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.Enter;
  }

  // This internal slot method is called when the '@FlashTimer' is expired. It ends \
  // the short flash feedback effect.
  $rect <480,230,680,270>
  slot onFlashTimer
  {
    // The feedback flash timer is finished. Request the item to update its
    // appearance. The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // With the end of the feedback flash effect the item is activated.
    postsignal OnActivate;
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <250,230,450,270>
  slot onPressKey
  {
    // Ignore keyboard events when the user is interacting with the item via the
    // touch screen.
    if ( TouchHandler.Down )
      return;

    // Pressing the key flashes the item for a short period. This is a kind of 
    // feedback effect. Request the item to update its appearance accordingly.
    // The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // The item is still performing the feedback flash effect from the preceding
    // tap/key event. This can occur when the user taps the item or presses the
    // key in a very rapid succession. Thus complete this preceding tap (simulate
    // the timer expiration) before starting a new item interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }

    // Start the feedback flash effect.
    FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user drags the finger while pressing \
  // the item. This only updates the item to appear pressed or released.
  $rect <20,270,220,310>
  slot onEnterLeaveTouch
  {
    // Every time the user touches the item or drags the finger inside/outside
    // the item's area request the item update its appearance. The update will
    // occur in the UpdateViewState() method.
    InvalidateViewState();
  }

  // This internal slot method is called when the user releases the touch screen \
  // after touching the item's area. This activates the item.
  $rect <20,230,220,270>
  slot onReleaseTouch
  {
    // Did the user moved the finger outside the item's area? In such case
    // the item is not activated.
    if ( !TouchHandler.Inside )
      return;

    // The touch interaction has been passed over to another touch handler.
    // The item is not activated in such case.
    if ( TouchHandler.AutoDeflected )
      return;

    // The user has pressed and held the item for longer time. This was enough
    // long to give a visual 'press' feedback to the user. The item can be
    // activated immediately.
    if ( TouchHandler.HoldPeriod >= FlashTimer.Begin )
      postsignal OnActivate;

    // The user has tapped the item very quickly. Defer the item activation
    // to give the user first a short visual feedback that the item has been
    // pressed.
    else
      FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user touches the item's area.
  $rect <20,190,220,230>
  slot onPressTouch
  {
    // Clicking on a menu item focuses (selects) the item. If you don't want it,
    // remove the following code line.
    Owner.Focus = this;

    // The item is still performing the feedback flash effect from the preceding
    // tap. This can occur when the user taps the item in a very rapid succession. 
    // Thus complete this preceding tap (simulate the timer expiration) before 
    // starting a new item interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }
  }

  $rect <250,50,450,90>
  onset Caption
  {
    // The value doesn't change - nothing to do.
    if ( pure Caption == value )
      return;

    // Remember the property's new value.
    pure Caption = value;

    // ... and update the text displayed in the item
    CaptionText.String = value;
  }

  $rect <20,20,160,60>
  object Views::Frame Background
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,220,40>;
    preset ColorBL = #DCDCDCFF;
    preset ColorBR = #C7C7C7FF;
    preset Color = #E6E6E6FF;
    preset Bitmap = Res::ItemFace;
  }

  $rect <20,20,160,60>
  object Views::Frame Border
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,220,40>;
    preset Bitmap = Res::ItemFace;
    preset Visible = false;
  }

  // This is a generic touch handler.
  $rect <20,20,160,60>
  object Core::SimpleTouchHandler TouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,39>;
    preset Point3 = <219,39>;
    preset Point2 = <219,0>;
    preset Point1 = <0,0>;
    preset OnLeave = onEnterLeaveTouch;
    preset OnEnter = onEnterLeaveTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset RetargetCondition = Core::RetargetReason[WipeDown, WipeLeft, WipeRight, WipeUp];
    preset MaxStrikeCount = 100;
  }

  $rect <20,20,160,60>
  object Views::Text CaptionText
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <10,0,210,40>;
    preset Ellipsis = true;
    preset Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];
    preset String = "Caption";
    preset Font = Res::FontBodoniSmall;
    preset Color = #000000FF;
  }

  // The property 'OnActivate' can refer to a slot method, which will receive a signal \
  // as soon as the user has activated (pressed and released) the item. Thereupon \
  // the method's logic will be executed.
  $rect <480,10,680,50>
  property slot OnActivate = null;

  // The property 'Caption' stores the text to display within the item. 
  $rect <250,10,450,50>
  property string Caption = "Caption";
}

$rect <280,110,480,150>
$output false
class SettingsMenu : Application::Menu
{
  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <0,0,282,200>;
    preset Color = #92BFFFFE;
    preset Embedded = false;
    preset Visible = true;
  }

  $rect <20,20,160,60>
  inherited object Border
  {
    preset Bounds = <0,0,282,200>;
    preset Visible = false;
  }

  $rect <20,20,160,60>
  inherited object SlideTouchHandler
  {
    preset Bounds = <10,40,267,192>;
  }

  $rect <20,20,160,60>
  inherited object Outline
  {
    preset Bounds = <10,40,267,192>;
  }

  $rect <20,20,160,60>
  inherited object CaptionText
  {
    preset Bounds = <10,0,267,40>;
    preset String = "Style";
    preset Opacity = 255;
  }

  $rect <20,20,160,60>
  object Application::MenuItem SinglePage
  {
    preset Bounds = <28,45,248,85>;
    preset Opacity = 200;
    preset OnActivate = onOnePage;
    preset Caption = "SinglePage";
  }

  $rect <20,20,160,60>
  object Application::MenuItem Navigation
  {
    preset Bounds = <27,92,247,132>;
    preset OnActivate = onNavigation;
    preset Caption = "Navigation";
  }

  $rect <20,20,160,60>
  object Application::MenuItem Slider
  {
    preset Bounds = <27,140,247,180>;
    preset OnActivate = onSliding;
    preset Caption = "Slider";
  }

  $rect <220,290,420,330>
  slot onOnePage
  {
    signal OnOpenOnePage;
  }

  $rect <220,330,420,370>
  slot onNavigation
  {
    signal OnOpenNavigaton;

  }

  $rect <220,370,420,410>
  slot onSliding
  {
    signal OnOpenSlider;
  }

  $rect <10,330,210,370>
  property slot OnOpenNavigaton;

  $rect <10,370,210,410>
  property slot OnOpenSlider;

  $rect <10,290,210,330>
  property slot OnOpenOnePage;

  // Touch screen events
  note group Note
  {
    attr Bounds = <0,248,440,478>;
  }
}

$rect <840,310,1080,350>
$output false
autoobject WidgetSet::PushButtonConfig MenuButtonConfig
{
  preset LabelColorActive = #FFFFFF00;
  preset LabelColorDefault = #FFFFFF00;
  preset IconTintActive = #6F6F6FFF;
  preset IconTintDefault = #000000FF;
  preset IconAlignment = Views::ImageAlignment[AlignHorzCenter, AlignVertCenter];
  preset FaceTintActive = #8A8A8AFF;
  preset FaceTintDefault = #000000FF;
}

// The global autoobject Application::SlideUpCentered1 represents the fade-in/out \
// operation affecting the position and the opacity of the given GUI component. When \
// using the transition for the fade-in operation, the GUI component slides from \
// the bottom edge of its owner component and continues moving vertically until it \
// reaches the owner's center position. When using the transition for the fade-out \
// operation, the component slides up until it leaves the visible area of its owner \
// component. Additionally, while the transitions are performed, the opacity of the \
// GUI component fades-in or fades-out accordingly. This transition is thus ideal \
// wherever one GUI component should smoothly slide-in/out in context of another \
// component. The duration of the transition is configured per default to take 500 \
// ms and the timing is configured to start fast and then slow down the animation \
// (FastIn_EaseOut).
// This object exists for your convenience permitting you to simply refer the transition \
// wherever it is required in your implementation without having to take care of \
// the creation and configuration of the object. If you require the transition to \
// run with other configuration (e.g. other timing parameters), create a copy of \
// this object and adapt its properties accordingly.
$rect <530,50,780,90>
$output false
autoobject Effects::SlideTransition SlideUpCentered
{
  preset MarginTop = 15;
  preset MarginLeft = 15;
  preset Alignment = Effects::DialogAlignment[AlignHorzLeft, AlignVertTop];
  preset Duration = 600;
  preset Direction = Core::Direction.Top;
}

// The global autoobject Application::SlideDownCentered represents the fade-in/out \
// operation affecting the position and the opacity of the given GUI component. When \
// using the transition for the fade-in operation, the GUI component slides from \
// the top edge of its owner component and continues moving vertically until it reaches \
// the owner's center position. When using the transition for the fade-out operation, \
// the component slides down until it leaves the visible area of its owner component. \
// Additionally, while the transitions are performed, the opacity of the GUI component \
// fades-in or fades-out accordingly. This transition is thus ideal wherever one \
// GUI component should smoothly slide-in/out in context of another component. The \
// duration of the transition is configured per default to take 500 ms and the timing \
// is configured to start fast and then slow down the animation (FastIn_EaseOut).
// This object exists for your convenience permitting you to simply refer the transition \
// wherever it is required in your implementation without having to take care of \
// the creation and configuration of the object. If you require the transition to \
// run with other configuration (e.g. other timing parameters), create a copy of \
// this object and adapt its properties accordingly.
$rect <530,90,780,130>
$output false
autoobject Effects::SlideTransition SlideDownCentered
{
  preset MarginTop = 15;
  preset MarginLeft = 15;
  preset Alignment = Effects::DialogAlignment[AlignHorzLeft, AlignVertTop];
  preset Duration = 600;
  preset Direction = Core::Direction.Bottom;
}

// Effects
note group Note3
{
  attr Bounds = <510,0,800,290>;
}

// WidgetSet
note group Note4
{
  attr Bounds = <810,0,1110,500>;
}

$rect <280,240,480,280>
$output false
class Scrim : Core::Group
{
  $rect <490,0,690,40>
  inherited property Bounds = <0,0,480,272>;

  $rect <20,20,160,60>
  object Views::Rectangle Rectangle
  {
    preset Bounds = <0,0,480,272>;
    preset Color = #C7D0E066;
  }

  $rect <490,40,690,80>
  property slot OnScreenTouch;

  $rect <690,40,890,80>
  slot onScreenTouch
  {
    signal OnScreenTouch;
  }

  $rect <20,20,160,60>
  object Core::SimpleTouchHandler SimpleTouchHandler
  {
    preset Point4 = <0,0>;
    preset Point3 = <480,0>;
    preset Point2 = <480,272>;
    preset Point1 = <0,272>;
    preset OnPress = onScreenTouch;
    preset RetargetDelay = 300;
  }
}

// This autoobject provides the default customization for the 'value display' widget \
// (WidgetSet::ValueDisplay) in its medium size variant. Widgets using this configuration \
// display the value and unit aligned at the right widget edge.
$rect <840,350,1090,390>
$output false
autoobject WidgetSet::ValueDisplayConfig ValueDisplay_Medium
{
  preset ValueMarginRight = 10;
  preset ValueColorNegative = #A7A9ACFF;
  preset ValueColorPositive = #A7A9ACFF;
  preset ValueAlignment = Views::TextAlignment[AlignHorzCenter, AlignVertCenter];
  preset ValueFont = Resources::FontLarge;
  preset UnitColorNegative = #C4C6C9FF;
  preset UnitColorPositive = #C4C6C9FF;
  preset UnitAlignment = Views::TextAlignment[AlignHorzCenter, AlignVertCenter];
  preset UnitFont = Resources::FontLarge;
  preset FormatPlusSign = "";
  preset Layout = WidgetSet::ValueDisplayLayout.AlignValueLeftToUnit;
  preset WidgetMinSize = <60,32>;
}