Particle Web Client: A JavaScript GUI for the Particle cloud

Cloud
1

Hello out there,

I always missed a simple GUI to access the variables, functions and events of my Spark devices. I’m not sure if such a tool exists already, but I have created one:

I have also uploaded an copy to https://particle.a-hanak.de

It’s written in JavaScript using Bootstrap for a responsive design and AngularJS.
You can use it on your desktop PC, tablet or smartphone.

Maybe it will be useful for some of you, so I just want to share it here. However, I’m not sure if this is the correct category as this is no hardware project.

Cheers,
André

6 Likes
2

Congratulations André ! Much like the app ! I’ve used and worked perfeitamene .
I think you can help me with a solution!
Managed to put two variables in the clouds , only the html page can only read one. Below as code 'm trying to do :

var url = " https://api.spark.io/v1/devices/ " + deviceID + " / ON_OFF " ;

How do I read the other variable ?

3

André this is really great work. I am new with JavaScript. What if i wanted to make a function in your app.js that would target a specific spark function and then call that function on the tpl page directly using a button.

ex Spark function name is Switch and the argument is on.

4

Hello Ali,

it’s nice to see that my project might help you. I’m planning a kind of “plugin support” which allows to create templates with custom buttons etc for your applications. But as this is not yet finished. I can help you here with a more or less dirty hack.

You can edit tpl/devices.tpl.html and search for the comment <!-- functions -->. There you can insert the following code:

<button clasS="btn" ng-click="callFunction(device.id, 'Switch', 'on')">Turn it on!</button>

This will actually call the method defined in js/app.js on line 319: $scope.callFunction = ....
You can take this as example to define other AngularJS methods.

I hope this can help you a bit. Feel free to ask more :wink:

Greetings
André

5

Hello fabripaz,

I’m sorry, but I cannot understand your question. If it has nothing to do with this project, you might want to create a new topic an give a more detailed description of your code and problem? I’ll have a look at it :smile:

Greetings
André

6

OK,

I will be creating a new topic .

Thanks.

7

Thanks for the input. I kind of did what you said by a little trial and error. Could we assign an apple style toggle switch button using bootstrap and angular js?

I also created a new page to kind of make a dashboard for manual controls with pre defined buttons. Also a place where the published functions are updated in a box instead of a stream.

Your app makes building on top of it easy work.

8

A checkbox will work like the following:

<input id="switch-state" type="checkbox" 
          ng-model="turnedOn" 
          ng-change="turnedOn ? callFunction(device.id, 'turnOn', '') : callFunction(device.id, 'turnOff', '')">

To make it look nicer, I tried http://www.bootstrap-switch.org/, but it did not work together with AngularJS in the first try, because it uses jQuery.

9

I did some further digging and got it to work with the example found on this page. However i can only work one state from the switch. Either on or off. I know im doing something wrong.

this goes in the app.js file

app.directive('bootstrapSwitch', [
        function() {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function(scope, element, attrs, ngModel) {
                    element.bootstrapSwitch();

                    element.on('switchChange.bootstrapSwitch', function(event, state) {
                        if (ngModel) {
                            scope.$apply(function() {
                                ngModel.$setViewValue(state);
                            });
                        }
                    });

                    scope.$watch(attrs.ngModel, function(newValue, oldValue) {
                        if (newValue) {
                            element.bootstrapSwitch('state', true, true);
                        } else {
                            element.bootstrapSwitch('state', false, true);
                        }
                    });
                }
            };
        }
    ]);

and this was in the tpl.html in the fucntions section

                                        <input type="checkbox" ng-model="mymodel.mystate" ng-change="turnedOn ? callFunction(device.id, 'SWITCH', 'fanon') : callFunction(device.id, 'SWITCH', 'fanoff')" bootstrap-switch  />

Oh and you need to add the libraries from the bootstrap switch page for it to work.

Any ideas?

Update!

got it working

<input type="checkbox" ng-model="mymodel.turnedOn" ng-change="mymodel.turnedOn ? callFunction(device.id, 'SWITCH', 'fanon') : callFunction(device.id, 'SWITCH', 'fanoff')" bootstrap-switch  />

how would you attach a scope to the NG-Model? and how would functionResult show a value for a specific argument instead of the function?

10

Hello Andreh,

I have been working on your webapp and building a dash on top of it. I see your eventsCtrl gets all the events being published on repeat. What would be the best way to publish specific event names?

Any help you can provide will be highly appreciated.

Ali