mirror of
https://github.com/processing/processing4.git
synced 2026-02-02 13:21:07 +01:00
HTML5 input element examples for js mode
This commit is contained in:
fjenett
208
javascript/examples/HTML5/Input/variableInputs/interface.js
Normal file
208
javascript/examples/HTML5/Input/variableInputs/interface.js
Normal file
@@ -0,0 +1,208 @@
|
||||
window.onload = function () {
|
||||
tryFindSketch();
|
||||
}
|
||||
|
||||
function tryFindSketch () {
|
||||
var sketch = Processing.instances[0];
|
||||
if ( sketch == undefined ) return setTimeout(tryFindSketch, 200);
|
||||
|
||||
var controller = new Controller(sketch,"form-form");
|
||||
sketch.setController(controller);
|
||||
}
|
||||
|
||||
/**
|
||||
* Maybe someone wants to take over and make this into a
|
||||
* full-fledged interface library?
|
||||
*/
|
||||
var Controller = (function(){
|
||||
|
||||
function Controller () {
|
||||
var sketch = arguments[0];
|
||||
var form = document.getElementById(arguments[1]);
|
||||
form.onsubmit = function () {return false};
|
||||
var inputs = {};
|
||||
|
||||
this.createInputElement = function ( id, type, labelStr ) {
|
||||
var input = document.createElement('input');
|
||||
input.id = id;
|
||||
input.name = id;
|
||||
input.type = type;
|
||||
if ( labelStr !== undefined && labelStr !== '' )
|
||||
{
|
||||
var label = document.createElement('label');
|
||||
label['for'] = id;
|
||||
label.id = id+'-label';
|
||||
label.innerHTML = labelStr;
|
||||
form.appendChild(label);
|
||||
}
|
||||
form.appendChild(input);
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addInputField = function ( l, t ) {
|
||||
var id = createIdFromLabel(l);
|
||||
if ( inputs[id] == undefined ) {
|
||||
inputs[id] = this.createInputElement(id, t, l);
|
||||
inputs[id].onchange = function(){
|
||||
changeFunc()(sketch, id, this.value);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return inputs[id];
|
||||
}
|
||||
|
||||
this.addRange = function ( l, c, mi, mx ) {
|
||||
var input = this.addInputField( l, "range" );
|
||||
input.value = c;
|
||||
input.min = mi;
|
||||
input.max = mx;
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addPassword = function ( l ) {
|
||||
var input = this.addInputField ( l, "password" );
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addEmail = function ( l ) {
|
||||
var input = this.addInputField ( l, "email" );
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addSearch = function ( l, c ) {
|
||||
var input = this.addInputField ( l, "search" );
|
||||
input.value = c;
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addNumber = function ( l, c ) {
|
||||
var input = this.addInputField ( l, "number" );
|
||||
input.value = c;
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addTelephone = function ( l, c ) {
|
||||
var input = this.addInputField ( l, "tel" );
|
||||
input.value = c;
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addUrl = function ( l, c ) {
|
||||
var input = this.addInputField ( l, "url" );
|
||||
input.value = c;
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addDate = function ( l, c ) {
|
||||
var input = this.addInputField ( l, "date" );
|
||||
input.value = c;
|
||||
return input;
|
||||
}
|
||||
|
||||
this.addCheckbox = function ( l, c ) {
|
||||
var id = createIdFromLabel(l);
|
||||
if ( inputs[id] == undefined ) {
|
||||
inputs[id] = this.createInputElement(id, "checkbox", l);
|
||||
inputs[id].onchange = function(){
|
||||
changeFunc()(sketch, id, this.checked);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
inputs[id].checked = c ? 'checked' : '';
|
||||
return inputs[id];
|
||||
}
|
||||
|
||||
this.addTextfield = function ( l, c ) {
|
||||
var id = createIdFromLabel(l);
|
||||
if ( inputs[id] == undefined ) {
|
||||
inputs[id] = this.createInputElement(id, "text", l);
|
||||
inputs[id].onchange = function(){
|
||||
changeFunc()(sketch, id, this.value);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
inputs[id].value = c;
|
||||
return inputs[id];
|
||||
}
|
||||
|
||||
this.addTextarea = function ( l, c ) {
|
||||
var id = createIdFromLabel(l);
|
||||
if ( inputs[id] == undefined ) {
|
||||
var label = document.createElement('label');
|
||||
label['for'] = id;
|
||||
label.id = id+'-label';
|
||||
label.innerHTML = l;
|
||||
form.appendChild(label);
|
||||
inputs[id] = document.createElement('textarea');
|
||||
inputs[id].id = id;
|
||||
inputs[id].name = id;
|
||||
inputs[id].innerHTML = c;
|
||||
inputs[id].onchange = function(){
|
||||
changeFunc()(sketch, id, this.value);
|
||||
return false;
|
||||
}
|
||||
form.appendChild(inputs[id]);
|
||||
}
|
||||
inputs[id].value = c;
|
||||
return inputs[id];
|
||||
}
|
||||
|
||||
this.addSelection = function ( l, o ) {
|
||||
var id = createIdFromLabel(l);
|
||||
if ( inputs[id] == undefined ) {
|
||||
var label = document.createElement('label');
|
||||
label['for'] = id;
|
||||
label.id = id+'-label';
|
||||
label.innerHTML = l;
|
||||
form.appendChild(label);
|
||||
var select = document.createElement('select');
|
||||
select.id = id;
|
||||
select.name = id;
|
||||
if ( o !== undefined && o.length && o.length > 0 ) {
|
||||
for ( var i = 0; i < o.length; i++ ) {
|
||||
var value = o[i].length > 1 ? o[i][1] : i;
|
||||
var option = document.createElement('option');
|
||||
option.innerHTML = o[i][0];
|
||||
option.value = value;
|
||||
select.appendChild(option);
|
||||
}
|
||||
}
|
||||
select.onchange = function( event ){
|
||||
changeFunc()(sketch, id, this.value);
|
||||
return false;
|
||||
}
|
||||
inputs[id] = select;
|
||||
form.appendChild(inputs[id]);
|
||||
}
|
||||
return inputs[id];
|
||||
}
|
||||
this.addMenu = this.addSelection;
|
||||
|
||||
this.setElementLabel = function ( element, labelStr ) {
|
||||
var label = document.getElementById(element.id+'-label');
|
||||
if ( label && label.childNodes && label.childNodes.length > 0 ) {
|
||||
label.childNodes[0].textContent = labelStr;
|
||||
} else {
|
||||
//console.log([element, label]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var changeFunc = function () {
|
||||
return function ( sketch, id, value ) {
|
||||
try {
|
||||
sketch[id](value);
|
||||
} catch (e) {
|
||||
//console.log(e);
|
||||
sketch.println( "Function \"void "+id+"(value)\" is not defined in your sketch.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var createIdFromLabel = function ( l ) {
|
||||
return l.replace(/^[^-_a-z]/i,'_').replace(/[^-_a-z0-9]/gi,'');
|
||||
}
|
||||
|
||||
return Controller;
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,199 @@
|
||||
/**
|
||||
* This examples shows you how to interact with diverse HTML inputs. It follows
|
||||
* roughly the way that <a href="http://www.sojamo.de/libraries/controlP5/">ControlP5</a>
|
||||
* works for standard Processing. <br />
|
||||
*
|
||||
* <form id="form-form"><!-- empty --></form>
|
||||
* <!-- the following css adds a tiny bit of layout -->
|
||||
* <style>textarea,input,label,select{display:block;width:95%}select{width:97.5%}
|
||||
* input[type=checkbox],input[type=radio]{width: auto}textarea{height:5em}</style>
|
||||
*/
|
||||
|
||||
/**
|
||||
* This example is rather complicated. You can think of it having two parts:
|
||||
* 1) the interface "stuff": setting it up, handle events
|
||||
* 2) the layout based upon the values received from inputs
|
||||
*/
|
||||
|
||||
String[] menuItems;
|
||||
|
||||
// dafault input values
|
||||
int currentShape = 2;
|
||||
float currentX = 0;
|
||||
boolean hasStroke = true;
|
||||
float hueValue = 0;
|
||||
String fieldString = "Fancy Corp. Co.";
|
||||
String areaString = "We are the fresh new company with "+
|
||||
"activities ranging from A to Z and from "+
|
||||
"alpha to omega.";
|
||||
|
||||
void setup ()
|
||||
{
|
||||
size(300,200);
|
||||
|
||||
colorMode(HSB);
|
||||
|
||||
currentX = 50;
|
||||
|
||||
menuItems = new String[] {
|
||||
new String[] {"Rectangle"}, new String[] {"Ellipse"},
|
||||
new String[] {"Star"}, new String[] {"Spirograph"}
|
||||
};
|
||||
|
||||
textFont(createFont("Arial", 16));
|
||||
}
|
||||
|
||||
/* drawing the layout */
|
||||
|
||||
void draw ()
|
||||
{
|
||||
background( 200 );
|
||||
|
||||
strokeWeight(4);
|
||||
|
||||
if ( hasStroke ) stroke( hueValue, 150, 95 );
|
||||
else noStroke();
|
||||
|
||||
fill( hueValue, 200, 150 );
|
||||
|
||||
pushMatrix();
|
||||
switch ( currentShape ) {
|
||||
case 0:
|
||||
rectMode(CENTER);
|
||||
rect(currentX, height/4, 50, 50);
|
||||
break;
|
||||
case 1:
|
||||
ellipse(currentX, height/4, 55, 55);
|
||||
break;
|
||||
case 2:
|
||||
star(currentX, height/4, 17, 30);
|
||||
break;
|
||||
case 3:
|
||||
spiro(currentX, height/4, 20);
|
||||
break;
|
||||
}
|
||||
popMatrix();
|
||||
|
||||
fill( 0 );
|
||||
textSize(16);
|
||||
textAlign( CENTER );
|
||||
float tWidth = textWidth(fieldString);
|
||||
float tX = currentX;
|
||||
if ( currentX-tWidth/2 < 25 )
|
||||
{
|
||||
textAlign( LEFT );
|
||||
tX = currentX-25;
|
||||
}
|
||||
else if ( currentX+tWidth/2 > width-25 )
|
||||
{
|
||||
textAlign( RIGHT );
|
||||
tX = currentX+25;
|
||||
}
|
||||
text( fieldString, tX, height/4+50 );
|
||||
|
||||
textSize(11.5);
|
||||
textAlign( currentX > width/2 ? RIGHT : LEFT );
|
||||
int l, w;
|
||||
if ( currentX <= width/2 )
|
||||
{
|
||||
l = currentX-50+25;
|
||||
w = width-l-25;
|
||||
}
|
||||
else
|
||||
{
|
||||
l = 25;
|
||||
w = currentX+50-25-25;
|
||||
}
|
||||
text( areaString, l, height/4+70, w, height/2 );
|
||||
}
|
||||
|
||||
void star ( float x, float y, float inner, float outer )
|
||||
{
|
||||
beginShape();
|
||||
for ( int i = 0; i < 360; i+=36 )
|
||||
{
|
||||
float r = radians(i + sin(frameCount/90.0)*25);
|
||||
vertex( x + cos(r)*outer, y + sin(r)*outer );
|
||||
r = radians(i+(36/2));
|
||||
vertex( x + cos(r)*inner, y + sin(r)*inner );
|
||||
}
|
||||
endShape(CLOSE);
|
||||
}
|
||||
|
||||
void spiro ( float x, float y, float rad )
|
||||
{
|
||||
beginShape();
|
||||
for ( int i = 0; i < 360; i+=2 )
|
||||
{
|
||||
float r = radians(i);
|
||||
float r2 = radians(i*(sin(frameCount/240.0)+2)*2);
|
||||
vertex( x + (cos(r)+cos(r2)/2)*rad, y + (sin(r)+sin(r2)/2)*rad );
|
||||
}
|
||||
endShape();
|
||||
}
|
||||
|
||||
/* interface related things */
|
||||
|
||||
void setController ( Controller ctlr )
|
||||
{
|
||||
// labels are supposed to be existing function names
|
||||
|
||||
InterfaceElement element = ctlr.addRange( "rangeCallback", currentX, 0, 100 );
|
||||
ctlr.setElementLabel( element, "Example range input field" );
|
||||
|
||||
element = ctlr.addCheckbox( "textBoxCallback", hasStroke );
|
||||
ctlr.setElementLabel( element, "A checkbox here" );
|
||||
|
||||
element = ctlr.addTextfield( "textFieldChanged", fieldString );
|
||||
ctlr.setElementLabel( element, "... and this is a textfield" );
|
||||
|
||||
element = ctlr.addTextarea( "calledByTextarea", areaString );
|
||||
ctlr.setElementLabel( element, "Ta-dah: a textarea" );
|
||||
|
||||
element = ctlr.addMenu( "theMenu", menuItems );
|
||||
ctlr.setElementLabel( element, "LBNL a select menu" );
|
||||
}
|
||||
|
||||
/* callbacks */
|
||||
|
||||
void rangeCallback ( float value )
|
||||
{
|
||||
currentX = map( value, 0, 100, 50, width-50 );
|
||||
}
|
||||
|
||||
void textBoxCallback ( boolean value )
|
||||
{
|
||||
hasStroke = value;
|
||||
}
|
||||
|
||||
void textFieldChanged ( String value )
|
||||
{
|
||||
fieldString = value;
|
||||
}
|
||||
|
||||
void calledByTextarea ( String value )
|
||||
{
|
||||
areaString = value;
|
||||
}
|
||||
|
||||
void theMenu ( String value )
|
||||
{
|
||||
currentShape = int(value);
|
||||
}
|
||||
|
||||
/* ... and the interfaces */
|
||||
|
||||
/* explain InputElement to Processing */
|
||||
interface InputElement
|
||||
{
|
||||
String type;
|
||||
String id;
|
||||
Object value;
|
||||
}
|
||||
|
||||
/* explain Controller to Processing */
|
||||
interface Controller
|
||||
{
|
||||
InputElement addRange ( String label, float initialValue, float minValue, float maxValue );
|
||||
void setLabel ( InputElement element, String label );
|
||||
}
|
||||
Reference in New Issue
Block a user