Total Pageviews

Showing posts with label electron. Show all posts
Showing posts with label electron. Show all posts

Monday, 2 February 2026

electron-vite-boilerplate

 

Comprehensive and security Electron template (TypeScript + Vue3 + Vite).

electron-vite.org   

An Electron application with Vue3 and TypeScript

electron-version electron-vite-version electron-builder-version vite-version vue-version typescript-version

Features

  • 💡 Optimize asset handling
  • 🚀 Fast HMR for renderer processes
  • 🔥 Hot reloading for main process and preload scripts
  • 🔌 Easy to debug
  • 🔒 Compile to v8 bytecode to protect source code

Getting Started

Read documentation for more details.

You can also use the create-electron tool to scaffold your project for other frameworks (e.g. React, Svelte or Solid).

Recommended IDE Setup

Project Setup

Install

$ npm install

Development

$ npm run dev

Build

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

Examples

from  https://github.com/alex8088/electron-vite-boilerplate

Wednesday, 27 November 2024

NSMusicS - 开源音乐播放器

NSMusicS | 九歌 Cloud-Native Music Server/ Full platform Client,support navidrome, jellyfin, emby.

开源的本地音乐播放器「MZMusic」,基于 Electron + Vue3 + Vite ,具备完备的音乐播放器功能,据作者介绍未来会集成 AI 模型,实现 AI 评分模块、语音识别 AI、AI 乐谱模块、歌词逐字文本生成等。

当前功能:

    歌曲(mp3,flac,wav),可设置内嵌封面,内嵌歌词,专辑名等等歌曲文件常用属性
    歌词(读取优先级):(mrc(导入) > krc(导入) > lrc(导入) > 歌曲自带(内嵌)歌词):全部支持逐字格式,
    图片(读取优先级):(jpg专辑(导入) > 歌曲自带(内嵌)专辑,(导入文件格式:歌手名 - 专辑名.jpg)),(jpg歌手写真导入,文件格式:歌手名.jpg),其它音乐资源的导入,
    歌词UI逐字算法(兼容所有的语言字体的组合,同步率依然非常准确,不受影响,不一定兼容所有的歌词格式,需要作者编写代码来兼容,请在Issues里提出)
    自定义多歌单列表,动态播放队列,歌手写真渐变切换动画
    可使用API接口实现联网模块(已禁用,待解封,待开发对接用户自定义接口 )
    包含常用的播放器功能,此处省略(个性皮肤,桌面歌词等等)
    音频EQ均衡器(普通)
    可直接拖拽音频文件+音频文件夹至歌单界面,直接添加至歌单(也可在歌单界面手动导入)
    单曲+专辑播放双模式,单曲管理+曲库专辑管理功能

项目地址:
https://github.com/Super-Badmen-Viper/MoZhiMusicPlayer

--------------------------------------------------------------------------

NSMusicS | 九歌

It should not only implement its own streaming services, but also be compatible with various mainstream open-source streaming servers, And implement cross platform professional music clients for various operating systems, ensuring data interoperability between the client and server of each operating system (desktop:Windows,Linux,MacOs. mobile: Android, IOS. Car System: Android)

The Chinese name of the project is "Nine Songs Music | 九歌", abbreviated as NSMusicS
inspired by ["Chu Ci"] | 楚辞, to commemorate ["Qu Yuan"] | 屈原

The NSMusicS plan supports multiple server types, such as Navidrome, Jellyfin, emby, NSMusicS. Subsonic API is not currently supported. This will likely be added in later when the new Subsonic API is decided on.

In addition, NSMusicS also supports local mode to use local music libraries. And plan to support various types of network cloud drives,such as webdev,onedriver....

NSMusicS-Electron | 九歌 : Desktop-client

  • supporting the Windows platform (which will soon support Linux、MacOS、Docker)
  • compatible with streaming media servers Navidrome (which will soon be compatible with Jellyfin、Emby、NSMusicS)
  • music library management
  • professional audio playback
  • Rich sound effects playback
  • internationalization
  • various music usage scenarios(For NSMusicS-GO: Server)

