NEW: Ignore Nozzel Select in UserGuide

JIRA: none
Change-Id: I507a92abb9137167dbcbe1def8276f868529c4ab
(cherry picked from commit 99a8139c1b915709a854296f22a222bac07a47ce)

resources/web/guide/21/21.css

@@ -9,17 +9,18 @@
 	padding: 0px;
 	border-bottom:#009688 1px solid;
 	width: 100%;
+	display: flex;
+	justify-content:space-between;
+	align-items: center;
 }
 
 
 .BannerBtns
 {
-	float: right;
 	display: flex;
 	white-space: nowrap;
 	justify-content: space-around;
 	align-items: center;
-	height: 40px;
 	text-align: center;
 	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
 }
@@ -52,12 +53,43 @@
 	padding: 10px;
 }
 
-.PrinterBlock img
+.PImg
 {
+	position:relative;
 	width:160px;
 	height: 160px;	
 }
 
+.ModelCheckBox
+{
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	right: 10px;
+	top: 10px;
+    border:1px solid #ADADAD;
+	background-color: #FFF;
+	padding: 1px;
+	cursor: pointer;
+}
+
+.ModelCheckBox.ModelCheckBoxSelected img
+{
+	display:inline;
+}
+
+.ModelCheckBox img
+{
+	width:100%;
+	display: none;
+}
+
+img.ModelThumbnail
+{
+	width:  100%;
+	height: 100%;
+}
+
 .PName
 {
 	font-weight: 700;
@@ -66,7 +98,7 @@
 
 .pNozzel
 {
-	display: flex;
+	display: none;
 	align-items: center;
 	justify-content:flex-start;
 	color: #5A5A5A;	

resources/web/guide/21/21.js

@@ -1,7 +1,7 @@
 function OnInit()
 {
 	//let strInput=JSON.stringify(cData);
-	//HandleStudio(strInput);
+	//HandleModelList(cData);
 	
 	TranslatePage();
 	
@@ -46,6 +46,21 @@ function ShowPrinterThumb(pItem, 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") )
@@ -74,11 +89,11 @@ function HandleModelList( pVal )
 
 			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
 '<div class="BlockBanner">'+
+'	<a>'+sVV+'</a>'+				
 '	<div class="BannerBtns">'+
 '		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
 '		<div class="SmallBtn trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
 '	</div>'+
-'	<a>'+sVV+'</a>'+
 '</div>'+
 '<div class="PrinterArea">	'+
 '</div>'+
@@ -93,19 +108,14 @@ function HandleModelList( pVal )
 		if( !ModelHtml.hasOwnProperty(strVendor))
 			ModelHtml[strVendor]='';
 			
-		let NozzleArray=OneModel['nozzle_diameter'].split(';');
-		let HtmlNozzel='';
-		for(let m=0;m<NozzleArray.length;m++)
-		{
-			let nNozzel=NozzleArray[m];
-			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></label>';
-		}
-		
 		let CoverImage=OneModel['cover'];
-		ModelHtml[strVendor]+='<div class="PrinterBlock">'+
+		ModelHtml[strVendor]+='<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
-'	<div class="PImg"><img src="'+CoverImage+'"  /></div>'+
+        '<div class="PImg">'+
-'    <div class="PName">'+OneModel['name']+'</div>'+ HtmlNozzel +'</div>';
+		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+		'</div>'+
+        '    <div class="PName">'+OneModel['name']+'</div>'+ 
+		'</div>';
 	}
 	
 	//Update Nozzel Html Append
@@ -116,7 +126,6 @@ function HandleModelList( pVal )
 	
 	
 	//Update Checkbox
-	$('input').prop("checked", false);
 	for(let m=0;m<nTotal;m++)
 	{
 		let OneModel=pModel[m];
@@ -124,45 +133,21 @@ function HandleModelList( pVal )
 		let SelectList=OneModel['nozzle_selected'];
 		if(SelectList!='')
 		{
-			SelectList=OneModel['nozzle_selected'].split(';');
+			ChooseModel(OneModel['vendor'], OneModel['model']);
-    		let nLen=SelectList.length;
-
-		    for(let a=0;a<nLen;a++)
-			{
-			    let nNozzel=SelectList[a];
-				$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "'][nozzel='" + nNozzel + "']").prop("checked", true);
-
-				SetModelSelect(OneModel['vendor'], OneModel['model'], nNozzel, true);
-			}
-		}
-		else
-		{
-			$("input[vendor='"+OneModel['vendor']+"'][model='"+OneModel['model']+"']").prop("checked", false);
 		}
 	}	
 
-	// let AlreadySelect=$("input:checked");
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
 	// {
-	// 	$("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
 	// }
 	
 	TranslatePage();
 }
 
-function CheckBoxOnclick(obj) {
+function SetModelSelect(vendor, model, checked) {
-
-	let strModel = obj.getAttribute("model");
-
-	let strVendor = obj.getAttribute("vendor");
-	let strNozzel = obj.getAttribute("nozzel");
-
-	SetModelSelect(strVendor, strModel, strNozzel, obj.checked);
-
-}
-
-function SetModelSelect(vendor, model, nozzel, checked) {
 	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
 		return;
 	}
@@ -172,17 +157,12 @@ function SetModelSelect(vendor, model, nozzel, checked) {
 	}
 
 	let oVendor = ModelNozzleSelected[vendor];
-	if (!oVendor.hasOwnProperty(model)) {
+	if (oVendor.hasOwnProperty(model) || checked) {
-		oVendor[model] = {};
+		oVendor[model] = checked;
-	}
-
-	let oModel = oVendor[model];
-	if (oModel.hasOwnProperty(nozzel) || checked) {
-		oVendor[model][nozzel] = checked;
 	}
 }
 
-function GetModelSelect(vendor, model, nozzel) {
+function GetModelSelect(vendor, model) {
 	if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
 		return false;
 	}
@@ -192,27 +172,21 @@ function GetModelSelect(vendor, model, nozzel) {
 		return false;
 	}
 
-	let oModel = oVendor[model];
+	return oVendor[model];
-	if (!oModel.hasOwnProperty(nozzel)) {
-		return false;
-	}
-
-	return oVendor[model][nozzel];
 }
 
 function FilterModelList(keyword) {
 
 	//Save checkbox state
-	let ModelSelect = $('input[type=checkbox]');
+	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");
-		let strNozzel = OneItem.getAttribute("nozzel");
 
-		SetModelSelect(strVendor, strModel, strNozzel, OneItem.checked);
+		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
 	}
 
 	let nTotal = pModel.length;
@@ -241,11 +215,11 @@ function FilterModelList(keyword) {
 
 			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
 				'<div class="BlockBanner">' +
+				'	<a>' + sVV + '</a>' +
 				'	<div class="BannerBtns">' +
 				'		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
 				'		<div class="SmallBtn trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
 				'	</div>' +
-				'	<a>' + sVV + '</a>' +
 				'</div>' +
 				'<div class="PrinterArea">	' +
 				'</div>' +
@@ -258,18 +232,14 @@ function FilterModelList(keyword) {
 		if (!ModelHtml.hasOwnProperty(strVendor))
 			ModelHtml[strVendor] = '';
 
-		let NozzleArray = OneModel['nozzle_diameter'].split(';');
-		let HtmlNozzel = '';
-		for (let m = 0; m < NozzleArray.length; m++) {
-			let nNozzel = NozzleArray[m];
-			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></label>';
-		}
-
 		let CoverImage = OneModel['cover'];
-		ModelHtml[strVendor] += '<div class="PrinterBlock">' +
+		ModelHtml[strVendor] += '<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
-			'	<div class="PImg"><img src="' + CoverImage + '"  /></div>' +
+        '<div class="PImg">'+
-			'    <div class="PName">' + OneModel['name'] + '</div>' + HtmlNozzel + '</div>';
+		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+		'</div>'+
+        '    <div class="PName">'+OneModel['name']+'</div>'+ 
+		'</div>';
 	}
 
 	//Update Nozzel Html Append
@@ -281,24 +251,26 @@ function FilterModelList(keyword) {
 
 
 	//Update Checkbox
-	ModelSelect = $('input[type=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 strNozzel = OneItem.getAttribute("nozzel");
 
-		let checked = GetModelSelect(strVendor, strModel, strNozzel);
+		let checked = GetModelSelect(strVendor, strModel);
 
-		OneItem.checked = checked;
+		if (checked)
+			$(OneItem).addClass('ModelCheckBoxSelected');
+		else
+			$(OneItem).removeClass('ModelCheckBoxSelected');
 	}
 
-	// let AlreadySelect=$("input:checked");
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
 	// {
-	// 	$("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
 	// }
 
 	TranslatePage();
@@ -306,18 +278,20 @@ function FilterModelList(keyword) {
 
 function SelectPrinterAll( sVendor )
 {
-	$("input[vendor='"+sVendor+"']").prop("checked", true);
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
-	$("input[vendor='"+sVendor+"']").each(function() {
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
-		CheckBoxOnclick(this);
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, true);
 	});
 }
 
 
 function SelectPrinterNone( sVendor )
 {
-	$("input[vendor='"+sVendor+"']").prop("checked", false);
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
-	$("input[vendor='"+sVendor+"']").each(function() {
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
-		CheckBoxOnclick(this);
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, false);
 	});
 }
 
@@ -336,25 +310,18 @@ function OnExitFilter() {
 	let ModelAll = {};
 	for (vendor in ModelNozzleSelected) {
 		for (model in ModelNozzleSelected[vendor]) {
-			for (nozzel in ModelNozzleSelected[vendor][model]) {
+			if (!ModelNozzleSelected[vendor][model])
-				if (!ModelNozzleSelected[vendor][model][nozzel])
+				continue;
-					continue;
 
-				if (!ModelAll.hasOwnProperty(model)) {
+			if (!ModelAll.hasOwnProperty(model)) {
-					//alert("ADD: "+strModel);
+				//alert("ADD: "+strModel);
 
-					ModelAll[model] = {};
+				ModelAll[model] = {};
 
-					ModelAll[model]["model"] = model;
+				ModelAll[model]["model"] = model;
-					ModelAll[model]["nozzle_diameter"] = '';
-					ModelAll[model]["vendor"] = vendor;
-				}
-
-				ModelAll[model]["nozzle_diameter"] += ModelAll[model]["nozzle_diameter"] == '' ? nozzel : ';' + nozzel;
-
-				nTotal++;
 			}
 
+			nTotal++;
 		}
 	}
 
@@ -374,7 +341,7 @@ function OnExit()
 {	
 	let ModelAll={};
 	
-	let ModelSelect=$("input:checked");
+	let ModelSelect=$(".ModelCheckBoxSelected");
 	let nTotal=ModelSelect.length;
 
 	if( nTotal==0 )
@@ -389,8 +356,6 @@ function OnExit()
 	    let OneItem=ModelSelect[n];
 		
 		let strModel=OneItem.getAttribute("model");
-		let strVendor=OneItem.getAttribute("vendor");
-		let strNozzel=OneItem.getAttribute("nozzel");
 			
 		//alert(strModel+strVendor+strNozzel);
 		
@@ -401,11 +366,7 @@ function OnExit()
 			ModelAll[strModel]={};
 		
 			ModelAll[strModel]["model"]=strModel;
-			ModelAll[strModel]["nozzle_diameter"]='';
-			ModelAll[strModel]["vendor"]=strVendor;
 		}
-		
-		ModelAll[strModel]["nozzle_diameter"]+=ModelAll[strModel]["nozzle_diameter"]==''?strNozzel:';'+strNozzel;
 	}
 		
 	var tSend={};

resources/web/guide/21/index.html

@@ -32,37 +32,48 @@
 
 <!--<div class="OneVendorBlock" Vendor="BBL">	
 <div class="BlockBanner">
+	<a>BBL-3DP</a>		
 	<div class="BannerBtns">
 		<div class="SmallBtn_Green trans" onClick="SelectPrinterAll('BBL')">所有</div>
 		<div class="SmallBtn trans" onClick="SelectPrinterNone('BBL')">无</div>
 	</div>
-	
-	<a>BBL-3DP</a>	
 </div>
 	
 <div class="PrinterArea">	
 	
 <div class="PrinterBlock">
-	<div class="PImg"><img src="p2.jpg"  /></div>	
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected" model="BBL-3DP-V5NORMAL" onClick="ChooseModel('BBL-3DP-V5NORMAL')"><img class="" src="../img/greencheck.svg" /></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 src="p1.jpg"  /></div>	
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox"><img class="" src="../img/greencheck.svg" /></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 src="p2.jpg"  /></div>	
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox"><img class="" src="../img/greencheck.svg" /></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 src="p1.jpg"  /></div>	
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"><img class="" src="../img/greencheck.svg" /></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>
@@ -75,24 +86,29 @@
 
 <div class="OneVendorBlock" Vendor="BAMBU">	
 <div class="BlockBanner">
+	<a>BAMBU-3DP</a>		
 	<div class="BannerBtns">
-		<div class="Banner-Btn" onClick="SelectPrinterAll('BAMBU')">所有</div>
+		<div class="SmallBtn_Green trans" onClick="SelectPrinterAll('BAMBU')">所有</div>
-		<div class="Banner-Btn" onClick="SelectPrinterNone('BAMBU')">无</div>
+		<div class="SmallBtn trans" onClick="SelectPrinterNone('BAMBU')">无</div>
 	</div>
-	
-	<a>BBL-3DP</a>	
 </div>
 	
 <div class="PrinterArea">	
 	
 <div class="PrinterBlock">
-	<div class="PImg"><img src="p2.jpg"  /></div>	
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"><img class="" src="../img/greencheck.svg" /></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 src="p1.jpg"  /></div>	
+	<div class="PImg">
+		<img class="ModelThumbnail" src="p2.jpg"  />
+        <div class="ModelCheckBox ModelCheckBoxSelected"><img class="" src="../img/greencheck.svg" /></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>

resources/web/guide/24/24.css

@@ -9,17 +9,17 @@
 	padding: 0px;
 	border-bottom:#009688 1px solid;
 	width: 100%;
+	display: flex;
+	justify-content:space-between;
+	align-items: center;
 }
 
-
 .BannerBtns
 {
-	float: right;
 	display: flex;
 	white-space: nowrap;
 	justify-content: space-around;
 	align-items: center;
-	height: 40px;
 	text-align: center;
 	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
 }
@@ -76,21 +76,52 @@
 	padding: 10px;
 }
 
-.PrinterBlock img
+.PImg
 {
+	position:relative;
 	width:160px;
 	height: 160px;	
 }
 
+.ModelCheckBox
+{
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	right: 10px;
+	top: 10px;
+    border:1px solid #ADADAD;
+	background-color: #FFF;
+	padding: 1px;
+	cursor: pointer;
+}
+
+.ModelCheckBox.ModelCheckBoxSelected img
+{
+	display:inline;
+}
+
+.ModelCheckBox img
+{
+	width:100%;
+	display: none;
+}
+
+img.ModelThumbnail
+{
+	width:  100%;
+	height: 100%;
+}
+
 .PName
 {
 	font-weight: 700;
-	text-align:left;
+	text-align: left;
 }
 
 .pNozzel
 {
-	display: flex;
+	display: none;
 	align-items: center;
 	justify-content:flex-start;
 	color: #5A5A5A;	

resources/web/guide/24/24.js

@@ -1,7 +1,7 @@
 function OnInit()
 {
 	//let strInput=JSON.stringify(cData);
-	//HandleStudio(strInput);
+	//HandleModelList(cData);
 	
 	TranslatePage();
 	
@@ -46,6 +46,21 @@ function ShowPrinterThumb(pItem, 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") )
@@ -74,11 +89,11 @@ function HandleModelList( pVal )
 
 			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
 '<div class="BlockBanner">'+
+'	<a>'+sVV+'</a>'+				
 '	<div class="BannerBtns">'+
 '		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
 '		<div class="SmallBtn trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
 '	</div>'+
-'	<a>'+sVV+'</a>'+
 '</div>'+
 '<div class="PrinterArea">	'+
 '</div>'+
@@ -93,19 +108,14 @@ function HandleModelList( pVal )
 		if( !ModelHtml.hasOwnProperty(strVendor))
 			ModelHtml[strVendor]='';
 			
-		let NozzleArray=OneModel['nozzle_diameter'].split(';');
-		let HtmlNozzel='';
-		for(let m=0;m<NozzleArray.length;m++)
-		{
-			let nNozzel=NozzleArray[m];
-			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></label>';
-		}
-		
 		let CoverImage=OneModel['cover'];
-		ModelHtml[strVendor]+='<div class="PrinterBlock">'+
+		ModelHtml[strVendor]+='<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
-'	<div class="PImg"><img src="'+CoverImage+'"  /></div>'+
+        '<div class="PImg">'+
-'    <div class="PName">'+OneModel['name']+'</div>'+ HtmlNozzel +'</div>';
+		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+		'</div>'+
+        '    <div class="PName">'+OneModel['name']+'</div>'+ 
+		'</div>';
 	}
 	
 	//Update Nozzel Html Append
@@ -116,7 +126,6 @@ function HandleModelList( pVal )
 	
 	
 	//Update Checkbox
-	$('input').prop("checked", false);
 	for(let m=0;m<nTotal;m++)
 	{
 		let OneModel=pModel[m];
@@ -124,45 +133,21 @@ function HandleModelList( pVal )
 		let SelectList=OneModel['nozzle_selected'];
 		if(SelectList!='')
 		{
-			SelectList=OneModel['nozzle_selected'].split(';');
+			ChooseModel(OneModel['vendor'], OneModel['model']);
-    		let nLen=SelectList.length;
-
-		    for(let a=0;a<nLen;a++)
-			{
-			    let nNozzel=SelectList[a];
-				$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "'][nozzel='" + nNozzel + "']").prop("checked", true);
-
-				SetModelSelect(OneModel['vendor'], OneModel['model'], nNozzel, true);
-			}
-		}
-		else
-		{
-			$("input[vendor='"+OneModel['vendor']+"'][model='"+OneModel['model']+"']").prop("checked", false);
 		}
 	}	
 
-	// let AlreadySelect=$("input:checked");
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
 	// {
-	// 	$("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
 	// }
 	
 	TranslatePage();
 }
 
-function CheckBoxOnclick(obj) {
+function SetModelSelect(vendor, model, checked) {
-
-	let strModel = obj.getAttribute("model");
-
-	let strVendor = obj.getAttribute("vendor");
-	let strNozzel = obj.getAttribute("nozzel");
-
-	SetModelSelect(strVendor, strModel, strNozzel, obj.checked);
-
-}
-
-function SetModelSelect(vendor, model, nozzel, checked) {
 	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
 		return;
 	}
@@ -172,17 +157,12 @@ function SetModelSelect(vendor, model, nozzel, checked) {
 	}
 
 	let oVendor = ModelNozzleSelected[vendor];
-	if (!oVendor.hasOwnProperty(model)) {
+	if (oVendor.hasOwnProperty(model) || checked) {
-		oVendor[model] = {};
+		oVendor[model] = checked;
-	}
-
-	let oModel = oVendor[model];
-	if (oModel.hasOwnProperty(nozzel) || checked) {
-		oVendor[model][nozzel] = checked;
 	}
 }
 
-function GetModelSelect(vendor, model, nozzel) {
+function GetModelSelect(vendor, model) {
 	if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
 		return false;
 	}
@@ -192,27 +172,21 @@ function GetModelSelect(vendor, model, nozzel) {
 		return false;
 	}
 
-	let oModel = oVendor[model];
+	return oVendor[model];
-	if (!oModel.hasOwnProperty(nozzel)) {
-		return false;
-	}
-
-	return oVendor[model][nozzel];
 }
 
 function FilterModelList(keyword) {
 
 	//Save checkbox state
-	let ModelSelect = $('input[type=checkbox]');
+	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");
-		let strNozzel = OneItem.getAttribute("nozzel");
 
-		SetModelSelect(strVendor, strModel, strNozzel, OneItem.checked);
+		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
 	}
 
 	let nTotal = pModel.length;
@@ -241,11 +215,11 @@ function FilterModelList(keyword) {
 
 			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
 				'<div class="BlockBanner">' +
+				'	<a>' + sVV + '</a>' +
 				'	<div class="BannerBtns">' +
 				'		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
 				'		<div class="SmallBtn trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
 				'	</div>' +
-				'	<a>' + sVV + '</a>' +
 				'</div>' +
 				'<div class="PrinterArea">	' +
 				'</div>' +
@@ -258,18 +232,14 @@ function FilterModelList(keyword) {
 		if (!ModelHtml.hasOwnProperty(strVendor))
 			ModelHtml[strVendor] = '';
 
-		let NozzleArray = OneModel['nozzle_diameter'].split(';');
-		let HtmlNozzel = '';
-		for (let m = 0; m < NozzleArray.length; m++) {
-			let nNozzel = NozzleArray[m];
-			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></label>';
-		}
-
 		let CoverImage = OneModel['cover'];
-		ModelHtml[strVendor] += '<div class="PrinterBlock">' +
+		ModelHtml[strVendor] += '<div class="PrinterBlock" onClick="ChooseModel(\''+strVendor+'\',\''+OneModel['model']+'\')">'+
-			'	<div class="PImg"><img src="' + CoverImage + '"  /></div>' +
+        '<div class="PImg">'+
-			'    <div class="PName">' + OneModel['name'] + '</div>' + HtmlNozzel + '</div>';
+		    '<img class="ModelThumbnail" src="'+CoverImage+'" />'+
+			'<div class="ModelCheckBox" vendor="' +strVendor+ '" model="'+OneModel['model']+'"><img src="../img/greencheck.svg" /></div>'+
+		'</div>'+
+        '    <div class="PName">'+OneModel['name']+'</div>'+ 
+		'</div>';
 	}
 
 	//Update Nozzel Html Append
@@ -281,24 +251,26 @@ function FilterModelList(keyword) {
 
 
 	//Update Checkbox
-	ModelSelect = $('input[type=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 strNozzel = OneItem.getAttribute("nozzel");
 
-		let checked = GetModelSelect(strVendor, strModel, strNozzel);
+		let checked = GetModelSelect(strVendor, strModel);
 
-		OneItem.checked = checked;
+		if (checked)
+			$(OneItem).addClass('ModelCheckBoxSelected');
+		else
+			$(OneItem).removeClass('ModelCheckBoxSelected');
 	}
 
-	// let AlreadySelect=$("input:checked");
+	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
 	// {
-	// 	$("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
+	//	$("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
 	// }
 
 	TranslatePage();
@@ -306,18 +278,20 @@ function FilterModelList(keyword) {
 
 function SelectPrinterAll( sVendor )
 {
-	$("input[vendor='"+sVendor+"']").prop("checked", true);
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
-	$("input[vendor='"+sVendor+"']").each(function() {
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
-		CheckBoxOnclick(this);
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, true);
 	});
 }
 
 
 function SelectPrinterNone( sVendor )
 {
-	$("input[vendor='"+sVendor+"']").prop("checked", false);
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
-	$("input[vendor='"+sVendor+"']").each(function() {
+	$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
-		CheckBoxOnclick(this);
+    	let strModel = this.getAttribute("model");
+		SetModelSelect(sVendor, strModel, false);
 	});
 }
 
@@ -327,25 +301,18 @@ function OnExitFilter() {
 	let ModelAll = {};
 	for (vendor in ModelNozzleSelected) {
 		for (model in ModelNozzleSelected[vendor]) {
-			for (nozzel in ModelNozzleSelected[vendor][model]) {
+			if (!ModelNozzleSelected[vendor][model])
-				if (!ModelNozzleSelected[vendor][model][nozzel])
+				continue;
-					continue;
 
-				if (!ModelAll.hasOwnProperty(model)) {
+			if (!ModelAll.hasOwnProperty(model)) {
-					//alert("ADD: "+strModel);
+				//alert("ADD: "+strModel);
 
-					ModelAll[model] = {};
+				ModelAll[model] = {};
 
-					ModelAll[model]["model"] = model;
+				ModelAll[model]["model"] = model;
-					ModelAll[model]["nozzle_diameter"] = '';
-					ModelAll[model]["vendor"] = vendor;
-				}
-
-				ModelAll[model]["nozzle_diameter"] += ModelAll[model]["nozzle_diameter"] == '' ? nozzel : ';' + nozzel;
-
-				nTotal++;
 			}
 
+			nTotal++;
 		}
 	}
 
@@ -365,7 +332,7 @@ function OnExit()
 {	
 	let ModelAll={};
 	
-	let ModelSelect=$("input:checked");
+	let ModelSelect=$(".ModelCheckBoxSelected");
 	let nTotal=ModelSelect.length;
 
 	if( nTotal==0 )
@@ -380,8 +347,6 @@ function OnExit()
 	    let OneItem=ModelSelect[n];
 		
 		let strModel=OneItem.getAttribute("model");
-		let strVendor=OneItem.getAttribute("vendor");
-		let strNozzel=OneItem.getAttribute("nozzel");
 			
 		//alert(strModel+strVendor+strNozzel);
 		
@@ -392,11 +357,7 @@ function OnExit()
 			ModelAll[strModel]={};
 		
 			ModelAll[strModel]["model"]=strModel;
-			ModelAll[strModel]["nozzle_diameter"]='';
-			ModelAll[strModel]["vendor"]=strVendor;
 		}
-		
-		ModelAll[strModel]["nozzle_diameter"]+=ModelAll[strModel]["nozzle_diameter"]==''?strNozzel:';'+strNozzel;
 	}
 		
 	var tSend={};

resources/web/guide/img/greencheck.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="1740057651953" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M910.222222 0a113.777778 113.777778 0 0 1 113.777778 113.777778v796.444444a113.777778 113.777778 0 0 1-113.777778 113.777778H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777778V113.777778a113.777778 113.777778 0 0 1 113.777778-113.777778h796.444444z m-114.915555 320.739556a45.909333 45.909333 0 0 0-65.080889 0l-310.897778 310.897777-135.907556-135.964444a45.909333 45.909333 0 0 0-65.080888 0 45.909333 45.909333 0 0 0 0 65.137778l168.561777 168.448a45.909333 45.909333 0 0 0 65.080889 0l343.608889-343.552a45.738667 45.738667 0 0 0-0.284444-64.967111z" fill="#00AE42" p-id="1464"></path></svg>

src/slic3r/GUI/WebGuideDialog.cpp

@@ -437,7 +437,7 @@ void GuideFrame::OnScriptMessage(wxWebViewEvent &evt)
                     wxString s1 = TmpModel["model"];
                     wxString s2 = OneSelect["model"];
                     if (s1.compare(s2) == 0) {
-                        m_ProfileJson["model"][m]["nozzle_selected"] = OneSelect["nozzle_diameter"];
+                        m_ProfileJson["model"][m]["nozzle_selected"] = m_ProfileJson["model"][m]["nozzle_diameter"];
                         break;
                     }
                 }
@@ -517,7 +517,7 @@ void GuideFrame::OnScriptMessage(wxWebViewEvent &evt)
         BOOST_LOG_TRIVIAL(trace) << "GuideFrame::OnScriptMessage;Error:" << e.what();
     }
 
-    //wxString strAll = m_ProfileJson.dump(-1,' ',false, json::error_handler_t::ignore);
+    wxString strAll = m_ProfileJson.dump(-1,' ',false, json::error_handler_t::ignore);
 }
 
 void GuideFrame::RunScript(const wxString &javascript)

src/slic3r/GUI/WebViewDialog.cpp

@@ -544,7 +544,7 @@ void WebViewPanel::update_mode()
     */
 void WebViewPanel::OnNavigationRequest(wxWebViewEvent& evt)
 {
-    BOOST_LOG_TRIVIAL(trace) << __FUNCTION__ << ": " << evt.GetTarget().ToUTF8().data();
+    BOOST_LOG_TRIVIAL(trace) << __FUNCTION__ << ": " << evt.GetURL().ToUTF8().data();
     const wxString &url = evt.GetURL();
     if (url.StartsWith("File://") || url.StartsWith("file://")) {
         if (!url.Contains("/web/homepage/index.html")) {
@@ -590,7 +590,7 @@ void WebViewPanel::OnNavigationComplete(wxWebViewEvent& evt)
 {
     m_browser->Show();
     Layout();
-    BOOST_LOG_TRIVIAL(trace) << __FUNCTION__ << ": " << evt.GetTarget().ToUTF8().data();
+    BOOST_LOG_TRIVIAL(trace) << __FUNCTION__ << ": " << evt.GetURL().ToUTF8().data();
     if (wxGetApp().get_mode() == comDevelop)
         wxLogMessage("%s", "Navigation complete; url='" + evt.GetURL() + "'");
     UpdateState();