Initial release

resources/web/guide/21/21.css

@@ -0,0 +1,198 @@
+#Content
+{
+	overflow-y:auto;
+	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+}
+
+.BlockBanner
+{
+	padding: 0px;
+	border-bottom:#009688 1px solid;
+	width: 100%;
+	display: flex;
+	justify-content:space-between;
+	align-items: center;
+}
+
+
+.BannerBtns
+{
+	display: flex;
+	white-space: nowrap;
+	justify-content: space-around;
+	align-items: center;
+	text-align: center;
+	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+}
+
+.BlockBanner  a
+{
+	display: inline-block;
+	background-color:#009688;
+	line-height: 40px;
+	height: 40px;
+	padding: 0px 24px;
+	color: #fff;
+}
+
+.PrinterArea
+{
+	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.PrinterBlock
+{
+	width: 160px;
+	text-align: center;
+	padding: 10px;
+}
+
+.PImg
+{
+	width:120px;      /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
+	height:120px;	  /* ORCA fit image to fill frame */
+	padding:10px 20px /* ORCA use less vertical padding */
+}
+
+.ModelCheckBox
+{
+	flex: 0 0 18px;			/* ORCA match checkbox style and size */
+	margin: 10px 5px 0 0;
+	width: 18px;
+	height: 18px;
+	background-image: url("../img/emptycheck.svg");
+	background-size: cover;
+}
+
+.ModelCheckBox.ModelCheckBoxSelected
+{
+	background-image: url("../img/greencheck.svg");
+}
+
+img.ModelThumbnail
+{
+	width:  100%;
+	height: 100%;
+}
+
+.PName
+{
+	font-weight: 700;
+	text-align:left;
+}
+
+.pNozzel
+{
+	display: none;
+	align-items: center;
+	justify-content:flex-start;
+	color: #5A5A5A;	
+	padding-left: 0px; /* ORCA Align checkboxes with with model text */
+}
+
+.pNozzel input
+{
+	vertical-align: middle;
+	margin-right: 5px;
+}
+
+
+/*-----Notice-----*/
+#NoticeMask
+{
+	background-color: #000;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	opacity: 0.05;
+	display: none;
+}
+
+#NoticeBody
+{
+	display: none;
+	width: 400px;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 4px;
+	background-color: inherit;	
+	position: absolute;
+	left: 50%;
+	top: 200px;
+	margin-left: -200px;
+}
+
+#NoticeBar
+{
+	background-color:#00f0d8;
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:flex-end;
+}
+
+.search {
+	width: 100%;
+	position: relative;
+	display: flex;
+}
+  
+.searchTerm {
+	width: 100%;
+	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
+	/*border-right: none;*/
+	padding: 5px;
+	padding-left:32px;
+	height: 20px;      /* ORCA match height */
+	line-height: 20px; /* ORCA center text vertically */
+	border-radius: 5px 5px 5px 5px;
+	outline: none;
+	color: #9DBFAF;
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm {border: 1px solid #4A4A51;}
+}
+
+.searchTerm:focus{
+	color: #363636;       /* ORCA Searchbox > use normal text color */
+	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm:focus{color: #FFFFFF}
+}
+
+#search-icon{ /* ORCA */
+	position:absolute;
+    top: 50%;
+    transform: translateY(-50%);
+	left:8px;
+	margin:0px auto;
+	fill:#7C8282
+}
+@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
+	#search-icon{fill:#949494}
+}
+
+/*Resize the wrap to see the search bar change!*/
+.wrap{
+	width: 30%;
+	padding-bottom: 5px;
+	padding-left: 32px; /* ORCA Align with content */
+}

resources/web/guide/21/21.js

@@ -0,0 +1,417 @@
+function OnInit()
+{
+	//let strInput=JSON.stringify(cData);
+	//HandleModelList(cData);
+	
+	TranslatePage();
+	
+	RequestProfile();
+}
+
+
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio( pVal )
+{
+//	alert(strInput);
+//	alert(JSON.stringify(strInput));
+//	
+//	let pVal=IsJson(strInput);
+//	if(pVal==null)
+//	{
+//		alert("Msg Format Error is not Json");
+//		return;
+//	}
+	
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		HandleModelList(pVal['response']);
+	}
+}
+
+function ShowPrinterThumb(pItem, strImg)
+{
+	$(pItem).attr('src',strImg);
+	$(pItem).attr('onerror',null);
+}
+
+function ChooseModel( vendor, ModelName )
+{
+	let ChooseItem=$(".ModelCheckBox[vendor='"+vendor+"'][model='"+ModelName+"']");
+	
+	if(ChooseItem!=null)
+	{
+		if( $(ChooseItem).hasClass('ModelCheckBoxSelected') )
+			$(ChooseItem).removeClass('ModelCheckBoxSelected');
+		else
+			$(ChooseItem).addClass('ModelCheckBoxSelected');		
+
+		SetModelSelect(vendor, ModelName, $(ChooseItem).hasClass('ModelCheckBoxSelected'));
+	}		
+}
+
+function HandleModelList( pVal )
+{
+	if( !pVal.hasOwnProperty("model") )
+		return;
+
+    pModel=pVal['model'];
+	
+	let nTotal=pModel.length;
+	let ModelHtml={};
+	for(let n=0;n<nTotal;n++)
+	{
+		let OneModel=pModel[n];
+		
+		let strVendor=OneModel['vendor'];
+		
+		//Add Vendor Html Node
+		if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
+		{
+			let sVV=strVendor;
+			if( sVV=="BBL" )
+				sVV="Bambu Lab";
+			if( sVV=="Custom")
+				sVV="Custom Printer";
+			if( sVV=="Other")
+				sVV="Orca colosseum";
+
+			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
+'<div class="BlockBanner">'+
+'	<a>'+sVV+'</a>'+				
+'	<div class="BannerBtns">'+
+'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
+'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
+'	</div>'+
+'</div>'+
+'<div class="PrinterArea">	'+
+'</div>'+
+'</div>';
+			
+			$('#Content').append(HtmlNewVendor);
+		}
+		
+		let ModelName=OneModel['model'];
+		
+		//Collect Html Node Nozzel Html
+		if( !ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor]='';
+			
+		ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
+	}
+	
+	//Update Nozzel Html Append
+	for( let key in ModelHtml )
+	{
+		$(".OneVendorBlock[vendor='"+key+"'] .PrinterArea").append( ModelHtml[key] );
+	}
+	
+	
+	//Update Checkbox
+	for(let m=0;m<nTotal;m++)
+	{
+		let OneModel=pModel[m];
+
+		let SelectList=OneModel['nozzle_selected'];
+		if(SelectList!='')
+		{
+			ChooseModel(OneModel['vendor'], OneModel['model']);
+		}
+	}	
+
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	// }
+	
+	TranslatePage();
+}
+
+function SetModelSelect(vendor, model, checked) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
+		return;
+	}
+
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
+		ModelNozzleSelected[vendor] = {};
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (oVendor.hasOwnProperty(model) || checked) {
+		oVendor[model] = checked;
+	}
+}
+
+function GetModelSelect(vendor, model) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
+		return false;
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (!oVendor.hasOwnProperty(model)) {
+		return false;
+	}
+
+	return oVendor[model];
+}
+
+function FilterModelList(keyword) {
+
+	//Save checkbox state
+	let ModelSelect = $('.ModelCheckBox');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+
+		let strVendor = OneItem.getAttribute("vendor");
+
+		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
+	}
+
+	let nTotal = pModel.length;
+	let ModelHtml = {};
+	let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
+
+	$('#Content').empty();
+	for (let n = 0; n < nTotal; n++) {
+		let OneModel = pModel[n];
+
+		let strVendor = OneModel['vendor'];
+		let search = (OneModel['name'] + '\0' + strVendor).toLowerCase();
+
+		if (!kwSplit.every(s => search.includes(s)))
+			continue;
+
+		//Add Vendor Html Node
+		if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
+			let sVV = strVendor;
+			if (sVV == "BBL")
+				sVV = "Bambu Lab";
+			if (sVV == "Custom")
+				sVV = "Custom Printer";
+			if (sVV == "Other")
+				sVV = "Orca colosseum";
+
+			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
+				'<div class="BlockBanner">' +
+				'	<a>' + sVV + '</a>' +
+				'	<div class="BannerBtns">' +
+				'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
+				'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
+				'	</div>' +
+				'</div>' +
+				'<div class="PrinterArea">	' +
+				'</div>' +
+				'</div>';
+
+			$('#Content').append(HtmlNewVendor);
+		}
+
+		//Collect Html Node Nozzel Html
+		if (!ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor] = '';
+
+		ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
+	}
+
+	//Update Nozzel Html Append
+	for (let key in ModelHtml) {
+		let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
+		obj.empty();
+		obj.append(ModelHtml[key]);
+	}
+
+
+	//Update Checkbox
+	ModelSelect = $('.ModelCheckBox');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+		let strVendor = OneItem.getAttribute("vendor");
+
+		let checked = GetModelSelect(strVendor, strModel);
+
+		if (checked)
+			$(OneItem).addClass('ModelCheckBoxSelected');
+		else
+			$(OneItem).removeClass('ModelCheckBoxSelected');
+	}
+
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	// }
+
+	TranslatePage();
+}
+
+function CreatePrinterBlock(OneModel)
+{
+	// ORCA use single functuon to create blocks to simplify code
+	let vendor = OneModel['vendor']
+	vendorName = vendor=="BBL" ? "Bambu Lab" : vendor=="Custom" ? "Generic Printer" : vendor;
+
+	let modelName = OneModel['name'];
+	// Most of it unneeded. this can be applied in profiles
+	if( vendor=="Custom")					
+	modelName = modelName.split(" ")[1];
+	// these uses different case in name; seckit, ratrig, blocks
+	else if (modelName.toLowerCase().startsWith(vendorName.toLowerCase()))  
+	modelName = modelName.slice(vendorName.length);
+	// these not matches. have to fix in profiles to reduce conditions in here;
+	else if (vendor == "MagicMaker" && modelName.startsWith("MM"))
+	modelName = modelName.slice(("MM").length);
+	else if (vendor == "OrcaArena")
+	modelName = modelName.slice(("Orca Arena").length);
+	else if (vendor == "RolohaunDesign" && modelName.startsWith("Rolohaun"))
+	modelName = modelName.slice(("Rolohaun").length);
+
+	return '<div class="PrinterBlock" onClick="ChooseModel(\''+vendor+'\',\''+OneModel['model']+'\')">'+
+	'<div class="PImg">'+
+	'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
+	'</div>'+
+	'<div style="display: flex;">'+
+	'	<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
+	'	<div class="PName"><p>'+ vendorName +'</p><p>' + modelName +'</p></div>'+
+	'</div>'+
+	'</div>';
+}
+
+function SelectPrinterAll( sVendor )
+{
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, true);
+	});
+}
+
+
+function SelectPrinterNone( sVendor )
+{
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, false);
+	});
+}
+
+
+function GotoFilamentPage()
+{
+	let nChoose=OnExitFilter();
+	
+	if(nChoose>0)
+		window.open('../22/index.html','_self');
+}
+
+function OnExitFilter() {
+
+	let nTotal = 0;
+	let ModelAll = {};
+	for (vendor in ModelNozzleSelected) {
+		for (model in ModelNozzleSelected[vendor]) {
+			if (!ModelNozzleSelected[vendor][model])
+				continue;
+
+			if (!ModelAll.hasOwnProperty(model)) {
+				//alert("ADD: "+strModel);
+
+				ModelAll[model] = {};
+
+				ModelAll[model]["model"] = model;
+			}
+
+			nTotal++;
+		}
+	}
+
+	var tSend = {};
+	tSend['sequence_id'] = Math.round(new Date() / 1000);
+	tSend['command'] = "save_userguide_models";
+	tSend['data'] = ModelAll;
+
+	SendWXMessage(JSON.stringify(tSend));
+
+	return nTotal;
+
+}
+
+//
+function OnExit()
+{	
+	let ModelAll={};
+	
+	let ModelSelect=$(".ModelCheckBoxSelected");
+	let nTotal=ModelSelect.length;
+
+	if( nTotal==0 )
+	{
+		ShowNotice(1);
+		
+		return 0;
+	}
+	
+	for(let n=0;n<nTotal;n++)
+	{
+	    let OneItem=ModelSelect[n];
+		
+		let strModel=OneItem.getAttribute("model");
+			
+		//alert(strModel+strVendor+strNozzel);
+		
+		if(!ModelAll.hasOwnProperty(strModel))
+		{
+			//alert("ADD: "+strModel);
+			
+			ModelAll[strModel]={};
+		
+			ModelAll[strModel]["model"]=strModel;
+		}
+	}
+		
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="save_userguide_models";
+	tSend['data']=ModelAll;
+	
+	SendWXMessage( JSON.stringify(tSend) );
+
+    return nTotal;
+}
+
+
+function ShowNotice( nShow )
+{
+	if(nShow==0)
+	{
+		$("#NoticeMask").hide();
+		$("#NoticeBody").hide();
+	}
+	else
+	{
+		$("#NoticeMask").show();
+		$("#NoticeBody").show();
+	}
+}
+
+
+
+

