Added uikit and basic visual stuff.

This commit is contained in:
Quentin Decaunes 2019-02-27 14:00:19 +01:00
parent 1e9b8a8c6a
commit 9492952e16
5 changed files with 132 additions and 19 deletions

View File

@ -1,19 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./node_modules/uikit/dist/css/uikit.min.css" />
<script src="./node_modules/uikit/dist/js/uikit.min.js"></script>
<script src="./node_modules/uikit/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<h1>Ryzen Controller</h1>
<ul uk-switcher uk-tab>
<li><a href="#">Settings</a></li>
<li><a href="#">Presets</a></li>
<li><a href="#">Logs</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li class="uk-container">
<form>
<ul uk-accordion="multiple: true">
<li>
<a class="uk-accordion-title" href="#">STAPM Limit (W)</a>
<div class="uk-accordion-content">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-4@s">
<input class="uk-input" type="number" min="5" max="60" value="15" id="stapm_limit_w" repeat="stapm_limit_w_range">
</div>
<div class="uk-width-2-3@s">
<input class="uk-range" type="range" min="5" max="60" value="15" repeat="stapm_limit_w" id="stapm_limit_w_range">
</div>
</div>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">PPT Fast Limit (W)</a>
<div class="uk-accordion-content">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-4@s">
<input class="uk-input" type="number" min="5" max="60" value="15" id="ppt_fast_limit_w" repeat="ppt_fast_limit_w_range">
</div>
<div class="uk-width-2-3@s">
<input class="uk-range" type="range" min="5" max="60" value="15" repeat="ppt_fast_limit_w" id="ppt_fast_limit_w_range">
</div>
</div>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">PPT Slow Limit (W)</a>
<div class="uk-accordion-content">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-4@s">
<input class="uk-input" type="number" min="5" max="60" value="15" id="ppt_slow_limit_w" repeat="ppt_slow_limit_w_range">
</div>
<div class="uk-width-2-3@s">
<input class="uk-range" type="range" min="5" max="60" value="15" repeat="ppt_slow_limit_w" id="ppt_slow_limit_w_range">
</div>
</div>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Temperature Limit (°C)</a>
<div class="uk-accordion-content">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-4@s">
<input class="uk-input" type="number" min="5" max="60" value="15" id="temperature_limit_c" repeat="temperature_limit_c_range">
</div>
<div class="uk-width-2-3@s">
<input class="uk-range" type="range" min="5" max="60" value="15" repeat="temperature_limit_c" id="temperature_limit_c_range">
</div>
</div>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">VRM Current (mA)</a>
<div class="uk-accordion-content">
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-4@s">
<input class="uk-input" type="number" min="5" max="60" value="15" id="vrm_current_m_a" repeat="vrm_current_m_a_range">
</div>
<div class="uk-width-2-3@s">
<input class="uk-range" type="range" min="5" max="60" value="15" repeat="vrm_current_m_a" id="vrm_current_m_a_range">
</div>
</div>
</div>
</li>
</ul>
</form>
</li>
<li class="uk-container">Will be available soon!</li>
<li class="uk-container">Will be available soon!</li>
</ul>
<script type="text/javascript" src="./js/settings.js"></script>
</body>
</html>

26
js/settings.js Normal file
View File

@ -0,0 +1,26 @@
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function(){
var ranges = document.querySelectorAll('[repeat]');
for (const range in ranges) {
if (ranges.hasOwnProperty(range)) {
const element = ranges[range];
element.addEventListener('change', function(event) {
var repeater = document.getElementById(event.target.attributes.repeat.value);
repeater.value = event.target.value;
});
}
}
});
/*
stapm_limit_w_range
ppt_fast_limit_w_range
ppt_slow_limit_w_range
temperature_limit_c_range
vrm_current_m_a_range
*/

5
package-lock.json generated
View File

@ -1140,6 +1140,11 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
"dev": true
},
"uikit": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/uikit/-/uikit-3.0.3.tgz",
"integrity": "sha512-Z73TXlnfJCAXczg5mFCZSTwR0Ii1wW2fZumfIR8G1x1x4SyKHpkU0JCZDoIryYFMu1gSpvy5hZiXk3t4i5tTlw=="
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",

View File

@ -18,5 +18,8 @@
"license": "CC0-1.0",
"devDependencies": {
"electron": "^4.0.4"
},
"dependencies": {
"uikit": "^3.0.3"
}
}

View File

@ -1,3 +0,0 @@
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.