+ return (
{ this.setSetting(setting, e.target.checked) }} checked={(this.state.rawSettings?.[setting] ? true : false)} data-checked={(this.state.rawSettings?.[setting] ? true : false)} type="checkbox" />
)
}
render() {
- const { rawSettings } = this.state
return (
- {(this.state.rawSettings?.[setting] ? T.t("GENERIC_ON") : T.t("GENERIC_OFF"))}
-
-
-
+
+
+
-
+
+
-
+
+
+
-
-
-
-
- )} />
+
+
-
-
+
+
+
+
+
+
+
+ {
+ this.setState({ language: e.target.value })
+ window.sendSettings({ language: e.target.value })
+ }}>
+
+ {this.getLanguages()}
+
+ )} />
+
+
+
+
+
+
+ )} />
+
+ this.setSetting("windowsStyle", e.target.value)}>
+
+
+
+
+ )} />
+
+
- ' + T.t("SETTINGS_GENERAL_ANALYTICS_LINK") + '')} input={this.renderToggle("analytics")} />
- {
- this.setState({ language: e.target.value })
- window.sendSettings({ language: e.target.value })
- }}>
-
- {this.getLanguages()}
-
- )} />
+
- {T.t("SETTINGS_GENERAL_TITLE")}
+
+
-
+
+
+ )} />
-
+
- {T.t("SETTINGS_GENERAL_TITLE")}
- window.sendSettings({ icon: "icon" })}>
+ 
+
+ window.sendSettings({ icon: "mdl2" })}>
+ 
+
+ window.sendSettings({ icon: "fluent" })}>
+ 
+
+
+ this.setSetting("windowsStyle", e.target.value)}>
-
-
-
-
- )} />
+ ' + T.t("SETTINGS_GENERAL_ANALYTICS_LINK") + '')} expandable={true}>
+
- this.setSetting("defaultOverlayType", e.target.value)}>
+
+
+
+
+ } expandable={true}>
+
+
+
+
+ {T.t("SETTINGS_GENERAL_RESET_BUTTON")}} />
-
-
+
-
-
-
-
+
-
+
- {T.t("SETTINGS_GENERAL_TROUBLESHOOTING")}
-
-
+
+ Disabled: Do not show overlay.
+ Safe: The overlay will display over most windows, but will not force itself above apps that are marked as "always on top".
+ Aggressive: Always try to show the overlay on top of other windows. This can cause issues with exclusive fullscreen games and other fullscreen apps. It can also trigger anti-cheat in some games.
+
-
-
- window.sendSettings({ icon: "icon" })}>
-
-
- window.sendSettings({ icon: "mdl2" })}>
-
-
- window.sendSettings({ icon: "fluent" })}>
-
-
+
+
+
+ ' + T.t("SETTINGS_GENERAL_ANALYTICS_LINK") + '')} input={this.renderToggle("analytics")} />
-
-
-
- {T.t("SETTINGS_TIME_TITLE")}
+ {T.t("SETTINGS_TIME_DESC")}
+
+ {this.getAdjustmentTimes()}
- )} />
-
-
- ' + T.t("SETTINGS_GENERAL_ANALYTICS_LINK") + '')} expandable={true}>
-
-
- this.setSetting("defaultOverlayType", e.target.value)}>
-
-
-
-
- } expandable={true}>
-
-
-
-
- {T.t("SETTINGS_GENERAL_RESET_BUTTON")}} />
-
-
- {T.t("SETTINGS_GENERAL_TROUBLESHOOTING")}
-
-
- Disabled: Do not show overlay.
- Safe: The overlay will display over most windows, but will not force itself above apps that are marked as "always on top".
- Aggressive: Always try to show the overlay on top of other windows. This can cause issues with exclusive fullscreen games and other fullscreen apps. It can also trigger anti-cheat in some games.
-
-
- {T.t("SETTINGS_TIME_TITLE")}
- {T.t("SETTINGS_TIME_DESC")}
-
- {this.getAdjustmentTimes()}
+
-
-
-
-
-
-
- this.setSetting("adjustmentTimeSpeed", e.target.value)}>
-
-
-
-
-
-
-
- } />
-
-
-
-
-
- this.setSetting("adjustmentTimeLatitude", e.target.value)} style={{width: "100%", boxSizing: "border-box"}} />
-
-
-
- this.setSetting("adjustmentTimeLongitude", e.target.value)} style={{width: "100%", boxSizing: "border-box"}} />
-
-
-
-
+
+
+
+ {T.t("SETTINGS_TIME_IDLE_TITLE")}
-
- this.setSetting("adjustmentTimeSpeed", e.target.value)}>
+
+
+
+
+
+
+
+ } />
+
+
-
- this.setSetting("detectIdleTimeMinutes", e.target.value)} />
+
-
+
+
+
+
+ this.setSetting("adjustmentTimeLatitude", e.target.value)} style={{width: "100%", boxSizing: "border-box"}} />
-
-
- this.setSetting("detectIdleTimeSeconds", e.target.value)} />
+
- } />
-
-
+
+ this.setSetting("adjustmentTimeLongitude", e.target.value)} style={{width: "100%", boxSizing: "border-box"}} />
+
+
+
+ } />
+ {T.t("SETTINGS_TIME_IDLE_TITLE")}
+
+
+ this.setSetting("detectIdleTimeMinutes", e.target.value)} />
+
+
+
+ this.setSetting("detectIdleTimeSeconds", e.target.value)} />
+
+
-
+ {T.t("GENERIC_ALL_DISPLAYS")}
-
- {this.getInfoMonitors()}
+
-
+
- {T.t("GENERIC_ALL_DISPLAYS")}
+
+ {this.getInfoMonitors()}
+
-
-
-
-
-
-
-
- )} />
-
- {this.getHideMonitors()}
-
-
- {this.getRenameMonitors()}
-
-
-
- {this.getReorderMonitors()}
-
- } />
-
-
+
+
+
+
+
+
+
+ )} />
+
+ {this.getHideMonitors()}
+
+
+ {this.getRenameMonitors()}
+
+
+
+ {this.getReorderMonitors()}
+
+ } />
+
-
+ {T.t("SETTINGS_MONITORS_NORMALIZE_TITLE")}
- {T.t("SETTINGS_MONITORS_NORMALIZE_DESC")}
- {this.getMinMaxMonitors()} -
+
- {T.t("SETTINGS_MONITORS_NORMALIZE_TITLE")}
+ {T.t("SETTINGS_MONITORS_NORMALIZE_DESC")}
+ {this.getMinMaxMonitors()} +
-
- {T.t("SETTINGS_SIDEBAR_FEATURES")}
- {T.t("SETTINGS_FEATURES_DESCRIPTION")}
- {this.getFeaturesMonitors()} -
- {
- this.setState({ ddcPowerOffValue: parseInt(e.target.value) })
- window.sendSettings({ ddcPowerOffValue: parseInt(e.target.value) })
- }}>
-
-
-
-
- }>
- ⚠️ The "Standby" option is more likely to allow toggling the monitor on/off from Twinkle Tray. However, many monitors do not respond correctly to changing power state. Use at your own risk.} />
-
-
-
+
+ {T.t("SETTINGS_SIDEBAR_FEATURES")}
+ {T.t("SETTINGS_FEATURES_DESCRIPTION")}
+ {this.getFeaturesMonitors()} +
+ {
+ this.setState({ ddcPowerOffValue: parseInt(e.target.value) })
+ window.sendSettings({ ddcPowerOffValue: parseInt(e.target.value) })
+ }}>
+
+
+
+
+ }>
+ ⚠️ The "Standby" option is more likely to allow toggling the monitor on/off from Twinkle Tray. However, many monitors do not respond correctly to changing power state. Use at your own risk.} />
+
+
+
+
-
-
- {T.t("SETTINGS_HOTKEYS_TITLE")}
+ {T.t("SETTINGS_HOTKEYS_DESC")}
+
+ {this.getHotkeyList()}
+
+
-
-
+ {T.t("SETTINGS_HOTKEYS_TITLE")}
- {T.t("SETTINGS_HOTKEYS_DESC")}
- -
+
-
-
+
+
+ {
+ this.state.rawSettings.scrollShortcutAmount = parseInt(e.target.value)
+ window.sendSettings({ scrollShortcutAmount: parseInt(e.target.value) })
+ this.forceUpdate()
+ }} />
+ } />
+
+
- {T.t("SETTINGS_GENERAL_SCROLL_TITLE")}
+
-
- {
- this.state.rawSettings.scrollShortcutAmount = parseInt(e.target.value)
- window.sendSettings({ scrollShortcutAmount: parseInt(e.target.value) })
- this.forceUpdate()
- }} />
- } />
-
-
+ {T.t("SETTINGS_GENERAL_SCROLL_TITLE")}
-
+
+
+
+
+
+
+ }>
+
+ {T.t("SETTINGS_HOTKEYS_TOD_NOTE")}
+ { (this.state.rawSettings?.sleepAction === "ddcci" || this.state.rawSettings?.sleepAction === "ps_ddcci" ? (
⚠️ {T.t("GENERIC_DDC_WARNING")}) : null) }
+
+ } />
+
+
- {T.t("SETTINGS_HOTKEYS_TOD_TITLE")}
+ ⚠️ {T.t("GENERIC_DDC_WARNING")}
-
-
-
-
-
-
- }>
-
- {T.t("SETTINGS_HOTKEYS_TOD_NOTE")}
- { (this.state.rawSettings?.sleepAction === "ddcci" || this.state.rawSettings?.sleepAction === "ps_ddcci" ? (
⚠️ {T.t("GENERIC_DDC_WARNING")}) : null) }
-
- } />
-
-
+
+ {T.t("SETTINGS_HOTKEYS_TOD_TITLE")}
- ⚠️ {T.t("GENERIC_DDC_WARNING")}
+
-
-
-
-
-
-
+
+
+
+
+
+
+
Profiles
+ Automatically adjust the brightness or shortcut overlay behavior depending on the focused app. You can also add profiles to the right-click menu in the system tray to quickly change the brightness to pre-defined profiles.
+
+ {this.state.rawSettings?.profiles?.map((profile, idx) => {
+ profile[key] = value
+ sendSettings({ profiles: this.state.rawSettings?.profiles })
+ this.forceUpdate()
+ }}
+ onDelete={
+ () => {
+ this.state.rawSettings?.profiles.splice(idx, 1)
+ sendSettingsImmediate({ profiles: this.state.rawSettings?.profiles })
+ this.forceUpdate()
+ }
+ } />)}
+
+
-
-
-
+
- Profiles
- Automatically adjust the brightness or shortcut overlay behavior depending on the focused app. You can also add profiles to the right-click menu in the system tray to quickly change the brightness to pre-defined profiles.
-
- {this.state.rawSettings?.profiles?.map((profile, idx) => {
- profile[key] = value
- sendSettings({ profiles: this.state.rawSettings?.profiles })
- this.forceUpdate()
- }}
- onDelete={
- () => {
- this.state.rawSettings?.profiles.splice(idx, 1)
- sendSettingsImmediate({ profiles: this.state.rawSettings?.profiles })
- this.forceUpdate()
- }
- } />)}
-
-
-
-
- {T.t("SETTINGS_UPDATES_TITLE")}
- {T.h("SETTINGS_UPDATES_VERSION", '' + (window.version || "not available") + '')}
- {this.getUpdate()} -
- { window.sendSettings({ branch: e.target.value }) }}>
-
-
-
- } />
-
-
- { window.requestMonitors(true) }}>Refresh Monitors}>
-
- {this.getDebugMonitors()}
-
-
-
- window.ipc.send('open-settings-file')}>Open Settings} expandable={true}>
-
-
-
-
-
-
-
-
-
+ {JSON.stringify(this.state.rawSettings, undefined, 2)}
-{JSON.stringify(window.allMonitors, undefined, 2)}
-
+
+ {T.t("SETTINGS_UPDATES_TITLE")}
+ {T.h("SETTINGS_UPDATES_VERSION", '' + (window.version || "not available") + '')}
+ {this.getUpdate()} +
+ { window.sendSettings({ branch: e.target.value }) }}>
+
+
+
+ } />
+
+
+ { window.requestMonitors(true) }}>Refresh Monitors}>
+
+ {this.getDebugMonitors()}
+
+
+
+ window.ipc.send('open-settings-file')}>Open Settings} expandable={true}>
+
+
+
+
+
+
+
+
+
- {JSON.stringify(this.state.rawSettings, undefined, 2)}
+{JSON.stringify(window.allMonitors, undefined, 2)}
+
-
- this.setSetting("udpPortStart", e.target.value)} />} />
-
-
-
+ Other
-
-
+
+ this.setSetting("udpPortStart", e.target.value)} />} />
+
+
+
-
+ Other
+
+
-
-
+
);
}
}
@@ -1482,7 +1478,7 @@ function AppProfile(props) {
function SettingsPage(props) {
if (props.current === props.id) {
return (
-
-
+
-
-
- Enter the VCP code for the feature you would like to add to your display. Please note that Twinkle Tray does not validate if your display actually supports this VCP code. Use at your own risk.
- - this.setState({ addFeatureValue: e.target.value })} onKeyUp={e => { - console.log(e) - if (e.which === 13 && this.state.addFeatureValue) { - // Enter - this.addFeatureOKRef.current.click() - } else if (e.which === 27) { - // Escape - this.addFeatureCancelRef.current.click() +
+
-
+
-
+
+
+
+ Enter the VCP code for the feature you would like to add to your display. Please note that Twinkle Tray does not validate if your display actually supports this VCP code. Use at your own risk.
+ + this.setState({ addFeatureValue: e.target.value })} onKeyUp={e => { + if (e.which === 13 && this.state.addFeatureValue) { + // Enter + this.addFeatureOKRef.current.click() + } else if (e.which === 27) { + // Escape + this.addFeatureCancelRef.current.click() + } + }} /> +
+
+ This feature is already active.
+
+ this.setState({ showAddFeatureOverlay: false })} />
+ {
+ let isActive = false
+ const vcp = this.state.addFeatureValue.toUpperCase()
+ try {
+ isActive = this.state.rawSettings.monitorFeatures[this.state.addFeatureMonitor][vcp];
+ } catch (e) { }
+ if (isActive) {
+ this.setState({ addFeatureError: true })
+ } else {
+ this.setState({ showAddFeatureOverlay: false })
+ this.toggleFeature(this.state.addFeatureMonitor, vcp)
}
+
}} />
-
- This feature is already active.
-
- this.setState({ showAddFeatureOverlay: false })} />
- {
- let isActive = false
- const vcp = this.state.addFeatureValue.toUpperCase()
- try {
- isActive = this.state.rawSettings.monitorFeatures[this.state.addFeatureMonitor][vcp];
- } catch (e) { }
- if (isActive) {
- this.setState({ addFeatureError: true })
- } else {
- this.setState({ showAddFeatureOverlay: false })
- this.toggleFeature(this.state.addFeatureMonitor, vcp)
- }
-
- }} />
-
{props.children}
+ {props.children}
+
{
const value = e.target.value
diff --git a/src/css/page.scss b/src/css/page.scss
index 5b7f0c65..ece92fb9 100644
--- a/src/css/page.scss
+++ b/src/css/page.scss
@@ -429,7 +429,7 @@ select {
margin-left: 8px;
}
- &[data-textSide="left"] {
+ &[data-textside="left"] {
input {
order: 2;
}
@@ -1139,4 +1139,8 @@ body[data-is-win11="true"] {
.win10only {
display: none;
}
+}
+
+.try-catch-failure {
+ user-select: auto;
}
\ No newline at end of file
diff --git a/src/html/settings.html b/src/html/settings.html
index e45d6c76..552ae5dc 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -11,6 +11,16 @@
+