[HELP] DrawingArea example

[reneherrero]

Does anyone know where I can find an example using the DrawingArea? All I could find is of poor quality and uses the gtk3-rs API which has changed.

Any help/pointers would be much appreciated.

[philippe06150]

Hi, here is a code I wrote to train on drawingarea

// ---------------------------------------------------------
//
// Sinus
//
// ---------------------------------------------------------
#![allow(mixed_script_confusables)] // use π in code
use gtk4::prelude::*;

const APP_ID: &str = "org.gtk_rs.gtk4_demo11";

fn main() -> gtk4::glib::ExitCode {
    let app = gtk4::Application::builder()
		.application_id(APP_ID)
		.build();
    app.connect_activate(build_ui);
    app.run()
}

fn build_ui(app: &gtk4::Application) {
	// définition CSS
	let provider = gtk4::CssProvider::new();
	provider.load_from_data(
		include_str!("style.css")
	);
	gtk4::style_context_add_provider_for_display(
		&gtk4::gdk::Display::default()
			.expect("Could not connect to a display."),
		&provider,
		gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
	);
	//
	// cree les widgets
	//
	let margin = 5;
	// label
	let label_0 = gtk4::Label::new(Some("Tracé de courbes"));
	label_0.set_xalign(0.5);
	// label
	let label_1 = gtk4::Label::new(Some("dim = ..."));
	label_1.set_xalign(0.0);
	// box
	let gtk_box0 = gtk4::Box::new(gtk4::Orientation::Vertical, margin);
	gtk_box0.set_margin_top(margin);
	gtk4::Box::set_homogeneous(&gtk_box0, false); //cellules pas taille egale
	// box
	let gtk_box1 = gtk4::Box::new(gtk4::Orientation::Horizontal, margin);
	gtk_box1.set_margin_top(margin);
	gtk_box1.set_margin_bottom(margin);
	gtk_box1.set_margin_start(margin);
	gtk_box1.set_margin_end(margin);
	// box
	let gtk_box2 = gtk4::Box::new(gtk4::Orientation::Vertical, margin);
	//drawing area
	let drawing_area = gtk4::DrawingArea::builder()
		//.content_width(320)
		//.content_height(240) // height done by gtk_box
		.build();
	drawing_area.set_hexpand(true);
	drawing_area.set_vexpand(true);
	drawing_area.set_halign(gtk4::Align::Fill);
	drawing_area.set_valign(gtk4::Align::Fill);
	drawing_area.add_css_class("lightblue");
	//
	// structure the widgets
	//
	gtk_box2.append(&label_1);
	gtk_box1.append(&gtk_box2);
	gtk_box1.append(&drawing_area);
	gtk_box0.append(&label_0);
	gtk_box0.append(&gtk_box1);
	//
	// actions
	//
	drawing_area.set_draw_func( move |_area, c, w, h| {
		// dims ds le label
		label_1.set_text( format!("dim = {}x{}", w, h).as_str() );
		// dessine
		c.set_source_rgb(1.0, 0.5, 0.5);
		c.rectangle(
			f64::from(w)-20.0, f64::from(h)-20.0, 
			10.0, 10.0
		);
		c.stroke().unwrap();
		c.set_source_rgb(0.1, 0.1, 0.1);
		c.move_to(10.0, f64::from(h)/2.0);
		c.line_to(f64::from(w)-10.0, f64::from(h)/2.0);
		c.move_to(10.0, 10.0);
		c.line_to(10.0, f64::from(h)-10.0);
		c.stroke().unwrap();
		// dessin suivant dimension
		if w > 400 {
			c.set_source_rgb(1.0, 0.5, 0.5);
			c.rectangle(
				f64::from(w)-40.0, 10.0, 
				30.0, 30.0
			);
			c.stroke().unwrap();
		}
		// courbe Sinus
		c.set_source_rgb(1.0, 0.1, 0.1);
		let π: f64 = std::f64::consts::PI;
		let mut xx: f64 = 0.0;
		let max_xx: f64 = 1.0*π;
		let pas_xx: f64 = 0.001;
		// definition fonction par une closure
		let f = |x: f64| -> f64 {f64::sin(x)*f64::sin(25.0*x)}; // fonction sinus
		//let f = |x: f64| -> f64 {f64::cos(x)}; // fonction cosinus
		//xx = -π/2.0 + 0.2; max_xx = π/2.0 - 0.2;
		//let f = |x: f64| -> f64 {f64::tan(x)}; // fonction tangente
		// loop calcul point x,y
		c.move_to(10.0, f64::from(h)/2.0 - f(xx)*(f64::from(h)-20.0)/2.0);
		while xx <= max_xx {
			xx += pas_xx;
			let x = 10.0 + xx*(f64::from(w)-20.0)/max_xx;
			let y = f64::from(h)/2.0 - f(xx)*(f64::from(h)-20.0)/2.0;
			c.line_to(x, y);
		}
		c.stroke().unwrap();
	});
	//
    // Create window
	//
    let window = gtk4::ApplicationWindow::builder()
        .application(app)
        .title("Fonction sinus")
		.child(&gtk_box0)
		.default_height(400)
		.default_width(600)
        .build();
    // Present window
    window.present();
}

with the file style.css

.green {
	background-color: green;
}
.lightblue {
	background-color: #DDD;
}
.red {
	background-color: red;
}