I want to turn my Figma Prototype into a program
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
Re: I want to turn my Figma Prototype into a program
You might also take a look at this: https://livecode.com/extensions/calendar/1-0-0/
If we're treading on thin ice, well you might as well dance.
Re: I want to turn my Figma Prototype into a program
Good on ya!
You can store the data right in a custom property of the stack, or of the next card or just in a local variable of the stack
Custom property in the next card method:
c is for 'current', if you can't tell from the weird syntax style in forum thats c and Name, c and Location, etc. I tend to use curName, curLocation etc to avoid being confused, first time I saw cSomething thought someone sent me Gaelic script.
Put that on the stack script and call it from a mouseDown on your button so everything gets stored right before the mouse Up.
Uh...do mobile aps use mouseDown? I dunno
To retrieve the information on another card, or any card you just do:
Gives you : JoeJones,Jonestown,555-555-5555,joe@jonestown.com
Then you parse that with
Or you can dump it into a field (or object label or whatever) as a simple list with
So that was the custom property method. The local variable method would be something like this
At the top of the stack script you write
Then the mouseDown on the button or even keyUp events on the fields could simply state, for instance
Then KeepCurrentData is on the stack script
And then everything is held in memory
so on your next card you can simply do something like this in the card script
On the stack script (where the variables are)
'cr' is for carriage return by the way.
Yes there are alignment tools, Select two or more objects, open Object Inspecto and choose the last tab on there, the icon looks lke
###
#####
#########
#######
Although setting things by script can be handy if tou get the code right
Then you can adjust things all at once with variables, if you want things centered on a position, use:
Nope, but what you can do is something like this in the stack script
That'll get you all the actual controls, but the group might have issues grouping grouped controls.
So another method might be just creating a representation with some graphic objects
call that from the Message Box like Onion 2 or Onion "some_Card_Name"
Then maybe have a handler on the stack script called
File Menu > Make a new substack of the current Stack
set its name to "Notes"
put a field into it, call it "notes"
While that is selected, In the object inspector there's a tab for "Geometry" hilite the right and bottom bars of that to have the field stretch with the window.
Then in your main Stack script make a handler:
then just type "Notes" into the message box to open your notes when you need them.
Maybe even integrate that in to your app.
Lookin' good keep at it!
Avoid that kind of stuff, it'll bite you later, extra hidden controls floating around can get messy, you delete it or rename it and your scripts are screaming "I can't find that thing!"Next button stores this info from the fields to the hidden table field before navigating to "Verify_info"
You can store the data right in a custom property of the stack, or of the next card or just in a local variable of the stack
Custom property in the next card method:
c is for 'current', if you can't tell from the weird syntax style in forum thats c and Name, c and Location, etc. I tend to use curName, curLocation etc to avoid being confused, first time I saw cSomething thought someone sent me Gaelic script.
Code: Select all
on KeepCurrentData
set the cName of card "Meeting_info_card" to line 1 of field "Name" of card "Client_info_card"
set the cLocation of card "Meeting_info_card" to line 1 of field "Location" of card "Client_info_card"
set the cPhone of card "Meeting_info_card" to line 1 of field "Phone" of card "Client_info_card"
set the cEmail of card "Meeting_info_card" to line 1 of field "Email" of card "Client_info_card"
end KeepCurrentData
Uh...do mobile aps use mouseDown? I dunno
To retrieve the information on another card, or any card you just do:
Code: Select all
function GetCurrentData
put the cName of card "Meeting_info_card" into tName --//t is for 'temp'
put the cLocation of card "Meeting_info_card" tLocation
put the cPhone of card "Meeting_info_card" tPhone
put the cEmail of card "Meeting_info_card" tEmail
return tName, tLocation, tPhone, tEmail
end GetCurrentData
Code: Select all
put GetCurrentData() into currentData
Then you parse that with
Code: Select all
set itemDelimiter to comma --// or itemDel for short, comma is the default, use "/" for parsing dates
put item 1 of currentData into field "name"
put item 2 of currentData into field "Location"
--etc etc
Code: Select all
replace comma with cr in currentData
At the top of the stack script you write
Code: Select all
local cName ,cLocation ,cPhone ,cEmail
Code: Select all
on MouseDown
KeepCurrentData
end MouseDown
on KeyUp
KeepCurrentData
end KeyUp
Code: Select all
on KeepCurrentData
put line 1 of field "Name" of card "Client_info_card" into cName
put line 1 of field "Location" of card "Client_info_card" into cLocation
put line 1 of field "Phone" of card "Client_info_card" into cPhone
put line 1 of field "Email" of card "Client_info_card" into cEmail
end KeepCurrentData
so on your next card you can simply do something like this in the card script
Code: Select all
on OpenCard
put List_Of_Current_Info() into field "ContactInfo"
end OpenCard
Code: Select all
on List_Of_Current_Info
return (cName & cr & cLocation & cr & cPhone & cr & cEmail)
end List_Of_Current_Info
Yes there are alignment tools, Select two or more objects, open Object Inspecto and choose the last tab on there, the icon looks lke
###
#####
#########
#######
Although setting things by script can be handy if tou get the code right
Code: Select all
on openCard
LayoutGUI
end openCard
on LayoutGUI
lock screen --// hide this activity from the user
put 4 into tSpread
put 10 into tLeft
set the topLeft of field "NameLabel" to tLeft,4
set the topLeft of field "Name" to tLeft,bottom of field "NameLabel"
set the topLeft of field "PhoneLabel" to tLeft,bottom of field "Name"+tSpread
set the topLeft of field "Phone" to tLeft,bottom of field of field "phoneLabel"
--etc etc
-- do other stuff
unlock screen
end LayoutGUI
Code: Select all
set the loc of field "whatever" to x,y
Development Menu > Plugins > revApplicationOverview i had to go looking for it, there's a fancier one out there somewhere on the "Sample Stacks" you can find in the livecode menu bar thing.Is there a plugin to list all created elements in a stack?
Code: Select all
Is it possible to see more than one card at a time?
Code: Select all
on OnionSkinACard otherCard
put the number of controls of card otherCard into N
repeat with i = 1 to N
copy control i of card otherCard to this card
set the lockloc of it to true
set the foregroundcolor of it to 250,250,255
set the backgroundcolor of it to 250,250,255
set the disabled of it to true
set the name of it to "onion"&i --//maybe
put "and" && the name of it after onionGroup
end repeat
do ("group" && word 2 to -1 of onionGroup)
set the name of the last group to "delete_me_when_done"
set the layer of the last group to bottom
set the lockloc of the last group to true
end OnionSkinACard
So another method might be just creating a representation with some graphic objects
Code: Select all
on Onion otherCard
if otherCard is empty then put the number of this card+1 into otherCard
if char 1 of otherCard is "-" then put the number of this card +otherCard into otherCard ---//"-1" onionskin the previous card
put the number of controls of card otherCard into N
repeat with i = 1 to N
put the rect of control i of card otherCard into tRect
put the short name of control i of card otherCard into tName
create graphic
set the rect of the last graphic to tRect
set the name of the last graphic to tName
set the showName of the last graphic to true
set the lockloc of the last graphic to true
set the foregroundcolor of the last graphic to 200,200,255
set the lineSize of the last graphic to 2
put "and graphic" && quote & tName & quote after onionGroup
end repeat
do ("group" && word 2 to -1 of onionGroup)
set the name of the last group to "delete_me_when_done"
set the layer of the last group to bottom
set the lockloc of the last group to true
end Onion
Then maybe have a handler on the stack script called
Code: Select all
on OnionOff
if exists(group "delete_me_when_done") then delete group "delete_me_when_done"
end OnionOff
Nope, but you can make one super easyIs there an in-program Notepad or to do list? Would be great to keep that info all in one place with the stack.
File Menu > Make a new substack of the current Stack
set its name to "Notes"
put a field into it, call it "notes"
While that is selected, In the object inspector there's a tab for "Geometry" hilite the right and bottom bars of that to have the field stretch with the window.
Then in your main Stack script make a handler:
Code: Select all
on Notes
palette stack "Notes" --// use 'open' if you want to do development to it
end Notes
Maybe even integrate that in to your app.
Lookin' good keep at it!
Re: I want to turn my Figma Prototype into a program
Oh you said something odd.
Fields just sit their doing nothing until the user does something to them. Last thing you'd want for a mobile app is for fields to be constantly doing some processing and chewing the battery life. So the fields either are blank or are given data once by a handler, probably in the openCard message of the card. And that just needs to happen once per record put into the fields, or twice if you have an undo/revert button.
You should have a single handler that plops all the data into all the related fields of a card in one shot.
If you need to retrieve/manipulate complicated data the handler can call a function that does the work and returns some data.
For example ...hmm whats a good example?
Well go back to my first post, there's examples of handlers/functions interacting with custom property arrays to fill the fields.
On "Client_info_card" the text fields for Name, Company, Phone Number, and Email are blank. They should each read their function until the user adds new info to the field.
? ?read their function
Fields just sit their doing nothing until the user does something to them. Last thing you'd want for a mobile app is for fields to be constantly doing some processing and chewing the battery life. So the fields either are blank or are given data once by a handler, probably in the openCard message of the card. And that just needs to happen once per record put into the fields, or twice if you have an undo/revert button.
You should have a single handler that plops all the data into all the related fields of a card in one shot.
If you need to retrieve/manipulate complicated data the handler can call a function that does the work and returns some data.
For example ...hmm whats a good example?
Well go back to my first post, there's examples of handlers/functions interacting with custom property arrays to fill the fields.
-
- Posts: 15
- Joined: Sun Oct 24, 2021 3:17 am
Re: I want to turn my Figma Prototype into a program
Thanks again xAction for all the info. I am struggling to understand it though, I literally have a day's worth of programming knowledge and it feels like you are speaking another language. I think I have a good start, and I will take time this week going through the tutorials you posted above to better acquaint myself with the meanings behind code comments. I have a better understanding today than yesterday, but not quite there. Please do keep commenting, I will get there eventually and I appreciate the effort you've displayed.
Anyways, off to learn more about arrays and how to display it in each field. Thanks again!
Kris
I don't think I meant "read their function," I was trying to say the text field is filled with what info they are requesting. So the field says Name until you type in it and change it to the actual name. I believe arrays are the answer here, but I am so new and pretty easily overwhelmed by programming and its jargon. I think I will spend my set aside programming time learning more about arrays to better explain myself. The solution I am going for would Populate the data field with those text strings (name, company, etc. etc.) when you click new client. Then it would display those strings in the appropriate text field until the user replaced them with the new info.xAction wrote: ↑Mon Oct 25, 2021 7:27 amOh you said something odd.On "Client_info_card" the text fields for Name, Company, Phone Number, and Email are blank. They should each read their function until the user adds new info to the field.? ?read their function
Fields just sit their doing nothing until the user does something to them. Last thing you'd want for a mobile app is for fields to be constantly doing some processing and chewing the battery life. So the fields either are blank or are given data once by a handler, probably in the openCard message of the card. And that just needs to happen once per record put into the fields, or twice if you have an undo/revert button.
You should have a single handler that plops all the data into all the related fields of a card in one shot.
If you need to retrieve/manipulate complicated data the handler can call a function that does the work and returns some data.
For example ...hmm whats a good example?
Well go back to my first post, there's examples of handlers/functions interacting with custom property arrays to fill the fields.
Anyways, off to learn more about arrays and how to display it in each field. Thanks again!
Kris
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
"Baby" Richmond here.
Let's start by making a 2 card stack with some buttons:
- - -
at the moment ONLY the NEW MEETING button contains some code:
and the second card of the stack is called "NEWMEET".
Let's start by making a 2 card stack with some buttons:
- - -
at the moment ONLY the NEW MEETING button contains some code:
Code: Select all
on mouseUp
go to card "NEWMEET"
end mouseUp
- Attachments
-
- Messy Hair.livecode.zip
- Here's some awful rubbish.
- (948 Bytes) Downloaded 109 times
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
NOW: all that is based on your mockup images, and it strikes me that the "NEW MEETING" button on card 2 is NOT a button at all.
The other 2 buttons; "NEW CLIENT" and "EXISTING" look as it they should be buttons with some
functionality.
The other 2 buttons; "NEW CLIENT" and "EXISTING" look as it they should be buttons with some
functionality.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
Well, on that basis I would say "screw arrays", especially as LiveCode gives youI literally have a day's worth of programming knowledge
the option of generating a new card for every new client as and when you require one.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
Obviously "EXISTING" should let us see a Scrolling List Field where each line acts as a navigator to a card for
each existing client.
"NEW CLIENT" as well as cloning a template card should also append it to the Scrolling List Field.
each existing client.
"NEW CLIENT" as well as cloning a template card should also append it to the Scrolling List Field.
Re: I want to turn my Figma Prototype into a program
A card is just another form of an array, but the engine holds and displays its various kinds of data and has all the functions and keywords set up to work with the array already, like
returns all the properties of the card
Is just like
returns all the names of controls on a card
is just like
returns the 'keys' of a contactList property like
Name.Phone, Email, Company
assuming they were ever set of course.
would expose all the stored names in thecontactList property array
That is a GUI-less way of doing:
YOU WILL OBEY THE ARRAY that's my new slogan.
Using cards only for this project could work, as long as that initial card (with the important ubiquitous controls) has the group with background behavior property set.
Here's an Example stack. It creates a requested number cards and dumps random colornames into fields across all cards to simulate a very busy meeting maker, asks for a name, then you can go searching for the name, with a script of course.
Click the "Edit All Scripts" button at the bottom to see all the scripts without having to dig around in the group. It'll open them all in script editor in one shot. Your project will work the same way but manually creating cards per new contact/meeting instead of automated.
For the other example scripts posted in forums, copy paste them into a button script for easy testing: one click and either something, nothing or error message, then move them to card or stack scripts as required. Helps to read them with syntax coloring, and there's always typos that the engine will catch to help you fix my errors.
You can copy a whole forum post into a script, then select all, Control (and/or command?) and Minus key to comment the whole thing, then go about selecting the actual working script bits and uncommenting the lines in bulk with Control + Shift and Minus key. A very handy feature.
Code: Select all
put the properties of this card into tArray
put the keys of tArray
Is just like
Code: Select all
put the controlNames of this card
is just like
Code: Select all
put the contactList of this card into tArray
put the keys of tArray
Name.Phone, Email, Company
assuming they were ever set of course.
Code: Select all
put tArray["Name"] into tNamesArray
put the keys of tNamesArray
That is a GUI-less way of doing:
Code: Select all
repeat with i = 1 to number of cards of this stack
go to card i
put cr & field "Name" of card i after tNames
end repeat
put tNames
Using cards only for this project could work, as long as that initial card (with the important ubiquitous controls) has the group with background behavior property set.
Here's an Example stack. It creates a requested number cards and dumps random colornames into fields across all cards to simulate a very busy meeting maker, asks for a name, then you can go searching for the name, with a script of course.
Click the "Edit All Scripts" button at the bottom to see all the scripts without having to dig around in the group. It'll open them all in script editor in one shot. Your project will work the same way but manually creating cards per new contact/meeting instead of automated.
For the other example scripts posted in forums, copy paste them into a button script for easy testing: one click and either something, nothing or error message, then move them to card or stack scripts as required. Helps to read them with syntax coloring, and there's always typos that the engine will catch to help you fix my errors.
You can copy a whole forum post into a script, then select all, Control (and/or command?) and Minus key to comment the whole thing, then go about selecting the actual working script bits and uncommenting the lines in bulk with Control + Shift and Minus key. A very handy feature.
-
- Posts: 15
- Joined: Sun Oct 24, 2021 3:17 am
Re: I want to turn my Figma Prototype into a program
I love that you guys are so active on this forum, it really helps us novices keep going!
Not much done today unfortunately. Read up on arrays but didn't really understand yet. I am not sure why tutorials seem to miss what people will use their products for. Making a ball bounce or putting random numbers into a cell is interesting, but I doubt anyone sat down to learn those exact things.
How to add data to a specific cell, and recall it seems like something people other than me might want to do. I say I don't know how to program, but Ive done some really cool stuff in google sheets and excel. I think they must have a large enough following that you can ask any question to the net and get an answer. AutoHotKeys is pretty small, but I can usually find my exact problem solved by looking because so many folks have the same usage needs. LiveCode unfortunately has been inbetween shores for me with info either for kids fooling around or experts who fully grasp all the concepts.
After I finished up with my design classwork today, I made a mock design to show what I envision the data structure for the app. Please feel free to tell me why another approach is better if you can think of a more elegant solution, but it would be nice down the line to be able to back up the info into Sheets. It seems like sharing examples is the thing to do so here is my idea as a gif and a single card stack. I figure I can work on the idea over the week, solve how to do it here and at least there will be some documentation for the next guy. I am only aiming to fully understand and work out steps one through 6 this week, and I hope after I learn that the calendar and invite stuff to follow.
Kris
Not much done today unfortunately. Read up on arrays but didn't really understand yet. I am not sure why tutorials seem to miss what people will use their products for. Making a ball bounce or putting random numbers into a cell is interesting, but I doubt anyone sat down to learn those exact things.
How to add data to a specific cell, and recall it seems like something people other than me might want to do. I say I don't know how to program, but Ive done some really cool stuff in google sheets and excel. I think they must have a large enough following that you can ask any question to the net and get an answer. AutoHotKeys is pretty small, but I can usually find my exact problem solved by looking because so many folks have the same usage needs. LiveCode unfortunately has been inbetween shores for me with info either for kids fooling around or experts who fully grasp all the concepts.
After I finished up with my design classwork today, I made a mock design to show what I envision the data structure for the app. Please feel free to tell me why another approach is better if you can think of a more elegant solution, but it would be nice down the line to be able to back up the info into Sheets. It seems like sharing examples is the thing to do so here is my idea as a gif and a single card stack. I figure I can work on the idea over the week, solve how to do it here and at least there will be some documentation for the next guy. I am only aiming to fully understand and work out steps one through 6 this week, and I hope after I learn that the calendar and invite stuff to follow.
Kris
- Attachments
-
- Problem solving stack - Data entry and storage.zip
- (113.82 KiB) Downloaded 107 times
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
Because of a lot of blue-sky thinking.I am not sure why tutorials seem to miss what people will use their products for.
"Blue sky thinking refers to brainstorming with no limits.
With this approach to idea generation, ideas don't need to be grounded in reality. ...
Eventually, through this process, the goal is to stumble on some thoroughly feasible and innovative ideas."
All very jolly in theory, but NOT when you have some sort of deadline looming.
Last edited by richmond62 on Tue Oct 26, 2021 6:22 am, edited 1 time in total.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
Have you considered working with a TABLE FIELD instead of a DATA GRID?
certainly well worth a look and considerably simpler.
Re: I want to turn my Figma Prototype into a program
Oh there's a whole stack there! I thought it was just a picture and ran with the first thing I'd improve: the UI!
Less labels, more user space
It's A GIF, open in new tab/window for animation Top button activates script which copies each of the "TOP" fields, the ones the users actually types in, puts the copies underneath and fills them with their functional names.
Handlers in the stack script manage repopulating the data if the fields are left empty while the user mashes around the interface. Also to every field I added :
Since there were still instances where the fields were empty when I didn't want them to be.
That actually makes the keyUp and Returninfield handlers in the stack obsolete, now that I double checked against the very last thing I added. figures.
One could completely get rid of the field borders and the appearance of a gap (by having same backgroundColor on card) for an even cleaner look.
Now to look at that data thing.
Less labels, more user space
It's A GIF, open in new tab/window for animation Top button activates script which copies each of the "TOP" fields, the ones the users actually types in, puts the copies underneath and fills them with their functional names.
Handlers in the stack script manage repopulating the data if the fields are left empty while the user mashes around the interface. Also to every field I added :
Code: Select all
on OpenField
RefreshUnderFields
end OpenField
That actually makes the keyUp and Returninfield handlers in the stack obsolete, now that I double checked against the very last thing I added. figures.
One could completely get rid of the field borders and the appearance of a gap (by having same backgroundColor on card) for an even cleaner look.
Now to look at that data thing.
Re: I want to turn my Figma Prototype into a program
I'm not clear about your big old table field, is that something the user is actually going to look at?
If it's just something for keeping all your data, just a big comma seperated (CSV) list of text store in the stack custom properties will do the job.
using the previous cards full of fields example:
Or is this for comparing when a schedule is available?
If it's just something for keeping all your data, just a big comma seperated (CSV) list of text store in the stack custom properties will do the job.
using the previous cards full of fields example:
Code: Select all
on storeContactsAsCSV
put "Name,Company,Phone,Email,Meeting Date, Meeting Time, Location, Topic" into tFields
put the number of cards of this stack into N
repeat with i = 2 to n --// 1 is the main screen
repeat for each item F in tFields
put line 1 to -1 of field F of card i into tFieldData
replace cr with "^^" in tFielddata --// need to keep it all on one line
put tFielddata & comma after tDataLine
end repeat
put cr & char 1 to -2 of tDataLine after allData --//dont want trailing comma
end Repeat
--// got al the data? Store it in a custom property
set the ContactDatabase of stack (The mainStack of this stack) to allData
put "file:" & specialFolderPath("Documents") & "/ContactaDatabase.txt" into tFilepath
put allData into URL tFilepath --// a back up text file
end storeContactsAsCSV
Last edited by xAction on Tue Oct 26, 2021 8:39 pm, edited 1 time in total.
-
- Livecode Opensource Backer
- Posts: 9387
- Joined: Fri Feb 19, 2010 10:17 am
- Location: Bulgaria
Re: I want to turn my Figma Prototype into a program
Code: Select all
on mouseUp
put the clickText into KARD
go to card KARD
end mouseUp
- Attachments
-
- Quack.livecode.zip
- Here's a stack.
- (1.04 KiB) Downloaded 81 times