Page 1 of 2

[Linux] Clutter Demo

Posted: Thu Jan 12, 2012 8:17 pm
by remi_meier
Another small demo showing a stage with two
clickable actors, a Rectangle and a Label.
Everything about Clutter:
http://www.clutter-project.org/

The files (with clutter imports):
http://remi.secretly.de/downloads/clutterdemo.tar.bz2

Re: [Linux] Clutter Demo

Posted: Thu Jan 12, 2012 10:47 pm
by idle
great I was just looking at clutter the other day.

Re: [Linux] Clutter Demo

Posted: Wed Jan 18, 2012 7:27 pm
by Poshu
Thanks a lot!

Re: [Linux] Clutter Demo

Posted: Sun Nov 04, 2012 1:23 pm
by Poshu
Clutter is both fun and powerfull, really!

Here is an example (a bit more showy) from tuxradar.com ported to purebasic:
Some alpha blended rectangles spinning and scaling, nothing much, but it could allow you to understand the timeline system:
Image

Code: Select all

XIncludeFile "Includes/clutter.pbi"
XIncludeFile "Includes/gobject.pbi"

EnableExplicit

Define.ClutterColor stage_color, Red,Green,Blue,Yellow,Cyan,Purple
Define *TimeLine.ClutterTimeline
Global.ClutterActor *rect1, *rect2, *rect3, *rect4, *rect5, *rect6, *stage
Global Rotation.d, Scale.d

 ;{ colors
With stage_color
	\alpha = 255
	\red = 0
	\blue = 0
	\green = 0
EndWith

With Red
	\alpha = 128
	\red = 255
	\blue = 0
	\green = 0
EndWith

With Green
	\alpha = 128
	\red = 0
	\blue = 0
	\green = 255
EndWith

With Blue
	\alpha = 128
	\red = 0
	\blue = 255
	\green = 0
EndWith

With Yellow
	\alpha = 128
	\red = 255
	\blue = 0
	\green = 255
EndWith

With Cyan
	\alpha = 128
	\red = 0
	\blue = 255
	\green = 255
EndWith

With Purple
	\alpha = 128
	\red = 255
	\blue = 255
	\green = 0
EndWith
;} 

Procedure CreateRect(*Color.ClutterColor)
	Protected *Rect.ClutterActor
	*Rect = clutter_rectangle_new_with_color(*Color)
    clutter_actor_set_size(*Rect, 256, 128)
    clutter_actor_set_position(*rect, 256,256)
    clutter_container_add_actor(*stage, *rect)
    clutter_actor_set_anchor_point(*rect, 128, 64)
    clutter_actor_show(*rect)
	ProcedureReturn *Rect
EndProcedure

Procedure.d Clamp(Value.d,Minval.d,Maxval.d)
	If Value > Maxval
		value = Maxval
	ElseIf  value	< Minval
		Value = Minval
	EndIf
	
	ProcedureReturn Value
EndProcedure

Procedure.d Hermite(Value1.d,tangent1.d,Value2.d,tangent2.d,amount.d)
	Protected.d AmountSquared = amount * amount, AmountCubed.d = AmountSquared * amount, Result
	If amount = 0.0
		Result = Value1
	ElseIf  amount = 1.0
		result = value2
	Else
		result = (2 * value1 - 2 * value2 + tangent2 + tangent1) * AmountCubed + (3 * value2 - 3 * value1 - 2 * tangent1 - tangent2) * AmountSquared + tangent1 * amount + value1
	EndIf
	ProcedureReturn Result
EndProcedure

Procedure.d Smoot_Step(Value1.d,Value2.d,Amount.d)
	Protected Result = Clamp(Amount,0.0,1.0)
	result = hermite(value1, 0.0, value2, 0.0, result)
	ProcedureReturn Result
EndProcedure

Procedure.d Smoot_Step2(Value1.d,Value2.d,Amount.d)
	Protected Result.d
	If Amount > 0.5
		Result = hermite(value2, 0, value1, 0, (Amount - 0.5) * 2)
	Else
		Result  = hermite(value1, 0, value2, 0, Amount* 2)
	EndIf
	
	ProcedureReturn Result
EndProcedure

