I am trying to modify the particle app to simplify the UI. I would like to change the UI so that there are only three buttons on the screen, D6, D5, and D0, and relabel them “Open”, “Close”, and D0 for a status indicator, as well as making D6, and D5 standard digital write without giving an option to change it and D0 as digital read for the sensor. I have background in HTML, unfortunately I am finding out very quickly that my knowledge with HTML just screws up Java. Can anyone point me in the right direction for doing this?
Then why not build a mobile page (assuming you can host it somewhere)? The functionality you’re describing isn’t too hard, and should be rather easy to build as a web app.
I’m hoping to roll this out to my customers eventually, mostly high end users with automatic gates, anything less than an easy to use app would scare them away.
A web app done right can look almost like a real app, its installed via the regular app store and gets an icon etc.
The difference is the app just runs an embedded browser when launched, with some optional callbacks to the android/ios system, so the interface is made in html/javascript not java/c.
I was actually referring to a ‘real’ webpage, made to look good on a mobile device. Unless you’ve got some specific needs from hardware, a mobile webpage will work just fine. Two buttons and status indication shouldn’t be an issue.
Added benefit is that a webpage will run on anything with a browser. You don’t have to make device specific apps, and thus only have to create/maintain one thing. Additionally this means people can also run it from a computer, which might be a nice-to-have feature as well.
Since you can add webpages as bookmarks on your home screen, there shouldn’t be a functional difference between a native app and a webpage.
Take it into consideration, and optionally let us know what your exact needs are. We can then advise more accurately 
Thanks Mora, I’ve only done full web pages, I didn’t know the option for a web app with a wrapper. I’ll look into that.
The web page would be a good option, but homeowners driving home would rather open an app, either native or hybrid, with the touch of a button rather than going to their mobile browser, and either typing a web address or going through their bookmarks.
My exact needs are changing the logo, and getting rid of the majority of the pins aside from the D5, D6, and D0, those I would like to have D5-digital write standard, D6-digital write standard, and D0 digital read standard without giving the option of changing them, and relabeling them “Open”, “Close”, and D0 for the status indicator.
Since you can do that, it’s the exact same experience. You get an app symbol on your home screen, with your preferred name. Click it, and it’ll open the page with your controls, just like it would on an app. Try it on your phone with any webpage. On the iPhone, it looks something like this:
If I get some time, I’ll try and get an example working.
1 Like
There is, it was a little more difficult to find, but I did locate it. Thanks
1 Like
I bet some users will still require “an app” no matter how much explaining you do. In my case though, I’m steering away from a native app. I don’t want to deal with app stores.
1 Like
Ok guys, I’ve been over what I know of HTML, tried to start a Ruby and Ruby on rails course, and I don’t know what I’m doing wrong but I cant grasp the concept of what is going on. Would anyone be open to walking me through some things, keeping in mind I am a complete beginner?
Would this work for you?
<html>
<head>
<title>Particle function toggles Example</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script src="http://cdn.jsdelivr.net/sparkjs/1/spark.min.js"></script>
</head>
<body>
Enter your access_token and corresponding deviceID below. Then, click login.
<br>
<input type="text" placeholder="acesstoken?" id="accesstoken">
<button type="button" onclick="sendValues()">Log in</button>
<hr>
Then, toggle away and watch in awe ;)
<div class="checkbox">
<label>
<input id="FirstToggle" type="checkbox" data-toggle="toggle">
First Toggle
</label>
</div>
<div class="checkbox">
<label>
<input id="SecondToggle" type="checkbox" data-toggle="toggle">
Second Toggle
</label>
</div>
<br>
<input type="text" placeholder="Output from sensor" id="SensorOutput">
<script>
//you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.
var accessToken = "access_token";
var deviceID = "enter_device_ID_here";
var SensorOutputBox = document.getElementById('SensorOutput');
var variable_to_be_monitored = "enter_variable_name_here"
function sendValues(){
accessToken = document.getElementById('accesstoken').value;
spark.login({ accessToken: accessToken });
}
// callback to be executed by each device
var callback = function(err, data) {
if (err) {
console.log('An error occurred while getting core attrs:', err);
} else {
console.log('Core attr retrieved successfully:', data);
}
}
var setVariable = function (err, data){ //handle variable return
if (err) {
console.log('An error occurred while getting variable:', err);
} else {
console.log('Variable retrieved successfully:', data);
console.log(data.result);
SensorOutputBox.value = data.result; //set value to box
}
}
function variableGet(variableName){
spark.getVariable(deviceID, variableName, setVariable); //get variable
}
function functionCall(functionName, functionArgument){
// The function needs to be defined in the firmware uploaded to the
// the Spark core and registered to the Spark cloud, same thing we do
// with variables. You pass along the name of the function and the params.
spark.callFunction(deviceID, functionName, functionArgument, callback);
}
//Enter the name and argument of the function you'd like to call on a toggle below.
$(function(){
$('#FirstToggle').change(function() {
console.log("kitchen toggled");
console.log(this.checked);
functionCall("functionName", "functionArgument");
})
$('#SecondToggle').change(function() {
console.log("bedroom toggled");
console.log(this.checked);
functionCall("functionName", "functionArgument");
})
})
spark.on('login', function(response) {
console.log(response);
alert("logged in");
setInterval(function() {
variableGet(variable_to_be_monitored);
}, 5000); // poll variable every 5 seconds
});
</script>
</body>
</html>
It’s pretty basic now, but most of the ideas are there. If you’re familiar with HTML/CSS you should be able to make it a bit fancier looking.
Let me know if that works for you Questions are also welcome!
1 Like
This should work great! I’ll go in and make it look fancy for my customers and change a couple of things but the overall functionality is awesome, thanks Moors7. Is there a way to get the automatic login/claim function from particle into something like this?
1 Like