Pluget Slyde
A. Dashboard (Project Management Panel)
Project Cards: Listed projects in cards with the background preview of the first page and the film strip (sprocket strip) motif.
Project Operations: The new project creation (+ New Project) allows you to open, delete projects, or download them as .psf files to the computer.
Import: Importing (Import): uploading an external .psf file to the browser and transfer it to the database.
Theme Changer: Switch between Dark (Dark) and Light (Light) themes.
B. Editor (Stage Editing Panel)
The editor screen consists of 4 main components:
Top Bar (Topbar):
Change the project name instantly.
Instant recording (Save).
Initiate/stopping live preview (Play / Pause).
Export the stage as MP4/WebM video (Export MP4).
Downloading the project in .psf format.
Page Panel (Pages Panel - Sol):
Lists the pages in the project.
Adding a new page executes the deleting of the current page and moving the page order up/down.
Stage and Time Bar (Stage Canvas & Timeline Scrubber - Medium):
The elements on the stage can be dragged and positioned directly with the mouse.
The time bar (Scrubber) on the bottom allows to manually roll forward/backward the animation flow of the active page on a second basis.
Right Control Panel (Properties & Settings): The panel on the right side consists of 5 different tabs:
Elements:
Adds standard and special geometric shapes: Triangle (3 edges), Quadrant (4 edges), Circle, Hexagon (6 edges) and $3-14 special polygons.
Adds media files: Photo (Image), Video and GIF upload.
Properties (Features):
Precision changes the X/Y position and Width/Height values of the selected element.
The rotation angle ($0"circ$), the corner rounding radius (Radius) and the Opacity settings control.
The color selector for the shapes offers the option to change resources for media elements.
Page (Page Settings):
He edits the page name.
The page adjusts the background in color or visual.
Once the animations are completed, it determines how long the page will stay on the screen (Hold Time).
Animation (Steps of Animation):
Define step-by-step animations to the elements (Fade In, Fade Out, Move, Scale, Rotate, Color).
It determines the duration of animation for each step and the waiting time before step (Gap Before).
The order of the steps can be changed with the buttons up/down.
Audio (Project Audio):
It loads the audio file that will play in the background in the whole project and sets the volume (Volume).
Three. Working Logic and Render Algorithms
Polygon and Figure Drawing Mathematics
Rounded PolygonPath (roundedPolygonPath): Instead of random sharp lines, tangent vectors (vnorm, vsub, vadd) and Quadratic Bezier curves are calculated and drawn softly.
Time Flow and Intro/Outro Calculation
All animation steps on a page are collected chronologically (getStepsTiming).
When the playbar is shifted or the time bar is swiped, the computeElementState function is called, the status of the element in the $t$ instant, size, rotation angle, transparency and color are calculated by the easeInOutQuad function.
MP4 / WebM Video Recording Process
A media stream of 30 FPS is captured from the Canvas scene (canvas.captureStream (30)).
If there is a background sound, audioprint is added to Canvas stream using AudioContext and createMediaStreamDestination via the Web Audio API.
According to the video encoder ranking supported by the browser (video/mp4, video/webm) MediaRecorder is started and the presentation is saved by setting frame and the file download is triggered.