Update external screen through primary screen


#1

I am trying to create an app that uses an external screen and a primary screen.

Buttons on the primary screen will update the view on the secondary screen.

I have added jQuery to the primary view. The alert works.

<!-- index.html -->
<!-- ... -->
<script>
    window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');
    $('.button-add').click(function(event){
      event.preventDefault();
      alert('button was clicked');
    });
</script>

I want a click on the index page to update the text/display in secondary.html

<!-- secondary.html -->
<body>
    <div>Text to modify</div>
</body>

I edited the example hello world project from the home page

app.on('ready', function(){
  createWindow();
  secondaryScreen();
})

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

function secondaryScreen() {
  mainWindow = new BrowserWindow({
    x: 300,
    y: 300
  });

  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'secondary.html'),
    protocol: 'file:',
    slashes: true
  }))
}

I’m unsure of how to link the 2 views to a “controller” js file.
Thanks.


#2

After some digging I realized that this could be accomplished by number of ways.

Local storage, session storage and indexedDB
http://electron.atom.io/docs/faq/#how-to-share-data-between-web-pages

Also, another interesting way would be with ipcMain and ipcRenderer to communicate from the main process main.js - to the rendere process - webpage

http://electron.atom.io/docs/api/ipc-main/#sending-messages