yo1995 / mapsappdevsummit2021 Goto Github PK

Why bother using/adapting Dark Mode?

• Apple submission criteria: https://developer.apple.com/ios/submit/#main:~:text=Dark%20Mode,-Dark
• Follow Apples HIG
• make the map application look better at night
  No need to be specific, Dark Mode is not night mode; however do research on other apps
• impact on battery
• specific use case that requires low-light display.

Please see more in the original issue: https://devtopia.esri.com/runtime/common-samples/issues/2505#issuecomment-2590490

We need to write a short script for 1 or 2 slides, that covers the reasons to adapt Dark Mode for a mapping app.

We need to write a script for 1 slide that covers the main elements to consider for adapting DM for an app.

Discuss how to upgrade existing project with storyboard to use semantic Named Colors, and the "gotchas" that a developer should be extra cautious about.

• Hardcoded colors
• the keyword "customColorSpace" in storyboard
• Semantic colors
• system colors
• named colors

Timing for the demo

• 5 mins for initial slides
• 0.5mins/30 secs for lead-in to the demos
• 3 mins for Runtime Support demo
  • 0.5 mins for callout and attribution
  • 1 min for popup
  • 1.5 mins for OAuth sign in page
• 0.5 mins summary
  • Mention support starts from U10/U11
• 3 ~ 5 mins for Basemap swapping demo
  • Show in a slide that from U10 we have new styles, 4 pairs of basemaps that can be swapped
  • Code showing simple usage
  • Code showing all styles
• 0.5 mins summary
• 5 mins for Color assets and named color demo
  • Search for custom color
  • Create color set
  • Add light color with original RGB values
  • Add dark color with your choice
  • Replace the custom RGB initializer with new named color
• 0.5 mins summary
  • Can also be used in Storyboard, later will show how-to
  • Consult your design team to find the organization-wide branding guideline, for consistent color usage
  • Semantic naming pattern, to manage all named color easier afterwards
• 8 mins for real Maps app demo
  • Reveal issues by running the app in dark mode: launchscreen, login background, buttons, icons, text
  • 2 mins for UIControl
  • 4 mins for images and icons
  • 1.5 mins for using color assets and using fixed color in certain UI elements
  • Show the key features of the app in Dark Mode at last
• 0.5 mins to sum up
• 1.5 mins to wrap up the Demo theatre

We'll use these timestamps as a rough guideline when we do the draft screen recordings

Other considerations

• We don't need to introduce the real maps app until the last demo
  So that the whole storyline is less interrupted
• We may do "voiceover" recordings
  Do the screen recordings first, and add the voice for scripts later, to avoid hastily moving back and forth
• We may create a few "patch" branches
  So that the only change to make on the branch is to fix the inconsistent element in the app; after the change is made, the whole app run perfectly in Dark Mode.

Plans before presenting to Divesh

Viv will start to record the slides, and try with the first demo for callouts/popups/etc.

Ting will

• Wrap up the changes in code, so that the app works great in Dark Mode
• Write the scripts
• Record operations in Xcode
• Do the voice over for screen recordings

Discuss how to use iOS 13+ trait collection APIs to detect display mode changes. E.g.

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    switch traitCollection.userInterfaceStyle {
    case .light:
        mapView.map?.basemap = AGSBasemap(style: .arcGISLightGray)
    case .dark:
        mapView.map?.basemap = AGSBasemap(style: .arcGISDarkGray)
    default:
        return
    }
}

so that the app can use the new basemap styles. (.arcGISDark/.arcGISLight)

Discuss the built-in support for Dark Mode in ArcGIS Runtime SDK (ArcGIS framework).

• Callout
• Popup
• Attribution bar
• OAuth sign in page
• Set the background of a mapView to default (transparent)

We want to summarize all the Dark Mode related resources and links into a single document, and put a list of bullets in our slide or a link to the document.

Please see more in the original issue: https://devtopia.esri.com/runtime/common-samples/issues/2505#issuecomment-2590490

