I suggest an active control flag for any control to avoid this for all controls. Or, add all controls to a table and loop through the able for the draw call, which is what I plan to do.
Give this version a shot
Cider
https://gist.github.com/3860569
CiderControls
https://gist.github.com/3860584
– Better textbox management
– Grid option to make it easier to align controls
– Fix for incorrect control naming
– Cosmetic improvements
Better! Was able to render and use TextBox. Render issues on small boxes, but that can be fixed later.
I’ll play with some other controls. I’ll try to make a simple data I/O screen with it.
The value of the Slider may be better shown during dragging on the top rather under it because It’s hidden by the finger during touch.
Change
text(self.val, x, self.frame.top - h)
by
text(self.val, x, self.frame.top + h/2)
@letaief Good point. I nudged the title up a bit and moved the value to the top of the “thumb” like this…
text(self.text, self:midX(), y + h)
if self.val > self.min and self.val < self.max then
text(self.val, x, y + h / 2)
end
You can paste this into the latest version (which no longer has the .frame. syntax since Slider is now derived from Frame).
Wow. Thank you! It’s better than how I would’ve done it.
Mark, would you please post a new video of the latest functionalities of the Cider project so we can verify if we have trouble With the code copied.
TextBox leads imperatively to type of entries numeric / alphanumeric or mixture, I suggest the possibility of adding à supplementary parameter taking in account this point,
I apologise that It’s not so simple, and so urgent, but it would simplify à lot of problems. Thanks for this project.
A pattern match validatior during keyboard would work well for that!
Version 1.3
http://www.youtube.com/watch?v=rSxqZ-8dA7I&sns=em
Check boxes, more improvements in text boxes including a first stab at text alignment and.multiline text, bug fixes, more refactoring that eliminates a lot of the table shuffles and unnecessary object copying of previous versions, and a switchable grid control that makes it much easier to line up controls.
CiderControls
https://gist.github.com/3909730
Great job, Thanks a lot, especially for the video I suggested in my last post.
Fantastic work! Btw, when i run Cider, i have an error ‘‘global frame variable missing’’.
What is the syntax of the touched function
-- FIRSTCIDER
-- Use this function to perform your initial setup
function setup()
print("Hello World!")
-- ===================
-- Copy into the init function
-- ===================
RED = Slider('Red', 260, 520, 400, 550, 0, 100, 50)
RED.fontSize = 20
GREEN = Slider('Green', 260, 440, 400, 470, 0, 100, 50)
GREEN.fontSize = 20
BLUE = Slider('Blue', 260, 340, 400, 370, 0, 100, 50)
BLUE.fontSize = 20
end
-- This function gets called once every frame
function draw()
-- This sets a dark background color
background(40, 40, 50)
-- This sets the line thickness
strokeWidth(5)
-- Do your drawing here
-- ===================
-- Copy into the draw function
-- ===================
RED:draw()
GREEN:draw()
BLUE:draw()
end
function touch()
-- ===================
-- Copy into the touched function
-- ===================
RED:touched(touch)
GREEN:touched(touch)
BLUE:touched(touch)
end
-- ===================
-- Copy into main, or modify your
-- existing keyboard function
-- ===================
function keyboard(key)
if CCActiveTextBox then
CCActiveTextBox:acceptKey(key)
end
end
I had this message With three sliders on the screen
error: error: [string “…”]:428: attempt to index global ‘btnTest’ (a nil value)
I added the controls in à separate tab
@letaief I created a new project, linked in CiderControls, and replaced main with your code. I had to make just one small change to get everything in shape. Rather than touch() the function should be touched(touch) as in
function touched(touch)
-- ===================
-- Copy into the touched function
-- ===================
RED:touched(touch)
GREEN:touched(touch)
BLUE:touched(touch)
end
Perfect, Thanks a lot.
An election season example, just to show a simple form. I’m thinking of adding the ability to auto generate code to manage saving / reading / updating / deleting records when a form is created.
-- CiderExample
displayMode(FULLSCREEN)
function setup()
buttonNext = TextButton('Next', 380, 120, 500, 170)
buttonNext.fontSize = 19
textBoxFirst = TextBox('', 40, 940, 200, 970)
textBoxMI = TextBox('', 220, 940, 260, 970)
textBoxLast = TextBox('', 280, 940, 460, 970)
label1004 = Label('First', 0, 980, 120, 1010)
label1004.fontSize = 24
label1005 = Label('MI', 180, 980, 300, 1010)
label1005.fontSize = 24
label1006 = Label('Last', 240, 980, 360, 1010)
label1006.fontSize = 24
buttonPrev = TextButton('Prev', 240, 120, 360, 170)
buttonPrev.fontSize = 19
textBoxAddress = TextBox('', 40, 840, 460, 870)
textBoxApt = TextBox('', 480, 840, 680, 870)
textBoxCity = TextBox('', 40, 740, 260, 770)
textBoxZip = TextBox('', 340, 740, 460, 770)
dropListState = DropList('AL;AK;AR;CA;CO;CT;DE;FL;GA;HI;KA;LA',
280, 740, 320, 770)
label1013 = Label('Address', 20, 880, 140, 910)
label1013.fontSize = 24
label1014 = Label('City', 0, 780, 120, 810)
label1014.fontSize = 24
label1015 = Label('ST', 240, 780, 360, 810)
label1015.fontSize = 24
label1016 = Label('ZIP', 300, 780, 420, 810)
label1016.fontSize = 24
multiButtonCandidate =
MultiButton('Barack Obama;Willard "Mitt" Romney;Other;Undecided',
40, 320, 720, 360)
multiButtonCandidate.fontSize = 15
multiButtonParty = MultiButton('Democrat;Republican;Other',
40, 420, 380, 460)
multiButtonParty.fontSize = 17
textBoxPhone = TextBox('', 480, 740, 680, 770)
label1020 = Label('Phone', 460, 780, 580, 810)
label1020.fontSize = 23
label1021 = Label('Apt', 440, 880, 560, 910)
label1021.fontSize = 22
label1022 = Label('Do you consider yourself a', 80, 460, 200, 490)
label1022.fontSize = 16
label1023 =
Label('if the election was held today, would you vote for',
20, 360, 460, 390)
label1023.fontSize = 18
checkBox1024 = CheckBox('Willing to volunteer', 40, 660, 70, 690)
checkBox1024.fontSize = 19
switchLastCycle = Switch('YES;NO', 240, 540, 340, 570)
switchLastCycle.fontSize = 16
checkBox1026 = CheckBox('Needs help getting to polls',
340, 660, 370, 690)
checkBox1026.fontSize = 18
multiButtonSure = MultiButton('Very sure;Fairly sure;Not sure',
40, 220, 380, 260)
multiButtonSure.fontSize = 18
label1029 = Label('How sure are you about your vote',
40, 260, 300, 290)
label1029.fontSize = 17
label1030 = Label('Did you vote in 2008', 80, 540, 200, 570)
label1030.fontSize = 19
switchCycle = Switch('YES;NO', 600, 540, 700, 570)
switchCycle.fontSize = 16
label1032 = Label('Will you vote this election', 420, 540, 540, 570)
label1032.fontSize = 19
end
function draw()
background(197, 197, 197, 255)
buttonNext:draw()
textBoxFirst:draw()
textBoxMI:draw()
textBoxLast:draw()
label1004:draw()
label1005:draw()
label1006:draw()
buttonPrev:draw()
textBoxAddress:draw()
textBoxApt:draw()
textBoxCity:draw()
textBoxZip:draw()
label1013:draw()
label1014:draw()
label1015:draw()
label1016:draw()
multiButtonCandidate:draw()
multiButtonParty:draw()
textBoxPhone:draw()
label1020:draw()
label1021:draw()
label1022:draw()
label1023:draw()
checkBox1024:draw()
switchLastCycle:draw()
checkBox1026:draw()
multiButtonSure:draw()
label1029:draw()
label1030:draw()
switchCycle:draw()
label1032:draw()
dropListState:draw()
end
function touched(touch)
buttonNext:touched(touch)
textBoxFirst:touched(touch)
textBoxMI:touched(touch)
textBoxLast:touched(touch)
buttonPrev:touched(touch)
textBoxAddress:touched(touch)
textBoxApt:touched(touch)
textBoxCity:touched(touch)
textBoxZip:touched(touch)
dropListState:touched(touch)
multiButtonCandidate:touched(touch)
multiButtonParty:touched(touch)
textBoxPhone:touched(touch)
checkBox1024:touched(touch)
switchLastCycle:touched(touch)
checkBox1026:touched(touch)
multiButtonSure:touched(touch)
switchCycle:touched(touch)
end
function keyboard(key)
if CCActiveTextBox then
CCActiveTextBox:acceptKey(key)
end
end
The next step would be to save and load forms from within Cider and manage associated records.
Sorry about the mangled formatting. I put in the usual triple tilde, but apparently messed up in some other way.
.@Mark, I just wanted to thank you for all of your help, insight, and code.
It is such a marvel to youngsters in Codea (though not in age) such as myself that you will never appreciate what your input means. That goes to everyone who has contributed.
I hope to contribute one day too but my brute force coding (as witnessed in my 20,000 line code project) prevents me from being a useful part of this great media society.
Codea is such a great app that I can (and do) spend way too many hours accomplishing (or not) things away from my PC that I never dreampt possible. Thanks to the good folks at TwoLivesLeft for making this possible.
This is the code of Mark’s election season example
-- CiderExample
displayMode(FULLSCREEN)
function setup()
buttonNext = TextButton('Next', 380, 120, 500, 170)
buttonNext.fontSize = 19
textBoxFirst = TextBox('', 40, 940, 200, 970)
textBoxMI = TextBox('', 220, 940, 260, 970)
textBoxLast = TextBox('', 280, 940, 460, 970)
label1004 = Label('First', 0, 980, 120, 1010)
label1004.fontSize = 24
label1005 = Label('MI', 180, 980, 300, 1010)
label1005.fontSize = 24
label1006 = Label('Last', 240, 980, 360, 1010)
label1006.fontSize = 24
buttonPrev = TextButton('Prev', 240, 120, 360, 170)
buttonPrev.fontSize = 19
textBoxAddress = TextBox('', 40, 840, 460, 870)
textBoxApt = TextBox('', 480, 840, 680, 870)
textBoxCity = TextBox('', 40, 740, 260, 770)
textBoxZip = TextBox('', 340, 740, 460, 770)
dropListState = DropList('AL;AK;AR;CA;CO;CT;DE;FL;GA;HI;KA;LA', 280, 740, 320, 770)
label1013 = Label('Address', 20, 880, 140, 910)
label1013.fontSize = 24
label1014 = Label('City', 0, 780, 120, 810)
label1014.fontSize = 24
label1015 = Label('ST', 240, 780, 360, 810)
label1015.fontSize = 24
label1016 = Label('ZIP', 300, 780, 420, 810)
label1016.fontSize = 24
multiButtonCandidate = MultiButton('Barack Obama;Willard "Mitt" Romney;Other;Undecided', 40, 320, 720, 360)
multiButtonCandidate.fontSize = 15
multiButtonParty = MultiButton('Democrat;Republican;Other', 40, 420, 380, 460)
multiButtonParty.fontSize = 17
textBoxPhone = TextBox('', 480, 740, 680, 770)
label1020 = Label('Phone', 460, 780, 580, 810)
label1020.fontSize = 23
label1021 = Label('Apt', 440, 880, 560, 910)
label1021.fontSize = 22
label1022 = Label('Do you consider yourself a', 80, 460, 200, 490)
label1022.fontSize = 16
label1023 = Label('if the election was held today, would you vote for', 20, 360, 460, 390)
label1023.fontSize = 18
checkBox1024 = CheckBox('Willing to volunteer', 40, 660, 70, 690)
checkBox1024.fontSize = 19
switchLastCycle = Switch('YES;NO', 240, 540, 340, 570)
switchLastCycle.fontSize = 16
checkBox1026 = CheckBox('Needs help getting to polls', 340, 660, 370, 690)
checkBox1026.fontSize = 18
multiButtonSure = MultiButton('Very sure;Fairly sure;Not sure', 40, 220, 380, 260)
multiButtonSure.fontSize = 18
label1029 = Label('How sure are you about your vote', 40, 260, 300, 290)
label1029.fontSize = 17
label1030 = Label('Did you vote in 2008', 80, 540, 200, 570) label1030.fontSize = 19
switchCycle = Switch('YES;NO', 600, 540, 700, 570)
switchCycle.fontSize = 16
label1032 = Label('Will you vote this election', 420, 540, 540, 570)
label1032.fontSize = 19
end
function draw()
background(197, 197, 197, 255)
buttonNext:draw()
textBoxFirst:draw()
textBoxMI:draw()
textBoxLast:draw()
label1004:draw()
label1005:draw()
label1006:draw()
buttonPrev:draw()
textBoxAddress:draw()
textBoxApt:draw()
textBoxCity:draw()
textBoxZip:draw()
label1013:draw()
label1014:draw()
label1015:draw()
label1016:draw()
multiButtonCandidate:draw()
multiButtonParty:draw()
textBoxPhone:draw()
label1020:draw()
label1021:draw()
label1022:draw()
label1023:draw()
checkBox1024:draw()
switchLastCycle:draw()
checkBox1026:draw()
multiButtonSure:draw()
label1029:draw()
label1030:draw()
switchCycle:draw()
label1032:draw()
dropListState:draw()
end
function touched(touch)
buttonNext:touched(touch)
textBoxFirst:touched(touch)
textBoxMI:touched(touch)
textBoxLast:touched(touch)
buttonPrev:touched(touch)
textBoxAddress:touched(touch)
textBoxApt:touched(touch)
textBoxCity:touched(touch)
textBoxZip:touched(touch)
dropListState:touched(touch)
multiButtonCandidate:touched(touch)
multiButtonParty:touched(touch)
textBoxPhone:touched(touch)
checkBox1024:touched(touch)
switchLastCycle:touched(touch)
checkBox1026:touched(touch)
multiButtonSure:touched(touch)
switchCycle:touched(touch)
end
function keyboard(key)
if CCActiveTextBox then
CCActiveTextBox:acceptKey(key)
end
end
Major update in 1.5 (see first message).
To see how the new controls work, run the CiderControls project and test out the samples there.
If I haven’t said so before, I’d love to incorporate some other controls. If you have a suggestion, please let me know.
That looks really good @Mark. Codea’s model doesn’t lend itself to standard UIs, but you seem to have made it work well.