NSMusicS-GO | 九歌 : Server

  • compatible with streaming media servers (which will soon be compatible with Navidrome、Subsonic、Jellyfin、Emby)
  • music library management
  • various music usage scenarios (karaoke, Home audio and video, Provide cloud services for cross platform music experience, etc.)
  • artificial intelligence(Listen to music to identify music, extract music accompaniment, and rate karaoke singing, etc.)
  • knowledge graph(Recommendation system, Graph database, etc.)
  • internationalization

NSMusicS-Flutter | 九歌 : Mobile-client

  • music library management
  • professional audio playback
  • Rich sound effects playback
  • internationalization
  • various music usage scenarios(For NSMusicS-GO: Server)

Screenshots:

  • NSMusicS(Electron):Under development

Downloads

Version:

Project Development status Technology Framework Author/Copyright Owner Operating systems LICENSE
NSMusicS
(Electron / GO)
updateing electron,nodejs,vue,ts,sqlite,docker My Skills Go,MongoDB,Gin,JWT,sqlite,docker My Skills Xiang Cheng Windows
Linux(ubuntu+)
Docker
MacOS
A-GPL 3.0
NSMusicS_For_Flutter will developed flutter,dart,androidstudio My Skills Xiang Cheng Android11++
IOS
HarmonyOS
A-GPL 3.0
NSMusicS_For_Audio will developed pytorch,py,jupyter,matlab My Skills Xiang Cheng Windows10++
Linux
Docker
A-GPL 3.0
NSMusicS_For_KG will developed NebulaGraph / Neo4j Xiang Cheng Windows10++
Linux
Docker
A-GPL 3.0

 from https://github.com/Super-Badmen-Viper/NSMusicS

Tuesday, 24 September 2024

流程可视化开源Web应用-FUXA

 Web-based Process Visualization software.

https://frangoteam.org/

FUXA

FUXA is a web-based Process Visualization (SCADA/HMI/Dashboard) software. With FUXA you can create modern process visualizations with individual designs for your machines and real-time data display.


Features

  • Devices connectivity with Modbus RTU/TCP, Siemens S7 Protocol, OPC-UA, BACnet IP, MQTT, Ethernet/IP (Allen Bradley)
  • SCADA/HMI Web-Editor - Engineering and Design completely web-based
  • Cross-Platform Full-Stack - Backend with NodeJs and Frontend with Web technologies (HTML5, CSS, Javascript, Angular, SVG)

Live Demo

Here is a live demo example of FUXA editor.

Installing and Running

FUXA is developed with NodeJS (backend) and Angular (frontend).

See the Wiki for more details about installing and getting started

Wiki

Wiki Installing/Building


Install from NPM

You need to have installed Node Version 18.

WARNING In linux with nodejs Version 18 the installation could be a challenge. If you don't intend communicate with Siemens PLCs via S7 (node-snap7 library) you can install from NPM @frangoteam/fuxa-min

npm install -g --unsafe-perm @frangoteam/fuxa
fuxa

Install from source

Download the latest release and unpack it

You need to have installed Node Version 18.

WARNING In linux with nodejs Version 18 the installation could be a challenge. If you don't intend communicate with Siemens PLCs via S7 you can remove the node-snap7 library from the server/package.json

cd ./server
npm install
npm start

Open up a browser (better Chrome) and navigate to http://localhost:1881

Creating the Electron Application

Electron is a framework for building cross-platform desktop applications using web technologies. An Electron application is standalone, meaning it can be run independently on your desktop without needing a web browser.

To create the Electron application, you need to have node.js 18 installed. Follow these steps:

Build Server and Client First

cd ./server
npm install
cd ../client
npm install
npm run build

Packaging

cd ./app
npm install
npm run package

After following these steps, you will have a standalone Electron application for FUXA. The application can be found in the ./app directory.

Usage

To Debug (Full Stack)

Install and start to serve the frontend

cd ./client
npm install
npm start



\








from https://github.com/frangoteam/FUXA

-----

FUXA是一款开源的流程可视化 Web 应用,可快速构建和部署可扩展的 SCADA,HMI,仪表板或 IIoT 系统的实时数据,构建多种不同设计风格的可视化流程图。支持创建具有个性化设计可视化面板,以及自动化工业工厂的控制仪表。项目基于Typscript编写,遵守MIT开源协议。

