DEV Community: Wade Zimmerman

Happy? Halloween? 🤔

Wade Zimmerman — Thu, 31 Oct 2024 02:01:56 +0000

Acknowledging: https://dev.to/best_codes/happy-halloween-klm
Proof: https://chatgpt.com/share/67238cc0-67ec-8001-a8c3-e8624bdaf41f

Halloween in some parts of the world (usually rural) is about running around trying to spook people and allowing children to be mischievous. The trauma creates strong friendships. Religious groups tend to do there own thing.

On the other hand, cities and urban areas tend to have policies in place to prevent chaos. Historically there have been some Halloween events that got out of hand. So those communities will celebrate a day early.

It is also not uncommon for other cultures to celebrate Día de (los) Muertos during the first part of November.

If you live in an area that has a mixture of all these cultures, "Halloween" could last for almost a week, which goes against some religions.

If you want to critique AI, I made sure to post the artwork on TTG, in case my original post was removed. Historically, TTG was used as an active forum for tech discussions before Reddit became popular. Now the site is mostly low quality content.

My theory is, small divides in culture are amplified by AI, but LLMs are great for quickly picking up facts during a heated debate.

WYD - Dating App for Gamers

Wade Zimmerman — Sun, 27 Oct 2024 13:39:35 +0000

https://WYD.gg is a dating platform for gamers that does not exist. If such a platform were to exist what features would it have?

Thoughts on AI

Wade Zimmerman — Wed, 23 Oct 2024 17:50:10 +0000

The last few months I was not using X (formerly Twitter) as much if at all. When I opened the app the first thing I see is something lame about WordPress. My whole timeline is chaos and destruction so I figured I'd throw out the word "unprecedented" and see what happens.

About a week later I check back to see if anyone replied to my question, and turns out I was 100% wrong. People actually replied!

As someone who does not write WordPress, I had no idea what was being said. So naturally I asked if I should be concerned. Someone replied pretty quick even though it was nearly a week later.

Apparently there was some kind of separation happening.

That is when I started questioning the meaning. How could WordPress separate itself from PHP if it is written in PHP? Clearly I was living under a rock. Whatever I was reading online was not lining up with what developers were saying.

As someone who also writes JavaScript and Rust from time to time, I know that software releases and updates can stir up a lot of drama. The last thing I would want to do is blindly start using PHP in the middle of drama. So I figured I would ask if switching back to PHP was the right move.

Within the day I get another off the wall response. Okay. This is starting to make me curious. What news am I not caught up on? Before I could form a conclusion on my own, now, another comment shows up on the notification tab.

Apparently PHP is not just separated but "Completely isolated from modern PHP tools and frameworks like Composer," and the security expert thinks an implosion would not affect much.

That is relieving! Normally I use Laravel for my PHP applications that depend on composer. Which is also why I will try switching to other languages like C, Rust, or JavaScript every once in a while. Writing everything in Laravel can get boring.

Over the last few years, Rust caught my eye as a blazingly fast language so I thought it was the best option.

In the past, I was able to write enough Rust code to compile an iPhone app which was pretty neat! Was switching to Rust the right option for me? No probably not.

So far, I kind of enjoy the language, but I think I'm going to try TypeScript first before getting too deep into Rust code.

After all, TypeScript is a logical jump up from PHP in most cases. When your blog needs a little extra boost you could just write everything in TypeScript from the start.

However, I do no fully enjoy TypeScript because there are so many packages to choose from. It seems like I have to relearn a new library or package for every project. It would be cool if TypeScript had some cool features like std::result.

Thankfully that is where models come in handy. If I am uncertain, I can have a dialog about something tiny like Bootstrap, Tailwind, PHP, or JavaScript.

It is great because I can jump right into a comment section and post something!

How do you like to use ChatGPT to write comments or improve your writing skills?

Artificial Intelligence and Coding

Wade Zimmerman — Mon, 21 Oct 2024 15:17:06 +0000

Today someone DM'd me about something called "Online code generation platform" which is a term I never heard of. What I found was more than a dozen options!

