|
| 1 | +<!-- Copyright (C) 2022 Intel Corporation --> |
| 2 | +<!-- SPDX-License-Identifier: MIT --> |
| 3 | + |
| 4 | +<template> |
| 5 | + <div class="page-wrap"> |
| 6 | + |
| 7 | + <h2 class="mt-5 ml-5 link-head"> |
| 8 | + Flash Injection <span style="color:red">*Experimental*</span> |
| 9 | + </h2> |
| 10 | + |
| 11 | + <v-card class="page-card"> |
| 12 | + |
| 13 | + <v-row class="mt-8"> |
| 14 | + <v-col cols="3"> |
| 15 | + Enable Flash Injection |
| 16 | + <p class="text--secondary text-sm-caption mb-0">Enable the injector child process.</p> |
| 17 | + </v-col> |
| 18 | + <v-col cols="9"> |
| 19 | + <v-row> |
| 20 | + <v-col cols="6"> |
| 21 | + <v-switch v-model="enableFlashInjection" label="Enable"></v-switch> |
| 22 | + </v-col> |
| 23 | + </v-row> |
| 24 | + </v-col> |
| 25 | + </v-row> |
| 26 | + |
| 27 | + <v-row class="mt-8"> |
| 28 | + <v-col cols="3"> |
| 29 | + Enable Background |
| 30 | + <p class="text--secondary text-sm-caption mb-0">Renders a static rectangle every frame. When a click occurs the "flash" rectangle is rendered on top of the background.</p> |
| 31 | + </v-col> |
| 32 | + <v-col cols="9"> |
| 33 | + <v-row> |
| 34 | + <v-col cols="6"> |
| 35 | + <v-switch v-model="flashInjectionBackgroundEnable" label="Enable"></v-switch> |
| 36 | + </v-col> |
| 37 | + </v-row> |
| 38 | + </v-col> |
| 39 | + </v-row> |
| 40 | + |
| 41 | + <v-row class="mt-8"> |
| 42 | + <v-col cols="3"> |
| 43 | + Colors |
| 44 | + <p class="text--secondary text-sm-caption mb-0">Colors of various elements of the graph</p> |
| 45 | + </v-col> |
| 46 | + <v-col cols="9"> |
| 47 | + <v-row dense> |
| 48 | + <v-col cols="6"> |
| 49 | + <color-picker v-model="flashInjectionColor" class="color-picker" label="Flash"></color-picker> |
| 50 | + </v-col> |
| 51 | + <v-col cols="6"> |
| 52 | + <color-picker v-model="flashInjectionBackgroundColor" class="color-picker" label="Background"></color-picker> |
| 53 | + </v-col> |
| 54 | + </v-row> |
| 55 | + </v-col> |
| 56 | + </v-row> |
| 57 | + |
| 58 | + <v-row class="mt-8"> |
| 59 | + <v-col cols="3"> |
| 60 | + Flash Width |
| 61 | + <p class="text--secondary text-sm-caption mb-0">Width of the flash rectangle and background</p> |
| 62 | + </v-col> |
| 63 | + <v-col cols="9"> |
| 64 | + <v-slider |
| 65 | + v-model="flashInjectionSize" |
| 66 | + :min="0.01" |
| 67 | + :max="1" |
| 68 | + :step="0.01" |
| 69 | + thumb-label="always" |
| 70 | + ></v-slider> |
| 71 | + </v-col> |
| 72 | + </v-row> |
| 73 | + |
| 74 | + <v-row class="mt-8"> |
| 75 | + <v-col cols="3"> |
| 76 | + Flash Offset |
| 77 | + <p class="text--secondary text-sm-caption mb-0">How far to offset the flash rectangle from the left of the screen</p> |
| 78 | + </v-col> |
| 79 | + <v-col cols="9"> |
| 80 | + <v-slider |
| 81 | + v-model="flashInjectionRightShift" |
| 82 | + :min="0" |
| 83 | + :max="1" |
| 84 | + :step="0.01" |
| 85 | + thumb-label="always" |
| 86 | + ></v-slider> |
| 87 | + </v-col> |
| 88 | + </v-row> |
| 89 | + |
| 90 | + <v-row class="mt-4"> |
| 91 | + <v-col> |
| 92 | + <h3>Notes</h3> |
| 93 | + <p class="text--secondary text-sm-caption mb-1">The flash injector injects code into a target process, causing it to draw a rectangle on top of its normal output whenever it detects a mouse click.</p> |
| 94 | + <p class="text--secondary text-sm-caption mb-1">It can be used to measure latency between a click input and a corresponding visual response of the target app.</p> |
| 95 | + <p class="text--secondary text-sm-caption mb-1">To perform injection, target an app with the overlay and then restart the app. Any changes to the above settings will similarly only take effect after the target app has been restarted.</p> |
| 96 | + <p class="orange--text text-sm-caption mb-1">Using this feature with certain titles (in particular, competitive online games protected by anticheat services) may result in a permanent ban.</p> |
| 97 | + </v-col> |
| 98 | + </v-row> |
| 99 | + |
| 100 | + </v-card> |
| 101 | + |
| 102 | + </div> |
| 103 | +</template> |
| 104 | + |
| 105 | +<script lang="ts"> |
| 106 | +import Vue from 'vue' |
| 107 | +import { Preferences } from '@/store/preferences' |
| 108 | +import { Hotkey } from '@/store/hotkey' |
| 109 | +import { RgbaColor } from '@/core/color' |
| 110 | +import ColorPicker from '@/components/ColorPicker.vue' |
| 111 | + |
| 112 | +export default Vue.extend({ |
| 113 | + name: 'FlashInjectorConfig', |
| 114 | + |
| 115 | + components: { |
| 116 | + ColorPicker, |
| 117 | + }, |
| 118 | + data: () => ({ |
| 119 | + dialog: false, |
| 120 | + }), |
| 121 | + methods: { |
| 122 | + async reset(): Promise<void> { |
| 123 | + Preferences.resetPreferences(); |
| 124 | + await Hotkey.bindDefaults(); |
| 125 | + this.dialog = false; |
| 126 | + }, |
| 127 | + }, |
| 128 | + computed: { |
| 129 | + enableFlashInjection: { |
| 130 | + get(): boolean { return Preferences.preferences.enableFlashInjection; }, |
| 131 | + set(val: boolean) { |
| 132 | + Preferences.writeAttribute({ attr: 'enableFlashInjection', val }); |
| 133 | + }, |
| 134 | + }, |
| 135 | + flashInjectionSize: { |
| 136 | + get(): number { return Preferences.preferences.flashInjectionSize; }, |
| 137 | + set(val: number) { |
| 138 | + Preferences.writeAttribute({ attr: 'flashInjectionSize', val }); |
| 139 | + }, |
| 140 | + }, |
| 141 | + flashInjectionColor: { |
| 142 | + get(): RgbaColor { return Preferences.preferences.flashInjectionColor; }, |
| 143 | + set(val: RgbaColor) { |
| 144 | + Preferences.writeAttribute({ attr: 'flashInjectionColor', val }); |
| 145 | + }, |
| 146 | + }, |
| 147 | + flashInjectionBackgroundEnable: { |
| 148 | + get(): boolean { return Preferences.preferences.flashInjectionBackgroundEnable; }, |
| 149 | + set(val: boolean) { |
| 150 | + Preferences.writeAttribute({ attr: 'flashInjectionBackgroundEnable', val }); |
| 151 | + }, |
| 152 | + }, |
| 153 | + flashInjectionBackgroundColor: { |
| 154 | + get(): RgbaColor { return Preferences.preferences.flashInjectionBackgroundColor; }, |
| 155 | + set(val: RgbaColor) { |
| 156 | + Preferences.writeAttribute({ attr: 'flashInjectionBackgroundColor', val }); |
| 157 | + }, |
| 158 | + }, |
| 159 | + flashInjectionRightShift: { |
| 160 | + get(): number { return Preferences.preferences.flashInjectionRightShift; }, |
| 161 | + set(val: number) { |
| 162 | + Preferences.writeAttribute({ attr: 'flashInjectionRightShift', val }); |
| 163 | + }, |
| 164 | + }, |
| 165 | + }, |
| 166 | + watch: { |
| 167 | + } |
| 168 | +}); |
| 169 | +</script> |
| 170 | + |
| 171 | +<style scoped> |
| 172 | +.top-label { |
| 173 | + margin: 0; |
| 174 | + padding: 0; |
| 175 | + height: auto; |
| 176 | +} |
| 177 | +.color-picker { |
| 178 | + max-width: 150px; |
| 179 | +} |
| 180 | +.link-head { |
| 181 | + color: white; |
| 182 | + user-select: none; |
| 183 | +} |
| 184 | +.page-card { |
| 185 | + margin: 15px 0; |
| 186 | + padding: 0 15px 15px; |
| 187 | +} |
| 188 | +.page-wrap { |
| 189 | + max-width: 750px; |
| 190 | + flex-grow: 1; |
| 191 | +} |
| 192 | +</style> |
0 commit comments