Published October 25, 2018 © LGPL

PHPoC: Preparation & Introduction

If you have PHP knowledge, then this introduction to PHPoC (PHP on Chip) is for you.

BeginnerProtip2 hours1,986

Things used in this project

Hardware components

PHPoC WiFi Shield for Arduino

a Shield for Arduino Uno/Mega

PHPoC Blue

Software apps and online services

PHPoC Debugger

https://www.phpoc.com/download.php#download_tools

Story

Through published projects here at hackster.io I became aware of PHPoC and thought that I could polish up and use my rusty PHP knowledge.

The business area is managed by EZTCP.com, the IoT clientele via phpoc.com: here is a whole range of products available. The portfolio starts with the here presented PHPoC Shield for Arduino (Uno and Mega) with product name P4S-348 as well as the self-sufficient - without Arduino - running PHPoC Blue with designation P4S-342.

The difference to the PHPoC Black is the LAN interface instead of the (included) WiFi dongle.

Further expansion boards join the portfolio (also for SeeedStudio Grove) and cover special cases, such as the control of stepper motors.The latest newsletter from 10/2018 also announces the launch of its own IoT P4M-400 board.

What Do You Get

In addition to the products themselves, so the shield or the board is the WiFi dongle (only adapters using Ralink RT3070/5370 chipsetswork) and a customer card and a "DE-Stack Lever" to do so.This is the current advertising campaign of PHPoC: who has published a project the chance to get a free extension board. Please read the detailed conditions and registration conditions (Instagramm) separately. Borrowed from the economy "the leverage effect" comes probably from the video for the DE stack Lever. With the 3D-printed tool, the boards are quickly and comfortably detached from each other. A nice goodie.

Preparation

For a product to stand out from the crowd, unique selling points have to be named:

Arduino compatible (the sketches for the control of the sensors are recorded via the Arduino IDE and visualized via PHP-side components such as slide switches analogue to Blynk services in the web browser via their own IP address (initial 192.168.0.1) through the web server) or to operate independently with Blue/Black-Board - depending on the available budget.
Arduino Library with Examples
PHP and Scratch possible
Above all, good documentation, video examples (Jasmine, Amy) and
Email support with forum

Check out the PHPoC brochure and then start installing your own programming environment (v1.4.0) for Windows, named PHPoCD(eveloper). There is no other installation available for Linux or MacOS.

Introduction

Work through the few points of each manual (Blue-Board) and familiarize yourself with the IDE.

As a first point, you should make sure to install the latest firmware updates.

How to.

From version 1.4.0 is remote network support supportet - so it´s only possible for PHPoC Black/Blue and not for PHPoC Shield for Arduino which firmware ends in version 1.3.1. A real disadvantage for the not quite cheap Shield. Use via WiFi is excluded for the Arduino.

Good news: in consultation with the support a firmware update for the remote support, as well as with further features is in development! and will be released soon!

As second point connect the Board via MicroUSB-cable to a COM-Port at your Windows PC. Check the 3 boxes in the Tab 'Network' from 'Advanced'-Settings.

After you can switch from COM-Port x to "Network". Another dialog appears which discover your network to the board.

Power your Board via USB-Powerbank:

here my board via WiFi

Options in the menu

In my case I have a connection via http://192.168.178.55/ and got this output screen after I "ADD" a new file in the top level board structure, named it "index.php" and upload my simple PHP-Script with the fourth icon.

PHP script

Output in my browser

Next Steps

Of course, the board has a variety of interfaces and so external sensors can be connected and queried via Arduino Sketch.An optical processing of the data then takes place via PHP with curves and graphs.

A whole range of existing projects can be found here at hackster.io or in the PHPoC forum.

Adjusting Brightness via Web Browser from an LED

Using the PHPoC Shields for Arduino, the following steps are necessary:a.) Builds the circuit together: plus pole of the LED (the longer leg) is provided with a resistor and connected to the shield with PIN 9. The minus pole is connected to GND.b.) Load via Arduino IDE the example sketch with MicroUSB cable at the COM port of the PC on the Arduino.c.) Load the PHP code onto the shield via PHPoCD.d.) call the IP address specified by the shield and with slash the PHP file name.For me this is http://192.168.178.52/remote_slide_led.php

lets adjust the LED brightness over browser

The situation is different with the use of the black / blue board: here, all programming on sketches is dispensed with within the Arduino IDE and the PINs are addressed here directly using PHPoCD and PHP-Script.

What experiences have you gained with PHPoC?

