WebView

SmartSignage has the WebView since version 2.1. WebView reads the URL file containing the website address and displays the website. The URL file is placed in the SmartSignage data folder. When the web page is displayed, you can operate it with a mouse.
You can change the display behavior by adding settings to the URL file. The following items can be set. Websites that require a login can also be displayed using WebView’s automatic login function.

  • Show or hide scrollbars
  • Whether to load the page at the start of the display or to load it in advance
  • Zoom in / out
  • Position (move the position within SmartSignage)
  • Size as web browser
    - Partial display is possible when used in combination with position
  • Specifying user name and password for BASIC authentication - version 2.3 or later -
  • Specifying user name and password for automatic login using built-in JavaScript - version 2.3 or later -
  • Specifying the element ID for automatic login using the built-in JavaScript - version 2.3 or later -
  • Specifying a JavaScript file to execute - version 2.3 or later -
  • Specifying the delayed execution time of JavaScript - version 2.3 or later -

The following functions have been added from Ver.2.8.3.

  • Save cookies - Ver.2.8.3 or later -
  • Specify display priority language - Ver.2.8.3 or later -
  • If a new window or tab is opened when clicked, transition to that URL - Ver.2.8.3 or later -

Also, from Ver.2.8.3, the web view is now focused just before executing the specified or built-in JavaScript. It is possible to execute JavaScript that requires focus movement.
The focus is only on one place at a time within one app. Contents that continuously switches web displays may not behave as expected.

Refer to Additional Settings for details on how to make these settings.

SmartSignage’s WebView uses QtWebEngine. It is based on Chromium, so it can display many pages that can be viewed in Google Chrome. However, some functions such as H.264 format video playback do not work. (Depends on the standard QtWebEngine function.)

Notes on using WebView

Each website is copyrighted. When displaying a website, be careful not to infringe the copyright of that site. In particular, if you cut and display a part, please be aware that you may have infringed the copyright unintentionally. Fukuneko Inc. is not responsible for any other issues, including issues or lawsuits resulting from the display of web content or other content.

Create URL file

URL files can be created in some ways.

Use a web browser

If you use Google Chrome, Firefox or Microsoft Edge latest version, you can easily create a URL file. It can not be created with Microsoft Edge legacy version.

  1. Open a page using a web browser.
    At this time, the web browser is windowed so that the desktop can be seen.

  2. Drag and drop the icon on the left side of the web browser’s address bar to the desktop.

  3. The URL file is created on the desktop.
    The file name is the title of the web page with the extension .url. However, the extension .url is invisible on the desktop and the file explorer.

Even in Ubuntu, desktop environments such as GNOME can be created in the same way. The file extension created is .desktop instead.

Create shortcut on Windows

In Windows shortcut creation, you can create a URL file.

  1. On the desktop, select “New” > “Shortcut” from the context menu displayed by right-clicking.

  2. The Create Shortcut Wizard is shown.

  3. Enter the URL of the web page you want to view in the “Type the location of the item:” input field.
    The URL is an address starting with http:// or https://. For example, when displaying the page of Fukuneko Inc., it looks like http://www.fukuneko.com/.
    After input, press the “Next” button.

  4. Enter any name in the “Type a name for this shortcut:” input field.
    The name entered here will be the file name. After entering, push the “Finish” button.

  5. The URL file is created on the desktop.
    Double-click the file to launch the browser for confirmation. This file also has the .url extension, but it is invisible on the desktop or file explorer. After entering, push the “Finish” button.

Create with a text editor

URL files are text files in INI format, so they can be created using any text editor. You can use files created in Windows with the Ubuntu version of SmartSignage, or files created with Ubuntu in Windows.

On Windows

You can use Notepad on Windows. All you need is the section [InternetShortcut] and the URL entry.

The method to create a link file to the homepage of Fukuneko Inc. using Notepad is as follows.

  1. Run Notepad.

  2. Type [InternetShortcut] on the first line, and line break.

  3. Type URL=http://wwww.fukuneko.com/ on the second line.
    The contents are as follows.

    [InternetShortcut]
