I want to turn my Figma Prototype into a program

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

KrisMessyhair
Posts: 15
Joined: Sun Oct 24, 2021 3:17 am

Re: I want to turn my Figma Prototype into a program

Post by KrisMessyhair » Tue Oct 26, 2021 8:34 pm

richmond62 wrote:
Tue Oct 26, 2021 6:18 am
I am not sure why tutorials seem to miss what people will use their products for.
Because of a lot of blue-sky thinking.

"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.
I get that. I like to push software I use to its limits to show what can be done. A balance between what is possible and what is most likely probable is really the best. I love to learn new skills and teach them to others, and I have been pretty successful at it in the past because the time between novice and proficient isn't that far apart. Remembering where you struggle at the start is great for helping others avoid those pitfalls. You and xAction have given me a lot of your time helping me with this project. I plan on making little worksheet stacks with my problems and solutions together and post them all up for the next folks who want to learn. I got some blue sky plans with this stuff I hope to get to later, but making quick practical applications will help me get there.

KrisMessyhair
Posts: 15
Joined: Sun Oct 24, 2021 3:17 am

Re: I want to turn my Figma Prototype into a program

Post by KrisMessyhair » Tue Oct 26, 2021 8:44 pm

richmond62 wrote:
Mon Oct 25, 2021 6:50 pm
"Baby" Richmond here.

Let's start by making a 2 card stack with some buttons:
-
SShot 2021-10-25 at 20.48.07.png
-
SShot 2021-10-25 at 20.48.44.png
-
at the moment ONLY the NEW MEETING button contains some code:

Code: Select all

on mouseUp
   go to card "NEWMEET"
end mouseUp
and the second card of the stack is called "NEWMEET".
I luckily figured out these steps, I created all the pages and buttons, linking them up as needed. If it would be helpful for you, I can post my stack here so you can see where I left off.

The next part to tackle is on the worksheet post on the second page of this post. I ideally want to store the info in a table field so that I can later back up the info into google sheets. I can do a lot more programming things in sheets than on here so its nice to aim for a platform that I am already comfortable with.

With table fields I don't know how to name the rows and columns. in sheets and Excel they are labeled numerically and alphabetically so calling a specific cell is easy. Here I assume I am to define the name for these but I have no idea how. The tutorials I have read so far keep aiming for hypothetical needs (listing random numbers was the first example.) I would love a link to a tutorial that is aimed at teaching folks familiar with spreadsheet software.

KrisMessyhair
Posts: 15
Joined: Sun Oct 24, 2021 3:17 am

Re: I want to turn my Figma Prototype into a program

Post by KrisMessyhair » Tue Oct 26, 2021 8:50 pm

xAction wrote:
Tue Oct 26, 2021 7:27 am
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
Haha, yeah the UI is not great, I figured I would remake my problems as worksheet stacks after I solve them, and share them to the forum. That way when someone has a similar issue they can download the sample, and really see under the hood. Single Card Stacks seemed like the best format for these worksheet ideas. I will improve the design before I share them for that purpose...

KrisMessyhair
Posts: 15
Joined: Sun Oct 24, 2021 3:17 am

Re: I want to turn my Figma Prototype into a program

Post by KrisMessyhair » Tue Oct 26, 2021 9:05 pm

xAction wrote:
Tue Oct 26, 2021 1:53 pm
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:

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
Or is this for comparing when a schedule is available?
The table field purpose is for storing all the info in one place. Eventually the user will not see it, but I figure for the early versions of the program it should be fine. Later I plan on the info in the cells to be used in a search feature, by Client, by Date, et cetera. But I am not ready for that yet so the Table Field seemed like a good start.

I am very familiar with Google Sheets and Excel, so I guess I am aiming to make something I am more comfortable using. Unfortunately the Table field isn't Sheets, so I am at a loss currently trying to understand some basics like calling a specific cell. If I wanted info form say cell D-3, you know to find column D and row 3 to find the cell at their intersection. Since the table Feild lacks clear labeling, I do not know how to ask for the same cell.

KrisMessyhair
Posts: 15
Joined: Sun Oct 24, 2021 3:17 am

Re: I want to turn my Figma Prototype into a program

Post by KrisMessyhair » Tue Oct 26, 2021 9:07 pm

dalkin wrote:
Mon Oct 25, 2021 6:00 am
You might also take a look at this: https://livecode.com/extensions/calendar/1-0-0/

Hi Dalkin,

The calendar would be very helpful, thank you. I think I am going to make the first iteration with a string just to get it done, and hopefully I will understand enough to add it to the next pass.

Kris

xAction
Posts: 86
Joined: Sun Oct 03, 2021 4:14 am

Re: I want to turn my Figma Prototype into a program

Post by xAction » Tue Oct 26, 2021 11:36 pm

For table fields you keep all the data as TAB delimited values
put that's really hard to show online and if you open it in a standard text edtior the columns can be all over the place
so comma separated is the easy default, maybe have fudge some commas in regular text though before storage...
Bob DaBuilder, Bulds'R'Us, 555-555-5555, bob@builds.com, Meet to build my house, drink beers.
Jean Gray, X-men, 555-555-5555, jean@mutants.org, Fight Magneto
Kal El, Justice League, 555-555-555,ckent@dailyplanet.net, Party at FoS
Lets assume that's all in one field or one text file or stored in memory as our variable.

Lets call it CSVData. To display it in your table field you change the commas to TAB

Code: Select all

put CSVData into TableFieldData  --// keep original data comma delimited
replace comma with tab in TableFieldData
put TableFieldData into field "myTableField"

to get the data from the field or the variable

Code: Select all

set itemDel to tab
put item 4 of line 2 of field "myTableField" 
returns jean@mutants.org

with the raw comma separated text you do the same thing only "set itemDel to comma" if you've changed it from that default.

Say you don't know what item number a thing is or even what line number its on:

Code: Select all

put "Name,Company,Phone,Email,Meeting Date, Meeting Time, Location, Topic" into tCells
put itemOffset("Email",tCells) into nItem
put lineOffset("Jean Gray",TableFieldData ) into nLine
if nItem is not 0 and nLine is not 0 then put item nItem of line nLine of TableFieldData  into tEmail
More abou table data here

So above I have "Meet to build my house, drink beers." whose comma doesn't jive well with comma separated values.
Could either convert the comma to some other character before storage and then back on retrieval, or assume that a certain cell/item offset begins long strings that may contain commas. with that assumption when you retrieve that cell you get all the items after that as well.

Code: Select all

put "Name,Company,Phone,Email,Meeting Date, Meeting Time, Location, Topic" into tCells
put itemOffset("Topic",tCells) into nItem
put lineOffset("Bob DaBuilder",TableFieldData ) into nLine
if nItem is not 0 and nLine is not 0 then put item nItem to -1  of line nLine of TableFieldData  into tTopic
-1 being the last item available of the given set

brewmaxwell649
Posts: 1
Joined: Fri Nov 05, 2021 10:58 am

Re: I want to turn my Figma Prototype into a program

Post by brewmaxwell649 » Fri Nov 05, 2021 11:11 am

I got a lot done! A card was created for each page shown above. All navigation buttons are coded and lead to the expected page. A Sub stack was used to load all my imported buttons from the prototype. I even added some visual effects on a few card transitions! I learned a lot, but mostly I worked past my insecurities with programming. This had every thing to do with your help, Richmond62 and xAction. Thank you so much!

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”