StrokesPlus.net
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Options
Go to last post Go to first unread
Rob  
#1 Posted : Friday, January 29, 2021 7:06:12 PM(UTC)
Rob

Rank: Administration

Reputation:

Groups: Translators, Members, Administrators
Joined: 1/11/2018(UTC)
Posts: 1,349
United States
Location: Tampa, FL

Thanks: 28 times
Was thanked: 416 time(s) in 354 post(s)
Beginning with version 0.4.1.3, S+ installs the Microsoft WebView2 runtime (Evergreen, Edge Chrome rendering engine) and allows you to create your own custom HTML window which can display HTML and allow communication with scripts via callback.

In the future, I am considering replacing the StrokesPlus.net user interface with HTML/CSS/JavaScript, so this also supports that possible initiative.


Code:
// This function is called when the HTML window is created, passing the ID and window Handle
// Example of JSON sent on window created:

//  {
//     "StrokesPlusHTMLWindow": {"ID" : "windowID", "Handle" : "123456"}
//  }

// It is also how to pass messages to your S+ script from the HTML window via using
// window.chrome.webview.postMessage 

function testWindowCallback(val) 
{
    let obj = JSON.parse(val);

    if (obj.StrokesPlusHTMLWindow) {
        // obj.StrokesPlusHTMLWindow.ID property is also available
        var handle = new IntPtr(parseInt(obj.StrokesPlusHTMLWindow.Handle))
        sp.StoreHandle("testWindowHandle",handle);
        sp.WindowFromHandle(handle).Maximize();
    } 
    else if (obj.action)
    {
        switch(obj.action) {
            case "Close":
                sp.WindowFromHandle(sp.GetStoredHandle("testWindowHandle")).SendClose();        
                break;
            default:
                sp.MessageBox(obj.action, "Callback Action");
                break;
        }
    }
    else
    {
        sp.MessageBox(obj, "Callback Value");
    }
}



// Create new HTML window
// sp.HTMLWindow(title, HTML, callback, loadScript, windowId, includeBootstrapJQuery);
sp.HTMLWindow("Window Title",
              `<div class="container mt-2">
                    <p>Test page content</p>
                    <button id="buttonOK" class="btn btn-primary">OK</button>
                    <button id="buttonString" class="btn btn-secondary">Send String</button>
                    <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Show Modal</button>
                    <button id="buttonClose" class="btn btn-outline-danger">Close</button>
                </div>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>Content here</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    $('#buttonOK').click(function (b) {
                        window.chrome.webview.postMessage({ action: 'OK', message: 'clicked OK'});
                    });
                    $('#buttonString').click(function (b) {
                        window.chrome.webview.postMessage("Test String");
                    });
                    $('#buttonClose').click(function (b) {
                        window.chrome.webview.postMessage({ action: 'Close', message: 'clicked Cancel'});
                    });
                </script>`, 
    "testWindowCallback",                     // script callback (to process data from window.chrome.webview.postMessage)
    "alert('testWindow Loaded');",  // script (within scope of HTML) to be executed on HTML doc load 
    "",       // window ID, if not supplied, will be a new GUID
    true);  // include Bootstrap 4, JQuery, document wrapper (your HTML will be inserted inside the <body> tag)
                 // false will not include any additional HTML beyond what is passed in from above


Use sp.HTMLWindowExecuteScriptAsync to execute JavaScript within the HTML window:
Code:
sp.HTMLWindowExecuteScriptAsync(sp.GetStoredHandle("testWindowHandle"), "alert('Hello!');");

Edited by user Monday, February 1, 2021 6:40:12 PM(UTC)  | Reason: Update script, add modal

thanks 1 user thanked Rob for this useful post.
bjarkirafn on 1/29/2021(UTC)
liuchina  
#2 Posted : Tuesday, February 2, 2021 2:18:04 AM(UTC)
liuchina

Rank: Advanced Member

Reputation:

Groups: Approved
Joined: 9/26/2018(UTC)
Posts: 73
China
Location: 北京

Thanks: 18 times
Was thanked: 1 time(s) in 1 post(s)
About this, can it make the script work in the background?
Rob  
#3 Posted : Tuesday, February 2, 2021 2:52:13 AM(UTC)
Rob

Rank: Administration

Reputation:

Groups: Translators, Members, Administrators
Joined: 1/11/2018(UTC)
Posts: 1,349
United States
Location: Tampa, FL

Thanks: 28 times
Was thanked: 416 time(s) in 354 post(s)
Originally Posted by: liuchina Go to Quoted Post
About this, can it make the script work in the background?


Can you give me a more detailed example/scenario?

The window itself runs in a separate thread and the callback is only invoked when the window's script posts a message.
liuchina  
#4 Posted : Tuesday, February 2, 2021 6:58:54 AM(UTC)
liuchina

Rank: Advanced Member

Reputation:

Groups: Approved
Joined: 9/26/2018(UTC)
Posts: 73
China
Location: 北京

Thanks: 18 times
Was thanked: 1 time(s) in 1 post(s)
I mean. If I start a script that is executed in a loop at chorme. When I minimize chrome, can this script continue to run in the background?Now it depends on the mouse and keyboard to run. for web pages, can it rely on the XPath to run?

Edited by user Wednesday, February 3, 2021 1:59:13 AM(UTC)  | Reason: Not specified

Rob  
#5 Posted : Wednesday, February 3, 2021 2:08:07 AM(UTC)
Rob

Rank: Administration

Reputation:

Groups: Translators, Members, Administrators
Joined: 1/11/2018(UTC)
Posts: 1,349
United States
Location: Tampa, FL

Thanks: 28 times
Was thanked: 416 time(s) in 354 post(s)
Okay, so you mean the script inside the browser window pauses if the window is not focused?

That might be something built into the browser code for power saving purposes.

I will look into it and see what I can find.
Rob  
#6 Posted : Wednesday, February 3, 2021 2:49:55 PM(UTC)
Rob

Rank: Administration

Reputation:

Groups: Translators, Members, Administrators
Joined: 1/11/2018(UTC)
Posts: 1,349
United States
Location: Tampa, FL

Thanks: 28 times
Was thanked: 416 time(s) in 354 post(s)
I am having trouble reproducing/testing this scenario.

Can you post the HTML/JavaScript you're using and let me know how I will see the issue?
liuchina  
#7 Posted : Thursday, February 4, 2021 7:43:37 AM(UTC)
liuchina

Rank: Advanced Member

Reputation:

Groups: Approved
Joined: 9/26/2018(UTC)
Posts: 73
China
Location: 北京

Thanks: 18 times
Was thanked: 1 time(s) in 1 post(s)
I'm sorry, I don't have the kind of script you said.
I've used some data collection programs.
These programs have built-in browsers, which can work even when the window is minimized
Rob  
#8 Posted : Thursday, February 4, 2021 12:56:54 PM(UTC)
Rob

Rank: Administration

Reputation:

Groups: Translators, Members, Administrators
Joined: 1/11/2018(UTC)
Posts: 1,349
United States
Location: Tampa, FL

Thanks: 28 times
Was thanked: 416 time(s) in 354 post(s)
Oh okay. Well I did run some scripts in the browser using setInterval and they continued executing even when the window was minimized.
thanks 1 user thanked Rob for this useful post.
liuchina on 2/7/2021(UTC)
liuchina  
#9 Posted : Sunday, February 7, 2021 2:40:03 AM(UTC)
liuchina

Rank: Advanced Member

Reputation:

Groups: Approved
Joined: 9/26/2018(UTC)
Posts: 73
China
Location: 北京

Thanks: 18 times
Was thanked: 1 time(s) in 1 post(s)
That's great! Rob.would it be convenient for you to leave your demonstration script?
Rob  
#10 Posted : Sunday, February 7, 2021 5:11:52 PM(UTC)
Rob

