TERMINAL
MAIN SHELL
(Project archived oct. 18th 2021)
(Project archived oct. 18th 2021)
Heavily inspired from the [TRON Legacy movie effects](https://web.archive.org/web/20170511000410/http://jtnimoy.com/blogs/projects/14881671) (especially the [Board Room sequence](https://gmunk.com/TRON-Board-Room)), the eDEX-UI project was originally meant to be *"[DEX-UI](https://github.com/seenaburns/dex-ui) with less « art » and more « distributable software »"*.
While keeping a futuristic look and feel, it strives to maintain a certain level of functionality and to be usable in real-life scenarios, with the larger goal of bringing science-fiction UXs to the mainstream.
Jump to:
Features — Screenshots — Questions & Answers — Download — Featured In — Contributor Instructions — Credits
## Featured in...
- [Linux Uprising Blog](https://www.linuxuprising.com/2018/11/edex-ui-fully-functioning-sci-fi.html)
- [My post on r/unixporn](https://www.reddit.com/r/unixporn/comments/9ysbx7/oc_a_little_project_that_ive_been_working_on/)
- [Korben article (in french)](https://korben.info/une-interface-futuriste-pour-vos-ecrans-tactiles.html)
- [Hacker News](https://news.ycombinator.com/item?id=18509828)
- [This tweet that made me smile](https://twitter.com/mikemaccana/status/1065615451940667396)
- [BoingBoing article](https://boingboing.net/2018/11/23/simulacrum-sf.html) - Apparently i'm a "French hacker"
- [OReilly 4 short links](https://www.oreilly.com/ideas/four-short-links-23-november-2018)
- [Hackaday](https://hackaday.com/2018/11/23/look-like-a-movie-hacker/)
- [Developpez.com (another french link)](https://www.developpez.com/actu/234808/Une-application-de-bureau-ressemble-a-une-interface-d-ordinateur-de-science-fiction-inspiree-des-effets-du-film-TRON-Legacy/)
- [GitHub Blog's Release Radar November 2018](https://blog.github.com/2018-12-21-release-radar-november-2018/)
- [opensource.com Productive Tools for 2019](https://opensource.com/article/19/1/productivity-tool-edex-ui)
- [O'Reilly 4 short links (again)](https://www.oreilly.com/radar/four-short-links-7-july-2020/)
- [LinuxLinks](https://www.linuxlinks.com/linux-candy-edex-ui-sci-fi-computer-terminal-emulator-system-monitor/)
- [Linux For Everyone (Youtube)](https://www.youtube.com/watch?v=gbzqCAjm--g)
- [BestOfJS Rising Stars 2020](https://risingstars.js.org/2020/en#edex-ui)
- [The Geek Freaks (Youtube/German)](https://youtu.be/TSjMIeLG0Sk)
- [JSNation Open Source Awards 2021](https://osawards.com/javascript/#nominees) (Nominee - Fun Side Project of the Year)
## Useful commands for the nerds
**IMPORTANT NOTE:** the following instructions are meant for running eDEX from the latest unoptimized, unreleased, development version. If you'd like to get stable software instead, refer to [these](#how-do-i-get-it) instructions.
#### Starting from source:
on *nix systems (You'll need the Xcode command line tools on macOS):
- clone the repository
- `npm run install-linux`
- `npm run start`
on Windows:
- start cmd or powershell **as administrator**
- clone the repository
- `npm run install-windows`
- `npm run start`
#### Building
Note: Due to native modules, you can only build targets for the host OS you are using.
- `npm install` (NOT `install-linux` or `install-windows`)
- `npm run build-linux` or `build-windows` or `build-darwin`
The script will minify the source code, recompile native dependencies and create distributable assets in the `dist` folder.
#### Getting the bleeding edge
If you're interested in running the latest in-development version but don't want to compile source code yourself, you can can get pre-built nightly binaries on [GitHub Actions](https://github.com/GitSquared/edex-ui/actions): click the latest commits, and download the artifacts bundle for your OS.
## Credits
eDEX-UI's source code was primarily written by me, [Squared](https://github.com/GitSquared). If you want to get in touch with me or find other projects I'm involved in, check out [my website](https://gaby.dev).
[PixelyIon](https://github.com/PixelyIon) helped me get started with Windows compatibility and offered some precious advice when I started to work on this project seriously.
[IceWolf](https://soundcloud.com/iamicewolf) composed the sound effects on v2.1.x and above. He makes really cool stuff, check out his music!
## Thanks
Of course, eDEX would never have existed if I hadn't stumbled upon the amazing work of [Seena](https://github.com/seenaburns) on [r/unixporn](https://reddit.com/r/unixporn).
This project uses a bunch of open-source libraries, frameworks and tools, see [the full dependency graph](https://github.com/GitSquared/edex-ui/network/dependencies).
I want to namely thank the developers behind [xterm.js](https://github.com/xtermjs/xterm.js), [systeminformation](https://github.com/sebhildebrandt/systeminformation) and [SmoothieCharts](https://github.com/joewalnes/smoothie).
Huge thanks to [Rob "Arscan" Scanlon](https://github.com/arscan) for making the fantastic [ENCOM Globe](https://github.com/arscan/encom-globe), also inspired by the TRON: Legacy movie, and distributing it freely. His work really puts the icing on the cake.
## Licensing
Licensed under the [GPLv3.0](https://github.com/GitSquared/edex-ui/blob/master/LICENSE).
================================================
FILE: SECURITY.md
================================================
# Security Policy
## Supported Versions
We support the [latest released version](https://github.com/GitSquared/edex-ui/releases/latest), and the current development version (`master` branch).
## Reporting a Vulnerability
If you're concerned about a potential or proven security vulnerability in this software, please get in touch by sending an email at [`gabriel@saillard.dev`](mailto:%22Gabriel%20SAILLARD%22%20%3Cgabriel%40saillard.dev%3E?subject=%5BSECURITY%5D%20eDEX-UI%20vulnerability%20concern&body=(Please%20describe%20what%20code%20you%20think%20is%20vulnerable%2C%20and%20provide%20a%20way%20to%20reproduce%20the%20issue%20if%20possible)).
If your email subject contains the `[SECURITY]` tag, you will be surfaced to the front of my inbox and should expect a response in 24 hours or less. The link above will set you up with a subject template.
================================================
FILE: file-icons-generator.js
================================================
// This is an helper script to generate the resources used by eDEX to display file-specific icons in fsDisp, from a fresh file-icons/source GitHub clone.
// Generated files are:
// - src/assets/icons/file-icons.json: monolithic JSON files containing SVG data needed to draw all the icons.
// - src/assets/misc/file-icons-match.js: script to match filenames to icons by using regex expressions.
//
// The generated files are pretty-printed. See prebuild-minify.js for automatic, on-CI minification of source files before bundling them in binary release assets.
// BEFORE RUNNING THIS SCRIPT:
// - npm run init-file-icons
// You can then use `npm run update-file-icons` which will pull the git submodules and run this script.
const fs = require("fs");
const path = require("path");
const CSON = require("cson-parser");
var fileIconsObject = {};
// Get file icons from fontawesome
fs.readdirSync(path.join(__dirname, "file-icons", "font-awesome", "svgs", "brands")).forEach(icon => {
let iconName = icon.replace(".svg", "");
let text = fs.readFileSync(path.join(__dirname, "file-icons", "font-awesome", "svgs", "brands", icon), {encoding: "utf8"});
let width = text.substr(text.indexOf('viewBox="0 0 ')+13);
width = Number(width.slice(0, width.indexOf(" ")));
let height = text.substr(text.indexOf('viewBox="0 0 ')+13+width.toString().length+1);
height = Number(height.slice(0, height.indexOf('"')));
let svg = text.substr(text.indexOf(">")+1);
svg = svg.replace("", "");
if (width === null || height === null) console.log(icon);
fileIconsObject[iconName] = {
width,
height,
svg
};
});
// Get file icons from file-icons/source
fs.readdirSync(path.join(__dirname, "file-icons", "source", "svg")).forEach(icon => {
let iconName = icon.toLowerCase().replace(".svg", "").replace("-1", "");
let text = fs.readFileSync(path.join(__dirname, "file-icons", "source", "svg", icon), {encoding: "utf8"});
let width = text.substr(text.indexOf('width="')+7);
width = Number(width.slice(0, width.indexOf("px")));
let height = text.substr(text.indexOf('height="')+8);
height = Number(height.slice(0, height.indexOf("px")));
let svg = text.substr(text.indexOf(">")+1);
svg = svg.replace("", "");
if (width === null || height === null) console.log(icon);
fileIconsObject[iconName] = {
width,
height,
svg
};
});
// Get file icons from file-icons/devopicons
fs.readdirSync(path.join(__dirname, "file-icons", "devopicons", "svg")).forEach(icon => {
if (!icon.endsWith(".svg")) return;
let iconName = icon.toLowerCase().replace(".svg", "").replace("-1", "");
let text = fs.readFileSync(path.join(__dirname, "file-icons", "devopicons", "svg", icon), {encoding: "utf8"});
let width = text.substr(text.indexOf('width="')+7);
width = Number(width.slice(0, width.indexOf("px")));
let height = text.substr(text.indexOf('height="')+8);
height = Number(height.slice(0, height.indexOf("px")));
let svg = text.substr(text.indexOf(">")+1);
svg = svg.replace("", "");
if (width === null || height === null) console.log(icon);
fileIconsObject[iconName] = {
width,
height,
svg
};
});
// Get file icons from file-icons/mfixx
fs.readdirSync(path.join(__dirname, "file-icons", "mfixx", "svg")).forEach(icon => {
if (!icon.endsWith(".svg")) return;
let iconName = icon.toLowerCase().replace(".svg", "").replace("-1", "");
let text = fs.readFileSync(path.join(__dirname, "file-icons", "mfixx", "svg", icon), {encoding: "utf8"});
let width = text.substr(text.indexOf('width="')+7);
width = Number(width.slice(0, width.indexOf("px")));
let height = text.substr(text.indexOf('height="')+8);
height = Number(height.slice(0, height.indexOf("px")));
let svg = text.substr(text.indexOf(">")+1);
svg = svg.replace("", "");
if (width === null || height === null) console.log(icon);
fileIconsObject[iconName] = {
width,
height,
svg
};
});
// Get file icons from file-icons/bytesize-icons
fs.readdirSync(path.join(__dirname, "file-icons", "bytesize-icons", "dist", "icons")).forEach(icon => {
if (!icon.endsWith(".svg")) return;
let iconName = icon.toLowerCase().replace(".svg", "");
let text = fs.readFileSync(path.join(__dirname, "file-icons", "bytesize-icons", "dist", "icons", icon), {encoding: "utf8"});
let dimensions = text.match(/viewBox="0 0 (\d+) (\d+)"/);
let width = dimensions[1];
let height = dimensions[2];
let svg = text.substr(text.indexOf(">")+1);
svg = svg.replace("", "");
if (width === null || height === null) console.log(icon);
fileIconsObject[iconName] = {
width,
height,
svg
};
});
// Override with eDEX-specific icons
fileIconsObject.showDisks = {
width: 24,
height: 24,
svg: 'PANEL
SYSTEM
TERMINAL
MAIN SHELL
PANEL
NETWORK
MAIN SHELL
EMPTY
EMPTY
EMPTY
EMPTY
MAIN - ${p}
`; }; // Prevent losing hardware keyboard focus on the terminal when using touch keyboard window.onmouseup = e => { if (window.keyboard.linkedToTerm) window.term[window.currentTerm].term.focus(); }; window.term[0].term.writeln("\033[1m"+`Welcome to eDEX-UI v${electron.remote.app.getVersion()} - Electron v${process.versions.electron}`+"\033[0m"); await _delay(100); window.fsDisp = new FilesystemDisplay({ parentId: "filesystem" }); await _delay(200); document.getElementById("filesystem").setAttribute("style", "opacity: 1;"); // Resend terminal CWD to fsDisp if we're hot reloading if (window.performance.navigation.type === 1) { window.term[window.currentTerm].resendCWD(); } await _delay(200); window.updateCheck = new UpdateChecker(); } window.themeChanger = theme => { ipc.send("setThemeOverride", theme); setTimeout(() => { window.location.reload(true); }, 100); }; window.remakeKeyboard = layout => { document.getElementById("keyboard").innerHTML = ""; window.keyboard = new Keyboard({ layout: path.join(keyboardsDir, layout+".json" || settings.keyboard+".json"), container: "keyboard" }); ipc.send("setKbOverride", layout); }; window.focusShellTab = number => { window.audioManager.folder.play(); if (number !== window.currentTerm && window.term[number]) { window.currentTerm = number; document.querySelectorAll(`ul#main_shell_tabs > li:not(:nth-child(${number+1}))`).forEach(e => { e.setAttribute("class", ""); }); document.getElementById("shell_tab"+number).setAttribute("class", "active"); document.querySelectorAll(`div#main_shell_innercontainer > pre:not(:nth-child(${number+1}))`).forEach(e => { e.setAttribute("class", ""); }); document.getElementById("terminal"+number).setAttribute("class", "active"); window.term[number].fit(); window.term[number].term.focus(); window.term[number].resendCWD(); window.fsDisp.followTab(); } else if (number > 0 && number <= 4 && window.term[number] !== null && typeof window.term[number] !== "object") { window.term[number] = null; document.getElementById("shell_tab"+number).innerHTML = "LOADING...
"; ipc.send("ttyspawn", "true"); ipc.once("ttyspawn-reply", (e, r) => { if (r.startsWith("ERROR")) { document.getElementById("shell_tab"+number).innerHTML = "ERROR
"; } else if (r.startsWith("SUCCESS")) { let port = Number(r.substr(9)); window.term[number] = new Terminal({ role: "client", parentId: "terminal"+number, port }); window.term[number].onclose = e => { delete window.term[number].onprocesschange; document.getElementById("shell_tab"+number).innerHTML = "EMPTY
"; document.getElementById("terminal"+number).innerHTML = ""; window.term[number].term.dispose(); delete window.term[number]; window.useAppShortcut("PREVIOUS_TAB"); }; window.term[number].onprocesschange = p => { document.getElementById("shell_tab"+number).innerHTML = `#${number+1} - ${p}
`; }; document.getElementById("shell_tab"+number).innerHTML = `::${port}
`; setTimeout(() => { window.focusShellTab(number); }, 500); } }); } }; // Settings editor window.openSettings = async () => { if (document.getElementById("settingsEditor")) return; // Build lists of available keyboards, themes, monitors let keyboards, themes, monitors, ifaces; fs.readdirSync(keyboardsDir).forEach(kb => { if (!kb.endsWith(".json")) return; kb = kb.replace(".json", ""); if (kb === window.settings.keyboard) return; keyboards += ``; }); fs.readdirSync(themesDir).forEach(th => { if (!th.endsWith(".json")) return; th = th.replace(".json", ""); if (th === window.settings.theme) return; themes += ``; }); for (let i = 0; i < electron.remote.screen.getAllDisplays().length; i++) { if (i !== window.settings.monitor) monitors += ``; } let nets = await window.si.networkInterfaces(); nets.forEach(net => { if (net.iface !== window.mods.netstat.iface) ifaces += ``; }); // Unlink the tactile keyboard from the terminal emulator to allow filling in the settings fields window.keyboard.detach(); new Modal({ type: "custom", title: `Settings (v${electron.remote.app.getVersion()})`, html: `| Key | Description | Value |
|---|---|---|
| shell | The program to run as a terminal emulator | |
| shellArgs | Arguments to pass to the shell | |
| cwd | Working Directory to start in | |
| env | Custom shell environment override | |
| username | Custom username to display at boot | |
| keyboard | On-screen keyboard layout code | |
| theme | Name of the theme to load | |
| termFontSize | Size of the terminal text in pixels | |
| audio | Activate audio sound effects | |
| audioVolume | Set default volume for sound effects (0.0 - 1.0) | |
| disableFeedbackAudio | Disable recurring feedback sound FX (input/output, mostly) | |
| port | Local port to use for UI-shell connection | |
| pingAddr | IPv4 address to test Internet connectivity | |
| clockHours | Clock format (12/24 hours) | |
| monitor | Which monitor to spawn the UI in (defaults to primary display) | |
| nointro | Skip the intro boot log and logo${(window.settings.nointroOverride) ? " (Currently overridden by CLI flag)" : ""} | |
| nocursor | Hide the mouse cursor${(window.settings.nocursorOverride) ? " (Currently overridden by CLI flag)" : ""} | |
| iface | Override the interface used for network monitoring | |
| allowWindowed | Allow using F11 key to set the UI in windowed mode | |
| keepGeometry | Try to keep a 16:9 aspect ratio in windowed mode | |
| excludeThreadsFromToplist | Display threads in the top processes list | |
| hideDotfiles | Hide files and directories starting with a dot in file display | |
| fsListView | Show files in a more detailed list instead of an icon grid | |
| experimentalGlobeFeatures | Toggle experimental features for the network globe | |
| experimentalFeatures | Toggle Chrome's experimental web features (DANGEROUS) |
| Enabled | Trigger | Action |
|---|
| Enabled | Trigger | Command |
|---|---|---|