Formatting 2 VertialArrangements

[Charles Schwedes]

Hi,

I have a HorizonalArrangement with 2 VerticalScroolArrangements, a label in each. I would like to input text (multi-line, various fonts sizes) into the first label and then input other text into the second label, with this send label's text one line down from the bottom of the first label. Text staggered, probably including date/time. How does label Height compare with line numbers? If I knew the number of lines used in one label maybe I could commute where to place the second. ??? Any ideas? Thanks. Charles

[SteveJG]

What you want to do is not entirely clear Charles.  How about an illustration?   

Manipulation of text as you seem to describe is probably not possible with App Inventor.  AI is not WYSIWYG.  Layout depends on placing objects (Labels as spacers etc).  One can format a Label ( see Taifun's 

• New formatting possibilities with the Label   ) and that might hep.  Character spacing is dependent on whether you use san serif, serif or monospace fonts.  Only a monospace font has consistent character spacing.

When you use a MultilineText Box to generate text, you generate a simple csv Table..  The table can be converted into a List.  If you have a List, you can select which item you want.

I seriously doubt you could 'compute' where to place you text on a screen display.  What have you tried?  To get anything like you propose, you will have to experiment to see what might be possible.

Regards,

Steve

[Chris Ward]

You could "Fake it" with 3 labels Charles. One label in VertArr01, 2 labels in VertArr02

1) After Input into the Label01, get it's height;

2) Programmatically set Label02 to the height of Label01, plus a bit (an approximation of line/row height)* and disable it.

3) After Label02 has been resized, Label03 is in the required position as you desired, ready for input.

*You could try using an invisible label elsewhere on the screen and programatically prime that with the same text font size as Label01 and just one short word - verify the height of that Label for a better approximation of the "stagger" required.

[Charles Schwedes]

SteveJG & Chris Ward,

Sorry! I'll try to be clearer with an illustration.

1.  Here are 2 Labels in a HorizontalArrangemen, which is under a VerticalScrollArrangement.

2.  Note that Label 1 & Label 2 have staggered blocks of text shown as 'To: 1' &2 and 'From: 1' & 2. In the adjacent blocks to the text info is blank (allowing for the stager) where I have shown a number of line feeds, \n\n\n...

3.  Here's my thought - I compute the number of monospace fonts in the adjacent text and then guesstimate the number of feed lines we need, \n\n\n... If I knew the number of line feeds (like 7*\n, for 7 line feeds) I could place this blank text into the adjacent label and the two labels would be in sync.

4.  If this data were sent to another, this 'To:' would appear as their 'From:', a mirror image of the labels.

I know I used to be able to compute a number of line feeds. What I could do is create a list of \n\n\n... and then compute the number I want, but, that's really lame! Thanks for any help. Charles

[Abraham Getzler]

Regarding monospace fonts, that's for when you need to control horizontal spacing.

The font size (often measured in points) determines the vertical spacing of lines.

abg

[Chris Ward]

Hi Charles, so in that case I think my method fits your requirement. Although in the attached example I have used scrolling Vertical Arrangements as per your description, it would no doubt be better if they didn't scroll independently - either use the screen scroll or set two VertArrs in one VertArr_Scroll. Note the example is expecting text in the left-hand TextBox first........

See post further below for sample .aia file.

[Charles Schwedes]

Chris, I tried to load your .aia 4 times over 3 hours and received 'Server error: could not upload project. Please try again later!' Thanks for your help. I'll try again tomorrow. Charles

[Chris Ward]

Hi Charles

Just in case the file got corrupted somehow, here is a freshly saved-uploaded one.

[Charles Schwedes]

Chris Ward,

I downloaded your AIA. Thanks. That was excellent, but only I thought to a point. Your example would work fine for two staggered Text Boxes or even ten, but I may need a lot more. 

I showed an illustration of 2 staggered 'Labels' shown in this Attachment. The 'To: text' and 'From: text each reside in separate Lists. You can see here the ToList & FromList. When each To or From transaction occur the appropriate text is loaded to a list. Once this occurs the Attached DisplayProcedure is loaded which displays both of the lists in their entirety. Two obvious problems. It supports length of list To > From, but not the other way, and the lame 'line feed' limitation. I'll have it fixed in the next few days but I'm not happy with the results.

Thanks again Chris for your support. Charles.

[Chris Ward]

Hi Charles

The attachment is a screenshot of your PC Desktop?

Anyway - the one confusion from your terminology was whether the text was input (typed in by the User) or set programmatically. I now think you are programmatically populating the Labels from Lists (which perhaps in turn are generated from files?) whereas before I thought you were typing input.