URL=http://wwww.fukuneko.com/

  4. Select “Save As” from the menu.

  5. A dialog box will be shown, so select an arbitrary save destination.

  6. Select “All Files (*. *)” As the file type, and select “UTF-8” as the encoding.

  7. Type the file name fukuneko_site.url. Be sure to use the extension .url.

  8. When “Save” is pressed, a URL file is created.
    The created file can not see the extension .url on the desktop or file explorer. Double-click the file to launch a browser and check the link destination.

On Ubuntu

On Ubuntu, use any text editor. (Eg Vim etc)
All you need is the [Desktop Entry] section, the Type entry, and the URL entry.
The method to create a link file to the homepage of Fukuneko Inc. using Notepad is as follows.

  1. Run your text editor.

  2. Type [Desktop Entry] on the first line, and line break.

  3. Type Type=Link on the second line, and line break.

  4. Type URL=http://wwww.fukuneko.com/ on the third line.
    The result is the following:

    [Desktop Entry]
Type=Link
URL=http://wwww.fukuneko.com/

  5. Give it a name and save it.名前は、The name should end with the .desktop extension, as in fukuneko_site.desktop.
    This created file can not see the extension .desktop on the desktop.
    Double-click the file to launch the browser and check the link destination.

Additional Settings

You can change the WebView behavior by adding settings to the URL file.
The way is to add the [Fdse] section to the URL file and add the necessary entries.
Use the following as entries:

  • ScrollBars ….. true | false [DEFAULT: false]
    Sets whether to show or hide the scroll bars. In the case of true, the scroll bar is displayed. If it is false it will be hidden. The default is hidden with false.

  • LoadOnStart ….. true | false [DEFAULT: false]
    Set whether to load the page at the start of display. If you set true, the page will be loaded after switching to web content. false will load the page when the previous content is displayed.
    You may want to set it to true when dealing with pages such as animations that start at the same time as loading the page.

  • ZoomFactor ….. Scaling factor. Range of 0.1 to 5.0 [Default is 1.0 and no zoom]
    Display the page enlarged or reduced. As it is scaled based on the upper left, if you want to display the desired position, adjust along with the display position and size.

  • Top ….. Display position “top”. Specified in pixel units. [Default is 0]
    The top of SmartSignage is 0. The numbers increase bottomward. The numbers decrease topwards. Setting a negative value will cause the display to be truncated at the top.

  • Left ….. Display position “left”. Specified in pixel units. [Default is 0]
    The left of SmartSignage is 0. The numbers increase rightward. The numbers decrease leftwards. Setting a negative value will cause the display to be truncated at the left.

  • Width ….. Browser width. Specified in pixel units. [Default is 0]
    A value of 0 will automatically adjust to the width of SmartSignage. Specify when you want to display a part of the page using with Top and Left.

  • Height ….. Browser height. Specified in pixel units. [Default is 0]
    A value of 0 will automatically adjust to the height of SmartSignage. Specify when you want to display a part of the page using with Top and Left.

The following can be used with version 2.3 or later

  • LoginUser …..Specify the login name for Basic Authentication. Basic Authentication is only performed when requested by the server.
  • LoginPassword ….. Specify the login password for Basic Authentication.
  • ProxyUser ….. Specify the user name for Proxy Aauthentication. (Experimental)
  • ProxyPassword ….. Specify the password for Proxy Authentication. (Experimental)

  • RunScriptOnLoaded ….. internal | Relative file path for a JavaScript file. [Default is none]
    If this parameter is specified, the built-in login JavaScript or the specified JavaScript file will be executed when the page is loaded.

    • If you specify internal, the built-in JavaScript for login is executed. In this case, the parameter values ​​specified by ScriptUser,ScriptPassword, ScriptUserElementID,ScriptPasswordElementId and ScriptButtonElementId are used.

    • If you specify the path of the JavaScript file, the JavaScript file will be loaded and executed.The file path should be relative to the data folder.
      It is recommended that the JavaScript file be placed in the same folder as the URL file or in a folder within that folder.

 Example: When specifying a JavaScript file named login.js.
    In the case of the same hierarchy as the URL file
     RunScriptOnLoaded=login.js
    When the JavaScript file is placed in JS folder that is placed in the folder at the same hierarchy as the URL file
     RunScriptOnLoaded=JS/login.js

  • ScriptDelayTime ….. Delay time (in seconds) until the built-in or specified JavaScript file is executed. [Default is 0.0 and runs immediately]
    Seconds can be specified after the decimal point. It will be a delay time from the time the page is loaded.Please note that Smart Sigange has a preload function.
    See: About preload and script execution delay

  • ScriptConfirmUrl ….. Specify the URL. [Default is none]
    Specify this when the page is redirected and you want JavaScript to be executed at the redirect destination.
    JavaScript will be executed only if the URL specified here matches the loaded URL. If not specified, it will be executed every time the page is loaded.

  • ScriptUser ….. The user name used in the built-in script

  • ScriptPassword ….. The password used in the built-in script

  • ScriptUserElementId ….. The ID of the element (HTML tag) used as the user name in the built-in script. If not specified, the search will be performed in the following order:

    1. username
    2. Username
    3. UserName
    4. USERNAME
    5. user_name
    6. USER_NAME

  • ScriptPasswordElementId ….. The ID of the element (HTML tag) used as the password in the built-in script. If not specified, the search will be performed in the following order:

    1. password
    2. Password
    3. PASSWORD
    4. pwd
    5. PWD

  • ScriptButtonElementId: ….. The ID of the element (HTML tag) used as the login button in the built-in script. If not specified, the search will be performed in the following order:

    1. login
    2. Login
    3. LOGIN
    4. submit
    5. Submit
    6. SUBMIT

