3DW DevTools – Application Development Cloud

How to focus text box in Blazor project

If you have to spend a lot of your time in your day doing repetitive tasks such as entering data into forms then you will likely agree that it can be quite convenient to focus on a textbox in a form.

When you’re accessing a form over and over filling out the same field it can be a huge time saver to have the cursor already in the box ready for you to type and hit enter.

It can greatly reduce the stress of repetitive task by not having to use the mouse as much.

According to the Microsoft training portal, you can easily accomplish this convenient feature in a Blazor project.

All you have to do is add a reference to the input element, then a line of code to activate it. Here is a summary of the information I learned in the Microsoft Training Portal.

The Blazor directive @ref="formInputName" lets the code block create an ElementReference to reference the input element. You can then use this element reference to call FocusAsync after a page has been rendered.
Add code to call FocusAsync after a page has loaded

<input @ref="formInputName" @bind="MyForm.formInputName" />

Now add a variable to activate and use that reference, and the code to call FocusAsync after a page has loaded:

private ElementReference formInputName;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) {
        await formInputName.FocusAsync();
    }
}

Form with a text box focused by the Blazor FocusAsync().
Screenshot taken from the results of taking a Microsoft Training.

XR Fusebox Project

AI generated art representing my multimedia production studios.

I’m very proud of my completion of the augmented reality fuse box challenge project. This was a very exciting course in which I learned how to program A/R image target recognition applications without an external third party engine. Using only Unity built-in functionality I was able to define an image target and spawn a 3D object onto that target through the user’s camera.

AI development tools

Artificial intelligence: more commonly known as AI. It’s a hot topic these days and there are many wild rumors going around of what AI can actually do. To help clear up the questions about this topic I’ve compiled a list of some of my favorite AI resources for artists and creators. Using these tools you can do so many things. From writing a letter to creating and generating unique artwork. Even music and animations are able to be generated using AI.

Connect to SFTP using C#

Yes, this happened. We needed to connect to an SFTP server using C#

Space Maids

A space maid is a person who works as a maid in a space station, a spaceship, or a planet. A space maid wears a uniform that is similar to a traditional maid outfit, but with some modifications to suit the environment and the tasks. For example, a space maid may wear a helmet, a jetpack, or a spacesuit, depending on the situation. A space maid may also have some cybernetic enhancements or gadgets to help with cleaning, cooking, or fighting.

https://soundraw.io/edit_music?m=648ca15aa435a800126e4242

Visual Scripting In Unity : Rotate an object

Here are variations on how to rotate an object using visual scripting. For this demonstration I made two cubes rotate automatically as well as via user input. One will rotate using the XBox controller and the other one is controlled using keyboard.

Unity Rotate Object

A simple script to rotate object in Unity

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Rotate : MonoBehaviour
{
    Vector3 movement;
    public int xi, yi, zi;

   
    void Start()
    {
        movement = new Vector3(xi, yi, zi);
    }

    
    void Update()
    {
        transform.Rotate(movement * Time.deltaTime);
    }
}


Add values to the public variables xi, yi, zi depending on the speed and direction you would like the object to rotate.

A/R Enhanced Comic Books

With this fun project I set out to enhance comic books using augmented reality technology. I chose a few covers from some of my favorites and tried to follow the theme of the comic book cover while adding augmented reality enhancements. The 3D objects and animations that enhance the scene when viewed through a camera seem to be a perfect combination.

Building on what I learned in my first project, I made five different AR targets and programmed each one with a different augmented reality effect. Some of them are quite complex such as smoke coming out of the chimney of a house and even characters that attempt to attack an enemy.

The first one is the cover of one of my beloved childhood comic book characters: Garfield. What could be better than looking at the cover through a camera and seeing Garfield trying to devour a steaming cheeseburger.

Augmented Reality Application with Clothing Image Target

In this exciting project I created an augmented reality (A/R) application with a clothing based Image Target using the Unity 3D engine and A/R camera recognition.

DeeDub’s workspace in the Unity 3D engine

This application will let you view through your camera and see your surroundings enhanced with augmented reality. When the camera recognizes a certain image that has been programmed in, it’s able to place a 3D animated character on surface of the image.

I programmed the camera to recognize a “Live Happy” logo that is on my wife’s apron. When the camera recognizes the logo it projects a 3D animated action figure walking around the logo. Once the image is tracked and the AR recognition has locked in place, you can move the device around and watch the AR camera match your movements.

Feel free to check out the APK (you’ll need to sideload it via developer mode on an Android device). One you load up the APK and install it on your device, open the app and point the camera at this logo:

Formatting a “Pretty Date” from an “Ugly” Database Timestamp

One of the constant issues when working with legacy data is how ugly it is. When you’re calling a stored procedure to pull out legacy data from an Oracle Storage Management System backend, the resulting text string is formatted in a way that… Well, let’s just say its hideous looking, or at least we can say that it’s not human readable. Fortunately I’ve come up with a large library of conversion methods to take this data and format it into a way that will look good in the application front end UI. For example here’s a here’s a sample from my library that can take a MySQL timestamp and format it to look nice on a web page or application front end. To save critical UI space and help differentiate old records from new ones, the display shows a different format for how old the record is. For example records from today will simply say what time they were entered. Records from this week will have the day of the week and records older than that will have the dates. I use techniques like these frequently while handling the data conversion from where it’s stored in a legacy back in to being displayed on the modern front end user interfaces.

//********************************************************************************
function formatDateFromDb($timestamp){
    $time_object = new DateTime($timestamp, new DateTimeZone('UTC'));
    $time_object->setTimezone(new DateTimeZone('America/Los_Angeles'));
    /*echo("<p>records from last year {$time_object->format('m/d/y g:i A')} </p>");
    echo("<p>records from last week {$time_object->format('D F j g:i A')} </p>");
    echo("<p>records from current week (but not from today) {$time_object->format('D g:i A')} </p>");
    echo("<p>records from current day {$time_object->format('g:i A')} </p>");*/
    
    $current_year = date('Y');
    $timestampyear = date('Y', strtotime($timestamp));
    $current_week = date('W');
    $timestampweek = date('W', strtotime($timestamp));
    $current_day = date('N');
    $timestampday = date('N', strtotime($timestamp));
    $current_hour = date('H');
    $timestamphour = date('H', strtotime($timestamp));
    $prettyDate = "";
    
   
    
    if($current_year - $timestampyear > 0) {
        //records from last year |  03/08/21 3:41 PM
        $prettyDate = $time_object->format('m/d/y g:i A');
    } else {
        if($current_week - $timestampweek > 0){
            //records from last week | Mon March 8 3:41 PM
            $prettyDate = $time_object->format('D F j g:i A');
        } else if(($current_week - $timestampweek == 0 && $current_day - $timestampday >0) || ($current_week - $timestampweek == 0 && $current_day - $timestampday == 0 && $timestamphour < 8)){
             //  records from current week (but not from today) |  Mon 3:41 PM
            $prettyDate = $time_object->format('D g:i A');
        } else if($current_week - $timestampweek == 0 && $current_day - $timestampday == 0 && $timestamphour >= 8){
            // records from current day | 3:41 PM
            $prettyDate = $time_object->format('g:i A');
        } else {
            $prettyDate = "time format not found for {$timestamp}";
        }
     
    }
    return $prettyDate;
}
//-----------------------------------------------------
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^