Introduction
I’m strong in scripting. Can I use the same knowledge to create impressive UI / some frontend using it? You are not alone my friend. Universal Dashboard a cross-platform open source PowerShell module is here to help us out for creating interactive web-based dashboards or so called PowerShell dashboards.
What makes it stand out?
- Written completely in PowerShell
- ASP.NET Core as backend
- Material Design built-in
- Components that can refresh dynamically
Installation
Open an Administrator PowerShell console and type `Install-Module -Name UniversalDashboard`
Code
Now let’s make something that’s cool. After installation of the module, you can access the cmdlets available from the module from the PowerShell console. Let’s set a simple goal. I need to track the prices of bitcoin in real time using the available modules.
The very first command is to find the URL that gives us the prices of the coins. We have coindesk,coinbase, and many such sites. In this example let’s make use of the coindesk API and get the price list.
$apiUrl = https://api.coindesk.com/v1/bpi/currentprice.json
Dashboard
Let’s now create the dashboard object. It can be done by
$Dashboard = New-UDDashboard -Title "Live BitCoin Tracker" -Content{}
To check we are going on the right path lets run this. To start the dashboard use the below command Start-UDDashboard -Dashboard $Dashboard -Port 5854. Port can be anything based on your configuration. Now if you run the above two lines of code you should see the UI like this.
Start-UDDashboard -Dashboard $Dashboard -Port 5854. Port can be anything based on your configuration. Now if you run the above two lines of code you should see the UI like this.
Let’s proceed further…
So Cool *__*, we are going on the right path. Let’s feed the dashboard some content. Let’s assume we are tracking prices for two coins USD and EUR, so we need two columns in the page. To create two vertical tab group type the below command inside the dashboard content object.
New-UDLayout -Columns 2 -Content {}.
The layout cannot be empty, so we initialize two rows inside the layout which will be populated with some real-time charts for us the visualize the data.
New-UDLayout -Columns 2 -Content {
New-UDRow -Columns {
//Live chart
}
New-UDRow -Columns {
//Live chart
}
}
If you take a look the documentation here, I was searching for components that can help us in visualizing the data, and I ended up with Monitors. It can refresh the data based on a certain interval and dynamically change the content. So let’s make use of it.
New-UDMonitor -Title "USD" -Type Line -DataPointHistory 10 -Endpoint {}
Instead of the -Content parameter here we have the -EndPoint parameter which will accept the logic of fetching data from an API/database etc.
So we already have the $apiUrl which returns price list of the coins so we will send a web request to that API and get the content and feed it to the chart. There are two charts for us, therefore the first one tracks prices in USD and a second one for EUR
Invoke-WebRequest -Uri $apiUrl -Method Get | Select-Object -ExpandProperty Content | ConvertFrom-Json |Select-Object -ExpandProperty bpi | Select-Object -ExpandProperty USD | Select-Object -ExpandProperty rate_float | Out-UDMonitorData
I’ve added some pipes to filter the content from the API that returns multiple data results. Finally, an Out-UDMonitorData should be added at the end of your result , so it sends the data to the monitor object. Additionally you can also add custom colors to the chart, Border color ,width and Font color to make it look pleasing to the eyes.
Finally our full script looks like ,
Now if you run the script you should be greeted with a beautiful real-time chart that refreshes and fetches the price of bitcoins and shows it visually. MISSION Complete. *__*
Let’s explore more possibilities that are possible with PowerShell.
If you like this post, you might also interested in PowerShell and for more blogs stay tuned to TechMeet360
Happy Scripting 😊
