LiveCode Forums. • I want to turn my Figma Prototype into a program - Page 2

Page 2 of 3

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

Posted: Mon Oct 25, 2021 6:00 am

by dalkin

You might also take a look at this: https://livecode.com/extensions/calendar/1-0-0/

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

Posted: Mon Oct 25, 2021 7:07 am

by xAction

Good on ya!

Next button stores this info from the fields to the hidden table field before navigating to "Verify_info"

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!"

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

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:

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

Gives you : JoeJones,Jonestown,555-555-5555,joe@jonestown.com

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

Or you can dump it into a field (or object label or whatever) as a simple list with

Code: Select all

replace comma with cr in currentData

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

Code: Select all

local cName ,cLocation ,cPhone  ,cEmail

Then the mouseDown on the button or even keyUp events on the fields could simply state, for instance

Code: Select all

on MouseDown
KeepCurrentData
end MouseDown

on KeyUp
KeepCurrentData
end KeyUp

Then KeepCurrentData is on the stack script

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

And then everything is held in memory

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

On the stack script (where the variables are)

Code: Select all

on List_Of_Current_Info
return (cName & cr & cLocation & cr & cPhone & cr & cEmail)
end List_Of_Current_Info

'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

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

Then you can adjust things all at once with variables, if you want things centered on a position, use:

Code: Select all

set the loc of field "whatever" to x,y

Is there a plugin to list all created elements in a stack?

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.

Code: Select all

Is it possible to see more than one card at a time?

Nope, but what you can do is something like this in the stack script

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

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

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

call that from the Message Box like Onion 2 or Onion "some_Card_Name"
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

Is there an in-program Notepad or to do list? Would be great to keep that info all in one place with the stack.

Nope, but you can make one super easy
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

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!

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

Posted: Mon Oct 25, 2021 7:27 am

by xAction

Oh 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.

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

Posted: Mon Oct 25, 2021 4:12 pm

by KrisMessyhair

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.

xAction wrote: Mon Oct 25, 2021 7:27 am Oh 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.

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.

Anyways, off to learn more about arrays and how to display it in each field. Thanks again!

Kris

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

Posted: Mon Oct 25, 2021 6:50 pm

by richmond62

"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:

Code: Select all

on mouseUp
   go to card "NEWMEET"
end mouseUp

and the second card of the stack is called "NEWMEET".

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

Posted: Mon Oct 25, 2021 6:54 pm

by richmond62

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.

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

Posted: Mon Oct 25, 2021 6:58 pm

by richmond62

I literally have a day's worth of programming knowledge

Well, on that basis I would say "screw arrays", especially as LiveCode gives you
the option of generating a new card for every new client as and when you require one.

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

Posted: Mon Oct 25, 2021 10:28 pm

by richmond62

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.

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

Posted: Tue Oct 26, 2021 1:37 am

by xAction

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

Code: Select all

put the properties of this card into tArray
put the keys of tArray

returns all the properties of the card

Is just like

Code: Select all

put the controlNames of this card

returns all the names of controls on a card

is just like

Code: Select all

put the contactList of this card into tArray
put the keys of tArray

returns the 'keys' of a contactList property like
Name.Phone, Email, Company
assuming they were ever set of course.

Code: Select all

put tArray["Name"] into tNamesArray
put the keys of tNamesArray

would expose all the stored names in thecontactList property array

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

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.

EggHunt_CardStyle.zip: (3.11 KiB) Downloaded 324 times

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.

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

Posted: Tue Oct 26, 2021 3:22 am

by KrisMessyhair

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

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

Posted: Tue Oct 26, 2021 6:18 am

by richmond62

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.

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

Posted: Tue Oct 26, 2021 6:20 am

by richmond62

-
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

Posted: Tue Oct 26, 2021 7:27 am

by xAction

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

UnderFieldExample.zip: (1.75 KiB) Downloaded 332 times

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

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.

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

Posted: Tue Oct 26, 2021 1:53 pm

by xAction

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?

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

Posted: Tue Oct 26, 2021 3:50 pm

by richmond62

-

Code: Select all

on mouseUp
   put the clickText into KARD
   go to card KARD
end mouseUp

-