/* arduino web server - remote control (slide switch) */
// original phpoc-example with 2 changes:
// definition for a LED PIN at 9 and
// if-clause to check the slider 
// Ingo Lohs, 24.10.2018

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

PhpocServer server(80);

char slideName;
int slideValue;

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

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

  server.beginWebSocket("remote_slide");

  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());  

  analogWrite (9, 127); // Port an the Shield and default Value for Brightness in the Range 0-255 from dark to max lightning
}

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

  if (client) {
    String slideStr = client.readLine();

    if(slideStr)
    {
      slideName = slideStr.charAt(0);
      slideValue = slideStr.substring(1).toInt();

      // if-clause for changed values from php-form
      if(slideName == 'A')
      {
        analogWrite (9, slideValue);
      }

      Serial.print(slideName);
      Serial.print('/');
      Serial.println(slideValue);
    }
  }
}

<?php
include_once "config.php";
include_once "/lib/sc_envu.php";
$envu = envu_read("nm0", NM0_ENVU_SIZE, NM0_ENVU_OFFSET);
if(!($wrs_width = envu_find($envu, "wrs_width")))
	$wrs_width = "150";
if(!($wrs_length = envu_find($envu, "wrs_length")))
	$wrs_length = "300";
if(!($wrs_value_min = envu_find($envu, "wrs_value_min")))
	$wrs_value_min = "0";