Part of me thinks this is cool and I want and jump right in, but anyone who has written software based on multiple NPM packages knows that having a bunch of options is not always a good thing. Sometimes there are too many options.

For large businesses and cooperations I imagine navigating this is a breeze with security experts in place, but what does this mean for small businesses and content creators?

How much future technology is too much? Do I need to keep up with all the videos? What are "TODO apps" of the future going to look like when Artificial Intelligence can do most the work?

It is October and these are spooky questions to think about. Normally I would ask ChatGPT or Google for advice but sometimes I feel like the answers I get are not the same as hearing from the community.

What do you think about Artificial Intelligence so far?

Why Do Web Developers Suck at Making Video Games?

Wade Zimmerman — Thu, 17 Oct 2024 16:27:00 +0000

Optimization.

Web browsers are highly optimized pieces of software that allow users to view 2D content on the web. This usually includes blog posts, videos, images, etc.

In most web browsers, developers can display various forms of media using a series of stylish divs, lists, and artwork.

Eventually, the developer begins to wonder. Why stop at rectangles? Why not use different shapes or effects? What are SVGs? Why not make it pop with 3D?

If you have attempted to make a video game before, you know how difficult it is, but what makes working in the third dimension so difficult?

Well, web browsers optimize for web pages. If you want to make a game in the browser, you need to use the HTML5 canvas element or leap to a game engine like Unity or Unreal.

A game engine is an extensive library or web framework built for making games. Game engines make drawing sprites, playing audio, and creating cool visual effects more accessible. If I had an affiliate link, I'd link it here.

For example, when you use React or TypeScript, sometimes you have to change the z-index, but the browser is orthographic, so you are effectively changing which layer an element is on. Getting that 3D perspective to work without a canvas is tedious.

Yet, a developer could transform, scale, and warp 2D elements to provide a 3D look and feel, but then the DOM would constrain them, which could be better for SEO.

There is something about that extra dimension that adds a lot of complexity.

For example, did you know some game engines have different "up" directions? The Y and Z axes can point up, but both could quickly point down.

That's one reason perspective is essential. A game engine enables developers to quickly change a camera's perspective.

If you were to do the same thing in a 2D world, only three sides of an object would be visible at once. You would need a camera swivel to see the other side of an object. Think about how you would visualize the z-index from the side.

They realize that different perspectives may limit one's ability to think of planes in a 3D space. On paper, there is a one-point, two-point, and three-point perspective. Are any of those correct?

Art is where things get tricky. People define 3D differently.

3D could mean popping off the screen, making an FPS game, or simply doing a barrel roll.

In short, drawing a vanishing point looks weird. Instead, engines provide small node-like components so developers can add a camera object to a scene.

The camera is responsible for translating 2D to 3D. If you want to get really good at 3D, having some knowledge of photography or film can go a long way.

Unfortunately, my knowledge falls off. When I take a picture on my phone, I know that light reflects a certain way, like it does with your eyes. Otherwise, I'm clueless.

Thankfully, through the advancement of technology, it is possible to project vertices onto a screen.

Skip the Dashboard

Wade Zimmerman — Tue, 27 Aug 2024 22:17:49 +0000

The era of data vomiting robots is plateauing.

Typing like an MC is exhausting.

There are so many tools out there to plan your day!

Take a moment to forgive your pet robot and plan a personal hackathon. That is what I did! A day of mindfulness can take the edge off.

Put things into Motion by planning out your hackathon and grabbing a good cup of coffee or hot chocolate!

The task? We are racing against our companions and trying to stretch the $5 "investment" because Wordpress is too expensive.

What can be done?

Pull out all your favorite frameworks and libraries. Be mindful of your AI assistant and give them a break.

Respect how blazingly fast GPTs are.

Skip the todo app. Skip the breadcrumbs. Skip the navigation.

Skip the database. Skip the cloud functions. Skip the containers.

Zen mode begins with a blank page.

We need a prompt.

Start with a simple command pattern:

const commands = {
  'manage:posts': {
    'label': 'Go to posts',
    'action': ['navigate', 'https://example.com/posts']
  },
  'post:edit:1': {
    'label': 'Hello world',
    'action': ['navigate', 'https://example.com/posts/1/edit']
  },
}

From there, add the binds.

const open = false;

useChord(['cmd+k'],() => {
  open = true;
])

useChord(['cmd+k', 'cmd+w'], () => {
  open = false;
})

...

I wanted a search feature so I bootstrapped a combobox:

<ComboBox :items="commands" onSelected="executeCommand" />

The perfect navigation features will have to wait.

Zod validates my strongly typed form data.

Add a new key bind to save the form.

const schema = z.object({
  thePost: z.string().min(1),
})

const form = useForm({schema}))

useChord(['cmd+s'], () => {
  form.submit('https://sayless.gg')
})

My prompt includes a simple markdown parsing command that uploads my markdown to the cloud. How long were you in zen mode?

Thanks for reading!

Inertia.js Does not Work

Wade Zimmerman — Sat, 23 Mar 2024 17:19:47 +0000

Install the javascript package from NPM. Like magic! Can you ship it to production?

npm install @inertiajs/react

Please follow the starting guide if you still need to do so. https://inertiajs.com/client-side-setup.

I did that, but my code does not work. The documentation is non-existent, and there needs to be more support on GitHub.

You need help understanding my issue. When I submit my form, errors are everywhere, and something must be fixed!

This is why I'm telling you we must use Axios or Fetch. There is simply no way to use this library. React with GraphQL is the way.

We should drop Inertia in favor of Zog and Typescript. We do not need to pull in any libraries. Everything will work out of the box.

On Mastodon, everyone agrees that fetching the data only when needed is the correct approach.

Let me explain the big picture. Twitter is dead. Everyone threads on Mastodon. You would need help understanding.

Hey, there is an issue on Github, and everyone is having problems. Pulling in a new library is the only way to fix this issue.

What is the issue? It's multi-faceted. This library enables us to use React with page-based routing to deploy straight to the cloud. Typescript shows an error, so we must downgrade and install this library.

This is why I love the Typescript community! They are so quick to resolve issues on GitHub! If we were using Vanilla Javascript...

Typescript was not actually flawed. There was a bug in my code. We wanted the server to render the first-page load, so we created a function to wrap all the data into a single JSON object.

The JSON object contains the name of the component that should be rendered when the browser loads. Then, all the data is passed on as props. We can server render any React component from the server. Do you need me to explain more?

With this new design, we can make React work for all future projects, and legacy projects using C# and Java can be grandfathered in. After our issues with Typescript and Zog, we decided a protocol-esque approach was best.

We call it Progress. 🦄

Acknowledging & Signing Fediverse Activity Requests

Wade Zimmerman — Wed, 30 Aug 2023 23:03:16 +0000

Read this post first: How to Put Your Blog on the Fediverse

Once you read that post, you may wonder how to participate in Fediverse activities such as sharing content, gaining followers, or accepting comments.

First, you must learn to acknowledge AP requests.

Resources

The Fediverse is still in its early stages. Automated tests will help find minor defects. For example, little things like date formats, JSON encoding, and base64 can all invalidate signed requests!

Understanding the request flow (aka the handshake)

ActivityPub, at its core, specifies that each user must have an inbox and an outbox. All read/write requests are handled using GET/POST methods respectively. The request flow is almost identical to email.

Difference between Inbox and Outbox

The outbox supports read and write operations. Reading the outbox gives remote servers a chance to backfill. Any action made on a remote server is queued by writing to the outbox via a RESTful API. A dequeued action is then dispatched to other inboxes to be processed. Inboxes tend to be for private use only.

Acknowledging Requests FAQ

To process actions, you must establish endpoints for the inbox.

What mime type or content type should I use?

ActivityPub requests/responses should be application/ld+json; profile="https://www.w3.org/ns/activitystreams or application/activity+json unless specified otherwise. They should be treated equally.

My HTTP response contains the ActivityPub document; why is nothing happening?

To acknowledge an ActivityPub request, you MUST return a POST request to the Actor's inbox. This is how ActivityPub servers remain asynchronous.

POST requests are not working as expected!

Double-check you are attaching a Content-Type header when sending requests, and send your request as a raw string. Some libraries/frameworks will send your data as a form request or JSON.

Example Signed Acceptance/Rejection of Follow Request

In the previous tutorial, you should have defined an endpoint for handling inbox requests and included that on your user's ActivityPub profile response. That response is critical because servers use that to find your inbox.

Once you set up your server to handle incoming POST requests for your inbox. You will start to receive application/activity+json type requests like the following:

{
  "@context": "https://www.w3.org/ns/activitystreams",
  "id": "https://mastodon.social/96cb3649-7a75-49c5-b246-xxxxxxxxxxxx",
  "type": "Follow",
  "actor": "https://mastodon.social/users/codoxuba",
  "object": "https://example.com/activityPub/users/1"
}

In the case of a Follow request. The Actor is the person/thing initiating the request. And the Object is the person/thing that they want to follow. The id is created by the server commencing the request. Most servers use the ID to track the request status. I will not be covering that in this post.

However, it's important to note that actor, object, and id can be unresolved URLs, as you see above, or they can be nested JSON-LD objects. I will not be covering that in this post.

Acknowledging the Incoming Activity

This is where you should brush up on your TCP/IP protocols because the concept is similar. I will mention upfront that it's wise to not respond to requests by default. Any acknowledgment (even a reject) can be used against you in an attack. I only want to process follow requests, so I will ignore all other requests:

class InboxController extends Controller
{
    public function receiveFromInternet(Request $request, User $user)
    {
    // todo: better validation
        $activityType = $request->input('type');

        if ($requestType !== 'Follow') {
            return;
        }

        $acknowledgment = [
            "@context" => "https://www.w3.org/ns/activitystreams",
            "summary" => "Alice accepted a follow",
            "type" => "Accept",
            "actor" => "https://example.com/activityPub/users/1",
            "object" => $request->input('id'),
        ];
    }
}

The acknowledgment is as simple as that. In the case of a follow request, you can choose to Accept, Reject, TenativeAccept, TenativeReject, or ignore. The problematic part is signing the acknowledgment.

Signing the Acknowledgment

Signed requests are based on HTTP Signatures Draft RFC. I will be using these variables throughout the signing process:

$url = parse_url($inboxUrl);
$host = data_get($url, 'host');
$path = data_get($url, 'path');

$publicKeyId = 'https://example.com/activityPub/users/1#main-key';

$date = now()->toRfc7231String();

Next, encode your acknowledgment as JSON, and create a digest. You MUST encode the hash using base64 and prepend the value with the algorithm you use to generate the hash. Most Fediverse servers only support SHA-256.

$document_str = json_encode($document);
$sha256 = hash('sha256', $document_str, true);
$digest = 'SHA-256=' . base64_encode($sha256);

You must use that digest to create a signed Signature header. Failing to include the digest will generate an invalid signature:

$dataToSign = "(request-target): {$method} {$path}\nhost: {$host}\ndate: {$date}\ndigest: {$digest}";

The data to be signed (a string) should look something like this. No trailing new lines. No carriage returns.

(request-target): post /users/@bob/inbox
host: mastadon.social
date: Wed, 30 Aug 2023 12:01:01 GMT
digest: SHA-256=MmNmMjRkYmE1ZmIwYTMwZTI2ZTgzYjJhYzViOWUyOWUxYjE2MWU1YzFmYTc0MjVlNzMwNDMzNjI5MzhiOTgyNA==

Before we can sign the message, you must generate a key pair. The public key will be distributed to the fediverse.

openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem

NOTE You must include the public key on your user's ActivityPub profile.

You must sign the headers using the same algorithm to create the digest. Pull in the OpenSSL library, depending on the programming language. With PHP, this is typically already installed as a PHP extension:

$privateKey = openssl_pkey_get_private(Storage::get('private.pem'));

$signature = null; // mutated by openssl
$enodedSignature = null;
if (openssl_sign($data, $signature, $privateKey, OPENSSL_ALGO_SHA256)) {
    $encodedSignature = base64_encode($signature);
} else {
    throw new Exception('Could not sign activityPub data');
}

After signing, you will get a base64 encoded string longer than the digest generated earlier. Before including the signed data, we must build the Signature header so other servers can verify the headers. If you sign extra headers, modify the (request-target) section of the Signature header.

# signature header used when signing host, date, and digest.
$signatureHeader = sprintf( 'keyId="%s",algorithm="rsa-sha256",headers="(request-target) host date digest",signature="%s"', $id, $base64 );

The raw HTTP headers will look something like this when they are ready to send:

Host: mastodon.social
Date: Wed, 18 Aug 2022 22:00:00 GMT
Digest: SHA-256=6ccPqhz2TJmLL08E8AFny1/Wube60hOH3g6zzwv/Ttg=
Signature: keyId="https://example.com/activityPub/users/1#main-key",algorithm="rsa-sha256",headers="(request-target) host date digest",signature="Cdih8iQQQPeDInLCN4H94Lm/hTKSNOjSnjleI8gZfndRsTwO1CqG41s+BRF2Oh51yETWEsR2ezceDgUgH+ME4jdrgUIMPm/Ox4B6c5QEASPPlFpcOfWcLryCCvEkQOVd3tbMITeY+uY6WITuZKsXREAidmDopJ2pZ3Wvk4rXuTYHZEW2vsreLYCrXDkTCm4ySL2THlOrzc0JQh/4EYRaQx+v3VqVBJvY9+qPLIm1Y9RuRoN35SMNN/IcTkxHVue+mDu6I8IIq/QVmg8kKDbwQ/ywQGzegYt+P2lKujdx0sR3gbXAHX2sTDHCKncVu/PYLJF5/LoxhVxNc3s3QEo5Bw=="
Content-Type: application/activity+json

Sending the Acknowledgement

Finally, we can update our headers and post the message to the user's inbox:

$headers = [
    'Host' => $host,
    'Date' => $date,
    'Digest' => $digest,
    'Signature' => $signatureHeader,
    'Content-Type' => 'application/activity+json',
];

$activityResponse = Http::withHeaders($headers)
    ->withBody($document_str)
    ->contentType('application/activity+json')
    ->post($inboxUrl, $document);

Wrapping Up

After the POST request is sent successfully, you should be able to accept followers. However, keeping track of your followers will be up to you!

How to Put Your Blog on the Fediverse

Wade Zimmerman — Sat, 26 Aug 2023 22:46:09 +0000

History/Why I should care about Mastodon or Fediverse

Recently, there has been an influx of people who want autonomy in social media. People value their privacy and wonder why we must go to X.com, Facebook.com, or Instagram.com to socialize? Why can't we start our own social media?

Only recently, the answer was that building social media is expensive and complicated. However, this is changing thanks to new W3C protocols.

Mastodon takes most of the credit for adopting these new protocols because they built a clone of X (formerly Twitter) that operates in the Fediverse.

How the Fediverse Exists

The Fediverse is a federation of servers that agree to communicate via the ActivityPub (AP) protocol. Like HTTP, SMTP, DNS, etc., the AP protocol specifies how servers should communicate to act as a social media website.

For example, email protocols require all email clients/servers to adhere to a set of rules. Those rules dictate how an email message is sent and received. This makes it possible to send a message from yahoo.com to google.com to example.com without a centralized authority.

Fediverse FAQ

So what does this mean for social media?

It means you can have a username like wadecodez and a custom domain name like dev.to, and when the handle wadecodez@dev.to makes a post, it will be available to all other platforms. Post once communicate everywhere.

Does My Platform Need to be a Twitter Clone?

No. Anything that follows the ActivityPub specification is valid. It could be your blog, your todo app, or something entirely different.

Then what is Mastodon?

