Skip to content

Commit 191fc58

Browse files
lmccartlmccart
authored
Merge pull request #974 from suhascv/example8
 Added DOM Form Elements example |Prof Harris |Open@RIT
2 parents 44f0c08 + d66910c commit 191fc58

File tree

5 files changed

+608
-82
lines changed

5 files changed

+608
-82
lines changed

‎src/data/examples/en/15_Instance_Mode/03_Car_Instances.js‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎src/data/examples/en/16_Dom/13_DOM_Form_Elements.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/*
2+
* @name DOM Form Elements
3+
* @frame 600,400
4+
* @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
5+
<b>Prof WM Harris,</b></a> <b>How </b>to use p5 DOM form elements to create a slider,
6+
button, checkbox, radio group, select menu, and entry field.<br/>
7+
Functions are created that include: the canvas
8+
setup, checkbox creation with text, text box with text that projects
9+
typed text onto canvas, slider with button, three selections which
10+
project a rectangle in different areas on the canvas depending on
11+
selection, and a drop down menu with font change.
12+
*/
13+
14+
/* global variables */
15+
//p5 DOM form elements
16+
let slider1;
17+
let button1;
18+
let checkbox1;
19+
let radio1;
20+
let select1;
21+
let entry1;
22+
23+
function setup() {
24+
createCanvas(200, 200);
25+
background("beige");
26+
27+
checkbox1 = createCheckbox("Check me");
28+
29+
createP(); //spacer with <p> tag
30+
31+
createSpan("What's your name? "); //label for entry1
32+
// createInput([value], [type])
33+
// type: "text" (default), "number",
34+
// "date", "password", "email", etc.
35+
entry1 = createInput();
36+
//If text in the entry field changes, call
37+
//the entryCallback function.
38+
entry1.changed(entryCallback);
39+
40+
createP(); //spacer with <p> tag
41+
42+
//createSlider(min, max, [value], [step])
43+
slider1 = createSlider(10, 200);
44+
45+
button1 = createButton("Press me"); //, "pressed");
46+
//Assign callback fcn for button1
47+
//when user clicks mouse on it
48+
button1.mouseClicked(button1Clicked);
49+
50+
createP(); //spacer with <p> tag
51+
52+
radio1 = createRadio();
53+
54+
//.option([value], [contentLabel])
55+
//If 1 param, it's both content AND
56+
//value. Values treated as strings.
57+
radio1.option(1, "cranberries");
58+
radio1.option(2, "almonds");
59+
radio1.option(3, "gouda");
60+
61+
radio1.value("1"); //set init value
62+
63+
createP(); //spacer with <p> tag
64+
65+
select1 = createSelect();
66+
//.option([contentValue],[value])
67+
//If 1 param, it's both content AND
68+
//value. Values treated as strings.
69+
select1.option("Sans-serif");
70+
select1.option("Serif");
71+
select1.option("Fantasy");
72+
//If changed, call select1Changed
73+
select1.changed(select1Changed);
74+
}
75+
76+
function draw() {
77+
//get value from slider 1
78+
let gray = slider1.value();
79+
fill(gray);
80+
81+
//If mouse in corner, turn on checkbox1
82+
if ((mouseX < width / 3) &&
83+
(mouseY < height / 3)) {
84+
checkbox1.checked(true);
85+
}
86+
//Is checkbox1 checked? Say so.
87+
if (checkbox1.checked()) {
88+
text("CHECKED", 20, 40);
89+
}
90+
91+
switch (radio1.value()) {
92+
//radio value is always a string
93+
case "1":
94+
rect(0, 0, width, 50);
95+
break;
96+
case "2":
97+
rect(0, 70, width, 50);
98+
break;
99+
case "3":
100+
rect(0, 140, width, 50);
101+
break;
102+
}
103+
}
104+
105+
//callback fcn for button1
106+
function button1Clicked() {
107+
//reset slider value to 200
108+
slider1.value(200);
109+
}
110+
111+
112+
//callback fcn for select1
113+
function select1Changed() {
114+
switch (select1.value()) {
115+
case "Sans-serif":
116+
textFont("sans-serif");
117+
break;
118+
case "Serif":
119+
textFont("serif");
120+
break;
121+
case "Fantasy":
122+
textFont("fantasy");
123+
break;
124+
}
125+
}
126+
127+
//callback function for entry1
128+
function entryCallback() {
129+
for (let i = 0; i < 25; i++) {
130+
text(entry1.value(), random(width),
131+
random(height));
132+
}
133+
134+
}
135+
136+
function mouseClicked() {
137+
console.log("button1?", button1.value());
138+
console.log("checkbox1?", checkbox1.value());
139+
//Update .value of either? No visible change
140+
//to a button or checkbox
141+
checkbox1.value("Check again");
142+
button1.value("clicked?");
143+
}
144+
145+
function keyTyped() {
146+
switch (key) {
147+
case "r":
148+
//move slider1 value to 100
149+
slider1.value(100);
150+
break;
151+
}
152+
}

