-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
194 lines (190 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="he">
<head>
<title> Inbetween </title>
<link rel="icon" href="data/hexiconW.png">
<meta charset="UTF-8" dir="rtl">
<meta name="description" content="A suggestion of a Parametric Type specimine, to highlight it's extended features and encourage exploration of the available parameters.">
<!-- NOTE order is relevant -->
<!-- <link rel="preload" href="font/NoordzijTributev2GX.ttf" as="font" type="font/ttf"> -->
<!-- <link rel="preload" href="data/openingPage.png" as="image"> -->
<link rel="stylesheet" media="all" href="styles.css"/>
<link rel="stylesheet" media="all" href="css/controlers.css"/>
<script src="js/controlerFunctions.js" type="text/javascript"></script>
<!-- Hotjar Tracking Code for https://ronyginosar.github.io/parametricSpecimen/ -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:1351216,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<section class = "top">
<header>
<!-- TODO -->
</header>
</section>
<!-- <section id="opener">
<div class="openingText">
<b>שוטט</b>
לגילוי גופנים נוספים/
<br>
<b>התקרב</b>
לתצוגה בכדי להוסיפם/
<br>
<b>לחץ</b>
להתאמה סופית והורדה/
<br>
<br>
בחר נקודת התחלה לשיטוט
<span class="openingOptions" id="optionA">א</span>
או
<span class="openingOptions" id="optionB">א</span>
</div>
</section> -->
<section class="main">
<!-- <img id="instructions" type="image" src="data/hoverZoomIcon.png" class="icon"></img> -->
<section class = "textTester">
<div class=”container”>
<div class="block1">
<div class="controlers">
<!-- TODO: update upon doc load -->
<input class="styleslider sizeInput" type="range" min="6" max="140" value="17" orient="vertical" oninput="updateSize('controlers','h3')">
<p class="tooltiptext">גודל</p>
<div class="stylesliderLabel sizeLabel">17</div>
</input>
<input class="styleslider spacingInput" type="range" min="-8" max="8" value="0" oninput="updateSpacing('controlers','h3')">
<p class="tooltiptext">קרנינג</p>
<div class="stylesliderLabel spacingLabel">0</div>
</input>
<input class="styleslider heightInput" type="range" min="0" max="100" value="26" oninput="updateHeight('controlers','h3')">
<p class="tooltiptext">לדינג</p>
<div class="stylesliderLabel heightLabel">26</div>
</input>
</div>
<h2 contenteditable="true" >
מצבי
<br>
ביניי<div class="cursor">ם<i></i></div>
</h2>
<h3 contenteditable="true" >
מאז מהפכת הדפוס צורת הספסמין כמעט ולא השתנתה / הספסמין היה ונותר קטלוג מודפס עם גדלים ומשקלים שונים / בווב נוספו סליידרים לאותן המטרות.
<br>
<br>
צורת הספסמין עולה לשאלה לאור יציאת עוד ועוד גופנים פרמטרים אל אוויר העולם
<!-- לפני כשנתיים יצאה לעולם טכנולוגיה חדשה לקבצי פונט – פונט פרמטרי / הצורך היה פרקטי / להאיץ את האינטרנט על ידי צמצום מספר הקבצים שנדרש להפעלת אתר / במקום פונט אחד רגיל אחד נטוי ואחד שמן /כעת ניתן להשתמש בקובץ יחיד שאליו מוזנים משתנים שונים ומתקבלים גופנים שונים / מאותה המשפחה -->
<br>
<br>
לצד הצד הפרקטי / נוצר כלי עיצובי חזק בדמות עיצוב פונט כמערכת וגבולות גזרה / לעומת אינסטנס יחיד של גופן / אך איך אמור להיראות ספסמין של גופן כזה
<!-- <br>
<br> -->
<!-- המטרה של פרוייקט זה היא לבחון את שאלה זו בדיוק / איך ניתן להשתמש בתכונותיו המיוחדות של סוג הגופן לשם תצוגה אינטואיטיבית יותר ושימושית יותר / לעומת התצוגה הדיפולטיבית הקיימת כיום העושה שימוש יתר בסליידרים (דבר שגורם לבסוף לחוסר שימוש באותם הגופנים) -->
</h3>
</div>
<!-- <h1 contenteditable="true" >
אבגדהוזחטיכךלמם
<br>
נןסעפףצץקרשת
</h1> -->
<!-- <div class="tuner">
<div class="controlers">
<input class="styleslider stylParam" type="range" min="0" max="4" value="0" orient="vertical" oninput="updateStyl('controlers','tuner')">
<div class="stylesliderLabel stylLabel">0</div>
<p class="tooltiptext stylLabel">סגנון</p>
</input>
<input class="styleslider ctrsParam" type="range" min="0" max="40" value="0" oninput="updateCtrs('controlers','tuner')">
<div class="stylesliderLabel ctrsLabel">0</div>
<p class="tooltiptext ctrsLabel">קונטרסט</p>
</input>
<input class="styleslider wghtParam" type="range" min="40" max="80" value="40" oninput="updateWght('controlers','tuner')">
<div class="stylesliderLabel wghtLabel">40</div>
<p class="tooltiptext wghtLabel">משקל</p>
</input>
</div>
<span>
א
</span>
<div id="settingsTag" > עט.קונטרסט.משקל </div>
<input id="downloadIcon" type="image" src="data/downloadIcon.png" onclick="downloadParams()"></input>
</div> -->
</div>
</section> <!-- END TESTER -->
<section class = "bottomSection">
<!-- NOTE: dont put anything after "onclick" -->
<input id="downloadIcon" class="icon" type="image" src="data/downloadIconW.png" onclick="downloadParams()"></input>
<div id="settingsTag" >40.0.4 סגנון.קונטרסט.משקל </div>
<!-- <form>
<input class="icon" id=messageInputBox type="text" maxlength="2" size="3" name="messageInput" value="א">
</form>
<input type="image" src="data/bwicon.png" class="icon" onclick="colorinvert()"></input>
<input type="image" src="data/hexiconW.png" class="icon" id="showall" onclick="changeResolution()"></input>
<section class="varToggles">
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" onchange="toggleCheck()" checked>
<label for="toggle-on" class="btn"></label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" onchange="toggleCheck()" type="radio">
<label for="toggle-off" class="btn"></label>
</section> -->
</section>
<section class = "topSection">
<!-- NOTE: dont put anything after "onclick" -->
<form>
<input class="icon" id=messageInputBox type="text" maxlength="2" size="3" name="messageInput" value="א">
</form>
<input type="image" src="data/bwicon.png" class="icon" onclick="colorinvert()"></input>
<input type="image" src="data/hexiconW.png" class="icon" id="showall" onclick="changeResolution()"></input>
<!-- <a href="font/NoordzijTributev2GX.ttf" download>
<img id="downloadIcon" type="image" src="data/downloadIcon.png"></img>
</a> -->
<section class="varToggles">
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" onchange="toggleCheck()" checked>
<label for="toggle-on" class="btn">א</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" onchange="toggleCheck()" type="radio">
<label for="toggle-off" class="btn">א</label>
</section>
</section>
<section>
<div id="gridContainer"></div> <!-- WHERE THE SKETCH GOES -->
<!-- GRID LIBRARIES need to go after div defenition -->
<script src="js/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/CSS3DRenderer.js"></script>
<script src="js/d3.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script> -->
<!-- JS scripts after LIBRARIES -->
<!-- <script src="js/managmentFunctions.js" type="text/javascript"></script> -->
<script src="js/letterGrid.js" type="text/javascript"></script>
</section> <!-- end three -->
</section> <!-- end main -->
<div class="tuner">
<span id="tunerspan">
א
</span>
<div class="controlers">
<input class="styleslider stylParam" type="range" min="0" max="4" value="4" orient="vertical" oninput="updateStyl('controlers','tuner')">
<!-- <div class="stylesliderLabel stylLabel">0</div> -->
<p class="tooltiptext stylLabel">סגנון</p>
</input>
<input class="styleslider ctrsParam" type="range" min="0" max="40" value="0" oninput="updateCtrs('controlers','tuner')">
<!-- <div class="stylesliderLabel ctrsLabel">0</div> -->
<p class="tooltiptext ctrsLabel">קונטרסט</p>
</input>
<input class="styleslider wghtParam" type="range" min="40" max="80" value="40" oninput="updateWght('controlers','tuner')">
<!-- <div class="stylesliderLabel wghtLabel">40</div> -->
<p class="tooltiptext wghtLabel">משקל</p>
</input>
</div>
<!-- <div id="settingsTag" > עט.קונטרסט.משקל </div>
<input id="downloadIcon" type="image" src="data/downloadIcon.png" onclick="downloadParams()"></input> -->
</div>
<footer>
<!-- TODO credits -->
</footer>
</body>
</html>