[Linux] Clutter Demo

[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

[idle]

great I was just looking at clutter the other day.

[Poshu]

Thanks a lot!

[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:

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

[idle]

great thanks for sharing.

[remi_meier]

Nice example Poshu!

[Poshu]

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.

[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:

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()

[idle]

it opens up possibilities thanks

[remi_meier]

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

[Poshu]

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

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?

[idle]

To get at the image data from pb, you can use

Code: Select all

  *pbuffer = StartDrawing(ImageOutput(img))

[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 >.>

[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    

[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