Fantastic/main_view.html

293 lines
15 KiB
HTML
Raw Permalink Normal View History

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>
const PLOT_HEIGHT = 200;
const PLOT_WIDTH = 270;
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", {});
}
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", {});
}
function setPlotSize(x, y) {
return call_plugin_method("set_plot_size", {"x": x, "y": y});
}
// events
async function onload_body() {
let hiderDiv = document.getElementById("hiderDiv");
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);
const state_interpolToggle = await getInterpol(); // retrieve from back-end
setToggleState(document.getElementById("interpolToggle"), state_interpolToggle);
showHideElement(hiderDiv, state_controlToggle);
if (state_controlToggle) {
curve = await getCurve();
buildCurvePlot(curve);
}
window.setInterval(pollStats, 500);
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");
let hiderDiv = document.getElementById("hiderDiv");
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);
}
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);
}
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");
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>";
for (let i = 0; i < curve_points.length; i++) {
const point = curve_points[i];
newStr += "<span style=\"position:absolute;"
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";
newStr += i.toString() + "\" onclick=\"onclick_plotPoint(event," + i.toString() + ")\"></span>";
}
//graphDiv.innerHTML = "";
graphDiv.innerHTML = newStr;
console.log("Fan graph redrawn");
}
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";
}
function showHideElement(elem, visible) {
if (visible) {
elem.style.visibility = "visible";
elem.style.height = "auto";
} else {
elem.style.visibility = "hidden";
elem.style.height = "0px";
}
}
2022-05-12 18:14:36 +01:00
const TOGGLE_ON_CLASS = "gamepaddialog_On_3ld7T"
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-12 18:14:36 +01:00
if (!state && toggle.classList.contains(TOGGLE_ON_CLASS)) {
toggle.classList.remove(TOGGLE_ON_CLASS);
}
}
function getToggleState(toggle) {
2022-05-12 18:14:36 +01:00
return toggle.classList.contains(TOGGLE_ON_CLASS);
}
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;">
<!-- 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>
<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">
<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-">
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>
</div>
</div>
</div>
2022-05-12 18:14:36 +01:00
<div class="gamepaddialog_FieldDescription_2OJfk">Overrides SteamOS fan curve</div>
</div>
</div>
</div>
</div>
<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)">
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">
<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-">
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>
</div>
</div>
</div>
2022-05-12 18:14:36 +01:00
<div class="gamepaddialog_FieldDescription_2OJfk">Pretends a straight line connects points</div>
</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;">
<!--<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">
<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>
</div>
</div>
</div>
</div>
</div>
<div class="Panel Focusable" tabindex="0">
2022-05-12 18:14:36 +01:00
<div class="quickaccesscontrols_PanelSectionRow_2VQ88">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
2022-05-02 01:16:30 +01:00
</body>
2022-05-02 01:21:57 +01:00
</html>