Well I was recently looking at particle components for react, and thought these two additions would be handy.
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDMouseParticle
Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDMouseParticle
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
New-UDMouseParticle -Gravity 1 -Number 19 -Radius 100 -Angle 20 -Velocity 0.8 -Life 0.2 -Level 4 -Color @("#d62839", "#aaefdf", "#ba324f", "#175676", "#4ba3c3")
}
)
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDButtonParticle
Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDButtonParticle
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
New-UDButtonParticle -Id "Explode" -Text "Explode" -onClick {
Set-UDElement -id "Explode" -Attributes @{
hidden = $true
}
}
##Do some long activity then Set-UDElement and make it not hidden to bring it back
New-UDRow
New-UDButtonParticle -Text "Bring it Back" -OnClick {
Set-UDElement -id "Explode" -Attributes @{
hidden = $false
}
}
}
)
I thought no-one has done a cursor component yet, to my knowledge, and thought this was a bit retro, and my 2 younger daughters were fighting each other to play on my laptop, as they thought it was super cool.
The button particle will probably be more useful for everyone out there who has end-users that like to keep clicking buttons…you can make the button hidden which then makes it disappear, then make it re-appear when the data is loaded, I think this is the perfect one click solution for UD to prevent users keep clicking the button.
If anyone would like further information on using either of these components, please just ask. Thanks 
3 Likes
Looks fancy dude!
The cursor thing is pagespesific ? 
1 Like
I have not done lots of testing apart from it works and the parameters work. But yeah I believe you would have to add the mouse component per page
Interesting… i can see some meme worthy use cases 
Like employee of the month 
Doing another component right now actually…
4 this weekend? Dude… chill 
1 Like
@psDevUK
i have done some modification on your New-UDButtonParticle to make it work butter without attributes and added a background color for the button as well since the one you have posted does not have this ability.
1 Like
Thanks @wsl2001 for making the improvements. I got this on github located here:- https://github.com/psDevUK/UD-ButtonParticle
Or if you want to send/post the modified files I will then rebuild this with the modifications, and publish it as 1.0.1
Peace
@psDevUK
ud-buttonparticle.jsx
import React from 'react';
import ParticleEffectButton from 'react-particle-effect-button';
import Ripples from 'react-ripples'
import UdIcon from './ud-icon';
import ButtonLoader from 'react_button_loader';
class UDButtonParticle extends React.Component {
constructor() {
super();
this.state = {
hidden: false,
toggleLoader: false
};
}
// state is for keeping control state before or after changes.
handleClick = () => {
if (this.handleClick){
this.setState({hidden: true, toggleLoader: true});
UniversalDashboard.get(`/api/internal/component/element/${this.props.id + "onClick"}`,function(json){
if (json.error) {
this.setState({
hasError: true,
errorMessage: json.error.message
})
} else {
this.setState({
hasError: false,
hidden: false,
toggleLoader: false
});
}
}.bind(this));
}
}
render() {
var icon = null;
if (this.props.icon) {
icon = <UdIcon icon={this.props.icon} style={{marginRight: '5px'}}/>
}
return (
<ParticleEffectButton
color={this.props.color}
hidden={this.state.hidden}
duration={this.props.duration}
style={this.props.style}
direction={this.props.direction}
canvasPadding={this.props.canvasPadding}
particlesAmountCoefficient={this.props.particlesAmountCoefficient}
oscillationCoefficient={this.props.oscillationCoefficient}
id={this.props.id}
>
<Ripples>
<ButtonLoader
isLoading={this.state.toggleLoader}
loaderType= 'jiggling-lines'
disabled={this.props.disabled}
background={this.props.background}
onClick={this.handleClick.bind(this)}
>
{icon}
{this.props.text}
</ButtonLoader>
</Ripples>
</ParticleEffectButton>
);
}
}
export default UDButtonParticle
buttonparticle.ps1
<#
.SYNOPSIS
Sample control for UniversalDashboard.
.DESCRIPTION
Sample control function for UniversalDashboard. This function must have an ID and return a hash table.
.PARAMETER Id
An id for the component default value will be generated by new-guid.
.EXAMPLE
PS C:\> <example usage>
Explanation of what the example does
.INPUTS
Inputs (if any)
.OUTPUTS
Output (if any)
.NOTES
General notes
#>
function New-UDButtonParticle {
param(
[Parameter()]
[string]$Id = (New-Guid).ToString(),
[Parameter()]
[string]$isLoading,
[Parameter()]
[string]$loaderType,
[Parameter()]
[Switch]$Disabled,
[Parameter()]
[object]$onClick,
[Parameter()]
[UniversalDashboard.Models.FontAwesomeIcons]$Icon,
[Parameter()]
[ValidateSet('left', 'right')]
[String]$IconAlignment = 'left',
[Parameter()]
[string]$Color,
[Parameter()]
[String]$BackgroundColor,
[Parameter (Position = 0)]
[string]$Text,
[Parameter()]
[int]$Duration = 1000,
[Parameter()]
[ValidateSet("fill", "stroke")]
[String]$Style = "fill",
[Parameter()]
[ValidateSet("left", "right", "top", "bottom")]
[String]$Direction = "right",
[Parameter()]
[int]$Padding = 150,
[Parameter()]
[int]$Amount = 3,
[Parameter()]
[int]$Oscillation = 20
)
if ($null -ne $OnClick) {
if ($OnClick -is [scriptblock]) {
$OnClick = New-UDEndpoint -Endpoint $OnClick -Id ($Id + "onClick")
}
elseif ($OnClick -isnot [UniversalDashboard.Models.Endpoint]) {
throw "OnClick must be a script block or UDEndpoint"
}
}
if ($PSBoundParameters.ContainsKey("Icon")) {
$IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
}
@{
# The AssetID of the main JS File
assetId = $AssetId
# Tell UD this is a plugin
isPlugin = $true
# This ID must be the same as the one used in the JavaScript to register the control with UD
type = "UD-ButtonParticle"
# An ID is mandatory
id = $Id
# This is where you can put any other properties. They are passed to the React control's props
# The keys are case-sensitive in JS.
text = $Text
icon = $IconName
iconAlignment = $IconAlignment
onClick = $onClick.Name
color = $Color
duration = $Duration
direction = $Direction
style = $Style
canvasPadding = $Padding
particlesAmountCoefficient = $Amount
oscillationCoefficient = $Oscillation
background = $BackgroundColor
isLoading = $isLoading
disabled = $Disabled.IsPresent
loaderType = $loaderType
}
}
example script
Import-Module -Name UniversalDashboard
Import-Module UniversalDashboard.UDButtonParticle
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 1000 -AutoReload -Dashboard (
New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
New-UDButtonParticle -Id "Explode" -Text "Explode" -Color "#26a69a" -BackgroundColor "#6f42c1" -onClick {
start-sleep -Seconds 5
}
}
)
Note: if you look in my example am using start-sleep -sec 5 and this is usually for small commands since the effect takes about 4 seconds in length so when you use start sleep the button come back to its status , but for long jobs you dont need the start-sleep if the onclick command you are using takes a while to complete so when the status of your onclick command completed the button return.
1 Like
Very nice man 
will make sure I commit these changes and add you on the authors many thanks for the improvements made to this component, great to have got someone else interested enough to contribute to this component. Want it to be as easy to use as possible, with these changes it does make it easier for people. So thanks again 
you are welcome man , dont forget to add this component from https://www.npmjs.com/package/react_button_loader and the udicon from materilize module so people can use an icon as well with this button.
1 Like
Also would like to mention something about version 1.0 of your code, in your version aside from background color and icons if you have to use cache and let say generating buttons for a lot of objects and out to grid, when you click on a button all of the other buttons will be affected with same effect since you are using the same id for all where in this improvement you are only targeting the button you clicked and the effect will only apply on that particular button.
1 Like
Version 1.0.1 is now on the gallery:-
https://www.powershellgallery.com/packages/UniversalDashboard.UDButtonParticle/1.0.1
Using your example and adding an icon I have the following new demo
You cool if I put your loading button on the gallery?
sure man go ahead am k with it.