功能特色:

    设备与 Modbus RTU/TCP、西门子 S7 协议、OPC-UA、BACnet IP、MQTT、以太网/IP (Allen Bradley) 的连接.

    SCADA/HMI Web 编辑器 – 完全基于 Web 的工程和设计.

    跨平台全栈 – 使用 NodeJs 的后端和使用 Web 技术(HTML5、CSS、Javascript、Angular、SVG)的前端.

源代码:https://github.com/frangoteam/FUXA


Sunday, 1 September 2024

scrcpy-control ,An electron-vue project


Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron application for production
npm run build

# run unit & end-to-end tests
npm test


# lint all JS/Vue component files in `src/`
npm run lint
This project was generated with electron-vue@45a3e22 using vue-cli. Documentation about the original structure can be found here.

from https://github.com/supdo/scrcpy-control 

------

electron-vue

 

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack. 

https://simulatedgreg.gitbooks.io/electron-vue/content/

The boilerplate for making electron applications built with vue.

Overview

The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of vue-cli for scaffolding, webpack with vue-loader, electron-packager or electron-builder, and some of the most used plugins like vue-router, vuex, and so much more.

Check out the detailed documentation here.

Things you'll find in this boilerplate...

*Customizable during vue-cli scaffolding

Getting Started

This boilerplate was built as a template for vue-cli and includes options to customize your final scaffolded app. The use of node@^7 or higher required. electron-vue also officially recommends the yarn package manager as it handles dependencies much better and can help reduce final build size with yarn clean.

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
Are you a Windows User?

Make sure to check out A Note for Windows Users to make sure you have all the necessary build tools needed for electron and other dependencies.

Wanting to use Vue 1?

Just point to the 1.0 branch. Please note that electron-vue has officially deprecated the usage of vue@^1, so project structure, features, and documentation will reflect those changes (legacy documentation).

vue init simulatedgreg/electron-vue#1.0 my-project

Next Steps

Make sure to take a look at the documentation. Here you will find useful information about configuration, project structure, and building your app. There's also a handy FAQs section.

Made with electron-vue

Take a look at some of the amazing projects built with electron-vue. Want to have your own project listed? Feel free add your project to the bottom of the list below then submit a pull request.

  • Surfbird: A Twitter client built on Electron and Vue
  • Lulumi-browser: Lulumi-browser is a light weight browser coded with Vue.js 2 and Electron
  • Space-Snake: A Desktop game built with Electron and Vue.js.
  • Forrest: An npm scripts desktop client
  • miikun: A Simple Markdown Editor
  • Dakika: A minute taking application that makes writing minutes a breeze
  • Dynamoc: Dynamoc is a GUI client for dynamodb-local, dynalite and AWS dynamodb
  • Dockeron: A dockeron project, built on Electron + Vue.js for Docker
  • Easysubs: Download subtitles in a very fast and simple way
  • adminScheduler: An application leveraging electron for cross platform compatibility, Vue.js for lightning fast UI and full-calendar.io to deliver a premium calendar interface.
  • Backlog: Simple app for storing TODOs, ideas or backlog items. You can organize them with boards. Sleek flow. Built with Electron + Vue.js + iView
  • Opshell: Ops tool to make life easier working with AWS instances.
  • GitHoard: Hoard git repositories with ease.
  • Data-curator: Share usable open data.
  • Bookmark: Desktop app to manage bookmarked links using Atom Electron and Vue.js
  • Uber Run: Simple automation desktop app to download and organize your tax invoices from Uber.
  • Apollo: Convert YouTube videos (and more) to .mp3 files
  • Netsix: Share videos with your friends in a real peer-to-peer manner using WebRTC.
  • code-notes: A simple code snippet manager for developers built with Electron & Vue.js.
  • Pomotroid: A simple and visually-pleasing Pomodoro timer
  • MarkText: Mark Text is a realtime Markdown Editor.
  • vue-design: the best website visualization builder with Vue and Electron
  • ImapSync Client: It's only an Internet Message Access Protocol Synchronization Client
  • Hve: A static blog client tool you may like.
  • MarkdownFox: A simple Markdown viewer with auto update and PDF export.
  • Smart DOCSE: A generic app which ability to display news, contact etc.
  • Cleaver: Cleaver helps you provision servers ready for deploying your web apps with zero downtime - for free!
  • XPanel: XAMPP control panel alternative built with Electron & Vue.js
  • Hexo-Client: A hexo client powered by electron-vue.
  • YT.Downloader: Youtube Video Downloader&Converter and Play Music, built with Electron & Vue.js.
  • BMFont-JS: BMFont-js is a bitmap font generator, built with Electron & Vue.js.
  • YouGet: YouGet - YouTube Video/Playlist Downloader/Cutter - MP3 Converter
  • Asar UI: UI for Asar Pack, built with Electron & Vue.js.
  • Leeze: A Receipt Record App, built with Electron & Vue.js.
  • IntelTracker: An intel item tracker for players/speedrunners of NOLF.
  • Metube: A program to manage your simple YouTube music player and enjoy your music
  • it-tools: A programing helper for developers built with Electron & Vue.js.
  • GifsWorld: Gifs finder built with Vue and Electron

