Wasm rust - Revision history

Iwiseman: /* Going Back to Rust */

2024-09-29T02:40:25Z

Going Back to Rust

← Older revision		Revision as of 02:40, 29 September 2024
Line 307:		Line 307:

	</syntaxhighlight>		</syntaxhighlight>
	==~~Now~~ to ~~deal~~ with ~~Actions and Listeners~~==		===Update Page===
			===Update the Canvas===
			This code does the update for drawing the dot.
			<syntaxhighlight lang="rust">
			// draw dot
			fn update_canvas(document: &Document, size: u32) -> Result<()> {
			// grab canvas
			let canvas = document
			.get_element_by_id("dot-canvas")
			.unwrap()
			.dyn_into::<web_sys::HtmlCanvasElement>()?;
			// resize canvas to size * 2
			let canvas_dim = size * 2;
			canvas.set_width(canvas_dim);
			canvas.set_height(canvas_dim);
			let context = canvas
			.get_context("2d")?
			.unwrap()
			.dyn_into::<web_sys::CanvasRenderingContext2d>()?;

			// draw

			context.clear_rect(0.0, 0.0, canvas.width().into(), canvas.height().into());
			// create shape of radius 'size' around center point (size, size)
			context.begin_path();
			context.arc(
			size.into(),
			size.into(),
			size.into(),
			0.0,
			2.0 * std::f64::consts::PI,
			)?;
			context.fill();
			context.stroke();

			Ok(())
			}
			</syntaxhighlight>
			===Update the Span===
			And the Span
			<syntaxhighlight lang="rust">
			// update the size-output span
			fn update_span(document: &Document, new_size: u32) -> Result<()> {
			let span = document.get_element_by_id("size-output").unwrap();
			span.set_text_content(Some(&format!("{}", new_size)));
			Ok(())
			}
			</syntaxhighlight>
			===And Update All===
			This calls the other two and what is attached to the listener.
			<syntaxhighlight lang="rust">
			// given a new size, sets all relevant DOM elements
			fn update_all() -> Result<()> {
			// get new size
			let document = get_document()?;
			let new_size = document
			.get_element_by_id("size")
			.unwrap()
			.dyn_into::<web_sys::HtmlInputElement>()?
			.value()
			.parse::<u32>()
			.expect("Could not parse slider value");
			update_canvas(&document, new_size)?;
			update_span(&document, new_size)?;
			Ok(())
			}
			</syntaxhighlight>
			==Listening for Events==
			So a closure allows you to wrap a function created into another function. We attach the listener to the range control with the id of size
			<syntaxhighlight lang="rust">
			fn attach_listener(document: &Document) -> Result<()> {
			// listen for size change events

			update_all()?; // call once for initial render before any changes

			let callback = Closure::wrap(Box::new(move \|_evt: web_sys::Event\| {
			update_all().expect("Could not update");
			}) as Box<dyn Fn(_)>);

			document
			.get_element_by_id("size")
			.unwrap()
			.dyn_into::<web_sys::HtmlInputElement>()?
			.set_onchange(Some(callback.as_ref().unchecked_ref()));

			callback.forget();

			Ok(())
			}
			</syntaxhighlight>

Iwiseman: /* Back to the Code */

2024-09-29T02:20:45Z

Back to the Code

← Older revision		Revision as of 02:20, 29 September 2024
Line 307:		Line 307:

	</syntaxhighlight>		</syntaxhighlight>
			==Now to deal with Actions and Listeners==

Iwiseman: /* Going Back to Rust */

2024-09-29T02:19:39Z

Going Back to Rust

@@ Line 270: / Line 270: @@
+}
 </syntaxhighlight>
-So for the example on dev.io we are looking to build<br>
+This is the html we are looking to build form dev.io<br>
 [[File:Example canvas rust code.png]]<br>

Iwiseman: /* Back to the Code */

2024-09-29T02:11:36Z

Back to the Code

@@ Line 248: / Line 248: @@
 [[File:Wasm rust html.png]]<br>
 And here is the new code using our new macros<br>
-[[File:Wasm rust with macros.png]]
+<syntaxhighlight lang="rust">
 So for the example on dev.io we are looking to build<br>
 [[File:Example canvas rust code.png]]<br>

Iwiseman: /* Back to the Code */

2024-09-29T02:10:21Z

Back to the Code

← Older revision		Revision as of 02:10, 29 September 2024
Line 200:		Line 200:
	</syntaxhighlight>		</syntaxhighlight>
	==Back to the Code==		==Back to the Code==
	~~So for the example on dev.io we~~ are ~~looking to build<br>~~		Here are the help macros from Ben Lovy
	~~[[File:Example canvas rust code.png]]<br>~~
	~~And here is~~ the ~~macro again~~ from Ben Lovy
	<syntaxhighlight lang="rust">		<syntaxhighlight lang="rust">
	macro_rules! append_attrs {		macro_rules! append_attrs {
Line 246:		Line 244:
	}		}
	</syntaxhighlight>		</syntaxhighlight>

			So here is the html we originally had<br>
			[[File:Wasm rust html.png]]<br>
			And here is the new code using our new macros<br>
			[[File:Wasm rust with macros.png]]
			So for the example on dev.io we are looking to build<br>
			[[File:Example canvas rust code.png]]<br>

Iwiseman: /* Back to the Code */

2024-09-29T02:00:47Z

Back to the Code

← Older revision		Revision as of 02:00, 29 September 2024
Line 214:		Line 214:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	We can may some support macros to help too. I really like the approach he takes when explaining		We can may some support macros to help too. I really like the approach Ben takes when explaining
	<syntaxhighlight lang="rust">		<syntaxhighlight lang="rust">
	macro_rules! append_text_child {		macro_rules! append_text_child {

Iwiseman: /* Back to the Code */

2024-09-29T02:00:23Z

Back to the Code

@@ Line 200: / Line 200: @@
 </syntaxhighlight>
 ==Back to the Code==
-So this is the html I want to produce<br>
+So for the example on dev.io we are looking to build<br>
-[[File:Wasm rust html.png]]<br>
+[[File:Example canvas rust code.png]]<br>
-And with our new found xAnd here is the macro again from Ben Lovy
+And here is the macro again from Ben Lovy
 <syntaxhighlight lang="rust">
 macro_rules! append_attrs {
@@ Line 214: / Line 214: @@
+}
 </syntaxhighlight>
-So we can do the example code with this
+We can may some support macros to help too. I really like the approach he takes when explaining
 <syntaxhighlight lang="rust">
 </syntaxhighlight>

Iwiseman: /* Back to the Code */

2024-09-29T01:52:28Z

Back to the Code

← Older revision		Revision as of 01:52, 29 September 2024
Line 214:		Line 214:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~A quick refresher on macros. Here is a simple one which appends a # to~~ the ~~argument passed~~		So we can do the example code with this
	<syntaxhighlight lang="rust">		<syntaxhighlight lang="rust">
	~~macro_rules! my_macro {~~
	~~($var:literal) => {{~~
	~~concat!("# ", $var)~~
	~~}};~~
	}


	~~fn main() {~~
	~~let a = my_macro!("Hello, world!");~~
	~~println!("{}", a);~~
	~~// Outputs # Hello, world!~~
	}

	</syntaxhighlight>		</syntaxhighlight>

Iwiseman: /* Going Back to Rust */

2024-09-29T01:50:22Z

Going Back to Rust

← Older revision		Revision as of 01:50, 29 September 2024
Line 170:		Line 170:
	}		}

	/~~/ Outputs # Hello, world!~~		/*

			Outputs
			# Hello, world!

			*/
	</syntaxhighlight>		</syntaxhighlight>
	We can make it variadic by doing the following		We can make it variadic by doing the following
Line 186:		Line 190:
	}		}

	/* ~~Now outputs~~		/*

	# Hello, world! 1		Now outputs
	# Hello, world! 2		# Hello, world! 1
			# Hello, world! 2

	*/		*/

	</syntaxhighlight>		</syntaxhighlight>

	and that is because your ability to remember and get back into it having done it once is short. Doing Build a compiler for fun in C (yes you heard right) at the moment so macros are high in my mind but here is a refresher<br>
	~~[[File:Wasm rust html.png]]<br>~~

	==Back to the Code==		==Back to the Code==
	So this is the html I want to produce<br>		So this is the html I want to produce<br>
	[[File:Wasm rust html.png]]<br>		[[File:Wasm rust html.png]]<br>
	And here is the macro again from Ben Lovy		And with our new found xAnd here is the macro again from Ben Lovy
	<syntaxhighlight lang="rust">		<syntaxhighlight lang="rust">
	macro_rules! append_attrs {		macro_rules! append_attrs {

Iwiseman: /* Going Back to Rust */

2024-09-29T01:46:28Z

Going Back to Rust

@@ Line 148: / Line 148: @@
 Pretty easy to get going I think
 =Going Back to Rust=
-Always long breaks between some of the language aspects and although recruiters suggest on the last n years are relevant I disagree and that is because your ability to remember and get back into it having done it once is short so this is the html I want to produce but I want to use macros to do it. Doing Build a compiler for fun in C (yes you heard right) at the moment so macros are high in my mind.<br>
+==Using Macros==
 [[File:Wasm rust html.png]]<br>
 And here is the macro again from Ben Lovy