Skip to content

Latest commit

 

History

History
141 lines (107 loc) · 3.58 KB

Building.md

File metadata and controls

141 lines (107 loc) · 3.58 KB
Raw

English | 中文

Tiefsee Project Description

Tiefsee4 consists of the following 5 sub-projects:

Tiefsee

The main program, using WinForm to host WebView2.
It provides Web APIs through HttpListener to enable features such as window management, file operations, and image processing.


TiefseeLauncher

The launcher for Tiefsee.
Since importing libraries into a .NET project slows down startup even without any code, a separate clean project is used as the entry point. The launcher checks whether the main program is already running; if it is, it uses Pipe to notify the main program to open a new window, enabling a fast startup.


TiefseeAppPackager

Used to package the Tiefsee project into MSIX format.


BuildAll

Used to compile Tiefsee and TiefseeLauncher, and then package the output into a ZIP file.


## Www A web project where most of the core logic of the program resides.
It uses Gulp to bundle and compile EJS, TypeScript, SCSS, and Rust.

Directory Structure

Www
 ├📁 ejs: Compiled into HTML
 ├📁 scss: Compiled into CSS
 ├📁 ts: Compiled into JS
 ├📁 rust: Compiled into WASM
 ├📁 lang: Directory for translation files
 ├📁 img: Directory for images; SVGs are bundled into JS via Gulp
 ├📁 iframe: HTML files for iframe pages
 │
 ├📁 vendor: Directory for third-party JS files
 │
 ├📁 css: Generated by Gulp compilation
 ├📁 js: Generated by Gulp compilation
 ├📁 wasm: Generated by Gulp compilation
 │
 ├ MainWindow.html: Main window, generated by Gulp compilation
 ├ SettingWindow.html: Settings window, generated by Gulp compilation
 │
 └ gulpfile.js

Initial Installation

  1. Install nodejs
    https://nodejs.org/

  1. Install Gulp 
    npm install gulp -g

  1. Open the Www directory in Tiefsee4 
    cd Www

  1. Update npm packages 
    npm i
  2. Install Rust
    https://www.rust-lang.org/tools/install

  1. Install wasm32-unknown-unknown 
    rustup target add wasm32-unknown-unknown

  1. Install wasm-pack 
    cargo install wasm-pack

Compilation

  • Bundle and compile EJS, TypeScript, SCSS, and Rust, then copy the processed files into the output folder of the Tiefsee project. 
     gulp build

  • Continuously monitor file changes, and automatically trigger bundling and compilation whenever changes are detected. 
     gulp watch

SVG Icon Usage Instructions

Tiefsee has the function of switching themes. In order to make the icons switch colors, all icons use SVG.
After executing gulp build, the SVG files in Www/img/default will all be packaged into one js, output to Www/js/SvgList.js

  • In SVG, you can use var(--color-white) to get the main color of the current theme, for example

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
 	<rect style="fill:var(--color-white)" x="7" y="12" width="11" height="1"/>
 </svg>

  • In ts, you can get the text of SVG through SvgList["svg name"], for example

     var svgText = SvgList["window-menu.svg"];

  • In ejs, you can get the text of SVG through <%- await readFile("./img/default/"); %>, for example

     <div>
 	<%- await readFile("./img/default/tool-rotateCcw.svg"); %>
 </div>

Supplement

Tiefsee is a program where all UI is rendered with WebView2,
Commonly used C# features have been encapsulated so that JavaScript can call them directly,
In most cases, there is no need to write C#, so you can directly open the Www project with Visual Studio Code for development.