Progress bar in Electron environment using BootstrapJS not working properly


#1

Environment: Electron 1.6.11 (which includes NodeJS) and Bootstrap 3.3.x for the UI

Desired results:

I would like to:

  1. Start a indeterminate progress bar when the Run button is clicked
  2. Run a process (a Java program) – which runs successfully
  3. Remove the indeterminate progress bar when the process (Java program) returns

What I get (instead) with the following code is:

  1. the process (Java program) starts
  2. the process (Java program) ends
  3. then the indeterminate progress bar appears (I cannot remove it when trying – see commented code)

Possibly, I am not synchronizing my processing correctly. I thought the NodeJS code

resultCode = execSync(javaCmd);

would allow the page to wait for the Java program to complete. I suspect that the code

var execSync = require('child_process').execSync;

is creating a child process in the background that does NOT wait even though I am using execSync.

Can you assist?

<!doctype html>
<html lang="en">
<head>

<script>
    window.$ = window.jQuery = 
    require('./node_modules/jquery/dist/jquery.min.js');
</script>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

  <link href="light-bootstrap-dashboard-master/assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="light-bootstrap-dashboard-master/assets/css/animate.min.css" rel="stylesheet"/>

<style>
.progress {
    margin: 15px;
}

.progress .progress-bar.active {
    font-weight: 500;
    animation: progress-bar-stripes 1.5s linear infinite;
}

</style>
</head>

<body>
<div class="wrapper">
  <div class="container">
    <div class="form-check form-group">
    <button type="submit" class="btn btn-success btn-fill" onclick='runJob()'>Run</button>
    <br>
    <br>
      <div class="progress-bar progress-bar-striped active" id="bar" role="progressbar" style="width: 100%;">
        <span>Processing</span>
      </div>
    </div>
  </div>
</div>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        document.getElementById('bar').style.display = 'none';
    });
</script>

<script language='javascript' type="text/javascript">
    function runJob() {
        var execSync = require('child_process').execSync;
        var javaCmd = 'java -jar C:/Java_Code/CountDown.jar';
        alert("Run process?");

        // make progress bar visible here but does not work in sequence with job
        document.getElementById('bar').style.display = 'block';

        var resultCode;
        resultCode = execSync(javaCmd);

        // would like to remove progress bar here but does not work
        //document.getElementById('bar').style.display = 'none';

        alert("Command succesfully executed");
  }
</script>
</body>

<!-- Core JS Files   -->
<script src="light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="light-bootstrap-dashboard-master/assets/js/bootstrap.min.js" type="text/javascript"></script>

</html>

#2

it is possible that you are using ‘execSync’ which blocks the UI.
did you try with ‘exec’ which asynchronous call then you can hide the progress bar once you get callback?


#3

I got it working last night with ‘exec’ as so…

exec(cmd, (err, stdout, stderr) => {
if (err) {
console.log(stderr: ${stderr});
return;
}
console.log(stdout: ${stdout});
});

Thanks