2022-05-02 01:16:30 +01:00
< html >
< head >
< link rel = "stylesheet" href = "/steam_resource/css/2.css" >
< link rel = "stylesheet" href = "/steam_resource/css/39.css" >
< link rel = "stylesheet" href = "/steam_resource/css/library.css" >
< script src = "/static/library.js" > < / script >
2022-05-02 01:21:57 +01:00
< script >
2022-05-04 01:26:51 +01:00
const PLOT_HEIGHT = 200;
2022-05-04 18:27:13 +01:00
const PLOT_WIDTH = 270;
2022-05-04 01:26:51 +01:00
const OFFSET_X = 0;
const OFFSET_Y = 0;
// state
let curve = [];
let plotClickIsHandled = false;
// back-end
function setCurve(curve) {
return call_plugin_method("set_curve", {"curve": curve});
}
function getCurve() {
return call_plugin_method("get_curve", {});
}
function getCurvePoint(index) {
return call_plugin_method("get_curve_point", {"index": index});
}
function setCurvePoint(index, point) {
return call_plugin_method("set_curve_point", {"index": index, "point": point});
}
function addCurvePoint(point) {
return call_plugin_method("add_curve_point", {"point": point});
}
function removeCurvePoint(index) {
return call_plugin_method("remove_curve_point", {"index": index});
}
function setEnable(enable) {
return call_plugin_method("set_enable", {"enable": enable});
}
function getEnable() {
return call_plugin_method("get_enable", {});
}
2022-05-04 18:27:13 +01:00
function setInterpol(enable) {
return call_plugin_method("set_interpol", {"interpolate": enable});
}
function getInterpol() {
return call_plugin_method("get_interpol", {});
}
function getFanRpm() {
return call_plugin_method("get_fan_rpm", {});
}
function getTemperature() {
return call_plugin_method("get_temperature", {});
}
2022-05-04 01:26:51 +01:00
function setPlotSize(x, y) {
return call_plugin_method("set_plot_size", {"x": x, "y": y});
}
// events
async function onload_body() {
2022-05-04 18:27:13 +01:00
let hiderDiv = document.getElementById("hiderDiv");
2022-05-04 01:26:51 +01:00
let graphDiv = document.getElementById("graphDiv");
await setPlotSize(PLOT_WIDTH, PLOT_HEIGHT);
const state_controlToggle = await getEnable(); // retrieve from back-end
setToggleState(document.getElementById("controlToggle"), state_controlToggle);
2022-05-04 18:27:13 +01:00
const state_interpolToggle = await getInterpol(); // retrieve from back-end
setToggleState(document.getElementById("interpolToggle"), state_interpolToggle);
showHideElement(hiderDiv, state_controlToggle);
2022-05-04 01:26:51 +01:00
if (state_controlToggle) {
curve = await getCurve();
buildCurvePlot(curve);
}
2022-05-04 18:27:13 +01:00
window.setInterval(pollStats, 500);
2022-05-04 01:26:51 +01:00
console.log("Loaded");
}
async function onclick_graphDiv(e) {
console.log("Click @ (" + e.layerX.toString() + ", " + e.layerY.toString() + ")");
if (plotClickIsHandled) {
plotClickIsHandled = false;
} else {
await addCurvePoint({"x": (e.layerX - OFFSET_X) / PLOT_WIDTH, "y": (e.layerY - OFFSET_Y) / PLOT_HEIGHT});
curve = await getCurve();
buildCurvePlot(curve);
}
}
async function onclick_controlToggle() {
console.log("Click @ controlToggle");
2022-05-04 18:27:13 +01:00
let hiderDiv = document.getElementById("hiderDiv");
2022-05-04 01:26:51 +01:00
let graphDiv = document.getElementById("graphDiv");
let controlToggle = document.getElementById("controlToggle");
const state_controlToggle = getToggleState(controlToggle);
await setEnable(!state_controlToggle); // notify back-end
setToggleState(controlToggle, !state_controlToggle);
if (!state_controlToggle) {
curve = await getCurve();
buildCurvePlot(curve);
}
2022-05-04 18:27:13 +01:00
showHideElement(hiderDiv, !state_controlToggle);
}
async function onclick_interpolToggle() {
console.log("Click @ interpolToggle");
let interpolToggle = document.getElementById("interpolToggle");
const state_interpolToggle = getToggleState(interpolToggle);
await setInterpol(!state_interpolToggle); // notify back-end
setToggleState(interpolToggle, !state_interpolToggle);
2022-05-04 01:26:51 +01:00
}
async function onclick_plotPoint(e, index) {
console.log("Click @ plotPoint " + index.toString());
plotClickIsHandled = true; // this must be before the first async call (janky!)
await removeCurvePoint(index);
curve = await getCurve();
buildCurvePlot(curve);
//e.stopPropogation();
}
// common
function buildCurvePlot(curve_points) {
let graphDiv = document.getElementById("graphDiv");
2022-05-04 18:27:13 +01:00
let newStr = "< span style = \"font-size:x-small;position:absolute;left:1px;top:-1px;\" > 100%< / span > < span style = \"font-size:x-small;position:absolute;left:1px;bottom:-1px;\" > 0< / span > < span style = \"font-size:x-small;position:absolute;left:-2px;bottom:50%;writing-mode:vertical-lr;text-orientation:mixed;\" > Fan< / span > < span style = \"font-size:x-small;position:absolute;right:1px;bottom:-1px;\" > 100< / span > < span style = \"font-size:x-small;position:absolute;left:35%;bottom:-1px;\" > Temperature (°C)< / span > ";
2022-05-04 01:26:51 +01:00
for (let i = 0; i < curve_points.length ; i + + ) {
const point = curve_points[i];
newStr += "< span style = \"position:absolute;"
2022-05-04 18:27:13 +01:00
newStr += "top:" + Math.round(point["y"]*PLOT_HEIGHT + OFFSET_Y + 1).toString() + "px;left:" + Math.round(point["x"]*PLOT_WIDTH + OFFSET_X + 1).toString() + "px;";
newStr += "width:8px;height:8px;background-color:#1a9fff;border-radius:4px\" id=\"plotPoint";
2022-05-04 01:26:51 +01:00
newStr += i.toString() + "\" onclick=\"onclick_plotPoint(event," + i.toString() + ")\">< / span > ";
}
2022-05-28 01:52:32 +01:00
//graphDiv.innerHTML = "";
2022-05-04 01:26:51 +01:00
graphDiv.innerHTML = newStr;
2022-05-28 01:52:32 +01:00
console.log("Fan graph redrawn");
2022-05-04 01:26:51 +01:00
}
2022-05-04 18:27:13 +01:00
function pollStats() {
/*getFanRpm().then(speed => {
let fanNow = document.getElementById("fanNow");
fanNow.innerText = speed.toString() + " RPM";
});
sleep(1).then(_ => {});
getTemperature().then(temp => {
let tempNow = document.getElementById("tempNow");
tempNow.innerText = temp.toString() + " °C";
});
sleep(1).then(_ => {});*/
pollStatsAsync().then(_ => {});
}
async function pollStatsAsync() {
let fanNow = document.getElementById("fanNow");
let tempNow = document.getElementById("tempNow");
const speed = await getFanRpm();
const temp = await getTemperature();
fanNow.innerText = speed.toString() + " RPM";
tempNow.innerText = temp.toString() + " °C";
}
2022-05-04 01:26:51 +01:00
function showHideElement(elem, visible) {
if (visible) {
elem.style.visibility = "visible";
2022-05-04 18:27:13 +01:00
elem.style.height = "auto";
2022-05-04 01:26:51 +01:00
} else {
elem.style.visibility = "hidden";
2022-05-04 18:27:13 +01:00
elem.style.height = "0px";
2022-05-04 01:26:51 +01:00
}
}
2022-05-12 18:14:36 +01:00
const TOGGLE_ON_CLASS = "gamepaddialog_On_3ld7T"
2022-05-04 01:26:51 +01:00
function setToggleState(toggle, state) {
2022-05-12 18:14:36 +01:00
if (state & & !toggle.classList.contains(TOGGLE_ON_CLASS)) {
toggle.classList.add(TOGGLE_ON_CLASS);
2022-05-04 01:26:51 +01:00
}
2022-05-12 18:14:36 +01:00
if (!state & & toggle.classList.contains(TOGGLE_ON_CLASS)) {
toggle.classList.remove(TOGGLE_ON_CLASS);
2022-05-04 01:26:51 +01:00
}
}
function getToggleState(toggle) {
2022-05-12 18:14:36 +01:00
return toggle.classList.contains(TOGGLE_ON_CLASS);
2022-05-04 01:26:51 +01:00
}
2022-05-04 18:27:13 +01:00
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
2022-05-02 01:21:57 +01:00
< / script >
2022-05-02 01:16:30 +01:00
< / head >
2022-05-12 18:14:36 +01:00
< body onload = "onload_body()" style = "overflow-x:hidden;margin:0px;" >
2022-05-28 01:52:32 +01:00
<!-- Spacer (moves top out of shadow above it) -->
< div class = "quickaccessmenu_TabGroupPanel_1QO7b" >
< div class = "quickaccesscontrols_PanelSection_2C0g0" style = "margin-bottom:6px;" >
<!-- <div class="quickaccesscontrols_PanelSectionRow_2VQ88">
< / div > -->
< / div >
< / div >
2022-05-04 01:26:51 +01:00
< div class = "quickaccessmenu_TabGroupPanel_1QO7b Panel Focusable" >
2022-05-12 18:14:36 +01:00
< div class = "quickaccesscontrols_PanelSection_2C0g0" style = "padding:0px 4px;" >
< div class = "quickaccesscontrols_PanelSectionRow_2VQ88" >
2022-05-28 01:52:32 +01:00
< div class = "gamepaddialog_Field_S-_La gamepaddialog_WithFirstRow_qFXi6 gamepaddialog_VerticalAlignCenter_3XNvA gamepaddialog_WithDescription_3bMIS gamepaddialog_WithBottomSeparatorStandard_3s1Rk gamepaddialog_ExtraPaddingOnChildrenBelow_5UO-_ gamepaddialog_StandardPadding_XRBFu gamepaddialog_HighlightOnFocus_wE4V6 Panel Focusable" style = "--indent-level:0;" >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldLabelRow_H9WOq" >
< div class = "gamepaddialog_FieldLabel_3b0U-" >
2022-05-04 01:26:51 +01:00
Custom Fan Curve
< / div >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldChildren_14_HB" >
< div id = "controlToggle" tabindex = "0" class = "gamepaddialog_Toggle_24G4g Focusable" onclick = "onclick_controlToggle()" >
< div class = "gamepaddialog_ToggleRail_2JtC3" > < / div >
< div class = "gamepaddialog_ToggleSwitch_3__OD" > < / div >
2022-05-04 01:26:51 +01:00
< / div >
< / div >
< / div >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldDescription_2OJfk" > Overrides SteamOS fan curve< / div >
2022-05-04 01:26:51 +01:00
< / div >
< / div >
< / div >
< / div >
2022-05-04 18:27:13 +01:00
< div id = "hiderDiv" >
2022-05-12 18:14:36 +01:00
< div id = "graphDiv" style = "height:200px;width:270px;border:1px solid #1a9fff;position:relative;background-color:#1a1f2c;border-radius:4px;margin:auto;" onclick = "onclick_graphDiv(event)" >
2022-05-04 18:27:13 +01:00
Some text to show that something is broken :(
< / div >
< div style = "font-size:x-small; text-align:center;" >
Click to add/remove points on the fan curve.
< / div >
< div class = "quickaccessmenu_TabGroupPanel_1QO7b Panel Focusable" >
2022-05-12 18:14:36 +01:00
< div class = "quickaccesscontrols_PanelSection_2C0g0" style = "padding:0px 4px;" >
< div class = "quickaccesscontrols_PanelSectionRow_2VQ88" >
2022-05-28 01:52:32 +01:00
< div class = "gamepaddialog_Field_S-_La gamepaddialog_WithFirstRow_qFXi6 gamepaddialog_VerticalAlignCenter_3XNvA gamepaddialog_WithDescription_3bMIS gamepaddialog_WithBottomSeparatorStandard_3s1Rk gamepaddialog_ExtraPaddingOnChildrenBelow_5UO-_ gamepaddialog_StandardPadding_XRBFu gamepaddialog_HighlightOnFocus_wE4V6 Panel Focusable" style = "--indent-level:0;" >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldLabelRow_H9WOq" >
< div class = "gamepaddialog_FieldLabel_3b0U-" >
2022-05-04 18:27:13 +01:00
Linear Interpolation
< / div >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldChildren_14_HB" >
< div id = "interpolToggle" tabindex = "0" class = "gamepaddialog_Toggle_24G4g Focusable" onclick = "onclick_interpolToggle()" >
< div class = "gamepaddialog_ToggleRail_2JtC3" > < / div >
< div class = "gamepaddialog_ToggleSwitch_3__OD" > < / div >
2022-05-04 18:27:13 +01:00
< / div >
< / div >
< / div >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldDescription_2OJfk" > Pretends a straight line connects points< / div >
2022-05-04 18:27:13 +01:00
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Fan Info -->
2022-05-12 18:14:36 +01:00
< div class = "quickaccesscontrols_PanelSection_2C0g0" onclick = "updateBatteryStats()" style = "margin-bottom:0px;" >
2022-05-04 18:27:13 +01:00
<!-- <div class="quickaccesscontrols_PanelSectionTitle_1IigU">
< div class = "quickaccesscontrols_Text_1cokl" > Fan< / div >
< / div > -->
< div class = "Panel Focusable" tabindex = "0" >
2022-05-12 18:14:36 +01:00
< div class = "quickaccesscontrols_PanelSectionRow_2VQ88" >
2022-05-28 01:52:32 +01:00
< div class = "gamepaddialog_Field_S-_La gamepaddialog_WithFirstRow_qFXi6 gamepaddialog_VerticalAlignCenter_3XNvA gamepaddialog_InlineWrapShiftsChildrenBelow_pHUb6 gamepaddialog_WithBottomSeparatorStandard_3s1Rk gamepaddialog_StandardPadding_XRBFu gamepaddialog_HighlightOnFocus_wE4V6 Panel Focusable" style = "--indent-level:0;padding-left:0px;padding-right:0px;" >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldLabelRow_H9WOq" >
< div class = "gamepaddialog_FieldLabel_3b0U-" > Current Fan Speed< / div >
< div class = "gamepaddialog_FieldChildren_14_HB" >
< div class = "gamepaddialog_LabelFieldValue_5Mylh" id = "fanNow" > (|-_-|) < / div >
2022-05-04 18:27:13 +01:00
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "Panel Focusable" tabindex = "0" >
2022-05-12 18:14:36 +01:00
< div class = "quickaccesscontrols_PanelSectionRow_2VQ88" >
2022-05-28 01:52:32 +01:00
< div class = "gamepaddialog_Field_S-_La gamepaddialog_WithFirstRow_qFXi6 gamepaddialog_VerticalAlignCenter_3XNvA gamepaddialog_InlineWrapShiftsChildrenBelow_pHUb6 gamepaddialog_WithBottomSeparatorStandard_3s1Rk gamepaddialog_StandardPadding_XRBFu gamepaddialog_HighlightOnFocus_wE4V6 Panel Focusable" style = "--indent-level:0;padding-left:0px;padding-right:0px;" >
2022-05-12 18:14:36 +01:00
< div class = "gamepaddialog_FieldLabelRow_H9WOq" >
< div class = "gamepaddialog_FieldLabel_3b0U-" > Current Temperature< / div >
< div class = "gamepaddialog_FieldChildren_14_HB" >
< div class = "gamepaddialog_LabelFieldValue_5Mylh" id = "tempNow" > (|-_-|) < / div >
2022-05-04 18:27:13 +01:00
< / div >
< / div >
< / div >
< / div >
< / div >
2022-05-04 01:26:51 +01:00
< / div >
2022-05-02 01:16:30 +01:00
< / body >
2022-05-02 01:21:57 +01:00
< / html >
