Introduction: Move HTML Elements With JQuery Via Serial

By https://www.behance.net/ErnestW
About: I'm interaction designer and lecturer with multidisciplinary skills in tangible and graphic interfaces. Most of my projects are related to coexistence of virtual and real world, thinking how they shape our min…

This tutorial is outdated and depreciated because of many changes in framework and switching to node-webkit.

This instructable is about using the values received from Arduino and using them to manipulate HTML elements inside Involt. However this will not use Involt JQuery methods or UI elements but this example is to show the possibilities of Involt framework and its unique way to do this.

When I was learning Processing I remember the experiments, Creative Coding and simple games creation. When developing Involt, especially its JQuery support I’ve decided to test each new method or user interface element with simple DOM manipulations.

The goal of this project is to move the html element position, rotate it and place elements based on our position when Arduino button is pressed.

Even if creating this would be easier with Processing I think that when working with HTML/CSS/Jquery there are many possibilities that can be achieved easier than with other solutions. If you are advanced in Javascript you can combine this project with other JS libraries. It’s good to know that there are different methods for same thing and in my opinion the idea of easy interaction between html and Arduino is more than interesting.

If you wish to read more about Involt read the project page.

Step 1: Installation and Circuit

Hardware elements you need:

1x Arduino UNO

3x Potentiometers

1x Simple tact button

Connect the knobs to pins A0,A1,A2 and button to pin 2. For tact button you can also use 10k resistor or pull-up resistor. In this example I will use the build-in pull-up resistor.

Installation

Software here is Involt as in all my previous tutorial. Download the project files from github.

You also need to install the project as Chrome packaged app. To do this you need Chrome browser - open the settings > extensions, then toggle the developer mode, click "load unpacked extension..." and choose the www folder.

To open the app run this from extension list or from Chrome App launcher. You can also create shortcut on your desktop.

This is important because outside of Chrome the framework will not work.

Step 2: Arduino Code

Framework uses the Arduino sketch from arduino/involt folder. To send the values use the involtSend function with all three potentiometers. The delay is added to reduce the port usage. For tact button I used involtSendString to show that you can send not only numeric values. These functions are used to have common value and index from software and hardware side.

Values are mapped to screen and object size. To change the window dimensions change the core/background.js variables to 700x700.

The only thing to add inside sketch are involtSend, involtSendString, pinMode for button and variable declarations so the void loop and setup will look like this:

//...
int previousValue = LOW;

void setup() {
	//Bitrate must remain same as in app.
	Serial.begin(57600);
	pinMode(2,INPUT_PULLUP);
}

String isButton = "click";

void loop() {
	//receive data from your app, do not remove this line.
  	involtReceive();
  	int buttonValue = digitalRead(2);

  	//this is reversed because of PULLUP pinmode
  	if(buttonValue == LOW && previousValue == HIGH) {
    		delay(20);
    		involtSendString(3, isButton);
  	};
	previousValue = buttonValue;

  	//MAPPED KNOB VALUES to app window minus element dimensions
  	delay(5);
  	involtSend(0, map(analogRead(A0),0,1024,0,620));
  	delay(5);
  	involtSend(1, map(analogRead(A1),0,1024,0,620));
  	delay(5);
  	involtSend(2, map(analogRead(A2),0,1024,0,360));

	fname = "";
}

// ...

Remember to not remove the things before and after this code. As you probably noticed the autoPinMode parameter - don't use it in this example. This is for automatically add pinMode(pin, OUTPUT) when using directMode, so you don't have to write any line of code for basic interactions.

Step 3: The App and JQuery

index.html

Add custom script and stylesheet by including the custom.css and custom.js files in head section of index.html.

<link rel="stylesheet" type="text/css" href="custom.css">
<script src="custom.js"></script>

To create moving element which will place smaller blocks, add a div with player class.

<div class="player"></div>

custom.js

To move X, Y use the left and top attributes with .css() JQuery method. To add new elements I’m using the .append() method. This is tricky because we want to define in software when the button is fired so after the loop the value must be in previous form. Everything must be updated in real time so the easiest way is to add the script in setInterval function like this:

var updateScreen = function(){

//move the player on screen and rotate

	$(".player").css({
		left: involtReceivedPin[0],
		top: involtReceivedPin[1],
		transform: "rotate("+involtReceivedPin[2]+"deg)"
	});

//Now let's place bricks when hitting the button :)

	if(analogPins[3]=="click"){
		var x = involtReceivedPin[0]+40;
		var y = involtReceivedPin[1]+40;
		var rot = "rotate("+involtReceivedPin[2]+"deg)";
		$("body").append('<div class="brick" style="left:'+x+'px; top:'+y+'px; transform: '+rot+'"></div>');
		//reset the value to wait for next time the button is pressed
		involtReceivedPin[3] = 0;
	};
};

setInterval(updateScreen, 50);

For more about JQuery and Involt read this page.

custom.css

Remember about adding the CSS of placed elements. The most important here is the position attribute:

html{
	overflow: hidden!important;
}

.player{
	width: 80px;
	height:80px;
	position:absolute;
	background: blue;
	z-index: -1;
}

.brick{
	width: 35px;
	height: 35px;
	position: absolute;
	background: green;
}

Now open the app, select your Arduino port and start playing :) You can add more interactions or edit the css.

Step 4: The End

Thanks for reading this tutorial. If you seek more about Involt, check the getting started page.

Download the archive for project files.

Doing the same with Processing or Involt?

After the tutorial you probably thought about using Processing or other solutions. Creating the same thing with processing is maybe easier at some point - no setInterval, HTML, CSS and fancy JQuery brackets but Involt has its advantages in some cases.

Considering usage for Creative Coding purpose like this instructable - the Processing is better. As I remember creating user interfaces for app/product design is hard and it's even harder to make it look good and processing.js is not for hardware <-> software communication.

Every interaction/ux/web designer at some point had contact with HTML(and of course CSS and maybe JS). There are better possibilities with Involt similarly to interaction in web apps. Involt is suitable for such things and it's easier to create user interface with it. For many interactions you don't have to write any JS code - great isn't it? It's also easier to edit and install than for example node.js libraries. My other tutorials are about benefits of this point of view.

Attachments