Skip to content

Commit 1008dde

Browse files
GuillaumeDespauxGuillaumeDespaux
authored
Merge pull request #36 from algosup/dev
Last version of the code
2 parents 4cb1213 + 83e24eb commit 1008dde

17 files changed

+756
-667
lines changed

‎src/code/404.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<body>
2929
<h1>404</h1>
3030
<p>Page Not Found</p>
31-
<p><a href="/src/">Go to Homepage</a></p>
31+
<p><a href="/code/client.html">Go to Homepage</a></p>
3232
<button id="previous">Get back to previous page</button>
3333

3434

‎src/code/client.html

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="icon" href="./img/fpga-explorer.png" type="image/x-icon">
88
<script src="https://kit.fontawesome.com/d57f386eaf.js" crossorigin="anonymous"></script>
9+
<script src="js/load.js"></script>
910
<link rel="stylesheet" href="./css/tool-bar.css">
11+
<link rel="stylesheet" href="./css/settings.css">
1012
<link rel="stylesheet" href="./css/data-display.css">
1113
<link rel="stylesheet" href="./css/schematics.css">
14+
<link rel="stylesheet" href="./css/animations.css">
1215
<title>FPGA Web Visualizer</title>
1316
</head>
1417

@@ -21,8 +24,8 @@
2124
<div id="upload-file"><i class="fa-solid top-bar fa-upload "></i></div>
2225
</div>
2326
<div class="control-icon-up">
24-
<div id="pause"><i class="fa-solid top-bar fa-circle-pause "></i></div>
25-
<div id="play"><i class="fa-solid top-bar fa-circle-play "></i></div>
27+
<div id="stop"><i class="fa-solid top-bar fa-circle-stop "></i></div>
28+
<div id="play-pause"><i class="fa-solid top-bar fa-circle-play "></i></div>
2629
<div class="speed-control">
2730
<div id="speed">x1</div>
2831
<div id="speed-plus" class="speed"><i class="fa-solid fa-plus"></i></div>
@@ -76,18 +79,6 @@
7679
<div id="ff-container">
7780
</div>
7881
</div>
79-
<!-- <div>
80-
<p>LUT</p>
81-
<div class="back-lines"></div>
82-
<div id="lut-container">
83-
</div>
84-
</div>
85-
<div>
86-
<p>Flip-flop</p>
87-
<div class="back-lines"></div>
88-
<div id="ff-container">
89-
</div>
90-
</div> -->
9182
<div>
9283
<p>Output</p>
9384
<div class="back-lines"></div>
@@ -104,11 +95,42 @@
10495
</div>
10596
<div id="connections"></div>
10697
</div>
98+
<div id="settings-menu">
99+
<div id="settings-page-content">
100+
<div id="settings-page-header">
101+
<div id="settings-page-title">Settings</div>
102+
<div id="settings-page-close"><i class="fa-solid fa-times"></i></div>
103+
</div>
104+
<div id="settings-page-body">
105+
<div class="settings-list">
106+
<h3 class="settings-title">Application Settings</h3>
107+
<div class="setting">
108+
<p class="setting-name">Clock cycle per step:</p>
109+
<input type="text" name="" class="setting-value">
110+
</div>
111+
<div class="setting">
112+
<p class="setting-name">Number of LUT columns:</p>
113+
<input type="text" name="" class="setting-value">
114+
</div>
115+
<div class="setting">
116+
<p class="setting-name">Number of Flip Flop columns:</p>
117+
<input type="text" name="" class="setting-value">
118+
</div>
119+
<div class="separator"></div>
120+
<h3 class="settings-title">Application Information:</h3>
121+
<p class="setting-name">Application version: V0.01</p>
122+
<div class="separator"></div>
123+
<div id="settings-save">Save and exit</div>
124+
</div>
125+
</div>
126+
</div>
127+
</div>
107128

108129
<script src="js/variables.js"></script>
109130
<script type="module" src="js/parse-sdf-to-json.js"></script>
110-
<script src="js/load.js"></script>
111131
<script src="js/tool-bar.js" defer></script>
132+
<script src="js/animation.js"></script>
133+
<script src="js/settings.js" defer></script>
112134
<script src="js/schematics.js"></script>
113135
<script src="js/connections.js" defer></script>
114136
<script src="js/parse-json-to-data.js"></script>

‎src/code/css/schematics.css

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
--ff-color: #D32F2FFF;
99
--clock-color: #8E24AAFF;
1010
--connection-used: #00C853FF;
11-
--connection-unused: var(--on-primary);
1211
--element-width: 10vh;
1312
--element-height: 18vh;
1413
--in-element-height: 16vh;
@@ -66,12 +65,12 @@
6665
border-left-width: .3vh;
6766
border-color: #808080FF;
6867
border-style: dashed;
68+
z-index: -20;
6969
}
7070

7171
#input-container {
7272
position: absolute;
7373
margin-top: var(--element-margin-top);
74-
z-index: 13;
7574
}
7675

7776
.input-element{
@@ -122,6 +121,10 @@
122121
border-radius: 50%;
123122
}
124123

124+
.clock-element {
125+
z-index: 4;
126+
}
127+
125128

