Initial import of kinetic-dui branch from the old kinetic

2 files changed, 90 insertions, 0 deletions

diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml
new file mode 100644
index 0000000..0f3e772
--- /dev/null
+++ b/examples/declarative/follow/follow.qml
@@ -0,0 +1,35 @@
+<Rect width="320" height="240" color="#ffffff">
+    <Rect id="Rect" y="{200}" color="#00ff00" width="60" height="20">
+        <y>
+            <SequentialAnimation running="true" repeat="true">
+            <NumericAnimation to="{200}" easing="easeOutBounce(amplitude:180)" duration="2000" />
+            <PauseAnimation duration="1000" />
+            </SequentialAnimation>
+        </y>
+    </Rect>
+    <!-- Velocity -->
+    <Rect x="{Rect.width}" color="#ff0000" width="{Rect.width}" height="20">
+        <y>
+            <Follow source="{Rect.y}" velocity="200"/>
+        </y>
+    </Rect>
+    <Text x="{Rect.width}" y="220" text="Velocity"/>
+    <!-- Spring -->
+    <Rect x="{Rect.width * 2}" color="#ff0000" width="{Rect.width}" height="20">
+        <y>
+            <Follow source="{Rect.y}" spring="1.2" damping="0.1"/>
+        </y>
+    </Rect>
+    <Text x="{Rect.width * 2}" y="220" text="Spring"/>
+    <!-- Follow mouse -->
+    <MouseRegion id="Mouse" anchors.fill="{parent}">
+        <Rect width="20" height="20" radius="10" color="#0000ff">
+            <x>
+                <Follow source="{Mouse.mouseX-10}" spring="1.0" damping="0.05"/>
+            </x>
+            <y>
+                <Follow source="{Mouse.mouseY-10}" spring="1.0" damping="0.05"/>
+            </y>
+        </Rect>
+    </MouseRegion>
+</Rect>
diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml
new file mode 100644
index 0000000..4fbf323
--- /dev/null
+++ b/examples/declarative/follow/pong.qml
@@ -0,0 +1,55 @@
+<Rect id="Page" width="640" height="480" color="#000000">
+    <!-- Make a ball to bounce -->
+    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
+        <properties>
+            <!-- Add a property for the target y coordinate -->
+            <Property name="targetY" value="{Page.height-10}"/>
+            <Property name="direction" value="right"/>
+        </properties>
+        <x>
+            <!-- Move the ball to the right and back to the left repeatedly -->
+            <SequentialAnimation running="true" repeat="true">
+                <NumericAnimation to="{Page.width-40}" duration="2000"/>
+                <SetPropertyAction target="{Ball}" property="direction" value="left"/>
+                <NumericAnimation to="20" duration="2000"/>
+                <SetPropertyAction target="{Ball}" property="direction" value="right"/>
+            </SequentialAnimation>
+        </x>
+        <y>
+            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
+            <Follow source="{Ball.targetY}" velocity="200"/>
+        </y>
+        <onTopChanged>
+            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
+            if (y &lt;= 0)
+                targetY = Page.height-20;
+            else if (y &gt;= Page.height-20)
+                targetY = 0;
+        </onTopChanged>
+    </Rect>
+    <!--
+    Place bats to the left and right of the view, following the y
+    coordinates of the ball.
+    -->
+    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
+        <y>
+            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
+        </y>
+    </Rect>
+    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
+        <y>
+            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
+        </y>
+    </Rect>
+
+    <!--
+    The rest, to make it look realistic, if neither ever scores...
+    -->
+    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
+    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
+    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
+    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
+    <Repeater dataSource="{24}">
+        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
+    </Repeater>
+</Rect>