UI elements (#45)

This PR adds:
- new Images to guide in the process
- Restructuring of views
- dialog to help finding the android or firmware version
- steps indicator header
- Remove step-progressbar and move the header to different column
container to keep it attached to the top

Author: tsterbak

openandroidinstaller/app_state.py

@@ -27,22 +27,15 @@ def __init__(
         platform: str,
         config_path: Path,
         bin_path: Path,
-        progressbar: ProgressBar,
-        num_steps: int,
         test: bool = False,
         test_config: str = None,
     ):
         self.platform = platform
         self.config_path = config_path
         self.bin_path = bin_path
-        self.progressbar = progressbar
-        self.num_steps = num_steps  # keep track of the steps already taken
         self.test = test
         self.test_config = test_config
 
-        # initialize the progress bar at 0
-        self.progressbar.value = 0
-
         # placeholders
         self.advanced = False
         self.config = None
@@ -60,12 +53,4 @@ def load_config(self, device_code: str):
                 self.config.unlock_bootloader
                 + self.config.flash_recovery
                 + self.config.install_os
-            )
-            self.num_total_steps = len(self.steps)
-
-    def increment_progressbar(self):
-        """Increment the progressbar and step counter."""
-        self.progressbar.value = (self.num_steps - 1) / (
-            self.num_total_steps + 3
-        )  # don't show on the first step
-        self.num_steps += 1  # increase the step counter
+            )

openandroidinstaller/assets/configs/sargo.yaml

@@ -32,8 +32,9 @@ steps:
         Make sure your device is turned on. You need to reboot into the bootloader again by pressing 'Confirm and run' here. Then continue.
       command: adb_reboot_bootloader
     - type: call_button
-      content: Flash a custom recovery (temporarily) by pressing 'Confirm and run'. Once it's done continue.
+      content: Flash a custom recovery (temporarily) by pressing 'Confirm and run'. Once your phone screen looks like the picture on the left, continue.
       command: fastboot_flash_recovery
+      img: twrp-start.jpeg
   install_os:
     - type: call_button 
       content: >

openandroidinstaller/assets/imgs/steps-header-get-ready.png

@@ -38,14 +38,21 @@
 from loguru import logger
 
 from app_state import AppState
-from views import SelectFilesView, StepView, SuccessView, StartView, RequirementsView
+from views import (
+    SelectFilesView,
+    StepView,
+    SuccessView,
+    StartView,
+    RequirementsView,
+    WelcomeView,
+)
 from tooling import run_command
 
 # where to write the logs
 logger.add("openandroidinstaller.log")
 
 # Toggle to True for development purposes
-DEVELOPMENT = False
+DEVELOPMENT = True
 DEVELOPMENT_CONFIG = "sargo"  # "a3y17lte"  # "sargo"
 
 
@@ -64,18 +71,18 @@ def __init__(self):
             platform=PLATFORM,
             config_path=CONFIG_PATH,
             bin_path=BIN_PATH,
-            progressbar=ProgressBar(
-                width=600, color="#00d886", bgcolor="#eeeeee", bar_height=16
-            ),
-            num_steps=2,
             test=DEVELOPMENT,
             test_config=DEVELOPMENT_CONFIG,
         )
         # create the main columns
         self.view = Column(expand=True, width=1200)
 
         # create default starter views
-        welcome_view = StartView(
+        welcome_view = WelcomeView(
+            on_confirm=self.confirm,
+            state=self.state,
+        )
+        start_view = StartView(
             on_confirm=self.confirm,
             state=self.state,
         )
@@ -88,7 +95,12 @@ def __init__(self):
             state=self.state,
         )
         # ordered to allow for pop
-        self.default_views = [select_files_view, requirements_view, welcome_view]
+        self.default_views = [
+            select_files_view,
+            requirements_view,
+            start_view,
+            welcome_view,
+        ]
         # create the final success view
         self.final_view = SuccessView(state=self.state)
 
@@ -103,9 +115,6 @@ def confirm(self, e):
         """Confirmation event handler to use in views."""
         # remove all elements from column view
         self.view.controls = []
-        # if a config is loaded, display a progress bar
-        if self.state.config:
-            self.state.increment_progressbar()
         # if there are default views left, display them first
         if self.default_views:
             self.view.controls.append(self.default_views.pop())
@@ -144,8 +153,8 @@ def main(page: Page):
     logger.info(100 * "-")
     # Configure the application base page
     page.title = "OpenAndroidInstaller"
-    page.window_height = 820
-    page.window_width = int(1.77 * page.window_height)
+    page.window_height = 900
+    page.window_width = int(1.5 * page.window_height)
     page.window_top = 100
     page.window_left = 120
     page.scroll = "adaptive"