We need to write a short script for 1 or 2 slides, that covers the reasons to adapt Dark Mode for a mapping app.

We can follow the instructions in the Recording Esri Sessions for Virtual Conferences with Camtasia document and try Camtasia.

We can also try the macOS built-in screen capturing tool.

And we decide which one is easier to use.

• With the device/screen size we want
• With the updated status bar: https://www.jessesquires.com/blog/2019/09/26/overriding-status-bar-settings-ios-simulator/
• Will focus element clearly noticeable
• Light mode for Xcode
• Nav bar added to pastebin project

The app we are using to demo is at https://github.com/Esri/maps-app-ios

• Get the most up-to-date version and push to this repo
• Setup SwiftLint to clean up coding style issues
• Use branches to store different portions of Dark Mode changes
• Merge all Dark Mode changes to a single branch for final demonstration

• Use Esri virtual backgrounds provided in Teams. (Scroll to the bottom to view them)
• Look into the camera occasionally to engage with audience
• Record intro-resources (slides 1-7) in one take to help with fluidness
• We should record all slideshows and edit in demos separately.
• Intro cue: Viv will say "I'm Vivian" Ting will introduce himself after
• End cue: "Thank you for joining us today. We hope this helped you navigate to the dark side." After hearing this, smile for about 5 sec and continue recording. This will act as a buffer and help when we edit the video.

#19

Present to Divesh

• ❌ Ask about his opinions on using Apple/Google as examples
• ✅ Ask about the overall structure of the presentation
• Play the draft screen recordings, but voice over in real time, so that we can practice and get feedback
• ❌ Ask if we can use Dark IDE theme in our presentation, as we are talking about Dark Mode
• ❌ Should we use arcGISHillshadeDark?

We need an empty project where we can paste snippets into it and run as a standalone app, to better demonstrate certain Dark Mode functionality. Just like what we used for snapples.

Later when we record the demo theatre, we may use the same project to show code in a larger font, without showing irrelevant code.

• API key and License key set, so that there are no watermarks
• Has a leading navigation controller, so that we can add toolbar and buttons to it
• Constraints correctly set, so that the views display correctly on either orientation
• Keep it minimal, so that it is easier to copy and paste
• Add linter and ArcGIS framework dependency
• Make the project name related to our demo theatre.
• Show navigation bar so that people know what is current system appearance

We want to do the research on other map apps such as Google, Apple, Waze

• What elements should be Dark Mode adaptive
• How do they handle basemap
• Capture screenshots, screen recordings and store in OneDrive

Slide: Why Dark Mode

• Do some research on: Does dark mode work better in low light/extremely bright light situation?

  • low light?
  • direct sunlight does it work better? because light mode is all washed out, a bit better contrast.

Slide: resources

1. Ask Amy if we'll have the slides accessible
2. If not, we'll create a gist, either in Esri's account/repo or in our personal GitHub Gist: https://gist.github.com/

• how do people access the links? Amy said the slides will be available to download
  • does it apply to demo theatre
  • if not, we use a gist to share all urls

Slide: How to adapt dark mode

We'll follow this order:

1. Simple UI you already get and no need to adapt
   • Runtime has good support for popup, attribution bar, callout - we already have done a lot of stuff for you ❗
   • Runtime U10 has good basemaps
2. what you need to slightly tweak
   • Such as UIView, buttons, images, search bar...
3. what you will learn in the following demos

• What is popup in the first line? AGSPopupController it doesn't need to be changed
• Focus on adapting
• Many of the runtime views already support it, sub bullets - we do a lot of stuff already for you ❗
• Say runtime has good basemaps
• Rearrange the bullets

Describe the usage of Color Assets for Dark Mode adaption

Refer to #22

The key takeaways are

• Explicitly say we use the Esri maps app for demo, and put a GitHub slug to it
• Before adaptation, give a preview and say it doesn't look good
• Remove the indicator demo, it doesn't convey the message
• Maybe consider follow the user eye flow for the app. They'll first login, then search, then swipe and see the results
• When first change a color in storyboard, talk a bit more about the preview feature