FFAStrans wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Webinterface ======

====Introduction====

The Webinterface allows you to give users controlled access to submit and view Jobs without the need for the user to have permissions or network access to the Storages or to the FFAStrans server itself.\\

====Architecture====

{{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. \\ \\
The number of logged in users does not influence how often the Data from FFAStrans is requested so your production server is safe from a possible overload by too many users.

-------------------------------------

====Installation====

Installing the Webinterface as a service is optional, you can also just execute "server.exe" for testing. \\ \\

__**Note:**__ It is recommended to extract the installation package in the same folder than FFAStrans folder. \\
\\
Example location:
<code>C:\FFAStrans\Webinterface</code>

To install Webinterface, follow this procedure :
  * Unzip package.
  * open folder unzipped and start "Service_Install.bat".
  * Authorize Service Installation by clicking "yes".
  * Wait for the service to start.
  * Once started, hit a key to close prompt window.

The Webinterface Windows Service is now running and called "FFAStrans Webinterface".\\
You should be able to access it in your Browser on http://localhost:3002 \\ \\

__**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?400x250&800X800&lightbox}}
-------------------------------------


-----------------------

==== Configuration ====

**__IMPORTANT__:** By default, Windows Service will be installed with standard Local System User. It is recommended to configure the Windows Service to run under different credentials so it can access UNC or SAN Locations of the Media Files.\\
 If you change the credentials, make sure that the new user also has Administrative rights on the machine in order to write files to the installation directory (Database).

------------------------------------

====Main Menu====

If your webserver(webinterface) runs on the same server as your main ffastrans server, open your web browser and type : **http://localhost:3002** 

====Web Interface Overview====
{{tutorials:webinterface_overview.mp4?link700}}

----------------------------------

==== Status Page Details====

{{tutorials:status_menus.mp4?link700}}


==== Manual Review ====

=== Introduction to Manual Review ===



Since Version 1.4 there is Manual review (Review Queue) Menu Item.
The intention is to "stop" the FFAStrans Workflow at a certain point and ask a human how to go on. 

It can bring up a sophisticated html form for userinput for Jobs that are sent into waiting state (if there is any workflow using the feature). 


 
We have 2 different features here, for many usecases using only the first one will suffice. 
  - Feature 1: Just connect 2 or more Follow up processors directly to the Manual Review output pin, the user can select only one of them
  - 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:

  * Insert the plugin processor "Manual Review" in your workflow at the spot where you want it to stop and ask user for input. 
  * The webui user will see one option to choose from for each output processor you connect on output of Manual Review processor. 
  * 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: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.

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

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:
  * Text input (https://docs.dhtmlx.com/suite/form/api/input/api_input_properties/)
  * Text area (https://docs.dhtmlx.com/suite/form/api/textarea/api_textarea_properties/)
  * Text display (https://docs.dhtmlx.com/suite/form/api/text/api_text_properties/)
  * Checkbox (https://docs.dhtmlx.com/suite/form/api/checkbox/api_checkbox_properties/)
  * Select (https://docs.dhtmlx.com/suite/form/api/select/api_select_properties/)
  * Combo Select (https://docs.dhtmlx.com/suite/form/api/combo/api_combo_properties/)
  * Radiobox (https://docs.dhtmlx.com/suite/form/api/radiogroup/api_radiogroup_properties/)
  * Date Picker (https://docs.dhtmlx.com/suite/form/api/calendar/api_calendar_properties/)
  * Time Picker (https://docs.dhtmlx.com/suite/form/api/timepicker/api_timepicker_properties/)
  * Slider (https://docs.dhtmlx.com/suite/form/api/slider/api_slider_properties/)

Common Properties:
  * Merit: If your workflow uses multiple Form variables, Merit defines the Vertical Position of the Input Field.
  * Label: The label (text on the left) is not vey flexible, e.g. you cannot make colors. It supports top/left position and you can modify the label width. It is best to keep all label widths the same if your workflow has multiple inputs

Calendar Date Format (https://docs.dhtmlx.com/suite/calendar/configuring/#date-format):

<code>
  * %d	day as a number with leading zero, 01..31
  * %j	day as a number, 1..31
  * %D	short name of the day, Su Mo Tu...
  * %l	full name of the day, Sunday Monday Tuesday...
  * %m	month as a number with leading zero, 01..12
  * %n	month as a number, 1..12
  * %M	short name of the month, Jan Feb Mar...
  * %F	full name of the month, January February March...
  * %y	year as a number, 2 digits
  * %Y	year as a number, 4 digits
  * %h	hours 12-format with leading zero, 01..12)
  * %g	hours 12-format, 1..12)
  * %H	hours 24-format with leading zero, 00..23
  * %G	hours 24-format, 0..23
  * %i	minutes with leading zero, 01..59
  * %s	seconds with leading zero, 01..59
  * %a	am or pm
  * %A	AM or PM
  * %u	milliseconds
</code>

==== Segment submission and processing ====

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 case of segments, Webinterface will submit a special predefined variable called "o_source", this is a complex JSON object containing all the needed information. 


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

{{ :webinterface:emcodem_concat_1.4.3_ffmpeg_cuts_no_transcode.json |}}



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

{{ :webinterface:emcodem_concat_1.4.3_avisynth_cuts.json |}}




==== Submit all selected files as array into one job for concat/stitch ====

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.

  * 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====

{{gallery>:webinterface:scheduler.png?900x900&1000X1000&lightbox}}

Scheduled jobs are used to start workflows in a specific frequency, compareable to the Windows Task Scheduler.\\
The Idea is to start jobs on a specified frequency instead of starting a job manually or at the arrival of a new file in a watchfolder.\\
The "Condition" is a key part, it allows you to run a Script before a job is actually started in order to check if the Job actually needs to be started. 
By default, if you do not care about the condition, your workflow will just be started in the provided frequency. You can however alter the condition script in a way that it "checks" if a new job need to be started. So in the end if you have a complex starting condition like the arrival of multiple files in the same folder or such, you are able to provide your own logic to check if a new job shall be started or not.

\\
Example usages: \\
  * Delete Files every Night
  * Compare 2 directories and start a job for all files missing in directory 2
  * Implement your own watchfolder when the built in one does not act as you wish



-----------------------------------------------

==== Tipps and Tricks ====

=== Instance Name ===

If you want to enter a long or colorful Instance name, you can use html in the Server Administration Menu:
<code> <span style="font-size:10px">VERY LONG NAME OF MY INSTANCE</span></code>

=== Direct Access to Pages ===

You can give users direct access to the single pages of the Webinterface, e.g. if you want to display the Jobs on a Monitor, you would just enter the direct url to the Jobs:\\
<code>http://localhost:3002/webinterface/components/jobviewer.html</code>

\\
Another example that allows users to open directly the Jobstarter Interface:
<code>http://localhost:3002/webinterface/components/jobstarter.html</code>

\\
The jobstarter.html even allows you to automatically add a file to the list of to be submitted files:
<code>http://localhost:3002/webinterface/components/jobstarter.html?file=YOURFILE_OR_URL_OR_WHATEVER</code>
This allows an administrator to configure easy job start tools for his users, e.g. by adding a context menu item to the windows registry.

=== Automatic Login ===
For auto logon, you can provide username and password using URL-parameters on the login page.
\\
For example, you can save a link like that in your bookmarks and it will always automatically log you in.

<code>http://localhost:3002/webinterface/components/login.html?username=admin&password=Passw0rd</code>

=== 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%