Rank: Administration

Reputation:

Groups: Translators, Members, Administrators
Joined: 1/11/2018(UTC)
Posts: 1,349
United States
Location: Tampa, FL

Thanks: 28 times
Was thanked: 416 time(s) in 354 post(s)
After some further research and testing, I found that background timers become throttled, so they don't as fast/frequently.

I've updated 0.4.1.4 to pass a flag into the WebView2 environment to disable background timer throttling.

Here's a small change to the original post scripts to demonstrate the setInterval call happening on schedule even when minimized.
Code:
// This function is called when the HTML window is created, passing the ID and window Handle
// Example of JSON sent on window created:

//  {
//     "StrokesPlusHTMLWindow": {"ID" : "windowID", "Handle" : "123456"}
//  }

// It is also how to pass messages to your S+ script from the HTML window via using
// window.chrome.webview.postMessage 

function testWindowCallback(val) 
{
    let obj = JSON.parse(val);

    if (obj.StrokesPlusHTMLWindow) {
        var handle = new IntPtr(parseInt(obj.StrokesPlusHTMLWindow.Handle))
        sp.StoreHandle("testWindowHandle",handle);
        sp.WindowFromHandle(handle).Maximize();
    } 
    else if (obj.action)
    {
        switch(obj.action) {
            case "Close":
                sp.WindowFromHandle(sp.GetStoredHandle("testWindowHandle")).SendClose();        
                break;
            default:
                sp.MessageBox(obj.action, "Callback Action");
                break;
        }
    }
    else
    {
        sp.MessageBox(obj, "Callback Value");
    }
}



// Create new HTML window
// sp.HTMLWindow(title, HTML, callback, loadScript, windowId, includeBootstrapJQuery);
sp.HTMLWindow("Window Title",
                                `<div class="container mt-2">
                                      <p>Test</p>
                                      <span>Timer Ticks: </span><span id="tickCount"></span>
                                      <br />
                                      <button id="buttonOK" class="btn btn-primary">OK</button>
                                      <button id="buttonString" class="btn btn-secondary">Send String</button>
                                      <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Show Modal</button>
                                      <button id="buttonClose" class="btn btn-outline-danger">Close</button>
                                  </div>
                                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                      <div class="modal-dialog" role="document">
                                          <div class="modal-content">
                                              <div class="modal-header">
                                                  <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                      <span aria-hidden="true">&times;</span>
                                                  </button>
                                              </div>
                                              <div class="modal-body">
                                                  <p>Content here</p>
                                              </div>
                                              <div class="modal-footer">
                                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <script>
                                        $('#buttonOK').click(function (b) {
                                            window.chrome.webview.postMessage({ action: 'OK', message: 'clicked OK'});
                                        });
                                        $('#buttonString').click(function (b) {
                                            window.chrome.webview.postMessage("Test String");
                                        });
                                        $('#buttonClose').click(function (b) {
                                            window.chrome.webview.postMessage({ action: 'Close', message: 'clicked Cancel'});
                                        });
                                        var intv = 0;
                                        setInterval(function() {intv++;$('#tickCount').text(intv);}, 250);
                                  </script>`, 
    "testWindowCallback",                     // script callback (to process data from window.chrome.webview.postMessage)
    "",  // script (within scope of HTML) to be executed on HTML doc load 
    "",       // window ID, if not supplied, will be a new GUID
    true);  // include Bootstrap 4, JQuery, document wrapper (your HTML will be inserted inside the <body> tag)
                 // false will not include any additional HTML beyond what is passed in from above
liuchina  
#11 Posted : Monday, February 8, 2021 12:39:30 AM(UTC)
liuchina

Rank: Advanced Member

Reputation:

Groups: Approved
Joined: 9/26/2018(UTC)
Posts: 73
China
Location: 北京

Thanks: 18 times
Was thanked: 1 time(s) in 1 post(s)
Thank you Rob.
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.