kforney/gimm260-data-visualization
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
gimm260-data-visualization/index.html

213 lines
7.8 KiB
HTML
Raw Normal View History

Import stuff from PA9.
2022-12-12 18:23:22 -07:00
<!doctype html>
Initial files and folders for project.
2022-10-25 10:09:29 -06:00
<html lang="en">
<head>
<meta charset="UTF-8">
Import stuff from PA9.
2022-12-12 18:23:22 -07:00
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Add table from PA 13 to page.
2022-12-13 01:08:09 -07:00
<title>Kaj Forney -- GIMM 260 Data Visualization Narrative</title>
Import stuff from PA9.
2022-12-12 18:23:22 -07:00
Initial files and folders for project.
2022-10-25 10:09:29 -06:00
<link rel="stylesheet" href="css/main.css">
Import stuff from PA9.
2022-12-12 18:23:22 -07:00
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/animation.css">
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous"></script>
Initial files and folders for project.
2022-10-25 10:09:29 -06:00
</head>
Import stuff from PA9.
2022-12-12 18:23:22 -07:00
<body class="parallax">
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<h1 class="titlePulse">
<i class="fa-solid fa-gamepad"></i>
Gaming on Linux
<i class="fa-brands fa-steam"></i>
</h1>
</div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<h2>Introduction</h2>
<p>I have been a user of Linux for the past 14 years. In that time, I've observed a notable improvement in the ease of running games on the system, particularly games that were originally made for other operating systems, such as Microsoft Windows.</p>
<p>This can be attributed to the hard work and dedication of the Linux community, particularly the WINE project. More recent improvements are the work of Valve Corporation, who introduced Proton in 2019.</p>
</div>
<div class="col-1"></div>
<div class="col-3 bigIcon">
<i class="fa-brands fa-linux wobble"></i>
</div>
<div class="col-2"></div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-3 bigIcon">
<i class="fa-solid fa-wine-glass wobble"></i>
</div>
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<h2>WINE</h2>
<p>[Introduce the WINE project here, which is the basis for running any Windows application on Linux.]</p>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<h2>Proton</h2>
<p>[Introduce Proton from Valve here.]</p>
</div>
<div class="col-1"></div>
<div class="col-4">
<div class="youtube-container">
<iframe class="youtube-iframe" src="https://www.youtube-nocookie.com/embed/_OAqvtlgfGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="col-1"></div>
<div class="col-4">
<h2>[DATA VIZ HERE]</h2>
</div>
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<p>This data visualization will illustrate the speed at which a newly game can now become Linux-compatible, using Age of Empires II as an example.</p>
</div>
<div class="col-1"></div>
</div>
<div class="spacer"></div>
<h2>[More visualizations will go here...]</h2>
Add table from PA 13 to page.
2022-12-13 01:08:09 -07:00
<div class="row">
<div class="col-4"></div>
<div class="col-4 roundCorners card">
<label>Show Only Working?</label>
<input id='working' type='checkbox' />
<br>
<label>Game Title</label>
<input id='gameTitle' type='text' />
<br>
<label>Linux Distro</label>
<input id='os' type='text' />
<br>
<label>CPU Model</label>
<input id='cpu' type='text' />
<br>
<label>GPU Model</label>
<input id='gpu' type='text' />
<br>
<label>Sort By Time Submitted</label>
<select id='sortTime'>
<option value=''></option>
<option value='ASC'>Ascending</option>
<option value='DESC'>Descending</option>
</select>
<br>
<button id='search'>View Reports</button>
</div>
<div class="col-4"></div>
<script>
const isEmpty = (obj) => Object.keys(obj).length === 0;
document.getElementById('search').addEventListener('click', (event) => {
const dataUrl = 'http://localhost:8888';
let ajaxParameters = {};
if (document.querySelector('#working:checked')) {
ajaxParameters.working = 1;
}
if (document.getElementById('gameTitle').value.length !== 0) {
ajaxParameters.gameTitle = document.getElementById('gameTitle').value;
}
if (document.getElementById('os').value.length !== 0) {
ajaxParameters.os = document.getElementById('os').value;
}
if (document.getElementById('cpu').value.length !== 0) {
ajaxParameters.cpu = document.getElementById('cpu').value;
}
if (document.getElementById('gpu').value.length !== 0) {
ajaxParameters.gpu = document.getElementById('gpu').value;
}
if (document.getElementById('sortTime').value.length !== 0) {
ajaxParameters.sortTime = document.getElementById('sortTime').value;
}
function niceOutput(a) {
if(a == 1) {
return "Yes";
} else {
return "No";
}
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
let displayTable = '<table>' +
'<thead>' +
'<tr>' +
'<th>Game Title</th>' +
'<th>Submitted</th>' +
'<th>Working?</th>' +
'<th>Distro</th>' +
'<th>CPU</th>' +
'<th>GPU</th>' +
'<th>Notes</th>' +
'</tr>' +
'</thead>' +
'<tbody>';
if (typeof this.responseText !== 'undefined' && this.responseText.length > 0) {
let ajaxResult = JSON.parse(this.responseText);
if (typeof ajaxResult.reports !== 'undefined') {
for (let x = 0; x < ajaxResult.reports.length; x++) {
displayTable += '<tr>' +
'<td>' + ajaxResult.reports[x].game_title + '</td>' +
'<td>' + new Date(ajaxResult.reports[x].timestamp * 1000).toLocaleDateString() + '</td>' +
'<td>' + niceOutput(ajaxResult.reports[x].verdict) + '</td>' +
'<td>' + ajaxResult.reports[x].systemInfo_os + '</td>' +
'<td>' + ajaxResult.reports[x].systemInfo_cpu + '</td>' +
'<td>' + ajaxResult.reports[x].systemInfo_gpu + '</td>' +
'<td>' + ajaxResult.reports[x].notes_summary + '</td>' +
'</tr>';
}
}
}
displayTable += '</tbody></table>';
document.getElementById('tableOutput').innerHTML = displayTable;
}
xhttp.open("GET", dataUrl + (!isEmpty(ajaxParameters) ? '?' + new URLSearchParams(ajaxParameters) : ''));
xhttp.send();
});
</script>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-10 overflow" id="tableOutput"></div>
<div class="col-1"></div>
</div>
Import stuff from PA9.
2022-12-12 18:23:22 -07:00
<div id="footer-spacer"></div>
<div id="footer">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<img src="img/logos/lunarpenguin.png" alt="Lunar Penguin Logo" id="footer-logo">
<span id="footer-text">Page created by <a href="https://lunarpenguin.net">Kaj Forney</a>, 2022.</span>
</div>
</div>
</div>
Initial files and folders for project.
2022-10-25 10:09:29 -06:00
</body>
Import stuff from PA9.
2022-12-12 18:23:22 -07:00
</html>
Reference in a new issue Copy permalink