resources/web/guide/21/index.html

@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Cache-Control" content="max-age=7200" />
+<title>引导_P21</title>
+<link rel="stylesheet" type="text/css" href="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="21.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="21.js"></script>		
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div class="trans" tid="t10">Printer Selection</div>
+</div>
+<div class="wrap">
+	<div class="search">
+		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
+		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
+			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
+			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
+		</svg>
+	</div>
+</div>
+<div id="Content"  class="ZScrol">
+
+<!--<div class="OneVendorBlock" Vendor="BBL">	
+<div class="BlockBanner">
+	<a>BBL-3DP</a>		
+	<div class="BannerBtns">
+		<div class="ButtonStyleConfirm ButtonTypeWindow trans" onClick="SelectPrinterAll('BBL')">所有</div>
+		<div class="ButtonStyleRegular ButtonTypeWindow trans" onClick="SelectPrinterNone('BBL')">无</div>
+	</div>
+</div>
+	
+<div class="PrinterArea">	
+	
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected" model="BBL-3DP-V5NORMAL" onClick="ChooseModel('BBL-3DP-V5NORMAL')"></div>		
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>	
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox"></div>
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.22mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox"></div>
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.11mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
+	</div>	
+    <div class="PName">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.22mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
+</div>	
+</div>		
+
+</div>
+	
+
+<div class="OneVendorBlock" Vendor="BAMBU">	
+<div class="BlockBanner">
+	<a>BAMBU-3DP</a>		
+	<div class="BannerBtns">
+		<div class="SmallBtn_Green trans" onClick="SelectPrinterAll('BAMBU')">所有</div>
+		<div class="SmallBtn trans" onClick="SelectPrinterNone('BAMBU')">无</div>
+	</div>
+</div>
+	
+<div class="PrinterArea">	
+	
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
+	</div>	
+    <div class="PName TextS1">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
+</div>
+<div class="PrinterBlock">
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"></div>		
+	</div>	
+    <div class="PName TextS1">BBL-3DP-V4NORMAL</div>
+    <div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BAMBU" />0.2mm nozzle</div>
+	<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
+</div>		
+</div>		
+
+</div>-->
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" id="PreBtn" tid="t8"  onclick="window.open('../1/index.html','_self')">Back</div>
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" id="AcceptBtn" tid="t9"  onclick="GotoFilamentPage()">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="t37">At least one printer must be selected.</div>
+	<div id="NoticeBtns">
+		<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t36" onClick="ShowNotice(0)">ok</div>
+	</div>
+	</div>
+</div>	
+	
+	
+</body>
+<script>
+	document.onkeydown = function (event) {
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+
+		if (window.event) {
+			try { e.keyCode = 0; } catch (e) { }
+			e.returnValue = true;
+		}
+	};
+	let pModel = {};
+	let ModelNozzleSelected = {};
+	function textInput(obj) {
+		FilterModelList(obj.value);
+	}
+</script>
+</html>