Universal Dashboard v3 Progress

Wow this all sounds and looks amazing from what I have seen so far. If I am reading this right then developing and making new components should be even easier and much much faster…? I am sure you are due another youtube video :grinning: so think this should all be covered in a youtube video. So excited about v3 and all these goodies you keep releasing. Thanks so much @adam and @AlonGvili for all your hard work :+1:

2 Likes

Yep! It should be way easier. Still needs some time to bake it but I’ll make sure to release lots of info when it’s done.

4 Likes

Been waiting for this for a while :slight_smile: glad to see it’s getting close.

Anyway we can get our hands on a nightly? just to see and play?

Looks very promising … Good work @adam @AlonGvili

1 Like

Nightly releases are now v3 -> https://github.com/ironmansoftware/universal-dashboard/releases/tag/nightly.20200221.29

Check out the sandbox dashboard to see how everything works: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard.MaterialUI/dashboard.ps1

3 Likes

what you guys think about the new theme file and approach ,

let start from the end the result is this

but instead of defining the style in the component you define the look in the theme, so in the example i want to create 3 avatars in different sizes
so in the theme file i do this

@{  
    name       = "basic"
    definition = @{
        colors   = @{
            primary    = "#df5656"
            secondary  = "#fdc533"
            background = "#c1c1c1"
            text       = "#333"
            muted      = "#d6d6d6"
        }
        modes    = @{
            dark = @{
                primary    = "#eaa22222"
                secondary  = "#fdc533"
                background = "#333"
                text       = "#fff"
                muted      = "#ccc"
            }
        }
        avatars = @{
            small = @{
                width = '24px'
                height = '24px'
                margin = '16px'
                borderRadius = '50%'
            }
            medium = @{
                width = '48px'
                height = '48px'
                margin = '16px'
                borderRadius = '50%'
            }
            large = @{
                width = '96px'
                height = '96px'
                margin = '16px'
                borderRadius = '50%'
            }
        }   
    }
}

I create new “section” name avatars and set the sizes with there props

and in the powershell function New-UDMUAvatar instead of using the property -Style @{…}
i use the -Variant property, for example, New-UDMUAvatar … -Variant small, this will create an avatar image with all the styles that we define in the theme avatars small.

New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant small
New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant medium
New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant large

Dark Color Mode

the new theme comes with built-in support for dark mode
to enable the dark theme you need to add this section

modes    = @{
            dark = @{
                primary    = "#eaa22222"
                secondary  = "#fdc533"
                background = "#333"
                text       = "#fff"
                muted      = "#ccc"
            }
        }

and to use the dark the or toggle between light and dark you can use New-UDToggleColorMode button

When the theme is light the icon will be image and when dark image

Notes

  • The new theme will give you support for dynamic spacing and fontSize base on the media breakpoint
    so you don’t need to deal with how the text look in different screens.

  • my main goal is to remove the properties: style,fontColor,backgroundColor from all the components, you can manage all of this in the theme

  • and for you component and module authors i will tell you that it so easy to add the theme support to you components, i will write small doc on How To do it

10 Likes

Updates…

I added option to set colors on charts using the new theme,

so the code section in the theme will look like that

and the result is

4 Likes

@adam I love to see the way v3 is going … is there any possible release date for this planned (just a guess is also fine for me). I am asking because I am working on some projects and want to plan if I can start this with v3 … :slight_smile:

No dates for now, we are working on the theme and the charts, we moveing from chart.js to antv g2plot lib.

1 Like

I think we can probably put out an alpha version in the next couple weeks. I would guess sometime this summer would be the GA release.

Sounds good, thats all I wanted to know :slight_smile: … Or just one more … Is the progress from v3 included in the nightly build? :slight_smile:

UD3 Community nightly releases are available. UD3 enterprise nightly releases are not posted yet. I changed\simplified how UD3 enterprise is developed but haven’t hooked up the build pipeline for that yet to publish nightly builds. Expect those to start coming out this week.

1 Like

I cannot find a v3 branch … Maybe silly from me but is the v3 progress in the “normal” master branch … And fir this reason in the “normal” nightly build?

v3 work is in the master branch and the normal nightlies are now v3 builds.
The v2 branch is the 2.9 version that was just released. We’ll update that branch when we need to do fixes for v2.

1 Like

I managed to get the v3 Enterprise release up on GitHub. Right now, there are 2 modules: UniversalDashboard.Community and UniversalDashboard.Enterprise. Enterprise relies on Community. It is no longer a fork of community.

To use enterprise functionality, you’ll need to do this for now.

Import-Module UniversalDashboard.Community
Import-Module UniversalDashboard.Enterprise

If you want to quickly check out all the functionality, download the dashboard.ps1 file.

Here’s a little script to configure some auth policies and a login page and use that dashboard.

$Dashboard = . "F:\universal-dashboard\src\UniversalDashboard.MaterialUI\dashboard.ps1"
Import-Module UniversalDashboard.Enterprise

$AuthorizationPolicy = New-UDAuthorizationPolicy -Name "Policy" -Endpoint {
    param($User)

    $true
}

$AuthorizationPolicy2 = New-UDAuthorizationPolicy -Name "FailedPolicy" -Endpoint {
    param($User)

    $false
}

$AuthenticationMethod = New-UDAuthenticationMethod -Endpoint {
    param([PSCredential]$Credential)

    if ($Credential.UserName -eq 'Adam')
    {
        New-UDAuthenticationResult -Success -UserName 'Adam'
    }
    else 
    {
        New-UDAuthenticationResult -ErrorMessage 'Failure!'
    }
}

$LoginPage = New-UDLoginPage -AuthenticationMethod $AuthenticationMethod -AuthorizationPolicy @($AuthorizationPolicy, $AuthorizationPolicy2)
$Dashboard.Properties.Add('LoginPage', $LoginPage)
$Dashboard.Properties.Add('AdminMode', [Switch]::Present)

Start-UDDashboard -Port 10001 -Dashboard $dashboard -Force -AdminMode

Obviously, this is very much a work in progress. Please don’t open issues for v3 yet. Once we release to the Gallery we will call it free game for v3 issues.

5 Likes

So i’m guessing the new chart going to support all of this …

3 Likes

will be interesting to see the end result a lot of configuration or maybe one command… :thinking:

yeah I’m curious to see how all the options play out. One thing I’m doing with the UDCard is making it so there is an “easy” parameter set and an “advanced” parameter set. So it’s easy to use it with just a few parameters (similar to what we have now) but also an advanced set that allows for all kinds of configuration. Maybe we could do something similar here.

im thinking maybe all the options related to styling i move to the theme so ppl can get consist look for charts in an easy way…

1 Like

Hi guys, just one thing poped out of my mind when I read this. It would be great if all commands are consistent and having the same style, just keep this in mind :wink: