Tutorials‎ > ‎

[Shoes] Create 'multimedia player' program

posted Aug 14, 2012, 5:18 AM by William Surya Permana   [ updated Aug 15, 2016, 11:25 PM by Surya Wang ]

Introduction

In the previous tutorial, we already discus about making shape maker program using Shoes. This time we will learn how to make a multimedia player program using Shoes, which can open, play, pause, stop, and set position of audio or video.

Video element

In shoes, we can open common audio and video file by using video element. For example: video 'stand by me.mp4' will draw video from a file named "stand by me.mp4" in the screen. Video element has following methods which you can use to manipulate the video:
Methods Parameter Explaination
Length   Get the total duration of the video
Playing?   Get the status of the video
Play   Play the video
Position   Get the video position in percent
Position Decimal Set the video position in percent
Length   Get the total duration of the video
Stop   Stop the video
Time   Get the video position in milliseconds
Time Number Set the video position in milliseconds
So, if you code @v = video 'stand by me.mp4' : @v.stop, your Ruby application will open the video named 'stand by me.mp4' and stopped it.

File chooser

You can also ask the user to pick the video s/he want to open by using ask_open_file. ask_open_file will open a file chooser dialog, and return the path of the file selected by user. So, if you code video ask_open_file, your Ruby application will open the video located in path of the file selected by user in file chooser dialog.

Output

Using Shoes, we can make a shape maker program like this:

There are 4 main buttons: Open, Play, Pause, and Stop to manipulate the video player and 4 other buttons: <<, <, >, and >> to skip back or forward the video. Beside that, there are also some labels indicating the current status, file source, and position of the video played; and a progress bar showing the current position of the video.

Codes

To create program like that, we can use this code:
Shoes.app :width => 640, :height =>480, :title=>'Shoes Multimedia Player' do style(Inscription, :stroke=>lime) background black stack do flow :height=>20 do inscription strong('Status : '), :font=>"Consolas" @status = inscription 'No audio/video selected.' end flow :height=>20 do inscription strong('File name: '), :font=>"Consolas" @filename = inscription '' end flow :height=>25 do inscription strong('Position : '), :font=>"Consolas" @position = inscription '(0:00:00 / 0:00:00)' end flow :height=>40 do inscription strong(' '), :font=>"Consolas" button '<<' do @v.time = 0 end button '<' do @v.time -= 5000 end @p = progress :width=>-280 button '>' do @v.time += 5000 end button '>>' do @v.time = @v.length end end end stack do every 1 do @posnowh = (@v.time/3600000).to_s @posnowm = (@v.time/60000%60).to_s @posnows = (@v.time/1000%60).to_s @posnowm = "0"+@posnowm if @posnowm.length < 2 @posnows = "0"+@posnows if @posnows.length < 2 @posnow = @posnowh+':'+@posnowm+':'+@posnows @maxpos = @v.length.to_s @maxposh = (@v.length/3600000).to_s @maxposm = (@v.length/60000%60).to_s @maxposs = (@v.length/1000%60).to_s @maxposm = "0"+@maxposm if @maxposm.length < 2 @maxposs = "0"+@maxposs if @maxposs.length < 2 @maxpos = @maxposh+':'+@maxposm+':'+@maxposs @position.text = '(' + @posnow + " / " + @maxpos + ')' @p.fraction = @v.position if @v.playing? == true @status.text = 'Playing' end if @v.playing? == false @status.text = 'Paused' if @v.time < @v.length @status.text = 'Stopped' if @v.time > @v.length end end end flow do button 'Open', :width=>50 do @fileinput = ask_open_file if @fileinput!=nil @v.stop if @filename.text!='' @v.remove if @filename.text!='' @filename.text = @fileinput @v = video @filename.text @v.style :width=>1.0 @v.style :height=>-135 @status.text = 'Stopped' @bpl.style :width=>50 @bpa.style :width=>0 @bst.style :width=>0 end end @bpl = button 'Play', :width=>0 do @v.play @bpl.style :width=>0 @bpa.style :width=>50 @bst.style :width=>50 end @bpa = button 'Pause', :width=>0 do @v.pause @bpl.style :width=>50 @bpa.style :width=>0 @bst.style :width=>50 end @bst = button 'Stop', :width=>0 do @v.stop @status.text = 'Stopped' @bpl.style :width=>50 @bpa.style :width=>0 @bst.style :width=>0 end end end

Explaination

In this code, we create an unresizable 640x480 window with “Shoes Multimedia Player” as its title. We create the window with color black as its background, and color lime as its default label (inscription) color.

Next, in line 5-37, we add some controls to the window: an unnamed inscriptions with bold text 'Status:', 'File name:', and 'Position:' in Consolas font, some other inscriptions named status, filename, and position, each in one flow. Below the status inscriptions above, there also 4 buttons: <<, <, >, and >> to set the video time to 0, subtract the video time with 5000 milliseconds, add the video time with 5000 milliseconds, and set the video time to the last (length of the video), respectively. We also add a progress bar named p.

In line 39-74, we create some statements which will be executed every one second. Those statements are, getting the current video position in milliseconds divided with 3600000 as posnowh string variable, modulus 60 of the current video position in milliseconds divided with 60000 as posnowm string variable, modulus 60 of the current video position in milliseconds divided with 1000 as posnows string variable. We also add leading zeroes to posnowm or posnows if they only have one digit. Then we save a new variable named posnow with format: "posnowh:posnowm:posnows". We also do the same with the length of the video (@v.length) to variables named maxposh, maxposm, maxposs, and maxpos. Then we set the position inscription text with format: "(psonow/maxpos)".

In line 75 and later, we add some buttons: Open (unnamed), Play (named bpl), Pause (named bpa), and Stop (named bst).
  • Open button will show a file chooser dialog and save it as fileinput variable. If fileinput is not null, it will stop and remove the current video played, set the filename inscription text with the fileinput path and open the video according to the path. We also set the status inscription text with 'Stopped', show the Play button, hide the Pause and Stop button;
  • Play button will play the video, hide the Play button, show the Pause and Stop button;
  • Pause button will pause the video, hide the Pause button, show the Play and Stop button;
  • Stop button will stop the video, show the Play button, hide the Pause and Stop button.
This is the end of the tutorial. Hope you can understand how to create a multimedia player program in Ruby language using Shoes GUI toolkit.
ċ
video.rb
(3k)
William Surya Permana,
Aug 14, 2012, 5:18 AM