1 2--- 3title: "Skia Viewer" 4linkTitle: "Skia Viewer" 5 6--- 7 8The Skia Viewer displays a series of slides that exhibit specific features of Skia, including the Skia GMs and programmed samples that allow interaction. In addition, the Viewer is used to debug and understand different parts of the Skia system: 9 10* Observe rendering performance - placing the Viewer in stats mode displays average frame times. 11* Try different rendering methods - it's possible to cycle among the three rendering methods: raster, OpenGL and Vulkan (on supported platforms). You can use this with stats mode to see the effect that the different rendering methods have on drawing performance. 12* Display and manipulate your own pictures. 13 14Some slides require resources stored outside the program. These resources are stored in the `<skia-path>/resources` directory. 15 16Linux, Macintosh and Windows 17---------------------------- 18 19The Viewer can be built using the regular GN build process, e.g. 20 21 bin/gn gen out/Release --args='is_debug=false' 22 ninja -C out/Release viewer 23 24To load resources in the desktop Viewers, use the `--resourcePath` option: 25 26 <skia-path>/out/Release/viewer --resourcePath <skia-path>/resources 27 28Similarly, `--skps <skp-file-path>` will load any `.skp` files in that directory 29for display within the Viewer. 30 31Other useful command-line options: using `--match <pattern>` will load only SKPs or slides 32matching that name; using `--slide <name>` will launch at that slide; and you can start up 33with a particular rendering method by using `--backend`, i.e., `--backend sw`, `--backend gl`, 34`--backend vk`, or `--backend mtl`. 35 36The desktop Viewers are controlled using the keyboard and mouse: left (←) and right 37(→) arrows to move from slide to slide; up (↑) and down (↓) arrows to 38zoom in and out; clicking and dragging will translate. Other display options and a slide 39picker can be found in the Tools UI, which can be toggled by hitting the spacebar. 40 41Key | Action 42-------|------------- 43← → | Move between the slides 44↑ ↓ | Zoom in / out 45d | Change render methods among raster, OpenGL and Vulkan 46s | Display rendering times and graph 47Space | Toggle display of Tools UI 48 49Android 50------- 51 52To build Viewer as an Android App, first follow the 53[Android build instructions](/docs/user/build#android) to set up the 54Android NDK and a ninja out directory. In addition, you will need the 55[Android SDK](https://developer.android.com/studio/#command-tools) installed and your 56`ANDROID_HOME` environment variable set. 57 58 mkdir ~/android-sdk 59 ( cd ~/android-sdk; unzip ~/Downloads/sdk-tools-*.zip ) 60 yes | ~/android-sdk/tools/bin/sdkmanager --licenses 61 export ANDROID_HOME=~/android-sdk # Or wherever you installed the Android SDK. 62 63If you are not using the NDK included with the Android SDK (at ~/android-sdk/ndk-bundle 64in this example) you'll need to set the environmental variable `ANDROID_NDK_HOME`, e.g., 65 66 export ANDROID_NDK_HOME=/tmp/ndk 67 68The Viewer APK must be built by gradle which can be invoked on the command line 69with the following script: 70 71 platform_tools/android/bin/android_build_app -C <out_dir> viewer 72 73where `<out_dir>` is the ninja out directory (e.g., `out/arm64`) 74that you created. Upon completion of the script the APK 75can be found at `<out_dir>/viewer.apk`. Install it with `adb install`. 76 77It is possible to pass additional command line flags like 78 79 adb shell am start -a android.intent.action.MAIN -n org.skia.viewer/org.skia.viewer.ViewerActivity --es args '"--androidndkfonts"' 80 81### How to Use the App 82 83Most app functions (except touch gestures and arrow buttons) are placed in the **left drawer**. 84Click on the upper-left hamburger button to open that drawer. 85 86#### Switch Slides 87 88In the upper-right corner, there are two arrows: next slide, previous slide. 89 90In the left drawer, you can directly select a slide from a list (spinner). Above that spinner, 91there’s a text filter that applies to the slide list. There are hundreds of slides so if you 92know the slide name, use that filter to quickly locate and show it. 93 94#### Zoom / Translate 95 96We support touch gestures on the slide so you can drag and pinch to zoom. 97 98#### Change Backend 99 100In the left drawer, you can select the backend from a list of OpenGL, Vulkan, and Raster. 101 102#### Softkey / Stats 103 104In the left drawer, there’s a list of softkeys. They correspond to the keyboard commands 105of a desktop Viewer app. For example, you can toggle color mode or stats window. These can 106be filtered like the slides. 107 108For animation slides, we also show FPS (actually, it’s Seconds Per Frame) --- frame 109refresh rate in milliseconds. 110 111#### Loading resources / skps 112 113TODO (https://issues.skia.org/295805469): This used to be possible with the instructions 114below, but they no longer work on recent versions of Android. 115 116To load resources in the Android Viewer place them in 117`/data/local/tmp/resources`; to load SKPs place them in `/data/local/tmp/skps`. 118 119iOS 120--- 121 122Viewer on iOS is built using the regular GN process, e.g. 123 124 bin/gn gen out/Release --args='target_os="ios" is_debug=false' 125 ninja -C out/Release viewer 126 127Like other iOS apps it can be deployed either by using something like 128[ios-deploy](https://github.com/ios-control/ios-deploy) 129or by building within Xcode and launching via the IDE. See the 130[iOS build instructions](https://skia.org/docs/user/build#ios) for more information 131on managing provisioning profiles for signing and deployment. 132 133Viewer will 134automatically bundle the `resources` directory in the top-level Skia directory, 135and will bundle an `skps` directory if also placed in the Skia directory. 136 137On iOS the Viewer provides basic touch functionality: you can view slides, 138swipe between them, pinch-zoom to scale, and translate via panning. There is not 139yet support for display options or selecting from a list of slides. 140 141