if(!($wrs_value_max = envu_find($envu, "wrs_value_max")))
	$wrs_value_max = "255";
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - Web Remote Control for Arduino</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<style>
body { text-align: center; font-size: 15pt; }
h1 { font-weight: bold; font-size: 25pt; }
h2 { font-weight: bold; font-size: 15pt; }
button { font-weight: bold; font-size: 15pt; }
</style>
<script>
var SLIDE_WIDTH = <?echo(int)$wrs_width/2?>;
var SLIDE_LENGTH = <?echo(int)$wrs_length?>;
var VALUE_MIN = <?echo(int)$wrs_value_min?>;
var VALUE_MAX = <?echo(int)$wrs_value_max?>;
var BUTTON_WIDTH = parseInt(SLIDE_WIDTH * 0.8);
var BUTTON_HEIGHT = parseInt(BUTTON_WIDTH / 2);
var SLIDE_HEIGHT = parseInt(SLIDE_LENGTH + BUTTON_HEIGHT * 1.1);
var slide_info = [ null, null ];
var ws;
function init()
{
	var remote = document.getElementById("remote");

	remote.width = SLIDE_WIDTH;
	remote.height = SLIDE_HEIGHT;
	remote.style = "border:1px solid black";

	slide_info[0] = {x:0, y:0, offset:0, state:false, identifier:null, ws_value:0};
	
	slide_info[0].x = parseInt(SLIDE_WIDTH / 2);
	slide_info[0].y = parseInt(SLIDE_HEIGHT / 2);

	update_slide(0, SLIDE_HEIGHT / 2);
	
	remote.addEventListener("touchstart", mouse_down);
	remote.addEventListener("touchend", mouse_up);
	remote.addEventListener("touchmove", mouse_move);

	remote.addEventListener("mousedown", mouse_down);
	remote.addEventListener("mouseup", mouse_up);
	remote.addEventListener("mousemove", mouse_move);
	remote.addEventListener("mouseout", mouse_up);
}
function connect_onclick()
{
	if(ws == null)
	{
		var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
		var debug = document.getElementById("debug");

		if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "["))
		{
			// network resource identifier to UNC path name conversion
			ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
			ws_host_addr = ws_host_addr.replace(/:/g, "-");
			ws_host_addr += ".ipv6-literal.net";
		}

		//debug.innerHTML = "<br>" + navigator.platform + " " + ws_host_addr;
		ws = new WebSocket("ws://" + ws_host_addr + "/remote_slide", "text.phpoc");

		document.getElementById("ws_state").innerHTML = "CONNECTING";

		ws.onopen = ws_onopen;
		ws.onclose = ws_onclose;
		ws.onmessage = ws_onmessage;
	}
	else
		ws.close();
}
function ws_onopen()
{
	document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
	document.getElementById("bt_connect").innerHTML = "Disconnect";

	// draw active slide button
	for(slide_id = 0; slide_id < 1; slide_id++)
	{
		var slide = slide_info[slide_id];

		update_slide(slide_id, slide.y - slide.offset);
	}
}
function ws_onclose()
{
	document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
	document.getElementById("bt_connect").innerHTML = "Connect";

	ws.onopen = null;
	ws.onclose = null;
	ws.onmessage = null;
	ws = null;

	// draw inactive slide button
	for(slide_id = 0; slide_id < 1; slide_id++)
	{
		var slide = slide_info[slide_id];

		update_slide(slide_id, slide.y - slide.offset);
		slide.ws_value = 0;
	}
}
function ws_onmessage(e_msg)
{
	e_msg = e_msg || window.event; // MessageEvent

	alert("msg : " + e_msg.data);
}
function update_slide(slide_id, y)
{
	var debug = document.getElementById("debug");
	var remote = document.getElementById("remote");
	var ctx = remote.getContext("2d");
	var slide = slide_info[slide_id];
	var slide_top, slide_ratio, slide_value;

	slide_top = (SLIDE_HEIGHT - SLIDE_LENGTH) / 2;

	slide.y = y + slide.offset;

	if(slide.y < slide_top)
		slide.y = slide_top;

	if(slide.y > (slide_top + SLIDE_LENGTH))
		slide.y = slide_top + SLIDE_LENGTH;

	ctx.clearRect(SLIDE_WIDTH * slide_id, 0, SLIDE_WIDTH, SLIDE_HEIGHT);

	ctx.fillStyle = "silver";
	ctx.beginPath();
	ctx.rect(slide.x - 5, slide_top, 10, SLIDE_LENGTH);
	ctx.fill();

	if(ws && (ws.readyState == 1))
	{
		ctx.strokeStyle = "blue";
		if(slide.state)
			ctx.fillStyle = "blue";
		else
			ctx.fillStyle = "skyblue";
	}
	else
	{
		ctx.strokeStyle = "gray";
		if(slide.state)
			ctx.fillStyle = "gray";
		else
			ctx.fillStyle = "silver";
	}

	ctx.beginPath();
	ctx.rect(slide.x - BUTTON_WIDTH / 2, slide.y - BUTTON_HEIGHT / 2, BUTTON_WIDTH, BUTTON_HEIGHT);
	ctx.fill();
	ctx.stroke();

	ctx.font = "30px Arial";
	ctx.textBaseline = "top";
	ctx.fillStyle = "white";

	slide_ratio = (SLIDE_LENGTH - (slide.y - slide_top)) / SLIDE_LENGTH;       // 0 ~ 1
	slide_value = parseInt(slide_ratio * (VALUE_MAX - VALUE_MIN) + VALUE_MIN); // VALUE_MIN ~ VALUE_MAX

	if(slide_id == 0)
	{
		ctx.textAlign = "right";
		ctx.fillText(slide_value.toString(), slide.x + BUTTON_WIDTH / 2 - 5, slide.y - BUTTON_HEIGHT / 2);
	}
	else
	{
		ctx.textAlign = "left";
		ctx.fillText(slide_value.toString(), slide.x - BUTTON_WIDTH / 2 + 5, slide.y - BUTTON_HEIGHT / 2);
	}

	if(ws && (ws.readyState == 1))
	{
		//debug.innerHTML = slide.ws_value + "/" + slide_value;

		if(slide.ws_value != slide_value)
		{
			if(slide_id == 0)
				ws.send("A" + slide_value.toString() + "\r\n");
			else
				ws.send("B" + slide_value.toString() + "\r\n");

			slide.ws_value = slide_value;
		}
	}
}
function find_slide_id(x, y)
{
	var button_left, button_right, button_top, button_bottom;
	var slide_id, slide;

	if(x < SLIDE_WIDTH)
		slide_id = 0;
	else
		slide_id = 1;

	slide = slide_info[slide_id];

	button_left = slide.x - BUTTON_WIDTH / 2;
	button_right = slide.x + BUTTON_WIDTH / 2;
	button_top = slide.y - BUTTON_HEIGHT / 2;
	button_bottom = slide.y + BUTTON_HEIGHT / 2;

	if((x > button_left) && (x < button_right) && (y > button_top) && (y < button_bottom))
		return slide_id;
	else
		return 2;
}
function mouse_down(event)
{
	var debug = document.getElementById("debug");
	var x, y, slide_id;

	//debug.innerHTML = "";

	if(event.changedTouches)
	{
		for(var id = 0; id < event.changedTouches.length; id++)
		{
			var touch = event.changedTouches[id];

			x = touch.pageX - touch.target.offsetLeft;
			y = touch.pageY - touch.target.offsetTop;

			slide_id = find_slide_id(x, y);

			//debug.innerHTML += slide_id + "/" + x + "/" + y + " ";
			//debug.innerHTML += slide_id + "/" + touch.identifier + " ";

			if(slide_id < 2)
			{
				var slide = slide_info[slide_id];

			 	if(!slide.state)
				{
					slide.offset = slide.y - y;
					slide.identifier = touch.identifier;
					slide.state = true;

					update_slide(slide_id, y);
				}
			}
		}
	}
	else
	{
		x = event.offsetX;
		y = event.offsetY;

		slide_id = find_slide_id(x, y);

		if(slide_id < 2)
		{
			var slide = slide_info[slide_id];

			slide.offset = slide.y - y;
			slide.state = true;

			update_slide(slide_id, y);
		}
	}

	event.preventDefault();
}
function mouse_up(event)
{
	var debug = document.getElementById("debug");
	var slide_id;

	//debug.innerHTML = "";

	if(event.changedTouches)
	{
		for(var id = 0; id < event.changedTouches.length; id++)
		{
			var touch = event.changedTouches[id];

			if(touch.identifier == slide_info[0].identifier)
				slide_id = 0;
			else
			if(touch.identifier == slide_info[1].identifier)
				slide_id = 1;
			else
				slide_id = 2;

			if(slide_id < 2)
			{
				var slide = slide_info[slide_id];

				slide.state = false;
				slide.identifier = null;

				if(document.getElementById("bt_center").checked == true)
				{
					slide.offset = 0;
					update_slide(slide_id, SLIDE_HEIGHT / 2);
				}
				else
					update_slide(slide_id, slide.y - slide.offset);
			}
		}
	}
	else
	{
		if(slide_info[0].state)
			slide_id = 0;
		else
		if(slide_info[1].state)
			slide_id = 1;
		else
			slide_id = 2;

		if(slide_id < 2)
		{
			var slide = slide_info[slide_id];

			slide.state = false;

			if(document.getElementById("bt_center").checked == true)
			{
				slide.offset = 0;
				update_slide(slide_id, SLIDE_HEIGHT / 2);
			}
			else
				update_slide(slide_id, slide.y - slide.offset);
		}
	}

	event.preventDefault();
}
function mouse_move(event)
{
	var debug = document.getElementById("debug");
	var x, y, slide_id, offset;

	//debug.innerHTML = "";

	if(event.changedTouches)
	{
		for(var id = 0; id < event.changedTouches.length; id++)
		{
			var touch = event.changedTouches[id];

			if(touch.identifier == slide_info[0].identifier)
				slide_id = 0;
			else
			if(touch.identifier == slide_info[1].identifier)
				slide_id = 1;
			else
				slide_id = 2;

			if(slide_id < 2)
			{
				x = touch.pageX - touch.target.offsetLeft;
				y = touch.pageY - touch.target.offsetTop;

				update_slide(slide_id, y);
			}
		}
	}
	else
	{
		if(slide_info[0].state)
			slide_id = 0;
		else
		if(slide_info[1].state)
			slide_id = 1;
		else
			slide_id = 2;

		if(slide_id < 2)
		{
			x = event.offsetX;
			y = event.offsetY;

			update_slide(slide_id, y);
		}
	}

	event.preventDefault();
}
function bt_center_change()
{
	if(document.getElementById("bt_center").checked == true)
	{
		for(slide_id = 0; slide_id < 1; slide_id++)
		{
			var slide = slide_info[slide_id];

			slide.offset = 0;
			update_slide(slide_id, SLIDE_HEIGHT / 2);
		}
	}
}
window.onload = init;
</script>
</head>

<body>

<p>
<h1>Web Remote Control / Slide</h1>
</p>

<canvas id="remote"></canvas>

<h2>WebSocket <font id="ws_state" color="gray">CLOSED</font></h2>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
&nbsp;&nbsp;&nbsp;Return to Center<input id="bt_center" type="checkbox" onchange="bt_center_change()">
<span id="debug"></span>

</body>
</html>

Credits

Ingo Lohs

182 projects • 194 followers

I am well over 50 years and come from the middle of Germany.

PHPoC: Preparation & Introduction

Things used in this project

Hardware components

Software apps and online services

Story

What Do You Get

Preparation

Introduction

Next Steps

Adjusting Brightness via Web Browser from an LED

Code

Arduino Sketch

PHPoC Shield for Arduino: remote_slide_led.php

Credits

Ingo Lohs

Comments

Embed the widget on your own site

PHPoC: Preparation & Introduction

PHPoC: Preparation & Introduction

Things used in this project

Hardware components

Software apps and online services

Story

What Do You Get

Preparation

Introduction

Next Steps

Adjusting Brightness via Web Browser from an LED

Code

Arduino Sketch

PHPoC Shield for Arduino: remote_slide_led.php

Credits

Ingo Lohs

Comments

Related channels and tags