Simple UDElement example: Meme Factory

I am slightly embarrassed to show this off and it is a bit of a Sh#tpost but… :man_shrugging:

I have been spending a lot of time on many complex dashboard/tools made with Universal Dashboard that I hope to show off soon, so I took a quick break to do something fun. In order to get more familiar with the basics of UDElements I created a goofy little meme dashboard.

When I found out “Meme APIs” are a thing I couldn’t help myself…

New-UDButton -Text "Get New Meme" -OnClick {
        
        $NewRandomMeme = Get-RandomMeme

        # Toast
        Show-UDToast -Message "Now Loading: $($NewRandomMeme.name)"
        
        # Set Image
        Set-UDElement -Id "imgMeme" -Attributes @{
            src = $NewRandomMeme.url
        }          
        
        # Set Label
        Set-UDElement -Id "lblMeme" -Content {$NewRandomMeme.name}
    
    }

    New-UDHtml -Markup "<br />"
    New-UDElement -ID "lblMeme" -Tag "div" -Content {""}
    New-UDElement -ID "imgMeme" -Tag "img" -Attributes @{src = ""}

And here is my quick “Get-RandomMeme” function that uses the imgflip.com API:

Function Get-RandomMeme
{
    $Meme = Invoke-WebRequest -Uri 'https://api.imgflip.com/get_memes'
    $Memes = ($Meme.Content | ConvertFrom-Json).data.memes
    $RandomMeme =($Memes | Get-Random | Select-Object name, url, width, height, box_count)
    return $RandomMeme
}

Hopefully, this will help beginners trying to use New-UDElement and Set-UDElement

8 Likes

its cool!, and from every example we can learn somethings.

1 Like

Stealing this now… Needed to put the Function in the Onclick section of the button for it to Fire. I suck with functions.

That’s fine its certainly an option to just throw everything in the onclick / endpoint :slight_smile:

There are a few nice tips to help organize your functions & pages - I’ll see about putting something together for that.

Hope you have some fun with memes!