6 points par enarche 2025-04-07 | 1 commentaires | Partager sur WhatsApp

Je vous présente une petite application de diaporama simple que j’ai créée parce que j’en avais besoin.
Pendant une petite pause café en semaine, j’aime bien regarder des GIF animés d’IU dans un coin de mon écran.
Après être passé sur Mac comme machine principale, je ne trouvais pas d’application qui me convenait, alors j’en ai bricolé une petite avec l’aide de GPT.

Voici ses grandes caractéristiques :

  • fonction de diaporama
  • lecture d’images (y compris les GIF animés) et de vidéos
  • possibilité de laisser une vidéo aller jusqu’à la fin indépendamment de la durée du diaporama
  • ajustement de la hauteur de la fenêtre en fonction du ratio de l’image
  • affichage de l’heure
  • mise à jour automatique

Je me suis dit que je n’étais peut-être pas le seul à avoir ce genre de goûts, donc je partage ça ici.
Au départ, je développais en Swift, puis je me suis dit que tant qu’à faire, autant en faire une application cross platform.
J’ai hésité entre Flutter et Electron, mais comme je ne visais pas le mobile, j’ai finalement choisi Electron.

En développant cette fois-ci, j’ai aussi découvert quelques petites choses que je partage au passage.
github : https://github.com/enarche-ahn/unifandora-release

Mise à jour automatique

C’est la première fois que j’utilise Electron.
J’avais souvent entendu dire que Visual Studio Code était développé avec Electron, donc ça m’intriguait depuis longtemps,
et une fois que je l’ai vraiment utilisé, j’ai complètement accroché.
J’ai surtout été surpris de voir à quel point il est simple d’y brancher les mises à jour automatiques.

Sortie des logs dans le shell

En général, quand on affiche des messages de log pour déboguer côté renderer, on ne peut les consulter que dans les outils de développement du navigateur.
Je me suis demandé s’il y avait une solution et j’ai posé la question à GPT, qui m’en a donné une directement.
La méthode est bien plus simple et efficace que je ne l’imaginais, ça m’a bluffé.
(Cela dit, comme je fais surtout du back-end depuis longtemps, c’est peut-être juste moi qui ne connaissais pas bien le sujet ^^;)
En ajoutant ce qui suit, les console.log() émis dans [renderer.js] s’affichent correctement dans le shell.

[main.js]  
// Log messages received from renderer  
ipcMain.on('renderer-log', (event, message) => {  
  console.log('Renderer Log:', message);  
});  
  
  
[preload.js]  
contextBridge.exposeInMainWorld('electronAPI', {  
  sendLog: (message) => ipcRenderer.send('renderer-log', message)  
});  
  
[renderer.js]  
// Override console.log to forward log messages to the main process.  
(function() {  
  const originalConsoleLog = console.log;  
  console.log = function(...args) {  
    if (window.electronAPI && typeof window.electronAPI.sendLog === 'function') {  
      window.electronAPI.sendLog(args.join(' '));  
    }  
    originalConsoleLog.apply(console, args);  
  };  
})();  
  
window.addEventListener('DOMContentLoaded', () => {  
  ...  
  console.log('Slideshow started...');  
 });  

1 commentaires

 
enarche 2025-04-07

Seule la version Windows du binaire a été publiée pour le moment.
La version macOS n’est pas encore disponible, car il faut se réinscrire à l’Apple Developer Program ^^;;;
En attendant, si vous en avez besoin, téléchargez le code source, compilez-le et utilisez-le~