Tweet
Tutorial Video
Hardware
- PHPoC Blue (+ USB WLAN) or PHPoC Black (+ Ethernet cable)
- Micro USB to USB Cable (to upload source code to PHPoC Device)
Quick Steps
Source code of this example is a part of PHPoC Support Packet (PSP). You need to:
- Download PHPoC Support Package.
- Upload example\p4s\05.html5_graphics\00.hello to PHPoC Blue/Black.
- Configure network parameters (e.g. WiFi SSID, password, IP address ...).
- Access webpage on PHPoC using Web Browser on your PC or smart phone (See How To).
Source Code
Source files includes:index.php file, which contains source code of web page. It is only run in response to request from Web Browser.
index.php
[Full Code]
PHP Code:
<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } </style>
</head>
<body>
<canvas id="hello" width="400" height="200"></canvas>
<script>
var c = document.getElementById("hello");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.strokeStyle = "#000000";
ctx.strokeText("hello, world!", 100, 50);
</script>
</body>
</html>
[Explanation]
Source code of index.php file is composed of HTML, CSS, JavaScript and PHPoC code.
PHPoC code is interpreted on on PHPoC device.
PHPoC code may add/update the content of HTML, CSS or JavaScript code. Once PHPoC code is interpreted in PHPoC, the remaining code is client-side code and it is returned to Web Browser. Web Browser receives this code and interpret it to display the webpage.
- HTML: describes the structure of Web pages
- CSS: describes how HTML elements are to be displayed
- JavaScript: This code draws "hello, world!\ on canvas
Code:<script> var c = document.getElementById("hello"); var ctx = c.getContext("2d"); ctx.font = "40px Arial"; ctx.strokeStyle = "#000000"; ctx.strokeText("hello, world!", 100, 50); </script>
See Also
- Hello, World! - Printing Message to PHPoC Debugger Console.
- Hello, World! - Sending Data via UART.
- Hello, World! - Printing Message to Webpage.
- Hello, World! - Using Image on Embedded Web.
- Hello, World! - Sending Message via WebSocket.
Other Resources