mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

识别和导出二维码增加原始文本的显示

This commit is contained in:
枫谷剑仙 2021-08-05 18:42:46 +08:00
parent 88b9e876ae
commit 25a29280b4
15 changed files with 172 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
fonts/fa-solid-900.eot
View File

Binary file not shown.

4
fonts/fa-solid-900.svg
View File

@ -2,11 +2,11 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<metadata> <metadata>
Created by FontForge 20201107 at Tue Mar 16 10:15:04 2021 Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021
By Robert Madole By Robert Madole
Copyright (c) Font Awesome Copyright (c) Font Awesome
</metadata> </metadata>
<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><defs> <!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><defs>
<font id="FontAwesome5Free-Solid" horiz-adv-x="512" > <font id="FontAwesome5Free-Solid" horiz-adv-x="512" >
<font-face <font-face
font-family="Font Awesome 5 Free Solid" font-family="Font Awesome 5 Free Solid"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 898 KiB

After

Width:  |  Height:  |  Size: 898 KiB

BIN
fonts/fa-solid-900.ttf
View File

Binary file not shown.

BIN
fonts/fa-solid-900.woff
View File

Binary file not shown.

BIN
fonts/fa-solid-900.woff2
View File

Binary file not shown.

16
languages/en.css
View File

@ -526,9 +526,9 @@
content: "Generate QR code:"; content: "Generate QR code:";
} }
.formation-from-qrcode::before .formation-from-string::before
{ {
content: "A formation link read from a QR code"; content: "A formation link read from string";
} }
label[for="sourceSelect"]::before label[for="sourceSelect"]::before
{ {
@ -540,15 +540,18 @@ label[for="sourceSelect"]::before
} }
#qr-code-frame .read-qr-camera::before #qr-code-frame .read-qr-camera::before
{ {
content: "\f030 Scan with the camera"; content: "\f030 Scan with camera";
} }
#qr-code-frame .read-qr-camera.running::before #qr-code-frame .read-qr-camera.running::before
{ {
content: "\f28d Stop using the camera"; content: "\f28d Stop using camera";
} }
#qr-code-frame .read-qr-file::before #qr-code-frame .read-qr-file::before
{ {
content: "\f1c5 Read the image file"; content: "\f1c5 Read image file";
}
#qr-code-frame .read-string::before {
content: "\f891 Read string";
} }
label[for="qr-data-type-pdf"]::before label[for="qr-data-type-pdf"]::before
@ -558,4 +561,7 @@ label[for="qr-data-type-pdf"]::before
label[for="qr-data-type-pdc"]::before label[for="qr-data-type-pdc"]::before
{ {
content: "P&D Damage Caculater (PDC)"; content: "P&D Damage Caculater (PDC)";
}
label[for="qr-data-type-pdchu"]::before {
content: "Valeria(pdchu)";
} }

12
languages/ja.css
View File

@ -493,9 +493,9 @@
content: "QRコードを生成します:"; content: "QRコードを生成します:";
} }
.formation-from-qrcode::before .formation-from-string::before
{ {
content: "QRコードから読み取られたフォーメーションリンク"; content: "文字列から読み取られた列リンク";
} }
label[for="sourceSelect"]::before label[for="sourceSelect"]::before
{ {
@ -517,12 +517,18 @@ label[for="sourceSelect"]::before
{ {
content: "\f1c5 画像ファイルを読み取る"; content: "\f1c5 画像ファイルを読み取る";
} }
#qr-code-frame .read-string::before {
content: "\f891 文字列を読み取ります";
}
label[for="qr-data-type-pdf"]::before label[for="qr-data-type-pdf"]::before
{ {
content: "パズドラチーム図作成ツール"; content: "パズドラダッシュフォーメーション";
} }
label[for="qr-data-type-pdc"]::before label[for="qr-data-type-pdc"]::before
{ {
content: "パズドラダメージ計算 (PDC)"; content: "パズドラダメージ計算 (PDC)";
}
label[for="qr-data-type-pdchu"]::before {
content: "Valeria(pdchu)";
} }

12
languages/ko.css
View File

@ -484,9 +484,9 @@
content: "QR 코드 생성:"; content: "QR 코드 생성:";
} }
.formation-from-qrcode::before .formation-from-string::before
{ {
content: "QR 코드에서 읽은 형성 링크"; content: "문자열에서 읽은 팀 링크입니다";
} }
label[for="sourceSelect"]::before label[for="sourceSelect"]::before
{ {
@ -508,12 +508,18 @@ label[for="sourceSelect"]::before
{ {
content: "\f1c5 이미지 파일 읽기"; content: "\f1c5 이미지 파일 읽기";
} }
#qr-code-frame .read-string::before {
content: "\f891 문자열을 읽습니다";
}
label[for="qr-data-type-pdf"]::before label[for="qr-data-type-pdf"]::before
{ {
content: "퍼즐앤드래곤 팀 다이어그램 생성 도구"; content: "퍼즐앤드래곤 대시 형성";
} }
label[for="qr-data-type-pdc"]::before label[for="qr-data-type-pdc"]::before
{ {
content: "퍼즐앤드래곤 데미지 카큐라터 (PDC)"; content: "퍼즐앤드래곤 데미지 카큐라터 (PDC)";
}
label[for="qr-data-type-pdchu"]::before {
content: "Valeria(pdchu)";
} }

48
languages/zh-TW.css
View File

@ -328,7 +328,7 @@
content: "使用官方覺醒排序"; content: "使用官方覺醒排序";
} }
.search-box .search-list-length::before{ .search-box .search-list-length::before{
content: "結果數量："; content: "結果數量：";
} }
.search-box .sort-div::before{ .search-box .sort-div::before{
content: "排序："; content: "排序：";
@ -386,7 +386,7 @@
content: "▼特殊搜索"; content: "▼特殊搜索";
} }
.special-div .special-add::before { .special-div .special-add::before {
content: "➕"; content: "➕";
} }
.control-div .search-start::before{ .control-div .search-start::before{
content: "🔍開始搜索"; content: "🔍開始搜索";
@ -425,52 +425,52 @@
.base .evo-type::before, .base .evo-type::before,
.base .evo-type::after .base .evo-type::after
{ {
content: "基礎"; content: "基礎";
} }
.evolution .evo-type::before, .evolution .evo-type::before,
.evolution .evo-type::after .evolution .evo-type::after
{ {
content: "進化"; content: "進化";
} }
.ult-evo .evo-type::before, .ult-evo .evo-type::before,
.ult-evo .evo-type::after .ult-evo .evo-type::after
{ {
content: "究極進化"; content: "究極進化";
} }
.reincarnation .evo-type::before, .reincarnation .evo-type::before,
.reincarnation .evo-type::after .reincarnation .evo-type::after
{ {
content: "轉生進化"; content: "轉生進化";
} }
.pixel-evo .evo-type::before, .pixel-evo .evo-type::before,
.pixel-evo .evo-type::after .pixel-evo .evo-type::after
{ {
content: "像素進化"; content: "像素進化";
} }
.assist-evo .evo-type::before, .assist-evo .evo-type::before,
.assist-evo .evo-type::after .assist-evo .evo-type::after
{ {
content: "輔助進化"; content: "輔助進化";
} }
.super-reincarnation .evo-type::before, .super-reincarnation .evo-type::before,
.super-reincarnation .evo-type::after .super-reincarnation .evo-type::after
{ {
content: "超轉生進化"; content: "超轉生進化";
} }
.super-ult-evo .evo-type::before, .super-ult-evo .evo-type::before,
.super-ult-evo .evo-type::after .super-ult-evo .evo-type::after
{ {
content: "超究極進化"; content: "超究極進化";
} }
.henshin .evo-type::before, .henshin .evo-type::before,
.henshin .evo-type::after .henshin .evo-type::after
{ {
content: "變身"; content: "變身";
} }
.henshin-loop .evo-type::before, .henshin-loop .evo-type::before,
.henshin-loop .evo-type::after .henshin-loop .evo-type::after
{ {
content: "循環變身"; content: "循環變身";
} }
.control-box .btn-qrcode::before{ .control-box .btn-qrcode::before{
@ -486,36 +486,42 @@
content: "生成二維碼："; content: "生成二維碼：";
} }
.formation-from-qrcode::before .formation-from-string::before
{ {
content: "從二維碼中讀取的隊伍連結"; content: "從字串中讀取的隊伍連結";
} }
label[for="sourceSelect"]::before label[for="sourceSelect"]::before
{ {
content: "視頻源選擇："; content: "視頻源選擇：";
} }
#qr-code-frame .save-qr-img::before #qr-code-frame .save-qr-img::before
{ {
content: "\f0c7 保存二維碼圖片"; content: "\f0c7 保存二維碼圖片";
} }
#qr-code-frame .read-qr-camera::before #qr-code-frame .read-qr-camera::before
{ {
content: "\f030 使用相機掃描"; content: "\f030 使用相機掃描";
} }
#qr-code-frame .read-qr-camera.running::before #qr-code-frame .read-qr-camera.running::before
{ {
content: "\f28d 停止使用相機"; content: "\f28d 停止使用相機";
} }
#qr-code-frame .read-qr-file::before #qr-code-frame .read-qr-file::before
{ {
content: "\f1c5 讀取二維碼圖片"; content: "\f1c5 讀取二維碼圖片";
}
#qr-code-frame .read-string::before {
content: "\f891 读取字符串";
} }
label[for="qr-data-type-pdf"]::before label[for="qr-data-type-pdf"]::before
{ {
content: "龍族拼圖隊伍圖製作工具"; content: "龍圖急速陣型";
} }
label[for="qr-data-type-pdc"]::before label[for="qr-data-type-pdc"]::before
{ {
content: "智龙迷城傷害計算器 (PDC)"; content: "龍族拼圖傷害計算器(PDC)";
}
label[for="qr-data-type-pdchu"]::before {
content: "Valeria(pdchu)";
} }

48
languages/zh.css
View File

@ -328,7 +328,7 @@
content: "使用官方觉醒排序"; content: "使用官方觉醒排序";
} }
.search-box .search-list-length::before{ .search-box .search-list-length::before{
content: "结果数量："; content: "结果数量：";
} }
.search-box .sort-div::before{ .search-box .sort-div::before{
content: "排序："; content: "排序：";
@ -386,7 +386,7 @@
content: "▼特殊搜索"; content: "▼特殊搜索";
} }
.special-div .special-add::before { .special-div .special-add::before {
content: "➕"; content: "➕";
} }
.control-div .search-start::before{ .control-div .search-start::before{
content: "🔍开始搜索"; content: "🔍开始搜索";
@ -425,52 +425,52 @@
.base .evo-type::before, .base .evo-type::before,
.base .evo-type::after .base .evo-type::after
{ {
content: "基礎"; content: "基礎";
} }
.evolution .evo-type::before, .evolution .evo-type::before,
.evolution .evo-type::after .evolution .evo-type::after
{ {
content: "進化"; content: "進化";
} }
.ult-evo .evo-type::before, .ult-evo .evo-type::before,
.ult-evo .evo-type::after .ult-evo .evo-type::after
{ {
content: "究極進化"; content: "究極進化";
} }
.reincarnation .evo-type::before, .reincarnation .evo-type::before,
.reincarnation .evo-type::after .reincarnation .evo-type::after
{ {
content: "轉生進化"; content: "轉生進化";
} }
.pixel-evo .evo-type::before, .pixel-evo .evo-type::before,
.pixel-evo .evo-type::after .pixel-evo .evo-type::after
{ {
content: "像素進化"; content: "像素進化";
} }
.assist-evo .evo-type::before, .assist-evo .evo-type::before,
.assist-evo .evo-type::after .assist-evo .evo-type::after
{ {
content: "輔助進化"; content: "輔助進化";
} }
.super-reincarnation .evo-type::before, .super-reincarnation .evo-type::before,
.super-reincarnation .evo-type::after .super-reincarnation .evo-type::after
{ {
content: "超轉生進化"; content: "超轉生進化";
} }
.super-ult-evo .evo-type::before, .super-ult-evo .evo-type::before,
.super-ult-evo .evo-type::after .super-ult-evo .evo-type::after
{ {
content: "超究極進化"; content: "超究極進化";
} }
.henshin .evo-type::before, .henshin .evo-type::before,
.henshin .evo-type::after .henshin .evo-type::after
{ {
content: "変身"; content: "変身";
} }
.henshin-loop .evo-type::before, .henshin-loop .evo-type::before,
.henshin-loop .evo-type::after .henshin-loop .evo-type::after
{ {
content: "循環変身"; content: "循環変身";
} }
.control-box .btn-qrcode::before{ .control-box .btn-qrcode::before{
@ -486,36 +486,42 @@
content: "生成二维码："; content: "生成二维码：";
} }
.formation-from-qrcode::before .formation-from-string::before
{ {
content: "从二维码中读取的队伍链接"; content: "从字符串中读取的队伍链接";
} }
label[for="sourceSelect"]::before label[for="sourceSelect"]::before
{ {
content: "视频源选择："; content: "视频源选择：";
} }
#qr-code-frame .save-qr-img::before #qr-code-frame .save-qr-img::before
{ {
content: "\f0c7 保存二维码图片"; content: "\f0c7 保存二维码图片";
} }
#qr-code-frame .read-qr-camera::before #qr-code-frame .read-qr-camera::before
{ {
content: "\f030 使用相机扫描"; content: "\f030 使用相机扫描";
} }
#qr-code-frame .read-qr-camera.running::before #qr-code-frame .read-qr-camera.running::before
{ {
content: "\f28d 停止使用相机"; content: "\f28d 停止使用相机";
} }
#qr-code-frame .read-qr-file::before #qr-code-frame .read-qr-file::before
{ {
content: "\f1c5 读取二维码图片"; content: "\f1c5 读取二维码图片";
}
#qr-code-frame .read-string::before {
content: "\f891 读取字符串";
} }
label[for="qr-data-type-pdf"]::before label[for="qr-data-type-pdf"]::before
{ {
content: "智龙迷城队伍图制作工具"; content: "智龙急速阵型";
} }
label[for="qr-data-type-pdc"]::before label[for="qr-data-type-pdc"]::before
{ {
content: "智龙迷城伤害计算器（PDC）"; content: "智龙迷城伤害计算器(PDC)";
}
label[for="qr-data-type-pdchu"]::before {
content: "Valeria(pdchu)";
} }

8
multi.html
View File

@ -1157,6 +1157,10 @@ var formation = new Formation(teamsCount,5);
<div class="mask-content"> <div class="mask-content">
<div class="read-qr-box"> <div class="read-qr-box">
<div class="action-button-box"> <div class="action-button-box">
<div class="read-text-box">
<input class="string-input" type="text"/>
<button class="read-string brown-button"><!--读字符串--></button>
</div>
<button class="read-qr-camera brown-button"><!--相机扫--></button> <button class="read-qr-camera brown-button"><!--相机扫--></button>
<button class="read-qr-file brown-button"><!--读文件--></button> <button class="read-qr-file brown-button"><!--读文件--></button>
<input type="file" accept="image/*" class="file-select display-none"> <input type="file" accept="image/*" class="file-select display-none">
@ -1170,8 +1174,10 @@ var formation = new Formation(teamsCount,5);
<div class="save-qr-box"> <div class="save-qr-box">
<ul class="qr-data-type-ul"> <ul class="qr-data-type-ul">
<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序 <li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序
--><li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC--> --><li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC
--><!--<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdchu" id="qr-data-type-pdchu" /><label for="qr-data-type-pdchu"></label></li>--><!--Pdchu-->
</ul> </ul>
<input class="string-output" type="text" readonly/>
<div class="qr-box"><img class="qr-code-image" /></div> <div class="qr-box"><img class="qr-code-image" /></div>
<a download="" class="save-qr-img brown-button"><!--保存QR 图片--></a> <a download="" class="save-qr-img brown-button"><!--保存QR 图片--></a>
</div> </div>

88
script.js
View File

@ -385,16 +385,18 @@ Formation.prototype.getPdcQrStr = function()
{ {
if (membersArr[i].id > 0 || assistArr[i].id > 0) if (membersArr[i].id > 0 || assistArr[i].id > 0)
{ {
let pdcMemberArr = Array.from(genMemberMap(membersArr[i], assistArr[i], (arr.length == 2 && idx == 1) ? i+1 : i)); //2人协力时，队伍2编号0是空的 let pdcMemberMap = genMemberMap(membersArr[i], assistArr[i], (arr.length == 2 && idx == 1) ? i+1 : i); //2人协力时，队伍2编号0是空的
console.log(pdcMemberMap)
let pdcMemberArr = Array.from(pdcMemberMap);
pdcMemberStr = pdcMemberArr.map(item => { pdcMemberStr = pdcMemberArr.map(item => {
if (item[1] == undefined) if (item[1] == undefined)
{ {
console.log(item[0]) return null;
} }
return [ return [
item[0].toString(36).prefix(2), item[0].toString(36).prefix(2),
item[1].toString(36).prefix(2) item[1].toString(36).prefix(2)
].join('')}).join(','); ].join('')}).filter(item=>item).join(',');
teamArr.push(pdcMemberStr); teamArr.push(pdcMemberStr);
} }
} }
@ -1149,7 +1151,7 @@ function inputFromQrString(string)
else if(/^\d[\d\-\w,\]}]+}/.test(string)) else if(/^\d[\d\-\w,\]}]+}/.test(string))
{ //PDC { //PDC
re.code = 2; re.code = 2;
re.message = "发现 PDC 二维码 | PDC QR code found"; re.message = "发现 PDC 格式 | PDC format found";
const pdcFotmation = readPDC(string); const pdcFotmation = readPDC(string);
const newFotmation = pdcFotmationToPdfFotmation(pdcFotmation); const newFotmation = pdcFotmationToPdfFotmation(pdcFotmation);
re.url = ObjToUrl(newFotmation.getPdfQrObj(false)); re.url = ObjToUrl(newFotmation.getPdfQrObj(false));
@ -1235,8 +1237,9 @@ function pdcFotmationToPdfFotmation(pdcFotmation)
a.plus[0] = member.get(11) || 0; a.plus[0] = member.get(11) || 0;
a.plus[1] = member.get(12) || 0; a.plus[1] = member.get(12) || 0;
a.plus[2] = member.get(13) || 0; a.plus[2] = member.get(13) || 0;
m.awoken = member.get(7) >= 0 ? member.get(7) : Cards[m.id].awakenings.length; m.awoken = member.get(7) >= 0 ? member.get(7) : Cards[m.id].awakenings.length;
a.awoken = member.get(14) >= 0 ? member.get(14) : Cards[a.id].awakenings.length; a.awoken = member.get(14) >= 0 ? member.get(14) : (a.id > 0 ? Cards[a.id].awakenings.length : 0);
m.sawoken = member.get(8) ? Cards[m.id].superAwakenings.indexOf(member.get(8)) : null; m.sawoken = member.get(8) ? Cards[m.id].superAwakenings.indexOf(member.get(8)) : null;
}); });
}); });
@ -1300,7 +1303,8 @@ function initialize() {
readBox.videoBox.classList.add(className_displayNone); readBox.videoBox.classList.add(className_displayNone);
this.classList.remove(className_displayNone); this.classList.remove(className_displayNone);
this.refreshQrCode(formation.getQrStr(saveBox.qrDataType.find(radio=>radio.checked).value)); let qrTypeRadio = saveBox.qrDataType.find(radio=>radio.checked);
if (qrTypeRadio) qrTypeRadio.onclick(); //打开二维码窗口就先产生二维码
}; };
qrCodeFrame.hide = function(){ qrCodeFrame.hide = function(){
qrcodeReader.reset(); qrcodeReader.reset();
@ -1312,6 +1316,7 @@ function initialize() {
const qrContent = qrCodeFrame.content = qrCodeFrame.querySelector(".mask-content"); const qrContent = qrCodeFrame.content = qrCodeFrame.querySelector(".mask-content");
const qrReadBox = qrContent.readBox = qrContent.querySelector(".read-qr-box"); const qrReadBox = qrContent.readBox = qrContent.querySelector(".read-qr-box");
const qrSaveBox = qrContent.saveBox = qrContent.querySelector(".save-qr-box"); const qrSaveBox = qrContent.saveBox = qrContent.querySelector(".save-qr-box");
qrReadBox.readString = qrReadBox.querySelector(".read-string");
qrReadBox.readQrCamera = qrReadBox.querySelector(".read-qr-camera"); qrReadBox.readQrCamera = qrReadBox.querySelector(".read-qr-camera");
qrReadBox.readQrFile = qrReadBox.querySelector(".read-qr-file"); qrReadBox.readQrFile = qrReadBox.querySelector(".read-qr-file");
qrReadBox.filePicker = qrReadBox.querySelector(".file-select"); qrReadBox.filePicker = qrReadBox.querySelector(".file-select");
@ -1319,11 +1324,35 @@ function initialize() {
qrReadBox.video = qrReadBox.querySelector("#video"); qrReadBox.video = qrReadBox.querySelector("#video");
qrReadBox.videoBox = qrReadBox.querySelector(".video-box"); qrReadBox.videoBox = qrReadBox.querySelector(".video-box");
qrReadBox.sourceSelect = qrReadBox.querySelector("#sourceSelect"); qrReadBox.sourceSelect = qrReadBox.querySelector("#sourceSelect");
qrReadBox.qrStr = qrReadBox.querySelector(".string-input");
qrReadBox.readString.onclick = function()
{
let inputResult = inputFromQrString(qrReadBox.qrStr.value);
if (inputResult.code < 100)
{
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
const newLink = document.createElement("a");
newLink.className = "formation-from-string";
newLink.href = inputResult.url;
newLink.target = "_blank";
qrReadBox.info.appendChild(newLink);
}else
{
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
}
}
qrSaveBox.qrImage = qrSaveBox.querySelector(".qr-code-image"); qrSaveBox.qrImage = qrSaveBox.querySelector(".qr-code-image");
qrSaveBox.qrStr = qrSaveBox.querySelector(".string-output");
qrSaveBox.qrStr.onchange = function()
{
qrCodeFrame.refreshQrCode(this.value);
}
qrSaveBox.qrDataType = Array.from(qrSaveBox.querySelectorAll(".qr-data-type-radio")); qrSaveBox.qrDataType = Array.from(qrSaveBox.querySelectorAll(".qr-data-type-radio"));
qrSaveBox.qrDataType.forEach(radio=>radio.onclick = function(){ qrSaveBox.qrDataType.forEach(radio=>radio.onclick = function(){
qrCodeFrame.refreshQrCode(formation.getQrStr(this.value)); let qrstr = formation.getQrStr(this.value);
qrSaveBox.qrStr.value = qrstr;
qrSaveBox.qrStr.onchange();
}); });
qrSaveBox.saveQrImg = qrSaveBox.querySelector(".save-qr-img"); qrSaveBox.saveQrImg = qrSaveBox.querySelector(".save-qr-img");
@ -1396,18 +1425,9 @@ function initialize() {
const file = myFiles[0]; const file = myFiles[0];
loadImage(URL.createObjectURL(file)).then(function(img) { loadImage(URL.createObjectURL(file)).then(function(img) {
qrcodeReader.decodeFromImage(img).then((result) => { qrcodeReader.decodeFromImage(img).then((result) => {
console.log('Found QR code!', result); console.debug('Found QR code!', result);
let inputResult = inputFromQrString(result.text); qrReadBox.qrStr.value = result.text;
qrReadBox.readString.onclick();
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
if (inputResult.code < 100)
{
const newLink = document.createElement("a");
newLink.className = "formation-from-qrcode";
newLink.href = inputResult.url;
newLink.target = "_blank";
qrReadBox.info.appendChild(newLink);
}
}).catch((err) => { }).catch((err) => {
console.error(err); console.error(err);
if (err) { if (err) {
@ -1424,9 +1444,9 @@ function initialize() {
} }
} }
}) })
console.log(`Started decode for image from ${img.src}`) console.debug(`Started decode for image from ${img.src}`)
}, function(err) { }, function(err) {
console.log(err); console.debug(err);
}); });
} }
@ -1440,41 +1460,27 @@ function initialize() {
} }
}else }else
{ {
function scanContinuously() function scanContinuously()
{ {
qrcodeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => { qrcodeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
if (result) { if (result) {
// properly decoded qr code // properly decoded qr code
console.log('Found QR code!', result); console.debug('Found QR code!', result);
let inputResult = inputFromQrString(result.text); qrReadBox.qrStr.value = result.text;
qrReadBox.readString.onclick();
if (inputResult.code < 100)
{ //成功后就关闭
qrReadBox.readQrCamera.onclick();
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
const newLink = document.createElement("a");
newLink.className = "formation-from-qrcode";
newLink.href = inputResult.url;
newLink.target = "_blank";
qrReadBox.info.appendChild(newLink);
}else
{
qrReadBox.info.textContent = 'Code ' + inputResult.code + ':' + inputResult.message;
}
} }
if (err) { if (err) {
if (err instanceof ZXing.NotFoundException) { if (err instanceof ZXing.NotFoundException) {
console.log('No QR code found.') console.debug('No QR code found.')
} }
if (err instanceof ZXing.ChecksumException) { if (err instanceof ZXing.ChecksumException) {
console.log('A code was found, but it\'s read value was not valid.') console.debug('A code was found, but it\'s read value was not valid.')
} }
if (err instanceof ZXing.FormatException) { if (err instanceof ZXing.FormatException) {
console.log('A code was found, but it was in a invalid format.') console.debug('A code was found, but it was in a invalid format.')
} }
} }
}); });

8
solo.html
View File

@ -1011,6 +1011,10 @@ var formation = new Formation(teamsCount,6);
<div class="mask-content"> <div class="mask-content">
<div class="read-qr-box"> <div class="read-qr-box">
<div class="action-button-box"> <div class="action-button-box">
<div class="read-text-box">
<input class="string-input" type="text"/>
<button class="read-string brown-button"><!--读字符串--></button>
</div>
<button class="read-qr-camera brown-button"><!--相机扫--></button> <button class="read-qr-camera brown-button"><!--相机扫--></button>
<button class="read-qr-file brown-button"><!--读文件--></button> <button class="read-qr-file brown-button"><!--读文件--></button>
<input type="file" accept="image/*" class="file-select display-none"> <input type="file" accept="image/*" class="file-select display-none">
@ -1024,8 +1028,10 @@ var formation = new Formation(teamsCount,6);
<div class="save-qr-box"> <div class="save-qr-box">
<ul class="qr-data-type-ul"> <ul class="qr-data-type-ul">
<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序 <li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序
--><li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC--> --><li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC
--><!--<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdchu" id="qr-data-type-pdchu" /><label for="qr-data-type-pdchu"></label></li>--><!--Pdchu-->
</ul> </ul>
<input class="string-output" type="text" readonly/>
<div class="qr-box"><img class="qr-code-image" /></div> <div class="qr-box"><img class="qr-code-image" /></div>
<a download="" class="save-qr-img brown-button"><!--保存QR 图片--></a> <a download="" class="save-qr-img brown-button"><!--保存QR 图片--></a>
</div> </div>

20
style.css
View File

@ -2949,6 +2949,24 @@ table .orb-icon
{ {
color: white; color: white;
} }
#qr-code-frame .string-input
{
width: calc(100% - 170px);
box-sizing: border-box;
}
#qr-code-frame .string-output
{
width: calc(100% - 20px);
}
#qr-code-frame .qr-box
{
margin: 5px;
}
.save-qr-box
{
padding-bottom: 10px;
}
.read-qr-box::before, .read-qr-box::before,
.save-qr-box::before .save-qr-box::before
{ {
@ -2965,7 +2983,7 @@ table .orb-icon
font-size: 20px; font-size: 20px;
padding: 5px; padding: 5px;
} }
.formation-from-qrcode .formation-from-string
{ {
font-size: 1.5em; font-size: 1.5em;
display: block; display: block;

8
triple.html
View File

@ -1944,6 +1944,10 @@ var formation = new Formation(teamsCount,6);
<div class="mask-content"> <div class="mask-content">
<div class="read-qr-box"> <div class="read-qr-box">
<div class="action-button-box"> <div class="action-button-box">
<div class="read-text-box">
<input class="string-input" type="text"/>
<button class="read-string brown-button"><!--读字符串--></button>
</div>
<button class="read-qr-camera brown-button"><!--相机扫--></button> <button class="read-qr-camera brown-button"><!--相机扫--></button>
<button class="read-qr-file brown-button"><!--读文件--></button> <button class="read-qr-file brown-button"><!--读文件--></button>
<input type="file" accept="image/*" class="file-select display-none"> <input type="file" accept="image/*" class="file-select display-none">
@ -1957,8 +1961,10 @@ var formation = new Formation(teamsCount,6);
<div class="save-qr-box"> <div class="save-qr-box">
<ul class="qr-data-type-ul"> <ul class="qr-data-type-ul">
<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序 <li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序
--><li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC--> --><li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC
--><!--<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdchu" id="qr-data-type-pdchu" /><label for="qr-data-type-pdchu"></label></li>--><!--Pdchu-->
</ul> </ul>
<input class="string-output" type="text" readonly/>
<div class="qr-box"><img class="qr-code-image" /></div> <div class="qr-box"><img class="qr-code-image" /></div>
<a download="" class="save-qr-img brown-button"><!--保存QR 图片--></a> <a download="" class="save-qr-img brown-button"><!--保存QR 图片--></a>
</div> </div>