Initial release

resources/web/guide/23/23.css

@@ -0,0 +1,363 @@
+
+.ChooseBlock
+{
+	display:flex;
+	line-height: 32px;
+}
+
+.CName
+{
+	width:130px;
+	font-weight: 700;
+	height: 100%;
+	text-align: right;
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+#ItemBlockArea
+{
+	display:flex;
+	overflow-y:scroll;
+	flex-wrap:wrap;
+	flex-direction: row;
+	padding: 0 0 0 8px;
+}
+
+.MItem
+{
+	width:33%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-right: 4px !important;
+	top: -100px; /* ORCA this will be activated when item filtered with position:absolute */
+}
+
+.MItem label
+{
+	margin-right: 0px !important;
+}
+
+#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: var(--main-color);
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+}
+
+#NoticeContent
+{
+	padding: 4mm 10mm;	
+}
+
+
+#NoticeBtns
+{
+	margin-top: 4mm;
+	display: flex;
+	justify-content:flex-end;
+}
+
+#SystemFilamentsArea
+{
+	display: none;
+	flex-direction: column;
+	height: 100%;
+}
+
+#CFilament_Btn_Area
+{
+	display: flex;
+	align-items: center;
+	height: 30px;
+}
+
+#Title
+{
+	margin: 0px 40px;
+	border-bottom: 1px solid var(--border-color);
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+#Title div
+{
+	cursor: pointer;
+	font-size: 24px;
+}
+
+#Title div.TitleSelected
+{
+	height: calc(100% - 6px);
+	display: flex;
+	align-items: center;
+	border-bottom: 6px solid var(--main-color);
+}
+
+#Title div.TitleUnselected
+{
+	height: 100%;
+	display: flex;
+	align-items: center;
+	color: #000;
+}
+
+#CustomFilamentsArea
+{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+#CFilament_List
+{
+	display:flex;
+	overflow-y:auto;
+	flex-wrap:wrap;
+	justify-content:flex-start;
+	align-items: flex-start;
+	align-content:flex-start;
+	line-height: 32px;
+	height: 100%;
+}
+
+.CFilament_Item
+{
+	display: flex;
+	align-items: center;
+	margin-right: 10%;
+	width: 44%;
+}
+
+.CFilament_Item:nth-of-type(2n) {
+	margin-right: 2%;
+}
+
+.CFilament_Name
+{
+	width: 100%;
+	overflow: hidden;
+    white-space: nowrap; /* ?????? */
+    text-overflow: ellipsis; /* ????????? */
+}
+
+.CFilament_EditBtn
+{
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+}
+
+.CFilament_EditBtn:hover
+{
+	
+}
+
+/* ORCA column browser */
+
+#Content {
+	height: 100%;
+}
+
+body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser support 2023+ */
+	padding: 15px 15px 5px;
+}
+
+.cbr-browser-container {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: 210px auto;
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--border-color);
+	box-sizing: border-box;
+}
+
+.cbr-column:last-child {
+	grid-column: 1 / -1;
+	border-top: 1px solid var(--border-color);
+}
+
+.cbr-column {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.cbr-column:nth-child(-n+2) {
+	border-right: 1px solid var(--border-color);
+}
+
+.cbr-column .CValues {
+	display: grid;
+}
+
+.CValues label {
+	margin-right: 0 !important;
+}
+
+.cbr-column-title-container {
+	position: sticky;
+	background: var(--bg-color-secondary);
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.cbr-search-bar,
+.cbr-filter-bar {
+	font-size: 16px;
+	background: var(--bg-color-secondary);
+	border: 1px solid transparent;
+	padding: 2px 27px 2px 27px;
+	line-height: 24px;
+}
+
+.cbr-search-bar {
+	width: calc(100% - 18px);
+}
+
+.cbr-filter-bar {
+	border-color: var(--border-color);
+	width: 160px;
+	height:24px;
+}
+
+.cbr-column-title-container .ComboBox > select {
+	margin: 3px 0;
+	height: 30px;
+}
+
+.cbr-column-title-container input:is(:hover,:focus) {
+	border-color: var(--main-color);
+	outline: none;
+}
+
+.cbr-column-title-container input:is(:focus) {
+	background: var(--focus-bg-box);
+}
+
+.cbr-filter-box {
+	position: relative;
+	margin: 3px;
+}
+
+.list-item-count {
+	color:var(--fg-color-label);
+	margin-left:10px
+}
+
+.cbr-filter-btns {
+	display: flex;
+	margin: 5px 5px 5px auto;
+}
+
+.cbr-filter-btns div:first-of-type {
+	margin-left: 10px;
+}
+
+.cbr-filter-mode-filter {
+	display: none;
+}
+
+.clear-icon,
+.search-icon,
+.filter-icon {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-mask-image: var(--url);
+	mask-image: var(--url);
+	width:  16px;
+  	height: 16px;
+	background-color: var(--icon-color);
+	pointer-events:none;
+}
+
+.filter-icon {--url: var(--icon-filter)}
+.search-icon {--url: var(--icon-search)}
+.clear-icon  {--url: var(--icon-input-clear)}
+
+.search-icon,
+.filter-icon {
+	left:  6px;
+}
+
+.clear-icon  {
+	right: 6px;
+	display: none;
+}
+
+.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon,
+.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon  {
+	display: block;
+}
+
+input[onclear="1"]{
+	cursor:default
+}
+
+.cbr-search-placeholder,
+.cbr-filter-placeholder {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 16px;
+	color: var(--fg-color-label);
+	pointer-events: none;
+	line-height: 24px;
+	left: 27px;
+}
+
+.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder,
+.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder {
+	opacity: 0;
+}
+
+.cbr-content {
+	overflow-y: auto;
+}
+
+.cbr-content div {
+	padding-left: 8px;
+}
+
+.cbr-content label {
+	margin-right: 0 !important;
+	padding: 1px 0 !important;
+}
+
+.cbr-content div.cbr-no-items {
+	display: none;
+}

resources/web/guide/23/23.js

@@ -0,0 +1,661 @@
+var m_ProfileItem;
+
+var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
+var VendorPriority=new Array("generic");
+
+function OnInit()
+{
+	TranslatePage();
+    OnSelectMenu(1);
+	
+	RequestProfile();
+	
+	RequestCustomFilaments();
+	//TestCustomFilaments();
+	//OnSelectMenu(2);
+}
+
+function RequestProfile()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_userguide_profile";
+	
+	SendWXMessage( JSON.stringify(tSend) );
+}
+
+function HandleStudio(pVal)
+{
+	let strCmd=pVal['command'];
+	//alert(strCmd);
+	
+	if(strCmd=='response_userguide_profile')
+	{
+		m_ProfileItem=pVal['response'];
+		SortUI();
+	}
+	else if(strCmd=='update_custom_filaments')
+	{
+		UpdateCustomFilaments( pVal['data'] );
+	}
+}
+
+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);
+	}
+	
+
+	//model
+	let HtmlMode='';
+	nMode=ModelList.length;
+	for(let n=0;n<nMode;n++)
+	{
+		let sModel=ModelList[n];	
+		/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+		HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
+	}
+	
+	$('#MachineList .CValues').append(HtmlMode);	
+	$('#MachineList .CValues input').prop("checked",true);
+	//if(nMode<=1)
+	//{
+	//	$('#MachineList').hide();
+	//}
+	
+	//Filament - Create sorted array with generic vendor first
+	let FilamentArray=new Array();
+	let GenericFilamentArray=new Array();
+	for( let key in m_ProfileItem['filament'] )
+	{
+		let OneFila=m_ProfileItem['filament'][key];
+		if(OneFila['vendor'].toLowerCase() === 'generic')
+			GenericFilamentArray.push({key: key, data: OneFila});
+		else
+			FilamentArray.push({key: key, data: OneFila});
+	}
+	// Combine arrays with generic filaments first
+	let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
+	
+	let HtmlFilament='';
+	let SelectNumber=0;
+
+	var TypeHtmlArray={};
+    var VendorHtmlArray={};
+	for( let n=0; n<SortedFilamentArray.length; n++ )
+	{
+		let filamentItem = SortedFilamentArray[n];
+		let key = filamentItem.key;
+		let OneFila = filamentItem.data;
+		
+		//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;		
+		//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))
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   /><span>'+fType+'</span></label>';
+			
+				TypeHtmlArray[LowType]=HtmlType;
+		    }
+			
+			//Vendor
+			let lowVendor=fVendor.toLowerCase();
+			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
+				
+				VendorHtmlArray[lowVendor]=HtmlVendor;
+		    }
+			
+			//Filament
+			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
+	        if(pFila.length==0)
+		    {
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
+			
+			    $("#ItemBlockArea").append(HtmlFila);
+		    } 
+			else
+			{
+				let strModel=pFila.attr("model");
+				let strFilalist=pFila.attr("filalist");
+				
+				if(strModel == '' || fModel == '')
+					pFila.attr("model", '');
+				else
+					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();
+
+	UpdateStats();
+}
+
+
+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();
+			//alert(fName) //debug non common filament type
+		}
+			
+	}
+
+	UpdateStats();
+}
+
+function UpdateStats()
+{
+	let $i             = $("#ItemBlockArea");
+	let $allItems      = $i.find(".MItem");
+	let $visibleItems  = $i.find(".MItem:visible");
+	let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
+	let visibleCount   = Math.min($filteredItems.length, $visibleItems.length);
+	
+	$(".list-item-count").text(
+		$i.find("input:checked").length + " / " + 
+		$allItems.length +
+		($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
+	);
+}
+
+function ChooseDefaultFilament()
+{
+	//ModelList
+	let pModel=$("#MachineList input:gt(0):checked");
+	let nModel=pModel.length;
+	let ModelList=new Array();
+	for(let n=0;n<nModel;n++)
+	{
+		let OneModel=pModel[n];
+		ModelList.push(  OneModel.getAttribute("mode") );
+	}	
+	
+	//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 fModel=OneFF.getAttribute("model");
+		
+		let HasModel=false;
+		for(let m=0;m<nModel;m++)
+		{
+			let ModelSrc=ModelList[m];
+		
+			if( fModel.indexOf(ModelSrc)>=0)
+			{
+				HasModel=true;
+				break;
+			}
+		}
+			
+		if(HasModel)
+		    $(OneFF).prop("checked",true);
+	}
+	
+	ShowNotice(0);
+}
+
+function SelectAllFilament( nShow )
+{
+	// ORCA add ability to only select / unselect filted items
+	if (document.querySelector('.cbr-filter-bar').value) {
+		$('#ItemBlockArea .MItem:visible input')
+		.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
+		.prop("checked", nShow != 0);
+	}
+	else {
+		$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
+	}
+
+	UpdateStats();
+}
+
+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 strFilalist=FilaSelectedList[n].getAttribute("filalist");
+		if(strFilalist) {
+			let filaNames = strFilalist.split(';');
+			for(let i=0; i<filaNames.length; i++) {
+				let fname = filaNames[i].trim();
+				if(fname !== '')
+					FilaArray.push(fname);
+			}
+		}
+	}
+	
+	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 CancelSelect()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_guide_cancel";
+	tSend['data']={};
+		
+	SendWXMessage( JSON.stringify(tSend) );			
+}
+
+
+function ConfirmSelect()
+{
+	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) );			
+	}
+}
+
+
+function OnSelectMenu( nIndex )
+{
+	switch(nIndex)
+	{
+		case 1:
+			$('#SystemFilamentBtn').addClass('TitleSelected');
+			$('#SystemFilamentBtn').removeClass('TitleUnselected');		
+			
+			$('#CustomFilamentBtn').addClass('TitleUnselected');
+			$('#CustomFilamentBtn').removeClass('TitleSelected');	
+			
+			$('#SystemFilamentsArea').css('display','flex');
+			$('#CustomFilamentsArea').css('display','none');
+			break;
+		case 2:
+			$('#CustomFilamentBtn').addClass('TitleSelected');
+			$('#CustomFilamentBtn').removeClass('TitleUnselected');
+			
+			$('#SystemFilamentBtn').addClass('TitleUnselected');
+			$('#SystemFilamentBtn').removeClass('TitleSelected');	
+			
+			$('#CustomFilamentsArea').css('display','flex');
+			$('#SystemFilamentsArea').css('display','none');			
+			break;
+	}
+}
+
+function RequestCustomFilaments()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="request_custom_filaments";
+		
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+function TestCustomFilaments()
+{
+	let strTest='{"command":"update_custom_filaments","data":[{"id":"P0c71f94","name":"AMOLEN ABS 222"},{"id":"P19cc6c5","name":"PrimaSelect PLA 231654"},{"id":"P93a5c3b","name":"3DJAKE PLA 111"}],"sequence_id":"2000"}';
+	let tItem=JSON.parse(strTest);
+	
+	HandleStudio(tItem);
+}
+
+function UpdateCustomFilaments( CFList )
+{
+	let strHtml='';
+	let nTotal=CFList.length;
+	
+	for(let n=0;n<nTotal;n++)
+	{
+		let pItem=CFList[n];
+		
+		let F_id=pItem['id'];
+		let F_name=pItem['name'];
+		
+		let strAdd='<div class="CFilament_Item">'+
+			       '<a  class="CFilament_Name" title="'+F_name+'">'+F_name+'</a><img onClick="CFEdit(\''+F_id+'\')" class="CFilament_EditBtn" src="../../image/edit.svg" />'+
+		           '</div>';
+		
+		strHtml+=strAdd;
+	}
+	
+	$('#CFilament_List').html(strHtml);
+}
+
+
+function OnClickCustomFilamentAdd()
+{
+	//alert('Create New Custom Filament');
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="create_custom_filament";
+		
+	SendWXMessage( JSON.stringify(tSend) );		
+}
+
+//编辑某一个自定义材料
+function CFEdit( fid )
+{
+	//alert(fid);
+	
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="modify_custom_filament";
+	tSend['id']=fid;
+		
+	SendWXMessage( JSON.stringify(tSend) );	
+}
+
+