‎src/data/examples/es/16_Dom/13_DOM_Form_Elements.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/*
2+
* @name DOM Form Elements
3+
* @frame 600,400
4+
* @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
5+
<b>Prof WM Harris,</b></a> <b>How </b>to use p5 DOM form elements to create a slider,
6+
button, checkbox, radio group, select menu, and entry field.<br/>
7+
Functions are created that include: the canvas
8+
setup, checkbox creation with text, text box with text that projects
9+
typed text onto canvas, slider with button, three selections which
10+
project a rectangle in different areas on the canvas depending on
11+
selection, and a drop down menu with font change.
12+
*/
13+
14+
/* global variables */
15+
//p5 DOM form elements
16+
let slider1;
17+
let button1;
18+
let checkbox1;
19+
let radio1;
20+
let select1;
21+
let entry1;
22+
23+
function setup() {
24+
createCanvas(200, 200);
25+
background("beige");
26+
27+
checkbox1 = createCheckbox("Check me");
28+
29+
createP(); //spacer with <p> tag
30+
31+
createSpan("What's your name? "); //label for entry1
32+
// createInput([value], [type])
33+
// type: "text" (default), "number",
34+
// "date", "password", "email", etc.
35+
entry1 = createInput();
36+
//If text in the entry field changes, call
37+
//the entryCallback function.
38+
entry1.changed(entryCallback);
39+
40+
createP(); //spacer with <p> tag
41+
42+
//createSlider(min, max, [value], [step])
43+
slider1 = createSlider(10, 200);
44+
45+
button1 = createButton("Press me"); //, "pressed");
46+
//Assign callback fcn for button1
47+
//when user clicks mouse on it
48+
button1.mouseClicked(button1Clicked);
49+
50+
createP(); //spacer with <p> tag
51+
52+
radio1 = createRadio();
53+
54+
//.option([value], [contentLabel])
55+
//If 1 param, it's both content AND
56+
//value. Values treated as strings.
57+
radio1.option(1, "cranberries");
58+
radio1.option(2, "almonds");
59+
radio1.option(3, "gouda");
60+
61+
radio1.value("1"); //set init value
62+
63+
createP(); //spacer with <p> tag
64+
65+
select1 = createSelect();
66+
//.option([contentValue],[value])
67+
//If 1 param, it's both content AND
68+
//value. Values treated as strings.
69+
select1.option("Sans-serif");
70+
select1.option("Serif");
71+
select1.option("Fantasy");
72+
//If changed, call select1Changed
73+
select1.changed(select1Changed);
74+
}
75+
76+
function draw() {
77+
//get value from slider 1
78+
let gray = slider1.value();
79+
fill(gray);
80+
81+
//If mouse in corner, turn on checkbox1
82+
if ((mouseX < width / 3) &&
83+
(mouseY < height / 3)) {
84+
checkbox1.checked(true);
85+
}
86+
//Is checkbox1 checked? Say so.
87+
if (checkbox1.checked()) {
88+
text("CHECKED", 20, 40);
89+
}
90+
91+
switch (radio1.value()) {
92+
//radio value is always a string
93+
case "1":
94+
rect(0, 0, width, 50);
95+
break;
96+
case "2":
97+
rect(0, 70, width, 50);
98+
break;
99+
case "3":
100+
rect(0, 140, width, 50);
101+
break;
102+
}
103+
}
104+
105+
//callback fcn for button1
106+
function button1Clicked() {
107+
//reset slider value to 200
108+
slider1.value(200);
109+
}
110+
111+
112+
//callback fcn for select1
113+
function select1Changed() {
114+
switch (select1.value()) {
115+
case "Sans-serif":
116+
textFont("sans-serif");
117+
break;
118+
case "Serif":
119+
textFont("serif");
120+
break;
121+
case "Fantasy":
122+
textFont("fantasy");
123+
break;
124+
}
125+
}
126+
127+
//callback function for entry1
128+
function entryCallback() {
129+
for (let i = 0; i < 25; i++) {
130+
text(entry1.value(), random(width),
131+
random(height));
132+
}
133+
134+
}
135+
136+
function mouseClicked() {
137+
console.log("button1?", button1.value());
138+
console.log("checkbox1?", checkbox1.value());
139+
//Update .value of either? No visible change
140+
//to a button or checkbox
141+
checkbox1.value("Check again");
142+
button1.value("clicked?");
143+
}
144+
145+
function keyTyped() {
146+
switch (key) {
147+
case "r":
148+
//move slider1 value to 100
149+
slider1.value(100);
150+
break;
151+
}
152+
}

0 commit comments

Comments
 (0)