Hero notes (#36)

* Copied list detail framework

Copied framework from list/detail sample

* Refaactor package and app name

* Update launcher icon

* Add light/dark themes

* Update dark theme colors

* Added variable width drawing and erasing

Now supports constant pressure feedback and erasing

* Fixed finger drawing

Fixed an issue with the stroke instantiation when using finger to draw

* linting

newlines newlines newlines

* Fix toolbar and add floating action button

* Added basic saving

saved files do not persist yet

* Improved serialization for drawings

drawings can now be saved and redrawn

* Added auto saving and loading

any drawing changes are saved and loaded on fragment lifetime changes

* Linting

Passes ktlint, still has some lint issues that may be better for you to fix

* Note addition

Create Note model and connect floating action button to the addition of notes to the list

* Modify note fragment to have modes

* Connect note model to UI

* Worked on file persistence

notes are associated with unique items in a list

* Very basic startup loading

List fragment reads some metadata and loads appropriate notes

* Improved single tab note saving

Added coordination between notes and directory entries by implementing inodes

* Fixed formatting

Renamed some files and methods to account for the addition of inodes

* Simplified INode

set default values for inode

* Remove unused sample files

Any movie-related fragments/layouts

* Refactor file names

* Update icon

* Extract current toolbars to separate xml files

* Add navigation and actions to note fragment toolbar

* Add primary and contextual toolbars to note list fragment

* Linting

* Refactor NoteFragment to NoteDetailFragment

* Convert property to getter

* added deletion

implemented backend code for deleting files

* hooked up deletion to front end

can perform deletion on list and detail fragments

* linting

fixed formatting issues

* Add getting started screen for first span

* Implement fragment behavior after spanning changes

* Address PR feedback

* started categories backend

changing DataProvider structure to support categories

* Category switching

can now switch between categories

* Category options added

categories can be renamed, added, and deleted

* Resolved bugs with persistence

* linting

* Code cleanup

* Add pen mode to toolbar

* Modify selection mode code

Fix icon color issue and clean up methods

* Linting

* Cleanup

* fixed despan deletion bug

* updated dependencies

* Add twonote to CI process

* Small UI fixes

* Add pen tools buttons

* Add unlimited pen colors

* Remove unused code

* Show custom color

* Linting caught by our functioning CI

* Working drag and drop

fixed permission issues with reading files and imported code from source editor

* Fixed drag and drop permissions

can now import generic txt file from any app

* fullscreen drag and drop

txt file can be dragged on any part of the screen

* Share note as image

* Code cleanup

* Fix custom color crash

When empty string was entered, the parseColor threw a different kind of exception

* Add more comments

* Add extended view when rotated/spanned

* Reorganize updateINode method

* Update MainActivity to use fragment handler

* Linting

* Fix fragment switching/logic

* Fix category switching bug

* xml file code clean up!

Adding copyright (because I always forget to add them) and removing unused attributes

* Added image drop target

* Image repositioning

Image movement within app

* Image resizing and repositioning

drag image on long click, resize with pinch

* Added picture mode to toolbar

can switch between picture, ink, and text modes

* Switched toolbar icons

The three modes have their own dedicated menu items now

* Make newer strokes appear on top

* Resize drawings when rotated to extended view

* Update pen tools menu with highlight and new icons

* Fix rotation bugs

* Move constants to Defines

* Add eraser and refine pen tools

* Linting

* saving rough draft

* Image saving

images are converted to bitmap strings and saved in the respective note

* cleanup

* extra comments

* Window switch

switch to appropriate window on drag event

* Fix linting issue

* Remove unimplemented menu items

* Add rotation handling to images

* Implement image deletion

* Fix rotation and deletion bugs

* Address PR comments

* Update TwoNote readme

* Update existing readmes for consistency

* Update drag-drop link

* Update readme

* Updated references

* wip

* Uncapitalize app pattern names

* Reorganize feature list

* Add screenshots to readme

* Add categories/highlight screenshot

* Address PR comments

* removed unnecessary viewmodel

DrawViewModel was not critical to code

* reformatted handlers

* fixed merge artifacts

* removed unnecessary viewmodel

DrawViewModel was not critical to code

* reformatted handlers

* resolved duplicates on merge

* cleaned up fragment focused code

* Cleaned up code related to pen

* cleaned up general app code

* removed default note names

* fixed issues with text newlines

* Reorganize folder structure

* Add copyright to source files

* Clean up xml files

* Clean up NoteDetailFragment

Reorganize methods, add comments, remove unused attributes

* Clean up MainActivity

* Clean up gradle files

* Clean up handlers

* Start NoteListFragment commenting

* added method headers for utils/fragments

* Added comments for models

* Additional code cleanup

* Added file headers

* fixed merge issues

* linting

* Update readme for samples browser compatibility

Co-authored-by: Kristen Halper <t-krhalp@microsoft.com>
Co-authored-by: Kristen Halper <khalp@vt.edu>

Author: 3 people

.github/workflows/app-samples-CI.yml

@@ -5,7 +5,7 @@ name: App samples CI
 
 on:
   push:
-    branches: [ main, hero_notes, add-ci ]
+    branches: [ main, hero_notes ]
   pull_request:
     branches: [ main, hero_notes ]
   workflow_dispatch:
@@ -109,4 +109,33 @@ jobs:
       run: |
         cd Widget
         ./gradlew ktlint
+    - name: Cache TwoNote Gradle packages
+      uses: actions/cache@v2
+      with:
+        path: TwoNote/.gradle/caches
+        key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle') }}
+        restore-keys: ${{ runner.os }}-gradle
+    - name: Grant execute permission for TwoNote gradlew
+      run: chmod +x TwoNote/gradlew
+    - name: clean TwoNote
+      run: |
+        cd TwoNote
+        ./gradlew clean
+    - name: assemble debug TwoNote
+      run: |
+        cd TwoNote
+        ./gradlew assembleDebug
+    - name: unit tests TwoNote
+      run: |
+        cd TwoNote
+        ./gradlew testDebugUnitTest
+    - name: lint TwoNote
+      run: |
+        cd TwoNote
+        ./gradlew lintDebug
+    - name: ktlint TwoNote
+      run: |
+        cd TwoNote
+        ./gradlew ktlint
+    
 

PhotoEditor/README.md

@@ -1,62 +1,49 @@
 ---
 page_type: sample
 name: "Surface Duo - PhotoEditor"
-description: "Uses the Companion Pane dual-screen pattern and drag/drop features in a photo editing app for the Surface Duo."
+description: "Uses the companion pane dual-screen pattern and drag and drop features in a photo editing app for the Surface Duo."
 languages:
 - kotlin
 products:
 - surface-duo
 urlFragment: photo-editor
 ---
 
-# Photo Editor
+# PhotoEditor
 
 This Kotlin application implements a simple photo editor that lets users select, edit, and save images. Screenshots of the application and its behavior are available [here](screenshots/).
 
-## Prerequisites
+## Getting Started
 
-* Android Studio
-* Surface Duo emulator
+To learn how to load apps on the Surface Duo emulator, see the [documentation](https://docs.microsoft.com/dual-screen/android), and follow [the blog](https://devblogs.microsoft.com/surface-duo).
 
-This application also uses a beta release of the [Constraint Layout](https://developer.android.com/jetpack/androidx/releases/constraintlayout) package to facilitate image editing with the ImageFilterView class, and all button icons were downloaded from the [Android Material Design](https://material.io/resources/icons/?style=baseline) website.
-
-## Running the sample
-
-* Start Android Studio.
-* Open the PhotoEditor project: **File > Open**, navigate to file location of the  the **PhotoEditor** folder, then click **OK**.
-* Build your project: **Build > Make Project** or **Ctrl+F9**
-* Start the Surface Duo emulator
-* Select **"Microsoft SurfaceDuoEmulator API 29"** or **"Virtual Device"** from the list of Running Devices.
-* Run the project on the emulator: **Run > Run 'app'**, **Ctrl+F2**, or click the green play button.
-
-## Key concepts
+> [!NOTE]
+> This application uses a beta release of the [Constraint Layout library](https://developer.android.com/jetpack/androidx/releases/constraintlayout) to facilitate image editing with the [ImageFilterView](https://developer.android.com/reference/androidx/constraintlayout/utils/widget/ImageFilterView) class.
 
-### App features
+## Features
 
-* Select: click on current image to open photo gallery or drag and drop image file
-* Edit: click on buttons and adjust sliders to modify image properties
-  - Buttons: rotate left and right
-  - Sliders: saturation, brightness, warmth
-* Save: click save button to download edited image to device (see below)
+This app supports three main actions: selection, editing, and saving. To select a photo, click on the current image to open the device's photo gallery. To modify image properties, use the buttons and sliders. Finally, to save the changes in a new photo, click the save button.
 
 ![PhotoEditor app on left screen with edited image and photo gallery on right screen displaying the same edited image after it was saved](screenshots/save_feature.png)
 
 ### Companion Pane
 
-This sample shows how the [Companion Pane](https://docs.microsoft.com/dual-screen/introduction#companion-pane) dual-screen app pattern can be used to make more tools and controls available to users when the app is spanned. When in single-screen mode, the app only shows users three controls: the slider, the rotation buttons, and the save button. In order to modify all possible properties with the slider, the user must interact with the dropdown menu. This ensures that the chosen image is large enough on the screen to inspect any edits.
+This sample shows how the [companion pane](https://docs.microsoft.com/dual-screen/introduction#companion-pane) dual-screen app pattern can be used to make more tools and controls available to users when the app is spanned. When in single-screen mode, the app only shows users three controls: the slider, the rotation buttons, and the save button. In order to modify all possible properties with the slider, the user must interact with the dropdown menu. This ensures that the chosen image is large enough on the screen to inspect any edits.
 
 When switched to dual-screen mode, however, the entire left screen can be dedicated to image display. This frees up the right screen to display more editing controls. As a result, a dropdown menu is no longer needed and all three slider controls can be displayed.
 
-### Drag and drop
+### Drag and Drop
+
+This sample also demonstrates how drag and drop features can simplify file transfer across screens and between applications. Instead of clicking to open the photo gallery and select a new photo, users can simply drag the desired image file into the app and drop it over the currently displayed image, as shown below. For more information, check out this [drag and drop sample](https://github.com/microsoft/surface-duo-sdk-samples-kotlin/tree/master/DragAndDrop).
 
-This sample also demonstrates how drag and drop features can simplify file transfer across screens and between applications. For more information on drag and drop, check out [this sample](https://github.com/microsoft/surface-duo-sdk-samples-kotlin/tree/master/draganddrop).
+![Drag and drop example between Files app and PhotoEditor](screenshots/drag_drop_import.png)
 
-### Dual screen layout
+### Dual-screen Layout
 
-The SurfaceDuoLayout element of the [DualScreen-Layout](https://docs.microsoft.com/dual-screen/android/api-reference/dualscreen-layout?tabs=java) package is the key to developing applications on the Surface Duo. This layout provides different attributes for single-screen and dual-screen views, and example usage can be seen in [activity_main.xml](app/src/main/res/layout/activity_main.xml).
+The SurfaceDuoLayout element of the [dual-screen layout](https://docs.microsoft.com/dual-screen/android/api-reference/dualscreen-library/) package is the key to developing applications on the Surface Duo. This layout provides different attributes for single-screen and dual-screen views, and example usage can be seen in [activity_main.xml](app/src/main/res/layout/activity_main.xml).
 
 > [!NOTE]
-> When defining landscape and portrait orientations for the dual-screen view, the two screens are treated as one. That means the dual-screen landscape orientation is when the single-screen orientation would be considered portrait (shown below) and vice versa. For more tips, check out [this blog post](https://devblogs.microsoft.com/surface-duo/introducing-dual-screen-layouts-android/).
+> When defining landscape and portrait xml resources in Android Studio for the dual-screen view, the two screens are treated as one. That means the dual-screen landscape orientation is when the single-screen orientation would be considered portrait (shown below) and vice versa. For more tips, check out [this blog post](https://devblogs.microsoft.com/surface-duo/introducing-dual-screen-layouts-android/).
 
 ![Dual-screen landscape view](screenshots/dual_screen_landscape.png)
 
@@ -73,3 +60,15 @@ provided by the bot. You will only need to do this once across all repos using o
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## License
+
+Copyright (c) Microsoft Corporation.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

PhotoEditor/app/src/main/java/com/microsoft/device/display/samples/photoeditor/MainActivity.kt

@@ -6,6 +6,7 @@
 
 package com.microsoft.device.display.samples.photoeditor
 
+import android.app.Activity
 import android.content.ClipData
 import android.content.ContentResolver
 import android.content.ContentValues
@@ -94,7 +95,7 @@ class MainActivity : AppCompatActivity() {
         super.onActivityResult(requestCode, resultCode, data)
 
         // Select image to edit from photo gallery
-        if (requestCode == SELECT_IMAGE && data?.data != null) {
+        if (requestCode == SELECT_IMAGE && resultCode == Activity.RESULT_OK && data?.data != null) {
             val uri: Uri = data.data!!
             val image = findViewById<ImageFilterView>(R.id.image)
             image.setImageBitmap(BitmapFactory.decodeStream(contentResolver.openInputStream(uri)))

README.md

@@ -8,6 +8,24 @@ This repo contains sample Android applications for Microsoft Surface Duo.
 
 To learn how to load apps on the Surface Duo emulator, see the [documentation](https://docs.microsoft.com/dual-screen/android), and follow [the blog](https://devblogs.microsoft.com/surface-duo).
 
+## Contents
+
+### [PhotoEditor](https://github.com/microsoft/surface-duo-app-samples/tree/main/PhotoEditor)
+
+Includes examples of the [companion pane](https://docs.microsoft.com/dual-screen/introduction#dual-view) app pattern, drag and drop import for images, and [UI testing](https://docs.microsoft.com/dual-screen/android/espresso-ui-tests).
+
+### [SourceEditor](https://github.com/microsoft/surface-duo-app-samples/tree/main/SourceEditor)
+
+Includes examples of the [dual view](https://docs.microsoft.com/dual-screen/introduction#dual-view) app pattern, drag and drop import for text, and [UI testing](https://docs.microsoft.com/dual-screen/android/espresso-ui-tests).
+
+### [TwoNote](https://github.com/microsoft/surface-duo-app-samples/tree/main/TwoNote)
+
+Includes examples of the [list-detail](https://docs.microsoft.com/dual-screen/introduction#master-detail) and [extended canvas](https://docs.microsoft.com/dual-screen/introduction#extended-canvas) app patterns, drag and drop import for text and images, and pen events.
+
+### [Widget](https://github.com/microsoft/surface-duo-app-samples/tree/main/Widget)
+
+Includes example of how to create widgets that display RSS feed data.
+
 ## Related links
 
 - [SDK samples (Java)](https://github.com/microsoft/surface-duo-sdk-samples)
@@ -31,3 +49,15 @@ provided by the bot. You will only need to do this once across all repos using o
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## License
+
+Copyright (c) Microsoft Corporation.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

SourceEditor/README.md

@@ -1,25 +1,21 @@
 ---
 page_type: sample
 name: "Surface Duo - SourceEditor"
-description: "Uses the Dual View layout pattern and external storage capabilities to create a source-editing app for the Surface Duo."
+description: "Uses the dual view layout pattern and external storage capabilities to create a source-editing app for the Surface Duo."
 languages:
 - kotlin
 products:
 - surface-duo
 urlFragment: source-editor
 ---
 
-# Introduction
+# SourceEditor
 
-This sample contains a Kotlin application designed for Surface Duo. The application is an HTML
- editor that enables real-time rendering of formatted source code. Making use of the
- [Dual View](https://docs.microsoft.com/dual-screen/introduction#dual-view)
- app pattern, users are able to edit and preview any changes simultaneously without switching
- windows.
+This sample contains a Kotlin application designed for Surface Duo. The application is an HTML editor that enables real-time rendering of formatted source code. Making use of the [dual view](https://docs.microsoft.com/dual-screen/introduction#dual-view) app pattern, users are able to edit and preview any changes simultaneously without switching windows.
 
 ## Getting Started
 
-To learn how to load your app on to emulator, and to use it, see the full documentation here: [https://docs.microsoft.com/dual-screen](https://docs.microsoft.com/dual-screen)
+To learn how to load apps on the Surface Duo emulator, see the [documentation](https://docs.microsoft.com/dual-screen/android), and follow [the blog](https://devblogs.microsoft.com/surface-duo).
 
 ## Features
 

SourceEditor/app/src/main/java/com/microsoft/device/display/samples/sourceeditor/MainActivity.kt

@@ -60,7 +60,7 @@ class MainActivity : AppCompatActivity() {
         // request to load file contents has been made, process the file's contents
         else if (requestCode == FileHandler.PICK_TXT_FILE && resultCode == Activity.RESULT_OK) {
             resultData?.data?.also { uri ->
-                fileHandler.processFileData(uri)
+                fileHandler.processFileData(uri, null)
             }
         }
     }

SourceEditor/app/src/main/java/com/microsoft/device/display/samples/sourceeditor/includes/DragHandler.kt

@@ -44,6 +44,6 @@ class DragHandler(activity: Activity, webVM: WebViewModel, contentResolver: Cont
     private fun handleTextDrop(event: DragEvent) {
         val item = event.clipData.getItemAt(0)
         val uri = item.uri
-        fileHandler.processFileData(uri)
+        fileHandler.processFileData(uri, event)
     }
 }

SourceEditor/app/src/main/java/com/microsoft/device/display/samples/sourceeditor/includes/FileHandler.kt

@@ -12,6 +12,8 @@ import android.content.ContentResolver
 import android.content.Intent
 import android.net.Uri
 import android.provider.DocumentsContract
+import android.view.DragEvent
+import androidx.core.app.ActivityCompat
 import androidx.core.app.ActivityCompat.startActivityForResult
 import com.microsoft.device.display.samples.sourceeditor.viewmodel.WebViewModel
 import java.io.BufferedReader
@@ -27,7 +29,6 @@ class FileHandler(
     private val webVM: WebViewModel,
     private val contentResolver: ContentResolver
 ) {
-
     companion object {
         // intent request codes
         const val CREATE_FILE = 1
@@ -62,18 +63,21 @@ class FileHandler(
 
     // read text from file specified in uri path
     @Throws(IOException::class)
-    private fun readTextFromUri(uri: Uri): String {
+    fun processFileData(uri: Uri, event: DragEvent?) {
         val stringBuilder = StringBuilder()
+
+        event?.let { ActivityCompat.requestDragAndDropPermissions(activity, event) }
         contentResolver.openInputStream(uri)?.use { inputStream ->
             BufferedReader(InputStreamReader(inputStream)).use { reader ->
                 var line: String? = reader.readLine()
                 while (line != null) {
                     stringBuilder.append(line)
+                    stringBuilder.append(System.getProperty("line.separator"))
                     line = reader.readLine()
                 }
             }
         }
-        return stringBuilder.toString()
+        return webVM.setText(stringBuilder.toString())
     }
 
     // overwrite text from file specified in uri path
@@ -94,23 +98,4 @@ class FileHandler(
             e.printStackTrace()
         }
     }
-
-    // format text for readability (newline chars are dropped in saving/grabbing process)
-    fun processFileData(uri: Uri) {
-        val str: String = readTextFromUri(uri)
-
-        val builder = StringBuilder()
-        var initHeader = true
-
-        val lines = str.split("<")
-        lines.forEach {
-            if (initHeader) {
-                builder.append(it)
-                initHeader = false
-            } else {
-                builder.append("<" + it + System.getProperty("line.separator"))
-            }
-        }
-        webVM.setText(builder.toString())
-    }
 }

TwoNote/.editorconfig

@@ -0,0 +1,6 @@
+[*.{kt, kts}]
+#---- Ktlint rules ----
+# Comma-separated list of rules to disable (Since 0.34.0)
+# Note that rules in any ruleset other than the standard ruleset will need to be prefixed
+# by the ruleset identifier.
+disabled_rules = final-newline

TwoNote/.gitignore

@@ -0,0 +1,45 @@
+### Android template
+# Built application files
+*.apk
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore