From 46327ecf1a4c68daddbfc3d3b8804643a54d2448 Mon Sep 17 00:00:00 2001 From: Simon Chan <1330321+yume-chan@users.noreply.github.com> Date: Thu, 28 Mar 2024 15:10:16 +0800 Subject: [PATCH] update docs --- docs/prepare.mdx | 33 ++------ docs/screen-mirror.mdx | 125 ----------------------------- docs/screen-mirror/_category_.yml | 4 + docs/screen-mirror/_pro.module.css | 15 ++++ docs/screen-mirror/_pro.tsx | 12 +++ docs/screen-mirror/camera.mdx | 23 ++++++ docs/screen-mirror/control.mdx | 47 +++++++++++ docs/screen-mirror/faq.mdx | 15 ++++ docs/screen-mirror/index.mdx | 39 +++++++++ docs/screen-mirror/virtual.mdx | 23 ++++++ docs/share-device.mdx | 8 +- docusaurus.config.js | 9 +++ sidebars.js | 2 +- src/css/custom.css | 24 ++++++ 14 files changed, 223 insertions(+), 156 deletions(-) delete mode 100644 docs/screen-mirror.mdx create mode 100644 docs/screen-mirror/_category_.yml create mode 100644 docs/screen-mirror/_pro.module.css create mode 100644 docs/screen-mirror/_pro.tsx create mode 100644 docs/screen-mirror/camera.mdx create mode 100644 docs/screen-mirror/control.mdx create mode 100644 docs/screen-mirror/faq.mdx create mode 100644 docs/screen-mirror/index.mdx create mode 100644 docs/screen-mirror/virtual.mdx diff --git a/docs/prepare.mdx b/docs/prepare.mdx index 16851df..8461469 100644 --- a/docs/prepare.mdx +++ b/docs/prepare.mdx @@ -9,31 +9,10 @@ Android's USB debugging feature is for developers to debug and test their apps, By default, USB debugging option is hidden in Android settings. Depending on the device, the steps to enable it may be slightly different. Here are the common steps: 1. Open Settings app. -2. Find the **Build number** option. On some devices it may have a different name. The following table lists the location of this option on some devices: +2. Find the **Build number** option. On some devices it may have a different name. +3. Tap the above option 7 times. You will see a popup saying "You are now a developer!". +4. Go back to Settings and find **Developer options**. +5. Tap **Developer options** and enable it on the top right corner. +6. Scroll down to find **USB debugging** and enable it. - | Device | Location | - | ------------------------ | ------------------------------------------------------------- | - | Stock Android | Settings > About phone > Build number | - | Samsung OneUI | Settings > About phone > Software information > Build number | - | Xiaomi MIUI 13 or higher | Settings > My device > Detailed info and specs > MIUI version | - | Xiaomi MIUI 12 or lower | Settings > About phone > MIUI version | - | Oppo ColorOS | Settings > About phone > Version > Build number | - | Meizu Flyme | Settings > My device > System version | - | Huawei EMUI | Settings > About phone > Build number | - -1. Tap the above option 7 times. You will see a popup saying "You are now a developer!". -2. Go back to Settings and find **Developer options**. The following table lists the location of this option on some devices: - - | Device | Location | - | -------------------------- | -------------------------------------------------- | - | Stock Android 11 or higher | Settings > System > Developer options | - | Stock Android 9 and 10 | Settings > System > Advanced > Developer options | - | Stock Android 4 or higher | Settings > Developer options | - | Samsung OneUI | Settings > Developer options | - | Xiaomi MIUI | Settings > Additional settings > Developer options | - | Oppo ColorOS | Settings > Additional settings > Developer options | - | Meizu Flyme | Settings > Accessibility > Developer options | - | Huawei EMUI | Settings > System & updates > Developer options | - -1. Tap **Developer options** and enable it on the top right corner. -2. Scroll down to find **USB debugging** and enable it. +Check the [guide](https://app.tangoapp.dev/guide) page for option names on different devices. diff --git a/docs/screen-mirror.mdx b/docs/screen-mirror.mdx deleted file mode 100644 index 3733b54..0000000 --- a/docs/screen-mirror.mdx +++ /dev/null @@ -1,125 +0,0 @@ ---- -sidebar_position: 7 ---- - -# Screen Mirror - -Screen mirror page allows you to see the device screen in real time, and control the device using mouse and keyboard. - -## Video - -### Create virtual display - -On Android 11 or higher, Tango can create a virtual display and mirror it instead. The virtual display can run apps and accept inputs independently from the main display, allowing you to use multiple apps at the same time. - -To mirror a virtual display, scroll to **Video** section, then select **Virtual Extended Display (Experimental)** in **Source** dropdown. You can also customize the resolution and density of the virtual display below. - -### Mirror camera - -On Android 12 or higher, Tango can mirror the camera instead, so you don't need to open the camera app, and there will be no camera UI on the screen. - -By default, Tango will mirror the camera at the highest resolution and frame rate. If the video is laggy or the device is overheating, you can reduce the resolution via **Limit Resolution** option. - -To mirror a camera, scroll to **Video** section, then select **Camera (Experimental)** in **Source** dropdown. You can also choose front or back camera below. - -### Use H.265 codec - -On supported device and browser, use H.265 codec can improve video quality and reduce latency. - -If your device supports H.265 encoding and your browser supports H.265 decoding, the **H.265** option will be available in **Video** section's **Codec** dropdown. - -### Reduce resolution and frame rate - -If your device or computer is not powerful enough, reducing resolution and frame rate can improve performance and prevent device from overheating. - -In **Video** section, check **Limit Resolution** and **Limit FPS** to enable them. The **Max Resolution** option limits the resolution by its longer side while keeping the aspect ratio. For example, if device resolution is 1920x1080, and **Max Resolution** is set to 720, the resolution will be limited to 1280x720. The **Max FPS** option limits the frame rate. - -## Audio - -On Android 11 or higher, Tango can forward audio from the device to your computer. There are two options: - -### Play internal audio on ... - -Forwards internal audio (from apps) to computer. It has three values: - -* **Device**: Disable audio forwarding. Internal audio is played on the device normally. -* **Tango**: Forward internal audio to computer. -* **Both**: Play internal audio on both device and computer. - -Due to Android system restrictions, internal audio forwarding doesn't work if a wired or Bluetooth headset is connected. Also, notifications, alarms, and phone ringtone can't be forwarded and will always play only on the device. - -When choosing **Both**, Tango will play captured audio through notification channel, so the volume is controlled both by the **Media** volume and **Notification** volume. If the sound on device is too quiet, try increasing both volumes. - -### Forward microphone - -Captures device microphone input and play it on computer. - -Internal audio forwarding and microphone forwarding can be enabled at the same time. - -## Control - -### Mouse - -The mouse inputs are translated to touch events on the device. You can use mouse to tap, drag, scroll, and zoom. - -Some apps (like Chrome for Android) can also responds to right clicks and mouse wheel, but most apps are only designed for touch input, so all buttons behave like left click. - -### Keyboard - -The keyboard inputs are sent to the device as is. Except: - -* When in full screen mode, some system-critical keys and shortcuts are handled by local OS and not forwarded to the device, for example: - * **Command + Tab** on macOS: Switch between windows. - * **Command + Q** on macOS: Quit the current app. - * **Windows + L** on Windows: Lock the computer. - * **Control + Alt + Delete** on Windows: Open task manager. -* When not in full screen mode, in additional to the above keys, more keys and shortcuts will be handled by local OS or Web browser, for example: - * **Windows** key on Windows: Open Start menu. - * **Ctrl/Command + W**: Close current tab. - * **Ctrl/Command + N**: Open new browser window. - -The **Windows/Command/Super** key becomes the Search key on Android (also known as the OS key in some ROMs). To see a list of supported shortcuts, press **Search + /** on the device. - -### Simulate physical keyboard - -By default, Tango uses Android's built-in virtual keyboard for sending keyboard inputs. When enabled from the **Control** section, Tango can also simulate a physical keyboard, which has the following advantages: - -* The on-screen virtual keyboard won't show up when you type. This gives you more screen space, but also means you can't type on the device directly. -* The keyboard layout is configurable at **Settings → System → Languages and input → Physical keyboard**. You can choose a layout that matches your physical keyboard. -* It's more compatible with apps that don't respond to virtual keyboard inputs, including some IMEs and games. - -### Touch - -If your computer (or tablet) has a touch screen, you can use it to control the device. The touch inputs are sent to the device as is. Multi-touch is also supported. - -### Game controller - -Game controllers connected to the computer can be used to control the device. The controller inputs are sent to the device as is. It should work in games that support game controllers natively, like Minecraft, and emulators like PPSSPP. - -### App switcher - -On the left side of the screen there is the app switcher. It lists all running apps on the current display (either physical or virtual). You can tap an app to quickly switch to it. - -## Troubleshooting - -### The screen is black on lock screen or Netflix - -For privacy, security or copyright protection reasons, apps can prevent screen to be captured. This will result in a black screen in Tango, and there is nothing we can do. - -While you can't see the screen content, you can still control the device using mouse and keyboard. For example, you can use keyboard to enter the PIN to unlock the device. - -### Can't control XiaoMi devices - -In developer options, XiaoMi devices have a **USB debugging (Security settings)** option. It needs to be enabled for controlling the device. - -## Tricks - -### Show PowerPoint presentation on virtual displays - -Some apps, like Microsoft Office, can display different content on multiple displays. For example, if Tango is mirroring a virtual display, start a PowerPoint presentation will show the presentation at full screen on the virtual display, while the main display shows the presentation controls. - -If the app launcher is showing on the virtual display and covers the presentation, you can tap **Back** button in the command bar to close it. - -### Create multiple virtual displays - -On computers, you can open the device in multiple Tango tabs. Each time screen mirror starts, it creates a new virtual display. Android apps don't support running on multiple virtual displays, but you can run different apps on each of them. diff --git a/docs/screen-mirror/_category_.yml b/docs/screen-mirror/_category_.yml new file mode 100644 index 0000000..e5b8e9b --- /dev/null +++ b/docs/screen-mirror/_category_.yml @@ -0,0 +1,4 @@ +label: Screen Mirror +position: 7 +collapsed: false +collapsible: false diff --git a/docs/screen-mirror/_pro.module.css b/docs/screen-mirror/_pro.module.css new file mode 100644 index 0000000..bf754d8 --- /dev/null +++ b/docs/screen-mirror/_pro.module.css @@ -0,0 +1,15 @@ +.pro { + display: inline-block; + margin-right: 8px; + height: 16px; + line-height: 16px; + margin-left: 4px; + vertical-align: middle; + margin-top: -2px; + padding-left: 5px; + padding-right: 4px; + border-radius: 4px; + font-size: 12px; + background-color: #447cf6; + color: white; +} diff --git a/docs/screen-mirror/_pro.tsx b/docs/screen-mirror/_pro.tsx new file mode 100644 index 0000000..1016e58 --- /dev/null +++ b/docs/screen-mirror/_pro.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import styles from './_pro.module.css' + +export default function Pro() { + return ( +

