Connecting Arduino to the Web : Front End Development Using JavaScript

Create physical interfaces that interact with the Internet and web pages. With Arduino and JavaScript you can create interactive physical displays and connected devices that send data to or receive data from the web. You'll take advantage of the processes needed to set up electronic components, collect data, and create web pages able to interact with electronic components. Through exercises, projects, and explanations, this book will give you the core front end web development and electronics skills needed to create connected physical interfaces and build compelling visualizations with a range of JavaScript libraries. By the end of the book you will have developed fully working interactive prototypes capable of sending data to and receiving data from a physical interface. Most importantly, Connecting Arduino to the Web will give you a taste of what is possible and the knowledge to create your own connected physical interfaces and bring the web into your electronics projects. What You'll Learn Build an Internet of Things dashboard that updates with electronics attached to an Arduino Use components to interact with online 3D displays Create web pages with HTML and CSS Set up a Node.js server Use WebSockets to process live data Interact with scalable vector graphics (SVG) Who This Book Is For Technologists, developers, and enthusiasts looking to extend their skills, be able to develop physical prototypes with connected devices, and with an interest in getting started with IoT. Also, those excited by the possibilities of connecting the physical and the web. Table of Contents 4 About the Author 10 About the Technical Reviewer 11 Introduction 12 Chapter 1: Arduino, Circuits and Components 16 Arduino 16 Arduino Hardware 17 Electricity 18 Ohms Law 21 Resistors 22 Electronic Circuit Diagrams 23 Arduino Software 24 Downloading and Setting Up the Arduino IDE 25 Connecting an Arduino to a Computer 26 Ports 27 The Breadboard 30 Cables 31 Digital and Analog 32 Analog Output 34 Pulse Width Modulation 35 Digital Input 38 Analog Input 42 Summary 45 Chapter 2: Creating a Web Server 46 What Is a Web Server? 46 Routing 47 What Is Node.js? 48 Using a Command-Line Interface 48 Setting Up a Node.js server 52 Installing Node.js 52 Installing Node.js from the Node.js Website 55 Installing Node.js Using a Node Version Manager(NVM) 55 Create a Node.js Application 56 The Directory Structure 57 NodeMon 65 Creating a Web Page 66 Template Engine 66 package.json and Version Control 75 How Sockets Work 81 Summary 85 Chapter 3: Arduino to Front End Part I 86 Introduction to Serial Port 87 Finding the Serial Port 88 Serial Data and Arduino 88 The Baud Rate 89 Using the Data on the Front End 96 SerialPort Library 96 Downloading the SerialPort Library 97 Summary 106 Chapter 4: Introduction to Creating Web Content 107 HTML 107 HTML Elements 108 Block Elements 108 Inline Elements 109 HTML Attributes 112 ID Attribute 113 Class Attribute 113 Nested Elements 113 Parent, Child, and Sibling Elements 113 Document Object Model 115 Browser Developer Tools 115 CSS 116 CSS Selectors 120 Type Selector 120 Class Selector 120 ID Selector 120 Attribute Selectors 121 Universal Selectors 121 Cascading Rules 121 Specificity 122 Importance 122 Source Order 122 The Box Model 122 Display Layout 123 Flexbox 124 CSS Grid 126 Color 130 RGB 130 Hexadecimal 130 HSL 130 Scalable Vector Graphics (SVG) 131 SVG Scaling 133 Viewbox 134 Computer Programming 134 Variables 134 Operators 135 Types 135 Boolean 136 Null 136 Undefined 136 Number 136 String 137 Symbol 137 Objects 137 Statements 137 Expressions 137 Data Structures 137 Conditional Statements 138 Loops 139 Functions 140 Scope 141 Summary 141 Chapter 5: Front End to Arduino 142 The Applications 142 LED Web Application 143 A Bit More About Flexbox 151 Setting Up the LED 158 LCD Web Application 162 Create the Server 163 Set Up the LCD 170 Summary 175 Chapter 6: Arduino to Front End Part II 176 Analog and Digital Signals 176 The Application 178 The Node.js Application 184 Extending the Application 202 Visualizing the Data on an Arduino 208 Summary 215 Chapter 7: Visualizing Data 216 Introduction to D3.js 216 How D3.js Works 217 Method Chaining 226 Visualizing Data from the Arduino with D3.js 226 Tidying Up the Code 237 Revealing Module Pattern 237 Separating the Data Visualization 238 Summary 245 Chapter 8: Create a Web Dashboard 246 The Dashboard 246 Principles of Data Visualization 247 Types of Visualization 249 Labeling a Visualization 250 Color 250 The Sensors 250 DHT11 Temperature and Humidity Sensor 251 Photoresistor 251 Importing Libraries 251 Adding in Daily Values 279 Summary 291 Chapter 9: Physical Data Visualization with Live Data 292 API 292 USGS API 293 Getting Data from an External Server 295 Callbacks and Promises 295 Callback Functions 296 Promises 298 Request Response Status Codes 298 The Node.JS Application 299 setTimeout vs. setInterval 300 The GeoJSON Object 301 The Arduino Components 308 A Piezo Buzzer 308 Summary 320 Chapter 10: Creating a Game Controller 321 Animation 321 The HTML5 Canvas Element 322 CSS Animation 322 3D on the Web 322 WebGL 323 3D Space 323 3D Meshes 325 Shaders 325 Vertex Shader 326 Fragment Shader 326 Cameras and Lights 326 Three.js 327 Three Vectors 327 The Game 333 The Web Application 337 Building Up the Game 340 Summary 379 Appendix A: Arduino Community And Components 380 Arduino Community 380 Arduino Components 381 Appendix B: More Front End Development 383 JavaScript 384 ES6 and Beyond 384 Block Scope 384 Constants 386 Arrow Functions 386 JavaScript Frameworks 387 React 387 Angular 388 Ember 388 Databases 388 Node.js Template Engines 389 Serial Port 389 CSS 390 Flexbox 390 CSS Grid 390 Data Visualization 390 Data Visualization Libraries 391 Data Visualization Resources 392 Maps 393 Color 393 Index 394 "With Arduino and JavaScript you can create interactive physical displays and connected devices that send data to or receive data from the web. You'll take advantage of the processes needed to set up electronic components, collect data, and create web pages able to interact with electronic components. Through exercises, projects, and explanations, this book will give you the core front end web development and electronics skills needed to create connected physical interfaces and build compelling visualizations with a range of JavaScript libraries. By the end of the book you will have developed fully working interactive prototypes capable of sending data to and receiving data from a physical interface. Most importantly, Connecting Arduino to the Web will give you a taste of what is possible and the knowledge to create your own connected physical interfaces and bring the web into your electronics projects."--Page 4 of cover Through exercises, projects, and explanations, this book will give you the core front end web development and electronics skills needed to create connected physical interfaces and build compelling visualizations with a range of JavaScript libraries. -- Edited summary from book