Mastodon is an implementation of the AP protocol that chooses to behave like X (formerly Twitter). Sites that implement the AP protocol are free to exist and act however they want. Sites like https://pxlmo.com and https://peertube.tv/ are totally separate ideas, but they can communicate with Mastodon. It is up to your server to respect the content of the other servers.

Do I need to make a Mastodon instance to join the Fediverse?

No. As long as you implement the bare minimum, your blog can be a member of the Fediverse!

How to create the bare minimum to join the fediverse

Choose your language/framework of choice to receive HTTP requests. Python, Ruby, Node, PHP. Then, you'll create endpoints for discovering users, querying user profiles, and returning the contents of the inbox/outbox.

1. Allow for discovery

The rest of the internet needs a way to check if your server is a member of the Fediverse. This is done according to the WebFinger protocol. When the endpoint returns a valid JSON response, with a content type of application/jrd+json, other websites assume your server supports Fediverse activity.

// handles https://example.com/.well-known/webfinger?resource=acct:alice@example.com

Route::get('/.well-known/webfinger', function (Request $request) {
    //todo should be dynamic and validated

    $subject = 'acct:alice@example.com';
    $handle =  '@example.com';
    $username = Str::between($subject, 'acct:', $handle);

    return myJson([
        'subject' => $subject,
        'aliases' => [
            'https://example.com/users/alice',
        ],
        'links' => [
            [
                "rel" => "http://webfinger.net/rel/profile-page",
                "type" => "text/html",
                "href" => 'https://example.com/users/alice',
            ],
            [
                'rel' => 'self',
                'type' => 'application/activity+json',
                'href' => 'https://example.com/activityPub/users/alice',
            ]
        ],
    ]);
});

2. Query the User's profile

The code above specifies the https://example.com/activityPub/users/alice supports the application/activity+json content type. When the rest of the internet sees this URL, they expect you to return an ActivityPub Person type. See specification

But because most websites expect this Person to be an Actor, we also need to meet the specification for an Actor type:

Route::get('/activityPub/users/{user}', function (Request $request, User $user) {
    return myJson([
       '@context' => 'https://www.w3.org/ns/activitystreams',
       'type' => 'Person',
       'id' => 'https://example.com/activityPub/users/alice',
       'name' => 'Test User',
       'preferredUsername' => 'alice123',
       'summary' => 'my favorite food is pizza',
       'inbox' => 'https://example.com/activityPub/users/alice/inbox',
       'outbox' => 'https://example.com/activityPub/users/alice/outbox',
    ]);
})->name('activityPub.user');

3. Return an Empty inbox and Outbox

The last thing to do is to ensure the inbox/outbox contains data. Both boxes are an OrderedCollection. see spec When you go live these endpoints will need to acknowledge incoming POST requests. This means you need to send a POST request back to the initiator of the request.

Route::get('/activityPub/users/{user}/inbox', function (Request $request, User $user) {
    return myJson([
        '@context' => 'https://www.w3.org/ns/activitystreams',
        'summary' => 'Inbox for alice',
        'type' => 'OrderedCollection',
        'totalItems' => 0,
        'orderedItems' => [],
    ]);
})->name('activityPub.inbox');

Route::get('/activityPub/users/{user}/outbox', function (Request $request, User $user) {
    return myJson([
        '@context' => 'https://www.w3.org/ns/activitystreams',
        'summary' => 'Outbox for alice',
        'type' => 'OrderedCollection',
        'totalItems' => 0,
        'orderedItems' => [],
    ]);
})->name('activityPub.outbox');

You are now in the Fediverse!

When you deploy your app and serve over HTTPS, you should see your profile through sites like Mastodon. You may have to log in to said platform to trigger account discovery.

Now what?

Implement other parts of the protocol, but do whatever you want. Make a blog, make a todo app, make something exiting and anything that follows the protocol will be visible throughout the Fediverse!

Laravel - Separate Routes into Custom Route Files

Wade Zimmerman — Sat, 12 Aug 2023 16:43:35 +0000

Have you ever lost your train of thought while looking for a route in your Laravel project?

Scenario - Use Case

Odds are you have routes for admin dashboards, user preferences, content feeds, payment gateways, etc. How do you keep all these routes organized while staying organized?

Answer

Adding a custom route file is great for applying middleware and prefixes to every route in the file. The RouteServiceProvider provides an interface for registering additional routers.

How to Add a Custom Route File in Laravel

Open your app/Providers/RouteServiceProvider.php file in your favorite editor. In the boot method, you can register custom routers:

By default, Laravel registers a file for pages in the web.php file, and API endpoints in the api.php file. Each route group is assigned to a middleware group which is configurable in the app/Http/Kernel.php file:

To define a custom route file like dashboard.php start by adding a route group, and consider attaching a middleware group for more control:

Defining routes for a dashboard will be scoped to the prefix and middleware defined in the RouteServiceProvider class.

Conclusion

Dedicated route files is an easy way to clean up your Laravel project. For more quick Laravel tips, follow me on X https://x.com/WadeCodeZ

The Next Big Milestone for AI

Wade Zimmerman — Sat, 10 Jun 2023 16:38:15 +0000

AI is turning out to have many applications such as self driving vehicles, interpretation of text, and the ability to generate media better than a human.

It is easy to be critical of the work and say the end is near unless we stop the evil whatever, but I'm curious what the future will hold. Surely there will be other products and applications of AI that benefit humans.

Currently we have the following types of software powered by some form of AI:

Text to text for translating and understanding large globs of text
Text to media for generating human like content such as images, audio, and video
Media to text for summarizing large blobs of data as a transcript.

In my opinion, I think the next big thing is going to be advancements in accessibility. Stuff like auto generating ASL for videos, or headphones that translate from Chinese to English in real time.

Native iOS Touch Events w/ Rust

Wade Zimmerman — Sun, 22 Jan 2023 18:21:07 +0000

A continuation of my journey exploring cross platform game development using purely Rust and the Bevy engine.

Seriously. It's 100% Rust!

Previous Article: Compiling to iOS

Criteria

Once my project compiles to iOS, the next logical step is to handle tapping/clicking. If all succeeds, the engine should produce some sort of coordinate value on a tap/click event. Ideally, game components should react to the event and produce some sort of visual feedback.

0. Create a grid of squares

This part of the program is not important right now because my main goal is to recognize input events. If you are following along you can either skip this step or make whatever you want.

For those who are curious, the core of the grid comes down to a sprite bundle which I is encapsulated as "TileBundle". For now, each tile has an arbitrary color and position.

sprite: SpriteBundle {
    sprite: Sprite {
        color: settings.color,
        ..default()
    },
    ..default()
},
position: settings.position,
..default()

1. Make a System for Handling Pointer Events

Depending on the scenario, I may want to separate click events from tap events, but for now, I want the mobile and desktop environments to behave the same. So I will dispatch the same MyPointerEvent for both events.

However, knowing this could be a gross simplification, I made two separate systems. If I decide to make the event handling more complex at a later point, all I have to do is expand the definition of the struct to fit my needs.

.add_system(tap_capture_system)
.add_system(click_capture_system)
.add_event::<MyPointerEvent>()

pub struct MyPointerEvent {
    pub position: Vec2,
}

2. Obtain a window coordinate

I want my pointer events to hold a coordinate value. To obtain a coordinate I need to use the primary window or the window associated with a specific camera.

fn click_capture_system(
    windows: Res<Windows>,
    mut tap_event: EventWriter<PointerEvent>,
    q_camera: Query<(&Camera, &GlobalTransform), With<MainCamera>>
    // todo: add mouse button or tap
) {

    // assuming there is exactly one main camera entity, so query::single() is OK
    let (camera, camera_transform) = q_camera.single();

    // get the window that the camera is displaying to (or the primary window)
    let wnd = if let RenderTarget::Window(id) = camera.target       
    {
        windows.get(id).unwrap()
    } else {
        windows.get_primary().unwrap()
    };
}

3. Dispatch shared event