from https://github.com/SimulatedGREG/electron-vue

 

Monday, 29 July 2024

Electron-Vue 环境搭建 + 基本入门 + 软件打包


electron是一个使用JS,CSS,HTML构建跨平台的桌面应用程序的框架,微软的VScode就是使用该技术开发.

环境搭建

  1. 安装node环境

  2. 由于使用的是electron-vue脚手架工具,首先要安装vuecli

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli
  1. 起步

vue init阶段会出现一些项目基本选项,按照自己需求选择就好,打包工具选择elelctron-builder之后会用到它打包和更新


1
2
3
4
5
6
7
8
9
10
11
vue init simulatedgreg/electron-vue my-project

cd my-project

npm install
# OR
yarn

npm run dev
# OR
yarn dev
  1. 出现以下界面及成功

img

img

注意事项

  • npm install时候可能会由于网络原因导致包安装失败,使用cnpm或者nrm切换软件源
  • npm install时候可能会遇到electron下载失败情况,有两种解决方法
    1. 在项目根目录下新建.npmrc或者.yarnrc文件,里面写入
      1
      electron_mirror=http://npm.taobao.org/mirrors/electron/
    2. 淘宝镜像下载对应系统和版本的electron包到electron缓存目录
      1
      mac/win/liunx: 当前用户名/.electron/ 
  • windows用户在npm install时候会遇到node-gyp错误,这是由于你的系统没有安装正确到构建工具,可以使用windows-build-tools一键安装所有到所需工具包
1
2
3
npm install --global windows-build-tools
# OR
yarn global add windows-build-tools
  • npm run dev时候可能会遇到process is not defined错误,这是由于node10.X版本导致的,有两种解决方法
    1. 升级node版本到12.X
    2. 打开项目/src/index.ejs,修改!process.browser!require('process').browser

基础入门

插件使用

插件使用和vue一样,npm/yarn直接装包就可以,脚手架自带electron-vuex可以实现主进程与渲染线程共享数据,推荐使用

css预处理器

假设我们使用less作为我们到css预先处理,需要安装less并且修改webpack配置

  1. 安装
1
2
3
npm install -D less less-loader
# OR
yarn add -D less less-loader
  1. 打开.electron-vue/webpack.renderer.config.js,在less rule里面加入less-loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
test: /\.less$/,
use: [
{
loader: "vue-style-loader"
},
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
{
loader: "postcss-loader",
},
{
loader: "less-loader",
options: {
javascriptEnabled: true,
modifyVars: {
'text-primary-color': '#293A4D', // 主要'
'text-minor-color': 'rgba(41, 58, 77, 0.45)', // 次要'
'text-highlight-color': '#1890FF' // 高亮
}
}
}
]
}

静态资源使用

在项目根目录下的static目录,可以存放主进程和渲染进程都可以访问到的静态资源,electron-vue提供一个__static全局变量来快速访问此目录,而且开发环境和生产都可以使用。

  1. vue模版使用
1
2
3
4
5
6
7
8
9
10
11
12
<template>
<img v-bind:src="imageUrl">
</template>

<script>
export default {
data () {
// 注意 路径的起始是 `static/`
return { imageUrl: 'static/imgs/unsplash.png' }
}
}
</script>