126129
.clock-element > div {
127130
background-color: var(--clock-color);
@@ -385,6 +388,12 @@
385388
height: 18vh;
386389
top: 82vh;
387390
left: 0;
388-
z-index: 1;
389-
background: linear-gradient(to top, rgb(from var(--tertiary) r g b / 1), rgb(from var(--primary) r g b / .1));
391+
z-index: 2;
392+
background: linear-gradient(to top,
393+
rgb(from var(--primary) r g b / 1),
394+
rgb(from var(--primary) r g b / 1),
395+
rgb(from var(--primary) r g b / 1),
396+
rgb(from var(--primary) r g b / 1),
397+
rgb(from var(--primary) r g b / 0.7),
398+
rgb(from var(--primary) r g b / 0));
390399
}

‎src/code/css/settings.css

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
#settings-menu{
2+
display: none;
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
background-color: rgba(0, 0, 0, 0.5);
9+
z-index: 1000;
10+
}
11+
12+
#settings-page-content{
13+
position: fixed;
14+
width: 26vw;
15+
height: 60vh;
16+
top: 50vh;
17+
left: 50vw;
18+
transform: translate(-50%, -50%);
19+
background-color: var(--primary);
20+
border-radius: 2vh;
21+
border: .4vh solid var(--on-primary);
22+
box-shadow: 0 .3vh 1vh var(--shadow-color);
23+
}
24+
25+
#settings-page-header{
26+
width: 100%;
27+
display: flex;
28+
justify-content: center;
29+
font-size: 2.5vh;
30+
font-weight: bold;
31+
color: var(--on-primary);
32+
border-bottom: .3vh solid var(--on-primary);
33+
padding: 1vh 0 1vh 0;
34+
background-color: var(--secondary);
35+
border-radius: 2vh 2vh 0 0;
36+
}
37+
38+
#settings-page-close{
39+
position: absolute;
40+
width: 3vh;
41+
aspect-ratio: 1;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
top: 1vh;
46+
right: 1vh;
47+
font-size: 2.5vh;
48+
color: var(--on-primary);
49+
cursor: pointer;
50+
background-color: red;
51+
border-radius: 50%;
52+
border: .3vh solid var(--on-primary);
53+
box-shadow: 0 .1vh 1vh var(--shadow-color);
54+
}
55+
56+
.separator{
57+
margin-left: 1%;
58+
width: 98%;
59+
height: .1vh;
60+
background-color: var(--on-primary);
61+
margin-top: 7vh;
62+
}
63+
64+
65+
#settings-page-body{
66+
padding: 1vh;
67+
padding-left: 2vh;
68+
}
69+
70+
.settings-title{
71+
font-size: 1.8vh;
72+
color: var(--on-primary);
73+
}
74+
75+
.setting{
76+
width: 70%;
77+
display: flex;
78+
justify-content: space-between;
79+
align-items: center;
80+
margin: 1vh 0 1vh 0;
81+
}
82+
83+
.setting-name{
84+
font-size: 1.3vh;
85+
padding-left: 3vh;
86+
color: var(--on-primary);
87+
}
88+
89+
.setting-value{
90+
width: 3vw;
91+
aspect-ratio: 2/1;
92+
background-color: var(--tertiary);
93+
border-radius: 1vh;
94+
border: .3vh solid var(--on-primary);
95+
outline: none;
96+
text-align: center;
97+
color: var(--on-tertiary);
98+
font-size: 1.5vh;
99+
}
100+
101+
#settings-save{
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
105+
width: 10vw;
106+
height: 4vh;
107+
font-size: 1.5vh;
108+
color: var(--on-primary);
109+
background-color: #0AA117;
110+
border-radius: 2vh;
111+
border: .3vh solid var(--on-primary);
112+
cursor: pointer;
113+
position: absolute;
114+
bottom: 1vh;
115+
left: 50%;
116+
transform: translateX(-50%);
117+
}

‎src/code/css/tool-bar.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
--secondary: #1B263BFF;
44
--tertiary: #415A77FF;
55
--on-primary: #E0E1DDFF;
6+
--on-tertiary: #E0E1DDFF;
67
--icons: #E0E1DDFF;
78
--tool-data-back: #0D1B2AFF;
89
--tool-data-text: #E0E1DDFF;
@@ -12,7 +13,6 @@
1213
[data-theme="light"] {
1314
--primary: #E0E1DDFF;
1415
--secondary: #415A77FF;
15-
--tertiary: #1B263BFF;
1616
--on-primary: #0D1B2AFF;
1717
--shadow-color: rgba(0, 0, 0, 0.9);
1818
}
@@ -23,6 +23,7 @@ body {
2323
background-color: var(--primary);
2424
font-family: 'ibm-plex-mono', sans-serif;
2525
font-weight: bold;
26+
font-size: 1vh;
2627
}
2728

2829
::-webkit-scrollbar {
@@ -105,13 +106,15 @@ body {
105106
align-items: center;
106107
}
107108

108-
input{
109+
#open-folder-input{
109110
opacity: 0.0;
110111
position: absolute;
111112
top:0;
112113
left: 0;
113114
bottom: 0;
114115
right:0;
116+
width: 0;
117+
height: 0;
115118
}
116119

117120

0 commit comments

Comments
 (0)