What is the simplest way to connect an OpenProcessing sketch to a Particle device like the Boron?

Education
,
1

I am looking for an example of an interaction between a particle device and an OpenProcessing sketch. Ideally, this would be an existing OP sketch students could fork.

My current block in writing my own is with the particle login. What is the best approach to dealing with credentials? Or, if this is as fundamentally poor practice as it seems, what is another very simple way to connect?

Here is my starting point: Particle.io "Hello World" - OpenProcessing

2

I'm not really familiar with it, but from a brief glance at the website:

It doesn't look there's console input functionality. However, since you can create an input control, I would create boxes for username and password. Use these to generate an access token for that user. This requires a little extra work if the accounts has MFA enabled. I'd set a relatively short token lifetime, several hours at most.

The trick to making this usable is to store the access token in browser local storage, which appears to be supported. When you open the page, attempt to read this and get the user information to make sure the token is still valid and if so, use it without having to enter a username and password.

You'll probably want a logout button to delete the token from local storage and invalidate the login token.

3

Hi Thomas, welcome to the community!
What would you like to achieve with that interaction? If you can provide more details maybe more ideas can be floated around.
Best

4

I made a demo OpenProcessing sketch of how to handle Particle cloud login. It prompts for username, password, and, if necessary, MFA token, and generates a 4 hour time-limited access token. It stores this token in browser local storage so you can refresh your sketch without having to log in every time. If logged in, there a Logout button that invalidates the token and removes it from browser local storage.

https://openprocessing.org/sketch/1976325

Everything is encapsulated in a library so you basically just need to add a line to setup() and move any code that requires the user be logged in into afterLoggedIn().

function setup() {
    createCanvas(windowWidth, windowHeight);
    background('#202020');

    // Add the library:
    // https://cdn.jsdelivr.net/npm/particle-processing-rk/dist/particle-processing-rk.js
    // to add the particleHelper global object
    particleHelper.setup();
}

// The afterLoggedIn function(), if present, is called after the user has logged in
function afterLoggedIn() {
    console.log('logged in!');
}

The library is on Github. In addition to the login/logout features, there are handy wrappers for Particle function, variable, and publish, and selecting a device from your account.

Power users can access the whole particle-api-js, as well.

4 Likes
5

@rickkas7 Wow! A++ :slight_smile: My team and I will be working on a collection of demonstrations over the next few weeks for a course we are developing [I spent my weekend tweaking the other end of things, Solar Panel+battery charging+publishing+webhook+google sheet]. My team's effort should extend, build on, and give back to your work. I will share any feedback and resources on that here.

@gusgonnet That is an excellent question that I hope the students can explore. The question at hand is more about the infrastructure required to connect the device on a students desk to the Openprocessing sketch on their computer. With the simple entry point Rick has provided [which is beautiful] I believe we can get students excited about the possibilities and be inspired to extend the work using other tools. The example I shared, and the Rick has as well, includes a simple button, and from that almost anything is possible.

1 Like