Tablet user view style - Any way to get Better looking ? P/L

Anything beyond the basics in using the LiveCode language. Share your handlers, functions and magic here.

Moderators: heatherlaine, Klaus, FourthWorld, robinmiller, kevinmiller

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sat Feb 24, 2018 4:20 pm

Hello.
Today, we are Jumping into the possible APP layout styling..the fun and easy part, right ? :)

This is about user interface style rendered on Windows PC, Android Tablet...and others Devices too.
I m joining a sample how the same render on windows and Android
(except that for Windows it wasnt resized yet, on purpose)

Two things here that we are facing... 8)

1) With a Fullscreen script activated. Is there a way to Auto-resize the Gui going from a Portrait view to a landscape ?
..or does one has to build two views 1 H/ 1 V ?


2) Is there a way to get better looking of all input "fields and labels" ?
I mean better in this way :
a - apply rounded corners to the input rectangle.
b - keep the square size of SVG image to a square one even after resizing.
c - Is there a third party pluging for LC that would allow adding/creating a more elegant Layout - ofor all plateforms AIWL.. and still make all scripting work ?

The Window Side : Model, looks better to me than the Android one.
The Android Side model is actualy brigther on tablet screen.
The capture did affect a lil bit the final result so fonts appear jagged while they arent actually.

BUTTONS
e- Button labels too...dont fit anymore in their button space !
f - Buttons receive an extra redundant frame, that does not appear on the IDE.
LABELS
g - Some labels got truncated (Favorite Year).. !
h - Android Labels font do not appear as small as their Window version...they are much bigger. :?
FIELDS
i - White field Background, turned into grey with Android convertion !

Any solutions to get things looking MUCH better ? :mrgreen:

Thanks, feel free to comment.

Image
Attachments
compare Win10 with Droid Layout.png

bogs
Posts: 2202
Joined: Sat Feb 25, 2017 10:45 pm

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by bogs » Sat Feb 24, 2018 5:00 pm

Well, I think I would ask if you've seen either of these two lessons. Unless I seriously misunderstood the question, which is always possible.
http://lessons.livecode.com/s/lessons/m ... g-graphics
http://lessons.livecode.com/m/4071/l/23 ... is-resized
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sat Feb 24, 2018 9:16 pm

I think you got it right ! :wink:
.. and no I havent seen those two, actualy I though this one was all about it : :oops: http://lessons.livecode.com/m/15262/l/5 ... ll-devices :o
tks, I ll read those now !

bogs
Posts: 2202
Joined: Sat Feb 25, 2017 10:45 pm

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by bogs » Sat Feb 24, 2018 10:09 pm

That is the other lesson I was thinking of asking if you saw, but didn't think it covered your questions.
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sun Feb 25, 2018 12:08 am

So these two other lessons content will work with an Fullscreen mode activated, right ?
(its not like I m going into learning some Manual scripting modes, that just works if Fullscreen is turned Off)
:roll: :P

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6155
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by FourthWorld » Sun Feb 25, 2018 1:45 am

Flat UIs are the thing: Turn off the threeD property and reduce border width to 1px. Consider changing button styles to roundRect where that works for you. Set a background color to something you like. Avoid distortion by scripting object placement as devs in other languages do, reserving fullScreenMode for where other devs do, those parts of an app which may benefit from specific types of whole-layout scaling.

Start with these, and we can help with other specifics as you encounter them.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sun Feb 25, 2018 3:28 am

I m on my way...! :wink: will it be possible to round corners of any inputs fields next ?

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6155
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by FourthWorld » Sun Feb 25, 2018 4:30 am

teriibi wrote:
Sun Feb 25, 2018 3:28 am
I m on my way...! :wink: will it be possible to round corners of any inputs fields next ?
Input fields are much better handled with the native mobile field. If it doesn't have the borders you like, make it borderless and create it inside a roundrect graphic.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sun Feb 25, 2018 4:44 am

Ok, now looking "great"..I mean much better now, much modern and flat look..thanks to the first lessson and your good will :wink: !
Question :
Does one has to ungroup/group anytime one wants to bring changes to properties to one o those 3 elements ...or there is a faster way to treat a single component of the group ?

Adding a second input fld would reference it as : "field 2" just that, even though they are given a specific name.
Hope it works with SVG widget next ! :P

bogs
Posts: 2202
Joined: Sat Feb 25, 2017 10:45 pm

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by bogs » Sun Feb 25, 2018 6:00 am

FourthWorld wrote:
Sun Feb 25, 2018 4:30 am
teriibi wrote:
Sun Feb 25, 2018 3:28 am
I m on my way...! :wink: will it be possible to round corners of any inputs fields next ?
Input fields are much better handled with the native mobile field. If it doesn't have the borders you like, make it borderless and create it inside a roundrect graphic.
Hmm, I am having a déjà vu moment here, cause I could swear that sounds like something someone else said recently....I wonder who that might have been...(listening to the topic echo, echo, echo....) :mrgreen:
teriibi wrote:
Sun Feb 25, 2018 4:44 am
Does one has to ungroup/group anytime one wants to bring changes to properties to one o those 3 elements ...or there is a faster way to treat a single component of the group ?
No, you can (on the menubar) click on 'Select grouped', which will allow you to select an item in a group. Remember to un-click it when your finished. Don't ask. Just make sure.
Image

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6155
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by FourthWorld » Sun Feb 25, 2018 8:33 am

bogs wrote:
Sun Feb 25, 2018 6:00 am
Hmm, I am having a déjà vu moment here, cause I could swear that sounds like something someone else said recently....I wonder who that might have been...(listening to the topic echo, echo, echo....) :mrgreen:
Bogs, that was 12 days ago. You expect us to have memories useful enough to recall things that far back? :)
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sun Feb 25, 2018 11:54 am

Yop, I hardly remember my fone number ! :P ..not to said Coder´s names Im asking (too many things) ..few days ago !!!
Actualy I kind of remember points that I did asked earlier, but since I m learning new methods by the week I always wonder "wooohhh wait. :shock: , could it be that with THIS "new" method, one can do stuff that I couldnt do...a week earlier ?" :lol: :lol:
..beside its always better to hear again "No, you cant do it" ! (that mean I probably cant do it....at least in that LC version)...than I jump to the "Ask your (dream) feature" Topics...so, that I can keep on dreaming too... :roll:
Future is made of better expectations, right ?
(that can even include a Darker Background :mrgreen: )
:idea:

bogs
Posts: 2202
Joined: Sat Feb 25, 2017 10:45 pm

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by bogs » Sun Feb 25, 2018 4:07 pm

FourthWorld wrote:
Sun Feb 25, 2018 8:33 am
bogs wrote:
Sun Feb 25, 2018 6:00 am
Hmm, I am having a déjà vu moment here.... :mrgreen:
Bogs, that was 12 days ago. You expect us to have memories useful enough to recall things that far back? :)
:mrgreen: :mrgreen:
teriibi wrote:
Sun Feb 25, 2018 11:54 am
Actualy I kind of remember points that I did asked earlier...
The forum can help you there, if you go to 'Quick links' at the top left there, 'Your posts' will give you a running list of things you asked previously. A second way to help yourself is a technique we ancient timers call 'bookmarks'.

Here is how it works, you start a topic, people give you good advice, you save it to a 'bookmark', then title it appropriately and organize it for reference later! Works great!
Selection_003.png
teriibi wrote:
Sun Feb 25, 2018 11:54 am
(that can even include a Darker Background :mrgreen: )
Well, we certainly hope we have helped you with that, right? :twisted: :twisted:
Image

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sun Feb 25, 2018 9:39 pm

Yop, I mostly look for everything I want to remember from my own Notification panel - kind of bookmarker for me...
dont trust enuff bookmark coz too many things in there already I couldnt retreive in a resonable amount of time..even if Id wanted too... :lol:

My other tip is a copy/pate into Gdrive, but i m going with the idea of build a stack to manage all that in a DB, which would also allow a quick word search, a must. So thats one more reason to build this one app someday.

Wouldnt it be possible to rebuild an "LC made Forum" ?
...and have an option to download a selected content in 1 clic, autor/date/text comnents/Code sample
and save it to some Local DB Sotrage App. :roll: :roll:

teriibi
Posts: 254
Joined: Mon Nov 13, 2017 3:49 pm
Location: Bolivia

Re: Tablet user view style - Any way to get Better looking ? P/L

Post by teriibi » Sun Feb 25, 2018 10:25 pm

Have you guys already tested :

1- How does the (latest version available of the) Datagrid behave on a Fullscreen stack ?
2- How does a simple chart behave ?

...I mean, do they both resize nicely too ?

-The styling (I can see now) is a big plus - although - at first its a lots of coding...
-I had submited a request in the new features for a control to "manage" all that from a property control,
- it happens that I had tested this feature too in other IDE, (windev and Wakanda f I remeber) and its totaly "playable" this way too...gives you the same "freedom" and precision in your Layout Designing but instead of focusing on Syntax "blablabla..." you can focus more on the actual Design selecting values from ready-menus and applying..and voila... :lol:
One big diference with Lc is that one could round any object out-of-the-box from the same Prop menu :
shapes, fields, buttons, images... taxIncome. - once you got the way, its veeeeery fast for all of them :P
..hope to see such properties menu someday in LC.
so here is my "obra de arte"
Image
Attachments
Sans titre.png

Post Reply

Return to “Talking LiveCode”