[*] release v0.1.0

.gitignore

@@ -1,2 +1,4 @@
 build.log
 /target
+/web/pkg
+/web/dist

Makefile

@@ -40,13 +40,22 @@ desktop-debug:
 	$(desktop-build-env) $(run-env) cargo run --features=desktop
 
 web-build-debug:
-	wasm-pack build --target web --out-dir target/pkg --features=web --no-default-features
+	wasm-pack build --target web --out-dir ./web/pkg --features=web
 
 web-build-release:
-	wasm-pack build --release --target web --out-dir target/pkg --features=web --no-default-features
+	wasm-pack build --release --target web --out-dir ./web/pkg --features=web
 
-web-debug:
-	python3 -m http.server
+web-build-dist:
+	- rm -rf ./web/dist/*
+	wasm-pack build --release --target web --out-dir ./web/dist/pkg --features=web
+	cp -f ./web/index.html ./web/dist
+	cp -f ./ui/images/brand.png ./web/dist/pkg/favicon.png
+
+web-server:
+	python3 -m http.server -d web 8000
+
+web-server-dist:
+	python3 -m http.server -d web/dist 8800
 
 slint-view-android:
 	$(android-build-env) slint-viewer --auto-reload -I ui ./ui/android-window.slint

README.md

@@ -1,30 +1,35 @@
-<!-- <div style="display: flex, margin: 8px"> -->
-    <!-- <img src="./screenshot/1.png" width="100"/> -->
-    <!-- <img src="./screenshot/2.png" width="100"/> -->
-    <!-- <img src="./screenshot/3.png" width="100"/> -->
-    <!-- <img src="./screenshot/4.png" width="100"/> -->
-    <!-- <img src="./screenshot/5.png" width="100"/> -->
-    <!-- <img src="./screenshot/6.png" width="100"/> -->
-    <!-- <img src="./screenshot/7.png" width="100"/> -->
-    <!-- <img src="./screenshot/8.png" width="100"/> -->
-<!-- </div> -->
+<div style="display: flex, margin: 8px">
+    <img src="./screenshot/1-en.png" width="100"/>
+    <img src="./screenshot/2-en.png" width="100"/>
+    <img src="./screenshot/3-en.png" width="100"/>
+    <img src="./screenshot/4-en.png" width="100"/>
+</div>
 
 [中文文档](./README.zh-CN.md)
 
 ### Introduction
-
-### Features
+It's a Rust template project for Slint GUI. It cantains frequently-used components, setting panel, configure, simple database feature and other somall feature. This project can be compiled to Desktop (Windows, Linix, Macos), Android and Web platform.
 
 ### Android platform build information
 - `min-sdk-version = 23`
 - `target-sdk-version = 32`
 
 #### How to build?
-- Install `Rust` and `Cargo`
-- Install Android `sdk`, `ndk`, `jdk17`, and set environment variables
+- Install `Rust`, `Cargo`, `cargo-apk` and `wasm-pack`
+- Install Android `sdk`, `ndk`, `jdk17`, and set environment variables.
+- Example:
+```
+    export JAVA_HOME=$LIBRARY_PATH/openjdk
+    export ANDROID_HOME=$HOME/Android/Sdk
+    export ANDROID_NDK=$HOME/Android/Sdk/ndk/27.0.12077973
+    export ANDROID_NDK_ROOT=$HOME/Android/Sdk/ndk/27.0.12077973
+```
+
 - Run `make android-build-release` to build a release version android APK
 - Run `make desktop-debug` to run it on desktop platform
 - Run `make desktop-build-release` to build a release version desktop application
+- Run `make web-build-dist` to build a release version website. And the output directory is `web/dist`
+- Run `make web-server-dist` to run a website server
 - Refer to [Makefile](./Makefile) for more information
 
 ### Reference

README.zh-CN.md

@@ -1,19 +1,17 @@
-<!-- <div style="display: flex, margin: 8px"> -->
-<!--     <img src="./screenshot/1.png" width="100"/> -->
-<!--     <img src="./screenshot/2.png" width="100"/> -->
-<!--     <img src="./screenshot/3.png" width="100"/> -->
-<!--     <img src="./screenshot/4.png" width="100"/> -->
-<!--     <img src="./screenshot/5.png" width="100"/> -->
-<!--     <img src="./screenshot/6.png" width="100"/> -->
-<!--     <img src="./screenshot/7.png" width="100"/> -->
-<!--     <img src="./screenshot/8.png" width="100"/> -->
-<!-- </div> -->
+<div style="display: flex, margin: 8px">
+    <img src="./screenshot/1-cn.png" width="100"/>
+    <img src="./screenshot/2-cn.png" width="100"/>
+    <img src="./screenshot/3-cn.png" width="100"/>
+    <img src="./screenshot/4-cn.png" width="100"/>
+    <img src="./screenshot/5-cn.png" width="100"/>
+    <img src="./screenshot/6-cn.png" width="100"/>
+    <img src="./screenshot/7-cn.png" width="100"/>
+</div>
 
 [English Documentation](./README.md)
 
 ### 简介
-
-### 功能
+这是一个基于Rust和Slint GUI框架的模板项目。包含一些常用的组件，设置面板，配置文件，简单的数据库功能和其他小功能。这个项目的主要目的是给新手开发者提供一个简单快速的Slint GUI开发环境。该项目能够编译到桌面平台（Windows, Linux, Macos），Android移动平台和Web平台。
 
 ### 安卓平台编译信息
 - `min-sdk-version = 23`
@@ -22,9 +20,18 @@
 ### 如何构建?
 - 安装 `Rust` 和 `Cargo`
 - 安装 Android `sdk`, `ndk`, `jdk17`, 和设置对应的环境变量
+- 例子:
+```
+    export JAVA_HOME=$LIBRARY_PATH/openjdk
+    export ANDROID_HOME=$HOME/Android/Sdk
+    export ANDROID_NDK=$HOME/Android/Sdk/ndk/27.0.12077973
+    export ANDROID_NDK_ROOT=$HOME/Android/Sdk/ndk/27.0.12077973
+```
+
 - 运行 `make android-build-release` 编译安卓平台程序
 - 运行 `make desktop-debug` 调试桌面平台程序
 - 运行 `make desktop-build-release` 编译桌面平台程序
+- 运行 `make web-build-dist` 编译Web平台。构建输出目录`web/dist`
 - 参考 [Makefile](./Makefile) 了解更多信息
 
 ### 参考

ui/panel/desktop/examples/introducion.slint

@@ -10,22 +10,31 @@ export component Introduction inherits Flickable {
         {
             title: "简介",
             contents: [
-                "这是一个基于Rust和Slint GUI框架的模板项目。包含一些常用的组件，设置面板，配置文件，简单的数据库功能和其他小功能。这个项目的主要目的是给新手开发者提供一个简单快速的Slint GUI开发环境。该项目能够编译到桌面平台（Windows, Linux, Macos）和Android移动平台。"
+                "这是一个基于Rust和Slint GUI框架的模板项目。包含一些常用的组件，设置面板，配置文件，简单的数据库功能和其他小功能。这个项目的主要目的是给新手开发者提供一个简单快速的Slint GUI开发环境。该项目能够编译到桌面平台（Windows, Linux, Macos），Android移动平台和Web平台。"
             ],
         },
         {
             title: "如何使用项目？",
             contents: [
                 "1. 打开Cargo.toml文件，将所有的`slint-template` 和`slint_template`字符串替换为`你的项目名`",
                 "2. 打开Makefile文件，将`app-name=slint-template` 修改为`app-name=你的项目名`",
-                "3. 如果是Windows平台，需要修改`windows/version.h`文件，设置程序名称和描述信息等",
-                "4. 替换`ui/images/brand.png`和`windows/icon.ico`为你的程序图标",
-                "5. 使用`make desktop-build-release`构建桌面平台应用程序, `make android-build-release`构建安卓平台应用程序。更多命令可参考Makefile文件",
-                "6. 如果是Android平台，需要替换`android/res/*/android12splash.png` 和 `android/res/*/splash.png`为你的启动屏, 大小最好为432x432。替换`android/res/*/ic_launcher.png`为你的程序图标, 大小最好为655x655",
+                "3. 替换`ui/images/brand.png`为你的程序图标",
+                "4. 如果是Windows平台，需要修改`windows/version.h`文件，设置程序名称和描述信息等。替换`windows/icon.ico`为你的程序图标",
+                "5. 如果是Android平台，需要替换`android/res/*/android12splash.png` 和 `android/res/*/splash.png`为你的启动屏, 大小最好为432x432。替换`android/res/*/ic_launcher.png`为你的程序图标, 大小最好为655x655",
+                "6. 如果是Web平台，需要替换`web/index.html`文件相关信息。"
             ],
         },
         {
-            title: "如何设置Android构建环境？",
+            title: "如何编译项目？",
+            contents: [
+                "1. 桌面平台：`make desktop-build-release`",
+                "2. Android平台：`make android-build-release`",
+                "3. Web平台：make web-buid-dist",
+                "4. 更多命令可参考Makefile文件",
+            ]
+        },
+        {
+            title: "如何设置Android编译环境？",
             title-link: "https://snapshots.slint.dev/master/docs/rust/slint/android/#building-and-deploying",
             contents: [
                 "1. 安装编译目标：`rustup target add aarch64-linux-android`",
@@ -34,9 +43,62 @@ export component Introduction inherits Flickable {
                 "4. 例子：\n    export JAVA_HOME=$LIBRARY_PATH/openjdk\n    export ANDROID_HOME=$HOME/Android/Sdk\n    export ANDROID_NDK=$HOME/Android/Sdk/ndk/27.0.12077973\n    export ANDROID_NDK_ROOT=$HOME/Android/Sdk/ndk/27.0.12077973",
             ],
         },
+        {
+            title: "如何设置Web编译环境？",
+            title-link: "https://releases.slint.dev/1.7.0/docs/slint/src/quickstart/running_in_a_browser",
+            contents: [
+                "1. 安装编译工具：`cargo install wasm-pack`",
+                "2. 安装`python3`作为http服务器",
+            ],
+        },
     ];
 
-    private property <[ParagraphEntry]> entries-en: [{ title: "Brief" }];
+    private property <[ParagraphEntry]> entries-en: [
+        {
+            title: "Introduction",
+            contents: [
+                "It's a Rust template project for Slint GUI. It cantains frequently-used components, setting panel, configure, simple database feature and other somall feature. This project can be compiled to Desktop (Windows, Linix, Macos), Android and Web platform.",
+            ]
+        },
+        {
+            title: "How to use this project？",
+            contents: [
+                "1. Open the Cargo.toml file, replace all the `slint-template` and `slint_template` string to your project name",
+                "2. Open the Makefile file, replace `app-name=slint-template` to `app-name=Your-project-name`",
+                "3. Replace `ui/images/brand.png` to your brand picture",
+                "4. If using Windows platform，open the `windows/version.h` file，replace informations to your project and replace `windows/icon.ico`",
+                "5. If using Android platform，replace `android/res/*/android12splash.png` and `android/res/*/splash.png` to your splash picture, the preferred size is 432x432。replace `android/res/*/ic_launcher.png` to your app icon, the preferred size is 655x655",
+                "6. If using Web platform，replace `web/index.html` informations about the project"
+            ],
+        },
+        {
+            title: "How to compile the project？",
+            contents: [
+                "1. Desktop platform：`make desktop-build-release`",
+                "2. Android platform：`make android-build-release`",
+                "3. Web platform：make web-buid-dist",
+                "4. Refer the Makefile for more information",
+            ]
+        },
+        {
+            title: "How to setup Android compiled environment？",
+            title-link: "https://snapshots.slint.dev/master/docs/rust/slint/android/#building-and-deploying",
+            contents: [
+                "1. Install rust target：`rustup target add aarch64-linux-android`",
+                "2. Install compiled tool：`cargo install cargo-apk`",
+                "3. Setup Android environment variables：`ANDROID_HOME`, `ANDROID_NDK`, `ANDROID_NDK_ROOT` 和 `JAVA_HOME`",
+                "4. Example：\n    export JAVA_HOME=$LIBRARY_PATH/openjdk\n    export ANDROID_HOME=$HOME/Android/Sdk\n    export ANDROID_NDK=$HOME/Android/Sdk/ndk/27.0.12077973\n    export ANDROID_NDK_ROOT=$HOME/Android/Sdk/ndk/27.0.12077973",
+            ],
+        },
+        {
+            title: "How to setup Web compiled environment？",
+            title-link: "https://releases.slint.dev/1.7.0/docs/slint/src/quickstart/running_in_a_browser",
+            contents: [
+                "1. Install compiled tool：`cargo install wasm-pack`",
+                "2. Install `python3` as a http server",
+            ],
+        },
+    ];
 
     private property <[ParagraphEntry]> entries: Store.is-cn ? entries-cn : entries-en;
 

ui/store.slint

@@ -61,7 +61,7 @@ export global Store {
         win-height: 800,
         font-size: "24",
         font-family: "Source Han Sans CN",
-        language: "cn",
+        language: "en",
         always-on-top: false,
         no-frame: true,
         is-dark: false,

ui/web-window.slint

@@ -1,36 +1,24 @@
 import { Util } from "./util.slint";
 import { Logic } from "./logic.slint";
 import { Theme, Icons } from "./theme.slint";
-import { Store, SettingDetailIndex, DeviceType, SettingProxy } from "./store.slint";
+import { Store,  DeviceType  } from "./store.slint";
 
 import { WebPanel } from "panel/web/panel.slint";
-import { SettingIconsBar } from "./panel/setting/desktop.slint";
-import { LoadingStatus, Toast, IconsDialogSetting, IconsDialog, ConfirmDialog, ConfirmDialogSetting, Blanket, LandingPage, AboutSetting, ToastSetting, ToastStatus, AppPosType, PopupActionSetting } from "./base/widgets.slint";
+import { LoadingStatus, Toast, ConfirmDialog, ConfirmDialogSetting, Blanket, ToastSetting, ToastStatus, PopupActionSetting } from "./base/widgets.slint";
 
 export component AppWindow inherits Window {
     default-font-size: Theme.default-font-size;
     default-font-family: Theme.default-font-family;
     background: Theme.base-background;
-    icon: Icons.brand;
-    title: AboutSetting.app-name;
 
     WebPanel { }
 
-    if IconsDialogSetting.show || ConfirmDialogSetting.show: Blanket {
+    if ConfirmDialogSetting.show: Blanket {
         clicked => {
-            IconsDialogSetting.show = false;
             ConfirmDialogSetting.show = false;
         }
     }
 
-    if IconsDialogSetting.show: IconsDialog {
-        is-prevent-event-forward: true;
-        column-count: Store.device-type == DeviceType.Desktop ? 6 : 5;
-        icon-size: Store.device-type == DeviceType.Desktop ? Theme.icon-size * 3 : Theme.icon-size;
-        select-index(handle-type, index, user-data) => {
-        }
-    }
-
     if ConfirmDialogSetting.show: ConfirmDialog {
         is-prevent-event-forward: true;
         width: Math.min(root.width * 0.9, self.vbox-preferred-width * 2);
@@ -47,5 +35,5 @@ export component AppWindow inherits Window {
 }
 
 export {
-    AppPosType, Util, Logic, Store, Theme, Icons, IconsDialogSetting, LoadingStatus, SettingDetailIndex, AboutSetting, ToastSetting, ToastStatus, DeviceType , SettingProxy, PopupActionSetting
+    Util, Logic, Store, Theme, Icons, LoadingStatus, ToastSetting, ToastStatus, DeviceType, PopupActionSetting
     }

web/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="It's a Rust Slint GUI template project for quick start"
+    />
+    <meta name="keyword" content="Programming, Rust, Slint" />
+    <meta property="og:site_name" content="Slint Template" />
+    <meta property="og:type" content="website" />
+    <link rel="dev icon" href="./ui/images/brand.png" />
+    <link rel="shortcut icon" href="./pkg/favicon.png" />
+    <title>Slint Template</title>
+  </head>
+
+  <body
+    style="width: 100vw; height: 100wh; overflow: hidden; padding: 0; margin: 0"
+  >
+    <!-- canvas required by the Slint runtime, Don't change the id -->
+    <canvas
+      id="canvas"
+      style="width: 100vw; height: 100vh; border: none; outline: none"
+    ></canvas>
+    <script type="module">
+      // import the generated file. You should repace your project file
+      import init from './pkg/slint_template.js';
+      init();
+    </script>
+  </body>
+</html>