Differences

This shows you the differences between two versions of the page.

--- webinterface:webinterface [2023/11/16 23:15] – [User Form] emcodem
+++ webinterface:webinterface [2024/10/01 21:54] (current) – [User Form] emcodem
@@ Line 7: / Line 7: @@
 ====Architecture====
-{{gallery>:webinterface:webint_system.png?600x600&800X800&lightbox}} \\ \\
+{{gallery>:webinterface:webint_system.png?600x200&800X800&lightbox}} \\ \\
 The design allows to run the webinterface in a separate network from Users and FFAStrans perspective.
 In Simple environments of course, the webinterface runs on the same server as FFAStrans does. \\ \\
@@ Line 36: / Line 36: @@
 __**Note:**__ : To access the WebInterface from another computer, don't forget to allow WebInterface app (Server.exe ->Node.js:Server-side Javascript) to communicate through the firewall. \\
-{{gallery>:webinterface:firewall_server-wi.png?300x300&800X800&lightbox}}
+{{gallery>:webinterface:firewall_server-wi.png?400x250&800X800&lightbox}}
 -------------------------------------
@@ Line 56: / Line 56: @@
 If your webserver(webinterface) runs on the same server as your main ffastrans server, open your web browser and type : **http://localhost:3002**
-{{gallery>:webinterface:webinterface_main_menu.png?900x900&1200X1200&lightbox&}}
+====Web Interface Overview====
+{{tutorials:webinterface_overview.mp4?link700}}
-\\
-**Details :**
-  *A: This is the job(s) running's window. You can see the job(s) in progress and the Estimated Time for Achievement(ETA).
-  *B: Finished jobs window (Error/Success ). Note that the Webinterface stores jobs into it's own database and it will automatically maintain itself to keep 20.000 Records.
-  *1: Instance name in case you have multiple installations
-  *2: Logout Button allows to exit from the current session. Only works when you activated "STATIC_USE_WEB_AUTHENTIFICATION" in Server configuration.
-  *3: Navigation Menu. Use the User manager to restrict the Items a user can access.
-  *4: Running Job's Toolbar allows to interact on the current job. Abort, Pause or Resume a job.
-  *5: Interacts with finished job(s). You can delete all history jobs list or delete only selected jobs.
 ----------------------------------
-==== Workflow Menu / Select Files / Start Jobs ====
+==== Status Page Details====
-The Workflow Menu allows users to select files from existing Server locations or upload new files and start Jobs. Use the User Configuration Manager to Filter which Workflows and Variables users are allowed to utilize.\\
+{{tutorials:status_menus.mp4?link700}}
-For the File upload, please note that this is only HTML5 file upload so it will be relatively slow and somewhat instable when it comes to Files bigger than some Gigabytes. Transferring huge files should be done using technologies that are intended for it (e.g. NFS, SMB, FTP etc...).
-{{gallery>:webinterface:webinterface_workflow_menu.png?900x900&1200X1200&lightbox}}
-**Details:**\\
-  * A: Browse window, make your file(s) selection here.
-  * B: Here is(are) the selected file(s).
-  * C: Choose your workflow in this window. Click on "Job Setup" to set the workflow selected(which monitor folder and which variables).
-  * 1:
-    * __Locations__: Select your different paths(Settings in Server Configuration).
-    * __Save Location__: Save the current location into Locations selector
-    * __Add Selected__: Add selected file(s)
-    * __Add all__: Add all files in actual folder.
-    * __Info__: Show path and file size.
-  * 2:
-    * __Add__: Enter full path to choose a file.
-    * __Delete__: Remove file(s) selected.
 ==== Manual Review ====
@@ Line 95: / Line 70: @@
 === Introduction to Manual Review ===
-{{:webinterface:manual_review_idea.jpg?600|}}
 Since Version 1.4 there is Manual review (Review Queue) Menu Item.
@@ Line 108: / Line 83: @@
   - Feature 2: Additionally create a Form using webui Form variables and get very sophisticated information from the user e.g. a MAM Metadata Form
+\\
 How it works:
@@ Line 114: / Line 91: @@
   * Optionally you can present a nice Form using webui form variables, after the user selected one option and before he starts the follow-up
