Add search printer model in Setup wizard (#2692)
Add search printer model in Setup wizard (#2563) Adopted from #2464 Co-authored-by: ZdDroid <601865048@qq.com>
This commit is contained in:
parent
de35ff9a6c
commit
714667ee1c
3 changed files with 247 additions and 10 deletions
|
@ -124,3 +124,31 @@
|
|||
display: flex;
|
||||
justify-content:space-around;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.searchTerm {
|
||||
width: 100%;
|
||||
border: 3px solid #009688;
|
||||
/*border-right: none;*/
|
||||
padding: 5px;
|
||||
height: 20px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
outline: none;
|
||||
color: #9DBFAF;
|
||||
}
|
||||
|
||||
.searchTerm:focus{
|
||||
color: #009688;
|
||||
}
|
||||
|
||||
/*Resize the wrap to see the search bar change!*/
|
||||
.wrap{
|
||||
width: 30%;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 42px;
|
||||
}
|
|
@ -40,7 +40,6 @@ function HandleStudio( pVal )
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
function ShowPrinterThumb(pItem, strImg)
|
||||
{
|
||||
$(pItem).attr('src',strImg);
|
||||
|
@ -52,7 +51,7 @@ function HandleModelList( pVal )
|
|||
if( !pVal.hasOwnProperty("model") )
|
||||
return;
|
||||
|
||||
let pModel=pVal['model'];
|
||||
pModel=pVal['model'];
|
||||
|
||||
let nTotal=pModel.length;
|
||||
let ModelHtml={};
|
||||
|
@ -99,7 +98,7 @@ function HandleModelList( pVal )
|
|||
for(let m=0;m<NozzleArray.length;m++)
|
||||
{
|
||||
let nNozzel=NozzleArray[m];
|
||||
HtmlNozzel+='<div class="pNozzel TextS2"><input type="checkbox" model="'+OneModel['model']+'" nozzel="'+nNozzel+'" vendor="'+strVendor+'" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>';
|
||||
HtmlNozzel += '<div 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></div>';
|
||||
}
|
||||
|
||||
let CoverImage=OneModel['cover'];
|
||||
|
@ -120,18 +119,20 @@ function HandleModelList( pVal )
|
|||
for(let m=0;m<nTotal;m++)
|
||||
{
|
||||
let OneModel=pModel[m];
|
||||
|
||||
|
||||
let SelectList=OneModel['nozzle_selected'];
|
||||
if(SelectList!='')
|
||||
{
|
||||
SelectList=OneModel['nozzle_selected'].split(';');
|
||||
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);
|
||||
}
|
||||
$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "'][nozzel='" + nNozzel + "']").prop("checked", true);
|
||||
|
||||
SetModelSelect(OneModel['vendor'], OneModel['model'], nNozzel, true);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
@ -149,6 +150,155 @@ function HandleModelList( pVal )
|
|||
TranslatePage();
|
||||
}
|
||||
|
||||
function CheckBoxOnclick(obj) {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
|
||||
ModelNozzleSelected[vendor] = {};
|
||||
}
|
||||
|
||||
let oVendor = ModelNozzleSelected[vendor];
|
||||
if (!oVendor.hasOwnProperty(model)) {
|
||||
oVendor[model] = {};
|
||||
}
|
||||
|
||||
let oModel = oVendor[model];
|
||||
if (oModel.hasOwnProperty(nozzel) || checked) {
|
||||
oVendor[model][nozzel] = checked;
|
||||
}
|
||||
}
|
||||
|
||||
function GetModelSelect(vendor, model, nozzel) {
|
||||
if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let oVendor = ModelNozzleSelected[vendor];
|
||||
if (!oVendor.hasOwnProperty(model)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let oModel = oVendor[model];
|
||||
if (!oModel.hasOwnProperty(nozzel)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return oVendor[model][nozzel];
|
||||
}
|
||||
|
||||
function FilterModelList(keyword) {
|
||||
|
||||
//Save checkbox state
|
||||
let ModelSelect = $('input[type=checkbox]');
|
||||
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);
|
||||
}
|
||||
|
||||
let nTotal = pModel.length;
|
||||
let ModelHtml = {};
|
||||
|
||||
$('#Content').empty();
|
||||
for (let n = 0; n < nTotal; n++) {
|
||||
let OneModel = pModel[n];
|
||||
|
||||
let strVendor = OneModel['vendor'];
|
||||
let ModelName = OneModel['model'];
|
||||
if (ModelName.toLowerCase().indexOf(keyword.toLowerCase()) == -1)
|
||||
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">' +
|
||||
' <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>' +
|
||||
'</div>';
|
||||
|
||||
$('#Content').append(HtmlNewVendor);
|
||||
}
|
||||
|
||||
//Collect Html Node Nozzel Html
|
||||
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];
|
||||
HtmlNozzel += '<div 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></div>';
|
||||
}
|
||||
|
||||
let CoverImage = OneModel['cover'];
|
||||
ModelHtml[strVendor] += '<div class="PrinterBlock">' +
|
||||
' <div class="PImg"><img src="' + CoverImage + '" /></div>' +
|
||||
' <div class="PName">' + OneModel['model'] + '</div>' + HtmlNozzel + '</div>';
|
||||
}
|
||||
|
||||
//Update Nozzel Html Append
|
||||
for (let key in ModelHtml) {
|
||||
let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
|
||||
obj.empty();
|
||||
obj.append(ModelHtml[key]);
|
||||
}
|
||||
|
||||
|
||||
//Update Checkbox
|
||||
ModelSelect = $('input[type=checkbox]');
|
||||
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);
|
||||
|
||||
OneItem.checked = checked;
|
||||
}
|
||||
|
||||
// let AlreadySelect=$("input:checked");
|
||||
// let nSelect=AlreadySelect.length;
|
||||
// if(nSelect==0)
|
||||
// {
|
||||
// $("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
|
||||
// }
|
||||
|
||||
TranslatePage();
|
||||
}
|
||||
|
||||
function SelectPrinterAll( sVendor )
|
||||
{
|
||||
|
@ -162,15 +312,54 @@ function SelectPrinterNone( sVendor )
|
|||
}
|
||||
|
||||
|
||||
//
|
||||
function GotoFilamentPage()
|
||||
{
|
||||
let nChoose=OnExit();
|
||||
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]) {
|
||||
for (nozzel in ModelNozzleSelected[vendor][model]) {
|
||||
if (!ModelNozzleSelected[vendor][model][nozzel])
|
||||
continue;
|
||||
|
||||
if (!ModelAll.hasOwnProperty(model)) {
|
||||
//alert("ADD: "+strModel);
|
||||
|
||||
ModelAll[model] = {};
|
||||
|
||||
ModelAll[model]["model"] = model;
|
||||
ModelAll[model]["nozzle_diameter"] = '';
|
||||
ModelAll[model]["vendor"] = vendor;
|
||||
}
|
||||
|
||||
ModelAll[model]["nozzle_diameter"] += ModelAll[model]["nozzle_diameter"] == '' ? nozzel : ';' + nozzel;
|
||||
|
||||
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={};
|
||||
|
|
|
@ -19,6 +19,11 @@
|
|||
<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)">
|
||||
</div>
|
||||
</div>
|
||||
<div id="Content" class="ZScrol">
|
||||
|
||||
<!--<div class="OneVendorBlock" Vendor="BBL">
|
||||
|
@ -112,4 +117,19 @@
|
|||
|
||||
|
||||
</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>
|
||||
|
|
Loading…
Reference in a new issue