The following can be used with Ver.2.8.3 or later

  • LoadUrlOnNewWindowRequested ….. true | false [Default is false]
    Specifies whether to transition to the URL without opening a window when a new window or tab is opened when a link on the displayed web page is clicked. The default is false and nothing happens. If you specify true, it will transition to the URL.

  • SavingCookies ….. true | false [Default is false]
    SmartSignage does not store cookies by default. Specify true if you need to save cookies, such as keeping your login status.

  • HttpAcceptLanguage ….. Language specification string such as ja-JP, en-USja-JP [Default is ja-JP]
    Specifies the preferred language to request from the server when accessing web pages. Specify them in order of priority, separated by commas. Example: HttpAcceptLanguage=ja-JP,en-US,de

Setting Example

Here is an example of adding settings to a URL file created with Firefox. with Firefox. The settings are: the scroll bars is displayed, the page is loaded when the display is switched, 20% enlargement, move 980 pixels topward, move 250 pixels leftword, 1920 pixels width, and 2600 pixels height.

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
ScrollBars=true
LoadOnStart=true
ZoomFactor=1.2
Top=-980
Left=-250
Width=1920
height=2600

In the case of Basic Authentication

The settings are: The user name is fukuneko and the password is ei743nJiph.

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
LoginUser=fukuneko
LoginPassword=ei743nJiph

In the case of logging in using the built-in script (when the ID specification can be omitted)

The settings are:
the user name is fukuneko, the password is ei743nJiph,
the element for entering the user name is <input type="text" id="user">,
the element for entering the password is <input type="password" id="pwd"> and
the element of login button is <button id="login">Login</button>.
In these cases, the ID specification of each element can be omitted, so it will be as follows.

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
RunScriptOnLoaded=internal
ScriptUser=fukuneko
ScriptPassword=ei743nJiph

In the case of logging in using the built-in script (when specifying the IDs)

The settins are:
the user name is fukuneko, the password is ei743nJiph,
the element for entrying the user name is <input type="text" id="customuser">,
the element for entrying the password is <input type="password" id="custompassword">,
the element of the login button is <button id="gopage">Login</button>.
In these cases, the ID of each element is not searched and cannot be omitted. The following example specifies that it should run 1.5 seconds after the page loads.

[InternetShortcut]
URL=http://www.fukuneko.com/software/product/smartsignage/windows/ja/
IDList=
HotKey=0
IconFile=C:\Users\Fukuneko\AppData\Local\Mozilla\Firefox\Profiles\e6t16z43.default\shortcutCache\2ebTZKJ+41BZxkuc6s6bfQ==.ico
IconIndex=0

[Fdse]
RunScriptOnLoaded=internal
ScriptDelayTime=1.5
ScriptUser=fukuneko
ScriptPassword=ei743nJiph
ScriptUserElementId=customuser
ScriptPasswordElementId=custompassword
ScriptButtonElementId=gopage

About preload and script execution delay

