Freeman35 Posted June 1, 2018 Share Posted June 1, 2018 This is my login screen. js Script from https://github.com/VincentGarreau/particles.js 2 Link to comment Share on other sites More sharing options...
Beginner Posted June 1, 2018 Share Posted June 1, 2018 Share skills how do it? Link to comment Share on other sites More sharing options...
Volk65 Posted June 1, 2018 Share Posted June 1, 2018 Share skills how do it? +1 Link to comment Share on other sites More sharing options...
Mohammed Nasman Posted June 28, 2018 Share Posted June 28, 2018 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 1 Link to comment Share on other sites More sharing options...
Freeman35 Posted June 28, 2018 Author Share Posted June 28, 2018 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; 1 Link to comment Share on other sites More sharing options...
mehmet07 Posted June 29, 2018 Share Posted June 29, 2018 Merhaba Freeman35 . Örnekteki hint ekranını yapmak için nasıl bir yapı kullandınız? Link to comment Share on other sites More sharing options...
Freeman35 Posted June 29, 2018 Author Share Posted June 29, 2018 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 Link to comment Share on other sites More sharing options...
mehmet07 Posted July 1, 2018 Share Posted July 1, 2018 Cok tesekkur ederim. Link to comment Share on other sites More sharing options...
mehmet07 Posted July 1, 2018 Share Posted July 1, 2018 Cok tesekkur ederim. Link to comment Share on other sites More sharing options...
SayeyeZohor Posted July 18, 2018 Share Posted July 18, 2018 This is my login screen. js Script from https://github.com/VincentGarreau/particles.js hi, please send sample code? Link to comment Share on other sites More sharing options...
Tokay Posted August 1, 2018 Share Posted August 1, 2018 Beauty is pain Link to comment Share on other sites More sharing options...
Ario.Paxaz Posted December 29, 2021 Share Posted December 29, 2021 Hi Can it be displayed Background the login page? Regards. Link to comment Share on other sites More sharing options...
artem_niko Posted February 8, 2022 Share Posted February 8, 2022 (edited) 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 Артем Link to comment Share on other sites More sharing options...
artem_niko Posted February 10, 2022 Share Posted February 10, 2022 Please, help me with my problem... Link to comment Share on other sites More sharing options...
Sherzod Posted February 10, 2022 Share Posted February 10, 2022 36 minutes ago, Артем said: Please, help me with my problem... Also look at this post: Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now