So, Label Components are lightweight, used a lot, not only as labels but generally as spacers, so I wouldn't fear using quite a few, but it should be possible to neatly use two ListView components instead.

It is difficult to advise you because we do not know the process flow of your app and do not have a representative data sample. If you can post those, we can help more. Unfortunately I'm away at the beginning of the week but I'm sure someone else can help, given good information.

[Charles Schwedes]

Chris,

Yes, the attachment was a screenshot from my PC. The Label or the Button Components seem to work well, anything with Text, and used to display List results. Yes, the ToList and FromList are generated, a simple source for the 2 list can be from by Send  and Receiving Texting. Thank you for the ListView info... I've never looked at it. Have a good trip. I'll send you some representative data samples. Charles

[Chris Ward]

Charles

Please do not email us directly, we do not respond to direct communications. This is because, by keeping the discussion on the forum, there are many people

from all around the World (different time zones) who can potentially help you, not just the first responder. Plus, there is often something that many forum members can learn by reading the posts. Finally - we are a small team of volunteers, supporting thousands of Users monthly.

Really need the representative data samples. I have thought of a simplified way to get a good result fast, but I won't be available until Wednesday (not a trip, but another family funeral).

[Charles Schwedes]

Chris, I believe I sent you the wrong attachment before. I hope this is correct. Charles

[Abraham Getzler]

Your quest for ever more labels must eventually come to an end.

See attached for how to display a really long chat using a fixed list of

pairs of left/ & right aligned html labels and a canvas to scroll the list offset.

My attempt at mixing colors failed; the label html codes are very finicky.

The chat is courtesy of Abbott and Costello's Who's On First routine.

ABG

[Chris Ward]

Hi Charles

You can try this method too - only two labels required, see attached .aia file :)

[Charles Schwedes]

ABG & Chris,

I tried out both of your AIA files They work fine, but I'm afraid it will take me a bit to study your fine code. A real learning experience. Thanks. Charles

[Abraham Getzler]

@ChrisWard's .aia post doesn't do his achievement justice.

I've attached some innards, to show how he got smooth scrolling 

(Horizontal Arrangement of two fill-parent labels inside a Scrolling Vertical Arrangement)

and how he got the text lines to alternate between the labels:

writing each piece of text in both labels, but in alternating visible and

invisible ink.  That gives him perfect alignment.

This technique could be expanded to cover limited swim lane diagrams too.

Also, recognize the Dead Polly Monty Python example,

though the file input and conversion could have alternatively been

done from a single file with speaker identification on a line by line basis.

ABG

[Charles Schwedes]

ChrisWard & ABG,

ABG -> Thank you for 'inards' of Chris' Formatting_2_VertArr_2.aia. I now understand where the 2 To/From texts come from, but don't know where the 'text' properties come from. 

Chris -> In your Designer document I now know where File_To_Text & ...From... come from, but that you place them in Properties, from NotePads as text. Your system seems to be perfect for my needs. How can I reformat my ToList & FromList into your text format? My attachment  shows an indexed label item made up with Name, Date & Message (your text only show message). I have other questions using Web1, but I'd really like to know where to find File_To_Text from your Palette. 😊  

Thank you both very much. Charles 

[Abraham Getzler]

I now understand where the 2 To/From texts come from, but don't know where the 'text' properties come from.

The text properties come from the Designer attributes of whichever Label holds that text, plus the html tags that were used to wrap it.

ABG

 

[Charles Schwedes]

ABG,

Most of what you have said goes right over my head! My question is where does File_To_Text & File_From_Text comes from. I see these two items and Web1 in the lower left corner of the attachment. How did they get there and how are they  connected to the two text notepads? Thanks, Charles

[Charles Schwedes]

ABG, I responded to quickly! Found all the questions and the answers you/I asked. Sorry, Charles

[Charles Schwedes]

Chris Ward,

I really liked your system and have tried to adapt your ToText.txt  & FromText.txt to my To List & From List approach. Take a look at the 3 attachments.

1.  A screenshot of my first try. Start - Initialization to include 'File_From_Text.Delete' and  'File_File_From_Text.GotText' and displaying it (Attachment 2).

2.  Program used to load 'From List' using Boxes and then displaying File 1 Read (Attachment 1).

3.  Code to convert the 'From List' to FromText.txt, 'File_From_Text.AppendToFile' each list element and then reading the text with File_From_Text.ReadFrom'.

