executing javascript animation inside electron

Question

I am interested in creating man machine interfaces with Electron. Trying to do a demo with the Star trek life signs monitor. Found this code that is easily modified to move up and down : http://jsfiddle.net/anex6vmq/

Here is my HTML and Javascript:

<html>
<head>
  <style>
    div.a {
      width: 50px;
      height: 50px;
      background-color: red;
      position: fixed;
    }
  </style>
</head>
<body background="startrekbg.png">
  <div class='a'></div>
  <script type="text/javascript"> 
    $(document).ready(function () {
      animateDiv();
    });
    function makeNewPosition() {
      // Get viewport dimensions (remove the dimension of the div)
      var h = $(window).height() - 500;
      var w = $(window).width() - 500;
      var nh = Math.floor(Math.random() * h);
      var nw = Math.floor(Math.random() * w);
      //var nw = 777;
      return [nh, nw];
    }
    function animateDiv() {
      var newq = makeNewPosition();
      $('.a').animate({ top: newq[0], left: newq[1] }, function () {
        animateDiv();
      });

    };
  </script>
</body>
</html>

main.js code :

const {app, BrowserWindow} = require('electron')

let mainWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    height: 670,
    width: 995,
    frame: false
  })
  mainWindow.loadURL('file://' + __dirname + '/animation.html')
})

And my package.json :

`{
  "name":    "Sick Bay Scanner by H.A. Hobson",
  "version": "1.0.1",
  "main":    "main.js"
}`

I work mostly with C, PHP and Python. Have not done much JavaScript, but find Node and Electron very exciting things to learn. Thanks for your attention.

What's the error exactly? If it's about jquery - what i suppose - see this thread how to use it in Electron: https://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework — pergy, Nov 07 '17 at 07:44
@perty: Thank you! The error seems to be : ReferenceError: $ is not defined. I have installed jquery and have looked at the site. No luck as of yet. — hahobson, Nov 07 '17 at 08:38
well, doing the same I succeeded with your code (`npm i jquery` and add `window.$ = window.jQuery = require('jquery');` in the first line of ` — pergy, Nov 07 '17 at 18:09
@perty: Thanks ! It is working now with the background image. I am so relieved. How do give you credit ? — hahobson, Nov 08 '17 at 02:40

score 0 · Accepted Answer · answered Nov 08 '17 at 07:51

Your code is right but you use jquery, which requires further operations to make it work in node.js:

install jquery node module with npm i jquery (add --save flag to copy dependency to package.json if you plan to deploy it)
Add this line as the first line in your script

window.$ = window.jQuery = require('jquery');

Further readings on this topic can be found:

executing javascript animation inside electron

1 Answers1