Canvas Graphics Come to Glimmer DSL for SWT, Finally!

Glimmer DSL for SWT v4.18.1.0 just got released with the following changes:

•     Canvas Shape DSL
•     Hello, Canvas! Sample
•     Canvas Animation DSL
•     Hello, Canvas Animation! Sample
•     Fixed issue with async_exec not working in ShellProxy when delegate widget is nil

Canvas graphics have been on my radar for quite a while, but I have been busy focusing on integrating Glimmer DSL for SWT with Glimmer DSL for Opal with webready app scaffolding and the webify glimmer task as that enables users to instantly turn a Glimmer desktop app into a web app.

In the meantime, I got contacted on Gitter (Glimmer's Open-Source Help Chat) for help with Canvas graphics, which Glimmer did not officially support with its DSL since it focused more on building standard business applications with plain old widgets like button, text field, and table. This all changes with version 4.18.1.0.

Glimmer introduces two new sub-DSLs of the Glimmer GUI DSL:

• Canvas Shape DSL
• Canvas Animation DSL

I'll let the two new samples speak for themselves.

Hello, Canvas!

	# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/samples/hello/hello_canvas.rb
	include Glimmer
	shell {
	text 'Hello, Canvas!'
	minimum_size 320, 400
	canvas {
	background :yellow
	rectangle(0, 0, 220, 400, fill: true) {
	background :red
	}
	rectangle(50, 20, 300, 150, 30, 50, round: true, fill: true) {
	background :magenta
	}
	rectangle(150, 200, 100, 70, true, gradient: true) {
	background :dark_magenta
	foreground :yellow
	}
	rectangle(50, 200, 30, 70, false, gradient: true) {
	background :magenta
	foreground :dark_blue
	}
	rectangle(205, 50, 88, 96) {
	foreground :yellow
	}
	text('Picasso', 60, 80) {
	background :yellow
	foreground :dark_magenta
	font name: 'Courier', height: 30
	}
	oval(110, 310, 100, 100, fill: true) {
	background rgb(128, 138, 248)
	}
	arc(210, 210, 100, 100, 30, -77, fill: true) {
	background :red
	}
	polygon(250, 210, 260, 170, 270, 210, 290, 230, fill: true) {
	background :dark_yellow
	}
	polyline(250, 110, 260, 70, 270, 110, 290, 130, 250, 110)
	}
	}.open

view raw glimmer-dsl-swt-hello-canvas.rb hosted with ❤ by GitHub

 

Hello, Canvas Animation!

	# From: https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/samples/hello/hello_canvas_animation.rb
	include Glimmer
	shell {
	text 'Hello, Canvas Animation!'
	minimum_size 800, 420
	canvas {
	animation {
	every 0.01 # in seconds (one hundredth)
	frame { |index| # frame block loops indefinitely (unless frame_count is set to an integer)
	background rgb(index%255, 100, 200) # sets canvas background color
	oval(0, 0, 400, 400) { # x, y, width, height
	foreground :black # sets oval background color
	}
	arc(0, 0, 400, 400, -1.4*index%360, 10, fill: true) { # x, y, width, height, start angle, arc angle
	background rgb(200, 200, 50) # sets arc background color
	}
	}
	}
	}
	canvas {
	colors = [:yellow, :red]
	animation {
	every 0.25 # in seconds (one quarter)
	cycle colors # cycles array of colors into the second variable of the frame block below
	frame { |index, color| # frame block loops indefinitely (unless frame_count or cycle_count is set to an integer)
	outside_color = colors[index % 2]
	inside_color = colors[(index + 1) % 2]
	background outside_color # sets canvas background color
	rectangle(0, 0, 200, 200, fill: true) {
	background inside_color # sets rectangle background color
	}
	rectangle(200, 200, 200, 200, fill: true) {
	background inside_color # sets rectangle background color
	}
	}
	}
	}
	}.open

view raw glimmer-dsl-swt-hello-canvas-animation.rb hosted with ❤ by GitHub

 

 

Please keep in mind that these are first cuts of the Shape and Animation DSLs, so they will likely undergo some more battle-testing and further improvements before the APIs stabalize. 

In the meantime, Happy Glimmering!