scanner: Update qr arc animation before qr is found

Also update the hint text.
This commit is contained in:
Fam Zheng 2025-02-22 22:47:37 +00:00
parent 951b7f8018
commit abd29721e3
4 changed files with 23 additions and 5 deletions

View File

@ -17,3 +17,7 @@ page {
font-size: 1rem; font-size: 1rem;
padding: 0.6rem; padding: 0.6rem;
} }
.hidden {
display: none;
}

View File

@ -25,7 +25,7 @@ Page({
* Page initial data * Page initial data
*/ */
data: { data: {
hint_text: '对齐定位点', hint_text: '查找二维码',
enable_debug: false, enable_debug: false,
debug_countdown: 10, debug_countdown: 10,
camera_flash: "off", camera_flash: "off",
@ -46,6 +46,8 @@ Page({
frame_uploaded: 0, frame_uploaded: 0,
last_frame_upload_time: 0, last_frame_upload_time: 0,
frame_upload_seq_num: 0, frame_upload_seq_num: 0,
qrarc_class: "sm",
qrmarkers_class: "hidden",
}, },
make_hint_text(r) { make_hint_text(r) {
@ -67,8 +69,9 @@ Page({
} else if (err.includes("energy check failed") || err.includes("cannot detect angle")) { } else if (err.includes("energy check failed") || err.includes("cannot detect angle")) {
return "移近一点"; return "移近一点";
} }
return "对齐定位点";
} }
return "对齐定位点"; return "查找二维码";
}, },
log(...what) { log(...what) {
@ -336,6 +339,8 @@ Page({
ctx.setZoom({ zoom: rule.zoom }); ctx.setZoom({ zoom: rule.zoom });
this.setData({ this.setData({
zoom: rule.zoom, zoom: rule.zoom,
qrmarkers_class: "",
qrarc_class: "lg"
}); });
} }
if (!this.listener) { if (!this.listener) {

View File

@ -6,13 +6,13 @@
</image> </image>
<image class="gray" src="/static/black.png" class="gray"></image> <image class="gray" src="/static/black.png" class="gray"></image>
</view> </view>
<view class="qrarc"> <view class="qrarc {{ qrarc_class }}">
<image class="topleft arc" src="/static/arc.png"></image> <image class="topleft arc" src="/static/arc.png"></image>
<image class="topright arc" src="/static/arc.png"></image> <image class="topright arc" src="/static/arc.png"></image>
<image class="bottomleft arc" src="/static/arc.png"></image> <image class="bottomleft arc" src="/static/arc.png"></image>
<image class="bottomright arc" src="/static/arc.png"></image> <image class="bottomright arc" src="/static/arc.png"></image>
</view> </view>
<view class="qrmarkers"> <view class="qrmarkers {{ qrmarkers_class }}">
<image class="square" src="/static/qrmarkers.png"> <image class="square" src="/static/qrmarkers.png">
</image> </image>
</view> </view>

View File

@ -233,7 +233,16 @@ view.brighter view.text {
width: 80rpx; width: 80rpx;
} }
view.qrarc {
view.qrarc.sm {
width: 350rpx;
height: 350rpx;
margin: 360rpx 200rpx;
position: absolute;
animation: qrarc-anime 1.2s ease-in-out infinite;
}
view.qrarc.lg {
width: 550rpx; width: 550rpx;
height: 550rpx; height: 550rpx;
margin: 260rpx 100rpx; margin: 260rpx 100rpx;