+{{webinterface:manual_review_1.png?link700&800X800&lightbox}}\\
-{{:webinterface:webint_manual_rev.jpg?800|}}
+{{webinterface:manual_review_2.png?link700&800X800&lightbox}}\\
+{{webinterface:manual_review_3.png?link700&800X800&lightbox}}\\
 ==== User Form ====
 Regarding Job Submission from Webinterface, you can create a flexible Form for getting some userinputs.
-There is a GUI for creating and editing the look and feel of Form fields.
+Note that only variables that are actually used somewhere in the workflow are displayed as form fields on the webui. So after creating one webui variable, make sure to actually insert the created variable into some processor in the workflow (e.g. %s_webui_my_input%)
-{{:webinterface:form_vars_demo_.jpg?600|}}
+There is a GUI for creating and editing the look and feel of Form fields found on Webinterface in the "FFAStrans Admin"/Variables Section
+{{webinterface:form_vars_demo_.jpg?link700&800X800&lightbox}}
 The following types of userinput are supported:
@@ Line 165: / Line 144: @@
 </code>
-https://docs.dhtmlx.com/suite/form/api/text/api_text_properties/
+==== Segment submission and processing ====
-=== Submit all selected files into one job for concat/stitch ===
+Currently since Webint 1.4.0.38, you need to use the player to set in/out points.
+Of course your workflow must add support for this special type of source.
-In FFAStrans workflow editor - workflow properties, you can enter a workflow description. Add the keyword webui_stitch. If this word is found in the workflow description, all selected files are submitted as json array into s_source variable and you can use e.g. the "Foreach" Processor to process all Files separately.
+In case of segments, Webinterface will submit a special predefined variable called "o_source", this is a complex JSON object containing all the needed information.
-----------------------------------------
-==== User Manager Menu====
+**Simple example:**
+In this case, we just showcase a minimal workflow, due to the nature of ffmpeg "concat" functionality it will only work correctly with I-Frame only source files.
-{{gallery>:webinterface:webinterface_user_manager_menu.png?900x900&1200X1200&lightbox}}
+{{ :webinterface:emcodem_concat_1.4.3_ffmpeg_cuts_no_transcode.json |}}
-This menu is only useful if "STATIC_USE_WEB_AUTHENTIFICATION"(Server Configuration Menu) is enabled. \\
-The purpose is to filter Webinterface access rights based on users. Here is the procedure :
-  - Create first your groups (admin, users, monitoring,etc).
-  - Click on a group (admin for example) and assign rights (drag a grid row from left to right).
-  - Create admin user(name and password), click on it and drag a group from left to right to link user to a group.
-  - Repeat the procedure to link each user to his group.
+**More complex, frame accurate example:**
+This is a complex showcase where we use Avisynth to cut the segments frame accurately and after that, stitch all source files into one.
-You can use filters per group(filter rules), see inbuilt documentation for details.
+{{ :webinterface:emcodem_concat_1.4.3_avisynth_cuts.json |}}
--------------------------------------------
-==== Server Configuration Menu====
-{{gallery>:webinterface:webinterface_server_configuration_menu.png?900x900&1200X1200&lightbox}}
+==== Submit all selected files as array into one job for concat/stitch ====
-This menu allows to configure the Webinterface : Header name, browse locations, port number, etc. Click "Save" after making your settings.\\
+In FFAStrans workflow editor - workflow properties, you can enter a workflow description. Add the keyword webui_stitch. If this word is found in the workflow description, all selected files are submitted as json array into s_source variable and you can use e.g. the "Foreach" Processor to process all Files separately.
-See inbuilt documentation for settings details.\\
-(See [[webinterface#instance Name|Instance Name]] if your header's name is too large)
+  * Note that webui_stitch keyword in the workflow description will cause %s_source% variable to be a JSON array of file paths or URLs.
+----------------------------------------
+==== User Manager Menu====
+{{tutorials:users_manager.mp4?link700}}
+-------------------------------------------
------------------------------------------------
 ==== Scheduler Menu====
@@ Line 248: / Line 229: @@
 <code>http://localhost:3002/webinterface/components/login.html?username=admin&password=Passw0rd</code>
-== New documentation work in progress for webinterface Version 1.4 ==
+=== Jobstarter workflow control using URL Parameters since Version 1.4 ===
 [[webui_jobstarter]]
+=== Override CSS globally ===
+[[webui_alternate_server]]
+=== Retrieve username of logged in user who submitted a job from Webui ===
+If a job was submitted on WebUI Job Submitter page, this variable should carry the username of the logged in user:
+%s_job_submit_username%