diff options
author | Lionel Landwerlin <llandwerlin@gmail.com> | 2013-03-18 16:12:41 +0000 |
---|---|---|
committer | Lionel Landwerlin <llandwerlin@gmail.com> | 2013-03-18 16:25:07 +0000 |
commit | f8dfefa8f00a09311b6346518e22ed3ca35c2e33 (patch) | |
tree | a2093f3d4777ef425da00914d47a1d64ec175968 /examples | |
parent | 7a35d17cf501979859d22f5da28f6229be7275d6 (diff) | |
download | clutter-gst-f8dfefa8f00a09311b6346518e22ed3ca35c2e33.tar.gz |
examples: add a couple of javascript examples
Diffstat (limited to 'examples')
-rw-r--r-- | examples/Makefile.am | 12 | ||||
-rw-r--r-- | examples/video-flip.js | 241 | ||||
-rw-r--r-- | examples/video-wall.js | 181 |
3 files changed, 430 insertions, 4 deletions
diff --git a/examples/Makefile.am b/examples/Makefile.am index 6d60512..c9b1130 100644 --- a/examples/Makefile.am +++ b/examples/Makefile.am @@ -34,7 +34,11 @@ video_sink_navigation_LDFLAGS = \ $(GST_LIBS) \ $(top_builddir)/clutter-gst/libclutter-gst-@CLUTTER_GST_MAJORMINOR@.la -EXTRA_DIST = media-actions-pause.png \ - media-actions-start.png \ - vid-panel.png \ - README +EXTRA_DIST = \ + media-actions-pause.png \ + media-actions-start.png \ + vid-panel.png \ + video-wall.js \ + video-flip.js \ + README \ + $(NULL) diff --git a/examples/video-flip.js b/examples/video-flip.js new file mode 100644 index 0000000..3f2e074 --- /dev/null +++ b/examples/video-flip.js @@ -0,0 +1,241 @@ +/* + * Copyright (C) 2013 Intel Corporation + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General + * Public License along with this library; if not, write to the + * Free Software Foundation, Inc., 59 Temple Place, Suite 330, + * Boston, MA 02111-1307, USA. + */ + +(function() { + if ( typeof Object.prototype.uniqueId == "undefined" ) { + var id = 0; + Object.prototype.uniqueId = function() { + if ( typeof this.__uniqueid == "undefined" ) { + this.__uniqueid = ++id; + } + return this.__uniqueid; + }; + } +})(); + +const Lang = imports.lang; +const Mainloop = imports.mainloop; +const Gettext = imports.gettext; +const _ = imports.gettext.gettext; +const Tweener = imports.tweener.tweener; + +const Gio = imports.gi.Gio; +const GLib = imports.gi.GLib; +const Clutter = imports.gi.Clutter; +const ClutterGst = imports.gi.ClutterGst; +const Cairo = imports.cairo; +const Mx = imports.gi.Mx; + +const COLUMNS = 3; +const ROWS = 3; + +if (ARGV.length < 2) + throw "Need 2 argument : video-wall.js videofile1 videofile2"; + +Clutter.init(null, null); +ClutterGst.init(null, null); + + +let stage = new Clutter.Stage(); +stage.set_background_color(new Clutter.Color({ red: 0, + green: 0, + blue: 0, + alpha: 0xff })); +stage.connect('destroy', + Lang.bind(this, function() { Clutter.main_quit(); })); + +player1 = new ClutterGst.Playback(); +player1.set_filename(ARGV[0]); +player1.set_audio_volume(0); +player1.set_progress(0.20); + +player2 = new ClutterGst.Playback(); +player2.set_filename(ARGV[1]); +player2.set_audio_volume(0); +player2.set_progress(0.20); + +let animateActor = function(actor, params) { + let diffPropName = null; + + actor.save_easing_state(); + actor.set_easing_duration(params.duration); + actor.set_easing_mode(params.mode); + + for (let p in params.properties) { + let t = actor.get_transition(p); + if (t != null && t.is_playing()) + return true; + + if (actor[p] != params.properties[p]) { + actor[p] = params.properties[p]; + diffPropName = p; + } + } + + actor.restore_easing_state(); + + if (diffPropName != null && params.onCompleted) { + let transition = actor.get_transition(diffPropName); + actor.connect('transition-stopped::' + diffPropName, + Lang.bind(params.scope, function() { + params.onCompleted(actor); + })); + } + + return (diffPropName != null); +}; + +let actors = []; + +let positionActor = function(actorId) { + let actor = actors[actorId % actors.length]; + + let stageWidth = stage.get_width(); + let stageHeight = stage.get_height(); + + animateActor(actor, + { duration: 500, + mode: Clutter.AnimationMode.EASE_OUT_CUBIC, + properties: { + 'x': actor._myXPos * actor.width + (stageWidth / 2) - (COLUMNS * actor.width) / 2, + 'y': actor._myYPos * actor.height + (stageHeight / 2) - (ROWS * actor.height) / 2, + }, + }); + animateActor(actor._backActor, + { duration: 500, + mode: Clutter.AnimationMode.EASE_OUT_CUBIC, + properties: { + 'x': actor._myXPos * actor.width + (stageWidth / 2) - (COLUMNS * actor.width) / 2, + 'y': actor._myYPos * actor.height + (stageHeight / 2) - (ROWS * actor.height) / 2, + }, + }); +}; + +let positionActors = function() { + for (let i = 0; i < actors.length; i++) + positionActor(i); +}; + +for (let i = 0; i < ROWS; i++) { + for (let j = 0; j < COLUMNS; j++) { + let input = new Clutter.ActorBox({ x1: j / COLUMNS, + x2: (j + 1) / COLUMNS, + y1: i / ROWS, + y2: (i + 1) / ROWS, + }) + let actor = + new ClutterGst.Crop({ reactive: true, + cull_backface: true, + pivot_point: new Clutter.Point({ x: 0.5, + y: 0.5 }), + width: 200, + height: 200, + x: -200, + y: -200, + input_region: input, + player: player1, + }); + actor._backActor = + new ClutterGst.Crop({ reactive: false, + cull_backface: true, + pivot_point: new Clutter.Point({ x: 0.5, + y: 0.5 }), + rotation_angle_y: 180, + width: 200, + height: 200, + x: -200, + y: -200, + input_region: input, + player: player2, + }); + stage.add_child(actor); + stage.add_child(actor._backActor); + + actor._myXPos = j; + actor._myYPos = i; + actor._backActor._myXPos = j; + actor._backActor._myYPos = i; + + actors.push(actor); + + let animEnterParams = { + duration: 100, + mode: Clutter.AnimationMode.EASE_OUT_CUBIC, + properties: { + 'rotation-angle-y': 180, + }, + scope: this, + onCompleted: function(actor) { + if (actor._nextParams) { + actor._inAnimation = animateActor(actor, actor._nextParams); + actor._nextParams = null; + } else { + actor._inAnimation = false; + } + }, + }; + let animLeaveParams = { + duration: 100, + mode: Clutter.AnimationMode.EASE_OUT_CUBIC, + properties: { + 'rotation-angle-y': 0, + }, + scope: this, + onCompleted: function(actor) { + if (actor._nextParams) { + actor._inAnimation = animateActor(actor, actor._nextParams); + actor._nextParams = null; + } else { + actor._inAnimation = false; + } + }, + }; + + actor.connect('enter-event', Lang.bind(this, function(actor, event) { + if (!actor._inAnimation) { + actor._inAnimation = animateActor(actor, animEnterParams); + actor._backActor._inAnimation = animateActor(actor._backActor, animLeaveParams); + } else { + actor._nextParams = animEnterParams; + actor._backActor._nextParams = animLeaveParams; + } + })); + actor.connect('leave-event', Lang.bind(this, function(actor, event) { + if (!actor._inAnimation) { + actor._inAnimation = animateActor(actor, animLeaveParams); + actor._backActor._inAnimation = animateActor(actor._backActor, animEnterParams); + } else { + actor._nextParams = animLeaveParams; + actor._backActor._nextParams = animEnterParams; + } + })); + } +} + +stage.connect('allocation-changed', Lang.bind(this, function() { + positionActors(); +})); +stage.set_user_resizable(true); + +player1.set_playing(true); +player2.set_playing(true); + +stage.show(); + +Clutter.main(); diff --git a/examples/video-wall.js b/examples/video-wall.js new file mode 100644 index 0000000..66e5e82 --- /dev/null +++ b/examples/video-wall.js @@ -0,0 +1,181 @@ +/* + * Copyright (C) 2013 Intel Corporation + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General + * Public License along with this library; if not, write to the + * Free Software Foundation, Inc., 59 Temple Place, Suite 330, + * Boston, MA 02111-1307, USA. + */ + +const Lang = imports.lang; +const Mainloop = imports.mainloop; +const Gettext = imports.gettext; +const _ = imports.gettext.gettext; +const Tweener = imports.tweener.tweener; + +const Gio = imports.gi.Gio; +const GLib = imports.gi.GLib; +const Clutter = imports.gi.Clutter; +const ClutterGst = imports.gi.ClutterGst; +const Cairo = imports.cairo; +const Mx = imports.gi.Mx; + +const COLUMNS = 3; +const ROWS = 3; + +if (ARGV.length < 1) + throw "Need 1 argument : video-wall.js videofile"; + +Clutter.init(null, null); +ClutterGst.init(null, null); + + +let stage = new Clutter.Stage(); +stage.set_background_color(new Clutter.Color({ red: 0, + green: 0, + blue: 0, + alpha: 0xff })); +stage.connect('destroy', + Lang.bind(this, function() { Clutter.main_quit(); })); + +player = new ClutterGst.Playback(); +player.set_filename(ARGV[0]); +player.set_audio_volume(0); +player.set_progress(0.20); + +let actors = []; + +let repositionActor = function(actorId, duration) { + let actor = actors[actorId % actors.length]; + let subActor = actor.get_child_at_index(0); + + let stageWidth = stage.get_width(); + let stageHeight = stage.get_height(); + + actor.x = stageWidth / 2 - actor.width / 2; + actor.y = stageHeight / 2 - actor.height / 2; + + let initialYRotation = 45.0; + let initialXRotation = -45.0; + + actor.get_parent().set_child_below_sibling(actor, null); + + actor.save_easing_state(); + actor.set_easing_duration(duration); + actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC); + + subActor.save_easing_state(); + subActor.set_easing_duration(duration); + subActor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC); + + actor.translation_x = 0; + actor.translation_y = 0; + + actor.set_rotation_angle(Clutter.RotateAxis.Y_AXIS, + initialYRotation - 90 * actor._myXPos / (COLUMNS - 1)); + actor.set_rotation_angle(Clutter.RotateAxis.X_AXIS, + initialXRotation + 90 * actor._myYPos / (ROWS - 1)); + subActor.translation_z = -100 * (1 + COLUMNS); + + subActor.restore_easing_state(); + actor.restore_easing_state(); +}; + +let pushActorToFront = function(actorId, duration) { + let actor = actors[actorId % actors.length]; + let subActor = actor.get_child_at_index(0); + + let stageWidth = stage.get_width(); + let stageHeight = stage.get_height(); + + actor.save_easing_state(); + actor.set_easing_duration(duration); + actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC); + + subActor.save_easing_state(); + subActor.set_easing_duration(duration); + subActor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_CUBIC); + + actor.set_rotation_angle(Clutter.RotateAxis.Y_AXIS, 0); + actor.set_rotation_angle(Clutter.RotateAxis.X_AXIS, 0); + + actor.translation_x = actor._myXPos * actor.width + + (stageWidth / 2) - (COLUMNS * actor.width) / 2 - actor.x; + actor.translation_y = actor._myYPos * actor.height + + (stageHeight / 2) - (ROWS * actor.height) / 2 - actor.y; + subActor.translation_z = -50; + + subActor.restore_easing_state(); + actor.restore_easing_state(); +}; + +let repositionActors = function(duration) { + for (let i = 0; i < actors.length; i++) { + repositionActor(i, duration); + } +}; + +let pushActorsToFront = function(duration) { + for (let i = 0; i < actors.length; i++) { + pushActorToFront(i, duration); + } +}; + + +for (let i = 0; i < ROWS; i++) { + for (let j = 0; j < COLUMNS; j++) { + let input = new Clutter.ActorBox({ x1: j / COLUMNS, + x2: (j + 1) / COLUMNS, + y1: i / ROWS, + y2: (i + 1) / ROWS, + }) + let subActor = new ClutterGst.Crop({ width: 200, + height: 200, + player: player, + input_region: input, + }); + let actor = new Clutter.Actor(); + actor.add_child(subActor); + + actor._myXPos = j; + actor._myYPos = i; + + actor.set_pivot_point(actor._myXPos / (COLUMNS - 1), + actor._myYPos / (ROWS - 1)); + + stage.add_child(actor); + + actors.push(actor); + } +} + +stage.connect('allocation-changed', Lang.bind(this, function() { + pushActorsToFront(0); +})); +stage.set_user_resizable(true); + +player.set_playing(true); + +const ANIM_TIMEOUT = 1000; + +let inv = false; +Mainloop.timeout_add(ANIM_TIMEOUT + 500, Lang.bind(this, function() { + inv ? repositionActors(ANIM_TIMEOUT) : pushActorsToFront(ANIM_TIMEOUT); + inv = !inv; + return true; +})); + + +stage.show(); + +Clutter.main(); |