resources/web/guide/23/index.html

@@ -0,0 +1,246 @@
+<!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="../../include/global.css" />	<!-- ORCA One for all-->
+<link rel="stylesheet" type="text/css" href="../css/common.css" />	
+<link rel="stylesheet" type="text/css" href="23.css" />
+<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="./23.js"></script>	
+</head>
+<body onLoad="OnInit()">
+<div id="Title">
+	<div id="SystemFilamentBtn" class="TitleSelected trans" tid="t109" onClick="OnSelectMenu(1)">System Filaments</div>
+	<div id="CustomFilamentBtn" class="TitleUnselected trans" tid="t110" onClick="OnSelectMenu(2)">Custom Filaments</div>
+</div>
+<div id="Content" class="ZScrol">
+	
+<div id="SystemFilamentsArea">
+
+<!-- ORCA column browser -->
+<div class="cbr-browser-container">
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="1"/>
+			<span class="cbr-search-placeholder trans" tid="t15">printer</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="MachineList">
+			<div class="CValues">
+				<label><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></label>
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="2"/>
+			<span class="cbr-search-placeholder trans" tid="t16">filament type</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="FilatypeList">
+			<div class="CValues">
+				<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>	
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="search-icon"></div>
+			<input type="text" class="cbr-search-bar" placeholder=" " tabindex="3"/>
+			<span class="cbr-search-placeholder trans" tid="t17">vendor</span>
+			<div class="clear-icon"></div>
+		</div>
+		<div class="cbr-content thin-scroll" id="VendorList">
+			<div class="CValues">
+				<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
+			</div>
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+
+	<div class="cbr-column">
+		<div class="cbr-column-title-container">
+			<div class="cbr-filter-box">
+				<div class="filter-icon"></div>
+				<input type="text" class="cbr-filter-bar" placeholder=" " tabindex="4"/>
+				<span class="cbr-filter-placeholder trans">Filter items</span>
+				<div class="clear-icon"></div>
+			</div>
+			<div class="ComboBox NoLabel">
+				<div class="arrow-icon"></div>
+				<select id="filter-tags">
+					<option value="0" disabled selected hidden></option>
+					<option value="1">Checked</option>
+					<option value="2">Unchecked</option>
+				</select>
+			</div>
+			<div class="list-item-count"></div>
+			<div class="cbr-filter-btns">
+				<span class="cbr-filter-mode-filter  trans">Select filtered</span>
+				<span class="cbr-filter-mode-visible trans">Select visible</span>
+				<div class="ButtonStyleConfirm ButtonTypeWindow  trans" tid="t11" onClick="SelectAllFilament(1)">all</div>
+				<div class="ButtonStyleRegular ButtonTypeWindow  trans" tid="t12" onClick="SelectAllFilament(0)">Clear all</div>
+			</div>	
+		</div>
+		<div class="cbr-content thin-scroll" id="ItemBlockArea">
+			<!-- <label class="MItem"><input type="checkbox" class="trans" tid="t11" onClick="SelectAllFilament()" /><span class="trans" tid="t11">all</span></label> -->
+			<div class="cbr-no-items">No items</div>
+		</div>
+	</div>
+</div>
+
+</div>
+	
+<div id="CustomFilamentsArea">
+	<div id="CFilament_Btn_Area">
+		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t111" onClick="OnClickCustomFilamentAdd()">Create New</div>
+	</div>
+    <div id="CFilament_List" class="thin-scroll">
+	</div>
+</div>
+	
+</div>
+<div id="AcceptArea">
+	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t39" id="AcceptBtn"  onclick="ConfirmSelect()">Confirm</div>	
+	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t38" id="PreBtn"  onclick="CancelSelect()">Cancel</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="ButtonStyleConfirm ButtonTypeChoice trans" tid="t21" onClick="ChooseDefaultFilament()">yes</div>
+		<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t22" onClick="ShowNotice(0)">no</div>
+	</div>
+	</div>
+	</div>
+
+</body>
+<script>
+	document.onkeydown = function (event) {
+		var e = event || window.event || arguments.callee.caller.arguments[0];
+
+		if (e.keyCode == 27)
+			ClosePage();
+
+		//if (window.event) {
+		//	try { e.keyCode = 0; } catch (e) { }
+		//	e.returnValue = false;
+		//}
+	};
+    window.addEventListener('wheel', function (event) {
+        if (event.ctrlKey === true || event.metaKey) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+	function addClearBtnEvents(el){
+		el.addEventListener('click', e => {
+			if (el.getAttribute("onclear") == "1") {
+				el.value = '';
+				el.dispatchEvent(new Event('input', {bubbles: true}));
+			}
+		});
+		el.addEventListener('mousemove', e => {
+			const rc = el.getBoundingClientRect();
+			const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
+			el.setAttribute("onclear", onRight ? "1" : "0");
+		});
+		el.addEventListener('mouseleave', e => {
+			el.setAttribute("onclear", "0");
+		});
+	}
+
+	document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
+        searchBar.addEventListener('input', function() {
+            const search = this.value.trim().toLowerCase(),
+            	  list   = this.closest('.cbr-column').querySelector('.cbr-content'),
+            	  items  = list.querySelectorAll('label');
+            let   hidden = 0;
+
+            items.forEach((item, i) => {
+				if(i == 0){
+					item.style.display ="block";
+					return;
+				};
+                const text = item.querySelector("span").textContent.toLowerCase();
+                const hide = search && !text.includes(search);
+                item.style.display = hide ? "none" : "block";
+                if(hide) hidden++;
+            });
+
+			if(items.length - hidden == 1){
+				items[0].style.display = "none";
+				hidden++;
+			}
+
+            list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+        });
+		addClearBtnEvents(searchBar);
+	});
+
+	const filterBar         = document.querySelector('.cbr-filter-bar');
+	const filterModeFilter  = document.querySelector('.cbr-filter-mode-filter' );
+	const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
+	
+	filterBar.addEventListener('input', function() {
+        const search = this.value.trim().toLowerCase();
+        const list   = this.closest('.cbr-column').querySelector('.cbr-content');
+        const items  = list.querySelectorAll('label');
+        let   hidden = 0;
+		
+		filterModeFilter.style.display  = search ? "block" : "none";
+		filterModeVisible.style.display = search ? "none" : "block";
+
+		const showSel   = search == "::checked";
+		const showUnsel = search == "::unchecked";
+		
+		if(showSel || showUnsel){
+			items.forEach(item => {
+				const cb   = item.querySelector("input");
+				const hide = showSel ? !cb.checked : cb.checked;
+				item.style.position = hide ? "absolute" : "unset";
+				if(hide) hidden++;
+			});
+		}
+		else {
+			items.forEach(item => {
+				const text = item.querySelector("span").textContent.toLowerCase();
+				const hide = search && !text.includes(search);
+				item.style.position = hide ? "absolute" : "unset";
+				if(hide) hidden++;
+			});
+		}
+	
+        list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+
+		UpdateStats();
+	});
+	addClearBtnEvents(filterBar);
+
+	document.querySelector('#filter-tags').addEventListener('change', e => {
+		let v = e.target.value;
+		filterBar.value = v == "1" ? "::checked" : "::unchecked";
+		filterBar.dispatchEvent(new Event('input', {bubbles: true}));
+		filterBar.focus();
+		e.target.value = 0; // reset back to make dropdown items always selectable
+    });
+
+</script>
+</html>