Test -> First I initialized using Start, then I loaded 3 text items to my From List, Attachment 2. Next tapped 'Add From' which displayed (Attachment 3) the text. The result  was disappointing. You've noticed the first item group ended with 'one', the second tap gave me 'One, Two' and the third 'One, Two, Three', the last group with each tap is the group (only) I wanted shown in the text file. Each of these groups seem to have 'joined'. I could probably, programmaticly, select the last group and send the text on to your code. That seems messy! This may be beyond AI's capability, or mine 😒. Or you will note my mistake, and suggest I straighten up.

You've noticed I used '/FromText.txt' rather than the '//' form you used. My approach seemed to work (sorta), but the using '//FromText.txt' with 'File_From_Text.Delete' resulted in a long text stream of a conversation from unknown folk. I was embarrassed! And finally,

In your code you showed '\n' in two cases.. I guess this was one for each of To & From. In my code I used \n to format my Name, Date, and Message text -  then ended the group item with a '|'. How should I have done this correctly?

I'm sorry this is so long ...

Thanks, Charles

[Charles Schwedes]

Sorry Chris, I hope this Attachment  1 is better. Charles

[Chris Ward]

Hello Charles

Your post slipped under the radar....

I think you are getting into a bit of a muddle all-round. You can't design a GUI bit-by-bit, it needs to be sketched-out on paper and reviewed later to ensure it will meet requirements without any ott (over-the-top stuff that sounds good but can end-up being in the way of what is most important).

Now, my example used two text files as data sources, only because it was convenient for my purpose, which was to show you a way to get your data side-by-side accurately, as per your PDF sketch.

Your actual app needs to handle your actual data, whatever format that might arrive in. There are small technical issues with files too - ASCII or Unicode, with or without a hidden Byte Order Format marker, the platform they were defined on (determines the type of End Of Line used), and most importantly:

1) How different portions of the data are grouped and/or seperated.

2) Consistency: If there is a collection of files, is it guaranteed that they are all formatted the same.

Now, back to the 9th of July, this was my request:

It is difficult to advise you because we do not know the process flow of your app and do not have a representative data sample. If you can post those, we can help more. 

 I still do not know what your app is intended to do (Process flow) and we have not seen a representative data sample (the data as it arrives for your app, which seems to be a text file - but would there only ever be one, a pair or would there be many?).

I'm sure Capture Pic.jpg makes perfect sense to you because you know what you want........ 

[Charles Schwedes]

Chris, You are sure right about my 'muddle'!

Things were going along OK (?) with my adding code designed to convert my 2 To/From lists to a 2 ToText.txt and FromText.txt format. But with a small change to your system I then tapped Load. I found the To text was displayed on both the left and right labels of 'our' loaded system. After some confusion I went back to your original code, tapped LOAD, and found your ToText.txt & FromText.txt text were correct, but the To text was loaded to both the left and right labels. Same as my (sorta) problem. Weird! 

I went back to the original aia you sent me, loaded it back to my AI, found the weird results to be the same, and sent it back to you as an aia (labeled Chris). If you confirm that this version still works on you your system correctly, clearly something strange is happening at my end. If in fact you get a problem, please send me a new copy of your aia.

In the meantime I'll send you my faulty aia, attachments to significant code/blocks and more data info. Thanks, Charles

[Abraham Getzler]

See the marked block in the attachment.

You got your Froms and Tos crossed.

ABg

[Charles Schwedes]

ABG,

Comment -> TEXT_TO …. I changed the gText_From to From and with Comment -> TEXT_FROM  …. I changed the gText_To to To. Tried it, and it seems to work fine. Thanks.

Charles

[Charles Schwedes]

Chris,

As you know I have attempted to adapt your Formatting VertArrs system to my ToList & FromList system. I send files or data via various means; Texting, TinyDB, etc. While this info is sent I save it to my ToList. Conversely, I save received messages to my FromList. These lists are in the format Name, Date and Message. Displaying this information with each To/From transaction in a staggered manor is more difficult. I would like to display To/Show as:

                                                            Hank

                                                            07/19/2018-10:42:222

                                                            Hello World

                                                                                                         Jane

                                                                                                         07/19/2018-10:45:345

                                                                                                         Another World

                                                            Hank…

 

If someone else comes into the message conversation the info continues to go into the lists, but the displays continue.

ATTACHMENTS (include .aia)

1.      Capture – Creates the ToList using btnAddTo which loads the three boxes. The FromList is the same.

2.      Capture1 – You’ll see where I tried to structure the Name, Date, Message code to create a text file.

3.      Capture2 – The Start button initializes the Files, Lists & Labels. The Go button Appends the 2 list files for File_Text.

4.      Capture3 – This is from your code. This is the only code I changed. I’ll describe my problem below.

5.      Capture4 – At first you will see the Start, AddFrom, AddTo, Go & Back buttons. The AddFrom is used to add each to the demo. The lists would have been generated elsewhere. AddTo is the same. --- The info above the ‘blue’ line is where the boxes are entered. --- The info came from Capture1. --- The below ‘green’ text info is sent to Chris’ code.

PROBLEM

There are at least two problem. The sent structured data to Append. This structure is lost with the Read. My emulator shows this in Capture3. The next problem is delimitating a message. I think you used ‘\n’. I tried that and then ‘|’. The ‘To/From’ labels are placed correctly, but the results are rubbish.

Thanks again for your patience and good work. And thanks to you, as usual, to ABG. Charles

[Chris Ward]

Hi Charles

OK, getting the picture now, but one really big question:

If someone else comes into the message conversation the info continues to go into the lists, but the displays continue

Is this a "live" chat, or simply a way to view the history of a chat? 

[Charles Schwedes]

Chris,

A good question. I think both!

The 'To' side of the display is used in two ways. The first is 'live' as the message is sent and also recorded as 'history' in the ToList. The other person, who also has a copy of this app, receives the message, saves it into his/her FromList and display it to the 'From' side of the label. Again I think that this is both "live" and "history". If this second person wishes to continue the 'chat' he/she composes a new message, sends it, and then records this message into his/her recorded history into his/her ToList. And it continues.

As another use to the To/From label display format... with this app someone sends a question to the Cloud (TinyWebDB, maybe) asking about the weather, astrology, anything. The Cloud who has a copy of this app looks at the question and comes back with an answer to the first sender, and replies with a message (say TO HOT) into his/her FromList. Get the idea?

I hope this answers your question. Thanks, Charles

[Charles Schwedes]

Chris, I missed an important point! The reply from the Cloud, in my example, was not 'live', but planned (say hourly) with the message sent using info derived from 'history'.

[Chris Ward]

Hi again Charles

Well, things are a long way off from the original spec of formatting two Vertical Arrangements :)

I think my two-label solution is unsuitable for a Chat App. A lot of data has to be processed - history, live chat from n Users, in real time. History has to be handled with a view to how much storage space it will need over time, privacy etc.

If you look at the commercial Chat Apps, they are using a single list (effectively reducing the demand by 50%), so I recommend you think about dropping the idea of two lists - indeed, with one list using the width of the device, a conversation could be easier to read and the Users would not be deprived of zoom control. Other things to consider are how Users could delete 'old' messages dynamically (in real time).

Here are links to Chat apps made with App Inventor. You can check-out their GUI and the code that drives them:

https://opensourceforu.com/2016/11/creating-chat-application-app-inventor-2

http://puravidaapps.com/pubnub.php

http://ai2.appinventor.mit.edu/?locale=en&galleryId=5813238663086080#

http://ai2.appinventor.mit.edu/?galleryId=4915720598847488

http://ai2.appinventor.mit.edu/?galleryId=4933277714743296

[Charles Schwedes]

 Hi Chris & ABG,

Your 'Formatted Label' system was great, I'm just sorry that my ideas didn't mesh with yours. Early in July I had suggested a staggered system and have now tried to rework the original 'Label' system to be a 'Button' one. You can see my lame video in the first attachment. It seems to do just what I wanted, but the right button 'ToBtn' didn't work quite a well as the left one. I'm working on it! The other three attachments illustrate how I did it. Any thoughts? Thanks Charles

Opps - The video was too large. I'm not sure how to send it. It was about 8 seconds and 12 MB.

[Charles Schwedes]

Chris & ABG - At least I could send a still of the video I tried to send. Charles

[Chris Ward]

Hi Charles

I still think you should study the chat/messengers I listed. Real time processing of messages is not trivial, they can eat-up memory really fast.

By the way, your phone can take a screenshot of itself - a feature of Android (some manufacturers have made it even easier):

Take a screenshot

To capture your screen as an image on your phone or tablet:

1. Open the screen that you want to capture.
2. Press and hold the Power and Volume down buttons at the same time for a few seconds. Your device will save the screen as an image.
3. At the top of the screen, you'll see the Screenshot capture .

Tip: If you don't see the Screenshot capture icon, return to a home screen to see it.

[Charles Schwedes]

Chris,

Thank you for our input. I have your chat/messengers listing in front me will check out the offers.

 

Thanks again Charles.