Login Form with animation

[Freeman35]

This is my login screen.

js Script from

https://github.com/VincentGarreau/particles.js

[Beginner]

Share skills how do it?

[Volk65]

Share skills how do it?

+1

[Mohammed Nasman]

Where add this js file in login form?

 

As quick demo:

 

1. Download particles.js file and place it into "files/" folder

2. on the ServerModule add reference to it using CustomFiles

3. On Custom CSS add the following CSS:

body {
margin: 0;
font:normal 75% Arial, Helvetica, sans-serif;
}



/* ---- particles.js container ---- */

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

4. On main Form, place a TUniHtmlFrame on the form, and then add this code

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
UniHTMLFrame1.HTML.Append('<div id="particles-js" width=500 height=500></div>');
UniHTMLFrame1.HTML.Append(
'<script>particlesJS.load(''particles-js'', ''files/particlesjs.json'', function() { console.log(''callback - particles.js config loaded'')});</script>');
end;

 

5. Run the demo and have fun ;-)

 

Regards,

Mohammed

[Freeman35]

Thank you Mohammed Nasman,

@CoderU,

Yes,

Create TLoginForm

LoginForm - NoBorder-wsMaximized

my codes:

particles_style.css  or Mohammed's css (I chnaged to this,'cos so simple. Thank you)

TUniHTMLFrame on loginform,

procedure TFRM_Login.UniLoginFormCreate(Sender: TObject);
begin
  UniHTMLFrame1..HTML.Text:='<div id="particles-js"</div>';
  UniHTMLFrame1.AfterScript.Text:= 'particlesJS.load(''particles-js'',''files/particles.json'',function(){console.log(''My Application Started...'');});';
  UniHTMLFrame1.Left:= 1;
  UniHTMLFrame1.Top := 1;

procedure TFRM_Login.UniLoginFormScreenResize(Sender: TObject; AWidth, AHeight: Integer);
begin
  UniHTMLFrame1.Width:= AWidth;
  UniHTMLFrame1.Height:= AHeight;

[mehmet07]

Merhaba Freeman35 .

Örnekteki hint ekranını yapmak için nasıl bir yapı kullandınız?

[Freeman35]

Merhaba,

Merhaba Freeman35 .

Örnekteki hint ekranını yapmak için nasıl bir yapı kullandınız?

Onu kullanmanızı tavsiye etmem, bende bıraktım zaten. Her biri için z-zorder gerekiyor, panelin dışına çıkmıyor, size ı değişmiyor vs sıkıntılar var.

function afterrender(sender, eOpts)
{
Ext.create('Ext.tip.ToolTip', {
   target: sender.getEl(),
   baseCls: 'UGS_hint_edit',
   //bodyStyle: 'background:#ffc; padding:10px;',
   html:'<div><b>Başlık</b></div>' +
          '<div>11111</div>' +
          '<div>22222222222</div>' +
          '<div>333333333333333333333333333</div>'
  });      
}

Bunu kullanın bence, ben bunu kullanmaya başladım. css ile ve html ile kullanımı hem kolay hemde daha sorunsuz geldi bana. Buna o ok işareti eklenirse süper olacak, onuda yapan olurda paylaşırsa çok makbule geçer

Kokay gele

[mehmet07]

Cok tesekkur ederim.

[mehmet07]

Cok tesekkur ederim.

[SayeyeZohor]

This is my login screen.

js Script from

https://github.com/VincentGarreau/particles.js

 

hi, please send sample code?

[Tokay]

Beauty is pain

[Ario.Paxaz]

Hi

Can it be displayed Background the login page?

 

Regards.

 

[artem_niko]

Hello!

I have slightly modified, for myself, the archive with the script from the first message. Everything suits me as it should now.
I corrected the files in the demo directory and now I need to display the same thing that is displayed in index.html in my project in the UniHTMLFrame on the form.

The problem is that the above codes do not animate like in the index.html file

I ask for help on how to register and connect the modified script to the project.

P.S .: UniServerModule.CustomFiles has the path to files/particles.js, but it's not working...

 

If I'm using code:

procedure TF_Login.UniLoginFormCreate(Sender: TObject);
begin
  UniHTMLFrame1.HTML.Text:='<div id="particles-js" width=500 height=500</div>';
  UniHTMLFrame1.AfterScript.Text:= 'particlesJS.load(''particles-js'',''files/particles.json'',function(){console.log(''My Application Started...'');});';
end;

...I get this (animation is working):

and I'm understand, why background is red and not from CSS...

test_js.zip

Edited February 8, 2022 by Артем

[artem_niko]

Please, help me with my problem...

[Sherzod]

36 minutes ago, Артем said:

Please, help me with my problem...

Also look at this post: