@geetee24
This example creates an Electron application that can display multiple progress bars for tracking asynchronous data transfers. Here's how to set it up and run it.

// main.js - Electron main process

const { app, BrowserWindow, ipcMain } = require('electron');
const ProgressBar = require('electron-progressbar');
const path = require('path');

let mainWindow;
let progressBars = [];

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

// Listen for requests to create progress bars
ipcMain.on('create-progress-bars', (event, numTransfers) => {
  // Close any existing progress bars
  progressBars.forEach(pb => {
    if (pb && !pb.isCompleted()) {
      pb.close();
    }
  });
  
  progressBars = [];
  
  // Create new progress bars for each transfer
  for (let i = 0; i < numTransfers; i++) {
    const progressBar = new ProgressBar({
      indeterminate: false,
      text: `Transfer ${i + 1}`,
      detail: 'Preparing...',
      maxValue: 100,
      closeOnComplete: false,
      title: `Data Transfer ${i + 1}`,
      // Position each progress bar vertically distributed
      y: 100 + (i * 120),
      style: {
        text: {},
        detail: {},
        bar: {
          height: '20px'
        },
        value: {}
      }
    });
    
    progressBars.push(progressBar);
  }
});

// Listen for progress updates
ipcMain.on('update-progress', (event, { index, value, detail }) => {
  if (progressBars[index] && !progressBars[index].isCompleted()) {
    progressBars[index].value = value;
    if (detail) {
      progressBars[index].detail = detail;
    }
    
    // If completed, update text
    if (value >= 100) {
      progressBars[index].text = `Transfer ${index + 1} - Completed`;
      progressBars[index].detail = 'Transfer completed successfully.';
      
      // Check if all transfers are completed
      const allCompleted = progressBars.every(pb => pb.value >= 100);
      if (allCompleted) {
        mainWindow.webContents.send('all-transfers-completed');
        
        // Close progress bars after 3 seconds
        setTimeout(() => {
          progressBars.forEach(pb => {
            if (pb && !pb.isDestroyed()) {
              pb.close();
            }
          });
          progressBars = [];
        }, 3000);
      }
    }
  }
});

// Simulate a data transfer (for demo purposes)
ipcMain.on('start-transfers', (event) => {
  progressBars.forEach((progressBar, index) => {
    simulateTransfer(index);
  });
});

function simulateTransfer(index) {
  let progress = 0;
  const interval = setInterval(() => {
    progress += Math.random() * 5;
    if (progress > 100) progress = 100;
    
    if (progressBars[index] && !progressBars[index].isCompleted()) {
      const detail = `Transferred ${Math.round(progress)}% of data...`;
      ipcMain.emit('update-progress', null, { 
        index, 
        value: Math.round(progress), 
        detail 
      });
      
      if (progress >= 100) {
        clearInterval(interval);
      }
    } else {
      clearInterval(interval);
    }
  }, 500 + (index * 100)); // Different speeds for each transfer
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Multiple Progress Bars Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
    }
    .controls {
      margin: 20px 0;
      display: flex;
      gap: 10px;
    }
    button {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    input {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 100px;
    }
    .status {
      margin-top: 20px;
      padding: 10px;
      border-radius: 4px;
    }
    .success {
      background-color: #dff0d8;
      color: #3c763d;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Multiple Data Transfers</h1>
    <div class="controls">
      <input type="number" id="numTransfers" min="1" max="10" value="3" placeholder="Number of transfers">
      <button id="createBtn">Create Progress Bars</button>
      <button id="startBtn" disabled>Start Transfers</button>
    </div>
    <div id="status" class="status" style="display: none;"></div>
  </div>
  <script src="renderer.js"></script>
</body>
</html>

<!-- preload.js -->
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  createProgressBars: (numTransfers) => {
    ipcRenderer.send('create-progress-bars', numTransfers);
  },
  startTransfers: () => {
    ipcRenderer.send('start-transfers');
  },
  onAllTransfersCompleted: (callback) => {
    ipcRenderer.on('all-transfers-completed', callback);
  }
});

<!-- renderer.js -->
document.addEventListener('DOMContentLoaded', () => {
  const numTransfersInput = document.getElementById('numTransfers');
  const createBtn = document.getElementById('createBtn');
  const startBtn = document.getElementById('startBtn');
  const statusDiv = document.getElementById('status');
  
  createBtn.addEventListener('click', () => {
    const numTransfers = parseInt(numTransfersInput.value);
    if (numTransfers > 0 && numTransfers <= 10) {
      window.electronAPI.createProgressBars(numTransfers);
      startBtn.disabled = false;
      statusDiv.style.display = 'none';
    } else {
      alert('Please enter a number between 1 and 10');
    }
  });
  
  startBtn.addEventListener('click', () => {
    window.electronAPI.startTransfers();
    startBtn.disabled = true;
  });
  
  window.electronAPI.onAllTransfersCompleted(() => {
    statusDiv.innerHTML = 'All transfers completed successfully!';
    statusDiv.className = 'status success';
    statusDiv.style.display = 'block';
    startBtn.disabled = true;
  });
});

Uh oh!

Need example of MULTIPLE progress bars open at same time #46

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions