Project tutorial
Controlling Arduino State Machine via Web

Controlling Arduino State Machine via Web © GPL3+

This video shows how to change state of state machine on Arduino via web.

  • 2,020 views
  • 4 comments
  • 22 respects

Components and supplies

About this project

In this tutorial, I am going to show how to control state of Finite State Machine via webpage. As an example, I am going to show how to control three LEDs according to Finite State Machine model.

Demonstration Video

First of all, let’s think about real-time controlling Arduino via webpage:

Advantage: remotely and real-time controlling Arduino without developing and installing any special software and works on variety Operating System (Android, iOS, Windows) as long as it installed a web browser.

Disadvantage: need to have knowledge of web programming

Solution: PHPoC Shield for Arduino has a built-in Web Server and some pre-programmed web application, allowing user to remotely control and monitoring Arduino via Webpage without requiring any knowledge of web programming. See more at https://www.hackster.io/phpoc_man/arduino-websocket-056f16

The pre-programmed web application I used in this project is “Web Remote Control / Push”.

User interface is like below:

When a WebSocket connection is established, if a button is pressed or released, the web application sends a command to Arduino. For example, when button A is pressed and released, ‘A’ and ‘a’ command is sent to Arduino, respectively.

There are 3 LEDs (Red, Green, Yellow) in this project. I use three button A, B, C to turn on/off these LEDs. When a button is pressed, the current LED is blinked in short time and turned off, new LED corresponding to this button is turned on.

State machine diagram is shown as below.

Source Code

I made two pieces of codes with the same functionality.

The first one is normal code. The other is State Machine code.

Code

Normal code for controlling LED via webpageArduino
/* arduino web server - remote control (push button) */

#include "SPI.h"
#include "Phpoc.h"

#define STATE_YELLOW	'A'
#define STATE_GREEN		'B'
#define STATE_RED		'C'

#define PIN_LED_YELLOW 		3
#define PIN_LED_GREEN 		8
#define PIN_LED_RED			9

PhpocServer server(80);

char current_led = STATE_RED;
int pins[3] = {PIN_LED_YELLOW, PIN_LED_GREEN, PIN_LED_RED};

void handleEvent(char stt);

void setup(){
	Serial.begin(9600);
	while(!Serial)
		;

	Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
	//Phpoc.begin();

	server.beginWebSocket("remote_push");

	Serial.print("WebSocket server address : ");
	Serial.println(Phpoc.localIP());  
	
	pinMode(PIN_LED_YELLOW, OUTPUT);
	pinMode(PIN_LED_GREEN, OUTPUT);
	pinMode(PIN_LED_RED, OUTPUT);
	
	digitalWrite(PIN_LED_RED, HIGH);
	
}

void loop() {
	//Wait for a new client:
	PhpocClient client = server.available();

	if (client) {
		if (client.available() > 0) {
			//Read the bytes incoming from the client:
			char event = client.read();
			if(event == 'A' || event == 'B' || event == 'C')
				if(event != current_led)
					handleEvent(event);
		}
	}
}

void handleEvent(char event){
	
	for(int i = 0; i < 5; i++){
		digitalWrite(pins[current_led - 'A'], (i%2));
		delay(100);
	}
	//Turn on green led
	digitalWrite(pins[event - 'A'], HIGH);
	
	// update current state
	current_led = event;
}
Finite State Machine Code for controlling LED via webpageArduino
This code have the same functionality as normal code but using Finite State Machine model
/* arduino web server - remote control (push button) */

#include "SPI.h"
#include "Phpoc.h"

#define STATE_YELLOW	'A'
#define STATE_GREEN		'B'
#define STATE_RED		'C'

#define PIN_LED_YELLOW 		3
#define PIN_LED_GREEN 		8
#define PIN_LED_RED			9

PhpocServer server(80);

char fsm_state = STATE_RED;

void FSMEvent(char stt);

void setup(){
	Serial.begin(9600);
	while(!Serial)
		;

	Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
	//Phpoc.begin();

	server.beginWebSocket("remote_push");

	Serial.print("WebSocket server address : ");
	Serial.println(Phpoc.localIP());  
	
	pinMode(PIN_LED_YELLOW, OUTPUT);
	pinMode(PIN_LED_GREEN, OUTPUT);
	pinMode(PIN_LED_RED, OUTPUT);
	
	digitalWrite(PIN_LED_RED, HIGH);
}

void loop() {
	//Wait for a new client:
	PhpocClient client = server.available();

	if (client) {
		if (client.available() > 0) {
			//Read the bytes incoming from the client:
			char event = client.read();
			if(event == 'A' || event == 'B' || event == 'C')
				if(event != fsm_state)
					FSMEvent(event);
		}
	}
}

void FSMEvent(char event){
	
	//Action is taken based on current state and event
	switch(fsm_state){
		case STATE_YELLOW:
			
			if(event == STATE_GREEN){
				//Blink yellow led in a second and then turn off
				for(int i = 0; i < 5; i++){
					digitalWrite(PIN_LED_YELLOW, (i%2));
					delay(100);
				}
				//Turn on green led
				digitalWrite(PIN_LED_GREEN, HIGH);
			}
			else if(event == STATE_RED){
				//Blink yellow led in a second and then turn off
				for(int i = 0; i < 5; i++){
					digitalWrite(PIN_LED_YELLOW, (i%2));
					delay(100);
				}
				//Turn on red led
				digitalWrite(PIN_LED_RED, HIGH);
			}
			
			break;
			
		case STATE_GREEN:
			
			if(event == STATE_YELLOW){
				//Blink green led in a second and then turn off
				for(int i = 0; i < 5; i++){
					digitalWrite(PIN_LED_GREEN, (i%2));
					delay(100);
				}
				//Turn on yellow led
				digitalWrite(PIN_LED_YELLOW, HIGH);
			}
			else if(event == STATE_RED){
				//Blink green led in a second and then turn off
				for(int i = 0; i < 5; i++){
					digitalWrite(PIN_LED_GREEN, (i%2));
					delay(100);
				}
				//Turn on red led
				digitalWrite(PIN_LED_RED, HIGH);
			}
			
			break;
			
		case STATE_RED:
			
			if(event == STATE_YELLOW){
				//Blink red led in a second and then turn off
				for(int i = 0; i < 5; i++){
					digitalWrite(PIN_LED_RED, (i%2));
					delay(100);
				}
				//Turn on yellow led
				digitalWrite(PIN_LED_YELLOW, HIGH);
			}
			else if(event == STATE_GREEN){
				//Blink red led in a second and then turn off
				for(int i = 0; i < 5; i++){
					digitalWrite(PIN_LED_RED, (i%2));
					delay(100);
				}
				//Turn on green led
				digitalWrite(PIN_LED_GREEN, HIGH);
			}
			
			break;
	}
	
	// update current state
	fsm_state = event;
}

Schematics

Wiring
Wiring i3uunejif2

Comments

Similar projects you might like

Arduino - Web Oscilloscope (Support Trigger)

Project tutorial by phpoc_man

  • 5,765 views
  • 13 comments
  • 50 respects

Arduino - Web Pattern Unlock

Project tutorial by phpoc_man

  • 11,304 views
  • 1 comment
  • 62 respects

Reset Arduino via Web

Project tutorial by IoT_lover

  • 3,777 views
  • 2 comments
  • 29 respects

Arduino - Set Schedule via Web

Project tutorial by phpoc_man

  • 1,219 views
  • 2 comments
  • 20 respects

Object oriented state machine

by DGarbanzo

  • 705 views
  • 1 comment
  • 3 respects

Arduino Dynamic Web Control

Project tutorial by phpoc_man

  • 34,757 views
  • 15 comments
  • 117 respects
Add projectSign up / Login