@operato/scene-mpi 8.0.0-beta.1 → 8.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,608 +0,0 @@
1
- /*!
2
- * segment-display.js
3
- *
4
- * Copyright 2012, Rüdiger Appel
5
- * http://www.3quarks.com
6
- * Published under Creative Commons 3.0 License.
7
- *
8
- * Date: 2012-02-14
9
- * Version: 1.0.0
10
- *
11
- * Dokumentation: http://www.3quarks.com/de/Segmentanzeige
12
- * Documentation: http://www.3quarks.com/en/SegmentDisplay
13
- */
14
-
15
- export default class SegmentDisplay {
16
- // Segment display types
17
- public static SevenSegment = 7
18
- public static FourteenSegment = 14
19
- public static SixteenSegment = 16
20
-
21
- // Segment corner types
22
- public static SymmetricCorner = 0
23
- public static SquaredCorner = 1
24
- public static RoundedCorner = 2
25
-
26
- width: number
27
- height: number
28
- pattern: string
29
- value: string
30
- digitHeight: number
31
- digitWidth: number
32
- digitDistance: number
33
- displayAngle: number
34
- segmentWidth: number
35
- segmentDistance: number
36
- segmentCount: number
37
- cornerType: number
38
- colorOn: string
39
- colorOff: string
40
-
41
- constructor(width: number, height: number) {
42
- this.width = width
43
- this.height = height
44
- this.pattern = '##:##:##'
45
- this.value = '12:34:56'
46
- this.digitHeight = 20
47
- this.digitWidth = 10
48
- this.digitDistance = 2.5
49
- this.displayAngle = 12
50
- this.segmentWidth = 2.5
51
- this.segmentDistance = 0.2
52
- this.segmentCount = SegmentDisplay.SevenSegment
53
- this.cornerType = SegmentDisplay.RoundedCorner
54
- this.colorOn = 'rgb(233, 93, 15)'
55
- this.colorOff = 'rgb(75, 30, 5)'
56
- }
57
-
58
- setValue(value: any) {
59
- this.value = value
60
- }
61
-
62
- draw(context: CanvasRenderingContext2D) {
63
- // compute and check display width
64
- var width = 0
65
- var first = true
66
- if (this.pattern) {
67
- for (var i = 0; i < this.pattern.length; i++) {
68
- var c = this.pattern.charAt(i).toLowerCase()
69
- if (c == '#') {
70
- width += this.digitWidth
71
- } else if (c == '.' || c == ':') {
72
- width += this.segmentWidth
73
- } else if (c != ' ') {
74
- return
75
- }
76
- width += first ? 0 : this.digitDistance
77
- first = false
78
- }
79
- }
80
- if (width <= 0) {
81
- return
82
- }
83
-
84
- // compute skew factor
85
- var angle = -1.0 * Math.max(-45.0, Math.min(45.0, this.displayAngle))
86
- var skew = Math.tan((angle * Math.PI) / 180.0)
87
-
88
- // compute scale factor
89
- var scale = Math.min(this.width / (width + Math.abs(skew * this.digitHeight)), this.height / this.digitHeight)
90
-
91
- // compute display offset
92
- var offsetX = (this.width - (width + skew * this.digitHeight) * scale) / 2.0
93
- var offsetY = (this.height - this.digitHeight * scale) / 2.0
94
-
95
- // context transformation
96
- context.save()
97
- context.translate(offsetX, offsetY)
98
- context.scale(scale, scale)
99
- context.transform(1, 0, skew, 1, 0, 0)
100
-
101
- // draw segments
102
- var xPos = 0
103
- var size = this.value ? this.value.length : 0
104
- for (var i = 0; i < this.pattern.length; i++) {
105
- var mask = this.pattern.charAt(i)
106
- var value = i < size ? this.value.charAt(i).toLowerCase() : ' '
107
- xPos += this.drawDigit(context, xPos, mask, value)
108
- }
109
-
110
- // finish drawing
111
- context.restore()
112
- }
113
-
114
- drawDigit(context: CanvasRenderingContext2D, xPos: number, mask: string, c: string) {
115
- switch (mask) {
116
- case '#':
117
- var r = Math.sqrt((this.segmentWidth * this.segmentWidth) / 2.0)
118
- var d = Math.sqrt((this.segmentDistance * this.segmentDistance) / 2.0)
119
- var e = d / 2.0
120
- var f = (this.segmentWidth - d) * Math.sin((45.0 * Math.PI) / 180.0)
121
- var g = f / 2.0
122
- var h = (this.digitHeight - 3.0 * this.segmentWidth) / 2.0
123
- var w = (this.digitWidth - 3.0 * this.segmentWidth) / 2.0
124
- var s = this.segmentWidth / 2.0
125
- var t = this.digitWidth / 2.0
126
-
127
- // draw segment a (a1 and a2 for 16 segments)
128
- if (this.segmentCount == 16) {
129
- var x = xPos
130
- var y = 0
131
- context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@%')
132
- context.beginPath()
133
- switch (this.cornerType) {
134
- case SegmentDisplay.SymmetricCorner:
135
- context.moveTo(x + s + d, y + s)
136
- context.lineTo(x + this.segmentWidth + d, y)
137
- break
138
- case SegmentDisplay.SquaredCorner:
139
- context.moveTo(x + s + e, y + s - e)
140
- context.lineTo(x + this.segmentWidth, y)
141
- break
142
- default:
143
- context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d)
144
- context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y)
145
- }
146
- context.lineTo(x + t - d - s, y)
147
- context.lineTo(x + t - d, y + s)
148
- context.lineTo(x + t - d - s, y + this.segmentWidth)
149
- context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth)
150
- context.fill()
151
-
152
- var x = xPos
153
- var y = 0
154
- context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@')
155
- context.beginPath()
156
- context.moveTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth)
157
- context.lineTo(x + t + d + s, y + this.segmentWidth)
158
- context.lineTo(x + t + d, y + s)
159
- context.lineTo(x + t + d + s, y)
160
- switch (this.cornerType) {
161
- case SegmentDisplay.SymmetricCorner:
162
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y)
163
- context.lineTo(x + this.digitWidth - s - d, y + s)
164
- break
165
- case SegmentDisplay.SquaredCorner:
166
- context.lineTo(x + this.digitWidth - this.segmentWidth, y)
167
- context.lineTo(x + this.digitWidth - s - e, y + s - e)
168
- break
169
- default:
170
- context.lineTo(x + this.digitWidth - this.segmentWidth, y)
171
- context.quadraticCurveTo(
172
- x + this.digitWidth - this.segmentWidth + g,
173
- y,
174
- x + this.digitWidth - this.segmentWidth + f,
175
- y + this.segmentWidth - f - d
176
- )
177
- }
178
- context.fill()
179
- } else {
180
- var x = xPos
181
- var y = 0
182
- context.fillStyle = this.getSegmentColor(c, '02356789acefp', '02356789abcdefgiopqrstz@')
183
- context.beginPath()
184
- switch (this.cornerType) {
185
- case SegmentDisplay.SymmetricCorner:
186
- context.moveTo(x + s + d, y + s)
187
- context.lineTo(x + this.segmentWidth + d, y)
188
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y)
189
- context.lineTo(x + this.digitWidth - s - d, y + s)
190
- break
191
- case SegmentDisplay.SquaredCorner:
192
- context.moveTo(x + s + e, y + s - e)
193
- context.lineTo(x + this.segmentWidth, y)
194
- context.lineTo(x + this.digitWidth - this.segmentWidth, y)
195
- context.lineTo(x + this.digitWidth - s - e, y + s - e)
196
- break
197
- default:
198
- context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d)
199
- context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y)
200
- context.lineTo(x + this.digitWidth - this.segmentWidth, y)
201
- context.quadraticCurveTo(
202
- x + this.digitWidth - this.segmentWidth + g,
203
- y,
204
- x + this.digitWidth - this.segmentWidth + f,
205
- y + this.segmentWidth - f - d
206
- )
207
- }
208
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth)
209
- context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth)
210
- context.fill()
211
- }
212
-
213
- // draw segment b
214
- x = xPos + this.digitWidth - this.segmentWidth
215
- y = 0
216
- context.fillStyle = this.getSegmentColor(c, '01234789adhpy', '01234789abdhjmnopqruwy')
217
- context.beginPath()
218
- switch (this.cornerType) {
219
- case SegmentDisplay.SymmetricCorner:
220
- context.moveTo(x + s, y + s + d)
221
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d)
222
- break
223
- case SegmentDisplay.SquaredCorner:
224
- context.moveTo(x + s + e, y + s + e)
225
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth)
226
- break
227
- default:
228
- context.moveTo(x + f + d, y + this.segmentWidth - f)
229
- context.quadraticCurveTo(
230
- x + this.segmentWidth,
231
- y + this.segmentWidth - g,
232
- x + this.segmentWidth,
233
- y + this.segmentWidth
234
- )
235
- }
236
- context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d)
237
- context.lineTo(x + s, y + h + this.segmentWidth + s - d)
238
- context.lineTo(x, y + h + this.segmentWidth - d)
239
- context.lineTo(x, y + this.segmentWidth + d)
240
- context.fill()
241
-
242
- // draw segment c
243
- x = xPos + this.digitWidth - this.segmentWidth
244
- y = h + this.segmentWidth
245
- context.fillStyle = this.getSegmentColor(c, '013456789abdhnouy', '01346789abdghjmnoqsuw@', '%')
246
- context.beginPath()
247
- context.moveTo(x, y + this.segmentWidth + d)
248
- context.lineTo(x + s, y + s + d)
249
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d)
250
- context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d)
251
- switch (this.cornerType) {
252
- case SegmentDisplay.SymmetricCorner:
253
- context.lineTo(x + s, y + h + this.segmentWidth + s - d)
254
- context.lineTo(x, y + h + this.segmentWidth - d)
255
- break
256
- case SegmentDisplay.SquaredCorner:
257
- context.lineTo(x + s + e, y + h + this.segmentWidth + s - e)
258
- context.lineTo(x, y + h + this.segmentWidth - d)
259
- break
260
- default:
261
- context.quadraticCurveTo(
262
- x + this.segmentWidth,
263
- y + h + this.segmentWidth + g,
264
- x + f + d,
265
- y + h + this.segmentWidth + f
266
- ) //
267
- context.lineTo(x, y + h + this.segmentWidth - d)
268
- }
269
- context.fill()
270
-
271
- // draw segment d (d1 and d2 for 16 segments)
272
- if (this.segmentCount == 16) {
273
- x = xPos
274
- y = this.digitHeight - this.segmentWidth
275
- context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@')
276
- context.beginPath()
277
- context.moveTo(x + this.segmentWidth + d, y)
278
- context.lineTo(x + t - d - s, y)
279
- context.lineTo(x + t - d, y + s)
280
- context.lineTo(x + t - d - s, y + this.segmentWidth)
281
- switch (this.cornerType) {
282
- case SegmentDisplay.SymmetricCorner:
283
- context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth)
284
- context.lineTo(x + s + d, y + s)
285
- break
286
- case SegmentDisplay.SquaredCorner:
287
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth)
288
- context.lineTo(x + s + e, y + s + e)
289
- break
290
- default:
291
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth)
292
- context.quadraticCurveTo(
293
- x + this.segmentWidth - g,
294
- y + this.segmentWidth,
295
- x + this.segmentWidth - f,
296
- y + f + d
297
- )
298
- context.lineTo(x + this.segmentWidth - f, y + f + d)
299
- }
300
- context.fill()
301
-
302
- x = xPos
303
- y = this.digitHeight - this.segmentWidth
304
- context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@', '%')
305
- context.beginPath()
306
- context.moveTo(x + t + d + s, y + this.segmentWidth)
307
- context.lineTo(x + t + d, y + s)
308
- context.lineTo(x + t + d + s, y)
309
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y)
310
- switch (this.cornerType) {
311
- case SegmentDisplay.SymmetricCorner:
312
- context.lineTo(x + this.digitWidth - s - d, y + s)
313
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth)
314
- break
315
- case SegmentDisplay.SquaredCorner:
316
- context.lineTo(x + this.digitWidth - s - e, y + s + e)
317
- context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth)
318
- break
319
- default:
320
- context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d)
321
- context.quadraticCurveTo(
322
- x + this.digitWidth - this.segmentWidth + g,
323
- y + this.segmentWidth,
324
- x + this.digitWidth - this.segmentWidth,
325
- y + this.segmentWidth
326
- )
327
- }
328
- context.fill()
329
- } else {
330
- x = xPos
331
- y = this.digitHeight - this.segmentWidth
332
- context.fillStyle = this.getSegmentColor(c, '0235689bcdelotuy_', '0235689bcdegijloqsuz_=@')
333
- context.beginPath()
334
- context.moveTo(x + this.segmentWidth + d, y)
335
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y)
336
- switch (this.cornerType) {
337
- case SegmentDisplay.SymmetricCorner:
338
- context.lineTo(x + this.digitWidth - s - d, y + s)
339
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth)
340
- context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth)
341
- context.lineTo(x + s + d, y + s)
342
- break
343
- case SegmentDisplay.SquaredCorner:
344
- context.lineTo(x + this.digitWidth - s - e, y + s + e)
345
- context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth)
346
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth)
347
- context.lineTo(x + s + e, y + s + e)
348
- break
349
- default:
350
- context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d)
351
- context.quadraticCurveTo(
352
- x + this.digitWidth - this.segmentWidth + g,
353
- y + this.segmentWidth,
354
- x + this.digitWidth - this.segmentWidth,
355
- y + this.segmentWidth
356
- )
357
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth)
358
- context.quadraticCurveTo(
359
- x + this.segmentWidth - g,
360
- y + this.segmentWidth,
361
- x + this.segmentWidth - f,
362
- y + f + d
363
- )
364
- context.lineTo(x + this.segmentWidth - f, y + f + d)
365
- }
366
- context.fill()
367
- }
368
-
369
- // draw segment e
370
- x = xPos
371
- y = h + this.segmentWidth
372
- context.fillStyle = this.getSegmentColor(c, '0268abcdefhlnoprtu', '0268acefghjklmnopqruvw@')
373
- context.beginPath()
374
- context.moveTo(x, y + this.segmentWidth + d)
375
- context.lineTo(x + s, y + s + d)
376
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d)
377
- context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d)
378
- switch (this.cornerType) {
379
- case SegmentDisplay.SymmetricCorner:
380
- context.lineTo(x + s, y + h + this.segmentWidth + s - d)
381
- context.lineTo(x, y + h + this.segmentWidth - d)
382
- break
383
- case SegmentDisplay.SquaredCorner:
384
- context.lineTo(x + s - e, y + h + this.segmentWidth + s - d + e)
385
- context.lineTo(x, y + h + this.segmentWidth)
386
- break
387
- default:
388
- context.lineTo(x + this.segmentWidth - f - d, y + h + this.segmentWidth + f)
389
- context.quadraticCurveTo(x, y + h + this.segmentWidth + g, x, y + h + this.segmentWidth)
390
- }
391
- context.fill()
392
-
393
- // draw segment f
394
- x = xPos
395
- y = 0
396
- context.fillStyle = this.getSegmentColor(c, '045689abcefhlpty', '045689acefghklmnopqrsuvwy@', '%')
397
- context.beginPath()
398
- context.moveTo(x + this.segmentWidth, y + this.segmentWidth + d)
399
- context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d)
400
- context.lineTo(x + s, y + h + this.segmentWidth + s - d)
401
- context.lineTo(x, y + h + this.segmentWidth - d)
402
- switch (this.cornerType) {
403
- case SegmentDisplay.SymmetricCorner:
404
- context.lineTo(x, y + this.segmentWidth + d)
405
- context.lineTo(x + s, y + s + d)
406
- break
407
- case SegmentDisplay.SquaredCorner:
408
- context.lineTo(x, y + this.segmentWidth)
409
- context.lineTo(x + s - e, y + s + e)
410
- break
411
- default:
412
- context.lineTo(x, y + this.segmentWidth)
413
- context.quadraticCurveTo(
414
- x,
415
- y + this.segmentWidth - g,
416
- x + this.segmentWidth - f - d,
417
- y + this.segmentWidth - f
418
- )
419
- context.lineTo(x + this.segmentWidth - f - d, y + this.segmentWidth - f)
420
- }
421
- context.fill()
422
-
423
- // draw segment g for 7 segments
424
- if (this.segmentCount == 7) {
425
- x = xPos
426
- y = (this.digitHeight - this.segmentWidth) / 2.0
427
- context.fillStyle = this.getSegmentColor(c, '2345689abdefhnoprty-=')
428
- context.beginPath()
429
- context.moveTo(x + s + d, y + s)
430
- context.lineTo(x + this.segmentWidth + d, y)
431
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y)
432
- context.lineTo(x + this.digitWidth - s - d, y + s)
433
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth)
434
- context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth)
435
- context.fill()
436
- }
437
-
438
- // draw inner segments for the fourteen- and sixteen-segment-display
439
- if (this.segmentCount != 7) {
440
- // draw segment g1
441
- x = xPos
442
- y = (this.digitHeight - this.segmentWidth) / 2.0
443
- context.fillStyle = this.getSegmentColor(c, null, '2345689aefhkprsy-+*=', '%')
444
- context.beginPath()
445
- context.moveTo(x + s + d, y + s)
446
- context.lineTo(x + this.segmentWidth + d, y)
447
- context.lineTo(x + t - d - s, y)
448
- context.lineTo(x + t - d, y + s)
449
- context.lineTo(x + t - d - s, y + this.segmentWidth)
450
- context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth)
451
- context.fill()
452
-
453
- // draw segment g2
454
- x = xPos
455
- y = (this.digitHeight - this.segmentWidth) / 2.0
456
- context.fillStyle = this.getSegmentColor(c, null, '234689abefghprsy-+*=@', '%')
457
- context.beginPath()
458
- context.moveTo(x + t + d, y + s)
459
- context.lineTo(x + t + d + s, y)
460
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y)
461
- context.lineTo(x + this.digitWidth - s - d, y + s)
462
- context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth)
463
- context.lineTo(x + t + d + s, y + this.segmentWidth)
464
- context.fill()
465
-
466
- // draw segment j
467
- x = xPos + t - s
468
- y = 0
469
- context.fillStyle = this.getSegmentColor(c, null, 'bdit+*', '%')
470
- context.beginPath()
471
- if (this.segmentCount == 14) {
472
- context.moveTo(x, y + this.segmentWidth + this.segmentDistance)
473
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth + this.segmentDistance)
474
- } else {
475
- context.moveTo(x, y + this.segmentWidth + d)
476
- context.lineTo(x + s, y + s + d)
477
- context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d)
478
- }
479
- context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d)
480
- context.lineTo(x + s, y + h + this.segmentWidth + s - d)
481
- context.lineTo(x, y + h + this.segmentWidth - d)
482
- context.fill()
483
-
484
- // draw segment m
485
- x = xPos + t - s
486
- y = this.digitHeight
487
- context.fillStyle = this.getSegmentColor(c, null, 'bdity+*@', '%')
488
- context.beginPath()
489
- if (this.segmentCount == 14) {
490
- context.moveTo(x, y - this.segmentWidth - this.segmentDistance)
491
- context.lineTo(x + this.segmentWidth, y - this.segmentWidth - this.segmentDistance)
492
- } else {
493
- context.moveTo(x, y - this.segmentWidth - d)
494
- context.lineTo(x + s, y - s - d)
495
- context.lineTo(x + this.segmentWidth, y - this.segmentWidth - d)
496
- }
497
- context.lineTo(x + this.segmentWidth, y - h - this.segmentWidth + d)
498
- context.lineTo(x + s, y - h - this.segmentWidth - s + d)
499
- context.lineTo(x, y - h - this.segmentWidth + d)
500
- context.fill()
501
-
502
- // draw segment h
503
- x = xPos + this.segmentWidth
504
- y = this.segmentWidth
505
- context.fillStyle = this.getSegmentColor(c, null, 'mnx\\*')
506
- context.beginPath()
507
- context.moveTo(x + this.segmentDistance, y + this.segmentDistance)
508
- context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance)
509
- context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance - r)
510
- context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance)
511
- context.lineTo(x + w - this.segmentDistance - r, y + h - this.segmentDistance)
512
- context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r)
513
- context.fill()
514
-
515
- // draw segment k
516
- x = xPos + w + 2.0 * this.segmentWidth
517
- y = this.segmentWidth
518
- context.fillStyle = this.getSegmentColor(c, null, '0kmvxz/*', '%')
519
- context.beginPath()
520
- context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance)
521
- context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r)
522
- context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance)
523
- context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance)
524
- context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r)
525
- context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance)
526
- context.fill()
527
-
528
- // draw segment l
529
- x = xPos + w + 2.0 * this.segmentWidth
530
- y = h + 2.0 * this.segmentWidth
531
- context.fillStyle = this.getSegmentColor(c, null, '5knqrwx\\*')
532
- context.beginPath()
533
- context.moveTo(x + this.segmentDistance, y + this.segmentDistance)
534
- context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance)
535
- context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance - r)
536
- context.lineTo(x + w - this.segmentDistance, y + h - this.segmentDistance)
537
- context.lineTo(x + w - this.segmentDistance - r, y + h - this.segmentDistance)
538
- context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r)
539
- context.fill()
540
-
541
- // draw segment n
542
- x = xPos + this.segmentWidth
543
- y = h + 2.0 * this.segmentWidth
544
- context.fillStyle = this.getSegmentColor(c, null, '0vwxz/*', '%')
545
- context.beginPath()
546
- context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance)
547
- context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r)
548
- context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance)
549
- context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance)
550
- context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r)
551
- context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance)
552
- context.fill()
553
- }
554
-
555
- return this.digitDistance + this.digitWidth
556
-
557
- case '.':
558
- context.fillStyle = c == '#' || c == '.' ? this.colorOn : this.colorOff
559
- this.drawPoint(context, xPos, this.digitHeight - this.segmentWidth, this.segmentWidth)
560
- return this.digitDistance + this.segmentWidth
561
-
562
- case ':':
563
- context.fillStyle = c == '#' || c == ':' ? this.colorOn : this.colorOff
564
- var y = (this.digitHeight - this.segmentWidth) / 2.0 - this.segmentWidth
565
- this.drawPoint(context, xPos, y, this.segmentWidth)
566
- this.drawPoint(context, xPos, y + 2.0 * this.segmentWidth, this.segmentWidth)
567
- return this.digitDistance + this.segmentWidth
568
-
569
- default:
570
- return this.digitDistance
571
- }
572
- }
573
-
574
- drawPoint(context: CanvasRenderingContext2D, x1: number, y1: number, size: number) {
575
- var x2 = x1 + size
576
- var y2 = y1 + size
577
- var d = size / 4.0
578
-
579
- context.beginPath()
580
- context.moveTo(x2 - d, y1)
581
- context.quadraticCurveTo(x2, y1, x2, y1 + d)
582
- context.lineTo(x2, y2 - d)
583
- context.quadraticCurveTo(x2, y2, x2 - d, y2)
584
- context.lineTo(x1 + d, y2)
585
- context.quadraticCurveTo(x1, y2, x1, y2 - d)
586
- context.lineTo(x1, y1 + d)
587
- context.quadraticCurveTo(x1, y1, x1 + d, y1)
588
- context.fill()
589
- }
590
-
591
- getSegmentColor(c: string, charSet7: string | null, charSet14?: string, charSet16?: string) {
592
- if (c == '#') {
593
- return this.colorOn
594
- } else {
595
- switch (this.segmentCount) {
596
- case 7:
597
- return charSet7?.indexOf(c) == -1 ? this.colorOff : this.colorOn
598
- case 14:
599
- return charSet14?.indexOf(c) == -1 ? this.colorOff : this.colorOn
600
- case 16:
601
- var pattern = charSet14 + (charSet16 === undefined ? '' : charSet16)
602
- return pattern.indexOf(c) == -1 ? this.colorOff : this.colorOn
603
- default:
604
- return this.colorOff
605
- }
606
- }
607
- }
608
- }