Programming object oriented interfaces and animations in JavaScript
Move the pointer of the mouse over the video.
Click in the video or press the space bar to start playing it. Click or press the space bar to pause it, to continue to play it.
Use the right and left arrows to move forward or backward by one second, press the Shift key or the Ctrl key at the same time to move forward or backward by ten seconds or a hundred milliseconds.
Press the 0 key to come back to the beginning.
Press the plus key to play the video faster, the minus key to play it slower, the asterisk key to come back to the normal speed.
NOTE: These commands are available for all types of clips.
Activate the sound.
IMPORTANT: The layout and the style of an interface are in the hands of the programmer. No graphical design is imposed.
The examples use the icons from Font Awesome.
Modify the width or the height of the video in pixels.
NOTE: The editor preserves the aspect ratio of the display and adjusts the other dimension automatically.
Invert the display horizontally or vertically.
Try a grayscale or a sepia effect.
Blur the display.
Modify the contrast, the brightness, the saturation, the tint of the video.
Type in a couple of words, e.g. Paris • London • .
Press Enter to validate the text. NOTE: The text is always displayed in capital letters.
Modify the size of the font.
Check the box to show the text in bold.
Change the font of the text by entering the name of a font from Google Fonts, e.g. Slackey or Righteous.
Choose the color of the text, e.g. #CB6.
Adjust the dimensions of the clip.
Change the numbers of seconds of the duration of the animation and the start delay.
Try different animation effects, e.g. linear ou ease-in-out.
NOTE: The animation runs two times alternating the direction of the rotation.
The total duration of the clip is equal to 2 times the duration of the animation + the start delay.
Click on the emblem to start the animation. Click again to pause it, to continue to play it.
REMINDER: The commands from the keyboard are effective for all types of clips.
Move the pointer of the mouse over the emblem.
Press the plus key to play the animation faster, the minus key to play it slower, the asterisk key to come back to the normal speed.
Click in the image to start the animation. Click again to stop it.
Move the pointer of the mouse over the image and press the space bar.
Drag the clip within the <div> which contains it with the mouse or with a finger on a touch screen.
Move the clip close to the right side of the <div>. Try resizing it.
Press the play button to start playing the audio.
Press the pause button to pause it.
Turn on or off playing the audio in a loop.
The player moves automatically to the next track if playing in a loop is turned off.
Click on the name of a track in the list to load it in the player.
An audio player can also load an audio file from the local disk, record an audio with a microphone, send a loaded or a recorded audio file to a server, delete an audio file from a server.
All functionalities are optional.
Click in the image.
Select a JPG, PNG, GIF or SVG file.
NOTE: The maximum size of the file is configured to 1 MB and the maximum width of the display to 320 px.
Move the pointer of the mouse over the image to display its dimensions.
Open a folder containing images with the explorer of your file system. Drag and drop a JPG, PNG, GIF or SVG file over the image.
Edit the width or the height of the image. The other value is automatically computed to preserve the aspect ratio of the image.
Try saving on your disk and loading the logo of Chrome, of Firefox or the acronym in SVG. NOTE: An SVG doesn't have a maximum size and its dimensions depend on the maximum width of the display (320 px).
Study the organization of the code of an editor which coordinates the exchanges between a data model, inspectors which edit the values of the model, a view which displays the state of the model in real time and a delegate in charge of automatically saving the data of the model.
Build an editor which lets the user load or drag and drop an image from the local disk, define its dimensions and upload the image and its dimensions to a remote server.
