Jump to content
uniGUI Discussion Forums
Freeman35

Login Form with animation

Recommended Posts

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

  • Upvote 1

Share this post


Link to post
Share on other sites

Thanks Mohammad

but I want to add this to LoginForm

 

Is it right way?

Create TLoginForm

LoginForm - NoBorder-wsMaximized

LoginForm-Layot-Fit-UnihtmlFrame - jsLib

Share this post


Link to post
Share on other sites

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;
  • Upvote 1

Share this post


Link to post
Share on other sites

Merhaba Freeman35 .

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

×