Background image using New-UDElement

Universal Dashboard Universal Dashboard Help
1

Hey everyone,

I am trying to create a background image on a new card but the image is not showing up. I am publishing a folder when starting the dashboard with Publish-UDFolder and using New-UDElement to create the image element.

Publish-UDFolder -Path 'C:\test\universaldashboard\images' -RequestPath '/images'

New-UDElement -Tag div -Attributes @{
    style = @{
         background = 'url("/images/time.png")'
     }
}

I can view and download the image via Invoke-WebRequest -Uri http://localhost:5000/images/time.png

Thanks for the help!

2

Hey @LiquoriChris a big welcome to the UD forums…In all my time using UD I have not contemplated this idea…however seeing as no-one has chipped in yet, and you seem clued up on HTML did you know about https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.Style as I am thinking this would be the solution to the problem…I can’t sadly give you working code as not done this yet, but thinking this is the module to use to achieve this. I hope this helps…if you get to the stage of banging your head on a wall I will attempt to code this :grinning:

3

Hi @psDevUK, thanks for the suggestion. I was able to use UDStyle with my current code and create the background image.

$Style = '.card {
    background-image: url(/images/ShipImage.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0% 0%;
}
.ship {
    position: absolute;
    bottom: 70px;
    left: 30px;
    font-size: 18px;
}'

New-UDLayout -Columns 2 -Content {
    New-UDStyle -Style $Style -Content {
        New-UDCard -Size small -Content {
            $Database = 'time'
            $Params = @{
                UserName = $Credential.UserName
                Password = $Credential.GetNetworkCredential().password
                Database = $Database
            }
            New-UDElement -Tag div -Attributes @{
                className = 'ship'
            } -Endpoint {
                New-UDHeading -Color Red -Size 5 -Content {
                    .\Scripts\Invoke-OracleDatabase.ps1 @Params -SqlScript "Scripts\ship.sql"
                    ' ('; .\Scripts\Invoke-OracleDatabase.ps1 @Params -SqlScript "Scripts\db.sql"; ')'
                }
            }
        }
    }
}
2 Likes