SmartSignage has a mechanism called preload that loads the content before it is displayed. Preloading allows you to quickly switch between content that takes a long time to load. SmartSignage preloads when half (1⁄2) of the current content duration has passed. This means that if the current content duration is 10 seconds, the next content will be loaded 5 seconds after the current content starts displaying.
In SmartSignage, the content duration is set globally and basically all content is uniform. However, in the case of videos, if you enable the option to apply using the duration of the video itself, the duration will be different for each video. The preload time will change accordingly. For example, if the video duration is 30 seconds, the next content preload will occur after 15 seconds, which is half of 30 seconds.
This preload time should be taken into account when taking advantage of the new scripting feature in Web Content added to SmartSigange.
You can delay the execution of the script by setting the time to ScriptDelayTime. Since the script execution function is mainly for automatic login, it seems that there is no problem in many cases, but it is a problem when you want to change the display after a certain period of time has passed since the web content was displayed. Will occur.
The script is executed after the web page is loaded. For delayed execution, the script is executed after the specified time has elapsed from the completion of reading. This means that the content is hidden when preloaded. If you want to execute after display, you need to add the preload time to the delayed execution time.

Example: Previous content duration is 10 seconds,
when executing the script 1 second after the display 10 / 2 + 1 = 6
ScriptDelayTime=6
[Conceptual Diagram]

It is possible not to preload the web content. To do this, set LoadOnStart = true.
If LoadOnStart is true, it will not be preloaded. The web page is loaded as soon as it is displayed. The script will be executed when the time set as the delay time elapses after the loading is completed.

Setting example - Login to Microsoft 365 -

Describes how to log in to Microsoft 365. 　 Logging into this website relies on the focus event after entering the user ID, so it only works with SmartSigange 2.8.3 or later.
This is the method confirmed at the time of writing this manual. It may not work due to website changes. There is no guarantee of operation. In addition, we cannot receive inquiries. note that.

First prepare the URL file. You can name it freely, but here we will use office365.url.

office365.url

[InternetShortcut]
URL=https://www.office.com/login?es=Click&ru=%2F

[Fdse]
HttpAcceptLanguage=en-US
RunScriptOnLoaded=js/login.js
ScriptDelayTime=0.5
LoadOnStart=true

We will prepare the script for login later.
ScriptDelayTime is set to 0.5 seconds. Depending on your environment, it may take a little longer.
Enable LoadOnStart to run after the web page is displayed.

Next, prepare the login JavaScript. Create a file called login.js in a folder called js. The name is arbitrary, but match it with the name specified in RunScriptOnLoaded.

js/login.js


function setUserId(user) {
    let elm = document.getElementById('i0116');
    if ( elm ) {
        elm.value = user;
        setTimeout( function() {
            let elm = document.getElementById('i0116');
            elm.focus();
            setTimeout( function() {
                let elm = document.getElementById('idSIButton9');
                elm.focus();
                setTimeout( function() {
                    let elm = document.getElementById('idSIButton9');
                    elm.click();
                }, 500);
            }, 1);
        }, 500);
    }
}

function setPassword(password) {
    let elm = document.getElementById('i0118');
    if ( elm ) {
        elm.value = password;
        setTimeout( function() {
            let elm = document.getElementById('i0118');
            elm.focus();
            setTimeout( function() {
                let elm = document.getElementById('idSIButton9');
                elm.focus();
                setTimeout( function() {
                    let elm = document.getElementById('idSIButton9');
                    elm.click();
                }, 500);
            }, 1);
            
        }, 500);
    }
    else {
        let elm = document.getElementById('idSIButton9');
        if ( elm ) {
            elm.focus();
            setTimeout( function() {
                let elm = document.getElementById('idSIButton9');
                elm.click();
            }, 500);
        }
    }
}

function login() {
    if ( location.host === 'login.microsoftonline.com' ) {
        setUserId('LOGIN_USER_ID');
    }
    else if ( location.host === 'login.live.com' ){
        setPassword('PASSWORD');
    }
}

login();

Replace LOGIN_USER_ID and PASSWORD with the ones that you can log in to.
The difference from logging in to a normal web page is that after setting the user ID and password, focus is shifted to the button and a click event is generated after waiting 0.5 seconds.