Procedure on_stage_button_press(*Stage.ClutterStage,*Event,*Data_)
	Protected.f X,Y
	
	clutter_event_get_coords(*Event,@X,@Y)
	
	Protected *Clicked. ClutterActor = clutter_stage_get_actor_at_pos(*Stage,#CLUTTER_PICK_ALL,x,y)
	
	If *Clicked <> *stage
		clutter_actor_hide(*Clicked)
	EndIf
EndProcedure

Procedure On_Timeline_New_Frame(*TimeLine.ClutterTimeline,Frame_Num.i,*Data_)
	Rotation + 0.3
	
	clutter_actor_set_rotation(*rect1,#CLUTTER_Z_AXIS,Rotation*5,0,0,0)
	clutter_actor_set_rotation(*rect2,#CLUTTER_Z_AXIS,Rotation*4,0,0,0)
	clutter_actor_set_rotation(*rect3,#CLUTTER_Z_AXIS,Rotation*3,0,0,0)
	clutter_actor_set_rotation(*rect4,#CLUTTER_Z_AXIS,Rotation*2,0,0,0)
	clutter_actor_set_rotation(*rect5,#CLUTTER_Z_AXIS,Rotation,0,0,0)
	clutter_actor_set_rotation(*rect6,#CLUTTER_Z_AXIS,Rotation*0.5,0,0,0)
	
	Protected Scale_Amount.f
	
	scale + 0.01
	
	If Scale > 1.0
		Scale = 0
	EndIf
	
	Scale_Amount = Smoot_Step2(1.0,2.0,scale)
	clutter_actor_set_scale(*rect1, scale_amount, scale_amount)
	clutter_actor_set_scale(*rect2, scale_amount, scale_amount)
	clutter_actor_set_scale(*rect3, scale_amount, scale_amount)
	clutter_actor_set_scale(*rect4, scale_amount, scale_amount)
	clutter_actor_set_scale(*rect5, scale_amount, scale_amount)
	clutter_actor_set_scale(*rect6, scale_amount, scale_amount)
		
EndProcedure

clutter_init(0,0)
*stage= clutter_stage_get_default()
clutter_actor_set_size(*stage,512,512)
clutter_stage_set_color(*stage,@stage_color)
*rect1 = CreateRect(Red)
*rect2 = CreateRect(Green)
*rect3 = CreateRect(Blue)
*rect4 = CreateRect(Yellow)
*rect5 = CreateRect(Cyan)
*rect6 = CreateRect(Purple)
g_signal_connect_data(*stage,"button-press-event",@on_stage_button_press(),#Null,#Null,#Null)

*TimeLine = clutter_timeline_new(60)
g_signal_connect_data(*TimeLine, "new-frame",@On_Timeline_New_Frame(),#Null,#Null,#Null)
clutter_timeline_set_loop(*TimeLine,#True)
clutter_timeline_start(*TimeLine)

clutter_actor_show(*stage)

clutter_main()
You should try it too :wink:

Re: [Linux] Clutter Demo

Posted: Sun Nov 04, 2012 6:58 pm
by idle
great thanks for sharing.

Re: [Linux] Clutter Demo

Posted: Tue Nov 06, 2012 10:12 pm
by remi_meier
Nice example Poshu! :)

Re: [Linux] Clutter Demo

Posted: Wed Nov 07, 2012 11:18 am
by Poshu
remi_meier wrote:Nice example Poshu! :)
Your magical import did all the work, and converting my work from the awful Direct2D api to clutter is faster than expected.

I'm toying with the idea to make a few functions and a documentation file dedicated to purebasic users (once I get everything... Which is not the case right now). Would it be possible to make a windows import? (I don't even have a windows partition on my comp anymore to try...)
Until then, anyone interested might take a look at this guide. It's easy to read and give quite the basic knowledge.

Re: [Linux] Clutter Demo

Posted: Mon Nov 12, 2012 4:39 pm
by Poshu
Here is another clutter demo, ported from the aforementioned guide (... someone else beside idle and myself will consult this thread if I keep on bumping it up è_é ):
An editable text with line wrap feature in a mere 69 lines:
Image

Code: Select all

XIncludeFile "Includes/clutter.pbi"
XIncludeFile "Includes/gobject.pbi"

EnableExplicit

Define.ClutterActor *Stage, *Text, *EditableText
Define.ClutterColor Actor_Color, Stage_Color
Define.f Min_Height, Natural_Height

Procedure ClutterColor(*Color.ClutterColor,R,G,B,A)
	With *Color
		\alpha = A
		\blue = B
		\green = G
		\red = R
	EndWith
EndProcedure

ClutterColor(Stage_Color,0,0,0,255)
ClutterColor(Actor_Color,$ff,$ff,$cc,$ff)

clutter_init(#Null,#Null)
; Get the stage and set its size and color:
*Stage = clutter_stage_get_default()
clutter_actor_set_size(*Stage,800,200)
clutter_stage_set_color(*Stage,Stage_Color)

;Add a non-editable text actor to the stage:
*Text = clutter_text_new()

;Setup text properties:
clutter_text_set_color(*Text,Actor_Color)
clutter_text_set_text(*Text,"Non-editable text: Wizard imps and sweat sock pimps, interstellar mongrel nymphs.")
clutter_text_set_font_name(*Text,"Sans 12")
clutter_text_set_editable(*Text,#False)
clutter_text_set_line_wrap(*Text,#False)

;Discover the preferred height and use that height:
clutter_actor_get_preferred_height(*Text,750,@Min_Height,@Natural_Height)
clutter_actor_set_size(*Text,750,Natural_Height)

clutter_actor_set_position(*Text,5,5)
clutter_container_add_actor(*Stage,*Text)
clutter_actor_show(*Text)

;Add a multi-line editable text actor to the stage:
*EditableText = clutter_text_new()

;Setup text properties:
clutter_text_set_color(*EditableText, actor_color)
clutter_text_set_text(*EditableText,"Editable text: And as I sat there brooding on the old, unknown world, I thought of Gatsby's wonder when he first picked out the green light at the end of Daisy's dock. He had come a long way to this blue lawn and his dream must have seemed so close that he could hardly fail To grasp it. He did Not know that it was already behind him, somewhere back in that vast obscurity beyond the city, where the dark fields of the republic rolled on under the night.")
clutter_text_set_font_name(*EditableText, "Sans 12")
clutter_text_set_editable(*EditableText, #True)
clutter_text_set_line_wrap(*EditableText, #True)

;Discover the preferred height and use that height:
clutter_actor_get_preferred_height(*EditableText,750,@Min_Height,@Natural_Height)
clutter_actor_set_size(*EditableText, 750, natural_height)

clutter_actor_set_position(*EditableText, 5, 50)
clutter_container_add_actor(*Stage,*EditableText)
clutter_actor_show(*EditableText)

;Set focus To handle key presses on the stage:
clutter_stage_set_key_focus(*Stage,*EditableText)

clutter_actor_show(*stage)

clutter_main()

Re: [Linux] Clutter Demo

Posted: Mon Nov 12, 2012 7:03 pm
by idle
it opens up possibilities thanks

Re: [Linux] Clutter Demo

Posted: Mon Nov 12, 2012 7:50 pm
by remi_meier
Poshu wrote:I'm toying with the idea to make a few functions and a documentation file dedicated to purebasic users (once I get everything... Which is not the case right now). Would it be possible to make a windows import? (I don't even have a windows partition on my comp anymore to try...)
That could be very helpful!
Unfortunately I don't have the time and the patience to make
it work on Windows... The last version of the import generator
is here: http://remi.secretly.de/downloads/gir2pb.py
There is a comment in there about the 'long' data type which
must be translated differently on Windows and also the latest
addition, structure member alignment, might be different on
Windows.
Somebody with a bit of patience might be able to make it work
on Windows very fast. IIRC, somebody already used part of
the generated imports on Win32, where they should work
nearly out of the box.

cheers!
Remi

Re: [Linux] Clutter Demo

Posted: Mon Nov 12, 2012 8:22 pm
by Poshu
remi_meier wrote: That could be very helpful!
Unfortunately I don't have the time and the patience to make
it work on Windows... The last version of the import generator
is here: http://remi.secretly.de/downloads/gir2pb.py
There is a comment in there about the 'long' data type which
must be translated differently on Windows and also the latest
addition, structure member alignment, might be different on
Windows.
Somebody with a bit of patience might be able to make it work
on Windows very fast. IIRC, somebody already used part of
the generated imports on Win32, where they should work
nearly out of the box.

cheers!
Remi
Clutter need 3D capabilities, which make using it with a virtualized windows hard... I'll try to install bootcamp on my macbook air to see if I can do something but keep in mind I don't understand what I'm doing :shock:

Well, right now I'm trying to understand something: it's easy to create a texture actor from file (using clutter_texture_new_from_file()) but I'd like to create a texture with an image I've loaded through purebasic functions, using clutter_texture_set_from_rgb_data() the second argument is "data : image data in RGBA type colorspace. [array]" so... Anyone know how to get this from an image loaded through pb's native image functions?

Re: [Linux] Clutter Demo

Posted: Mon Nov 12, 2012 9:06 pm
by idle
To get at the image data from pb, you can use

Code: Select all

  *pbuffer = StartDrawing(ImageOutput(img))

Re: [Linux] Clutter Demo

Posted: Tue Nov 13, 2012 2:17 am
by Poshu
Here is the next example, about behaviour (So I can justify another post for my stupid questions...). You'll see a rectangle moving around the window just with coordinates :3

Code: Select all

XIncludeFile "Includes/clutter.pbi"
XIncludeFile "Includes/gobject.pbi"

EnableExplicit

Define *Rect.ClutterActor, *stage.ClutterActor, *Alpha.ClutterAlpha, *Timeline.ClutterTimeline, *Behaviour.ClutterBehaviour
Define. ClutterColor stage_color, rect_color
Dim Knot.ClutterKnot(4)

Procedure ClutterColor(*Color.ClutterColor,R,G,B,A)
	With *Color
		\alpha = A
		\blue = B
		\green = G
		\red = R
	EndWith
EndProcedure

Procedure.d On_Alpha(*Alpha.ClutterAlpha,*Pointer) ;This must return a value between 0 and 1.0. This will be called as many times per seconds as specified in our call to clutter_timeline_new().
	Protected *TimeLine.ClutterTimeline
	;Get the position in the timeline,so we can base our value upon it:
	*TimeLine = clutter_alpha_get_timeline(*Alpha)
	ProcedureReturn clutter_timeline_get_progress(*TimeLine)
EndProcedure

ClutterColor(stage_color,$0,$0,$0,$ff)
ClutterColor(rect_color,$ff,$ff,$ff,$99)

clutter_init(#Null,#Null)

;As always, get the stage, add a rectange, blah blah, we're getting used to it, right?
*Stage = clutter_stage_get_default()
clutter_actor_set_size(*stage,200,200)
clutter_stage_set_color(*stage,stage_color)

*Rect = clutter_rectangle_new_with_color(rect_color)
clutter_actor_set_size(*Rect,40,40)
clutter_actor_set_position(*Rect,10,10)
clutter_container_add_actor(*stage,*Rect)
clutter_actor_show(*Rect)

clutter_actor_show(*stage)

; Create a looping timeline and start it:
*Timeline = clutter_timeline_new(5000)
clutter_timeline_set_loop(*Timeline,#True)
clutter_timeline_start(*Timeline)

; Use the On_Alpha Callback:
*Alpha = clutter_alpha_new_with_func(*Timeline,@On_Alpha(),#Null,#Null)

Knot(0)\x = 10
Knot(0)\y = 10
Knot(1)\x = 10
Knot(1)\y = 150
Knot(2)\x = 150
Knot(2)\y = 150
Knot(3)\x = 150
Knot(3)\y = 10
Knot(4)\x = 10
Knot(4)\y = 10

*Behaviour = clutter_behaviour_path_new_with_knots(*Alpha,@Knot(),1+ArraySize(Knot()))
clutter_behaviour_apply(*Behaviour,*Rect)
g_object_unref(*Timeline)

clutter_main()
Now for what I wanted to say:
@idle: Even with your PM I can't get it to work, mostly because I've no idea what this array should be... An actual array? 3 dimensions (or 4 with alpha)? If so, it's going to be quite slow to make the conversion for each image... I guess >.>

Re: [Linux] Clutter Demo

Posted: Tue Nov 13, 2012 2:58 am
by idle
Now for what I wanted to say:
@idle: Even with your PM I can't get it to work, mostly because I've no idea what this array should be... An actual array? 3 dimensions (or 4 with alpha)? If so, it's going to be quite slow to make the conversion for each image... I guess >.>
Ok try this. I wan't implying that you loop through the data to convert it into a buffer, it was just showing you that it was getting the buffer
as long as the images are 24 or 32 bit the function should work. I'm not sure what your supposed to use instead of that function since
it's depreciated?

Code: Select all

Procedure SetTexture(*texture,img,flags)
    Protected Width,Height,HasAlpha,*pBuffer,RowStride,bpp  
    Width  = ImageWidth(img) 
    Height =  ImageHeight(img) 
    bpp = ImageDepth(img)
    If bpp = 32
       HasAlpha = 1
    EndIf 
    StartDrawing(ImageOutput(img))
   *pBuffer = DrawingBuffer() 
    RowStride = DrawingBufferPitch() 
    result = clutter_texture_set_from_rgb_data_(*texture,*pBuffer,HasAlpha,Width,Height,RowStride,bpp,flags,0)
    StopDrawing()
    ProcedureReturn result 
EndProcedure    

Re: [Linux] Clutter Demo

Posted: Tue Nov 13, 2012 12:06 pm
by Guimauve
Hello everyone,

I have just try to test the remi_meier's examples but I get "Linker error" on libs :
  • -lclutter-glx-1.0
    -lcogl-pango
    -ljson-glib-1.0
    -lcogl
LinuxMint 13 x64 + Cinnamon (1.4-UP3)
PureBasic 5.00 x64

Best regards
Guimauve