Skip to content

Commit 2dcaffe

Browse files
DevanitiDevaniti
authored
Updated UI of GUI (#26)
1 parent 7847269 commit 2dcaffe

17 files changed

+129
-34
lines changed

‎source/GUI/html/database.svg

+1
Loading

‎source/GUI/html/default.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/GUI/html/github-mark.svg

+1
Loading

‎source/GUI/html/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><title>D3d12infoGUI Report</title><meta charset="UTF-8"><script src="reports.js"></script><script defer="defer" src="default.js"></script></head><body><noscript>This app requires javascript to run</noscript><main><div class="ReportTable"><div id="ListContainer"></div><div id="SearchBarPropertiesContainer"></div><div id="HeaderContainer"></div><div id="ReportContainer"></div></div></main></body></html>
1+
<!doctype html><html><head><title>D3d12infoGUI Report</title><meta charset="UTF-8"><script src="reports.js"></script><script defer="defer" src="default.js"></script></head><body><noscript>This app requires javascript to run</noscript><div class="header"><div style="width:.5em"></div><div class="headerText">D3d12infoGUI Report</div><div style="width:1em"></div><a class="headerLink" href="https://d3d12infodb.boolka.dev/"><div class="headerText">Online Database</div><img class="icon" src="database.svg"></a><div style="width:1em"></div><div class="flexRight"><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI"><div class="headerText">D3d12infoGUI on GitHub</div><img class="icon" src="github-mark.svg"> </a><a class="headerLink" href="https://github.com/sawickiap/D3d12info"><div class="headerText">D3d12info on GitHub</div><img class="icon" src="github-mark.svg"></a><div class="headerLink gui-tooltip"><div class="headerText">About</div><img class="tooltipicon" src="info.svg"><div class="gui-tooltiptext" style="width:35vw;left:70%;transform:translateX(-100%)">D3d12infoGUI is a tool for querying support for various Direct3D 12 features.<br>In this report you can find data about all D3D12 capable GPUs in your local machine.<br>There's also community-driven online database listing same information for various hardware which you can open via "Online Database" link in the header.<br>You can submit your reports to the online database with one of the submit buttons if database doesn't contain equivalent data already.<br>If database contains equivalent report, or if you just submitted one of your reports, you can then open it online and share the link to your report.<br>Those reports don't contain any personal information, you can see full contents of those reports on this page before submitting.</div></div><div style="width:3em"></div></div><div style="width:.5em"></div></div><main><div class="ReportTable"><div id="ListContainer"></div><div id="SearchBarPropertiesContainer"></div><div id="HeaderContainer"></div><div id="ReportContainer"></div></div></main></body></html>

‎source/frontend/assets/css/main.css

+34-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ a:hover {
3434
.icon {
3535
width: 1.5em;
3636
height: 1.5em;
37-
margin-right: 0.2em;
37+
margin-left: 0.2em;
3838
}
3939

4040
.headerLink {
@@ -76,6 +76,33 @@ a:hover {
7676
vertical-align: middle;
7777
}
7878

79+
.gui-tooltip {
80+
position: relative;
81+
}
82+
83+
.gui-tooltip .gui-tooltiptext {
84+
visibility: hidden;
85+
background-color: #ffffff;
86+
color: #000000;
87+
text-align: center;
88+
border-radius: 0.4em;
89+
border-color: #7f7f7f;
90+
border-style: solid;
91+
border-width: 0.1em;
92+
padding: 0.3em;
93+
margin: 0 0.2em;
94+
font-size: initial;
95+
font-family: initial;
96+
97+
position: absolute;
98+
z-index: 1;
99+
top: 110%;
100+
}
101+
102+
.gui-tooltip:hover .gui-tooltiptext {
103+
visibility: visible;
104+
}
105+
79106
@media (prefers-color-scheme: dark) {
80107
body {
81108
color: #e1e1e1;
@@ -101,4 +128,10 @@ a:hover {
101128
filter: invert(1);
102129
}
103130

131+
.gui-tooltip .gui-tooltiptext {
132+
background-color: #232323;
133+
color: #ffffff;
134+
border-color: #7f7f7f;
135+
}
136+
104137
}

‎source/frontend/assets/css/report_table.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ td:nth-of-type(even) {
6767

6868
button {
6969
margin: auto;
70-
width: 9.2em;
70+
width: 11.5em;
7171
background-color: #029c07;
7272
border: none;
7373
color: white;
@@ -77,7 +77,7 @@ button {
7777
text-align: center;
7878
text-decoration: none;
7979
display: inline-block;
80-
font-size: 1.3em;
80+
font-size: 1.1em;
8181
}
8282

8383
button:disabled {

‎source/frontend/assets/html_gui/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,40 @@
99

1010
<body>
1111
<noscript>This app requires javascript to run</noscript>
12+
<div class="header">
13+
<div style="width: 0.5em"></div>
14+
<div class="headerText">D3d12infoGUI Report</div>
15+
<div style="width: 1.0em"></div>
16+
<a class="headerLink" href="https://d3d12infodb.boolka.dev/">
17+
<div class="headerText">Online Database</div>
18+
<img class="icon" src="../icons/database.svg">
19+
</a>
20+
<div style="width: 1em"></div>
21+
<div class="flexRight">
22+
<a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI">
23+
<div class="headerText">D3d12infoGUI on GitHub</div>
24+
<img class="icon" src="../icons/github-mark.svg">
25+
</a>
26+
<a class="headerLink" href="https://github.com/sawickiap/D3d12info">
27+
<div class="headerText">D3d12info on GitHub</div>
28+
<img class="icon" src="../icons/github-mark.svg">
29+
</a>
30+
<div class="headerLink gui-tooltip">
31+
<div class="headerText">About</div>
32+
<img class="tooltipicon" src="../icons/info.svg">
33+
<div class="gui-tooltiptext" style="width: 35vw;left: 70%;transform: translateX(-100%);">
34+
D3d12infoGUI is a tool for querying support for various Direct3D 12 features.<br>
35+
In this report you can find data about all D3D12 capable GPUs in your local machine.<br>
36+
There's also community-driven online database listing same information for various hardware which you can open via "Online Database" link in the header.<br>
37+
You can submit your reports to the online database with one of the submit buttons if database doesn't contain equivalent data already.<br>
38+
If database contains equivalent report, or if you just submitted one of your reports, you can then open it online and share the link to your report.<br>
39+
Those reports don't contain any personal information, you can see full contents of those reports on this page before submitting.
40+
</div>
41+
</div>
42+
<div style="width: 3em"></div>
43+
</div>
44+
<div style="width: 0.5em"></div>
45+
</div>
1246
<main>
1347
<div class="ReportTable">
1448
<div id="ListContainer"></div>

‎source/frontend/assets/html_website/header.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@
66
</a>
77
<div style="width: 1em"></div>
88
<a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest">
9-
<img class="icon" src="../icons/download.svg">
109
<div class="headerText">GUI</div>
10+
<img class="icon" src="../icons/download.svg">
1111
</a>
1212
<a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI">
13-
<img class="icon" src="../icons/github-mark.svg">
1413
<div class="headerText">Source</div>
14+
<img class="icon" src="../icons/github-mark.svg">
1515
</a>
1616
<div style="width: 1em"></div>
1717
<a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest">
18-
<img class="icon" src="../icons/download.svg">
1918
<div class="headerText">CLI</div>
19+
<img class="icon" src="../icons/download.svg">
2020
</a>
2121
<a class="headerLink" href="https://github.com/sawickiap/D3d12info">
22-
<img class="icon" src="../icons/github-mark.svg">
2322
<div class="headerText">Source</div>
23+
<img class="icon" src="../icons/github-mark.svg">
2424
</a>
2525
<div class="flexRight">
2626
<a class="headerLink" href="FeatureTable.html">

‎source/frontend/assets/icons/database.svg

+1
Loading

‎source/frontend/assets/js/gui.mjs

+43-18
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import ReportContainer from './report_container.mjs';
2-
import * as Server from './server.mjs';
3-
import * as HTML from './html.mjs';
41
import * as FormatTable from './format_table.mjs';
5-
import * as Properties from './properties.mjs';
62
import Globals from './globals.mjs';
3+
import * as HTML from './html.mjs';
4+
import * as Properties from './properties.mjs';
5+
import ReportContainer from './report_container.mjs';
6+
import * as Server from './server.mjs';
77

88
const SubmissionIDs = [[], []]
99

@@ -69,6 +69,40 @@ function SubmitAllReports() {
6969
UpdateList()
7070
}
7171

72+
function AddSubmitAllButton(tableBody, tableWidth) {
73+
const lastRow = document.createElement("tr")
74+
lastRow.style.textAlign = "center"
75+
76+
const cell = document.createElement("td")
77+
cell.colSpan = tableWidth
78+
79+
let submitButton = document.createElement("button")
80+
submitButton.classList.add("gui-tooltip")
81+
submitButton.disabled = !HaveUnsubmittedReports()
82+
submitButton.onclick = () => {
83+
SubmitAllReports()
84+
};
85+
86+
const buttonText = document.createTextNode("Submit all reports to online database")
87+
submitButton.appendChild(buttonText)
88+
89+
let tooltipIcon = document.createElement("img")
90+
tooltipIcon.classList.add("tooltipicon")
91+
tooltipIcon.style = "filter: brightness(1.5);"
92+
tooltipIcon.src = "info.svg"
93+
submitButton.appendChild(tooltipIcon)
94+
95+
const tooltipText = document.createElement("div")
96+
tooltipText.classList.add("gui-tooltiptext")
97+
tooltipText.style = "width: 25vw;left: 50%;transform: translateX(-50%)"
98+
tooltipText.textContent = "Allows other users to see capabilities of your GPU and sharing of your reports via link to the online database. Those reports don't contain any personal information, you can see full contents of those reports on this page before submitting."
99+
submitButton.appendChild(tooltipText)
100+
101+
cell.appendChild(submitButton)
102+
lastRow.appendChild(cell)
103+
tableBody.appendChild(lastRow)
104+
}
105+
72106
function UpdateList() {
73107
const listContainer = document.getElementById("ListContainer")
74108

@@ -87,20 +121,9 @@ function UpdateList() {
87121
if (IsPreviewAvailable())
88122
header.push("Header.Using preview Agility SDK")
89123

90-
header.push("Online link")
124+
header.push("Database status")
91125

92126
const firstRow = document.createElement("tr")
93-
const cell = document.createElement("td")
94-
cell.colSpan = header.length
95-
let submitButton = document.createElement("button")
96-
submitButton.disabled = !HaveUnsubmittedReports();
97-
submitButton.onclick = () => {
98-
SubmitAllReports()
99-
}
100-
const buttonText = document.createTextNode("Submit all reports")
101-
submitButton.appendChild(buttonText)
102-
cell.appendChild(submitButton)
103-
firstRow.appendChild(cell)
104127
tableBody.appendChild(firstRow)
105128

106129
const secondRow = document.createElement("tr")
@@ -117,7 +140,7 @@ function UpdateList() {
117140
header.forEach(collumn => {
118141
const cell = document.createElement("td")
119142
switch (collumn) {
120-
case "Online link":
143+
case "Database status":
121144
switch (SubmissionIDs[retailIndex][index]) {
122145
case null:
123146
{
@@ -129,7 +152,7 @@ function UpdateList() {
129152
{
130153
let link = document.createElement("a")
131154
link.href = "#"
132-
link.textContent = "Submit"
155+
link.textContent = "Not present, click here to submit"
133156
link.onclick = () => {
134157
SubmissionIDs[retailIndex][index] = null;
135158
UpdateList();
@@ -171,6 +194,8 @@ function UpdateList() {
171194
tableBody.appendChild(row)
172195
});
173196

197+
AddSubmitAllButton(tableBody, header.length)
198+
174199
table.appendChild(tableBody)
175200
listContainer.appendChild(table)
176201
}

‎source/website/FeatureTable.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>D3D12 Feature Table</title><meta name="description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta name="robots" content="index, archive"/><meta name="keywords" content="DirectX, Direct3D, D3D12, DX12"/><meta property="og:title" content="D3D12 Feature Table"/><meta property="og:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta property="og:type" content="website"/><meta property="og:url" content="https://d3d12infodb.boolka.dev/FeatureTable.html"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="D3D12 Feature Table"/><meta name="twitter:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><script defer="defer" src="assets.js"></script><script defer="defer" src="shared.js"></script><script defer="defer" src="feature_table.js"></script></head><body><noscript>This website requires javascript to run</noscript><div class="header"><div style="width:.5em"></div><a class="headerLink" href="index.html"><div class="headerText">D3d12infoDB</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest"><img class="icon" src="download.svg"><div class="headerText">GUI</div></a><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI"><img class="icon" src="github-mark.svg"><div class="headerText">Source</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest"><img class="icon" src="download.svg"><div class="headerText">CLI</div></a><a class="headerLink" href="https://github.com/sawickiap/D3d12info"><img class="icon" src="github-mark.svg"><div class="headerText">Source</div></a><div class="flexRight"><a class="headerLink" href="FeatureTable.html"><div class="headerText">Feature Table</div></a><a class="headerLink" href="about.html"><div class="headerText">About</div></a><div style="width:3em"></div></div><div style="width:.5em"></div></div><main><div class="FeatureTable" id="FeatureTable"></div></main></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>D3D12 Feature Table</title><meta name="description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta name="robots" content="index, archive"/><meta name="keywords" content="DirectX, Direct3D, D3D12, DX12"/><meta property="og:title" content="D3D12 Feature Table"/><meta property="og:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><meta property="og:type" content="website"/><meta property="og:url" content="https://d3d12infodb.boolka.dev/FeatureTable.html"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="D3D12 Feature Table"/><meta name="twitter:description" content="Support matrix for all D3D12 features, grouped per vendor and architecture"/><script defer="defer" src="assets.js"></script><script defer="defer" src="shared.js"></script><script defer="defer" src="feature_table.js"></script></head><body><noscript>This website requires javascript to run</noscript><div class="header"><div style="width:.5em"></div><a class="headerLink" href="index.html"><div class="headerText">D3d12infoDB</div></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest"><div class="headerText">GUI</div><img class="icon" src="download.svg"> </a><a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a><div style="width:1em"></div><a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest"><div class="headerText">CLI</div><img class="icon" src="download.svg"> </a><a class="headerLink" href="https://github.com/sawickiap/D3d12info"><div class="headerText">Source</div><img class="icon" src="github-mark.svg"></a><div class="flexRight"><a class="headerLink" href="FeatureTable.html"><div class="headerText">Feature Table</div></a><a class="headerLink" href="about.html"><div class="headerText">About</div></a><div style="width:3em"></div></div><div style="width:.5em"></div></div><main><div class="FeatureTable" id="FeatureTable"></div></main></body></html>

0 commit comments

Comments
 (0)