Now I need to listen for click events or pointer events on the window. When an event happens in either scenario, I will dispatch the same event.

fn click_capture_system(
    // ...
    btn: Res<Input<MouseButton>>,
) {
    // check if the cursor is inside the window and get its position
    if let Some(screen_pos) = wnd.cursor_position() {
        if btn.just_released(MouseButton::Left) {
            debug!("hello click {}", screen_pos);
            tap_event.send(PointerEvent {
                position: screen_pos
            });
        }
    }
}

Touches are handled slightly different because the position is not optional. Pretty sure the difference is attributed to the fact that mobile devices can only detect taps when the application is open. That's a whole can of worms I don't really care about right now.

fn tap_capture_system(
    // ...
    touches: Res<Touches>,
) {
   for touch in touches.iter_just_released() {
        if touches.just_released(touch.id()) {
            debug!("hello tap {}", touch.position());
            tap_event.send(PointerEvent {
                position: touch.position()
            });
        }
    }
}

4. Listening to custom event

Now I want to consume my custom event data elsewhere in my application. So I for now I created a separate sub system for handling pointer events which lives within the plugin I use for my TileBundle code.

fn handle_tile_pointer_events(
    mut events: EventReader<PointerEvent>,
) {
    for pointer_event in events.iter() {
       // do something
    }
}

5. Convert Screen Coordinates into Game World Coordinates

This took me a while to conceptualize the first time so if give yourself some time to understand what is going on.

There is a problem with my existing code. There are multiple coordinate systems to account for. The window/mobile device have a 2D coordinate system and the game has a 3D/2D coordinate system.

I need to convert the operating system's coordinate system into a coordinate that makes since for my game. This is done by ray casting, aka normalizing coordinates. I like to think of it as mapping the game world onto a flat surface.

Here is the code I'm using for the mouse system and the tap system. I replaced the raw touch/click position in previous steps with the world position produced below.

// get the size of the window
let window_size = Vec2::new(wnd.width() as f32, wnd.height() as f32);

// convert screen position [0..resolution] to ndc [-1..1] (gpu coordinates)
let ndc = (INSERT_SCREEN_POSITION_HERE / window_size) * 2.0 - Vec2::ONE;

// matrix for undoing the projection and camera transform
let ndc_to_world = camera_transform.compute_matrix() * camera.projection_matrix().inverse();

// use it to convert ndc to world-space coordinates
let world_pos = ndc_to_world.project_point3(ndc.extend(-1.0));

// reduce it to a 2D value
let world_pos: Vec2 = world_pos.truncate();

6. Modify the world position for iOS.

Not sure if this is something that will change in the future, but currently Bevy produces an upside down coordinate. To fix this problem, I flipped the world position above on the Y axis.

let world_pos: Vec2 = world_pos.truncate()
    // flip y axis so touches line up with screen
    * Vec2::new(1.0, -1.0);

7. Consume reusable pointer event

I used the event to change the tapped/clicked tile to a random color.

I had to manually import nalgebra and parry2d to make this work.

For now, I calculate the box collider on each event. Ideally these coordinates would be held by the tile bundle. All I'm doing is seeing if the click/tap overlaps with a tile sprite.

for e in events.iter() {
    for (mut tile, mut sprite, global, transform) in q.iter_mut() {
        tile.update();

        let pointer = point!(e.position.x, e.position.y);

        let pos = global.translation();

        let size = transform.scale;
        let bl = pos - (size / 2.0);
        let tr = pos + (size / 2.0);

        let square = [
            point!(bl.x, tr.y),
            point!(tr.x, tr.y),
            point!(tr.x, bl.y),
            point!(bl.x, bl.y),
        ];

        if point_in_poly2d(&pointer, &square) {
            sprite.color = random_color();
        }
    }
}

Conclusion

It is possible to use Rust to handle tap events in iOS.

Here is what the final program looks like.

To Be Continued

Please consider leaving a like and comment below. It helps me plan the next article.

Plus commenting what you're working on may inspire or help others. Let's make Rust iOS development a thing!