-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
401 lines (356 loc) · 25.1 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html>
<head>
<title>MI Wordcloud</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="node_modules/spectrum-colorpicker/spectrum.css" />
<link rel="stylesheet" href="fonts/fonts.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="loader">
<div class="loader__progressbar">
<div class="loader__progress"></div>
<div class="loader__text">0</div>
</div>
</div>
<header class="header">
<h1 class="header__title">MI Wordcloud</h1>
</header>
<div id="scene">
<div id="svgWrapper"></div>
<div id="timer"></div>
<button id="download">Download</button>
</div>
<div class="options">
<div class="options__toolbar">
<div class="option">
<div class="option__name">Abstand</div>
<div class="option__input">
<input type="range" min="0" max="10" value="2" id="input_margin" />
</div>
<div class="option__value" id="value_margin">2 Pixel</div>
</div>
<div class="option">
<div class="option__name">Schriftart</div>
<div class="option__input">
<div class="select">
<select id="input_fontfam"></select>
<div class="select_arrow"></div>
</div>
</div>
<div class="option__value" id="value_fontfam">WordcloudJS</div>
</div>
<div class="option">
<div class="option__name">Schriftfarbe</div>
<div class="option__input">
<div class="divcolorpicker" id="input_color1"></div>
<div class="divcolorpicker" id="input_color2"></div>
<div class="divcolorpicker" id="input_color3"></div>
<div class="divcolorpicker" id="input_color4"></div>
</div>
</div>
<div class="option">
<div class="option__name">Schriftrichtung</div>
<div class="option__input">
<input type="range" min="0" max="2" value="0" id="input_dir" />
</div>
<div class="option__value" id="value_dir">Horizontal</div>
</div>
<div class="option">
<div class="option__name">Maximale Schriftgröße</div>
<div class="option__input">
<input type="range" min="10" max="200" value="100" id="input_fontsizemax" />
</div>
<div class="option__value" id="value_fontsizemax">100 Pixel</div>
</div>
<div class="option">
<div class="option__name">Minimale Schriftgröße</div>
<div class="option__input">
<input type="range" min="10" max="100" value="20" id="input_fontsizemin" />
</div>
<div class="option__value" id="value_fontsizemin">20 Pixel</div>
</div>
<div class="option">
<div class="option__name">Pfad</div>
<div class="option__input">
<input type="range" min="0" max="1" value="0" id="input_path" />
</div>
<div class="option__value" id="value_path">Spirale</div>
</div>
<div class="option">
<div class="option__name">Alpha</div>
<div class="option__input">
<input type="range" min="0" max="1" value="0" id="input_alpha" />
</div>
<div class="option__value" id="value_alpha">Nein</div>
</div>
</div>
<div class="options__input">
<textarea id="input__text" cols="60" rows="16">Es war einmal ein Mann und eine Frau, die wünschten sich schon lange vergeblich ein Kind, endlich machte sich die Frau Hoffnung, der liebe Gott werde ihren Wunsch erfüllen. Die Leute hatten in ihrem Hinterhaus ein kleines Fenster, daraus konnte man in einen prächtigen Garten sehen, der voll der schönsten Blumen und Kräuter stand; er war aber von einer hohen Mauer umgeben, und niemand wagte hineinzugehen, weil er einer Zauberin gehörte, die große Macht hatte und von aller Welt gefürchtet ward. Eines Tages stand die Frau an diesem Fenster und sah in den Garten hinab, da erblickte sie ein Beet, das mit den schönsten Rapunzeln bepflanzt war; und sie sahen so frisch und grün aus, dass sie lüstern ward und das größte Verlangen empfand, von den Rapunzeln zu essen. Das Verlangen nahm jeden Tag zu, und da sie wusste, dass sie keine davon bekommen konnte, so fiel sie ganz ab, sah blass und elend aus. Da erschrak der Mann und fragte: Was fehlt dir, liebe Frau? - Ach, antwortete sie, wenn ich keine Rapunzeln aus dem Garten hinter unserm Hause zu essen kriege, so sterbe ich. Der Mann, der sie lieb hatte, dachte: Eh du deine Frau sterben läßest, holst du ihr von den Rapunzeln, es mag kosten, was es will. In der Abenddämmerung stieg er also über die Mauer in den Garten der Zauberin, stach in aller Eile eine Handvoll Rapunzeln und brachte sie seiner Frau. Sie machte sich sogleich Salat daraus und aß sie in voller Begierde auf. Sie hatten ihr aber so gut, so gut geschmeckt, dass sie den andern Tag noch dreimal soviel Lust bekam. Sollte sie Ruhe haben, so musste der Mann noch einmal in den Garten steigen. Er machte sich also in der Abenddämmerung wieder hinab, als er aber die Mauer herabgeklettert war, erschrak er gewaltig, denn er sah die Zauberin vor sich stehen. Wie kannst du es wagen, sprach sie mit zornigem Blick, in meinen Garten zu steigen und wie ein Dieb mir meine Rapunzeln zu stehlen? Das soll dir schlecht bekommen. - Ach, antwortete er, lasst Gnade für Recht ergehen, ich habe mich nur aus Not dazu entschlossen: meine Frau hat Eure Rapunzeln aus dem Fenster erblickt, und empfindet ein so großes Gelüsten, dass sie sterben würde, wenn sie nicht davon zu essen bekäme. Da ließ die Zauberin in ihrem Zorne nach und sprach zu ihm: Verhält es sich so, wie du sagst, so will ich dir gestatten, Rapunzeln mitzunehmen, soviel du willst, allein ich mache eine Bedingung: Du musst mir das Kind geben, das deine Frau zur Welt bringen wird. Es soll ihm gut gehen, und ich will für es sorgen wie eine Mutter. Der Mann sagte in der Angst alles zu, und als die Frau in Wochen kam, so erschien sogleich die Zauberin, gab dem Kinde den Namen Rapunzel und nahm es mit sich fort. Rapunzel ward das schönste Kind unter der Sonne. Als es zwölf Jahre alt war, schloss es die Zauberin in einen Turm, der in einem Walde lag, und weder Treppe noch Türe hatte, nur ganz oben war ein kleines Fensterchen. Wenn die Zauberin hinein wollte, so stellte sie sich hin und rief: Rapunzel, Rapunzel, Laß mir dein Haar herunter. Rapunzel hatte lange prächtige Haare, fein wie gesponnen Gold. Wenn sie nun die Stimme der Zauberin vernahm, so band sie ihre Zöpfe los, wickelte sie oben um einen Fensterhaken, und dann fielen die Haare zwanzig Ellen tief herunter, und die Zauberin, stieg daran hinauf. Nach ein paar Jahren trug es sich zu, dass der Sohn des Königs durch den Wald ritt und an dem Turm vorüberkam. Da hörte er einen Gesang, der war so lieblich, dass er still hielt und horchte. Das war Rapunzel, die in ihrer Einsamkeit sich die Zeit vertrieb, ihre süße Stimme erschallen zu lassen. Der Königssohn wollte zu ihr hinaufsteigen und suchte nach einer Türe des Turms, aber es war keine zu finden. Er ritt heim, doch der Gesang hatte ihm so sehr das Herz gerührt, dass er jeden Tag hinaus in den Wald ging und zuhörte. Als er einmal so hinter einem Baum stand, sah er, dass eine Zauberin herankam, und hörte, wie sie hinaufrief: Rapunzel, Rapunzel, Laß dein Haar herunter. Da ließ Rapunzel die Haarflechten herab, und die Zauberin stieg zu ihr hinauf. Ist das die Leiter, auf welcher man hinaufkommt, so will ich auch einmal mein Glück versuchen. Und den folgenden Tag, als es anfing dunkel zu werden, ging er zu dem Turme und rief: Rapunzel, Rapunzel, Laß dein Haar herunter. Alsbald fielen die Haare herab, und der Königssohn stieg hinauf. Anfangs erschrak Rapunzel gewaltig, als ein Mann zu ihr hereinkam, wie ihre Augen noch nie einen erblickt hatten, doch der Königssohn fing an ganz freundlich mit ihr zu reden und erzählte ihr, dass von ihrem Gesang sein Herz so sehr sei bewegt worden, dass es ihm keine Ruhe gelassen und er sie selbst habe sehen müssen. Da verlor Rapunzel ihre Angst, und als er sie fragte, ob sie ihn zum Mann nehmen wollte, und sie sah, dass er jung und schön war, so dachte sie: Der wird mich lieber haben als die alte Frau Gothel, und sagte ja, und legte ihre Hand in seine Hand. Sie sprach: Ich will gerne mit dir gehen, aber ich weiß nicht, wie ich herabkommen kann. Wenn du kommst, so bringe jedesmal einen Strang Seide mit, daraus will ich eine Leiter flechten, und wenn die fertig ist, so steige ich herunter und du nimmst mich auf dein Pferd. Sie verabredeten, dass er bis dahin alle Abend zu ihr kommen sollte, denn bei Tag kam die Alte. Die Zauberin merkte auch nichts davon, bis einmal Rapunzel anfing und zu ihr sagte: Sag Sie mir doch, Frau Gothel, wie kommt es nur, sie wird mir viel schwerer heraufzuziehen als der junge Königssohn, der ist in einem Augenblick bei mir. - Ach du gottloses Kind, rief die Zauberin, was muss ich von dir hören, ich dachte, ich hätte dich von aller Welt geschieden, und du hast mich doch betrogen! In ihrem Zorne packte sie die schönen Haare der Rapunzel, schlug sie ein paarmal um ihre linke Hand, griff eine Schere mit der rechten, und ritsch, ratsch waren sie abgeschnitten, und die schönen Flechten lagen auf der Erde. Und sie war so unbarmherzig, dass sie die arme Rapunzel in eine Wüstenei brachte, wo sie in großem Jammer und Elend leben musste. Denselben Tag aber, wo sie Rapunzel verstoßen hatte, machte abends die Zauberin die abgeschnittenen Flechten oben am Fensterhaken fest, und als der Königssohn kam und rief: Rapunzel, Rapunzel, Laß dein Haar herunter. so ließ sie die Haare hinab. Der Königssohn stieg hinauf, aber er fand oben nicht seine liebste Rapunzel, sondern die Zauberin, die ihn mit bösen und giftigen Blicken ansah. Aha, rief sie höhnisch, du willst die Frau Liebste holen, aber der schöne Vogel sitzt nicht mehr im Nest und singt nicht mehr, die Katze hat ihn geholt und wird dir auch noch die Augen auskratzen. Für dich ist Rapunzel verloren, du wirst sie nie wieder erblicken. Der Königssohn geriet außer sich vor Schmerzen, und in der Verzweiflung sprang er den Turm herab: das Leben brachte er davon, aber die Dornen, in die er fiel, zerstachen ihm die Augen. Da irrte er blind im Walde umher, aß nichts als Wurzeln und Beeren, und tat nichts als jammern und weinen über den Verlust seiner liebsten Frau. So wanderte er einige Jahre im Elend umher und geriet endlich in die Wüstenei, wo Rapunzel mit den Zwillingen, die sie geboren hatte, einem Knaben und Mädchen, kümmerlich lebte. Er vernahm eine Stimme, und sie deuchte ihn so bekannt; da ging er darauf zu, und wie er herankam, erkannte ihn Rapunzel und fiel ihm um den Hals und weinte. Zwei von ihren Tränen aber benetzten seine Augen, da wurden sie wieder klar, und er konnte damit sehen wie sonst. Er führte sie in sein Reich, wo er mit Freude empfangen ward, und sie lebten noch lange glücklich und vergnügt.</textarea>
<button id="input__generate">Generieren</button>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/webfontloader/webfontloader.js"></script>
<script src="node_modules/spectrum-colorpicker/spectrum.js"></script>
<script src="js/wordcloud.js"></script>
<script>
const addWordToScene = (setting) => {
setTimeout(() => {
setting.prog = ((-1 * (setting.wordTable.wordTable.length - setting.wordCount)) / setting.wordCount) * 100;
$('.loader__text').html(parseInt(setting.prog, 10));
$('.loader__progress').css({
'width': setting.prog / 100 * 250 + 'px'
});
return (() => {
if (setting.wordTable.wordTable.length !== 0) {
setting.i++;
const wordTableItem = setting.wordTable.wordTable[0];
let t_fontSize;
let t_alpha;
let t_angle;
let t_color;
if (setting.t_colormod === 1) {
setting.t_colormod = 2;
t_color = setting.color1;
} else if (setting.t_colormod === 2) {
setting.t_colormod = 3;
t_color = setting.color2;
} else if (setting.t_colormod === 3) {
setting.t_colormod = 4;
t_color = setting.color3;
} else if (setting.t_colormod === 4) {
setting.t_colormod = 1;
t_color = setting.color4;
}
t_fontSize = Math.ceil((wordTableItem.count / setting.maxWordCount) * setting.fontSizeMax);
if (t_fontSize < setting.fontSizeMin) {
t_fontSize = setting.fontSizeMin;
}
if (setting.alpha === 1) {
t_alpha = wordTableItem.count / setting.maxWordCount;
if (t_alpha < setting.minAlpha) {
t_alpha = setting.minAlpha;
}
} else {
t_alpha = 1;
}
if (setting.fontdir === 0) {
t_angle = 0;
} else if (setting.fontdir === 1) {
t_angle = 90;
} else {
t_angle = setting.i % setting.modAngle === 0 ? 90 : 0;
}
setting.scene.addWord(setting.wc.createWord({
text: wordTableItem.text,
boundingVolumeMinSize: setting.boundinmgVolumeMinSize,
angle: t_angle,
style: {
fontSize: t_fontSize,
fontFamily: setting.fontFam,
fontColor: t_color,
fontAlpha: t_alpha
}
}), 'center', setting.margin);
setting.wordTable.wordTable.splice(0, 1);
if (setting.wordTable.wordTable.length !== 0) {
addWordToScene(setting);
} else {
finishWordcloud(setting);
}
}
})();
}, 0);
}
const finishWordcloud = (setting) => {
const svgScene = setting.scene.getSvg('svgScene');
const svgWidth = svgScene.getAttribute('width');
const svgHeight = svgScene.getAttribute('height');
const windowWidth = window.innerWidth;
const marginLeft = (windowWidth - parseInt(svgWidth)) / 2;
/* add scene to svgwrapper */
svgScene.setAttribute('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
$('#svgWrapper').css({
'width': svgWidth + 'px'});
document.getElementById('svgWrapper')
.appendChild(svgScene);
/* finish loading */
$('.loader__text').html('100');
$('.loader__progress').css({
'width': '250px'
});
$('.loader').fadeOut(1000);
/* calculate performance */
t1 = performance.now();
time = (t1 - t0) / 1000;
glob_setting = setting;
$('#timer').html(`Berechnungszeit: ${time.toFixed(2)}s`);
/* fade in timer and download button */
$('#timer, #download').fadeIn(1000);
}
const startWordcloud = (wc, pathSpir, pathRect) => {
/* show loading bar */
$('.loader__progress').css({
'width': '0px'
});
$('.loader__text').html('0');
$('.loader').css({'display': 'flex'}).fadeIn(500, () => {
t0 = performance.now();
setTimeout(() => {
$('#svgScene').remove();
let setting = {
wc: wc,
i: 0,
minAlpha: 0.4,
boundinmgVolumeMinSize: 4,
modAngle: 8,
margin: parseInt($('#input_margin').val()),
fontFam: $('#input_fontfam').val(),
color1: wc.rgb2hex($('#input_color1').css('background-color')),
color2: wc.rgb2hex($('#input_color2').css('background-color')),
color3: wc.rgb2hex($('#input_color3').css('background-color')),
color4: wc.rgb2hex($('#input_color4').css('background-color')),
fontdir: parseInt($('#input_dir').val()),
fontSizeMax: parseInt($('#input_fontsizemax').val()),
fontSizeMin: parseInt($('#input_fontsizemin').val()),
path: null,
scene: null,
alpha: parseInt($('#input_alpha').val()),
words: [],
t_colormod: 1,
wordCount: 0,
wordTable: wc.getWordTableFromText($('#input__text').val(), 'german'),
maxWordCount: null,
prog: 0
};
setting.maxWordCount = setting.wordTable.maxWordCount;
setting.wordTable.wordTable.sort(function (a, b) {
return b.count - a.count;
});
setting.path = parseInt($('#input_path').val()) === 0 ? pathSpir : pathRect;
setting.scene = wc.createScene(setting.path);
setting.wordCount = setting.wordTable.wordCount;
addWordToScene(setting);
}, 0);
});
}
$(document).ready(() => {
/* Setup margin value */
$('#input_margin').mousemove(() => {
$('#value_margin').html($('#input_margin').val() + ' Pixel');
});
/* Setup SVG Path */
$('#input_path').mousemove(() => {
if ($('#input_path').val() == 0) {
$('#value_path').html('Spirale');
} else if ($('#input_path').val() == 1) {
$('#value_path').html('Rechteck');
}
});
/* Setup text direction */
$('#input_dir').mousemove(() => {
if ($('#input_dir').val() == 0) {
$('#value_dir').html('Horizontal');
} else if ($('#input_dir').val() == 1) {
$('#value_dir').html('Vertikal');
} else if ($('#input_dir').val() == 2) {
$('#value_dir').html('Beides');
}
});
/* Setup alpha toggle */
$('#input_alpha').mousemove(() => {
if ($('#input_alpha').val() == 0) {
$('#value_alpha').html('Nein');
} else if ($('#input_alpha').val() == 1) {
$('#value_alpha').html('Ja');
}
});
/* Setup maximum font size toggle */
$('#input_fontsizemax').mousemove(() => {
const min = $('#input_fontsizemin');
const max = $('#input_fontsizemax');
const minVal = parseInt(min.val());
const maxVal = parseInt(max.val());
if (maxVal < minVal) {
min.val(maxVal);
$('#value_fontsizemin').html(`${maxVal} Pixel`);
}
$('#value_fontsizemax').html(`${maxVal} Pixel`);
});
/* Setup minimum font size toggle */
$('#input_fontsizemin').mousemove(() => {
const min = $('#input_fontsizemin');
const max = $('#input_fontsizemax');
const minVal = parseInt(min.val());
const maxVal = parseInt(max.val());
if (maxVal < minVal) {
max.val(minVal);
$('#value_fontsizemax').html(`${minVal} Pixel`);
}
$('#value_fontsizemin').html(`${minVal} Pixel`);
});
/* Setup color picker */
const colors = {
'#input_color1': 'DD1166',
'#input_color2': '9313CE',
'#input_color3': '5952E1',
'#input_color4': '00AD2F'
};
Object.keys(colors).forEach((key) => {
$(key).spectrum({
preferredFormat: 'hex',
showInitial: true,
showInput: true,
color: `#${colors[key]}`
}).on('dragstop.spectrum', function(e, color) {
$(key).css({'background-color': color.toHexString()});
});
$(key).css({'background-color': `#${colors[key]}`});
});
/* load fonts and start demo */
let fontFamilies = [
'Tangerine',
'Molle',
'Damion',
'Norican'
];
wc = new WordcloudJS();
wc.loadFonts({
custom: {
families: fontFamilies,
urls: [
'fonts/fonts.css'
]
}
}, () => {
fontFamilies.push('Arial');
fontFamilies.push('Times New Roman');
$('#download').click(() => {
wc.downloadSVG(glob_setting.scene.getSvg('svgScene'));
});
for (let i = 0; i < fontFamilies.length; i++) {
$('#input_fontfam').append(`<option value="${fontFamilies[i]}">${fontFamilies[i]}</option>`);
}
$('#input_fontfam').change(() => {
$('#value_fontfam').css({
'font-family': $('#input_fontfam').val()
});
});
$('#input_fontfam').val('Molle');
$('#value_fontfam').css({
'font-family': $('#input_fontfam').val()
});
const pathRect = wc.getRectSpiralPath(10, 5, 2500, 2500, 5000);
const pathSpir = wc.getSpiralPath(5, 1, 2500, 2500, 5000);
$('#input__generate').click(() => {
startWordcloud(wc, pathSpir, pathRect);
});
});
});
</script>
</body>
</html>