+ Pro + This feature requires Pro plan or higher. +

+ ); +} diff --git a/docs/screen-mirror/camera.mdx b/docs/screen-mirror/camera.mdx new file mode 100644 index 0000000..68505da --- /dev/null +++ b/docs/screen-mirror/camera.mdx @@ -0,0 +1,23 @@ +--- +sidebar_position: 1 +--- + +# Mirror Cameras + +import Pro from './_pro.tsx'; + + + +On Android 12 and higher, Tango can mirror the camera instead, so you don't need to open the camera app, and there will be no camera UI on the screen. + +To mirror a camera, scroll to **Video** section, then change **Source** to **Camera**. + +When **Camera** is selected in **Source**, the following options are available: + +* **Camera**: Choose between the front and back camera. The list contains the ID, position, and resolution of each camera. Sadly, it's not possible to know the type of the camera (normal, micro, ultra-wide, etc.) so you may need to try each camera to find the one you want. + +Cameras usually have very high resolutions, so they require more hardware resources to capture, encode, and playback. If the video is laggy or the device is overheating, try reducing the resolution or bitrate. + +## Mirror multiple cameras at the same time + +Due to Android system and hardware limitations, only one camera can be mirrored at a time. When a camera is mirrored, other apps can't access the camera, including the camera app itself. If you need to use the camera app, you need to stop mirroring the camera first. diff --git a/docs/screen-mirror/control.mdx b/docs/screen-mirror/control.mdx new file mode 100644 index 0000000..eab304d --- /dev/null +++ b/docs/screen-mirror/control.mdx @@ -0,0 +1,47 @@ +--- +sidebar_position: 3 +--- + +# Control the device + +## Mouse + +The mouse inputs are translated to touch events on the device. You can use mouse to tap, drag, scroll, and zoom. + +Some apps (like Chrome for Android) can also responds to right clicks and mouse wheel, but most apps are only designed for touch input, so all buttons behave like left click. + +## Keyboard + +The keyboard inputs are sent to the device as is. Except: + +* When in full screen mode, some system-critical keys and shortcuts are handled by local OS and not forwarded to the device, for example: + * **Command + Tab** on macOS: Switch between windows. + * **Command + Q** on macOS: Quit the current app. + * **Windows + L** on Windows: Lock the computer. + * **Control + Alt + Delete** on Windows: Open task manager. +* When not in full screen mode, in additional to the above keys, more keys and shortcuts will be handled by local OS or Web browser, for example: + * **Windows** key on Windows: Open Start menu. + * **Ctrl/Command + W**: Close current tab. + * **Ctrl/Command + N**: Open new browser window. + +The **Windows/Command/Super** key becomes the Search key on Android (also known as the OS key in some ROMs). To see a list of supported shortcuts, press **Search + /** on the device. + +## Simulate physical keyboard + +By default, Tango uses Android's built-in virtual keyboard for sending keyboard inputs. When enabled from the **Control** section, Tango can also simulate a physical keyboard, which has the following advantages: + +* The on-screen virtual keyboard won't show up when you type. This gives you more screen space, but also means you can't type on the device directly. +* The keyboard layout is configurable at **Settings → System → Languages and input → Physical keyboard**. You can choose a layout that matches your physical keyboard. +* It's more compatible with apps that don't respond to virtual keyboard inputs, including some IMEs and games. + +## Touch + +If your computer (or tablet) has a touch screen, you can use it to control the device. The touch inputs are sent to the device as is. Multi-touch is also supported. + +## Game controller + +Game controllers connected to the computer can be used to control the device. The controller inputs are sent to the device as is. It should work in games that support game controllers natively, like Minecraft, and emulators like PPSSPP. + +## App switcher + +On the left side of the screen there is the app switcher. It lists all running apps on the current display (either physical or virtual). You can tap an app to quickly switch to it. diff --git a/docs/screen-mirror/faq.mdx b/docs/screen-mirror/faq.mdx new file mode 100644 index 0000000..2d680bb --- /dev/null +++ b/docs/screen-mirror/faq.mdx @@ -0,0 +1,15 @@ +--- +sidebar_position: 4 +--- + +# Troubleshooting + +## The screen is black on lock screen, Netflix, or other media apps + +For privacy, security or copyright protection reasons, apps can prevent its content to be captured. This will result in a black screen in Tango, and there is nothing we can do. + +While you can't see the screen content, you can still control the device using mouse and keyboard. For example, you can use keyboard to enter the PIN to unlock the device. + +## Can't control XiaoMi devices + +In developer options, XiaoMi devices have a **USB debugging (Security settings)** option. It needs to be enabled for controlling the device. diff --git a/docs/screen-mirror/index.mdx b/docs/screen-mirror/index.mdx new file mode 100644 index 0000000..cfe0534 --- /dev/null +++ b/docs/screen-mirror/index.mdx @@ -0,0 +1,39 @@ +--- +sidebar_position: 0 +--- + +# Screen Mirror + +Screen mirror page allows you to see the device screen in real time, and control the device using mouse and keyboard. + +Check the left navigation for more information on how to control the device, create virtual displays, mirror cameras, and troubleshoot common issues. + +## Video + +* Source: Choose the source of the video. It can be the device screen, a [virtual display](./virtual.mdx), or a [camera](./camera.mdx). Depending on the source, different options are available. +* Codec: On supported device and browser, use H.265 codec can improve video quality and reduce latency. If the device or the browser doesn't support H.265, the option will be disabled. +* Encoder: Choose the video encoder. **Default** will automatically choose the best encoder based on the device and browser. Some devices may ship with a buggy encoder, in which case you can try another one. +* Bitrate: The video bitrate in bps. Higher bitrate means better video quality, but also higher resource usage and latency. If the video is laggy, try reducing the bitrate. +* Resolution: The video resolution. Higher resolution means better video quality, but also higher resource usage and latency. If the video is laggy, try reducing the resolution. + +## Audio + +On Android 11 or higher, Tango can forward audio from the device to your computer. There are two options: + +### Play internal audio on ... + +Forwards internal audio (from apps) to computer. It has three values: + +* **Device**: Disable audio forwarding. Internal audio is played on the device normally. +* **Tango**: Forward internal audio to computer. +* **Both**: Play internal audio on both device and computer. + +Due to Android system restrictions, internal audio forwarding doesn't work when a wired or Bluetooth headset is connected. Also, notifications, alarms, and phone ringtone can't be forwarded and will always play only on the device. + +When choosing **Both**, Tango will play captured audio through notification channel, so the volume is controlled both by the **Media** volume and **Notification** volume. If the sound on device is too quiet, try increasing both volumes. + +### Forward microphone + +Captures device microphone input and play it on computer. + +Internal audio forwarding and microphone forwarding can be enabled at the same time. diff --git a/docs/screen-mirror/virtual.mdx b/docs/screen-mirror/virtual.mdx new file mode 100644 index 0000000..29a69a1 --- /dev/null +++ b/docs/screen-mirror/virtual.mdx @@ -0,0 +1,23 @@ +--- +sidebar_position: 2 +--- + +# Create and mirror virtual display + +import Pro from './_pro.tsx'; + + + +On Android 11 and higher, Tango can create and mirror a virtual display. Virtual displays are similar to connecting multiple displays to the device. It can run apps and accept inputs independently from the main display, allowing you to use multiple apps at the same time. + +To mirror a virtual display, scroll to **Video** section, then change **Source** to **Virtual**. You can also customize the resolution and density of the virtual display below. + +## Show PowerPoint presentation on virtual displays + +Some apps, like Microsoft Office, can display different content on multiple displays. For example, if Tango is mirroring a virtual display, start a PowerPoint presentation will show the presentation at full screen on the virtual display, while the main display shows the presentation controls. + +If the app launcher is showing on the virtual display and covers the presentation, you can tap **Back** button in the command bar to close it. + +## Create multiple virtual displays + +On Desktop platforms, by opening multiple tabs of Tango, multiple virtual displays can be created and mirrored in each tab. Each virtual display is independent and can run different apps. Note that Android apps can't run on multiple virtual displays, but you can run different apps on each of them. diff --git a/docs/share-device.mdx b/docs/share-device.mdx index ecb383f..1b73c7b 100644 --- a/docs/share-device.mdx +++ b/docs/share-device.mdx @@ -8,11 +8,13 @@ The share device feature allows you to access the device from another computer o ## Start sharing -To share the device, click the **Share** button in the top right corner of the device page. A dialog will appear with some introductions and a **Start** button. Click the **Start** button will generate a link that you can share with others. +To share the device, click the button in the top right corner of the device page. A dialog will appear with some introductions and a **Start** button. -In the whole process, the device must remain plugged in, and Tango must be kept open. If you close Tango or unplug the device, the sharing will be terminated. +Click the **Start** button to generate a link that you can share with others. -To stop, click the **Stop** button in the share dialog. This will terminate the sharing session, and the link will no longer work. +In the whole process, the device must remain plugged in, and Tango must be kept open. If you close Tango or unplug the device, the sharing session will be terminated. + +To stop, click the **Stop** button in the share dialog. It will disconnect all remote browsers that are using this sharing link, and the link will be invalidated. You can start a new sharing session by clicking the **Start** button again. ## Use the link diff --git a/docusaurus.config.js b/docusaurus.config.js index 10eb4b1..517e42d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -270,6 +270,15 @@ const config = { }, ], }, + colorMode: { + defaultMode: "light", + disableSwitch: false, + respectPrefersColorScheme: true, + }, + announcementBar: { + id: 'announce-1', + content: '📢 Join our Discord server to check latest announcements and roadmap!', + }, footer: { style: 'dark', links: [ diff --git a/sidebars.js b/sidebars.js index 9ab54c2..8f1e3da 100644 --- a/sidebars.js +++ b/sidebars.js @@ -14,7 +14,7 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], + tutorialSidebar: [{ type: "autogenerated", dirName: "." }], // But you can create a sidebar manually /* diff --git a/src/css/custom.css b/src/css/custom.css index 79b800f..8b40dee 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -28,3 +28,27 @@ --ifm-color-primary-lightest: #97b6fa; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +div[class^='announcementBar_'] { + font-size: 20px; + + /* + --site-announcement-bar-stripe-color1: hsl( + var(--site-primary-hue-saturation) 85% + ); + --site-announcement-bar-stripe-color2: hsl( + var(--site-primary-hue-saturation) 95% + ); + */ + --site-announcement-bar-stripe-color1: #e8d7ff; + --site-announcement-bar-stripe-color2: #ffe9d1; + + background: repeating-linear-gradient( + 35deg, + var(--site-announcement-bar-stripe-color1), + var(--site-announcement-bar-stripe-color1) 20px, + var(--site-announcement-bar-stripe-color2) 10px, + var(--site-announcement-bar-stripe-color2) 40px + ); + font-weight: bold; +}