fix some bug

resources/shaders/140/gcode.fs

@@ -0,0 +1,168 @@
+#version 140
+
+#define INTENSITY_CORRECTION 0.6
+
+// normalized values for (-0.6/1.31, 0.6/1.31, 1./1.31)
+const vec3 LIGHT_TOP_DIR = vec3(-0.4574957, 0.4574957, 0.7624929);
+#define LIGHT_TOP_DIFFUSE    (0.8 * INTENSITY_CORRECTION)
+#define LIGHT_TOP_SPECULAR   (0.125 * INTENSITY_CORRECTION)
+#define LIGHT_TOP_SHININESS  20.0
+
+// normalized values for (1./1.43, 0.2/1.43, 1./1.43)
+const vec3 LIGHT_FRONT_DIR = vec3(0.6985074, 0.1397015, 0.6985074);
+#define LIGHT_FRONT_DIFFUSE  (0.3 * INTENSITY_CORRECTION)
+
+#define INTENSITY_AMBIENT    0.3
+
+const mat3 KTravel_Colors = mat3(0.505, 0.064, 0.028,
+                                0.219, 0.282, 0.609,
+                                0.112, 0.422, 0.103);
+
+uniform vec2 u_isTopLayer_hasCustomOptins;
+uniform mat3 normal_matrix;
+uniform float emission_factor;
+uniform vec3 u_rangeType_isUnlit_topLayerIndex;
+uniform vec4 u_isRangeView_isRangeVaild_topLayerOnly_viewType;
+uniform vec2 u_pathDataRange;
+uniform sampler2D s_color_range_texture;
+uniform samplerBuffer s_per_move_data_texture;
+
+in float moveId;
+in vec3 frag_normal;
+in vec3 frag_pos;
+
+out vec4 frag_color;
+
+bool is_top_layer()
+{
+    return u_isTopLayer_hasCustomOptins.x > 0.5;
+}
+
+vec4 extrusion_color(vec3 type_rangeData_deltaExtruder)
+{
+    vec4 final_color = vec4(0.25, 0.25, 0.25, 1.0); // Neutral_Color
+    float path_data = type_rangeData_deltaExtruder.y;
+    if (u_isRangeView_isRangeVaild_topLayerOnly_viewType.x > 0.5)
+    {
+        float view_type = u_isRangeView_isRangeVaild_topLayerOnly_viewType.w;
+        if (view_type < 0.5 || (view_type > 8.5 && view_type < 9.5)) // Summer or ColorPrint
+        {
+            if (int(path_data + 0.5) > int(u_pathDataRange.y + 0.5))
+            {
+                final_color = vec4(0.5, 0.5, 0.5, 1.0);
+                return final_color;
+            }
+        }
+        else if (view_type > 9.5 && view_type < 10.5) // FilamentId
+        {
+            float path_data2 = type_rangeData_deltaExtruder.z;
+            float id = path_data / (u_pathDataRange.y - u_pathDataRange.x);
+            float role = path_data2 / (u_pathDataRange.y - u_pathDataRange.x);
+            final_color = vec4(id, role, id, 1.0);
+            return final_color;
+        }
+        // helio
+        else if (view_type > 11.5 && view_type < 14.5)
+        {
+            if (path_data < u_pathDataRange.x - 0.01)
+            {
+                final_color = vec4(0.5, 0.5, 0.5, 1.0);
+                return final_color;
+            }
+        }
+        // end helio
+        vec2 uv = vec2(0.0, 0.5);
+        if (u_isRangeView_isRangeVaild_topLayerOnly_viewType.y > 0.5)
+        {
+            if (u_rangeType_isUnlit_topLayerIndex.x < 0.5)
+            {
+                uv.x = (path_data - u_pathDataRange.x) / (u_pathDataRange.y - u_pathDataRange.x);
+            }
+            else
+            {
+                uv.x = (log(path_data) - u_pathDataRange.x) / (u_pathDataRange.y - u_pathDataRange.x);
+            }
+            uv.x = clamp(uv.x, 0.0, 1.0);
+        }
+        final_color = texture(s_color_range_texture, uv);
+    }
+    return final_color;
+}
+
+vec4 get_base_color(vec3 type_rangeData_deltaExtruder)
+{
+    vec4 final_color = vec4(0.0, 0.0, 0.0, 1.0);
+    float path_type = type_rangeData_deltaExtruder.x;
+
+    if (path_type > 7.5 && path_type < 8.5) //EMoveType::Travel
+    {
+        bool is_top_layer_only = u_isRangeView_isRangeVaild_topLayerOnly_viewType.z > 0.5;
+        if (!is_top_layer_only || is_top_layer())
+        {
+            float view_type = u_isRangeView_isRangeVaild_topLayerOnly_viewType.w;
+            if ((view_type > 3.5 && view_type < 4.5) || (view_type > 7.5 && view_type < 8.5))
+            {
+                final_color = extrusion_color(type_rangeData_deltaExtruder);
+            }
+            else
+            {
+                float flag = sign(type_rangeData_deltaExtruder.z);
+                final_color.rgb = KTravel_Colors[int(flag) + 1];
+            }
+        }
+        else
+        {
+           final_color = vec4(0.25, 0.25, 0.25, 1.0); // Neutral_Color
+        }
+    }
+    else if (path_type > 8.5 && path_type < 9.5)
+    {
+        final_color = vec4(1.0, 1.0, 0.0, 1.0); // Wipe_Color
+    }
+    else if (path_type > 9.5 && path_type < 10.5)
+    {
+        bool is_top_layer_only = u_isRangeView_isRangeVaild_topLayerOnly_viewType.z > 0.5;
+        if (!is_top_layer_only || is_top_layer())
+        {
+            final_color = extrusion_color(type_rangeData_deltaExtruder);
+        }
+        else
+        {
+            final_color = vec4(0.25, 0.25, 0.25, 1.0); // Neutral_Color
+        }
+    }
+    return final_color;
+}
+
+void main()
+{
+    vec4 custom_option_color = vec4(0.5, 0.5, 0.5, 1.0);
+
+    vec3 type_rangeData_deltaExtruder = texelFetch(s_per_move_data_texture, int(moveId)).rgb;
+    vec4 base_color = get_base_color(type_rangeData_deltaExtruder);
+
+    vec4 mixed_color = mix(custom_option_color, base_color, u_isTopLayer_hasCustomOptins.y > 0.5 ? 0.0 : 1.0);
+    // x = tainted, y = specular;
+    vec2 intensity = vec2(0.0, 0.0);
+    float t_emission_factor = 1.0;
+    if (u_rangeType_isUnlit_topLayerIndex.y < 0.5)
+    {
+        vec3 norm = normal_matrix * normalize(frag_normal);
+        norm = normalize(norm);
+        // Compute the cos of the angle between the normal and lights direction. The light is directional so the direction is constant for every vertex.
+        // Since these two are normalized the cosine is the dot product. We also need to clamp the result to the [0,1] range.
+        float NdotL = max(dot(norm, LIGHT_TOP_DIR), 0.0);
+
+        intensity.x = INTENSITY_AMBIENT + NdotL * LIGHT_TOP_DIFFUSE;
+
+        intensity.y = LIGHT_TOP_SPECULAR * pow(max(dot(-normalize(frag_pos.xyz), reflect(-LIGHT_TOP_DIR, norm)), 0.0), LIGHT_TOP_SHININESS);
+
+        // Perform the same lighting calculation for the 2nd light source (no specular applied).
+        NdotL = max(dot(norm, LIGHT_FRONT_DIR), 0.0);
+        intensity.x += NdotL * LIGHT_FRONT_DIFFUSE;
+
+        t_emission_factor = emission_factor;
+    }
+
+    frag_color = vec4(vec3(intensity.y) + mixed_color.rgb * (intensity.x + t_emission_factor), mixed_color.a);
+}

resources/shaders/140/gcode.vs

@@ -0,0 +1,110 @@
+#version 140
+
+uniform mat4 view_model_matrix;
+uniform mat4 projection_matrix;
+
+uniform samplerBuffer s_position_texture;
+uniform samplerBuffer s_width_height_data_texture;
+uniform samplerBuffer s_segment_texture;
+
+out float moveId;
+out vec3 frag_normal;
+out vec3 frag_pos;
+
+void main()
+{
+    vec4 seg_startEnd_hasPrev_prevIndex = texelFetch(s_segment_texture, gl_InstanceID);
+    int start_index = int(seg_startEnd_hasPrev_prevIndex.x);
+    int end_index = int(seg_startEnd_hasPrev_prevIndex.y);
+    bool hasPrev = seg_startEnd_hasPrev_prevIndex.z > 0.5;
+
+    vec4 startPos_mid = texelFetch(s_position_texture, start_index);
+    vec4 endPos_mid = texelFetch(s_position_texture, end_index);
+
+    vec3 line = endPos_mid.xyz - startPos_mid.xyz;
+    vec3 line_dir = vec3(1.0, 0.0, 0.0);
+    float line_len = length(line);
+    line_dir = line / max(line_len, 1e-6);
+
+    vec3 right_dir = vec3(line_dir.y, -line_dir.x, 0.0);
+    vec3 up = vec3(0.0, 0.0, 1.0);
+    if (length(right_dir)  < 1e-4)
+    {
+        up = vec3(1.0, 0.0, 0.0);
+        right_dir = cross(line_dir, up);
+    }
+    else
+    {
+        right_dir = normalize(right_dir);
+        line_dir = normalize(line_dir);
+        up = cross(right_dir, line_dir);
+    }
+
+    vec3 base_pos = gl_VertexID < 4 ? startPos_mid.xyz : endPos_mid.xyz;
+    moveId = endPos_mid.w + 0.5;
+
+    vec2 width_height = texelFetch(s_width_height_data_texture, int(moveId)).rg;
+    float width = width_height.x;
+    float height = width_height.y;
+
+    float half_width = 0.5 * width;
+    float half_height = 0.5 * height;
+    vec3 d_up = half_height * up;
+    vec3 d_right = half_width * right_dir;
+    vec3 d_down = -half_height * up;
+    vec3 d_left = -half_width * right_dir;
+
+    vec3 position = base_pos - half_height * up;
+    if (0 == gl_VertexID || 4 == gl_VertexID)
+    {
+        position = position + d_up;
+        frag_normal = up;
+    }
+    else if (1 == gl_VertexID || 5 == gl_VertexID)
+    {
+        position = position + d_right;
+        frag_normal = right_dir;
+    }
+    else if (2 == gl_VertexID || 6 == gl_VertexID)
+    {
+        position = position + d_down;
+        frag_normal = -up;
+    }
+    else if (3 == gl_VertexID || 7 == gl_VertexID)
+    {
+        position = position + d_left;
+        frag_normal = -right_dir;
+    }
+
+    if (gl_VertexID > 7) {
+        int prev_start_index = int(seg_startEnd_hasPrev_prevIndex.w);
+        vec4 prevPos_mid = texelFetch(s_position_texture, prev_start_index);
+        if (hasPrev) {
+            vec3 prev_dir = startPos_mid.xyz - prevPos_mid.xyz;
+            prev_dir = prev_dir / max(length(prev_dir), 1e-6);
+            prev_dir = normalize(prev_dir);
+            vec3 prev_right_dir = vec3(prev_dir.y, -prev_dir.x, 0.0);
+            prev_right_dir = normalize(prev_right_dir);
+            vec3 prev_left_dir = -prev_right_dir;
+            vec3 prev_up = cross(prev_right_dir, prev_dir);
+
+            vec3 prev_second_pos = startPos_mid.xyz - half_height * prev_up;
+            if (8 == gl_VertexID)
+            {
+                position = prev_second_pos + half_width * prev_left_dir;
+                frag_normal = prev_left_dir;
+            }
+
+            else if (9 == gl_VertexID)
+            {
+                position = prev_second_pos + half_width * prev_right_dir;
+                frag_normal = prev_right_dir;
+            }
+        }
+    }
+
+    vec4 final_position = view_model_matrix * vec4(position, 1.0);
+    frag_pos = final_position.xyz;
+    frag_normal = normalize(frag_normal);
+    gl_Position = projection_matrix * final_position;
+}

resources/shaders/140/gcode_custom_effect.fs

@@ -0,0 +1,50 @@
+#version 140
+
+#define INTENSITY_CORRECTION 0.6
+
+// normalized values for (-0.6/1.31, 0.6/1.31, 1./1.31)
+const vec3 LIGHT_TOP_DIR = vec3(-0.4574957, 0.4574957, 0.7624929);
+#define LIGHT_TOP_DIFFUSE    (0.8 * INTENSITY_CORRECTION)
+#define LIGHT_TOP_SPECULAR   (0.125 * INTENSITY_CORRECTION)
+#define LIGHT_TOP_SHININESS  20.0
+
+// normalized values for (1./1.43, 0.2/1.43, 1./1.43)
+const vec3 LIGHT_FRONT_DIR = vec3(0.6985074, 0.1397015, 0.6985074);
+#define LIGHT_FRONT_DIFFUSE  (0.3 * INTENSITY_CORRECTION)
+
+#define INTENSITY_AMBIENT    0.3
+
+const mat3 KTravel_Colors = mat3(0.505, 0.064, 0.028,
+                                0.219, 0.282, 0.609,
+                                0.112, 0.422, 0.103);
+
+uniform mat3 normal_matrix;
+uniform float emission_factor;
+uniform vec4 u_base_color;
+
+in vec3 frag_normal;
+in vec3 frag_pos;
+
+out vec4 frag_color;
+
+void main()
+{
+    // x = tainted, y = specular;
+    vec2 intensity = vec2(0.0, 0.0);
+    float t_emission_factor = emission_factor;
+    vec3 norm = normal_matrix * normalize(frag_normal);
+    norm = normalize(norm);
+    // Compute the cos of the angle between the normal and lights direction. The light is directional so the direction is constant for every vertex.
+    // Since these two are normalized the cosine is the dot product. We also need to clamp the result to the [0,1] range.
+    float NdotL = max(dot(norm, LIGHT_TOP_DIR), 0.0);
+
+    intensity.x = INTENSITY_AMBIENT + NdotL * LIGHT_TOP_DIFFUSE;
+
+    intensity.y = LIGHT_TOP_SPECULAR * pow(max(dot(-normalize(frag_pos.xyz), reflect(-LIGHT_TOP_DIR, norm)), 0.0), LIGHT_TOP_SHININESS);
+
+    // Perform the same lighting calculation for the 2nd light source (no specular applied).
+    NdotL = max(dot(norm, LIGHT_FRONT_DIR), 0.0);
+    intensity.x += NdotL * LIGHT_FRONT_DIFFUSE;
+
+    frag_color = vec4(vec3(intensity.y) + u_base_color.rgb * (intensity.x + t_emission_factor), u_base_color.a);
+}

resources/shaders/140/gcode_options.fs

@@ -0,0 +1,79 @@
+#version 140
+
+#define INTENSITY_CORRECTION 0.6
+
+// normalized values for (-0.6/1.31, 0.6/1.31, 1./1.31)
+const vec3 LIGHT_TOP_DIR = vec3(-0.4574957, 0.4574957, 0.7624929);
+#define LIGHT_TOP_DIFFUSE    (0.8 * INTENSITY_CORRECTION)
+#define LIGHT_TOP_SPECULAR   (0.125 * INTENSITY_CORRECTION)
+#define LIGHT_TOP_SHININESS  20.0
+
+// normalized values for (1./1.43, 0.2/1.43, 1./1.43)
+const vec3 LIGHT_FRONT_DIR = vec3(0.6985074, 0.1397015, 0.6985074);
+#define LIGHT_FRONT_DIFFUSE  (0.3 * INTENSITY_CORRECTION)
+
+#define INTENSITY_AMBIENT    0.3
+
+uniform float u_is_top_layer;
+uniform mat3 normal_matrix;
+uniform vec4 u_isUnlit_optionTextureSize_topLayerOnly_emissionFactor;
+uniform sampler2D s_option_color_texture;
+uniform samplerBuffer s_per_move_data_texture;
+
+in float moveId;
+in vec3 frag_normal;
+in vec3 frag_pos;
+
+out vec4 frag_color;
+
+bool is_top_layer()
+{
+    return u_is_top_layer > 0.5;
+}
+
+vec4 get_base_color(float moveType)
+{
+    vec4 final_color = vec4(0.0, 0.0, 0.0, 1.0);
+
+    bool is_top_layer_only = u_isUnlit_optionTextureSize_topLayerOnly_emissionFactor.z > 0.5;
+    if (!is_top_layer_only || is_top_layer())
+    {
+        final_color = texture(s_option_color_texture, vec2((moveType - 1.0 + 0.5) / u_isUnlit_optionTextureSize_topLayerOnly_emissionFactor.y, 0.5));
+    }
+    else
+    {
+        final_color = vec4(0.25, 0.25, 0.25, 1.0); // Neutral_Color
+    }
+    return final_color;
+}
+
+void main()
+{
+    float moveType = texelFetch(s_per_move_data_texture, int(moveId)).r;
+
+    vec4 base_color = get_base_color(moveType);
+
+    // x = tainted, y = specular;
+    vec2 intensity = vec2(0.0, 0.0);
+    float t_emission_factor = 1.0;
+    if (u_isUnlit_optionTextureSize_topLayerOnly_emissionFactor.x < 0.5)
+    {
+        vec3 norm = normal_matrix * normalize(frag_normal);
+        norm = normalize(norm);
+        // Compute the cos of the angle between the normal and lights direction. The light is directional so the direction is constant for every vertex.
+        // Since these two are normalized the cosine is the dot product. We also need to clamp the result to the [0,1] range.
+        float NdotL = max(dot(norm, LIGHT_TOP_DIR), 0.0);
+
+        intensity.x = INTENSITY_AMBIENT + NdotL * LIGHT_TOP_DIFFUSE;
+
+        intensity.y = LIGHT_TOP_SPECULAR * pow(max(dot(-normalize(frag_pos.xyz), reflect(-LIGHT_TOP_DIR, norm)), 0.0), LIGHT_TOP_SHININESS);
+
+        // Perform the same lighting calculation for the 2nd light source (no specular applied).
+        NdotL = max(dot(norm, LIGHT_FRONT_DIR), 0.0);
+        intensity.x += NdotL * LIGHT_FRONT_DIFFUSE;
+
+        t_emission_factor = u_isUnlit_optionTextureSize_topLayerOnly_emissionFactor.w;
+    }
+
+    frag_color = vec4(vec3(intensity.y) + base_color.rgb * (intensity.x + t_emission_factor), base_color.a);
+}

resources/shaders/140/gcode_options.vs

@@ -0,0 +1,39 @@
+#version 140
+
+in vec3 v_position;
+in vec3 v_normal;
+
+uniform mat4 view_model_matrix;
+uniform mat4 projection_matrix;
+
+uniform samplerBuffer s_position_texture;
+uniform samplerBuffer s_width_height_data_texture;
+uniform samplerBuffer s_segment_texture;
+
+out float moveId;
+out vec3 frag_normal;
+out vec3 frag_pos;
+
+void main()
+{
+    vec4 seg_startEnd_hasPrev = texelFetch(s_segment_texture, gl_InstanceID);
+    int end_index = int(seg_startEnd_hasPrev.y);
+
+    vec4 endPos_mid = texelFetch(s_position_texture, end_index);
+
+    moveId = endPos_mid.w + 0.5;
+
+    vec2 width_height = texelFetch(s_width_height_data_texture, int(moveId)).rg;
+    float width = 1.5 * width_height.x;
+    float height = width_height.y;
+
+    mat4 model_matrix = mat4(
+    width, 0.0,   0.0, 0.0,
+    0.0,   width, 0.0, 0.0,
+    0.0,   0.0,   1.5 * height, 0.0,
+    endPos_mid.x,   endPos_mid.y,   endPos_mid.z - 0.5 * height,  1.0);
+    vec4 final_position = view_model_matrix * model_matrix * vec4(v_position, 1.0);
+    frag_pos = final_position.xyz;
+    frag_normal = normalize(v_normal);
+    gl_Position = projection_matrix * final_position;
+}

resources/web/data/text.js

@@ -118,6 +118,11 @@ var LangText={
 		"t124": "",
 		"t125": "Maker’s Supply",
 		"t126": "Loading……",
+		"wk17": "QIDI Tech Academy",
+		"wk18": "Quick Start Tutorial",
+		"wk19": "Learn by Topic",
+		"wk20": "Filament Guide",
+		"wk21": "Explore now",
 		"t201":"Connect Device",
 		"t202":"Please set up your printer connection to view the device.",
 		"t203":"Please use the QIDI Link APP to connect to your printer. Once the link is completed, the online device will be synced to the \"Link\" page."
@@ -259,7 +264,12 @@ var LangText={
 		"wk13": "STEP格式",
 		"wk14": "与STL相比，STEP带来了更多有效的信息。由于STEP的高精度，切片时可以生成更多的圆弧路径。STEP还包括模型每个零件的装配关系，可分割模型后恢复装配视图。",
 		"wk15": "3D文本",
-		"wk16": "使用3D文本工具，用户可以轻松地在项目中创建各种3D文本形状，使模型更加个性化。QIDI Studio提供了数十种字体，并支持粗体和斜体样式，使文本具有更大的灵活性。"
+		"wk16": "使用3D文本工具，用户可以轻松地在项目中创建各种3D文本形状，使模型更加个性化。QIDI Studio提供了数十种字体，并支持粗体和斜体样式，使文本具有更大的灵活性。",
+		"wk17": "QIDI科技",
+		"wk18": "快速入门指南",
+		"wk19": "按主题学习",
+		"wk20": "材料指南",
+		"wk21": "立即探索"
 	},
 	"ja_JP": {
 		"t1": "QIDI Studioへようこそ",
@@ -379,6 +389,11 @@ var LangText={
 		"t123": "シート材",
 		"t124": "",
 		"t126": "読み込み中……",
+		"wk17": "バンブーラボ アカデミー",
+		"wk18": "クイックスタート チュートリアル",
+		"wk19": "トピック別に学ぶ",
+		"wk20": "フィラメント ガイド",
+		"wk21": "今すぐ探索",
 		"t201": "デバイスを接続",
 		"t202": "デバイスを表示するには、プリンター接続を設定してください。",
 		"t203": "プリンターに接続するには、QIDI Linkアプリを使用してください。リンクが完了すると、オンラインデバイスが「リンク」ページに同期されます。"
@@ -501,6 +516,11 @@ var LangText={
 		"t123": "piatto",
 		"t124": "",
 		"t126": "Caricamento in corso……",
+		"wk17": "QIDI Tech Accademia",
+		"wk18": "Tutorial di Avvio Rapido",
+		"wk19": "Impara per Argomento",
+		"wk20": "Guida al Filamento",
+		"wk21": "Esplora ora",
 		"t201": "Collega dispositivo",
 		"t202": "Si prega di configurare la connessione della stampante per visualizzare il dispositivo.",
 		"t203": "Si prega di utilizzare l'app QIDI Link per connettersi alla stampante. Una volta completato il collegamento, il dispositivo online verrà sincronizzato nella pagina \"Link\"."
@@ -623,6 +643,11 @@ var LangText={
 		"t123": "assiette",
 		"t124": "",
 		"t126": "Chargement en cours……",
+		"wk17": "Académie QIDI Tech",
+		"wk18": "Tutoriel de Démarrage Rapide",
+		"wk19": "Apprendre par sujet",
+		"wk20": "Guide des filaments",
+		"wk21": "Explorer maintenant",
 		"t201": "Connecter l'appareil",
 		"t202": "Veuillez configurer la connexion de votre imprimante pour voir l'appareil.",
 		"t203": "Veuillez utiliser l'application QIDI Link pour vous connecter à votre imprimante. Une fois le lien terminé, l'appareil en ligne sera synchronisé sur la page \"Lien\"."
@@ -745,6 +770,11 @@ var LangText={
 		"t123": "Teller",
 		"t124": "",
 		"t126": "Laden……",
+		"wk17": "QIDI Tech Akademie",
+		"wk18": "Schnellstartanleitung",
+		"wk19": "Lernen nach Thema",
+		"wk20": "Filament-Leitfaden",
+		"wk21": "Jetzt erkunden",
 		"t201": "Gerät verbinden",
 		"t202": "Bitte richten Sie die Druckerverbindung ein, um das Gerät anzuzeigen.",
 		"t203": "Bitte verwenden Sie die QIDI Link App, um sich mit Ihrem Drucker zu verbinden. Sobald die Verbindung hergestellt ist, wird das Online-Gerät auf der Seite \"Link\" synchronisiert."
@@ -867,6 +897,11 @@ var LangText={
 		"t123": "tányér",
 		"t124": "",
 		"t126": "Betöltés folyamatban……",
+		"wk17": "QIDI Tech Akadémia",
+		"wk18": "Gyorsindítási Útmutató",
+		"wk19": "Tanulj témakörök szerint",
+		"wk20": "Filament Útmutató",
+		"wk21": "Fedezd fel most",
 		"t201": "Eszköz csatlakoztatása",
 		"t202": "Kérjük, állítsa be a nyomtató kapcsolatát az eszköz megtekintéséhez.",
 		"t203": "Kérjük, használja a QIDI Link alkalmazást a nyomtatóhoz való csatlakozáshoz. Miután a kapcsolat létrejött, az online eszköz szinkronizálódik a „Link” oldalon."
@@ -989,6 +1024,11 @@ var LangText={
 		"t123": "plato",
 		"t124": "",
 		"t126": "Carga en progreso……",
+		"wk17": "Academia QIDI Tech",
+		"wk18": "Tutorial de Inicio Rápido",
+		"wk19": "Aprender por tema",
+		"wk20": "Guía de filamentos",
+		"wk21": "Explorar ahora",
 		"t201": "Conectar dispositivo",
 		"t202": "Por favor, configure la conexión de su impresora para ver el dispositivo.",
 		"t203": "Por favor, use la aplicación QIDI Link para conectarse a su impresora. Una vez completado el enlace, el dispositivo en línea se sincronizará en la página \"Enlace\"."
@@ -1111,6 +1151,11 @@ var LangText={
 		"t123": "fat",
 		"t124": "",
 		"t126": "Laddning pågår……",
+		"wk17": "QIDI Tech Akademin",
+		"wk18": "Snabbstartsguide",
+		"wk19": "Lär dig efter ämne",
+		"wk20": "Filamentguide",
+		"wk21": "Utforska nu",
 		"t201": "Anslut enhet",
 		"t202": "Vänligen ställ in din skrivarkoppling för att se enheten.",
 		"t203": "Använd QIDI Link-appen för att ansluta till din skrivare. När länken är klar kommer den online-enheten att synkroniseras till \"Länk\"-sidan."
@@ -1233,6 +1278,11 @@ var LangText={
 		"t123": "talíř",
 		"t124": "",
 		"t126": "Načtení probíhá……",
+		"wk17": "QIDI Tech Akademie",
+		"wk18": "Rychlý Návod k Použití",
+		"wk19": "Učit se podle tématu",
+		"wk20": "Průvodce filamenty",
+		"wk21": "Prozkoumat nyní",
 		"t201": "Připojit zařízení",
 		"t202": "Nastavte prosím připojení tiskárny, abyste mohli zobrazit zařízení.",
 		"t203": "Použijte prosím aplikaci QIDI Link k připojení k tiskárně. Jakmile bude spojení dokončeno, online zařízení bude synchronizováno na stránce \"Odkaz\"."
@@ -1355,6 +1405,11 @@ var LangText={
 		"t123": "bord",
 		"t124": "",
 		"t126": "Laden in uitvoering……",
+		"wk17": "QIDI Tech Academie",
+		"wk18": "Snelstartgids",
+		"wk19": "Leren per Onderwerp",
+		"wk20": "Filamentgids",
+		"wk21": "Nu verkennen",
 		"t201": "Apparaat verbinden",
 		"t202": "Stel de printerverbinding in om het apparaat te bekijken.",
 		"t203": "Gebruik de QIDI Link-app om verbinding te maken met uw printer. Zodra de koppeling is voltooid, wordt het online apparaat gesynchroniseerd op de pagina \"Link\"."
@@ -1477,6 +1532,11 @@ var LangText={
 		"t123": "тарілка",
 		"t124": "",
 		"t126": "Завантаження триває……",
+		"wk17": "Академія QIDI Tech",
+		"wk18": "Керівництво з Швидкого Початку",
+		"wk19": "Навчання за Темою",
+		"wk20": "Посібник з Філаментів",
+		"wk21": "Досліджуйте зараз",
 		"t201": "Підключити пристрій",
 		"t202": "Будь ласка, налаштуйте підключення принтера, щоб переглянути пристрій.",
 		"t203": "Будь ласка, використовуйте додаток QIDI Link для підключення до вашого принтера. Після завершення підключення онлайн-пристрій буде синхронізовано на сторінці \"Посилання\"."
@@ -1599,6 +1659,11 @@ var LangText={
 		"t123": "тарелка",
 		"t124": "",
 		"t126": "Загрузка идёт……",
+		"wk17": "Академия QIDI Tech",
+		"wk18": "Руководство по быстрому запуску",
+		"wk19": "Обучение по теме",
+		"wk20": "Руководство по пруткам",
+		"wk21": "Исследуйте сейчас",
 		"t201": "Подключить устройство",
 		"t202": "Пожалуйста, настройте подключение принтера, чтобы просмотреть устройство.",
 		"t203": "Пожалуйста, используйте приложение QIDI Link для подключения к вашему принтеру. После завершения подключения онлайн-устройство будет синхронизировано на странице \"Ссылка\"."
@@ -1721,6 +1786,11 @@ var LangText={
 		"t123": "tabak",
 		"t124": "",
 		"t126": "Yükleme devam ediyor……",
+		"wk17": "QIDI Tech Akademisi",
+		"wk18": "Hızlı Başlangıç Kılavuzu",
+		"wk19": "Konuya Göre Öğrenme",
+		"wk20": "Filament Kılavuzu",
+		"wk21": "Şimdi Keşfet",
 		"t201": "Cihazı Bağla",
 		"t202": "Cihazı görüntülemek için lütfen yazıcı bağlantınızı ayarlayın.",
 		"t203": "Yazıcınıza bağlanmak için lütfen QIDI Link uygulamasını kullanın. Bağlantı tamamlandığında, çevrimiçi cihaz \"Bağlantı\" sayfasına senkronize edilecektir."
@@ -1843,6 +1913,11 @@ var LangText={
 		"t123": "prato",
 		"t124": "",
 		"t126": "Carregamento em andamento……",
+		"wk17": "Academia QIDI Tech",
+		"wk18": "Tutorial de Início Rápido",
+		"wk19": "Aprendizado por Tópico",
+		"wk20": "Guia de Filamento",
+		"wk21": "Explore Agora",
 		"t201": "Conectar Dispositivo",
 		"t202": "Por favor, configure a conexão da sua impressora para visualizar o dispositivo.",
 		"t203": "Por favor, use o aplicativo QIDI Link para se conectar à sua impressora. Uma vez concluída a conexão, o dispositivo online será sincronizado na página \"Link\"."
@@ -1965,6 +2040,11 @@ var LangText={
 		"t123": "접시",
 		"t124": "",
 		"t126": "로딩 중……",
+		"wk17": "밤부랩 아카데미",
+		"wk18": "빠른 시작 튜토리얼",
+		"wk19": "주제별 학습",
+		"wk20": "필라멘트 가이드",
+		"wk21": "지금 탐색",
 		"t201": "장치 연결",
 		"t202": "장치를 보려면 프린터 연결을 설정하십시오.",
 		"t203": "프린터에 연결하려면 QIDI Link 앱을 사용하십시오. 연결이 완료되면 온라인 장치가 '링크' 페이지에 동기화됩니다."
@@ -2087,6 +2167,11 @@ var LangText={
 		"t123": "talerz",
 		"t124": "",
 		"t126": "Ładowanie trwa……",
+		"wk17": "Akademia QIDI Tech",
+		"wk18": "Samouczek Szybkiego Startu",
+		"wk19": "Nauka według Tematu",
+		"wk20": "Przewodnik po Filamentach",
+		"wk21": "Odkrywaj teraz",
 		"t201": "Podłącz urządzenie",
 		"t202": "Proszę skonfigurować połączenie drukarki, aby wyświetlić urządzenie.",
 		"t203": "Proszę użyć aplikacji QIDI Link, aby połączyć się z drukarką. Po zakończeniu połączenia, urządzenie online zostanie zsynchronizowane na stronie \"Link\"."

resources/web/flush/WipingDialog.html

@@ -153,7 +153,7 @@
         background-color: #4479fb;
       }
       .btn-ok:hover {
-        background-color: #3d97cb;
+        background-color: #74a8ff;
       }
 
       .btn-cancel {
@@ -388,6 +388,7 @@
       let m_max_flush_volumes = []
       let m_min_flush_multiplier = 0.50
       let m_max_flush_multiplier = 3
+      let m_default_matrix //系统默认矩阵
 
       function storeData() {
         var data = JSON.stringify({
@@ -516,6 +517,9 @@
         m_raw_matrix = data.flush_volume_matrixs.map(function(arr) {
           return arr.slice();
         });
+        m_default_matrix = data.default_matrixs.map(function (arr) {
+            return arr.slice();
+        });
         m_flush_multipiers = data.flush_multiplier.slice()
         m_max_flush_volumes = data.max_flush_volumes
         m_min_flush_volumes = data.min_flush_volumes
@@ -607,10 +611,10 @@
 
       function handleExtruderSelect(extruder) {
         m_curr_extruder_id = extruder == 'left' ? 0 : 1
-        updateTable(m_raw_matrix[m_curr_extruder_id], m_curr_extruder_id)
         updateVolumeRange(m_min_flush_volumes[m_curr_extruder_id],m_max_flush_volumes[m_curr_extruder_id])
         updateFlushMultiplier(m_min_flush_multiplier[m_curr_extruder_id],m_max_flush_multiplier[m_curr_extruder_id])
         updateFlushMultiplier(m_curr_extruder_id)
+        updateTable(m_raw_matrix[m_curr_extruder_id], m_curr_extruder_id)
       }
 
       function onMultiplierChange() {
@@ -641,6 +645,14 @@
 
 
       function updateWarningTexts() {
+        let val = parseFloat(document.getElementById("multiplierInput").value);
+        const input = document.getElementById('multiplierInput');
+        if (val !== 1.0) {
+            input.style.color = 'orange';
+        } else {
+            input.style.color = 'black';
+        }
+
         let hasException = false;
         for (let i = 0; i < m_number_of_filaments; i++) {
           for (let j = 0; j < m_number_of_filaments; j++) {
@@ -649,11 +661,18 @@
             let val = parseInt(input.value, 10);
             if (isNaN(val)) val = 0;
 
+            var index = i * m_number_of_filaments + j;
+            let defaultVal = rawToDislay(m_default_matrix[m_curr_extruder_id][index], m_flush_multipiers[m_curr_extruder_id])
+
             if (val < m_min_flush_volumes[m_curr_extruder_id] || val > m_max_flush_volumes[m_curr_extruder_id]) {
               input.style.color = "red";
               hasException = true;
-            } else {
-              input.style.removeProperty("color"); 
+            }
+            else if (val != defaultVal) {
+              input.style.color = "orange";
+            }
+            else {
+              input.style.removeProperty("color");
             }
           }
         }

resources/web/guide/22/22.css

@@ -1,70 +1,93 @@
-
-.ChooseBlock
-{
-	display:flex;
-	line-height: 32px;
+#Content {
+  display:flex;
+  flex-direction: row;
 }
 
-.CName
-{
-	width:130px;
-	font-weight: 700;
-	height: 100%;
-	text-align: right;
-	white-space: nowrap;
-	flex-shrink: 0;
+#leftBlock {
+  flex: 1;
+  padding-left: 9px;
+  padding-right: 9px;
+  border-right: 1px solid #EEEEEE;
 }
 
-.CValues
-{
-	display:flex;
-	justify-content: flex-start;
-	align-content: flex-start;
-	flex-wrap: wrap;
+#rightBlock {
+  flex: 2;
+  padding-left: 15px;
+  padding-right: 9px;
 }
 
-input
+.CNameBlock {
+  font-weight: 700;
+  height: 28px;
+}
+
+.inlineAlign {
+  display: inline-block;
+  vertical-align: middle;
+  line-height:normal;
+}
+
+.CNameIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.CArrow
 {
-	margin-left: 20px;
-	margin-right: 6px;
+  width: 20px;
+  height: 20px;
+  background-image: url(../img/pull.svg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  float: right;
+  transition: transform 0.3s ease;
+  transform: rotate(90deg);
+}
+.CArrow.active {
+  transform: rotate(0deg);
+}
+
+.CValues {
+  padding: 8px;
+  background-color: #F8F8F8;
+}
+
+input {
+	margin-right: 8px;
 	vertical-align: middle;
+  width: 16px;
+  height: 16px;
 }
 
-#ItemSelectArea
-{
-	flex: 0 0 40px;
-	height:40px;
-	border-top: 1px solid #4479FB;	/* y96 */
-	display: flex;
-	align-items: center;
+.inputIndent { margin-left: 8px;}
+
+.checkboxText {
+  width: 212px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
 }
 
-#ItemSelectArea .SmallBtn
-{
-	margin-left:5px;
+/* right block */
+.SelectAll {
+  width: 100%;
+  text-align: right;
+  font-weight: 700;
 }
 
-
-#ItemBlockArea
-{
-	flex: 1 0 236px;
-	display:flex;
-	overflow-x:auto;
-	flex-wrap:wrap;
-	flex-direction: column;
-	justify-content:flex-start;
-	align-items: flex-start;
-	align-content:flex-start;
-	line-height: 32px;
+#ItemBlockArea {
+  column-count: 2;
+  column-gap: 16px;
+  padding-top: 16px;
 }
 
-.MItem
-{
-	min-width: 220px;
-	height: 32px;
+.cols > *{
+  break-inside: avoid;
 }
 
-
+/* NoticeMask */
 #NoticeMask
 {
 	background-color: #000;
@@ -116,4 +139,4 @@ input
 #GotoNetPluginBtn
 {
 	display: none;
-}
+}

resources/web/guide/22/22.js

@@ -1,17 +1,37 @@
-
 var m_ProfileItem;
-
 var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
-var VendorPriority=new Array("qidi","generic");
-  
+var VendorPriority=new Array("qidi","qdt","kexcelled","polymaker","esun","generic","bambu lab","bambulab","bbl");
+
 function OnInit()
 {
-	TranslatePage();
-	
-	RequestProfile();
-		
-	//m_ProfileItem=cData;
-	//SortUI();
+  $("#printerBtn").on("click", function(){
+    $("#MachineList").slideToggle(300);
+    $(this).find(".CArrow").toggleClass("active");
+  });
+
+  $("#filatypeBtn").on("click", function(){
+    $("#FilatypeList").slideToggle(300);
+    $(this).find(".CArrow").toggleClass("active");
+  });
+
+  $("#vendorBtn").on("click", function(){
+    $("#VendorList").slideToggle(300);
+    $(this).find(".CArrow").toggleClass("active");
+  });
+
+  $('#SelectAllCheckbox').change(function() {
+    if ($(this).is(':checked')) {
+      SelectAllFilament(1);
+    } else {
+      SelectAllFilament(0);
+    }
+  });
+
+  TranslatePage();
+  RequestProfile();
+
+  // m_ProfileItem=cData;
+	// SortUI();
 }
 
 function RequestProfile()
@@ -23,15 +43,6 @@ function RequestProfile()
 	SendWXMessage( JSON.stringify(tSend) );
 }
 
-//function RequestModelSelect()
-//{
-//	var tSend={};
-//	tSend['sequence_id']=Math.round(new Date() / 1000);
-//	tSend['command']="request_userguide_modelselected";
-//	
-//	SendWXMessage( JSON.stringify(tSend) );
-//}
-
 function HandleStudio(pVal)
 {
 	let strCmd=pVal['command'];
@@ -52,9 +63,11 @@ function GetFilamentShortname( sName )
 }
 
 
-function SortUI()
+function ChooseAllMachine()
 {
-	var ModelList = new Array();
+	let bCheck=$("#MachineList input:first").prop("checked");
+	
+	$("#MachineList input").prop("checked",bCheck);
 
 	//w22
 	const vendorOrder = ["Q Series", "X 4 Series", "X 3 Series"];
@@ -64,314 +77,22 @@ function SortUI()
 		return indexA - indexB;
 	});
 
-	let nMode=m_ProfileItem["model"].length;
-	for(let n=0;n<nMode;n++)
-	{
-		let OneMode=m_ProfileItem["model"][n];
-		
-		if( OneMode["nozzle_selected"]!="" )
-			ModelList.push(OneMode);
-	}
-	
-	//machine
-//	let HtmlMachine='';
-//	
-//	let nMachine=m_ProfileItem['machine'].length;
-//	for(let n=0;n<nMachine;n++)
-//	{
-//		let OneMachine=m_ProfileItem['machine'][n];
-//		
-//		let sName=OneMachine['name'];
-//		let sModel=OneMachine['model'];
-//	
-//		if( ModelList.in_array(sModel) )
-//		{
-//			HtmlMachine+='<div><input type="checkbox" mode="'+sModel+'" onChange="MachineClick()" />'+sName+'</div>';
-//		}
-//	}
-//	
-//	$('#MachineList .CValues').append(HtmlMachine);	
-//	$('#MachineList .CValues input').prop("checked",true);
-//	if(nMachine<=1)
-//	{
-//		$('#MachineList').hide();
-//	}
-	
-	//model
-	let HtmlMode='';
-	nMode=ModelList.length;
-	for(let n=0;n<nMode;n++)
-	{
-		let sModel=ModelList[n];	
-
-		HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
-	}
-	
-	$('#MachineList .CValues').append(HtmlMode);	
-	$('#MachineList .CValues input').prop("checked",true);
-	if(nMode<=1)
-	{
-		$('#MachineList').hide();
-	}
-	
-	//Filament
-	let HtmlFilament='';
-	let SelectNumber=0;
-
-	var TypeHtmlArray={};
-    var VendorHtmlArray={};
-	for( let key in m_ProfileItem['filament'] )
-	{
-		let OneFila=m_ProfileItem['filament'][key];
-		
-		//alert(JSON.stringify(OneFila));
-		
-		let fWholeName=OneFila['name'].trim();
-		let fShortName=GetFilamentShortname( OneFila['name'] );
-		let fVendor = OneFila['vendor'];
-		//w22
-		if (fVendor != "QIDI")
-			continue;
-		let fType=OneFila['type'];
-		let fSelect=OneFila['selected'];
-		let fModel=OneFila['models']
-		
-		//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
-		
-//		if(OneFila['name'].indexOf("QIDI PA-CF")>=0)
-//		{
-//			alert( fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel )
-//			
-//			let b=1+2;
-//		}
-		
-        let bFind=false;		
-		//let bCheck=$("#MachineList input:first").prop("checked");
-		if( fModel=='')
-		{
-			bFind=true;
-		}
-		else
-		{
-			//check in modellist		    
-		    let nModelAll=ModelList.length;
-		    for(let m=0;m<nModelAll;m++)
-		    {
-	    		let sOne=ModelList[m];
-			
-				let OneName=sOne['model'];
-				let NozzleArray=sOne["nozzle_selected"].split(';');
-				
-				let nNozzle=NozzleArray.length;
-				
-				for( let b=0;b<nNozzle;b++ )
-				{
-					let nowModel= OneName+"++"+NozzleArray[b];
-					if(fModel.indexOf(nowModel)>=0)
-					{
-						bFind=true;
-						break;
-					}
-				}
-			}
-		}
-		
-		if(bFind)
-		{
-			//Type
-			let LowType=fType.toLowerCase();
-		    if(!TypeHtmlArray.hasOwnProperty(LowType))
-		    {
-			    let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
-			
-				TypeHtmlArray[LowType]=HtmlType;
-		    }
-			
-			//Vendor
-			let lowVendor=fVendor.toLowerCase();
-			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
-		    {
-			    let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
-				
-				VendorHtmlArray[lowVendor]=HtmlVendor;
-		    }
-			
-			//Filament
-			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
-	        if(pFila.length==0)
-		    {
-			    let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
-			
-			    $("#ItemBlockArea").append(HtmlFila);
-		    } 
-			else
-			{
-				let strModel=pFila.attr("model");
-				let strFilalist=pFila.attr("filalist");
-				
-				pFila.attr("model", strModel+fModel);
-				pFila.attr("filalist", strFilalist+fWholeName+';');
-			}
-			
-		    if(fSelect*1==1)
-			{
-				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
-					
-				$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
-				SelectNumber++;
-			}
-//			else
-//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
-		}
-	}
-
-	//w22
-	for (let key in m_ProfileItem['filament']) {
-		let OneFila = m_ProfileItem['filament'][key];
-
-		//alert(JSON.stringify(OneFila));
-
-		let fWholeName = OneFila['name'].trim();
-		let fShortName = GetFilamentShortname(OneFila['name']);
-		let fVendor = OneFila['vendor'];
-		if (fVendor == "QIDI")
-			continue;
-		let fType = OneFila['type'];
-		let fSelect = OneFila['selected'];
-		let fModel = OneFila['models']
-
-		//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
-
-		//		if(OneFila['name'].indexOf("QIDI PA-CF")>=0)
-		//		{
-		//			alert( fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel )
-		//			
-		//			let b=1+2;
-		//		}
-
-		let bFind = false;
-		//let bCheck=$("#MachineList input:first").prop("checked");
-		if (fModel == '') {
-			bFind = true;
-		}
-		else {
-			//check in modellist		    
-			let nModelAll = ModelList.length;
-			for (let m = 0; m < nModelAll; m++) {
-				let sOne = ModelList[m];
-
-				let OneName = sOne['model'];
-				let NozzleArray = sOne["nozzle_selected"].split(';');
-
-				let nNozzle = NozzleArray.length;
-
-				for (let b = 0; b < nNozzle; b++) {
-					let nowModel = OneName + "++" + NozzleArray[b];
-					if (fModel.indexOf(nowModel) >= 0) {
-						bFind = true;
-						break;
-					}
-				}
-			}
-		}
-
-		if (bFind) {
-			//Type
-			let LowType = fType.toLowerCase();
-			if (!TypeHtmlArray.hasOwnProperty(LowType)) {
-				let HtmlType = '<div><input type="checkbox" filatype="' + fType + '" onChange="FilaClick()"   />' + fType + '</div>';
-
-				TypeHtmlArray[LowType] = HtmlType;
-			}
-
-			//Vendor
-			let lowVendor = fVendor.toLowerCase();
-			if (!VendorHtmlArray.hasOwnProperty(lowVendor)) {
-				let HtmlVendor = '<div><input type="checkbox" vendor="' + fVendor + '"  onChange="VendorClick()" />' + fVendor + '</div>';
-
-				VendorHtmlArray[lowVendor] = HtmlVendor;
-			}
-
-			//Filament
-			let pFila = $("#ItemBlockArea input[vendor='" + fVendor + "'][filatype='" + fType + "'][name='" + fShortName + "']");
-			if (pFila.length == 0) {
-				let HtmlFila = '<div class="MItem"><input type="checkbox" vendor="' + fVendor + '"  filatype="' + fType + '" filalist="' + fWholeName + ';' + '"  model="' + fModel + '" name="' + fShortName + '" />' + fShortName + '</div>';
-
-				$("#ItemBlockArea").append(HtmlFila);
-			}
-			else {
-				let strModel = pFila.attr("model");
-				let strFilalist = pFila.attr("filalist");
-
-				pFila.attr("model", strModel + fModel);
-				pFila.attr("filalist", strFilalist + fWholeName + ';');
-			}
-
-			if (fSelect * 1 == 1) {
-				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
-
-				$("#ItemBlockArea input[vendor='" + fVendor + "'][filatype='" + fType + "'][name='" + fShortName + "']").prop("checked", true);
-				SelectNumber++;
-			}
-			//			else
-			//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
-		}
-	}
-
-	//Sort TypeArray
-	let TypeAdvNum=FilamentPriority.length;
-	for( let n=0;n<TypeAdvNum;n++ )
-	{
-		let strType=FilamentPriority[n];
-		
-		if( TypeHtmlArray.hasOwnProperty( strType ) )
-		{
-			$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
-			delete( TypeHtmlArray[strType] );
-		}
-	}
-    for(let key in TypeHtmlArray )
-	{
-		$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
-	}
-	$("#FilatypeList .CValues input").prop("checked",true);
-	
-	//Sort VendorArray
-	let VendorAdvNum=VendorPriority.length;
-	for( let n=0;n<VendorAdvNum;n++ )
-	{
-		let strVendor=VendorPriority[n];
-		
-		if( VendorHtmlArray.hasOwnProperty( strVendor ) )
-		{
-			$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
-			delete( VendorHtmlArray[strVendor] );
-		}
-	}
-    for(let key in VendorHtmlArray )
-	{
-		$("#VendorList .CValues").append( VendorHtmlArray[key] );
-	}	
-	$("#VendorList .CValues input").prop("checked",true);
-	
-	//------
-	if(SelectNumber==0)
-		ChooseDefaultFilament();
-	
-	//--If Need Install Network Plugin
-	if(m_ProfileItem["network_plugin_install"]!='1' || (m_ProfileItem["network_plugin_install"]=='1' && m_ProfileItem["network_plugin_compability"]=='0') )
-	{
-		$("#AcceptBtn").hide();
-		$("#GotoNetPluginBtn").show();
-	}
+	SortFilament();
 }
 
 
-function ChooseAllMachine()
+function ChooseAllFilament()
 {
-	let bCheck=$("#MachineList input:first").prop("checked");
+	let bCheck=$("#FilatypeList input:first").prop("checked");	
+	$("#FilatypeList input").prop("checked",bCheck);	
 	
-	$("#MachineList input").prop("checked",bCheck);
+	SortFilament();
+}
+
+function ChooseAllVendor()
+{
+	let bCheck=$("#VendorList input:first").prop("checked");	
+	$("#VendorList input").prop("checked",bCheck);	
 	
 	SortFilament();
 }
@@ -393,14 +114,6 @@ function MachineClick()
 	SortFilament();
 }
 
-function ChooseAllFilament()
-{
-	let bCheck=$("#FilatypeList input:first").prop("checked");	
-	$("#FilatypeList input").prop("checked",bCheck);	
-	
-	SortFilament();
-}
-
 function FilaClick()
 {
 	let nChecked=$("#FilatypeList input:gt(0):checked").length
@@ -418,14 +131,6 @@ function FilaClick()
 	SortFilament();	
 }
 
-function ChooseAllVendor()
-{
-	let bCheck=$("#VendorList input:first").prop("checked");	
-	$("#VendorList input").prop("checked",bCheck);	
-	
-	SortFilament();
-}
-
 function VendorClick()
 {
 	let nChecked=$("#VendorList input:gt(0):checked").length
@@ -443,11 +148,9 @@ function VendorClick()
 	SortFilament();
 }
 
-
-
 function SortFilament()
 {
-	let FilaNodes=$("#ItemBlockArea .MItem");
+	let FilaNodes=$("#ItemBlockArea div");
 	let nFilament=FilaNodes.length;
 	//$("#ItemBlockArea .MItem").hide();
 	
@@ -505,7 +208,7 @@ function SortFilament()
 		let OneNode=FilaNodes[m];
 		let OneFF=OneNode.getElementsByTagName("input")[0];
 		
-	    let fModel=OneFF.getAttribute("model");
+	  let fModel=OneFF.getAttribute("model");
 		let fVendor=OneFF.getAttribute("vendor");
 		let fType=OneFF.getAttribute("filatype");
 		let fName=OneFF.getAttribute("name");
@@ -534,69 +237,6 @@ function SortFilament()
 	}
 }
 
-function ChooseDefaultFilament()
-{
-	//ModelList
-	let pModel=$("#MachineList input:gt(0)");
-	let nModel=pModel.length;
-	let ModelList=new Array();
-	for(let n=0;n<nModel;n++)
-	{
-		let OneModel=pModel[n];
-		ModelList.push(  OneModel.getAttribute("mode") );
-	}	
-	
-	//DefaultMaterialList
-	let DefaultMaterialString=new Array();
-	let nMode=m_ProfileItem["model"].length;
-	for(let n=0;n<nMode;n++)
-	{
-		let OneMode=m_ProfileItem["model"][n];
-		let ModeName=OneMode['model'];
-        let DefaultM=OneMode['materials'];
-		
-		if( ModelList.indexOf(ModeName)>-1 )	
-		{
-			DefaultMaterialString+=OneMode['materials']+';';
-		}
-	}	
-	
-	let DefaultMaterialArray=DefaultMaterialString.split(';');
-	//alert(DefaultMaterialString);
-	
-	//Filament
-	let FilaNodes=$("#ItemBlockArea .MItem");
-    let nFilament=FilaNodes.length;
-    for(let m=0;m<nFilament;m++)
-	{
-		let OneNode=FilaNodes[m];
-		let OneFF=OneNode.getElementsByTagName("input")[0];
-		$(OneFF).prop("checked",false);
-		
-	    let filamentList=OneFF.getAttribute("filalist"); 
-		//alert(filamentList);
-		let filamentArray=filamentList.split(';')
-		
-		let HasModel=false;
-		let NowFilaLength=filamentArray.length;
-		for(let p=0;p<NowFilaLength;p++)
-		{
-			let NowFila=filamentArray[p];
-		
-			if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
-			{
-				HasModel=true;
-				break;
-			}
-		}
-			
-		if(HasModel)
-		    $(OneFF).prop("checked",true);
-	}
-	
-	ShowNotice(0);
-}
-
 function SelectAllFilament( nShow )
 {
 	if( nShow==0 )
@@ -623,6 +263,198 @@ function ShowNotice( nShow )
 	}
 }
 
+function SortUI()
+{
+	var ModelList=new Array();
+	
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		
+		if( OneMode["nozzle_selected"]!="" )
+			ModelList.push(OneMode);
+	}
+	
+	//model
+	let HtmlMode='';
+	nMode=ModelList.length;
+	for(let n=0;n<nMode;n++)
+	{
+		let sModel=ModelList[n];	
+
+		HtmlMode+='<div class="checkboxText"><input class="inputIndent" type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
+	}
+	
+	$('#MachineList').append(HtmlMode);	
+	$('#MachineList input').prop("checked",true);
+	if(nMode<=1)
+	{
+		$('#MachineList').hide();
+	}
+	
+	//Filament
+	let HtmlFilament='';
+	let SelectNumber=0;
+
+	var TypeHtmlArray={};
+    var VendorHtmlArray={};
+	
+	//y73
+	var sortedFilamentKeys = Object.keys(m_ProfileItem['filament']).sort((a, b) => {
+        let vendorA = m_ProfileItem['filament'][a]['vendor'].toLowerCase();
+        let vendorB = m_ProfileItem['filament'][b]['vendor'].toLowerCase();
+
+        let indexA = VendorPriority.indexOf(vendorA);
+        let indexB = VendorPriority.indexOf(vendorB);
+        
+        if(indexA === -1) indexA = Number.MAX_SAFE_INTEGER;
+        if(indexB === -1) indexB = Number.MAX_SAFE_INTEGER;
+        
+        return indexA - indexB;
+    });
+	//alert(sortedFilamentKeys);
+	for( let key of sortedFilamentKeys)
+	{
+		//alert(key);
+		let OneFila=m_ProfileItem['filament'][key];
+		
+		//alert(JSON.stringify(OneFila));
+		
+		let fWholeName=OneFila['name'].trim();
+		let fShortName=GetFilamentShortname( OneFila['name'] );
+		let fVendor = OneFila['vendor'];
+		let fType=OneFila['type'];
+		let fSelect=OneFila['selected'];
+		let fModel=OneFila['models']
+		
+    	let bFind=false;		
+		if( fModel=='')
+		{
+			bFind=true;
+		}
+		else
+		{
+			//check in modellist		    
+      let nModelAll=ModelList.length;
+      for(let m=0;m<nModelAll;m++)
+      {
+        let sOne=ModelList[m];
+    
+        let OneName=sOne['model'];
+        let NozzleArray=sOne["nozzle_selected"].split(';');
+      
+        let nNozzle=NozzleArray.length;
+      
+        for( let b=0;b<nNozzle;b++ )
+        {
+          let nowModel= OneName+"++"+NozzleArray[b];
+          if(fModel.indexOf(nowModel)>=0)
+          {
+            bFind=true;
+            break;
+          }
+        }
+			}
+		}
+		
+		if(bFind)
+		{
+			//Type
+			let LowType=fType.toLowerCase();
+		    if(!TypeHtmlArray.hasOwnProperty(LowType))
+		    {
+			    let HtmlType='<div class="checkboxText"><input class="inputIndent" type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
+			
+				TypeHtmlArray[LowType]=HtmlType;
+		    }
+			
+			//Vendor
+			let lowVendor=fVendor.toLowerCase();
+			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
+		    {
+			    let HtmlVendor='<div class="checkboxText"><input class="inputIndent" type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
+				
+				VendorHtmlArray[lowVendor]=HtmlVendor;
+		    }
+			
+			//Filament
+			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
+	        if(pFila.length==0)
+		    {
+			    let HtmlFila='<div><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
+			
+			    $("#ItemBlockArea").append(HtmlFila);
+		    } 
+			else
+			{
+				let strModel=pFila.attr("model");
+				let strFilalist=pFila.attr("filalist");
+				
+				pFila.attr("model", strModel+fModel);
+				pFila.attr("filalist", strFilalist+fWholeName+';');
+			}
+			
+		    if(fSelect*1==1)
+			{
+				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
+					
+				$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
+				SelectNumber++;
+			}
+//			else
+//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
+		}
+	} 
+
+	//Sort TypeArray
+	let TypeAdvNum=FilamentPriority.length;
+	for( let n=0;n<TypeAdvNum;n++ )
+	{
+		let strType=FilamentPriority[n];
+		
+		if( TypeHtmlArray.hasOwnProperty( strType ) )
+		{
+			$("#FilatypeList").append( TypeHtmlArray[strType] );
+			delete( TypeHtmlArray[strType] );
+		}
+	}
+    for(let key in TypeHtmlArray )
+	{
+		$("#FilatypeList").append( TypeHtmlArray[key] );
+	}
+	$("#FilatypeList input").prop("checked",true);
+	
+	//Sort VendorArray
+	let VendorAdvNum=VendorPriority.length;
+	for( let n=0;n<VendorAdvNum;n++ )
+	{
+		let strVendor=VendorPriority[n];
+		
+		if( VendorHtmlArray.hasOwnProperty( strVendor ) )
+		{
+			$("#VendorList").append( VendorHtmlArray[strVendor] );
+			delete( VendorHtmlArray[strVendor] );
+		}
+	}
+    for(let key in VendorHtmlArray )
+	{
+		$("#VendorList").append( VendorHtmlArray[key] );
+	}	
+	$("#VendorList input").prop("checked",true);
+	
+	//------
+	if(SelectNumber==0)
+		ChooseDefaultFilament();
+	
+	//--If Need Install Network Plugin
+	//y73
+	// if(m_ProfileItem["network_plugin_install"]!='1' || (m_ProfileItem["network_plugin_install"]=='1' && m_ProfileItem["network_plugin_compability"]=='0') )
+	// {
+	// 	$("#AcceptBtn").hide();
+	// 	$("#GotoNetPluginBtn").show();
+	// }
+}
 
 function ResponseFilamentResult()
 {
@@ -660,7 +492,6 @@ function ResponseFilamentResult()
 	return true;
 }
 
-
 function ReturnPreviewPage()
 {
 	let nMode=m_ProfileItem["model"].length;
@@ -671,7 +502,6 @@ function ReturnPreviewPage()
 		document.location.href="../21/index.html";	
 }
 
-
 function GotoNetPluginPage()
 {
 	let bRet=ResponseFilamentResult();
@@ -697,7 +527,64 @@ function FinishGuide()
 	//window.location.href="../6/index.html";
 }
 
-
-
-
-
+function ChooseDefaultFilament()
+{
+	//ModelList
+	let pModel=$("#MachineList input:gt(0)");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		ModelList.push(  OneModel.getAttribute("mode") );
+	}	
+	
+	//DefaultMaterialList
+	let DefaultMaterialString=new Array();
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		let ModeName=OneMode['model'];
+        let DefaultM=OneMode['materials'];
+		
+		if( ModelList.indexOf(ModeName)>-1 )	
+		{
+			DefaultMaterialString+=OneMode['materials']+';';
+		}
+	}	
+	
+	let DefaultMaterialArray=DefaultMaterialString.split(';');
+	//alert(DefaultMaterialString);
+	
+	//Filament
+	let FilaNodes=$("#ItemBlockArea input");
+    let nFilament=FilaNodes.length;
+    for(let m=0;m<nFilament;m++)
+	{
+		let OneFF=FilaNodes[m];
+		$(OneFF).prop("checked",false);
+		
+	  let filamentList=OneFF.getAttribute("filalist"); 
+		//alert(filamentList);
+		let filamentArray=filamentList.split(';')
+		
+		let HasModel=false;
+		let NowFilaLength=filamentArray.length;
+		for(let p=0;p<NowFilaLength;p++)
+		{
+			let NowFila=filamentArray[p];
+		
+			if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
+			{
+				HasModel=true;
+				break;
+			}
+		}
+			
+		if(HasModel)
+		    $(OneFF).prop("checked",true);
+	}
+	
+	ShowNotice(0);
+}

resources/web/guide/22/index.html

@@ -3,165 +3,140 @@
 <head>
 <meta charset="utf-8">
 <meta http-equiv="Cache-Control" content="max-age=0" />
-<title>引导_P21</title>
+<title>引导_P22</title>
 <link rel="stylesheet" type="text/css" href="../css/common.css" />	
 <link rel="stylesheet" type="text/css" href="22.css" />
-<link rel="stylesheet" type="text/css" href="../css/dark.css" />		
 <script type="text/javascript" src="test.js"></script>
+<!-- <link rel="stylesheet" type="text/css" href="../css/dark.css" /> -->
 <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
 <script type="text/javascript" src="../js/json2.js"></script>	
 <script type="text/javascript" src="../../data/text.js"></script>	
 <script type="text/javascript" src="../js/globalapi.js"></script>	
 <script type="text/javascript" src="../js/common.js"></script>
-<script type="text/javascript" src="./22.js"></script>	
+<script type="text/javascript" src="./22.js"></script>
 </head>
 <body onLoad="OnInit()">
-<div id="Title">
+  <div id="Title">
 	<div class="trans" tid="t14">Filament Selection</div>
 </div>
 <div id="Content" class="ZScrol">
-
-<div id="MachineList" class="ChooseBlock">
-	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
-	<div class="CValues">
-	<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></div>
-<!--	<div><input type="checkbox" mode="-normal" onChange="SortFilament()" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>		
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>		
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	-->	
-	</div>
-</div>	
-	
-<div id="FilatypeList" class="ChooseBlock">
-	<div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
-	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div>
-<!--	<div><input type="checkbox" filatype="PLA" />PLA</div>
-	<div><input type="checkbox" />PET</div>	
-	<div><input type="checkbox" />ABS</div>
-	<div><input type="checkbox" />TPU</div>	
-	<div><input type="checkbox" />PA6+CF</div>
-	<div><input type="checkbox" />N/A</div>	
-	<div><input type="checkbox" filatype="PLA" />PLA</div>
-	<div><input type="checkbox" />PET</div>	
-	<div><input type="checkbox" />ABS</div>
-	<div><input type="checkbox" />TPU</div>	
-	<div><input type="checkbox" />PA6+CF</div>
-	<div><input type="checkbox" />N/A</div>	-->		
-	</div>
-</div>
-	
-<div id="VendorList" class="ChooseBlock">
-	<div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
-	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div>
-<!--	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
-	<div><input type="checkbox" />QDT</div>	
-	<div><input type="checkbox" />eSUN</div>
-	<div><input type="checkbox" />Kexcelled</div>	
-	<div><input type="checkbox" />Polymaker</div>
-	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
-	<div><input type="checkbox" />QDT</div>	
-	<div><input type="checkbox" />eSUN</div>
-	<div><input type="checkbox" />Kexcelled</div>	
-	<div><input type="checkbox" />Polymaker</div>-->		
+  <div id="leftBlock" class="ChooseBlock">
+    <div id="printerShow">
+      <div id="printerBtn" class="CNameBlock">
+        <img class="inlineAlign CNameIcon" src="../img/printer.svg" />
+        <span class="trans inlineAlign" tid="t15">printer</span>
+        <div class="CArrow inlineAlign"></div>
+      </div>
+      <div id="MachineList" class="CValues">
+        <div class="checkboxText"><input type="checkbox" mode="all" onClick="ChooseAllMachine()" />all</div>
+        <!-- <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div> -->
+      </div>
     </div>
-</div>
-
-	
-<div id="ItemSelectArea">
-	<div class="SmallBtn_Green trans" tid="t11" onClick="SelectAllFilament(1)">All</div>
-	<div class="SmallBtn trans" tid="t12" onClick="SelectAllFilament(0)">Clear all</div>
-</div>
-<div id="ItemBlockArea" class="ZScrol">	
-<!--	<div class="MItem"><input type="checkbox" vendor=""  filatype="" model="ALL PLA EXPSilk" name="" />ALL PLA EXPSilk</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
-	<div class="MItem"><input type="checkbox" />QDT PA-CF</div>	
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
-	<div class="MItem"><input type="checkbox" />K5 ABS</div>
-	<div class="MItem"><input type="checkbox" />K5 ASA</div>
-	<div class="MItem"><input type="checkbox" />K5 PETG</div>
-	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
-	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
-	<div class="MItem"><input type="checkbox" />K5M PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA EXPSilk</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
-	<div class="MItem"><input type="checkbox" />QDT PA-CF</div>	
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
-	<div class="MItem"><input type="checkbox" />K5 ABS</div>
-	<div class="MItem"><input type="checkbox" />K5 ASA</div>
-	<div class="MItem"><input type="checkbox" />K5 PETG</div>
-	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
-	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
-	<div class="MItem"><input type="checkbox" />K5M PLA~</div>
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
-	<div class="MItem"><input type="checkbox" />K5 ABS</div>
-	<div class="MItem"><input type="checkbox" />K5 ASA</div>
-	<div class="MItem"><input type="checkbox" />K5 PETG</div>
-	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
-	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
-	<div class="MItem"><input type="checkbox" />K5M PLA~</div>	-->
-</div>
-	
+    <div id="vendorShow">
+      <div id="vendorBtn" class="CNameBlock">
+        <img class="inlineAlign CNameIcon" src="../img/vendor.svg" />
+        <span class="trans inlineAlign" tid="t17">vendor</span>
+        <div class="CArrow inlineAlign"></div>
+      </div>
+      <div id="VendorList" class="CValues">
+        <div class="checkboxText"><input type="checkbox" mode="all" onClick="ChooseAllVendor()" />all</div>
+        <!-- <div class="checkboxText"><input class="inputIndent" type="checkbox" />QDT</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />eSUN</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />Kexcelled</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />Unknown</div> -->
+      </div>
+    </div>
+    <div id="filatypeShow">
+      <div id="filatypeBtn" class="CNameBlock">
+        <img class="inlineAlign CNameIcon" src="../img/filament.svg" />
+        <span class="trans inlineAlign" tid="t16">filament type</span>
+        <div class="CArrow inlineAlign"></div>
+      </div>
+      <div id="FilatypeList" class="CValues">
+        <div class="checkboxText"><input type="checkbox" mode="all" onClick="ChooseAllFilament()" />all</div>
+        <!-- <div class="checkboxText"><input class="inputIndent" type="checkbox" />PET</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />ABS</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />TPU</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />PA6+CF</div> -->
+      </div>
+    </div>
+  </div>
+  <div id="rightBlock" class="ChooseBlock">
+    <div class="SelectAll"><input id="SelectAllCheckbox" type="checkbox" />Select All</div>
+    <div id="ItemBlockArea" class="ZScrol">
+      <!-- <div><input type="checkbox" />QIDI PA-CF</div>	
+      <div><input type="checkbox" />Geneic ABS</div>
+      <div><input type="checkbox" />Geneic PETG</div>	
+      <div><input type="checkbox" />Geneic PLA</div>
+      <div><input type="checkbox" />Geneic TPU</div>
+      <div><input type="checkbox" />Geneic TPU83</div>	
+      <div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+      <div class="MItem"><input type="checkbox" />K5 ABS</div>
+      <div class="MItem"><input type="checkbox" />K5 ASA</div>
+      <div class="MItem"><input type="checkbox" />K5 PETG</div>
+      <div class="MItem"><input type="checkbox" />K5 PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+      <div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+      <div class="MItem"><input type="checkbox" />K5M PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5P PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5P PLA~</div>
+      <div class="MItem"><input type="checkbox" />ALL PLA EXPSilk</div>
+      <div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
+      <div class="MItem"><input type="checkbox" />QIDI PA-CF</div>	
+      <div class="MItem"><input type="checkbox" />Geneic ABS</div>
+      <div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+      <div class="MItem"><input type="checkbox" />Geneic PLA</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+      <div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+      <div class="MItem"><input type="checkbox" />K5 ABS</div>
+      <div class="MItem"><input type="checkbox" />K5 ASA</div>
+      <div class="MItem"><input type="checkbox" />K5 PETG</div>
+      <div class="MItem"><input type="checkbox" />K5 PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+      <div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+      <div class="MItem"><input type="checkbox" />K5M PLA~</div>
+      <div class="MItem"><input type="checkbox" />Geneic ABS</div>
+      <div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+      <div class="MItem"><input type="checkbox" />Geneic PLA</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+      <div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+      <div class="MItem"><input type="checkbox" />K5 ABS</div>
+      <div class="MItem"><input type="checkbox" />K5 ASA</div>
+      <div class="MItem"><input type="checkbox" />K5 PETG</div>
+      <div class="MItem"><input type="checkbox" />K5 PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+      <div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div> -->
+    </div>
+  </div>
 </div>
 <div id="AcceptArea">
 	<div class="GrayBtn trans" tid="t8" id="PreBtn"  onclick="ReturnPreviewPage()">Back</div>
 	<div class="NormalBtn trans" tid="t25" id="AcceptBtn"  onclick="FinishGuide()">finish</div>
 	<!-- //B -->
-	<div class="NormalBtn trans" tid="t9" id="GotoNetPluginBtn"  onclick="FinishGuide()">finish</div>	
+	<!--div class="NormalBtn trans" tid="t9" id="GotoNetPluginBtn"  onclick="GotoNetPluginPage()">Next</div-->		
 </div>
-<div id="NoticeMask">
+<div id="NoticeMask"></div>
+<div id="NoticeBody">
+  <div id="NoticeBar" class="trans" tid="t18">error</div>
+  <div id="NoticeContent">
+    <div id="NoticeText" class="trans" tid="t19">At least one filament must be selected. </div>
+    <div id="NoticeText" class="trans" tid="t20">Do you want to use default filament ?</div>
+    <div id="NoticeBtns">
+      <div class="SmallBtn trans" tid="t21" onClick="ChooseDefaultFilament()">Yes</div>
+      <div class="SmallBtn trans" tid="t22" onClick="ShowNotice(0)">No</div>
+    </div>
+  </div>
 </div>
-	<div id="NoticeBody">
-	<div id="NoticeBar" class="trans" tid="t18">error</div>
-	<div id="NoticeContent">
-	<div id="NoticeText" class="trans" tid="t19">At least one filament must be selected. </div>
-	<div id="NoticeText" class="trans" tid="t20">Do you want to use default filament ?</div>
-	<div id="NoticeBtns">
-		<div class="SmallBtn trans" tid="t21" onClick="ChooseDefaultFilament()">Yes</div>
-		<div class="SmallBtn trans" tid="t22" onClick="ShowNotice(0)">No</div>
-	</div>
-	</div>
-	</div>
-
 </body>
-</html>
+</html>

resources/web/guide/22_remove/22.css

@@ -0,0 +1,119 @@
+
+.ChooseBlock
+{
+	display:flex;
+	line-height: 32px;
+}
+
+.CName
+{
+	width:130px;
+	font-weight: 700;
+	height: 100%;
+	text-align: right;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.CValues
+{
+	display:flex;
+	justify-content: flex-start;
+	align-content: flex-start;
+	flex-wrap: wrap;
+}
+
+input
+{
+	margin-left: 20px;
+	margin-right: 6px;
+	vertical-align: middle;
+}
+
+#ItemSelectArea
+{
+	flex: 0 0 40px;
+	height:40px;
+	border-top: 1px solid #4479fb;
+	display: flex;
+	align-items: center;
+}
+
+#ItemSelectArea .SmallBtn
+{
+	margin-left:5px;
+}
+
+
+#ItemBlockArea
+{
+	flex: 1 0 236px;
+	display:flex;
+	overflow-x:auto;
+	flex-wrap:wrap;
+	flex-direction: column;
+	justify-content:flex-start;
+	align-items: flex-start;
+	align-content:flex-start;
+	line-height: 32px;
+}
+
+.MItem
+{
+	min-width: 220px;
+	height: 32px;
+}
+
+
+#NoticeMask
+{
+	background-color: #000;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 0.05;
+	display: none;
+}
+
+#NoticeBody
+{
+	display: none;
+	width: 500px;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 4px;
+	background-color: inherit;	
+	position: absolute;
+	left: 50%;
+	top: 200px;
+	margin-left: -250px;
+}
+
+#NoticeBar
+{
+	background-color:#00B35C;
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:space-around;
+}
+
+#GotoNetPluginBtn
+{
+	display: none;
+}

resources/web/guide/22_remove/22.js

@@ -0,0 +1,599 @@
+
+var m_ProfileItem;
+
+var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
+var VendorPriority=new Array("qidi tech","qidi","qdt","kexcelled","polymaker","esun","generic","bambu lab","bambulab","bbl");
+  
+function OnInit()
+{
+	TranslatePage();
+	
+	RequestProfile();
+		
+	//m_ProfileItem=cData;
+	//SortUI();
+}
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+//function RequestModelSelect()
+//{
+//	var tSend={};
+//	tSend['sequence_id']=Math.round(new Date() / 1000);
+//	tSend['command']="request_userguide_modelselected";
+//	
+//	SendWXMessage( JSON.stringify(tSend) );
+//}
+
+function HandleStudio(pVal)
+{
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		m_ProfileItem=pVal['response'];
+		SortUI();
+	}
+}
+
+function GetFilamentShortname( sName )
+{
+	let sShort=sName.split('@')[0].trim();
+	
+	return sShort;
+}
+
+
+function SortUI()
+{
+	var ModelList=new Array();
+	
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		
+		if( OneMode["nozzle_selected"]!="" )
+			ModelList.push(OneMode);
+	}
+	
+	//machine
+//	let HtmlMachine='';
+//	
+//	let nMachine=m_ProfileItem['machine'].length;
+//	for(let n=0;n<nMachine;n++)
+//	{
+//		let OneMachine=m_ProfileItem['machine'][n];
+//		
+//		let sName=OneMachine['name'];
+//		let sModel=OneMachine['model'];
+//	
+//		if( ModelList.in_array(sModel) )
+//		{
+//			HtmlMachine+='<div><input type="checkbox" mode="'+sModel+'" onChange="MachineClick()" />'+sName+'</div>';
+//		}
+//	}
+//	
+//	$('#MachineList .CValues').append(HtmlMachine);	
+//	$('#MachineList .CValues input').prop("checked",true);
+//	if(nMachine<=1)
+//	{
+//		$('#MachineList').hide();
+//	}
+	
+	//model
+	let HtmlMode='';
+	nMode=ModelList.length;
+	for(let n=0;n<nMode;n++)
+	{
+		let sModel=ModelList[n];	
+
+		HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
+	}
+	
+	$('#MachineList .CValues').append(HtmlMode);	
+	$('#MachineList .CValues input').prop("checked",true);
+	if(nMode<=1)
+	{
+		$('#MachineList').hide();
+	}
+	
+	//Filament
+	let HtmlFilament='';
+	let SelectNumber=0;
+
+	var TypeHtmlArray={};
+    var VendorHtmlArray={};
+	for( let key in m_ProfileItem['filament'] )
+	{
+		let OneFila=m_ProfileItem['filament'][key];
+		
+		//alert(JSON.stringify(OneFila));
+		
+		let fWholeName=OneFila['name'].trim();
+		let fShortName=GetFilamentShortname( OneFila['name'] );
+		let fVendor=OneFila['vendor'];
+		let fType=OneFila['type'];
+		let fSelect=OneFila['selected'];
+		let fModel=OneFila['models']
+		
+		//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
+		
+//		if(OneFila['name'].indexOf("PA-CF")>=0)
+//		{
+//			alert( fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel )
+//			
+//			let b=1+2;
+//		}
+		
+        let bFind=false;		
+		//let bCheck=$("#MachineList input:first").prop("checked");
+		if( fModel=='')
+		{
+			bFind=true;
+		}
+		else
+		{
+			//check in modellist		    
+		    let nModelAll=ModelList.length;
+		    for(let m=0;m<nModelAll;m++)
+		    {
+	    		let sOne=ModelList[m];
+			
+				let OneName=sOne['model'];
+				let NozzleArray=sOne["nozzle_selected"].split(';');
+				
+				let nNozzle=NozzleArray.length;
+				
+				for( let b=0;b<nNozzle;b++ )
+				{
+					let nowModel= OneName+"++"+NozzleArray[b];
+					if(fModel.indexOf(nowModel)>=0)
+					{
+						bFind=true;
+						break;
+					}
+				}
+			}
+		}
+		
+		if(bFind)
+		{
+			//Type
+			let LowType=fType.toLowerCase();
+		    if(!TypeHtmlArray.hasOwnProperty(LowType))
+		    {
+			    let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
+			
+				TypeHtmlArray[LowType]=HtmlType;
+		    }
+			
+			//Vendor
+			let lowVendor=fVendor.toLowerCase();
+			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
+		    {
+			    let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
+				
+				VendorHtmlArray[lowVendor]=HtmlVendor;
+		    }
+			
+			//Filament
+			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
+	        if(pFila.length==0)
+		    {
+			    let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
+			
+			    $("#ItemBlockArea").append(HtmlFila);
+		    } 
+			else
+			{
+				let strModel=pFila.attr("model");
+				let strFilalist=pFila.attr("filalist");
+				
+				pFila.attr("model", strModel+fModel);
+				pFila.attr("filalist", strFilalist+fWholeName+';');
+			}
+			
+		    if(fSelect*1==1)
+			{
+				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
+					
+				$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
+				SelectNumber++;
+			}
+//			else
+//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
+		}
+	} 
+
+	//Sort TypeArray
+	let TypeAdvNum=FilamentPriority.length;
+	for( let n=0;n<TypeAdvNum;n++ )
+	{
+		let strType=FilamentPriority[n];
+		
+		if( TypeHtmlArray.hasOwnProperty( strType ) )
+		{
+			$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
+			delete( TypeHtmlArray[strType] );
+		}
+	}
+    for(let key in TypeHtmlArray )
+	{
+		$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
+	}
+	$("#FilatypeList .CValues input").prop("checked",true);
+	
+	//Sort VendorArray
+	let VendorAdvNum=VendorPriority.length;
+	for( let n=0;n<VendorAdvNum;n++ )
+	{
+		let strVendor=VendorPriority[n];
+		
+		if( VendorHtmlArray.hasOwnProperty( strVendor ) )
+		{
+			$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
+			delete( VendorHtmlArray[strVendor] );
+		}
+	}
+    for(let key in VendorHtmlArray )
+	{
+		$("#VendorList .CValues").append( VendorHtmlArray[key] );
+	}	
+	$("#VendorList .CValues input").prop("checked",true);
+	
+	//------
+	if(SelectNumber==0)
+		ChooseDefaultFilament();
+	
+	//--If Need Install Network Plugin
+	if(m_ProfileItem["network_plugin_install"]!='1' || (m_ProfileItem["network_plugin_install"]=='1' && m_ProfileItem["network_plugin_compability"]=='0') )
+	{
+		$("#AcceptBtn").hide();
+		$("#GotoNetPluginBtn").show();
+	}
+}
+
+
+function ChooseAllMachine()
+{
+	let bCheck=$("#MachineList input:first").prop("checked");
+	
+	$("#MachineList input").prop("checked",bCheck);
+	
+	SortFilament();
+}
+
+function MachineClick()
+{
+	let nChecked=$("#MachineList input:gt(0):checked").length
+	let nAll    =$("#MachineList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#MachineList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#MachineList input:first").prop("checked",false);
+	}
+	
+	SortFilament();
+}
+
+function ChooseAllFilament()
+{
+	let bCheck=$("#FilatypeList input:first").prop("checked");	
+	$("#FilatypeList input").prop("checked",bCheck);	
+	
+	SortFilament();
+}
+
+function FilaClick()
+{
+	let nChecked=$("#FilatypeList input:gt(0):checked").length
+	let nAll    =$("#FilatypeList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#FilatypeList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#FilatypeList input:first").prop("checked",false);
+	}
+	
+	SortFilament();	
+}
+
+function ChooseAllVendor()
+{
+	let bCheck=$("#VendorList input:first").prop("checked");	
+	$("#VendorList input").prop("checked",bCheck);	
+	
+	SortFilament();
+}
+
+function VendorClick()
+{
+	let nChecked=$("#VendorList input:gt(0):checked").length
+	let nAll    =$("#VendorList input:gt(0)").length
+	
+	if(nAll==nChecked)
+	{
+		$("#VendorList input:first").prop("checked",true);
+	}
+	else
+	{
+		$("#VendorList input:first").prop("checked",false);
+	}
+	
+	SortFilament();
+}
+
+
+
+function SortFilament()
+{
+	let FilaNodes=$("#ItemBlockArea .MItem");
+	let nFilament=FilaNodes.length;
+	//$("#ItemBlockArea .MItem").hide();
+	
+	//ModelList
+	let pModel=$("#MachineList input:checked");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		
+		let mName=OneModel.getAttribute("mode");
+		if( mName=='all' )
+		{
+			continue;
+		}
+		else
+		{
+			let mNozzle=OneModel.getAttribute("nozzle");
+			let NozzleArray=mNozzle.split(';');
+			
+			for( let bb=0;bb<NozzleArray.length;bb++ )
+			{
+				let NewModel='['+mName+'++'+NozzleArray[bb]+']';
+			
+				ModelList.push( NewModel );
+			}
+		}
+	}
+	
+	//TypeList
+	let pType=$("#FilatypeList input:gt(0):checked");
+	let nType=pType.length;
+	let TypeList=new Array();
+	for(let n=0;n<nType;n++)
+	{
+		let OneType=pType[n];
+		TypeList.push(  OneType.getAttribute("filatype") );
+	}	
+	
+	//VendorList
+	let pVendor=$("#VendorList input:gt(0):checked");
+	let nVendor=pVendor.length;
+	let VendorList=new Array();
+	for(let n=0;n<nVendor;n++)
+	{
+		let OneVendor=pVendor[n];
+		VendorList.push(  OneVendor.getAttribute("vendor") );
+	}		
+	
+	
+	//Update Filament UI
+	for(let m=0;m<nFilament;m++)
+	{
+		let OneNode=FilaNodes[m];
+		let OneFF=OneNode.getElementsByTagName("input")[0];
+		
+	    let fModel=OneFF.getAttribute("model");
+		let fVendor=OneFF.getAttribute("vendor");
+		let fType=OneFF.getAttribute("filatype");
+		let fName=OneFF.getAttribute("name");
+		
+		if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
+		{
+			let HasModel=false;
+			for(let m=0;m<ModelList.length;m++)
+			{
+				let ModelSrc=ModelList[m];
+				
+				if( fModel.indexOf(ModelSrc)>=0)
+				{
+					HasModel=true;
+					break;
+				}
+			}
+			
+			if(HasModel || fModel=='')
+			    $(OneNode).show();
+			else
+				$(OneNode).hide();
+		}
+		else
+			$(OneNode).hide();
+	}
+}
+
+function ChooseDefaultFilament()
+{
+	//ModelList
+	let pModel=$("#MachineList input:gt(0)");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		ModelList.push(  OneModel.getAttribute("mode") );
+	}	
+	
+	//DefaultMaterialList
+	let DefaultMaterialString=new Array();
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		let ModeName=OneMode['model'];
+        let DefaultM=OneMode['materials'];
+		
+		if( ModelList.indexOf(ModeName)>-1 )	
+		{
+			DefaultMaterialString+=OneMode['materials']+';';
+		}
+	}	
+	
+	let DefaultMaterialArray=DefaultMaterialString.split(';');
+	//alert(DefaultMaterialString);
+	
+	//Filament
+	let FilaNodes=$("#ItemBlockArea .MItem");
+    let nFilament=FilaNodes.length;
+    for(let m=0;m<nFilament;m++)
+	{
+		let OneNode=FilaNodes[m];
+		let OneFF=OneNode.getElementsByTagName("input")[0];
+		$(OneFF).prop("checked",false);
+		
+	    let filamentList=OneFF.getAttribute("filalist"); 
+		//alert(filamentList);
+		let filamentArray=filamentList.split(';')
+		
+		let HasModel=false;
+		let NowFilaLength=filamentArray.length;
+		for(let p=0;p<NowFilaLength;p++)
+		{
+			let NowFila=filamentArray[p];
+		
+			if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
+			{
+				HasModel=true;
+				break;
+			}
+		}
+			
+		if(HasModel)
+		    $(OneFF).prop("checked",true);
+	}
+	
+	ShowNotice(0);
+}
+
+function SelectAllFilament( nShow )
+{
+	if( nShow==0 )
+	{
+		$('#ItemBlockArea input').prop("checked",false);
+	}
+	else
+	{
+		$('#ItemBlockArea input').prop("checked",true);
+	}
+}
+
+function ShowNotice( nShow )
+{
+	if(nShow==0)
+	{
+		$("#NoticeMask").hide();
+		$("#NoticeBody").hide();
+	}
+	else
+	{
+		$("#NoticeMask").show();
+		$("#NoticeBody").show();
+	}
+}
+
+
+function ResponseFilamentResult()
+{
+	let FilaSelectedList= $("#ItemBlockArea input:checked");
+	let nAll=FilaSelectedList.length;
+
+	if( nAll==0 )
+	{
+		ShowNotice(1);
+		return false;
+	}
+	
+	let FilaArray=new Array();
+	for(let n=0;n<nAll;n++)
+	{
+		let sName=FilaSelectedList[n].getAttribute("name");
+		
+	    for( let key in m_ProfileItem['filament'] )
+	    {
+			let FName=GetFilamentShortname(key);
+			
+			if(FName==sName)
+				FilaArray.push(key);
+		}
+	}
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_userguide_filaments";
+	tSend['data']={};
+	tSend['data']['filament']=FilaArray;
+		
+	SendWXMessage( JSON.stringify(tSend) );
+	
+	return true;
+}
+
+
+function ReturnPreviewPage()
+{
+	let nMode=m_ProfileItem["model"].length;
+	
+	if( nMode==1)
+		document.location.href="../3/index.html";
+	else
+		document.location.href="../21/index.html";	
+}
+
+
+function GotoNetPluginPage()
+{
+	let bRet=ResponseFilamentResult();
+	
+	if(bRet)
+		window.location.href="../5/index.html";
+}
+
+function FinishGuide()
+{
+	let bRet=ResponseFilamentResult();
+	
+	if(bRet)	
+	{
+		var tSend={};
+		tSend['sequence_id']=Math.round(new Date() / 1000);
+		tSend['command']="user_guide_finish";
+		tSend['data']={};
+		tSend['data']['action']="finish";
+		
+		SendWXMessage( JSON.stringify(tSend) );	
+	}
+	//window.location.href="../6/index.html";
+}
+
+
+
+
+

resources/web/guide/22_remove/index.html

@@ -0,0 +1,166 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=0" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="22.css" />
+<link rel="stylesheet" type="text/css" href="../css/dark.css" />		
+<script type="text/javascript" src="test.js"></script>
+<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
+<script type="text/javascript" src="../js/json2.js"></script>	
+<script type="text/javascript" src="../../data/text.js"></script>	
+<script type="text/javascript" src="../js/globalapi.js"></script>	
+<script type="text/javascript" src="../js/common.js"></script>
+<script type="text/javascript" src="./22.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t14">Filament Selection</div>
+</div>
+<div id="Content" class="ZScrol">
+
+<div id="MachineList" class="ChooseBlock">
+	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
+	<div class="CValues">
+	<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></div>
+<!--	<div><input type="checkbox" mode="-normal" onChange="SortFilament()" />QIDITech QDT-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>		
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>		
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	-->	
+	</div>
+</div>	
+	
+<div id="FilatypeList" class="ChooseBlock">
+	<div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
+	<div class="CValues">
+	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div>
+<!--	<div><input type="checkbox" filatype="PLA" />PLA</div>
+	<div><input type="checkbox" />PET</div>	
+	<div><input type="checkbox" />ABS</div>
+	<div><input type="checkbox" />TPU</div>	
+	<div><input type="checkbox" />PA6+CF</div>
+	<div><input type="checkbox" />N/A</div>	
+	<div><input type="checkbox" filatype="PLA" />PLA</div>
+	<div><input type="checkbox" />PET</div>	
+	<div><input type="checkbox" />ABS</div>
+	<div><input type="checkbox" />TPU</div>	
+	<div><input type="checkbox" />PA6+CF</div>
+	<div><input type="checkbox" />N/A</div>	-->		
+	</div>
+</div>
+	
+<div id="VendorList" class="ChooseBlock">
+	<div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
+	<div class="CValues">
+	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div>
+<!--	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
+	<div><input type="checkbox" />QDT</div>	
+	<div><input type="checkbox" />eSUN</div>
+	<div><input type="checkbox" />Kexcelled</div>	
+	<div><input type="checkbox" />Polymaker</div>
+	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
+	<div><input type="checkbox" />QDT</div>	
+	<div><input type="checkbox" />eSUN</div>
+	<div><input type="checkbox" />Kexcelled</div>	
+	<div><input type="checkbox" />Polymaker</div>-->		
+    </div>
+</div>
+
+	
+<div id="ItemSelectArea">
+	<div class="SmallBtn_Green trans" tid="t11" onClick="SelectAllFilament(1)">All</div>
+	<div class="SmallBtn trans" tid="t12" onClick="SelectAllFilament(0)">Clear all</div>
+</div>
+<div id="ItemBlockArea" class="ZScrol">	
+<!--	<div class="MItem"><input type="checkbox" vendor=""  filatype="" model="ALL PLA EXPSilk" name="" />ALL PLA EXPSilk</div>
+	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
+	<div class="MItem"><input type="checkbox" />QIDI PA-CF</div>	
+	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
+	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+	<div class="MItem"><input type="checkbox" />K5 ABS</div>
+	<div class="MItem"><input type="checkbox" />K5 ASA</div>
+	<div class="MItem"><input type="checkbox" />K5 PETG</div>
+	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
+	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+	<div class="MItem"><input type="checkbox" />K5M PLA~</div>
+	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
+	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
+	<div class="MItem"><input type="checkbox" />ALL PLA EXPSilk</div>
+	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
+	<div class="MItem"><input type="checkbox" />QIDI PA-CF</div>	
+	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
+	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+	<div class="MItem"><input type="checkbox" />K5 ABS</div>
+	<div class="MItem"><input type="checkbox" />K5 ASA</div>
+	<div class="MItem"><input type="checkbox" />K5 PETG</div>
+	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
+	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+	<div class="MItem"><input type="checkbox" />K5M PLA~</div>
+	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
+	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+	<div class="MItem"><input type="checkbox" />K5 ABS</div>
+	<div class="MItem"><input type="checkbox" />K5 ASA</div>
+	<div class="MItem"><input type="checkbox" />K5 PETG</div>
+	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
+	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+	<div class="MItem"><input type="checkbox" />K5M PLA~</div>	-->
+</div>
+	
+</div>
+<div id="AcceptArea">
+	<div class="GrayBtn trans" tid="t8" id="PreBtn"  onclick="ReturnPreviewPage()">Back</div>
+	<div class="NormalBtn trans" tid="t25" id="AcceptBtn"  onclick="FinishGuide()">finish</div>
+	<div class="NormalBtn trans" tid="t9" id="GotoNetPluginBtn"  onclick="GotoNetPluginPage()">Next</div>	
+</div>
+<div id="NoticeMask">
+</div>
+	<div id="NoticeBody">
+	<div id="NoticeBar" class="trans" tid="t18">error</div>
+	<div id="NoticeContent">
+	<div id="NoticeText" class="trans" tid="t19">At least one filament must be selected. </div>
+	<div id="NoticeText" class="trans" tid="t20">Do you want to use default filament ?</div>
+	<div id="NoticeBtns">
+		<div class="SmallBtn trans" tid="t21" onClick="ChooseDefaultFilament()">Yes</div>
+		<div class="SmallBtn trans" tid="t22" onClick="ShowNotice(0)">No</div>
+	</div>
+	</div>
+	</div>
+
+</body>
+</html>

resources/web/guide/23/23.css

@@ -1,68 +1,85 @@
-
-.ChooseBlock
-{
-	display:flex;
-	line-height: 32px;
+#leftBlock {
+  flex: 1;
+  padding-left: 9px;
+  padding-right: 9px;
+  border-right: 1px solid #EEEEEE;
 }
 
-.CName
-{
-	width:130px;
-	font-weight: 700;
-	height: 100%;
-	text-align: right;
-	white-space: nowrap;
-	flex-shrink: 0;
+#rightBlock {
+  flex: 2;
+  padding-left: 15px;
+  padding-right: 9px;
 }
 
-.CValues
-{
-	display:flex;
-	justify-content: flex-start;
-	align-content: flex-start;
-	flex-wrap: wrap;
+.CNameBlock {
+  font-weight: 700;
+  height: 28px;
 }
 
-input
+.inlineAlign {
+  display: inline-block;
+  vertical-align: middle;
+  line-height:normal;
+}
+
+.CNameIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.CArrow
 {
-	margin-left: 20px;
-	margin-right: 6px;
+  width: 20px;
+  height: 20px;
+  background-image: url(../img/pull.svg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  float: right;
+  transition: transform 0.3s ease;
+  transform: rotate(90deg);
+}
+.CArrow.active {
+  transform: rotate(0deg);
+}
+
+.CValues {
+  padding: 8px;
+  background-color: #F8F8F8;
+}
+
+input {
+	margin-right: 8px;
 	vertical-align: middle;
+  width: 16px;
+  height: 16px;
 }
 
-#ItemSelectArea
-{
-	flex: 0 0 40px;
-	height:40px;
-	border-top: 1px solid #4479FB;	/* y96 */
-	display: flex;
-	align-items: center;
+.inputIndent { margin-left: 8px;}
+
+.checkboxText {
+  width: 212px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
 }
 
-#ItemSelectArea .SmallBtn
-{
-	margin-left:5px;
+/* right block */
+.SelectAll {
+  width: 100%;
+  text-align: right;
+  font-weight: 700;
 }
 
-
-#ItemBlockArea
-{
-	display:flex;
-	overflow-x:auto;
-	flex-wrap:wrap;
-	flex-direction: column;
-	justify-content:flex-start;
-	align-items: flex-start;
-	align-content:flex-start;
-	line-height: 32px;
-	height: 100%;
-	flex:1 0 236px;
+#ItemBlockArea {
+  column-count: 2;
+  column-gap: 16px;
+  padding-top: 16px;
 }
 
-.MItem
-{
-	min-width: 220px;
-	height: 32px;
+.cols > *{
+  break-inside: avoid;
 }
 
 
@@ -94,7 +111,7 @@ input
 
 #NoticeBar
 {
-	background-color:#4479FB;	/* y96 */
+	background-color:#00B35C;
 	height: 40px;
 	line-height: 40px;
 	color: #fff;
@@ -117,7 +134,7 @@ input
 #SystemFilamentsArea
 {
 	display: none;
-	flex-direction: column;
+	flex-direction: row;
 }
 
 #CFilament_Btn_Area
@@ -148,7 +165,7 @@ input
 	height: calc(100% - 6px);
 	display: flex;
 	align-items: center;
-	border-bottom: 6px solid #4479FB;
+	border-bottom: 6px solid #4479fb;
 }
 
 #Title div.TitleUnselected

resources/web/guide/23/23.js

@@ -6,8 +6,30 @@ var VendorPriority=new Array("qidi","generic");
 
 function OnInit()
 {
+	$("#printerBtn").on("click", function(){
+    $("#MachineList").slideToggle(300);
+    $(this).find(".CArrow").toggleClass("active");
+  });
+
+  $("#filatypeBtn").on("click", function(){
+    $("#FilatypeList").slideToggle(300);
+    $(this).find(".CArrow").toggleClass("active");
+  });
+
+  $("#vendorBtn").on("click", function(){
+    $("#VendorList").slideToggle(300);
+    $(this).find(".CArrow").toggleClass("active");
+  });
+
+  $('#SelectAllCheckbox').change(function() {
+    if ($(this).is(':checked')) {
+      SelectAllFilament(1);
+    } else {
+      SelectAllFilament(0);
+    }
+  });
 	TranslatePage();
-    OnSelectMenu(1);
+  OnSelectMenu(1);
 	
 	RequestProfile();
 	
@@ -79,30 +101,6 @@ function SortUI()
 			ModelList.push(OneMode);
 	}
 	
-	//machine
-//	let HtmlMachine='';
-//	
-//	let nMachine=m_ProfileItem['machine'].length;
-//	for(let n=0;n<nMachine;n++)
-//	{
-//		let OneMachine=m_ProfileItem['machine'][n];
-//		
-//		let sName=OneMachine['name'];
-//		let sModel=OneMachine['model'];
-//	
-//		if( ModelList.in_array(sModel) )
-//		{
-//			HtmlMachine+='<div><input type="checkbox" mode="'+sModel+'" onChange="MachineClick()" />'+sName+'</div>';
-//		}
-//	}
-//	
-//	$('#MachineList .CValues').append(HtmlMachine);	
-//	$('#MachineList .CValues input').prop("checked",true);
-//	if(nMachine<=1)
-//	{
-//		$('#MachineList').hide();
-//	}
-	
 	//model
 	let HtmlMode='';
 	nMode=ModelList.length;
@@ -110,11 +108,11 @@ function SortUI()
 	{
 		let sModel=ModelList[n];	
 
-		HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
+		HtmlMode+='<div class="checkboxText"><input class="inputIndent" type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
 	}
 	
-	$('#MachineList .CValues').append(HtmlMode);	
-	$('#MachineList .CValues input').prop("checked",true);
+	$('#MachineList').append(HtmlMode);	
+	$('#MachineList input').prop("checked",true);
 	if(nMode<=1)
 	{
 		$('#MachineList').hide();
@@ -126,7 +124,23 @@ function SortUI()
 
 	var TypeHtmlArray={};
     var VendorHtmlArray={};
-	for( let key in m_ProfileItem['filament'] )
+
+	
+	//y73
+	var sortedFilamentKeys = Object.keys(m_ProfileItem['filament']).sort((a, b) => {
+        let vendorA = m_ProfileItem['filament'][a]['vendor'].toLowerCase();
+        let vendorB = m_ProfileItem['filament'][b]['vendor'].toLowerCase();
+
+        let indexA = VendorPriority.indexOf(vendorA);
+        let indexB = VendorPriority.indexOf(vendorB);
+        
+        if(indexA === -1) indexA = Number.MAX_SAFE_INTEGER;
+        if(indexB === -1) indexB = Number.MAX_SAFE_INTEGER;
+        
+        return indexA - indexB;
+    });
+	//alert(sortedFilamentKeys);
+	for( let key of sortedFilamentKeys)
 	{
 		let OneFila=m_ProfileItem['filament'][key];
 		
@@ -135,9 +149,6 @@ function SortUI()
 		let fWholeName=OneFila['name'].trim();
 		let fShortName=GetFilamentShortname( OneFila['name'] );
 		let fVendor = OneFila['vendor'];
-		//w22
-		if (fVendor != "QIDI")
-			continue;
 		let fType=OneFila['type'];
 		let fSelect=OneFila['selected'];
 		let fModel=OneFila['models']
@@ -188,7 +199,7 @@ function SortUI()
 			let LowType=fType.toLowerCase();
 		    if(!TypeHtmlArray.hasOwnProperty(LowType))
 		    {
-			    let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
+			    let HtmlType='<div class="checkboxText"><input class="inputIndent" type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
 			
 				TypeHtmlArray[LowType]=HtmlType;
 		    }
@@ -197,7 +208,7 @@ function SortUI()
 			let lowVendor=fVendor.toLowerCase();
 			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
 		    {
-			    let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
+			    let HtmlVendor='<div class="checkboxText"><input class="inputIndent" type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
 				
 				VendorHtmlArray[lowVendor]=HtmlVendor;
 		    }
@@ -206,7 +217,7 @@ function SortUI()
 			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
 	        if(pFila.length==0)
 		    {
-			    let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
+			    let HtmlFila='<div><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
 			
 			    $("#ItemBlockArea").append(HtmlFila);
 		    } 
@@ -231,99 +242,6 @@ function SortUI()
 		}
 	}
 
-	//w22
-	for (let key in m_ProfileItem['filament']) {
-		let OneFila = m_ProfileItem['filament'][key];
-
-		//alert(JSON.stringify(OneFila));
-
-		let fWholeName = OneFila['name'].trim();
-		let fShortName = GetFilamentShortname(OneFila['name']);
-		let fVendor = OneFila['vendor'];
-		if (fVendor == "QIDI")
-			continue;
-		let fType = OneFila['type'];
-		let fSelect = OneFila['selected'];
-		let fModel = OneFila['models']
-
-		//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
-
-		//		if(OneFila['name'].indexOf("QIDI PA-CF")>=0)
-		//		{
-		//			alert( fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel )
-		//			
-		//			let b=1+2;
-		//		}
-
-		let bFind = false;
-		//let bCheck=$("#MachineList input:first").prop("checked");
-		if (fModel == '') {
-			bFind = true;
-		}
-		else {
-			//check in modellist		    
-			let nModelAll = ModelList.length;
-			for (let m = 0; m < nModelAll; m++) {
-				let sOne = ModelList[m];
-
-				let OneName = sOne['model'];
-				let NozzleArray = sOne["nozzle_selected"].split(';');
-
-				let nNozzle = NozzleArray.length;
-
-				for (let b = 0; b < nNozzle; b++) {
-					let nowModel = OneName + "++" + NozzleArray[b];
-					if (fModel.indexOf(nowModel) >= 0) {
-						bFind = true;
-						break;
-					}
-				}
-			}
-		}
-
-		if (bFind) {
-			//Type
-			let LowType = fType.toLowerCase();
-			if (!TypeHtmlArray.hasOwnProperty(LowType)) {
-				let HtmlType = '<div><input type="checkbox" filatype="' + fType + '" onChange="FilaClick()"   />' + fType + '</div>';
-
-				TypeHtmlArray[LowType] = HtmlType;
-			}
-
-			//Vendor
-			let lowVendor = fVendor.toLowerCase();
-			if (!VendorHtmlArray.hasOwnProperty(lowVendor)) {
-				let HtmlVendor = '<div><input type="checkbox" vendor="' + fVendor + '"  onChange="VendorClick()" />' + fVendor + '</div>';
-
-				VendorHtmlArray[lowVendor] = HtmlVendor;
-			}
-
-			//Filament
-			let pFila = $("#ItemBlockArea input[vendor='" + fVendor + "'][filatype='" + fType + "'][name='" + fShortName + "']");
-			if (pFila.length == 0) {
-				let HtmlFila = '<div class="MItem"><input type="checkbox" vendor="' + fVendor + '"  filatype="' + fType + '" filalist="' + fWholeName + ';' + '"  model="' + fModel + '" name="' + fShortName + '" />' + fShortName + '</div>';
-
-				$("#ItemBlockArea").append(HtmlFila);
-			}
-			else {
-				let strModel = pFila.attr("model");
-				let strFilalist = pFila.attr("filalist");
-
-				pFila.attr("model", strModel + fModel);
-				pFila.attr("filalist", strFilalist + fWholeName + ';');
-			}
-
-			if (fSelect * 1 == 1) {
-				//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
-
-				$("#ItemBlockArea input[vendor='" + fVendor + "'][filatype='" + fType + "'][name='" + fShortName + "']").prop("checked", true);
-				SelectNumber++;
-			}
-			//			else
-			//				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
-		}
-	}
-
 	//Sort TypeArray
 	let TypeAdvNum=FilamentPriority.length;
 	for( let n=0;n<TypeAdvNum;n++ )
@@ -332,15 +250,15 @@ function SortUI()
 		
 		if( TypeHtmlArray.hasOwnProperty( strType ) )
 		{
-			$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
+			$("#FilatypeList").append( TypeHtmlArray[strType] );
 			delete( TypeHtmlArray[strType] );
 		}
 	}
     for(let key in TypeHtmlArray )
 	{
-		$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
+		$("#FilatypeList").append( TypeHtmlArray[key] );
 	}
-	$("#FilatypeList .CValues input").prop("checked",true);
+	$("#FilatypeList input").prop("checked",true);
 	
 	//Sort VendorArray
 	let VendorAdvNum=VendorPriority.length;
@@ -350,15 +268,15 @@ function SortUI()
 		
 		if( VendorHtmlArray.hasOwnProperty( strVendor ) )
 		{
-			$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
+			$("#VendorList").append( VendorHtmlArray[strVendor] );
 			delete( VendorHtmlArray[strVendor] );
 		}
 	}
     for(let key in VendorHtmlArray )
 	{
-		$("#VendorList .CValues").append( VendorHtmlArray[key] );
+		$("#VendorList").append( VendorHtmlArray[key] );
 	}	
-	$("#VendorList .CValues input").prop("checked",true);
+	$("#VendorList input").prop("checked",true);
 	
 	//------
 	if(SelectNumber==0)
@@ -446,7 +364,7 @@ function VendorClick()
 
 function SortFilament()
 {
-	let FilaNodes=$("#ItemBlockArea .MItem");
+	let FilaNodes=$("#ItemBlockArea div");
 	let nFilament=FilaNodes.length;
 	//$("#ItemBlockArea .MItem").hide();
 	
@@ -587,6 +505,68 @@ function SelectAllFilament( nShow )
 	}
 }
 
+function ChooseDefaultFilament()
+{
+	//ModelList
+	let pModel=$("#MachineList input:gt(0)");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		ModelList.push(  OneModel.getAttribute("mode") );
+	}	
+	
+	//DefaultMaterialList
+	let DefaultMaterialString=new Array();
+	let nMode=m_ProfileItem["model"].length;
+	for(let n=0;n<nMode;n++)
+	{
+		let OneMode=m_ProfileItem["model"][n];
+		let ModeName=OneMode['model'];
+        let DefaultM=OneMode['materials'];
+		
+		if( ModelList.indexOf(ModeName)>-1 )	
+		{
+			DefaultMaterialString+=OneMode['materials']+';';
+		}
+	}	
+	
+	let DefaultMaterialArray=DefaultMaterialString.split(';');
+	//alert(DefaultMaterialString);
+	
+	//Filament
+	let FilaNodes=$("#ItemBlockArea input");
+    let nFilament=FilaNodes.length;
+    for(let m=0;m<nFilament;m++)
+	{
+		let OneFF=FilaNodes[m];
+		$(OneFF).prop("checked",false);
+		
+	  let filamentList=OneFF.getAttribute("filalist"); 
+		//alert(filamentList);
+		let filamentArray=filamentList.split(';')
+		
+		let HasModel=false;
+		let NowFilaLength=filamentArray.length;
+		for(let p=0;p<NowFilaLength;p++)
+		{
+			let NowFila=filamentArray[p];
+		
+			if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
+			{
+				HasModel=true;
+				break;
+			}
+		}
+			
+		if(HasModel)
+		    $(OneFF).prop("checked",true);
+	}
+	
+	ShowNotice(0);
+}
+
 function ShowNotice( nShow )
 {
 	if(nShow==0)

resources/web/guide/23/index.html

@@ -22,111 +22,105 @@
 <div id="Content" class="ZScrol">
 	
 <div id="SystemFilamentsArea">
-<div id="MachineList" class="ChooseBlock">
-	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
-	<div class="CValues">
-	<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></div>
-<!--	<div><input type="checkbox" mode="-normal" onChange="SortFilament()" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>		
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>	
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />QIDITech QDT-3DP-001-V5-normal</div>	-->		
-	</div>
-</div>	
-	
-<div id="FilatypeList" class="ChooseBlock">
-	<div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
-	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div>
-<!--	<div><input type="checkbox" filatype="PLA" />PLA</div>
-	<div><input type="checkbox" />PET</div>	
-	<div><input type="checkbox" />ABS</div>
-	<div><input type="checkbox" />TPU</div>	
-	<div><input type="checkbox" />PA6+CF</div>
-	<div><input type="checkbox" />N/A</div>	-->			
-	</div>
-</div>
-	
-<div id="VendorList" class="ChooseBlock">
-	<div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
-	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div>
-<!--	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
-	<div><input type="checkbox" />QDT</div>	
-	<div><input type="checkbox" />eSUN</div>
-	<div><input type="checkbox" />Kexcelled</div>	
-	<div><input type="checkbox" />Polymaker</div>
-	<div><input type="checkbox" vendor="Unknow" />Unknown</div>	-->
+	<div id="leftBlock" class="ChooseBlock">
+    <div id="printerShow">
+      <div id="printerBtn" class="CNameBlock">
+        <img class="inlineAlign CNameIcon" src="../img/printer.svg" />
+        <span class="trans inlineAlign" tid="t15">printer</span>
+        <div class="CArrow inlineAlign"></div>
+      </div>
+      <div id="MachineList" class="CValues">
+        <div class="checkboxText"><input type="checkbox" mode="all" onClick="ChooseAllMachine()" />all</div>
+        <!-- <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" mode="-normal" />QIDITech QDT-3DP-001-V5-normal</div> -->
+      </div>
     </div>
-</div>
-
-<div id="ItemSelectArea">
-	<div class="SmallBtn_Green trans" tid="t11" onClick="SelectAllFilament(1)">all</div>
-	<div class="SmallBtn trans" tid="t12" onClick="SelectAllFilament(0)">Clear all</div>
-</div>	
-	
-<div id="ItemBlockArea" class="ZScrol">	
-<!--	<div class="MItem"><input type="checkbox" vendor=""  filatype="" model="ALL PLA EXPSilk" name="" />ALL PLA EXPSilk</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
-	<div class="MItem"><input type="checkbox" />QDT PA-CF</div>	
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
-	<div class="MItem"><input type="checkbox" />K5 ABS</div>
-	<div class="MItem"><input type="checkbox" />K5 ASA</div>
-	<div class="MItem"><input type="checkbox" />K5 PETG</div>
-	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
-	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
-	<div class="MItem"><input type="checkbox" />K5M PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA EXPSilk</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
-	<div class="MItem"><input type="checkbox" />QDT PA-CF</div>	
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
-	<div class="MItem"><input type="checkbox" />QDT PA-CF</div>	
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU90</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
-	<div class="MItem"><input type="checkbox" />K5 ABS</div>
-	<div class="MItem"><input type="checkbox" />K5 ASA</div>
-	<div class="MItem"><input type="checkbox" />K5 PETG</div>
-	<div class="MItem"><input type="checkbox" />K5 PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
-	<div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
-	<div class="MItem"><input type="checkbox" />K5M PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
-	<div class="MItem"><input type="checkbox" />K5P PLA~</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA EXPSilk</div>
-	<div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
-	<div class="MItem"><input type="checkbox" />QDT PA-CF</div>	
-	<div class="MItem"><input type="checkbox" />Geneic ABS</div>
-	<div class="MItem"><input type="checkbox" />Geneic PETG</div>	
-	<div class="MItem"><input type="checkbox" />Geneic PLA</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU</div>
-	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
-	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>	-->
-</div>
+    <div id="vendorShow">
+      <div id="vendorBtn" class="CNameBlock">
+        <img class="inlineAlign CNameIcon" src="../img/vendor.svg" />
+        <span class="trans inlineAlign" tid="t17">vendor</span>
+        <div class="CArrow inlineAlign"></div>
+      </div>
+      <div id="VendorList" class="CValues">
+        <div class="checkboxText"><input type="checkbox" mode="all" onClick="ChooseAllVendor()" />all</div>
+        <!-- <div class="checkboxText"><input class="inputIndent" type="checkbox" />QDT</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />eSUN</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />Kexcelled</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />Unknown</div> -->
+      </div>
+    </div>
+    <div id="filatypeShow">
+      <div id="filatypeBtn" class="CNameBlock">
+        <img class="inlineAlign CNameIcon" src="../img/filament.svg" />
+        <span class="trans inlineAlign" tid="t16">filament type</span>
+        <div class="CArrow inlineAlign"></div>
+      </div>
+      <div id="FilatypeList" class="CValues">
+        <div class="checkboxText"><input type="checkbox" mode="all" onClick="ChooseAllFilament()" />all</div>
+        <!-- <div class="checkboxText"><input class="inputIndent" type="checkbox" />PET</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />ABS</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />TPU</div>
+        <div class="checkboxText"><input class="inputIndent" type="checkbox" />PA6+CF</div> -->
+      </div>
+    </div>
+  </div>
+  <div id="rightBlock" class="ChooseBlock">
+    <div class="SelectAll"><input id="SelectAllCheckbox" type="checkbox" />Select All</div>
+    <div id="ItemBlockArea" class="ZScrol">
+      <!-- <div><input type="checkbox" />QIDI PA-CF</div>	
+      <div><input type="checkbox" />Geneic ABS</div>
+      <div><input type="checkbox" />Geneic PETG</div>	
+      <div><input type="checkbox" />Geneic PLA</div>
+      <div><input type="checkbox" />Geneic TPU</div>
+      <div><input type="checkbox" />Geneic TPU83</div>	
+      <div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+      <div class="MItem"><input type="checkbox" />K5 ABS</div>
+      <div class="MItem"><input type="checkbox" />K5 ASA</div>
+      <div class="MItem"><input type="checkbox" />K5 PETG</div>
+      <div class="MItem"><input type="checkbox" />K5 PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+      <div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+      <div class="MItem"><input type="checkbox" />K5M PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5P PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5P PLA~</div>
+      <div class="MItem"><input type="checkbox" />ALL PLA EXPSilk</div>
+      <div class="MItem"><input type="checkbox" />ALL PLA Silk</div>
+      <div class="MItem"><input type="checkbox" />QIDI PA-CF</div>	
+      <div class="MItem"><input type="checkbox" />Geneic ABS</div>
+      <div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+      <div class="MItem"><input type="checkbox" />Geneic PLA</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+      <div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+      <div class="MItem"><input type="checkbox" />K5 ABS</div>
+      <div class="MItem"><input type="checkbox" />K5 ASA</div>
+      <div class="MItem"><input type="checkbox" />K5 PETG</div>
+      <div class="MItem"><input type="checkbox" />K5 PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+      <div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div>
+      <div class="MItem"><input type="checkbox" />K5M PLA~</div>
+      <div class="MItem"><input type="checkbox" />Geneic ABS</div>
+      <div class="MItem"><input type="checkbox" />Geneic PETG</div>	
+      <div class="MItem"><input type="checkbox" />Geneic PLA</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
+      <div class="MItem"><input type="checkbox" />Geneic TPU87</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU90</div>
+      <div class="MItem"><input type="checkbox" />Geneic TPU95</div>	
+      <div class="MItem"><input type="checkbox" />K5 ABS</div>
+      <div class="MItem"><input type="checkbox" />K5 ASA</div>
+      <div class="MItem"><input type="checkbox" />K5 PETG</div>
+      <div class="MItem"><input type="checkbox" />K5 PLA~</div>
+      <div class="MItem"><input type="checkbox" />K5 Silk PLA</div>
+      <div class="MItem"><input type="checkbox" />K5 Sparkle PLA</div> -->
+    </div>
+  </div>
 </div>
 	
 	

resources/web/guide/css/dark.css

@@ -73,3 +73,8 @@ body
 {
 	color: #BEBEC0;
 }
+
+/*----pull region---*/
+.CValues {
+  background-color: #535353;
+}

resources/web/helio/helio_service_cn.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<script type="text/javascript" src="js/index.js"></script>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            position: absolute;
+            width: 690px;
+            height: 445px;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px; /* 157% */
+            color: #5C5C5C;
+            margin: 10;
+            box-sizing: border-box;
+        }
+        .header {
+            background-color: #f5f5f5;
+            padding: 10px 15px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+		.underline {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+        .header h1 {
+            font-size: 16px;
+            margin: 0;
+            color: #333333;
+        }
+        h2 {
+            font-size: 16px;
+            margin: 0 0 15px 0;
+            color: #333333;
+        }
+        p {
+            margin: 0 0 15px 0;
+            text-align: justify;
+        }
+        strong {
+            font-weight: 600;
+            color: #333333;
+        }
+        a {
+            color: #0066CC;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        ul {
+            margin: 0 0 15px 20px;
+            padding: 0;
+        }
+        li {
+            margin-bottom: 8px;
+        }
+        .buttons {
+            margin-top: 25px;
+            display: flex;
+            gap: 15px;
+        }
+        .btn {
+            padding: 8px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-size: 14px;
+            line-height: 1;
+            border: none;
+        }
+        .btn-primary {
+            background-color: #007DFF;
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #0066CC;
+        }
+        .btn-secondary {
+            background-color: #F5F5F5;
+            color: #5C5C5C;
+            border: 1px solid #DDDDDD;
+        }
+        .btn-secondary:hover {
+            background-color: #EAEAEA;
+        }
+        .warning {
+            color: #FF5722;
+        }
+		
+		body.dark {
+            background-color: #2d2d31;
+            color: #FFFFFF;
+        }
+
+        body.dark .header {
+            background-color: #2d2d2d;
+            border-bottom-color: #444;
+
+        }
+
+        body.dark h1,
+        body.dark h2,
+        body.dark strong {
+            color: #FFFFFF;
+        }
+
+        body.dark a {
+            color: #90caf9;
+        }
+
+        body.dark .btn-secondary {
+            background-color: #333;
+            color: #FFFFFF;
+            border-color: #555;
+        }
+
+        body.dark .btn-secondary:hover {
+            background-color: #444;
+        }
+
+        body.dark .warning {
+            color: #ff8a65;
+        }
+    </style>
+</head>
+<body>
+    <p>您正准备开启一个来自<strong class="underline">Helio Additive</strong><strong>的第三方软件服务功能</strong>！在确认使用此功能前，请仔细阅读以下声明。</p>
+    
+    <p>除非特殊说明，拓竹科技仅对官方提供的软件功能提供支持。本软件中基于Helio Additive云端服务的切片评估和切片优化功能<strong>由Helio Additive负责开发、维护以及对外提供服务，其服务效果和可用性由Helio Additive负责</strong>。本服务的优化功能<strong>可能修改默认的打印指令，存在打印机损坏的风险。</strong></span>同时这些功能将<strong>收集必要的用户信息和数据</strong>以实现相关服务功能，并可能<strong>涉及订阅与付费</strong>，请访问<a class="underline" href="#" onclick="OpenHomeLink()">Helio Addtive</a>和参考<a class="underline" href="#" onclick="OpenPPLink()">Helio Additive隐私协议</a>和<a class="underline" href="#" onclick="OpenTouLink()">Helio Addtive 用户使用协议</a>获取详细信息。</p>
+    
+    <p>同时，您理解本产品是<strong>基于Helio Additive的服务“按原样”向您提供</strong>，拓竹不存在任何形式的明示或暗示担保，也无法控制服务效果，并且在适用法律允许的最大范围内，拓竹、其许可方/附属公司均不提供任何明示或暗示的陈述或保证，包括但不限于有关适销性、满意质量、适用于特定目的、准确性、保密权以及不侵犯第三方权利的保证。基于网络服务的特性，拓竹无法保证该服务随时可达，并且拓竹有权根据相关情况终止该服务。</p>
+    
+    <p>您同意不使用本产品及相关更新内容从事以下行为：</p>
+    <ol>
+        <li>在Helio Additive和拓竹授权范围之外复制或使用本产品的任何一部分内容；</li>
+        <li>企图破坏、绕过、改变、作废或者逃避和本产品相关的以及/或者属于本产品有机组成的一部分的任何数字版权管理系统；</li>
+        <li>利用本软件和服务进行任何不当或违反法律的行为。</li>
+    </ol>
+    
+    <p><strong>当您确认开启此功能后，代表您已经确认和同意以上声明。</strong></p>
+</body>
+</html>
+
+<script type="text/javascript">
+	const darkmode = getUrlParam('darkmode');
+	if (darkmode === '1') {
+		document.body.classList.add('dark');
+    }
+</script>

resources/web/helio/helio_service_en.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<script type="text/javascript" src="js/index.js"></script>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            position: absolute;
+            width: 690px;
+            height: 445px;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px; /* 157% */
+            color: #5C5C5C;
+            margin: 10;
+            box-sizing: border-box;
+        }
+        .header {
+            background-color: #f5f5f5;
+            padding: 10px 15px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+		.underline {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+        .header h1 {
+            font-size: 16px;
+            margin: 0;
+            color: #333333;
+        }
+        h2 {
+            font-size: 16px;
+            margin: 0 0 15px 0;
+            color: #333333;
+        }
+        p {
+            margin: 0 0 15px 0;
+            text-align: justify;
+        }
+        strong {
+            font-weight: 600;
+            color: #333333;
+        }
+        a {
+            color: #0066CC;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        ul {
+            margin: 0 0 15px 20px;
+            padding: 0;
+        }
+        li {
+            margin-bottom: 8px;
+        }
+        .buttons {
+            margin-top: 25px;
+            display: flex;
+            gap: 15px;
+        }
+        .btn {
+            padding: 8px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-size: 14px;
+            line-height: 1;
+            border: none;
+        }
+        .btn-primary {
+            background-color: #007DFF;
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #0066CC;
+        }
+        .btn-secondary {
+            background-color: #F5F5F5;
+            color: #5C5C5C;
+            border: 1px solid #DDDDDD;
+        }
+        .btn-secondary:hover {
+            background-color: #EAEAEA;
+        }
+        .warning {
+            color: #FF5722;
+        }
+
+        body.dark {
+            background-color: #2d2d31;
+            color: #FFFFFF;
+        }
+
+        body.dark .header {
+            background-color: #2d2d2d;
+            border-bottom-color: #444;
+
+        }
+
+        body.dark h1,
+        body.dark h2,
+        body.dark strong {
+            color: #FFFFFF;
+        }
+
+        body.dark a {
+            color: #90caf9;
+        }
+
+        body.dark .btn-secondary {
+            background-color: #333;
+            color: #FFFFFF;
+            border-color: #555;
+        }
+
+        body.dark .btn-secondary:hover {
+            background-color: #444;
+        }
+
+        body.dark .warning {
+            color: #ff8a65;
+        }
+    </style>
+</head>
+<body>
+    <p>You are about to enable <strong>a third-party software service feature from <span class="underline">Helio Additive</span></strong>! Before confirming the use of this feature, please carefully read the following statements.</p>
+    
+    <p>Unless otherwise specified, QIDI Tech only provides support for the software features officially provided. The slicing evaluation and slicing optimization features based on Helio Additive's cloud service in this software will be <strong>developed, operated, provided, and maintained by Helio Additive. Helio Additive is responsible for the effectiveness and availability of this service</strong>. The optimization feature of this service may <strong>modify the default print commands, posing a risk of printer damage</strong>. These features will <strong>collect necessary user information and data</strong> to achieve relevant service functions. <strong>Subscriptions and payments may be involved</strong>. Please visit <a class="underline" href="#" onclick="OpenHomeLink()">Helio Additive</a> and refer to the <a class="underline" href="#" onclick="OpenPPLink()">Helio Additive Privacy Agreement</a> and <a class="underline" href="#" onclick="OpenTouLink()">Helio Additive User Agreement</a> for detailed information.</p>
+    
+    <p>Meanwhile, you understand that this product is provided to you "as is" <strong>based on <span class="underline">Helio Additive</span>'s services</strong>, and QIDI Tech makes no express or implied warranties of any kind, nor can it control the service effects. To the fullest extent permitted by applicable law, QIDI Tech or its licensors/affiliates do not provide any express or implied representations or warranties, including but not limited to warranties regarding merchantability, satisfactory quality, fitness for a particular purpose, accuracy, confidentiality, and non-infringement of third-party rights. Due to the nature of network services, QIDI Tech cannot guarantee that the service will be available at all times, and QIDI Tech reserves the right to terminate the service based on relevant circumstances. You agree not to use this product and its related updates to engage in the following activities:</p>
+    
+    <ol>
+        <li>Copy or use any part of this product outside the authorized scope of <span class="underline">Helio Additive</span> and QIDI Tech;</li>
+        <li>Attempt to disrupt, bypass, alter, invalidate, or evade any Digital Rights Management system related to and/or an integral part of this product;</li>
+        <li>Using this software and services for any improper or illegal activities.</li>
+    </ol>
+    
+    <p><strong>When you confirm to enable this feature, it means that you have confirmed and agreed to the above statements.</strong></p>
+</body>
+</html>
+
+<script type="text/javascript">
+	const darkmode = getUrlParam('darkmode');
+	if (darkmode === '1') {
+		document.body.classList.add('dark');
+    }
+</script>

resources/web/helio/helio_service_snote_cn.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<script type="text/javascript" src="js/index.js"></script>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            position: absolute;
+            width: 690px;
+            height: 190px;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px; /* 157% */
+            color: #5C5C5C;
+            margin: 10;
+            box-sizing: border-box;
+        }
+
+        .header {
+            background-color: #f5f5f5;
+            padding: 10px 15px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .underline {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+
+        .header h1 {
+            font-size: 16px;
+            margin: 0;
+            color: #333333;
+        }
+
+        h2 {
+            font-size: 16px;
+            margin: 0 0 15px 0;
+            color: #333333;
+        }
+
+        p {
+            margin: 0 0 15px 0;
+            text-align: justify;
+        }
+
+        strong {
+            font-weight: 600;
+            color: #333333;
+        }
+
+        a {
+            color: #0066CC;
+            text-decoration: none;
+        }
+
+            a:hover {
+                text-decoration: underline;
+            }
+
+        ul {
+            margin: 0 0 15px 20px;
+            padding: 0;
+        }
+
+        li {
+            margin-bottom: 8px;
+        }
+
+        .buttons {
+            margin-top: 25px;
+            display: flex;
+            gap: 15px;
+        }
+
+        .btn {
+            padding: 8px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-size: 14px;
+            line-height: 1;
+            border: none;
+        }
+
+        .btn-primary {
+            background-color: #007DFF;
+            color: white;
+        }
+
+            .btn-primary:hover {
+                background-color: #0066CC;
+            }
+
+        .btn-secondary {
+            background-color: #F5F5F5;
+            color: #5C5C5C;
+            border: 1px solid #DDDDDD;
+        }
+
+            .btn-secondary:hover {
+                background-color: #EAEAEA;
+            }
+
+        .warning {
+            color: #FF5722;
+        }
+
+        .special-note {
+            font-family: 'HarmonyOS Sans SC';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 22px;
+            color: #212121;
+            display: block;
+        }
+		
+		body.dark {
+            background-color: #2d2d31;
+            color: #FFFFFF;
+        }
+
+        body.dark .header {
+            background-color: #2d2d2d;
+            border-bottom-color: #444;
+
+        }
+
+        body.dark h1,
+        body.dark h2,
+        body.dark strong {
+            color: #FFFFFF;
+        }
+
+		body.dark .special-note {
+            color: #FFFFFF;
+        }
+		
+        body.dark a {
+            color: #90caf9;
+        }
+
+        body.dark .btn-secondary {
+            background-color: #333;
+            color: #FFFFFF;
+            border-color: #555;
+        }
+
+        body.dark .btn-secondary:hover {
+            background-color: #444;
+        }
+
+        body.dark .warning {
+            color: #ff8a65;
+        }
+    </style>
+</head>
+<body>
+    <p><span class="special-note">特别说明</span></p>
+
+    <p>该内容由第三方 Helio Additive 提供和托管。所有数据收集和处理活动均由 Helio Additive 独立负责，QIDI Tech对此不承担任何责任。 点击“同意并继续”即表示您同意 <a class="underline" href="#" onclick="OpenPPLink()">Helio Additive的隐私协议</a>。</p>
+
+</body>
+</html>
+
+<script type="text/javascript">
+	const darkmode = getUrlParam('darkmode');
+	if (darkmode === '1') {
+		document.body.classList.add('dark');
+    }
+</script>

resources/web/helio/helio_service_snote_en.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<script type="text/javascript" src="js/index.js"></script>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            position: absolute;
+            width: 690px;
+            height: 190px;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px; /* 157% */
+            color: #5C5C5C;
+            margin: 10;
+            box-sizing: border-box;
+        }
+        .header {
+            background-color: #f5f5f5;
+            padding: 10px 15px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+		.underline {
+            text-decoration: underline;
+            text-underline-offset: 2px;
+        }
+        .header h1 {
+            font-size: 16px;
+            margin: 0;
+            color: #333333;
+        }
+        h2 {
+            font-size: 16px;
+            margin: 0 0 15px 0;
+            color: #333333;
+        }
+        p {
+            margin: 0 0 15px 0;
+            text-align: justify;
+        }
+        strong {
+            font-weight: 600;
+            color: #333333;
+        }
+        a {
+            color: #0066CC;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        ul {
+            margin: 0 0 15px 20px;
+            padding: 0;
+        }
+        li {
+            margin-bottom: 8px;
+        }
+        .buttons {
+            margin-top: 25px;
+            display: flex;
+            gap: 15px;
+        }
+        .btn {
+            padding: 8px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: 'HarmonyOS Sans SC', sans-serif;
+            font-size: 14px;
+            line-height: 1;
+            border: none;
+        }
+        .btn-primary {
+            background-color: #007DFF;
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #0066CC;
+        }
+        .btn-secondary {
+            background-color: #F5F5F5;
+            color: #5C5C5C;
+            border: 1px solid #DDDDDD;
+        }
+        .btn-secondary:hover {
+            background-color: #EAEAEA;
+        }
+        .warning {
+            color: #FF5722;
+        }
+		.special-note {
+            font-family: 'HarmonyOS Sans SC';
+            font-style: normal;
+            font-weight: 700;
+            font-size: 16px;
+            line-height: 22px;
+            color: #212121;
+            display: block;
+        }
+		
+		body.dark {
+            background-color: #2d2d31;
+            color: #FFFFFF;
+        }
+
+        body.dark .header {
+            background-color: #2d2d2d;
+            border-bottom-color: #444;
+
+        }
+
+        body.dark h1,
+        body.dark h2,
+        body.dark strong {
+            color: #FFFFFF;
+        }
+
+		body.dark .special-note {
+            color: #FFFFFF;
+        }
+        body.dark a {
+            color: #90caf9;
+        }
+
+        body.dark .btn-secondary {
+            background-color: #333;
+            color: #FFFFFF;
+            border-color: #555;
+        }
+
+        body.dark .btn-secondary:hover {
+            background-color: #444;
+        }
+
+        body.dark .warning {
+            color: #ff8a65;
+        }
+    </style>
+</head>
+<body>
+    <p><span class="special-note">Special Note</span></p>
+    
+    <p>This service is provided and hosted by a third party, Helio Additive. All data collection and processing activities are solely managed by Helio Additive, and QIDI Tech assumes no responsibility in this regard.  By clicking "Accept and proceed", you agree to <a class="underline" href="#" onclick="OpenPPLink()">Helio Additive's privacy policy. </a></p>
+	
+</body>
+</html>
+
+<script type="text/javascript">
+	const darkmode = getUrlParam('darkmode');
+	if (darkmode === '1') {
+		document.body.classList.add('dark');
+    }
+</script>

resources/web/helio/js/index.js

@@ -0,0 +1,31 @@
+function IsInSlicer() {
+    let bMatch = navigator.userAgent.match(RegExp('BBL-Slicer', 'i'));
+
+    return bMatch;
+}
+
+function SendWXMessage(strMsg) {
+    let bCheck = IsInSlicer();
+
+    if (bCheck != null) {
+        window.wx.postMessage(strMsg);
+    }
+}
+
+function OpenPPLink() {
+    SendWXMessage("helio_link_pp");
+}
+
+function OpenTouLink() {
+    SendWXMessage("helio_link_tou");
+}
+
+function OpenHomeLink() {
+    SendWXMessage("helio_link_home");
+}
+
+function getUrlParam(name) {
+	const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`);
+	const r = window.location.search.substr(1).match(reg);
+	return r ? decodeURIComponent(r[2]) : null;
+}

resources/web/homepage3/css/dark.css

@@ -104,7 +104,7 @@ html,body
 	box-shadow: 0px 0px 3px #DCDCDC;
 }
 
-#HotModel_Search_Btn img
+.searchBtn img
 {
 	filter: brightness(78%);
 }
@@ -137,24 +137,24 @@ html,body
 	filter: invert(1);
 }
 
-#HotModel_Search_Bar
+.searchBar
 {
 	border: 1px solid #5C5C5C;
 	background-color: #242428;
 }
 
-#HotModel_Search_InputArea
+.searchInputArea
 {
 }
 
-#HotModel_Search_Input
+.searchInput
 {
 	background-color: #242428;
 	caret-color: white;
 	color: #FFFFFF;
 }
 
-#HotModel_Search_Btn img
+.searchBtn img
 {
 	filter: invert(100%) brightness(100);
 }
@@ -188,4 +188,17 @@ html,body
 #HideBtn:hover
 {
 	background-color: rgba(70, 70, 71, 1);
+}
+
+/*wiki.css*/
+.topicBlock{
+	background-color: #000000;
+}
+
+.card{
+	background-color: #737373;
+}
+
+.topicCard{
+	background-color: #737373;
 }

resources/web/homepage3/css/online.css

@@ -162,7 +162,7 @@
 }
 
 /*-----Search Bar------*/
-#HotModel_Search_Bar
+.searchBar
 {
 	display: none;
 	align-items: center;
@@ -174,7 +174,7 @@
 	height: 40px;	
 }
 
-#HotModel_Search_InputArea
+.searchInputArea
 {
 	display: flex;
 	align-items: center;
@@ -183,7 +183,7 @@
     border-radius: 22px 0px 0px 22px;
 }
 
-#HotModel_Search_Input
+.searchInput
 {
 	height: 30px;
 	flex-grow: 1;
@@ -193,7 +193,7 @@
 }
 
 
-#HotModel_Search_Btn
+.searchBtn
 {
 	width: 60px;
 	height: 100%;

resources/web/homepage3/css/wiki.css

@@ -0,0 +1,281 @@
+html{
+  padding-top: 28px !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+body{
+  max-width: none !important;
+}
+/* -----------searchBlock----------- */
+.searchBlock{
+  height: 60px;
+  padding: 0 88px;
+  position: relative;
+}
+
+.searchBar{
+	display: flex;
+	align-items: center;
+	border-radius: 22px;
+	border: 1px solid #C2C2C2;	
+    flex-grow: 1;
+	background-color: #F7F7F7;
+	height: 40px;	
+}
+
+.searchBtn{
+	width: 60px;
+	height: 100%;
+	border-radius: 0px 22px 22px 0px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.searchInputArea{
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
+	padding: 0px 22px 0px 0px;
+  border-radius: 22px 0px 0px 22px;
+}
+
+.searchInput{
+	height: 30px;
+	flex-grow: 1;
+	outline: none;
+	font-size: 16px;
+	background-color: #F7F7F7;
+}
+
+.searchResultArea{
+  width: calc(100% - 176px);
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: #FFFFFF;
+  position: absolute;
+  left: 88px;
+  right: 0;                /* 与输入框同宽 */
+  top: calc(100% - 6px);
+  z-index: 2;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.searchResult{
+  height: 30px;
+  border-bottom: #C2C2C2 1px solid;
+  line-height: 30px;
+  padding: 0px 16px;
+}
+
+.searchResult:hover{
+  background-color: #F0F0F0;
+  cursor: pointer;
+}
+
+/* -----------academyBlock----------- */
+.academyBlock{
+  position: relative;
+  padding-left: 48px;
+}
+
+.titleBlock{
+  display: flex;
+  padding-right: 48px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  flex-grow: 1;
+}
+.more {
+  font-size: 16px;
+  cursor: pointer;
+}
+.academyContent{
+  margin-top: 20px;
+  height: 268px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+.cardContent{
+  display: flex;
+  height: 100%;
+  gap: 16px;
+  align-items:center;
+}
+.card {
+  width: 240px;
+  height: 100%;
+  border-radius: 12px;
+  background-color: #F8F8F8;
+  box-sizing: border-box;
+  padding: 36px 39px;
+  cursor: pointer;
+}
+
+.cardImg {
+  width: 162px;
+}
+
+.cardTitle {
+  font-weight: bold;
+  text-align: center;
+}
+
+.switchBlock{
+  position: absolute;
+  margin-top: 20px;
+  width: calc(100% - 48px);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 268px;
+  pointer-events: none;
+}
+
+/*share*/
+.leftSwitch{
+  transform: rotate(180deg);
+}
+.leftSwitch:active { transform: rotate(180deg) translateY(-1px);  }
+.rightSwitch:active { transform: translateY(1px); }
+
+/*share*/
+.switchBtn{
+  width: 40px;
+  height: 40px;
+  background-image: url("../img/switch_page.svg");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-clip: content-box;
+  background-size: cover;
+  cursor: pointer;
+  opacity: 0.2;
+  pointer-events: auto;
+}
+.switchBtn:hover{
+  opacity: 1;
+}
+
+/* -----------tutorialBlock----------- */
+.tutorialBlock{
+  margin-top: 48px;
+  position: relative;
+  padding-left: 48px;
+}
+
+.tutorialContent{
+  margin-top: 20px;
+  height: 290px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.videoCard{
+  width: 352px;
+  height: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.videoThumbnail{
+  width: 352px;
+}
+
+.tutorialSwitchBlock{
+  position: absolute;
+  margin-top: 20px;
+  width: calc(100% - 48px);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 290px;
+  pointer-events: none;
+}
+
+/* -----------topicBlock----------- */
+.topicBlock{
+  padding: 48px 48px;
+  background-color: #F8F8F8;
+  margin-top: 48px;
+}
+
+.topicContent{
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  gap: 12px;
+}
+
+.topicCard{
+  padding: 24px 24px;
+  flex: 1 1 300px;
+  min-width: 600px;
+  background-color: #FFFFFF;
+  box-sizing: border-box;;
+}
+
+.topicTitle{
+  font-size: 20px;
+  font-weight: bold;
+}
+
+ul{
+  margin-top: 18px;
+  padding-left: 18px;
+}
+
+li {
+  color: #4479fb;
+  cursor: pointer;
+}
+
+/* -----------footerBlock----------- */
+.footerBlock{
+  width: 100%;
+  aspect-ratio: 2536 / 416;
+  background-image: url("../img/wiki_bottom_banner.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-clip: content-box;
+  background-size: cover;
+  position: relative;
+}
+
+.rabbit{
+  width: 18%;
+  position: absolute;
+  bottom: 10%;
+  right: 20%;
+}
+
+.bannerContent{
+  height: 100%;
+  width: 50%;
+  padding: 32px 54px;
+  box-sizing: border-box;
+}
+
+.bannerTitle{
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.bannerBtn{
+  border: 1px solid #000000;
+  border-radius: 3px;
+  padding: 10px 45px;
+  display: inline-block;
+  cursor: pointer;
+  margin-top: 24px;
+}

resources/web/homepage3/home.html

@@ -14,7 +14,8 @@
 <link rel="stylesheet" type="text/css" href="./css/dark.css" />	
 
 <script type="text/javascript" src="../include/jquery-2.1.1.min.js"></script>
-<script type="text/javascript" src="../include/json2.js"></script>	
+<script type="text/javascript" src="../include/json2.js"></script>
+<script type="text/javascript" src="../include/purify.min.js"></script>
 <script type="text/javascript" src="../include/globalapi.js"></script>	
 
 <script type="text/javascript" src="../data/text.js"></script>		
@@ -33,12 +34,12 @@
 				<img src="img/project_new.svg" /><span class="trans" tid='t32'>Create new project</span>
 			</div>
 		</div>		
-	    <div id="HotModel_Search_Bar">
-		    <div id="HotModel_Search_Btn" >
+	    <div id="HotModel_Search_Bar" class="searchBar">
+		    <div id="HotModel_Search_Btn" class="searchBtn">
 			    <img src="img/search.svg" />
 			</div>			
-			<div id="HotModel_Search_InputArea">
-				<input id="HotModel_Search_Input" maxlength="1000" placeholder="" />
+			<div id="HotModel_Search_InputArea" class="searchInputArea">
+				<input id="HotModel_Search_Input" class="searchInput" maxlength="1000" placeholder="" />
 			</div>
 		</div>				
 	</div>

resources/web/homepage3/img/switch_page.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1758367827282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7546" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64c249.856 0 448 198.656 448 448s-198.656 448-448 448-448-198.144-448-448S262.656 64 512 64M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z" p-id="7547" fill="#707070"></path><path d="M450.56 291.84c-10.24-10.24-30.72-10.24-46.08 0-10.24 10.24-10.24 30.72 0 46.08l179.2 179.2-184.32 184.32c-10.24 10.24-10.24 30.72 0 46.08 5.12 5.12 15.36 10.24 20.48 10.24s15.36-5.12 20.48-10.24l204.8-204.8c5.12-5.12 10.24-15.36 10.24-20.48 0-10.24-5.12-15.36-10.24-20.48L450.56 291.84z" p-id="7548" fill="#707070"></path></svg>

resources/web/homepage3/js/home.js

@@ -330,10 +330,10 @@ function ShowRecentFileList( pList )
 	{
 		let OneFile=pList[n];
 		
-		let sPath=OneFile['path'];
-		let sImg=OneFile["image"] || sImages[sPath];
+		let sPath=DOMPurify.sanitize(OneFile['path']);
+		let sImg=DOMPurify.sanitize(OneFile["image"]) || sImages[sPath];
 		let sTime=OneFile['time'];
-		let sName=OneFile['project_name'];
+		let sName=DOMPurify.sanitize(OneFile['project_name']);
 		sImages[sPath] = sImg;
 		
 		//let index=sPath.lastIndexOf('\\')>0?sPath.lastIndexOf('\\'):sPath.lastIndexOf('\/');

resources/web/homepage3/js/left.js

@@ -31,9 +31,9 @@ function HandleStudio( pVal )
 
 	if(strCmd=='studio_userlogin')
 	{
-		let lastLoginInfo = pVal;
+		var lastLoginInfo = pVal;
 		SetLoginInfo(pVal['data']['avatar'],pVal['data']['name']);
-		if (!m_GetPrintHistoryStatus) {
+		if (!m_GetPrintHistoryStatus && (pVal != lastLoginInfo)) {
 			SendMsg_GetPrintHistory();
 		}
 		SetLoginInfo(pVal['data']['avatar'],pVal['data']['name']);

resources/web/homepage3/js/wiki.js

@@ -0,0 +1,591 @@
+var cardData = [
+  {
+    "title": "Q2",
+    "img": "img/printer_q2.png",
+    "link": "Q2"
+  },
+  {
+    "title": "X-Plus 4",
+    "img": "img/printer_xplus4.png",
+    "link": "X-Plus4"
+  },
+  {
+    "title": "Q1 Pro",
+    "img": "img/printer_q1pro.png",
+    "link": "Q1-Pro"
+  },
+  {
+    "title": "X-Max 3",
+    "img": "img/printer_xmax3.png",
+    "link": "X-Max3"
+  },
+  {
+    "title": "X-Plus 3",
+    "img": "img/printer_xplus3.png",
+    "link": "X-Plus3"
+  },
+  {
+    "title": "X-Smart 3",
+    "img": "img/printer_xsmart3.png",
+    "link": "X-Smart3"
+  },
+  {
+    "title": "QIDI Studio",
+    "img": "img/QIDIStudio.png",
+    "link": "software/qidi-studio"
+  },
+];
+
+// var youtubeData = [
+//   {
+//     "id": "8TQCRVS72Us",
+//     "title": "Intro: Overview of Bambu Studio"
+//   },
+//   {
+//     "id": "AdHUVQiVeDI",
+//     "title": "Episode 1: Set Up Your Environment"
+//   },
+//   {
+//     "id": "LDrCjCPYbhE",
+//     "title": "Episode 2: Import 3D Printing Models"
+//   },
+//   {
+//     "id": "3MYKsbd7k0c",
+//     "title": "Episode 3: Adjust the Models to Be Printable - Part 1"
+//   },
+//   {
+//     "id": "KcMBajgOzS0",
+//     "title": "Episode 4: Adjust the Models to Be Printable - Part 2"
+//   },
+//   {
+//     "id": "4W4vczKsiX8",
+//     "title": "Episode 5: Setup for Filaments"
+//   },
+//   {
+//     "id": "lQ4ySwPQeY4",
+//     "title": "Episode 6: Color Models for Multi-Color Prints"
+//   },
+//   {
+//     "id": "3tft_Ahkd_w",
+//     "title": "Episode 7: Divide and Print Your Models on Multiple Plates"
+//   },
+//   {
+//     "id": "ZH9xqdQYXsI",
+//     "title": "Episode 8: The Basic Quality Settings"
+//   },
+//   {
+//     "id": "FRLympzHsWY",
+//     "title": "Episode 9: The Basic Strength Settings"
+//   },
+//   {
+//     "id": "1QJ2UKDamzc",
+//     "title": "Episode 10: The Basic Support Settings"
+//   },
+//   {
+//     "id": "EHZtnnQLtGs",
+//     "title": "Episode 11: The Basic Other Settings"
+//   },
+//   {
+//     "id": "DWna4Mwjs5c",
+//     "title": "Episode 12: Check Your Sliced Model in Preview"
+//   },
+//   {
+//     "id": "pnd1CZ-Dp34",
+//     "title": "Episode 13: Send a Print Job to Your Printer"
+//   },
+//   {
+//     "id": "SZCWxYeMZro",
+//     "title": "Episode 14: During the Print"
+//   },
+// ];
+
+var topicData = [
+  {
+    "title": "Quick Start",
+    "zhcn-title": "快速开始",
+    "children": [
+      {
+        "title": "QIDI Studio Quick Start Guide",
+        "zhcn-title": "QIDI Studio 快速上手教程",
+        "link": "software/qidi-studio/quick-guide"
+      },
+      {
+        "title": "Connect device and Fluidd",
+        "zhcn-title": "设备连接与Fluidd页面",
+        "link": "software/qidi-studio/fluidd"
+      },
+      // {
+      //   "title": "QIDI Box使用教程",
+      //   "zhcn-title": "QIDI Box User Guide",
+      //   "link": "software/qidi-studio/use-box-guide"
+      // },
+      // {
+      //   "title": "QIDI Studio Multi Plate Printing Guide",
+      //   "zhcn-title": "QIDI Studio 多盘打印指南",
+      //   "link": "software/qidi-studio/multi-plate-printing"
+      // }, 
+    ]
+  },
+  {
+    "title": "Gizmo",
+    "zhcn-title": "顶部工具栏",
+    "children": [
+      {
+        "title": "Variable Layer Height",
+        "zhcn-title": "可变层高",
+        "link": "software/qidi-studio/toolbar/variable-layer-height"
+      },
+      {
+        "title": "Cut Tool",
+        "zhcn-title": "切割工具",
+        "link": "software/qidi-studio/toolbar/cut-tool"
+      },
+      {
+        "title": "Auto Orientation",
+        "zhcn-title": "自动朝向",
+        "link": "software/qidi-studio/toolbar/autoOrient"
+      },
+      {
+        "title": "Split to Objects/Parts",
+        "zhcn-title": "拆分为对象/零件",
+        "link": "software/qidi-studio/toolbar/split-obj-part"
+      },
+      {
+        "title": "Support Painting Guide",
+        "zhcn-title": "支撑绘制",
+        "link": "software/qidi-studio/toolbar/support-paint-guide"
+      },
+      {
+        "title": "3D Text",
+        "zhcn-title": "添加 3D 文本",
+        "link": "software/qidi-studio/toolbar/3dtext"
+      }
+    ]
+  },
+  {
+    "title": "Right-click Tool",
+    "zhcn-title": "右键工具",
+    "children": [
+      {
+        "title": "Fix Model",
+        "zhcn-title": "修复模型",
+        "link": "software/qidi-studio/toolbar/fix-model"
+      },
+      {
+        "title": "Simplify Model",
+        "zhcn-title": "简化模型",
+        "link": "software/qidi-studio/toolbar/simplify-model"
+      },
+      {
+        "title": "Negative Part",
+        "zhcn-title": "负零件",
+        "link": "software/qidi-studio/toolbar/negative-part"
+      },
+      {
+        "title": "Modifier Operation Guide",
+        "zhcn-title": "修改器操作指南",
+        "link": "software/qidi-studio/toolbar/add-modify"
+      }
+    ]
+  },
+  // {
+  //   "title": "Multi-material Printing",
+  //   "zhcn-title": "多材料打印",
+  //   "children": [
+  //     {
+  //       "title": "Multi-Color Printing",   
+  //       "zhcn-title": "多色打印指南",
+  //       "link": "software/qidi-studio/multi-color-printing/multi-color-printing"
+  //     },
+  //     {
+  //       "title": "Color Painting Tool",   
+  //       "zhcn-title": "涂色工具使用指南",
+  //       "link": "software/qidi-studio/multi-color-printing/color-painting-tool"
+  //     },
+  //     {
+  //       "title": "Reduce Waste during Filament Change",   
+  //       "zhcn-title": "减少多色打印时的材料浪费",
+  //       "link": "software/qidi-studio/multi-color-printing/reduce-wasting-during-filament-change"
+  //     },
+  //   ]
+  // },
+  {
+    "title": "Print Settings",
+    "zhcn-title": "打印设置",
+    "children": [
+      // {
+      //   "title": "Special Slicing Mode in Bambu Studio",
+      //   "zhcn-title": "Bambu Studio 特殊切片模式",
+      //   "link": "software/bambu-studio/special-slicing-modes"
+      // },
+      {
+        "title": "How to Create Custom Preset",
+        "zhcn-title": "创建自定义预设",
+        "link": "software/qidi-studio/print-settings/custom-filament"
+      },
+      {
+        "title": "Seam Settings",
+        "zhcn-title": "接缝设置",
+        "link": "software/qidi-studio/print-settings/seam"
+      },
+      {
+        "title": "Support settings in Bambu Studio",
+        "zhcn-title": "支撑耗材与支撑功能的介绍",
+        "link": "software/qidi-studio/print-settings/support"
+      },
+      {
+        "title": "Brim",
+        "zhcn-title": "Brim",
+        "link": "software/qidi-studio/print-settings/brim"
+      },
+    ]
+  },
+  {
+    "title": "Calibration",
+    "zhcn-title": "流量校准",
+    "children": [
+      // {
+      //   "title": "Flow Rate Calibration",
+      //   "zhcn-title": "流量比例",
+      //   "link": "software/bambu-studio/calibration_flow_rate"
+      // },
+      // {
+      //   "title": "Flow Dynamics Calibration",
+      //   "zhcn-title": "动态流量校准",
+      //   "link": "software/bambu-studio/calibration_pa"
+      // }
+      {
+        "title": "Calibration",
+        "zhcn-title": "校准",
+        "link": "software/qidi-studio/calibration"
+      }
+    ]
+  },
+  {
+    "title": "Troubleshooting",
+    "zhcn-title": "故障排除",
+    "children": [
+      {
+        "title": "Failed to send print files or failed to connect printer",
+        "zhcn-title": "无法发送打印文件或无法连接打印机",
+        "link": "software/qidi-studio/troubleshooting/connect-send-problem"
+      },
+      {
+        "title": "QIDI Studio crashes/freezes troubleshooting guide",
+        "zhcn-title": "QIDI Studio 崩溃/冻结故障排除指南",
+        "link": "software/qidi-studio/troubleshooting/crash_freeze_guide"
+      },
+      {
+        "title": "Export QIDI Studio software log",
+        "zhcn-title": "导出QIDI PC软件日志",
+        "link": "software/qidi-studio/troubleshooting/export-logs"
+      }
+    ]
+  }
+];
+
+var $prev;
+var $next;
+
+var video_prev;
+var video_next;
+
+function OnInit() {
+  createCardHTML();
+  createVideoHTML();
+  if (IsChinese())
+    $("#tutorial_block").hide();
+  createTopicHTML();
+  TranslatePage();
+
+  $prev = $('#academy_Left_Btn');
+  $next = $('#academy_Right_Btn');
+
+  $prev.on('click', () => scrollByStep(-1));
+  $next.on('click', () => scrollByStep(+1));
+  $('#academy_content').on('scroll', updateButtons);
+  $(window).on('resize', updateButtons);
+  updateButtons();
+
+  $video_prev = $('#tutorial_Left_Btn');
+  $video_next = $('#tutorial_Right_Btn');
+  $video_prev.on('click', () => scrollVideoByStep(-1));
+  $video_next.on('click', () => scrollVideoByStep(+1));
+  $('#tutorial_content').on('scroll', updateVideoButtons);
+  $(window).on('resize', updateVideoButtons);
+  updateVideoButtons();
+
+  $("#Wiki_Search_Input").on("input", debounce(function() {
+    let keyword = $(this).val();
+    searchWiki(keyword);
+  }, 500));
+  $("#Wiki_Search_Input").on("focus", function () {
+    if (this.value.trim().length) {
+      $(this).trigger("input");
+    }
+  });
+
+  // $(".searchResult").on("click", function(e) {
+  //   console.log(e);
+  // });
+  $(document).on('click', function (e) {
+    if (!$(e.target).closest('.search').length) {
+      $('#search_result_area').empty();
+    }
+  });
+}
+
+function debounce(fn, delay){
+  let t;
+  return function(...args){
+    clearTimeout(t);
+    t = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+// search
+
+function searchWiki(keyword) {
+  var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="search_wiki";
+  tSend['data']={};
+  tSend['data']['keyword']=keyword;
+
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function updateSearchResult(result) {
+  let data = result["pages"]["search"];
+  $('#search_result_area').empty();
+  if (data["totalHits"] > 0) {
+    data["results"].forEach(element => {
+      if (IsChinese()) {
+        if (element["locale"] != "zh")
+          return;
+      }else {
+        if (element["locale"] != "en")
+          return;
+      }
+      let html = `<div class="searchResult" onclick="openWikiUrl('${element.path}')">${element.title}</div>`;
+      $('#search_result_area').append(html);
+    });
+  }
+}
+
+//--------------- Academy Cards -------------------
+
+function createCardHTML() {
+  for (let i = 0; i < cardData.length; i++) {
+    let html = `<div class="card" data-idx="${i}" onclick="openAcademyUrl('${cardData[i].link}')">
+                  <img class="cardImg" src="${cardData[i].img}" />
+                  <div class="cardTitle">${cardData[i].title}</div>
+                </div>`;
+    $('#academy_Card_Content').append(html)
+  }
+}
+
+function stepCardSize() {
+  const $first = $('#academy_Card_Content').children().first();
+  if ($first.length === 0) return 0;
+  let gap = 16;
+  return $first.outerWidth(true) + gap;
+}
+
+function maxScrollLeft() {
+  var a = $('#academy_Card_Content').outerWidth(true);
+  var b = $('#academy_content').innerWidth();
+  return Math.max(0, $('#academy_Card_Content').outerWidth(true) - $('#academy_content').innerWidth());
+}
+
+function clampScroll(x) {
+  const max = maxScrollLeft();
+  return Math.min(Math.max(0, x), max);
+}
+
+function updateButtons() {
+  const x = Math.round($('#academy_content').scrollLeft());
+  const max = Math.round(maxScrollLeft());
+  $prev.prop('disabled', x <= 0);
+  $next.prop('disabled', x >= max);
+}
+
+function scrollByStep(dir) {
+  const step = stepCardSize();
+  if (!step) return;
+  const current = $('#academy_content').scrollLeft();
+  const target = clampScroll(current + dir * step);
+  $('#academy_content').stop(true, false).animate({ scrollLeft: target }, 260, 'swing', updateButtons);
+}
+
+function openAcademyUrl(path)
+{
+  let open_url = "";
+  if (IsChinese()){
+    open_url = "https://wiki.qidi3d.com/zh/";
+  }else{
+    let strLang=langStringTransfer();
+    open_url = "https://wiki.qidi3d.com/en/";
+  }
+  open_url += path;
+  OpenUrlInLocalBrowser(open_url);
+}
+
+
+// ---------------- Tutorials -------------------
+
+function createVideoHTML() {
+  // let academyData = youtubeData;
+  // for (let i = 0; i < academyData.length; i++) {
+  //   let html = `<div class="videoCard" onclick="openVideoUrl('${academyData[i].id}')">
+  //                 <img class="videoThumbnail" src="img/${academyData[i].id}.jpg" />
+  //                 <div class="videoTitle TextS1">${academyData[i].title}</div>
+  //               </div>`;
+  //   $('#tutorial_Card_Content').append(html)
+  // }
+}
+
+function stepVideoCardSize() {
+  const $first = $('#tutorial_Card_Content').children().first();
+  if ($first.length === 0) return 0;
+  let gap = 16;
+  return $first.outerWidth(true) + gap;
+}
+
+function maxVideoScrollLeft() {
+  var a = $('#tutorial_Card_Content').outerWidth(true);
+  var b = $('#tutorial_content').innerWidth();
+  return Math.max(0, $('#tutorial_Card_Content').outerWidth(true) - $('#tutorial_content').innerWidth());
+}
+
+function videoClampScroll(x) {
+  const max = maxVideoScrollLeft();
+  return Math.min(Math.max(0, x), max);
+}
+
+function updateVideoButtons() {
+  const x = Math.round($('#tutorial_content').scrollLeft());
+  const max = Math.round(maxVideoScrollLeft());
+  $video_prev.prop('disabled', x <= 0);
+  $video_next.prop('disabled', x >= max);
+}
+
+function scrollVideoByStep(dir) {
+  const step = stepVideoCardSize();
+  if (!step) return;
+  const current = $('#tutorial_content').scrollLeft();
+  const target = videoClampScroll(current + dir * step);
+  $('#tutorial_content').stop(true, false).animate({ scrollLeft: target }, 260, 'swing', updateVideoButtons);
+}
+
+function openVideoUrl(path)
+{
+  let open_url = "https://www.youtube.com/watch?v=";
+  open_url += path;
+  OpenUrlInLocalBrowser(open_url);
+}
+
+// ---------------- topic -------------------
+
+function createTopicHTML() {
+  for (let i = 0; i < topicData.length; i++) {
+    let title;
+    if (IsChinese()){
+      title = topicData[i]['zhcn-title'];
+    } else {
+      title = topicData[i].title;
+    }
+    let html = `<div class="topicCard">
+          <div class="topicTitle">${title}</div>
+          <ul>`
+    for (let j=0; j < topicData[i].children.length; j++) {
+      let child_title;
+      if (IsChinese()){
+        child_title = topicData[i].children[j]['zhcn-title'];
+      } else {
+        child_title = topicData[i].children[j].title;
+      }
+      html += `<li onclick="openWikiUrl('${topicData[i].children[j].link}')">${child_title}</li>`;
+    }
+    html += `</ul></div>`;
+    $('#topic_content').append(html)
+  }
+}
+
+function openWikiUrl(path)
+{
+  let open_url = "https://wiki.qidi3d.com/"
+  if (IsChinese()){
+    open_url += "zh/";
+  }else{
+    open_url += "en/";
+  }
+  open_url += path;
+
+  var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="userguide_wiki_open";
+	tSend['data']={};
+	tSend['data']['url']=open_url;
+	
+	SendWXMessage( JSON.stringify(tSend) );	
+}
+
+// --------------------common ----------------
+
+function IsChinese()
+{
+	let strLang=GetQueryString("lang");
+	if(strLang!=null)
+	{}else{
+		strLang=localStorage.getItem(LANG_COOKIE_NAME);
+	}
+	
+	if(strLang!=null)
+		return strLang.includes('zh')
+	else
+		return false;
+}
+
+function langStringTransfer()
+{
+  let strLang=GetQueryString("lang");
+  if(strLang==null)
+    strLang=localStorage.getItem(LANG_COOKIE_NAME);
+  
+  if(strLang.includes('zh')){
+    return 'zh';
+  }else if(strLang.includes('en')){
+    return 'en';
+  }else if(strLang.includes('fr')){
+    return 'fr-fr';
+  }else if(strLang.includes('de')){
+    return 'de-de';
+  }else if(strLang.includes('es')){
+    return 'es-mx';
+  }else if(strLang.includes('it')){
+    return 'it-it';
+  }else if(strLang.includes('ja')){
+    return 'ja-jp';
+  }else if(strLang.includes('ko')){
+    return 'ko-kr';
+  }else if(strLang.includes('pt')){ 
+    return 'pt-br';
+  }else if(strLang.includes('nl')){
+    return 'nl-nl';
+  }else{
+    return 'en';
+  }
+}
+
+function HandleStudio( pVal )
+{
+  let strCmd = pVal['command'];
+  if(strCmd=='search_wiki_get')
+	{
+		updateSearchResult(pVal['data']);
+	}
+}
+
+//---------------Global-----------------
+window.postMessage = HandleStudio;

resources/web/homepage3/wiki.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Cache-Control" content="max-age=7200" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <title>wiki</title>
+    <link rel="stylesheet" type="text/css" href="./css/common.css" />	
+    <link rel="stylesheet" type="text/css" href="./css/rightcommon.css" />
+    <link rel="stylesheet" type="text/css" href="./css/wiki.css" />
+    <link rel="stylesheet" type="text/css" href="./css/dark.css" />	
+
+    <script type="text/javascript" src="../include/jquery-2.1.1.min.js"></script>
+    <script type="text/javascript" src="../include/json2.js"></script>	
+    <script type="text/javascript" src="../include/globalapi.js"></script>	
+
+    <script type="text/javascript" src="../data/text.js"></script>		
+    <script type="text/javascript" src="js/wiki.js"></script>
+  </head>
+  <body onLoad="OnInit()">
+    <div class="searchBlock">
+      <div id="Wiki_Search_Bar" class="searchBar">
+		    <div id="Wiki_Search_Btn" class="searchBtn">
+			    <img src="img/search.svg" />
+			</div>			
+			<div id="Wiki_Search_InputArea" class="searchInputArea">
+				<input id="Wiki_Search_Input" class="searchInput" maxlength="1000" placeholder="" />
+			</div>
+      <div id="search_result_area" class="searchResultArea">
+        <!-- <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div>
+        <div class="searchResult">title</div> -->
+      </div>
+		</div>
+    </div>
+
+    <div class="academyBlock">
+      <div class="titleBlock">
+        <div class="title trans TextS1" tid="wk17">QIDI Tech Academy</div>
+        <div class="more TextS1" onclick="openAcademyUrl('support/academy')"><span class="trans" tid="t108">MORE</span> ></div>
+      </div>
+      <div class="switchBlock">
+          <div id="academy_Left_Btn" class="leftSwitch switchBtn"></div>
+          <div id="academy_Right_Btn" class="rightSwitch switchBtn"></div>
+      </div>
+      <div id="academy_content" class="academyContent">
+        <div id="academy_Card_Content" class="cardContent">
+        </div>
+      </div>
+
+    </div>
+
+    <!--div class="tutorialBlock" id="tutorial_block">
+      <div class="titleBlock">
+        <div class="title trans TextS1" tid="wk18">Quick Start Tutorial</div>
+        <div class="more TextS1" onclick="OpenUrlInLocalBrowser('https://www.youtube.com/playlist?list=PLFUVS59deIm2mawl3Zjk1XI9yp7H7955J')"><span class="trans" tid="t108">MORE</span> ></div>
+      </div>
+      <div class="tutorialSwitchBlock">
+          <div id="tutorial_Left_Btn" class="leftSwitch switchBtn"></div>
+          <div id="tutorial_Right_Btn" class="rightSwitch switchBtn"></div>
+      </div>
+      <div id="tutorial_content" class="tutorialContent">
+        <div id="tutorial_Card_Content" class="cardContent">
+          < <div class="videoCard">
+            <div class="videoThumbnail" style="width: 352px;height:264px;background-color: aquamarine;"> </div>
+            <div class="videoTitle">Intro: Overview of QIDI Studio</div>
+          </div>>
+        </div>
+      </div>
+    </div> -->
+
+    <div class="topicBlock">
+      <div class="titleBlock">
+        <div class="title trans TextS1" tid="wk19">Learn by Topic</div>
+        <div class="more TextS1" onclick="openWikiUrl('qidi-studio')"><span class="trans" tid="t108">MORE</span> ></div>
+      </div>
+      <div id="topic_content" class="topicContent">
+        <!-- <div class="topicCard">
+          <div class="topicTitle">Quick Start</div>
+          <ul>
+            <li>QIDI Studio Quick Start Guide</li>
+            <li>Remote Control & Monitoring</li>
+            <li>Multi-Color Printing</li>
+          </ul>
+        </div> -->
+      </div>
+    </div>
+
+    <div class="footerBlock">
+      <!-- <img class="rabbit" src="img/wiki_bottom_banner_2.png" /> -->
+      <div class="bannerContent">
+        <div class="bannerTitle trans" tid="wk20">Filament Guide</div>
+        <!-- <div class="bannerText">Perhaps there are a few too many old ideas baked into Perhamany old ideas baked into </div> -->
+        <div class="bannerBtn trans" onclick="openAcademyUrl('Memo/Filament-Guide')" tid="wk21">Explore now</div>
+      </div>
+    </div>
+  </body>
+</html> 

resources/web/image/filament.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.55331 3.68866C1.97561 4.76153 1.5999 6.28488 1.5999 8.00039C1.5999 9.7159 1.97561 11.2393 2.55331 12.3121C3.14417 13.4094 3.85989 13.9004 4.4999 13.9004C5.13991 13.9004 5.85563 13.4094 6.44649 12.3121C7.02419 11.2393 7.3999 9.7159 7.3999 8.00039C7.3999 6.28488 7.02419 4.76153 6.44649 3.68866C5.85563 2.59134 5.13991 2.10039 4.4999 2.10039C3.85989 2.10039 3.14417 2.59134 2.55331 3.68866ZM1.49675 3.11974C2.17264 1.86451 3.20691 0.900391 4.4999 0.900391C5.79289 0.900391 6.82717 1.86451 7.50306 3.11974C8.19211 4.3994 8.5999 6.12605 8.5999 8.00039C8.5999 9.87473 8.19211 11.6014 7.50306 12.881C6.82717 14.1363 5.79289 15.1004 4.4999 15.1004C3.20691 15.1004 2.17264 14.1363 1.49675 12.881C0.807696 11.6014 0.399902 9.87473 0.399902 8.00039C0.399902 6.12605 0.807696 4.3994 1.49675 3.11974Z" fill="#5C5C5C"/>
+<path d="M8.74219 4C8.27778 5.10304 8 6.49128 8 8C8 9.50872 8.27778 10.897 8.74219 12H5C4.17157 12 3.5 10.5247 3.5 8C3.5 5.47527 4.17157 4 5 4H8.74219Z" fill="#D9D9D9"/>
+<path d="M8.97559 3.5C8.81735 3.80617 8.67553 4.14103 8.55176 4.5H5C4.91822 4.5 4.66189 4.588 4.4043 5.2373C4.16431 5.8424 4 6.77391 4 8C4 9.22609 4.16431 10.1576 4.4043 10.7627C4.66189 11.412 4.91822 11.5 5 11.5H8.55176C8.67553 11.859 8.81735 12.1938 8.97559 12.5H5C4.25337 12.5 3.75987 11.8501 3.47461 11.1309C3.17176 10.3672 3 9.29853 3 8C3 6.70147 3.17176 5.63284 3.47461 4.86914C3.75987 4.14989 4.25337 3.5 5 3.5H8.97559Z" fill="#5C5C5C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.55331 3.68866C8.97561 4.76153 8.5999 6.28488 8.5999 8.00039C8.5999 9.7159 8.97561 11.2393 9.55331 12.3121C10.1442 13.4094 10.8599 13.9004 11.4999 13.9004C12.1399 13.9004 12.8556 13.4094 13.4465 12.3121C14.0242 11.2393 14.3999 9.7159 14.3999 8.00039C14.3999 6.28488 14.0242 4.76153 13.4465 3.68866C12.8556 2.59134 12.1399 2.10039 11.4999 2.10039C10.8599 2.10039 10.1442 2.59134 9.55331 3.68866ZM8.49675 3.11974C9.17264 1.86451 10.2069 0.900391 11.4999 0.900391C12.7929 0.900391 13.8272 1.86451 14.5031 3.11974C15.1921 4.3994 15.5999 6.12605 15.5999 8.00039C15.5999 9.87473 15.1921 11.6014 14.5031 12.881C13.8272 14.1363 12.7929 15.1004 11.4999 15.1004C10.2069 15.1004 9.17264 14.1363 8.49675 12.881C7.8077 11.6014 7.3999 9.87473 7.3999 8.00039C7.3999 6.12605 7.8077 4.3994 8.49675 3.11974Z" fill="#5C5C5C"/>
+<ellipse cx="11.5" cy="8" rx="1" ry="2" fill="#D9D9D9" stroke="#5C5C5C" stroke-width="0.6" stroke-linejoin="round"/>
+</svg>

resources/web/image/printer.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.2002 4.4852C1.2002 4.16545 1.4594 3.90625 1.77914 3.90625H11.704C12.0237 3.90625 12.2829 4.16545 12.2829 4.4852V14.41C12.2829 14.7298 12.0237 14.989 11.704 14.989H1.77914C1.4594 14.989 1.2002 14.7298 1.2002 14.41V4.4852ZM2.35809 5.06414V13.8311H11.125V5.06414H2.35809Z" fill="#5C5C5C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.04083 1.31501C5.14105 1.23985 5.26294 1.19922 5.3882 1.19922H14.4108C14.6449 1.19922 14.856 1.34027 14.9456 1.55661C15.0352 1.77295 14.9857 2.02197 14.8201 2.18754L12.1134 4.89431C12.0048 5.00288 11.8575 5.06388 11.704 5.06388H1.77918C1.52998 5.06388 1.30875 4.90442 1.22994 4.66801C1.15114 4.4316 1.23245 4.17129 1.43181 4.02178L5.04083 1.31501ZM5.58118 2.35711L3.51602 3.90599H11.4642L13.0131 2.35711H5.58118Z" fill="#5C5C5C"/>
+<path d="M7.19272 8.09357H14.4108L11.704 11.7026H3.58369L7.19272 8.09357Z" fill="#EBEBEB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.09496 3.85352C8.44377 3.85352 8.72654 4.13628 8.72654 4.48509V7.19186C8.72654 7.54067 8.44377 7.82344 8.09496 7.82344C7.74615 7.82344 7.46338 7.54067 7.46338 7.19186V4.48509C7.46338 4.13628 7.74615 3.85352 8.09496 3.85352Z" fill="#5C5C5C"/>
+<path d="M11.7041 4.48411L14.4109 1.77734V10.7999L11.7041 14.4089V4.48411Z" fill="#EBEBEB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6323 1.24331C14.8486 1.33292 14.9897 1.54402 14.9897 1.77818V10.8007C14.9897 10.926 14.949 11.0479 14.8739 11.1481L12.1671 14.7571C12.0176 14.9565 11.7573 15.0378 11.5209 14.959C11.2845 14.8802 11.125 14.659 11.125 14.4098V4.48495C11.125 4.3314 11.186 4.18415 11.2946 4.07557L14.0013 1.36881C14.1669 1.20323 14.4159 1.1537 14.6323 1.24331ZM12.2829 4.72476V12.6729L13.8318 10.6078V3.17589L12.2829 4.72476Z" fill="#5C5C5C"/>
+</svg>

resources/web/image/pull.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0882 7.5785C11.3203 7.81062 11.3203 8.18596 11.0882 8.41561L6.34701 13.1592C6.11489 13.3914 5.73955 13.3914 5.5099 13.1592C5.28025 12.9271 5.27778 12.5518 5.5099 12.3221L9.83126 8.00076L5.50743 3.67693C5.27531 3.44481 5.27531 3.06947 5.50743 2.83982C5.73955 2.61017 6.11489 2.6077 6.34454 2.83982L11.0882 7.5785Z" fill="#6B6B6B"/>
+</svg>

resources/web/image/vendor.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.33895 2.09125C2.50557 1.76053 2.75677 1.48375 3.06502 1.29127C3.37328 1.09879 3.72668 0.998027 4.0865 1.00003H12.9855C13.7251 1.00003 14.4016 1.42236 14.7331 2.09125L15.7981 4.24569C16.0576 4.77069 16.1281 5.51969 15.6361 6.07657C15.2101 6.56456 14.6555 6.91231 14.0408 7.07679V13.026C14.0408 14.1157 13.1663 15 12.087 15H4.98428C3.905 15 3.03047 14.1157 3.03047 13.026V7.29924C2.2962 7.14368 1.59192 6.72135 1.16366 5.89769C0.891401 5.37424 0.997154 4.80335 1.20266 4.38802L2.33895 2.09125ZM4.09625 7.35524V13.0252C4.09625 13.5214 4.49377 13.9228 4.98428 13.9228H12.0878C12.5783 13.9228 12.9758 13.5214 12.9758 13.026V7.16546C12.429 7.12113 11.8387 6.93991 11.2095 6.59068C10.596 7.39335 9.50093 7.7309 8.53639 7.7309C7.61386 7.7309 6.57283 7.4229 5.94731 6.69413C5.73028 6.84754 5.497 6.97463 5.25204 7.07291C4.88154 7.22306 4.49243 7.31811 4.09625 7.35524ZM4.0865 2.07725C3.74974 2.07725 3.44223 2.26936 3.29148 2.57269L2.15669 4.86947C2.04419 5.09658 2.04869 5.28324 2.10794 5.39602C2.4162 5.98946 2.96297 6.25468 3.59449 6.29046C4.02448 6.31084 4.45379 6.23717 4.85453 6.07424C5.24529 5.9148 5.5003 5.70869 5.6068 5.54769C5.66175 5.46536 5.73705 5.39988 5.82481 5.35814C5.91257 5.3164 6.00955 5.29993 6.10557 5.31046C6.2013 5.31995 6.29275 5.35622 6.37016 5.41539C6.44757 5.47457 6.50803 5.55444 6.54508 5.64646C6.78209 6.2438 7.56511 6.65368 8.53714 6.65368C9.50768 6.65368 10.2922 6.2438 10.5285 5.64646C10.5586 5.57146 10.6044 5.50435 10.6627 5.45C10.7209 5.39565 10.7901 5.35542 10.8652 5.33224C10.9409 5.30841 11.0208 5.30197 11.0991 5.31339C11.1775 5.32481 11.2525 5.3538 11.319 5.39835C12.2115 5.99957 12.9225 6.14191 13.4588 6.09057C13.9919 6.03536 14.4856 5.77441 14.8418 5.35946C14.9453 5.2428 14.9866 5.00947 14.8463 4.72713L13.7813 2.57269C13.6306 2.26936 13.323 2.07725 12.9863 2.07725H4.0865ZM5.87156 10.8716C5.87156 10.5745 6.11082 10.3333 6.40483 10.3333H10.6672C10.9612 10.3333 11.1997 10.5745 11.1997 10.8716C11.1989 10.9432 11.1845 11.014 11.1573 11.0799C11.1302 11.1458 11.0907 11.2055 11.0412 11.2556C10.9918 11.3056 10.9333 11.3451 10.8691 11.3717C10.8049 11.3983 10.7363 11.4115 10.6672 11.4106H6.40483C6.33572 11.4115 6.26711 11.3983 6.20293 11.3717C6.13875 11.3451 6.08026 11.3056 6.0308 11.2556C5.98134 11.2055 5.94188 11.1458 5.91469 11.0799C5.88749 11.014 5.87309 10.9432 5.87231 10.8716H5.87156Z" fill="black" fill-opacity="0.65"/>
+</svg>

resources/web/model/index.html

@@ -6,7 +6,8 @@
 <title>Model</title>	
 
 <script type="text/javascript" src="../include/jquery-2.1.1.min.js"></script>
-<script type="text/javascript" src="../include/json2.js"></script>	
+<script type="text/javascript" src="../include/json2.js"></script>
+<script type="text/javascript" src="../include/purify.min.js"></script>
 <script type="text/javascript" src="../include/globalapi.js"></script>	
 
 <link rel="stylesheet" type="text/css" href="../include/swiper/swiper-bundle.min.css" />

resources/web/model/model.js

@@ -216,11 +216,11 @@ function ShowProjectInfo( p3MF )
 function ShowModelInfo( pModel )
 {
 	//==========Model Info==========
-	let sModelName=decodeURIComponent(pModel.name);
-	let sModelAuthor=decodeURIComponent(pModel.author);
+	let sModelName=DOMPurify.sanitize(decodeURIComponent(pModel.name));
+	let sModelAuthor=DOMPurify.sanitize(decodeURIComponent(pModel.author));
 	let UploadType=pModel.upload_type.toLowerCase();
 	let sLicence=pModel.license.toUpperCase();
-	let sModelDesc=decodeURIComponent(pModel.description);
+	let sModelDesc=DOMPurify.sanitize(decodeURIComponent(pModel.description));
 	sModelDesc=HtmlDecodeFrom3MF( sModelDesc );
 	
 	if( pModel.hasOwnProperty('model_id') )
@@ -233,7 +233,7 @@ function ShowModelInfo( pModel )
 	
 	$('#ModelName').html(sModelName);
 	$('#ModelName').attr('title',sModelName);
-    $('#ModelAuthorName').html(sModelAuthor);
+  $('#ModelAuthorName').html(sModelAuthor);
 	
 	switch(UploadType)
 	{