HTML to display and modify firmware settings

Getting Started
1

I want to develop HTML that will display a list of settings, and allow users to modify them.

Can someone point me to a tutorial, documentation, or an example for how this is done.

2

Starting point for you: Reading Spark Variables with Your Own HTML File
and also: Tutorial: Spark Variable and Function on One Web Page

1 Like
3

A very quick and easy way is to use Mobicle.io from your cellphone with a Particle Function.

I use it to “fine-tune” my Publish Delay for Electrons to stay under 1MB/month.
I also change Alarm Set-points, etc.

I know this doesn’t answer your question, but may help others (like me) with little HTML experience who are searching this forum.

Simple example to change the Publish Delay from a Cell Phone :


int publish_delay = 1200000 ;   //  Will default to 1200000 (20mins) after Reset/Reboot.
unsigned long now = millis(); 
unsigned int lastPublish = 0; 

void setup() {
   // Register Particle Function to allow user to remotely Change the Publish Delay.   
  Particle.function("setDelay", setPublishDelay);
 } // end setup

void loop() {
  now = millis();
  if ((now - lastPublish) > publish_delay)  {  
     // Publish Code goes HERE    
     lastPublish = now;
  }
}  // end loop

int setPublishDelay(String command) {  //Publish Delay Function.   
publish_delay = ( command.toInt() * 60000 );
Particle.publish("Publish Delay set to ", String(publish_delay), PRIVATE); 
// Use Mobicle.IO, Select Device, then Create a Button to send the # of MINUTES as an Argument to the setPublishDelay FUNCTION.  
// Create as Many buttons(1Min,5Min,etc) as you need, or you can type the Argument directly into the Function window.
// Function expects an Integer....1,2,3, etc in Minutes.
}
4

Thank you !! This tutorial was precisely what I was looking for … and more. As I looked at the java script, I noted some odd $. commands that I had never seen before. After a little research, I discovered they were jquery commands, and I learned that jquery was very powerful. My particle now exposes a JSON string as a Particle.variable, and jquery parses it for HTML on the UI side.

I can now manage my photon from an HTML on my cell phone and my computer.

1 Like
5

Thanks but “thanks” should really go to @bko !

1 Like