Clever Geek Handbook

Rails: How do I install particle.js?

I want to implement this in my application, but I have no idea how can I install this? Can you please post step by step so I can figure out what files to put, where I tried to follow the instructions on the github page and had no success.

http://vincentgarreau.com/particles.js/#default

index.html -> I put its code in views / layouts / application.html

<div id="particles-js"></div>

<script src="particles.js"></script>

app.js -> I put it in assets /javascript/application.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particle.json -> I put it in assets /javascript/application.js

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
+3


source to share


2 answers


I couldn't install this with a gem, but I made it work with the following steps:

  • Download the Particle.js file, this will give you a JS file as well as a json file, which is better if you save it in a shared folder or better if you save it inside the service as Amazon S3. So the first step is to save a copy of the particle.js file inside the vendor folder.

        your_project / vendor / assets / javascripts / particles.js

  • After that, you need to modify the assets.rb file, which is stored inside the config / initializers / folder .

      your_project / config / initializers / assets.rb
  
    Rails.application.config.assets.paths << Rails.root.join ('vendor', 'assets', 'javascripts') 
    Rails.application.config.assets.precompile + =% w (.js .es6)

  • Paste the JSON file into the public folder, or if you prefer, save it, as I told you, to the Amazon S3 service. This will give you a route that will work for us.

  • Go to the main folder and inside the application javascript resources, open the application.js file and paste the following changes. It might be different from your configuration:

      // = require jquery
  // = require jquery_ujs
  // = require tether
  // = require bootstrap-sprockets
  // = require turbolinks
  // = require particles

Remember, you don't need to point to the vendor folder when you use assets on it, because we point to Rails inside the assets.rb file , we will upload the file to that folder as well.

  1. Now put the current code inside the main layout. I did this in the footer.html.erb file , you can paste it wherever you want.

      <script type = "text / javascript">
    particlesJS.load ('particles-js', 'https: //s3-##-west-#.amazonaws.com/your_project/particles.json', function () {
    console.log ('callback - particles.js config loaded');
 });
  </script>

Change the second parameter that will be used to store the JSON file and we are almost ready. And also remember that you have to fill it with the configurations you want to display on the screen.

  1. Add id to the element you want to display, for example:

      <div class = "jumbotron jumbotron-fluid" id = "particles-js" >


And everything is ready.

Remember the command execution in the terminal:   

      rails assets: precompile #in development environment if you want to test it.

And run:   

      RAILS_ENV = production rails assets: precompile #if you want to run as a production environment.
+2


source


You need to copy the file particles.js

you downloaded to app/assets/javascripts

and make sure you have something like require_tree .

in application.js

.



You can then safely remove <script src="particles.js"></script>

from your layout as the script will be loaded by the resource pipeline.

+1


source






More articles:


All Articles