chore(ui): wifi qr animation

wifi qr scan animation spinner: blue background pearl & diamond
worldcoin · Nov 8, 2024 · 0b8dd86 · 0b8dd86
1 parent 149f014
commit 0b8dd86
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 2 deletions.
diff --git a/ui/rgb/src/lib.rs b/ui/rgb/src/lib.rs
@@ -95,6 +95,9 @@ impl Argb {
     pub const PEARL_RING_OPERATOR_QR_SCAN_SPINNER: Argb = Argb(None, 25, 15, 9);
     pub const PEARL_RING_OPERATOR_QR_SCAN_SPINNER_OPERATOR_BASED: Argb =
         Argb(None, 25, 22, 5);
+    /// Outer-ring color during wifi QR scans
+    pub const PEARL_RING_WIFI_QR_SCAN: Argb = Argb(None, 0, 5, 20);
+    pub const PEARL_RING_WIFI_QR_SCAN_SPINNER: Argb = Argb(None, 15, 15, 15);
     /// Outer-ring color during user QR scans
     pub const PEARL_RING_USER_QR_SCAN: Argb = Argb(None, 30, 20, 0);
     pub const PEARL_RING_USER_QR_SCAN_SPINNER: Argb = Argb(None, 28, 25, 10);
@@ -118,6 +121,11 @@ impl Argb {
         Argb(Some(Self::DIMMING_MAX_VALUE), 128, 128, 0);
     pub const DIAMOND_OPERATOR_VERSIONS_OUTDATED: Argb =
         Argb(Some(Self::DIMMING_MAX_VALUE), 255, 0, 0);
+
+    /// Outer-ring color during wifi QR scans
+    pub const DIAMOND_RING_WIFI_QR_SCAN: Argb = Argb(Some(5), 0, 15, 100);
+    pub const DIAMOND_RING_WIFI_QR_SCAN_SPINNER: Argb = Argb(Some(10), 60, 60, 40);
+
     /// Outer-ring color during operator QR scans
     pub const DIAMOND_RING_OPERATOR_QR_SCAN: Argb = Argb(Some(5), 77, 14, 0);
     pub const DIAMOND_RING_OPERATOR_QR_SCAN_SPINNER: Argb = Argb(Some(10), 80, 50, 30);

diff --git a/ui/src/engine/diamond.rs b/ui/src/engine/diamond.rs
@@ -249,6 +249,11 @@ impl EventHandler for Runner<DIAMOND_RING_LED_COUNT, DIAMOND_CENTER_LED_COUNT> {
                     sound::Type::Melody(sound::Melody::InternetConnectionSuccessful),
                     Duration::ZERO,
                 )?;
+                self.stop_ring(LEVEL_FOREGROUND, Transition::FadeOut(0.5));
+                self.set_ring(
+                    LEVEL_BACKGROUND,
+                    animations::Static::<DIAMOND_RING_LED_COUNT>::new(Argb::OFF, None),
+                );
             }
             Event::BootComplete { api_mode } => {
                 self.sound.queue(
@@ -347,7 +352,14 @@ impl EventHandler for Runner<DIAMOND_RING_LED_COUNT, DIAMOND_CENTER_LED_COUNT> {
                     }
                     QrScanSchema::Wifi => {
                         self.operator_idle.no_wlan();
-
+                        self.set_ring(
+                            LEVEL_FOREGROUND,
+                            animations::SimpleSpinner::new(
+                                Argb::DIAMOND_RING_WIFI_QR_SCAN_SPINNER,
+                                Some(Argb::DIAMOND_RING_WIFI_QR_SCAN),
+                            )
+                            .fade_in(1.5),
+                        );
                         // temporarily increase the volume to ask wifi qr code
                         let master_volume = self.sound.volume();
                         self.sound.set_master_volume(40);
@@ -490,6 +502,7 @@ impl EventHandler for Runner<DIAMOND_RING_LED_COUNT, DIAMOND_CENTER_LED_COUNT> {
                     );
                 }
                 QrScanSchema::Wifi => {
+                    self.stop_ring(LEVEL_FOREGROUND, Transition::FadeOut(0.5));
                     self.sound.queue(
                         sound::Type::Melody(sound::Melody::QrLoadSuccess),
                         Duration::ZERO,

diff --git a/ui/src/engine/pearl/self_serve.rs b/ui/src/engine/pearl/self_serve.rs
@@ -120,7 +120,14 @@ impl Runner<PEARL_RING_LED_COUNT, PEARL_CENTER_LED_COUNT> {
                     }
                     QrScanSchema::Wifi => {
                         self.operator_idle.no_wlan();
-
+                        self.set_ring(
+                            LEVEL_FOREGROUND,
+                            animations::SimpleSpinner::new(
+                                Argb::PEARL_RING_WIFI_QR_SCAN_SPINNER,
+                                Some(Argb::PEARL_RING_WIFI_QR_SCAN),
+                            )
+                            .fade_in(1.5),
+                        );
                         // temporarily increase the volume to ask wifi qr code
                         let master_volume = self.sound.volume();
                         self.sound.set_master_volume(40);

diff --git a/ui/src/simulation.rs b/ui/src/simulation.rs
@@ -41,6 +41,17 @@ pub async fn bootup_simulation(ui: &dyn Engine) -> Result<()> {
     Ok(())
 }
 
+#[expect(dead_code)]
+pub async fn wifi_qr_code_simulation(ui: &dyn Engine) {
+    ui.qr_scan_start(QrScanSchema::Wifi);
+    time::sleep(Duration::from_secs(10)).await;
+    ui.qr_scan_capture();
+    time::sleep(Duration::from_secs(2)).await;
+    ui.qr_scan_completed(QrScanSchema::Wifi);
+    time::sleep(Duration::from_secs(2)).await;
+    ui.network_connection_success();
+}
+
 pub async fn signup_simulation(
     ui: &dyn Engine,
     hardware: Hardware,