glimmer-dsl-gtk 0.0.4 → 0.0.8
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +36 -0
- data/README.md +767 -28
- data/VERSION +1 -1
- data/glimmer-dsl-gtk.gemspec +0 -0
- data/lib/glimmer/gtk/shape/arc_negative.rb +70 -0
- data/lib/glimmer/gtk/shape/path.rb +55 -0
- data/lib/glimmer/gtk/shape.rb +71 -21
- data/lib/glimmer/gtk/transformable.rb +93 -0
- data/lib/glimmer/gtk/widget_proxy/drawing_area_proxy.rb +16 -0
- data/samples/cairo/arc.rb +44 -0
- data/samples/cairo/arc_negative.rb +44 -0
- data/samples/cairo/clip.rb +34 -0
- data/samples/cairo/clip_image.rb +33 -0
- data/samples/cairo/curve_to.rb +39 -0
- data/samples/cairo/dashes.rb +30 -0
- data/samples/cairo/fill_and_stroke2.rb +36 -0
- data/samples/cairo/fill_style.rb +43 -0
- data/samples/cairo/gradient.rb +31 -0
- data/samples/cairo/image.rb +28 -0
- data/samples/cairo/image_gradient.rb +37 -0
- data/samples/cairo/multi_segment_caps.rb +27 -0
- data/samples/cairo/rounded_rectangle.rb +20 -0
- data/samples/cairo/set_line_cap.rb +53 -0
- data/samples/cairo/set_line_join.rb +43 -0
- data/samples/cairo/text.rb +46 -0
- data/samples/hello/hello_drawing_area.rb +1 -3
- data/samples/hello/hello_drawing_area_manual.rb +20 -21
- metadata +22 -3
data/README.md
CHANGED
@@ -1,9 +1,9 @@
|
|
1
|
-
# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for GTK 0.0.
|
1
|
+
# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for GTK 0.0.8
|
2
2
|
## Ruby-GNOME Desktop Development GUI Library
|
3
3
|
[![Gem Version](https://badge.fury.io/rb/glimmer-dsl-gtk.svg)](http://badge.fury.io/rb/glimmer-dsl-gtk)
|
4
4
|
[![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
5
5
|
|
6
|
-
[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [GTK](https://www.gtk.org/) enables building desktop applications with [Ruby-GNOME](https://github.com/ruby-gnome/ruby-gnome).
|
6
|
+
[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [GTK](https://www.gtk.org/) enables building desktop applications with [Ruby-GNOME](https://github.com/ruby-gnome/ruby-gnome) (including [Cairo graphics](#declarative-cairo-graphics)).
|
7
7
|
|
8
8
|
[GTK](https://www.gtk.org/) (aka GIMP-Toolkit or [incorrectly] GNOME-Toolkit) is the premiere desktop GUI toolkit on [Linux](https://www.gtk.org/docs/installations/linux/), which also runs on [Mac](https://www.gtk.org/docs/installations/macos/) ([Quartz GTK+](https://wiki.gnome.org/Projects/GTK/OSX)) and [Windows](https://www.gtk.org/docs/installations/windows).
|
9
9
|
|
@@ -80,7 +80,7 @@ gem install glimmer-dsl-gtk
|
|
80
80
|
|
81
81
|
Add the following to `Gemfile`:
|
82
82
|
```
|
83
|
-
gem 'glimmer-dsl-gtk', '~> 0.0.
|
83
|
+
gem 'glimmer-dsl-gtk', '~> 0.0.8'
|
84
84
|
```
|
85
85
|
|
86
86
|
And, then run:
|
@@ -136,7 +136,7 @@ SomeGlimmerApplication.new.launch
|
|
136
136
|
- Properties: All GTK widget properties can be set via lowercase underscored names (without the 'set_' prefix) nested under widget keywords (e.g. `window {title 'Hello, World'}` sets `title` property of `window`)
|
137
137
|
- Signals: All GTK signals can be wired with `on(signal) { ... }` syntax (e.g. `on(:activate) { do_something }`)
|
138
138
|
|
139
|
-
|
139
|
+
### MVC Observer Pattern
|
140
140
|
|
141
141
|
In Smalltalk-MVC ([Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) Architectural Pattern), the View is an active View that observes the Model for changes and updates itself.
|
142
142
|
|
@@ -148,6 +148,748 @@ The model is automatically enhanced as an `Glimmer::DataBinding::ObservableModel
|
|
148
148
|
|
149
149
|
Note that it is usually recommended to observe external model objects (not `self`), but `self` is OK in very simple cases or presentation-related attributes only.
|
150
150
|
|
151
|
+
### Declarative Cairo Graphics
|
152
|
+
|
153
|
+
[Cairo](https://www.cairographics.org/) is the engine behind drawing arbitrary 2D geometric shapes in [GTK](https://www.gtk.org/).
|
154
|
+
|
155
|
+
In [Glimmer DSL for GTK](https://rubygems.org/gems/glimmer-dsl-gtk), you can draw Cairo shapes declaratively in a way similar to how SVG works, but using one language; Ruby, thus being able to utilize Ruby logic (e.g. if statement or each loop) with it effortlessly when needed. Declarative syntax also yields less code that is simpler, not dependent on ordering of nested properties, and more understandable/maintainable.
|
156
|
+
|
157
|
+
Below is a quick tutorial consisting of samples inspired and ported from [Mohit Sindhwani's blog post "Cairo with Ruby - Samples using RCairo"](https://notepad.onghu.com/2021/cairo-samples-in-ruby/).
|
158
|
+
|
159
|
+
### Arc
|
160
|
+
|
161
|
+
[samples/cairo/arc.rb](/samples/cairo/arc.rb)
|
162
|
+
|
163
|
+
```ruby
|
164
|
+
require 'glimmer-dsl-gtk'
|
165
|
+
|
166
|
+
include Glimmer
|
167
|
+
|
168
|
+
window {
|
169
|
+
title 'Hello, Drawing Area!'
|
170
|
+
default_size 256, 256
|
171
|
+
|
172
|
+
drawing_area {
|
173
|
+
# Surface Paint
|
174
|
+
paint 242.25, 242.25, 242.25
|
175
|
+
|
176
|
+
# Set up the parameters
|
177
|
+
xc = 128.0
|
178
|
+
yc = 128.0
|
179
|
+
radius = 100.0
|
180
|
+
angle1 = 45.0 * (Math::PI/180.0) # angles are specified
|
181
|
+
angle2 = 180.0 * (Math::PI/180.0) # in radians
|
182
|
+
|
183
|
+
# The main arc
|
184
|
+
arc(xc, yc, radius, angle1, angle2) {
|
185
|
+
stroke 0, 0, 0
|
186
|
+
line_width 10
|
187
|
+
}
|
188
|
+
|
189
|
+
# Draw helping lines
|
190
|
+
|
191
|
+
# First, the circle at the centre
|
192
|
+
arc(xc, yc, 10.0, 0, 2*Math::PI) {
|
193
|
+
fill 255, 51, 51, 0.6
|
194
|
+
}
|
195
|
+
|
196
|
+
# Then, the lines reaching out
|
197
|
+
path {
|
198
|
+
arc xc, yc, radius, angle1, angle1
|
199
|
+
line_to xc, yc
|
200
|
+
arc xc, yc, radius, angle2, angle2
|
201
|
+
line_to xc, yc
|
202
|
+
|
203
|
+
stroke 255, 51, 51, 0.6
|
204
|
+
line_width 6
|
205
|
+
}
|
206
|
+
}
|
207
|
+
}.show
|
208
|
+
```
|
209
|
+
|
210
|
+
![Arc](/screenshots/glimmer-dsl-gtk-mac-cairo-arc.png)
|
211
|
+
|
212
|
+
### Arc Negative
|
213
|
+
|
214
|
+
[samples/cairo/arc_negative.rb](/samples/cairo/arc_negative.rb)
|
215
|
+
|
216
|
+
```ruby
|
217
|
+
require 'glimmer-dsl-gtk'
|
218
|
+
|
219
|
+
include Glimmer
|
220
|
+
|
221
|
+
window {
|
222
|
+
title 'Arc Negative'
|
223
|
+
default_size 256, 256
|
224
|
+
|
225
|
+
drawing_area {
|
226
|
+
# Surface Paint
|
227
|
+
paint 255, 255, 255
|
228
|
+
|
229
|
+
# Set up the parameters
|
230
|
+
xc = 128.0
|
231
|
+
yc = 128.0
|
232
|
+
radius = 100.0
|
233
|
+
angle1 = 45.0 * (Math::PI/180.0) # angles are specified
|
234
|
+
angle2 = 180.0 * (Math::PI/180.0) # in radians
|
235
|
+
|
236
|
+
# The main negative arc
|
237
|
+
arc_negative(xc, yc, radius, angle1, angle2) {
|
238
|
+
stroke 0, 0, 0
|
239
|
+
line_width 10
|
240
|
+
}
|
241
|
+
|
242
|
+
# Draw helping lines
|
243
|
+
|
244
|
+
# First, the circle at the centre
|
245
|
+
arc(xc, yc, 10.0, 0, 2*Math::PI) {
|
246
|
+
fill 255, 51, 51, 0.6
|
247
|
+
}
|
248
|
+
|
249
|
+
# Then, the lines reaching out
|
250
|
+
path {
|
251
|
+
arc(xc, yc, radius, angle1, angle1)
|
252
|
+
line_to(xc, yc)
|
253
|
+
arc(xc, yc, radius, angle2, angle2)
|
254
|
+
line_to(xc, yc)
|
255
|
+
|
256
|
+
stroke 255, 51, 51, 0.6
|
257
|
+
line_width 6
|
258
|
+
}
|
259
|
+
}
|
260
|
+
}.show
|
261
|
+
```
|
262
|
+
|
263
|
+
![Arc Negative](/screenshots/glimmer-dsl-gtk-mac-cairo-arc-negative.png)
|
264
|
+
|
265
|
+
### Clip
|
266
|
+
|
267
|
+
[samples/cairo/clip.rb](/samples/cairo/clip.rb)
|
268
|
+
|
269
|
+
```ruby
|
270
|
+
require 'glimmer-dsl-gtk'
|
271
|
+
|
272
|
+
include Glimmer
|
273
|
+
|
274
|
+
window {
|
275
|
+
title 'Clip'
|
276
|
+
default_size 256, 256
|
277
|
+
|
278
|
+
drawing_area {
|
279
|
+
# Surface Paint
|
280
|
+
paint 255, 255, 255
|
281
|
+
|
282
|
+
# Designate arc as the clipping area
|
283
|
+
arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
|
284
|
+
clip true
|
285
|
+
}
|
286
|
+
|
287
|
+
# Rectangle will get clipped by arc
|
288
|
+
rectangle(0, 0, 256, 256) {
|
289
|
+
fill 0, 0, 0
|
290
|
+
}
|
291
|
+
|
292
|
+
# Path will get clipped by arc
|
293
|
+
path {
|
294
|
+
move_to 0, 0
|
295
|
+
line_to 256, 256
|
296
|
+
move_to 256, 0
|
297
|
+
line_to 0, 256
|
298
|
+
|
299
|
+
stroke 0, 255, 0
|
300
|
+
line_width 10
|
301
|
+
}
|
302
|
+
}
|
303
|
+
}.show
|
304
|
+
```
|
305
|
+
|
306
|
+
![Clip](/screenshots/glimmer-dsl-gtk-mac-cairo-clip.png)
|
307
|
+
|
308
|
+
### Clip Image
|
309
|
+
|
310
|
+
[samples/cairo/clip_image.rb](/samples/cairo/clip_image.rb)
|
311
|
+
|
312
|
+
```ruby
|
313
|
+
require 'glimmer-dsl-gtk'
|
314
|
+
require 'net/http'
|
315
|
+
|
316
|
+
image_content = Net::HTTP.get(URI('https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-gtk/master/images/breaking-blue-wave.png'))
|
317
|
+
image_file = File.join(Dir.home, 'breaking-blue-wave.png')
|
318
|
+
File.write(image_file, image_content)
|
319
|
+
|
320
|
+
include Glimmer
|
321
|
+
|
322
|
+
window {
|
323
|
+
title 'Clip Image'
|
324
|
+
default_size 256, 256
|
325
|
+
|
326
|
+
drawing_area {
|
327
|
+
paint 242.25, 242.25, 242.25
|
328
|
+
|
329
|
+
arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
|
330
|
+
clip true # designate arc as the clipping area
|
331
|
+
}
|
332
|
+
|
333
|
+
rectangle(0, 0, 256, 256) {
|
334
|
+
# Source image is from:
|
335
|
+
# - https://www.publicdomainpictures.net/en/view-image.php?image=7683&picture=breaking-blue-wave
|
336
|
+
# Converted to PNG before using it
|
337
|
+
image = Cairo::ImageSurface.from_png(image_file)
|
338
|
+
w = image.width
|
339
|
+
h = image.height
|
340
|
+
|
341
|
+
scale 256.0/w, 256.0/h, exclude: :shape # applies scale to fill source image only
|
342
|
+
fill image, 0, 0
|
343
|
+
}
|
344
|
+
}
|
345
|
+
}.show
|
346
|
+
```
|
347
|
+
|
348
|
+
![Clip Image](/screenshots/glimmer-dsl-gtk-mac-cairo-clip-image.png)
|
349
|
+
|
350
|
+
### Curve to
|
351
|
+
|
352
|
+
[samples/cairo/curve_to.rb](/samples/cairo/curve_to.rb)
|
353
|
+
|
354
|
+
```ruby
|
355
|
+
require 'glimmer-dsl-gtk'
|
356
|
+
|
357
|
+
include Glimmer
|
358
|
+
|
359
|
+
window {
|
360
|
+
title 'Curve to'
|
361
|
+
default_size 256, 256
|
362
|
+
|
363
|
+
drawing_area {
|
364
|
+
paint 242.25, 242.25, 242.25
|
365
|
+
|
366
|
+
x=25.6
|
367
|
+
y=128.0
|
368
|
+
x1=102.4
|
369
|
+
y1=230.4
|
370
|
+
x2=153.6
|
371
|
+
y2=25.6
|
372
|
+
x3=230.4
|
373
|
+
y3=128.0
|
374
|
+
|
375
|
+
path {
|
376
|
+
move_to x, y
|
377
|
+
curve_to x1, y1, x2, y2, x3, y3
|
378
|
+
|
379
|
+
line_width 10
|
380
|
+
stroke 0, 0, 0
|
381
|
+
}
|
382
|
+
|
383
|
+
path {
|
384
|
+
move_to x,y
|
385
|
+
line_to x1,y1
|
386
|
+
move_to x2,y2
|
387
|
+
line_to x3,y3
|
388
|
+
|
389
|
+
line_width 6
|
390
|
+
stroke 255, 51, 51, 0.6
|
391
|
+
}
|
392
|
+
}
|
393
|
+
}.show
|
394
|
+
```
|
395
|
+
|
396
|
+
![Curve to](/screenshots/glimmer-dsl-gtk-mac-cairo-curve-to.png)
|
397
|
+
|
398
|
+
### Dashes
|
399
|
+
|
400
|
+
[samples/cairo/dashes.rb](/samples/cairo/dashes.rb)
|
401
|
+
|
402
|
+
```ruby
|
403
|
+
require 'glimmer-dsl-gtk'
|
404
|
+
|
405
|
+
include Glimmer
|
406
|
+
|
407
|
+
window {
|
408
|
+
title 'Dashes'
|
409
|
+
default_size 256, 256
|
410
|
+
|
411
|
+
drawing_area {
|
412
|
+
paint 242.25, 242.25, 242.25
|
413
|
+
|
414
|
+
dashes = [ 50.0, # ink
|
415
|
+
10.0, # skip
|
416
|
+
10.0, # ink
|
417
|
+
10.0 # skip
|
418
|
+
]
|
419
|
+
offset = -50.0
|
420
|
+
|
421
|
+
path {
|
422
|
+
move_to 128.0, 25.6
|
423
|
+
line_to 230.4, 230.4
|
424
|
+
rel_line_to -102.4, 0.0
|
425
|
+
curve_to 51.2, 230.4, 51.2, 128.0, 128.0, 128.0
|
426
|
+
|
427
|
+
line_width 10
|
428
|
+
dash dashes, offset
|
429
|
+
stroke 0, 0, 0
|
430
|
+
}
|
431
|
+
}
|
432
|
+
}.show
|
433
|
+
```
|
434
|
+
|
435
|
+
![Dashes](/screenshots/glimmer-dsl-gtk-mac-cairo-dashes.png)
|
436
|
+
|
437
|
+
### Fill and Stroke 2
|
438
|
+
|
439
|
+
(note: there is no Fill and Stroke 1; this was adopted from [Mohit's blog post](https://notepad.onghu.com/2021/cairo-samples-in-ruby/), which only mentioned Fill and Stroke 2)
|
440
|
+
|
441
|
+
[samples/cairo/fill_and_stroke2.rb](/samples/cairo/fill_and_stroke2.rb)
|
442
|
+
|
443
|
+
```ruby
|
444
|
+
require 'glimmer-dsl-gtk'
|
445
|
+
|
446
|
+
include Glimmer
|
447
|
+
|
448
|
+
window {
|
449
|
+
title 'Fill and Stroke 2'
|
450
|
+
default_size 256, 256
|
451
|
+
|
452
|
+
drawing_area {
|
453
|
+
paint 242.25, 242.25, 242.25
|
454
|
+
|
455
|
+
path {
|
456
|
+
move_to 128.0, 25.6
|
457
|
+
line_to 230.4, 230.4
|
458
|
+
rel_line_to -102.4, 0.0
|
459
|
+
curve_to 51.2, 230.4, 51.2, 128.0, 128.0, 128.0
|
460
|
+
close_path
|
461
|
+
|
462
|
+
fill 0, 0, 255
|
463
|
+
stroke 0, 0, 0
|
464
|
+
line_width 10
|
465
|
+
}
|
466
|
+
|
467
|
+
path {
|
468
|
+
move_to 64.0, 25.6
|
469
|
+
rel_line_to 51.2, 51.2
|
470
|
+
rel_line_to -51.2, 51.2
|
471
|
+
rel_line_to -51.2, -51.2
|
472
|
+
close_path
|
473
|
+
|
474
|
+
fill 0, 0, 255
|
475
|
+
stroke 0, 0, 0
|
476
|
+
line_width 10
|
477
|
+
}
|
478
|
+
}
|
479
|
+
}.show
|
480
|
+
```
|
481
|
+
|
482
|
+
![Fill and Stroke 2](/screenshots/glimmer-dsl-gtk-mac-cairo-fill-and-stroke2.png)
|
483
|
+
|
484
|
+
### Fill Style
|
485
|
+
|
486
|
+
[samples/cairo/fill_style.rb](/samples/cairo/fill_style.rb)
|
487
|
+
|
488
|
+
```ruby
|
489
|
+
require 'glimmer-dsl-gtk'
|
490
|
+
|
491
|
+
include Glimmer
|
492
|
+
|
493
|
+
window {
|
494
|
+
title 'Fill Style'
|
495
|
+
default_size 256, 256
|
496
|
+
|
497
|
+
drawing_area {
|
498
|
+
paint 242.25, 242.25, 242.25
|
499
|
+
|
500
|
+
path {
|
501
|
+
rectangle 12, 12, 232, 70
|
502
|
+
path { # sub-path
|
503
|
+
arc 64, 64, 40, 0, 2*Math::PI
|
504
|
+
}
|
505
|
+
path { # sub-path
|
506
|
+
arc_negative 192, 64, 40, 0, -2*Math::PI
|
507
|
+
}
|
508
|
+
|
509
|
+
fill_rule Cairo::FILL_RULE_EVEN_ODD
|
510
|
+
line_width 6
|
511
|
+
fill 0, 178.5, 0
|
512
|
+
stroke 0, 0, 0
|
513
|
+
}
|
514
|
+
|
515
|
+
path {
|
516
|
+
rectangle 12, 12, 232, 70
|
517
|
+
path { # sub-path
|
518
|
+
arc 64, 64, 40, 0, 2*Math::PI
|
519
|
+
}
|
520
|
+
path { # sub-path
|
521
|
+
arc_negative 192, 64, 40, 0, -2*Math::PI
|
522
|
+
}
|
523
|
+
|
524
|
+
translate 0, 128
|
525
|
+
fill_rule Cairo::FILL_RULE_WINDING
|
526
|
+
line_width 6
|
527
|
+
fill 0, 0, 229.5
|
528
|
+
stroke 0, 0, 0
|
529
|
+
}
|
530
|
+
}
|
531
|
+
}.show
|
532
|
+
```
|
533
|
+
|
534
|
+
![Fill Style](/screenshots/glimmer-dsl-gtk-mac-cairo-fill-style.png)
|
535
|
+
|
536
|
+
### Gradient
|
537
|
+
|
538
|
+
[samples/cairo/gradient.rb](/samples/cairo/gradient.rb)
|
539
|
+
|
540
|
+
```ruby
|
541
|
+
require 'glimmer-dsl-gtk'
|
542
|
+
|
543
|
+
include Glimmer
|
544
|
+
|
545
|
+
window {
|
546
|
+
title 'Gradient'
|
547
|
+
default_size 256, 256
|
548
|
+
|
549
|
+
drawing_area {
|
550
|
+
paint 242.25, 242.25, 242.25
|
551
|
+
|
552
|
+
# Create the Linear Pattern
|
553
|
+
rectangle(0, 0, 256, 256) {
|
554
|
+
pat = Cairo::LinearPattern.new(0.0, 0.0, 0.0, 256.0)
|
555
|
+
pat.add_color_stop_rgba(1, 0, 0, 0, 1)
|
556
|
+
pat.add_color_stop_rgba(0, 1, 1, 1, 1)
|
557
|
+
|
558
|
+
fill pat
|
559
|
+
}
|
560
|
+
|
561
|
+
# Create the radial pattern
|
562
|
+
arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
|
563
|
+
pat = Cairo::RadialPattern.new(115.2, 102.4, 25.6,
|
564
|
+
102.4, 102.4, 128.0)
|
565
|
+
pat.add_color_stop_rgba(0, 1, 1, 1, 1)
|
566
|
+
pat.add_color_stop_rgba(1, 0, 0, 0, 1)
|
567
|
+
|
568
|
+
fill pat
|
569
|
+
}
|
570
|
+
}
|
571
|
+
}.show
|
572
|
+
```
|
573
|
+
|
574
|
+
![Gradient](/screenshots/glimmer-dsl-gtk-mac-cairo-gradient.png)
|
575
|
+
|
576
|
+
### Image
|
577
|
+
|
578
|
+
[samples/cairo/image.rb](/samples/cairo/image.rb)
|
579
|
+
|
580
|
+
```ruby
|
581
|
+
require 'glimmer-dsl-gtk'
|
582
|
+
require 'net/http'
|
583
|
+
|
584
|
+
image_content = Net::HTTP.get(URI('https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-gtk/master/images/breaking-blue-wave.png'))
|
585
|
+
image_file = File.join(Dir.home, 'breaking-blue-wave.png')
|
586
|
+
File.write(image_file, image_content)
|
587
|
+
|
588
|
+
include Glimmer
|
589
|
+
|
590
|
+
window {
|
591
|
+
title 'Image'
|
592
|
+
default_size 256, 256
|
593
|
+
|
594
|
+
drawing_area {
|
595
|
+
paint 242.25, 242.25, 242.25
|
596
|
+
|
597
|
+
image = Cairo::ImageSurface.from_png(image_file)
|
598
|
+
w = image.width
|
599
|
+
h = image.height
|
600
|
+
|
601
|
+
translate 128.0, 128.0
|
602
|
+
rotate 45*Math::PI/180
|
603
|
+
scale 256.0/w, 256.0/h
|
604
|
+
translate -0.5*w, -0.5*h
|
605
|
+
|
606
|
+
paint image, 0, 0
|
607
|
+
}
|
608
|
+
}.show
|
609
|
+
```
|
610
|
+
|
611
|
+
![Image](/screenshots/glimmer-dsl-gtk-mac-cairo-image.png)
|
612
|
+
|
613
|
+
### Image Gradient
|
614
|
+
|
615
|
+
[samples/cairo/image_gradient.rb](/samples/cairo/image_gradient.rb)
|
616
|
+
|
617
|
+
```ruby
|
618
|
+
require 'glimmer-dsl-gtk'
|
619
|
+
require 'net/http'
|
620
|
+
|
621
|
+
image_content = Net::HTTP.get(URI('https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-gtk/master/images/breaking-blue-wave.png'))
|
622
|
+
image_file = File.join(Dir.home, 'breaking-blue-wave.png')
|
623
|
+
File.write(image_file, image_content)
|
624
|
+
|
625
|
+
include Glimmer
|
626
|
+
|
627
|
+
window {
|
628
|
+
title 'Image Gradient'
|
629
|
+
default_size 256, 256
|
630
|
+
|
631
|
+
drawing_area {
|
632
|
+
paint 242.25, 242.25, 242.25
|
633
|
+
|
634
|
+
image = Cairo::ImageSurface.from_png(image_file)
|
635
|
+
w = image.width
|
636
|
+
h = image.height
|
637
|
+
|
638
|
+
# Load the image as a surface pattern
|
639
|
+
pattern = Cairo::SurfacePattern.new(image)
|
640
|
+
pattern.extend = Cairo::EXTEND_REPEAT
|
641
|
+
|
642
|
+
# Set up the scale matrix
|
643
|
+
pattern.matrix = Cairo::Matrix.scale(w/256.0 * 5.0, h/256.0 * 5.0)
|
644
|
+
|
645
|
+
rectangle(0, 0, 256, 256) {
|
646
|
+
translate 128.0, 128.0
|
647
|
+
rotate Math::PI / 4
|
648
|
+
scale 1/Math.sqrt(2), 1/Math.sqrt(2)
|
649
|
+
translate -128.0, -128.0
|
650
|
+
|
651
|
+
fill pattern
|
652
|
+
}
|
653
|
+
}
|
654
|
+
}.show
|
655
|
+
```
|
656
|
+
|
657
|
+
![Image Gradient](/screenshots/glimmer-dsl-gtk-mac-cairo-image-gradient.png)
|
658
|
+
|
659
|
+
### Multi Segment Caps
|
660
|
+
|
661
|
+
[samples/cairo/multi_segment_caps.rb](/samples/cairo/multi_segment_caps.rb)
|
662
|
+
|
663
|
+
```ruby
|
664
|
+
require 'glimmer-dsl-gtk'
|
665
|
+
|
666
|
+
include Glimmer
|
667
|
+
|
668
|
+
window {
|
669
|
+
title 'Multi Segment Caps'
|
670
|
+
default_size 256, 256
|
671
|
+
|
672
|
+
drawing_area {
|
673
|
+
paint 242.25, 242.25, 242.25
|
674
|
+
|
675
|
+
path {
|
676
|
+
move_to 50.0, 75.0
|
677
|
+
line_to 200.0, 75.0
|
678
|
+
|
679
|
+
move_to 50.0, 125.0
|
680
|
+
line_to 200.0, 125.0
|
681
|
+
|
682
|
+
move_to 50.0, 175.0
|
683
|
+
line_to 200.0, 175.0
|
684
|
+
|
685
|
+
line_width 30
|
686
|
+
line_cap Cairo::LINE_CAP_ROUND
|
687
|
+
stroke 0, 0, 0
|
688
|
+
}
|
689
|
+
}
|
690
|
+
}.show
|
691
|
+
```
|
692
|
+
|
693
|
+
![Multi Segment Caps](/screenshots/glimmer-dsl-gtk-mac-cairo-multi-segment-caps.png)
|
694
|
+
|
695
|
+
### Rounded Rectangle
|
696
|
+
|
697
|
+
[samples/cairo/rounded_rectangle.rb](/samples/cairo/rounded_rectangle.rb)
|
698
|
+
|
699
|
+
```ruby
|
700
|
+
require 'glimmer-dsl-gtk'
|
701
|
+
|
702
|
+
include Glimmer
|
703
|
+
|
704
|
+
window {
|
705
|
+
title 'Rounded Rectangle'
|
706
|
+
default_size 256, 256
|
707
|
+
|
708
|
+
drawing_area {
|
709
|
+
paint 242.25, 242.25, 242.25
|
710
|
+
|
711
|
+
path {
|
712
|
+
rounded_rectangle(25.6, 25.6, 204.8, 204.8, 20)
|
713
|
+
|
714
|
+
fill 127.5, 127.5, 255
|
715
|
+
line_width 10.0
|
716
|
+
stroke 127.5, 0, 0, 0.5
|
717
|
+
}
|
718
|
+
}
|
719
|
+
}.show
|
720
|
+
```
|
721
|
+
|
722
|
+
![Rounded Rectangle](/screenshots/glimmer-dsl-gtk-mac-cairo-rounded-rectangle.png)
|
723
|
+
|
724
|
+
### Set line cap
|
725
|
+
|
726
|
+
[samples/cairo/set_line_cap.rb](/samples/cairo/set_line_cap.rb)
|
727
|
+
|
728
|
+
```ruby
|
729
|
+
require 'glimmer-dsl-gtk'
|
730
|
+
|
731
|
+
include Glimmer
|
732
|
+
|
733
|
+
window {
|
734
|
+
title 'Set line cap'
|
735
|
+
default_size 256, 256
|
736
|
+
|
737
|
+
drawing_area {
|
738
|
+
paint 242.25, 242.25, 242.25
|
739
|
+
|
740
|
+
# The main code
|
741
|
+
path {
|
742
|
+
move_to 64.0, 50.0
|
743
|
+
line_to 64.0, 200.0
|
744
|
+
|
745
|
+
line_cap Cairo::LINE_CAP_BUTT # default
|
746
|
+
line_width 30
|
747
|
+
stroke 0, 0, 0
|
748
|
+
}
|
749
|
+
|
750
|
+
path {
|
751
|
+
move_to 128.0, 50.0
|
752
|
+
line_to 128.0, 200.0
|
753
|
+
|
754
|
+
line_cap Cairo::LINE_CAP_ROUND
|
755
|
+
line_width 30
|
756
|
+
stroke 0, 0, 0
|
757
|
+
}
|
758
|
+
|
759
|
+
path {
|
760
|
+
move_to 192.0, 50.0
|
761
|
+
line_to 192.0, 200.0
|
762
|
+
|
763
|
+
line_cap Cairo::LINE_CAP_SQUARE
|
764
|
+
line_width 30
|
765
|
+
stroke 0, 0, 0
|
766
|
+
}
|
767
|
+
|
768
|
+
# draw helping lines */
|
769
|
+
path {
|
770
|
+
move_to 64.0, 50.0
|
771
|
+
line_to 64.0, 200.0
|
772
|
+
move_to 128.0, 50.0
|
773
|
+
line_to 128.0, 200.0
|
774
|
+
move_to 192.0, 50.0
|
775
|
+
line_to 192.0, 200.0
|
776
|
+
|
777
|
+
line_width 2.56
|
778
|
+
stroke 255, 51, 51
|
779
|
+
}
|
780
|
+
}
|
781
|
+
}.show
|
782
|
+
```
|
783
|
+
|
784
|
+
![Set line cap](/screenshots/glimmer-dsl-gtk-mac-cairo-set-line-cap.png)
|
785
|
+
|
786
|
+
### Set line join
|
787
|
+
|
788
|
+
[samples/cairo/set_line_join.rb](/samples/cairo/set_line_join.rb)
|
789
|
+
|
790
|
+
```ruby
|
791
|
+
require 'glimmer-dsl-gtk'
|
792
|
+
|
793
|
+
include Glimmer
|
794
|
+
|
795
|
+
window {
|
796
|
+
title 'Set line join'
|
797
|
+
default_size 256, 256
|
798
|
+
|
799
|
+
drawing_area {
|
800
|
+
paint 242.25, 242.25, 242.25
|
801
|
+
|
802
|
+
# The main code
|
803
|
+
path {
|
804
|
+
move_to 76.8, 84.48
|
805
|
+
rel_line_to 51.2, -51.2
|
806
|
+
rel_line_to 51.2, 51.2
|
807
|
+
|
808
|
+
line_join Cairo::LINE_JOIN_MITER # default
|
809
|
+
line_width 40.96
|
810
|
+
stroke 0, 0, 0
|
811
|
+
}
|
812
|
+
|
813
|
+
path {
|
814
|
+
move_to 76.8, 161.28
|
815
|
+
rel_line_to 51.2, -51.2
|
816
|
+
rel_line_to 51.2, 51.2
|
817
|
+
|
818
|
+
line_join Cairo::LINE_JOIN_BEVEL
|
819
|
+
line_width 40.96
|
820
|
+
stroke 0, 0, 0
|
821
|
+
}
|
822
|
+
|
823
|
+
path {
|
824
|
+
move_to 76.8, 238.08
|
825
|
+
rel_line_to 51.2, -51.2
|
826
|
+
rel_line_to 51.2, 51.2
|
827
|
+
|
828
|
+
line_join Cairo::LINE_JOIN_ROUND
|
829
|
+
line_width 40.96
|
830
|
+
stroke 0, 0, 0
|
831
|
+
}
|
832
|
+
}
|
833
|
+
}.show
|
834
|
+
```
|
835
|
+
|
836
|
+
![Set line join](/screenshots/glimmer-dsl-gtk-mac-cairo-set-line-join.png)
|
837
|
+
|
838
|
+
### Text
|
839
|
+
|
840
|
+
[samples/cairo/text.rb](/samples/cairo/text.rb)
|
841
|
+
|
842
|
+
```ruby
|
843
|
+
require 'glimmer-dsl-gtk'
|
844
|
+
|
845
|
+
include Glimmer
|
846
|
+
|
847
|
+
window {
|
848
|
+
title 'Text'
|
849
|
+
default_size 256, 256
|
850
|
+
|
851
|
+
drawing_area {
|
852
|
+
paint 242.25, 242.25, 242.25
|
853
|
+
|
854
|
+
font_family = OS.linux? ? 'Sans' : (OS.mac? ? 'Helvetica' : 'Arial')
|
855
|
+
|
856
|
+
# The main code
|
857
|
+
path {
|
858
|
+
move_to 10.0, 135.0
|
859
|
+
show_text 'Hello'
|
860
|
+
|
861
|
+
font_face font_family, Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_BOLD
|
862
|
+
font_size 90.0
|
863
|
+
line_width 2.56
|
864
|
+
fill 0, 0, 0
|
865
|
+
stroke 0, 0, 0
|
866
|
+
}
|
867
|
+
|
868
|
+
path {
|
869
|
+
move_to 70.0, 165.0
|
870
|
+
text_path 'void'
|
871
|
+
|
872
|
+
font_face font_family, Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_BOLD
|
873
|
+
font_size 90.0
|
874
|
+
line_width 2.56
|
875
|
+
fill 127.5, 127.5, 255
|
876
|
+
stroke 0, 0, 0
|
877
|
+
}
|
878
|
+
|
879
|
+
# draw helping lines
|
880
|
+
path {
|
881
|
+
arc 10.0, 135.0, 5.12, 0, 2*Math::PI
|
882
|
+
close_path
|
883
|
+
arc 70.0, 165.0, 5.12, 0, 2*Math::PI
|
884
|
+
|
885
|
+
fill 255, 51, 51, 0.6
|
886
|
+
}
|
887
|
+
}
|
888
|
+
}.show
|
889
|
+
```
|
890
|
+
|
891
|
+
![Text](/screenshots/glimmer-dsl-gtk-mac-cairo-text.png)
|
892
|
+
|
151
893
|
## Girb (Glimmer IRB)
|
152
894
|
|
153
895
|
You can run the `girb` command (`bin/girb` if you cloned the project locally):
|
@@ -378,9 +1120,7 @@ window {
|
|
378
1120
|
default_size 400, 400
|
379
1121
|
|
380
1122
|
drawing_area {
|
381
|
-
|
382
|
-
fill 255, 255, 255
|
383
|
-
}
|
1123
|
+
paint 255, 255, 255
|
384
1124
|
|
385
1125
|
arc(85, 85, 45, (Math::PI/180)*90, -(Math::PI/180)*90) {
|
386
1126
|
fill 255, 0, 0
|
@@ -492,61 +1232,60 @@ window {
|
|
492
1232
|
|
493
1233
|
drawing_area {
|
494
1234
|
on(:draw) do |drawing_area_widget, cairo_context|
|
495
|
-
cairo_context.
|
496
|
-
cairo_context.
|
497
|
-
cairo_context.fill
|
1235
|
+
cairo_context.set_source_rgb(255/255.0, 255/255.0, 255/255.0)
|
1236
|
+
cairo_context.paint
|
498
1237
|
|
499
1238
|
cairo_context.arc(85, 85, 45, (Math::PI/180)*90, -(Math::PI/180)*90)
|
500
1239
|
cairo_context.set_source_rgb(255, 0, 0)
|
501
1240
|
cairo_context.fill
|
502
1241
|
|
503
1242
|
cairo_context.arc(85, 85, 45, (Math::PI/180)*90, -(Math::PI/180)*90)
|
504
|
-
cairo_context.set_source_rgb(0, 128, 255)
|
1243
|
+
cairo_context.set_source_rgb(0, 128/255.0, 255/255.0)
|
505
1244
|
cairo_context.set_line_width(3)
|
506
1245
|
cairo_context.stroke
|
507
1246
|
|
508
1247
|
cairo_context.arc(85, 185, 45, (Math::PI/180)*100, -(Math::PI/180)*30)
|
509
|
-
cairo_context.set_source_rgb(255, 0, 0)
|
1248
|
+
cairo_context.set_source_rgb(255/255.0, 0, 0)
|
510
1249
|
cairo_context.fill
|
511
1250
|
|
512
1251
|
cairo_context.arc(85, 185, 45, (Math::PI/180)*100, -(Math::PI/180)*30)
|
513
|
-
cairo_context.set_source_rgb(0, 128, 255)
|
1252
|
+
cairo_context.set_source_rgb(0, 128/255.0, 255/255.0)
|
514
1253
|
cairo_context.set_line_width(3)
|
515
1254
|
cairo_context.stroke
|
516
1255
|
|
517
1256
|
cairo_context.circle(85, 285, 45)
|
518
|
-
cairo_context.set_source_rgb(255, 0, 0)
|
1257
|
+
cairo_context.set_source_rgb(255/255.0, 0, 0)
|
519
1258
|
cairo_context.fill
|
520
1259
|
|
521
1260
|
cairo_context.circle(85, 285, 45)
|
522
|
-
cairo_context.set_source_rgb(0, 128, 255)
|
1261
|
+
cairo_context.set_source_rgb(0, 128/255.0, 255/255.0)
|
523
1262
|
cairo_context.set_line_width(3)
|
524
1263
|
cairo_context.stroke
|
525
1264
|
|
526
1265
|
cairo_context.rectangle(140, 40, 180, 90)
|
527
|
-
cairo_context.set_source_rgb(255, 255, 0)
|
1266
|
+
cairo_context.set_source_rgb(255/255.0, 255/255.0, 0)
|
528
1267
|
cairo_context.fill
|
529
1268
|
|
530
1269
|
cairo_context.rectangle(140, 40, 180, 90)
|
531
|
-
cairo_context.set_source_rgb(255, 0, 0)
|
1270
|
+
cairo_context.set_source_rgb(255/255.0, 0, 0)
|
532
1271
|
cairo_context.set_line_width(3)
|
533
1272
|
cairo_context.stroke
|
534
1273
|
|
535
1274
|
cairo_context.rounded_rectangle(140, 140, 180, 90, 30, 20)
|
536
|
-
cairo_context.set_source_rgb(255, 255, 0)
|
1275
|
+
cairo_context.set_source_rgb(255/255.0, 255/255.0, 0)
|
537
1276
|
cairo_context.fill
|
538
1277
|
|
539
1278
|
cairo_context.rounded_rectangle(140, 140, 180, 90, 30, 20)
|
540
|
-
cairo_context.set_source_rgb(255, 0, 0)
|
1279
|
+
cairo_context.set_source_rgb(255/255.0, 0, 0)
|
541
1280
|
cairo_context.set_line_width(3)
|
542
1281
|
cairo_context.stroke
|
543
1282
|
|
544
1283
|
cairo_context.triangle(140, 240, 320, 240, 230, 330)
|
545
|
-
cairo_context.set_source_rgb(255, 255, 0)
|
1284
|
+
cairo_context.set_source_rgb(255/255.0, 255/255.0, 0)
|
546
1285
|
cairo_context.fill
|
547
1286
|
|
548
1287
|
cairo_context.triangle(140, 240, 320, 240, 230, 330)
|
549
|
-
cairo_context.set_source_rgb(255, 0, 0)
|
1288
|
+
cairo_context.set_source_rgb(255/255.0, 0, 0)
|
550
1289
|
cairo_context.set_line_width(3)
|
551
1290
|
cairo_context.stroke
|
552
1291
|
|
@@ -555,7 +1294,7 @@ window {
|
|
555
1294
|
cairo_context.curve_to 190, 60, 200, 80, 210, 70
|
556
1295
|
cairo_context.curve_to 240, 80, 250, 100, 260, 90
|
557
1296
|
cairo_context.curve_to 290, 90, 300, 110, 310, 100
|
558
|
-
cairo_context.set_source_rgb(0, 255, 0)
|
1297
|
+
cairo_context.set_source_rgb(0, 255/255.0, 0)
|
559
1298
|
cairo_context.fill
|
560
1299
|
|
561
1300
|
cairo_context.new_path
|
@@ -563,7 +1302,7 @@ window {
|
|
563
1302
|
cairo_context.curve_to 190, 60, 200, 80, 210, 70
|
564
1303
|
cairo_context.curve_to 240, 80, 250, 100, 260, 90
|
565
1304
|
cairo_context.curve_to 290, 90, 300, 110, 310, 100
|
566
|
-
cairo_context.set_source_rgb(0, 0, 255)
|
1305
|
+
cairo_context.set_source_rgb(0, 0, 255/255.0)
|
567
1306
|
cairo_context.stroke
|
568
1307
|
|
569
1308
|
cairo_context.new_path
|
@@ -574,7 +1313,7 @@ window {
|
|
574
1313
|
cairo_context.line_to 200, 200
|
575
1314
|
cairo_context.line_to 180, 170
|
576
1315
|
cairo_context.close_path
|
577
|
-
cairo_context.set_source_rgb(0, 255, 0)
|
1316
|
+
cairo_context.set_source_rgb(0, 255/255.0, 0)
|
578
1317
|
cairo_context.fill
|
579
1318
|
|
580
1319
|
cairo_context.new_path
|
@@ -585,7 +1324,7 @@ window {
|
|
585
1324
|
cairo_context.line_to 200, 200
|
586
1325
|
cairo_context.line_to 180, 170
|
587
1326
|
cairo_context.close_path
|
588
|
-
cairo_context.set_source_rgb(0, 0, 255)
|
1327
|
+
cairo_context.set_source_rgb(0, 0, 255/255.0)
|
589
1328
|
cairo_context.stroke
|
590
1329
|
|
591
1330
|
cairo_context.new_path
|
@@ -596,7 +1335,7 @@ window {
|
|
596
1335
|
cairo_context.line_to 200, 280
|
597
1336
|
cairo_context.line_to 180, 270
|
598
1337
|
cairo_context.close_path
|
599
|
-
cairo_context.set_source_rgb(0, 255, 0)
|
1338
|
+
cairo_context.set_source_rgb(0, 255/255.0, 0)
|
600
1339
|
cairo_context.fill
|
601
1340
|
|
602
1341
|
cairo_context.new_path
|
@@ -607,7 +1346,7 @@ window {
|
|
607
1346
|
cairo_context.line_to 200, 280
|
608
1347
|
cairo_context.line_to 180, 270
|
609
1348
|
cairo_context.close_path
|
610
|
-
cairo_context.set_source_rgb(0, 0, 255)
|
1349
|
+
cairo_context.set_source_rgb(0, 0, 255/255.0)
|
611
1350
|
cairo_context.stroke
|
612
1351
|
|
613
1352
|
cairo_context.new_path
|
@@ -617,7 +1356,7 @@ window {
|
|
617
1356
|
cairo_context.line_to 220, 340
|
618
1357
|
cairo_context.line_to 200, 330
|
619
1358
|
cairo_context.line_to 180, 320
|
620
|
-
cairo_context.set_source_rgb(0, 0, 255)
|
1359
|
+
cairo_context.set_source_rgb(0, 0, 255/255.0)
|
621
1360
|
cairo_context.stroke
|
622
1361
|
end
|
623
1362
|
}
|