Using ParticleJS

Cloud
1

Hello Particle Community,

I am trying to get started with ParticleJs, and have been looking at this tutorial. I’ve been using my Particle Core for a little bit, but not with ParticleJS. So I was trying to run the example code, so my code looks liek this, so it can run the browser:

<!DOCTYPE html>
<html>
    
<div id = "spark-login" />

<script
 src = "//cdn.jsdelivr.net/sparkjs/0.5.9/spark.min.js">
</script>

<script>
  sparkLogin(function(data) {
    // Your code here
  });
</script>
</html>

The code does not work at all, if I try to run it in Chrome, the page is just blank. How do I get it to work?

2

The one in the ‘example’ folder works just fine for me…
Try adding http: before the slashes in your source. Also, checking the console output if often a good way to identify where the problems may lie. Give that a try next time :smile:

3

Yes, that one works for me, but why doesn’t the example. I think it’s important that I get that one to work too, so I understand the rest of the documentation.

Thanks,
ma7730

4

Okay, I’ve gotten it to work. Now, I’m trying to format the page using CSS. This is what I have:

body{


  background-color: #1ABC9C;
}

.spark-login-button {

  float: center;
  color: #16A085

}

The body formatting works, but the .spark-login-button doesn’t work at all. The tutorial said this is how to do it. What am I doing wrong?

5

I too had that issue. I suspect some in-line style is applied from within the library that is overwriting your style. What seemed to work for me was declaring it as !important. If I’m not mistaken, this should get fixed somewhere in the future, although I’m not certain when that would be.

6

Okay, so I declared it as !important, as seen below:

.spark-login-button {

  float: center !important;
  color: #16A085 !important;

}

It worked, sort of, it didn’t change the color of the button, rather, changing the color of the button’s text. How do I change the color of the button?

And, since particle is open-sourced, where can I find the original css file, from the ParticleJS so that I can do what I want? I looked on the github, but I couldn’t find it.

7

Then it worked exactly like it should :innocent:! Spot the difference between this, and this.

They should be here: https://github.com/spark/sparkjs/tree/master/lib The script you included was the minified version, which you can find over here. Use the former set of files to create your own.

1 Like
8

Oh, great, thank you! I don't have too much experience with CSS.

So, now I was looking below in the example, specifically the one that logs you in automatically,

var spark = require('spark');

spark.login({username: 'user@email.com', password: 'pass'});

So I tried to use that in my code, as shown below:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="tutorialStyle.css">
</head>


<!--<div id= "spark-login" /> -->
<script src="http://cdn.jsdelivr.net/sparkjs/0.5.9/spark.min.js"></script>
<script>

/*jslint node: true */
"use strict";

// We start by requiring Spark as usual
// this will give you back an instance of the SparkApi library
var spark = require('spark');

spark.login({ username: 'myEmail', password: 'myPassword' }, function(err, body) {
  console.log('API call login completed on callback:', body);

});

</script>

<html>

But when I look in the browser's console, it says:

Uncaught ReferenceError: require is not defined(anonymous function) @ tutorial.html:26

Must I install something? How do I make this work? I did all the command-line stuff they said to in the beginning of the tutorial.

Thanks,
ma7730

9

The library works for both node.js as well as in the browser, due to the fact that node.js runs on Javascript as well. That said, most, if not all of the examples are written with node.js in mind. For that, you need the require, which is something you don't need in the browser. You can leave that out, and it should work.

Keep in mind that those docs are a reference for the library with some examples included. It's not a tutorial of any kind. If you're new to javascript, it's not the ideal place to start learning it. There are some great tutorials out on the web which you're better off trying, if you're just getting started. W3schools is a good one for example. That said, you're more than welcome to ask any questions should you get stuck somewhere :slight_smile:

10

Thanks, I took it out and it worked. I’m not entirely new to JavaScript, but I just don’t have experience with Node.js, and this kind of stuff.