Forums | NoesisGUI

Welcome to our official discussion site. You’ll find topics on features, bugs, development, and general support here
https://www.noesisengine.com/forums/

Transforming objects by code

https://www.noesisengine.com/forums/viewtopic.php?t=620

Page 1 of 1

Transforming objects by code

Posted: 07 Feb 2015, 01:41
by elecman
Continuing from my post here:
http://forum.unity3d.com/threads/noesis ... st-1952232

I modified it to this:
Code: Select all
using UnityEngine;
using System.Collections;
using Noesis;

public class Controller : MonoBehaviour{

	Noesis.UIElement circle;
	Noesis.RotateTransform circleRotateTransform;
	Noesis.TranslateTransform circleTranslateTransform;

	float x = 0;
	float y = 0;
	float angle = 0;

	void Start (){

		NoesisGUIPanel panel = GetComponent<NoesisGUIPanel>();
        FrameworkElement root = panel.GetRoot<FrameworkElement>();
		circle = root.FindName<Noesis.UIElement>("path4152");

		Noesis.TransformGroup group = new Noesis.TransformGroup();
		group.GetChildren().Add(new Noesis.RotateTransform(angle));
		group.GetChildren().Add(new Noesis.TranslateTransform(x, y));
		circle.SetRenderTransform(group);

		circle.SetRenderTransformOrigin(new Noesis.Point(0.5f, 0.5f));
		circleRotateTransform = circle.GetRenderTransform().As<Noesis.RotateTransform>();
		circleTranslateTransform = circle.GetRenderTransform().As<Noesis.TranslateTransform>();
	}

	void Update () {
	
		circleRotateTransform.SetAngle(angle + Time.deltaTime);
		circleTranslateTransform.SetX(x + Time.deltaTime);		
	}
}
This is my xaml:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is compatible with Silverlight-->
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg2" Width="744.09448819" Height="1052.3622047">
  <Canvas.RenderTransform>
    <TranslateTransform X="0" Y="0"/>
  </Canvas.RenderTransform>
  <Canvas.Resources>
    <LinearGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="linearGradient4154" MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="1,1">
      <LinearGradientBrush.GradientStops>
        <GradientStopCollection>
          <GradientStop Color="#FF000000" Offset="0"/>
        </GradientStopCollection>
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
  </Canvas.Resources>
  <!--Unknown tag: sodipodi:namedview-->
  <!--Unknown tag: metadata-->
  <Canvas Name="layer2"/>
  <Canvas Name="layer1">
    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="rect4235" Fill="#FF000000" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Opacity="1" Data="m 1.4277344 -23.351562 0 1068.570362 1105.7148656 0 0 -1068.570362 -1105.7148656 0 z M 493.92773 257.41992 c 164.25234 -0.20785 237.5 138.8711 237.5 138.8711 l 0 267.5 c 0 0 -73.24766 139.49136 -237.5 139.69921 -164.25235 0.20786 -237.5 -139.69921 -237.5 -139.69921 l 0 -267.5 c 0 0 73.24765 -138.66324 237.5 -138.8711 z"/>
    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4152" Fill="#FFD40000" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Opacity="1" Data="M 355.55816 386.65996 A 205.71428 205.71428 0 0 1 582.56846 205.0325 205.71428 205.71428 0 0 1 764.50291 431.79683 205.71428 205.71428 0 0 1 537.98497 614.03796 205.71428 205.71428 0 0 1 355.43751 387.76681"/>
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="121.42857" Canvas.Top="69.505058" Width="135" Height="242.85715" Name="rect4154" Fill="#FFD40000" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Opacity="1"/>
  </Canvas>
</Canvas>
but circleRotateTransform and circleTranslateTransform are still null.

I noticed another way of transforming objects here:
http://www.noesisengine.com/docs/Gui.Co ... ction.html

What is the difference between the two methods of transforming an object?

I saw an example of the PlaneProjection class in the ControlGallery->Projection example, but I can't figure out how to do this in code, like in my attempt above.

Re: Transforming objects by code

Posted: 07 Feb 2015, 04:37
by elecman
Ok, I got it to work.

c# code:
Code: Select all
using UnityEngine;
using System.Collections;
using Noesis;

public class Controller : MonoBehaviour{

	UIElement square;
	RotateTransform squareRotateTransform;
	TranslateTransform squareTranslateTransform;

	float x = 0;
	float angle = 0;

	void Start (){

		NoesisGUIPanel panel = GetComponent<NoesisGUIPanel>();
		FrameworkElement root = panel.GetRoot<FrameworkElement>();
		square = root.FindName<UIElement>("redSquare");

		square.SetRenderTransformOrigin(new Point(0.5f, 0.5f));

		squareRotateTransform = new RotateTransform();
		squareTranslateTransform = new TranslateTransform();

		TransformGroup group = new TransformGroup();
		group.GetChildren().Add(squareRotateTransform);
		group.GetChildren().Add(squareTranslateTransform);

		square.SetRenderTransform(group);
	}

	void Update () {

		angle += Time.deltaTime * 20f;
		squareRotateTransform.SetAngle(angle);

		x += Time.deltaTime * 40f;
		squareTranslateTransform.SetX(x);
	}
}
Basically ,this had to be put into a separate line (of course, silly me):
Code: Select all
squareRotateTransform = new RotateTransform();
squareTranslateTransform = new TranslateTransform();
XAML:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is compatible with Silverlight-->
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg4136">
  <Canvas.Resources/>
  <!--Unknown tag: metadata-->
  <!--Unknown tag: sodipodi:namedview-->
  <Canvas Name="svg2" Width="744.09448819" Height="1052.3622047">
    <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="-15.809549" Canvas.Top="-38.333553" Width="1142.2397" Height="1106.6685" Name="rect4157" Fill="#FFFFFFFF" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Opacity="1"/>
    <Canvas Name="g4139">
      <Canvas.RenderTransform>
        <TranslateTransform X="0" Y="0"/>
      </Canvas.RenderTransform>
      <Canvas Name="layer2"/>
      <Canvas Name="layer1">
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="rect4235" Fill="#FF000000" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Data="m 1.4277344 -23.351562 0 1068.570362 1105.7148656 0 0 -1068.570362 -1105.7148656 0 z M 493.92773 257.41992 c 164.25234 -0.20785 237.5 138.8711 237.5 138.8711 l 0 267.5 c 0 0 -73.24766 139.49136 -237.5 139.69921 -164.25235 0.20786 -237.5 -139.69921 -237.5 -139.69921 l 0 -267.5 c 0 0 73.24765 -138.66324 237.5 -138.8711 z"/>
        <Canvas Name="redGroup">
          <Canvas Name="g4165">
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="circle" Fill="#FFD40000" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Data="M 355.55816 386.65996 A 205.71428 205.71428 0 0 1 582.56846 205.0325 205.71428 205.71428 0 0 1 764.50291 431.79683 205.71428 205.71428 0 0 1 537.98497 614.03796 205.71428 205.71428 0 0 1 355.43751 387.76681"/>
            <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="121.42857" Canvas.Top="69.505058" Width="135" Height="242.85715" Name="redSquare" Fill="#FFD40000" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4"/>
          </Canvas>
        </Canvas>
      </Canvas>
      <Canvas.Resources>
        <LinearGradientBrush xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Key="linearGradient4154" MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="1,1">
          <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
              <GradientStop Color="#000000" Offset="0"/>
            </GradientStopCollection>
          </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
      </Canvas.Resources>
    </Canvas>
    <Canvas Name="blueGroup">
      <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="256.90518" Canvas.Top="775.85822" Width="241.09563" Height="138.33356" Name="blueLeft" Fill="#FF0000FF" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Opacity="1"/>
      <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="790.47748" Canvas.Top="653.33423" Width="158.09549" Height="268.76233" Name="blueRight" Fill="#FF0000FF" StrokeThickness="0.5" Stroke="#FF000000" StrokeMiterLimit="4" Opacity="1"/>
    </Canvas>
  </Canvas>
</Canvas>
I am still wondering what the difference is between the method described above and this:
http://www.noesisengine.com/docs/Gui.Co ... ction.html

Re: Transforming objects by code

Posted: 07 Feb 2015, 15:10
by jsantos
Good to know you found a solution!

Regarding the projection, UIElement provides two properties:
  • RenderTransform, the one you are using and that allows you to apply 2D transformations.
  • Projection, for setting a perspective projection (3D).
You can set both properties. We first apply the RenderTransform followed by the Projection.

I am these days reviewing all the documentation and tutorials for v1.2, I think I am just going to add a new tutorial dedicated to transforming elements.

Re: Transforming objects by code

Posted: 07 Feb 2015, 16:13
by elecman
Thanks, I understand now.
All times are UTC+01:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/