New-UDCounter -Icon as a watermark

I just upgraded from 1.7.0 to 2.4.1 and noticed that the icons for New-UDCounter is no longer a watermark in the counter, its a tiny icon below the Title and changes the size/formatting of the dashboard.
Is this by design? Is there a way to get back the Watermark look from 1.7.0?

On top is what the same code looks like in 1.7.0 and the bottom is in 2.4.1.
counters

Hi @ChrisQuestionMark yes this is by design. I didnt or don’t get the issue you do with icon showing above counter. The counter looks much better with a smaller font. There is a nice example on the new poshud page in the nightly release. As far as I know no watermark parameter will double check…yep no watermark parameter…here is the latest code example from new poshud page:-

New-UDCounter -Title "Total Bytes Downloaded" -AutoRefresh -RefreshInterval 3 -Format '0.00b' -Icon cloud_download -Endpoint {
	Get-Random -Minimum 0 -Maximum 100000000 | ConvertTo-Json
}

I appreciate the response! I can see what you’re saying about the small icon size, it sits just to the left of the counter, unfortunately with a medium or large counter it doesn’t look as good and puts the icon on another line which messes up the sizing of the cell. I have my dashboard up on a 32" display for my helpdesk team, the smaller counter sizes just won’t work in our use case, they’re too small to see from far away. I’ve just removed the icons for the time being.

Here is the full dashboard as it looked on 1.7.0

Nice looking dashboard man…I feel the pain of change in this situation…maybe you could request the “watermark” parameter to be added to give this effect again on the counter…however as they say there is always more than one way to do this…let me have a think…

what about this…

   New-UDCard -Id "c1" -BackgroundColor 'black' -FontColor 'white' -Content {
        New-UDHeading -Text "Downloads" -Size 4 -Color 'white'
        New-UDIcon -Icon medkit -Size 7x -Color 'white'
        New-UDCounter  -AutoRefresh -RefreshInterval 3 -Format '0.00b' -FontColor 'white' -BackgroundColor 'black' -TextSize Large -TextAlignment left -Endpoint {
            Get-Random -Minimum 0 -Maximum 100000000 | ConvertTo-Json
        }
    }

gives you thishack

you can add this code to your udtheme

        UDCounter = @{
            BackgroundColor = "#2196F3"
            FontColor = "#FFFFFF"
            'overflow' = 'hidden'
        }
        ".ud-counter .card-content .card-title" = @{
            'font-size' =  '36px'
            'font-variant' =  'all-small-caps'
            'font-weight' =  '400'
        }
        "div#counter > div > div > svg" = @{
            FontColor = '#ffffff40'
            'margin-top'= '-56%'
            'margin-left'= '37%'
            'font-size'= '10em'
        }

it will give you something like that
image

2 Likes

Very nice @AlonGvili rate your solution over mine.

thanks, but i think that Icon parameter in ud-counter should be an Icon object and not string (the icon name) , if it’s an object you can set all the style on the icon like size color …

@AlonGvili and @psDevUK - Thank you for the suggestions!

I managed to get it working by modifying the UDTheme like you suggested and using the CSS code from v1.7.0. I was using the stock Azure theme, but using this instead makes it look like it used to:

$theme = New-UDTheme -name 'MyTheme' -Definition @{

".card-content svg" =  @{
    'font-size'= '4em'
    'opacity' = '.05'
    'float' = 'left'
    'position' = 'absolute'
    'top' = '20px'
    'margin-left' = '70px'
}

} -Parent 'Azure'