LiveCode Forums

I would like to use a scrolling field or field widget in LC. Within the widget, I would like to place an image on the left side of the text. I'd like the text to flow around the image. How do I approach this using LC?

Should I use a grid/table? Should I use grouping? I've tried inserting my image widget in the field but it work. It is on a different LC layer. I'm kind of lost on this one.

Oh, and while I'm at it, what about text justification. I don't see it listed in the object --> text (A) area. Surely, there must be some way to apply it to the text.

Again,
TIA
-Rachel

This is probably not on the cards as TEXT is, normally held in a field, while an IMAGE is another
object.

If I were to try for this type of thing I would CHEAT by making up the text with it flowing
round the image somewhere else (e.g. a word-processing package), take a screenshot of
that and then import it into my stack as an image.

While that may appear a bit wonky, it has the added advantage that you will have
100% consistency with your font and how your text flows across all platforms you
wish to deliver your finished work.
- -
I used Apache Open Office for this.

ValiantCuriosity wrote: ↑

Sun Feb 10, 2019 4:13 am

Oh, and while I'm at it, what about text justification. I don't see it listed in the object --> text (A) area. Surely, there must be some way to apply it to the text.

If by 'justification' you mean 'aligning' the text, that is the textAlign property at the bottom of that (A) area.

You can stick an image into a field, using imageSource, but I've only ever used it on one line. Not sure if text would flow around it or not.

You can also target the forums in your favorite search engine using, in this case, this type of search -
site:forums.livecode.com image in field
... where the site is the address to the forums, then a space, then quoted or unquoted search terms. In duckduckgo , the result shows like this -

Thank you again Bogs. I swear that I searched the forum. I did find a few things, but not the link that you sent. Also, all this time, and I didn't know about the search feature for the browser. Thanks for that too.

A "thank you" to richmond62 as well. Interesting way of working around the issue. Never would have thought of it.

Now, I'm off to play with the newly planted information.

-Rachel

"imagesource" or not, there is no build-in and/or easy way to have "flowing text" around images. These layout-features are not available in LC like in a dedicated layout-app like Pages, InDesign etc.

ValiantCuriosity wrote: ↑

Sun Feb 10, 2019 6:43 pm

I swear that I searched the forum.

Oh, I was sure of that before I even posted. I've yet to see a forum that had a really (what I would consider) great set of search tools, which is why I usually drop back to a search engine for searching things whenever possible

Klaus wrote: ↑

Sun Feb 10, 2019 6:54 pm

there is no build-in and/or easy way to have "flowing text" around images.

I actually agree with this statement, but I have 'wrapped text around images' in goofy and clunky kludgey ways. Mind you Rachel, I am absolutely *not* suggesting you use this kind of method unless you become desperate

Having said that, heh, here we go having some fun As you can see, this is nothing more than 1 field which everything sits on and is only there for looks (a backdrop, you might say). On top of that is an 'image', and 3 more fields positioned where you want the text. Once you have it setup satifactorily, disable the borders on the 3 fields the text would be entered in, then group the whole shebang. Make sure if your fields go below the groups 'border', you have a vertical scrollbar on it

This absolutely works best if you have static, pre-planned text (well, it is easier that way, anyway), but if your going to be dynamically changing text, you'll be reading about formatted heights, widths, and all kinds of other goodies to get that text to the right boxes

I've spent the day trying to get the imageSource script to work. Blah... nope!

Really, <small whine> text and images should be able to be easily mixed. I've spent hours on, again, a relatively simple thing to do in HTML5. That said, I noticed that LC can use HTML5 for inserting images, but how would you do that with an imported LC image? I'm guessing that imported images are the way to go for iOS apps.

I've tried the following recommended imageSource code. The image never even displays in the field.
I've also looked at Images and Multimedia.livecode (one of the scripting conferences that Klaus recommenced). It shows Logo headers in the content area. I've tried to find the code there that would help me, but I don't see any that displays the Logo image.

The field within the collapsible that I am using provides only static information, but it needs to include images.

Bogs solution may be what I need. Though, I'm nervous about trying it since he isn't recommending it for real world use.

Maybe richmond62's suggestion will be my next try, but I'm worried about pixelation there. Plus, I need the collapsible so an image might not work with that.

Guess tomorrow is another day...

Thanks guys... -Rachel

ValiantCuriosity wrote: ↑

Mon Feb 11, 2019 12:00 am

I've spent the day trying to get the imageSource script to work. Blah... nope!

Hmm, not sure why it wouldn't work, but I can take some guesses !

First, though, I really don't think image source is going to do what (I think) your looking to do. In this example, the image is set to 100 x 100. This is what the text would look like without a LOT more work. For the above picture, the actual code used in the openCard script was - Things I had to know in advance were -
Where line 2 was going to be (not as simple as it always sounds)
The id of the image (1005 in this case)

As you can see, though, it isn't exactly 'beauty on the roll' going about it this way.

ValiantCuriosity wrote: ↑

Mon Feb 11, 2019 12:00 am

Bogs solution may be what I need. Though, I'm nervous about trying it since he isn't recommending it for real world use.

Aside from learning this language, you will (at some point) learn Bogs is a wise guy who thinks he is funny, in a goofy corny type of way. You'll also find out he talks about himself in the third person a lot

Mostly the target of the previous 'joking around' wasn't you, it was Klaus. While I have nothing but the utmost respect for Klaus and his abilities in many areas, not to mention how he has made my own (and MANY OTHERS) introduction to this language much easier than it might have been otherwise, for some reason he always makes me want to make him chuckle, so I tend to 'poke' him a bit

In this case, the line -

there is no build-in and/or easy way to have "flowing text" around images.

did the trick

To sort of 'make up' for my previous attempt at joking (which obviously failed), I'll show you yet another way to get the magical 'text flowing around an image' using only 1 field and 1 image! Now, in the above picture, you can see I used the underscore ( _ ) character to make it really obvious what is going on in the contents pane. The setup was as simple as -
drag a field onto the stack
drag an image onto the field
set the size of the image to whatever you find appropriate
lock the images size so it doesn't do something you don't expect, like take up 50 rows/columns
format your text ( in this case using underscores ) so that it flows around the image.

Now, of the 2 methods I've shown here, my preference tends to lean towards the first method for a couple of reasons.

1. When you enter text in the 'contents' pane of the property inspector, you have to keep clicking out of it to see the results, which gets tedious.
2. With the 1st method (positioning text fields), you can simply hit the 'Run' (browse tool) and click on each field and enter what you want.
3. After the field(s) are filled with your text, simply size them so you don't have any cut off text (usually [g] or [q]

Hope that straightens everything out

You know, in all of this thread, I also forgot to mention that you can use a browser object and just display the html pages you already created previously

Not only that, but that same browser object can display any new pages you decide to make in html or any changes you made as well

AND . . . one could import snapshots from the browser object to guarantee
cross-platform parity.

Of course there ain't much difference, when push comes to shove, of displaying
snapshots of a browser object and snapshots of a word-processing package:

in both cases the actual word-wrapping was done outwith LiveCode.

Yup yup

Bogs,
I like your sense of humor and your willingness to go the extra mile for beginners. Thank you. Never lose your welcoming nature. I may not hang around, but this forum always makes me want to come back. That is due to you and the people here.

I'm still struggling with the imageSource code. I did get the original layout that you showed to me/us to work. I grouped it thinking that the code to collapse it would work for the entire group of fields and images. It doesn't. I'm beginning to think that I need to give up on collapsible fields and just use more cards.

I haven't even begun to explore the browser object. Since I'm trying to move to a coding environment that solves some of the bugs that seem to be popping up in my app, I suspect that using my older technology might not be the best solution unless LC compiles everything differently than using the Apache Cordova wrapper with Xcode. That said, I do like working with HTML5, CSS, and javascript (not so much). I've dabbled in a lot of other frameworks that use tech like Angular, React, etc, and the UIs are spectacular, but things breakdown for me with the coding. Plus, there is no forum as warm and friendly as this one...

Even when one misspells Klas', err, Klaus' name.

Off I go to practice some more stuff with LC.

-Rachel

Even when one misspells Klas', err, Klaus' name.

Thin ice, Ma'am, very thin ice!

Klaus wrote: ↑

Mon Feb 11, 2019 8:33 pm

Even when one misspells Klas', err, Klaus' name.

Thin ice, Ma'am, very thin ice!

See how much he grins when you do that? Fun ain't it?

ValiantCuriosity wrote: ↑

Mon Feb 11, 2019 8:17 pm

I grouped it thinking that the code to collapse it would work for the entire group of fields and images. It doesn't. I'm beginning to think that I need to give up on collapsible fields and just use more cards.

I'm pretty sure you can collapse a group, but groups or more cards, the easiest way for you that fits your style is the way you want to go. That demo I posted with the effects should work on almost any objects you can use, although I didn't personally test it out on every one myself

The suggestion about the browser object was just another way to literally do what you want (flow text around images) just as you would in html without the learning curve. You don't have to program the browser widget, it is already programmed, you just feed it the html you already wrote. I am a HUGE believer in code reuse, why chuck whats already done and setup the way you want?

It's possible to collapse whole groups. The basic idea is to lock the screen, set the height of the group to something small, and unlock the screen. You can add an animation effect when unlocking if you want. To expand, do the same thing only set the height back to the original height before unlocking the screen.

While the screen is locked you can move other controls or adjust the layout to accommodate the new size of the group. To keep the top of the group pinned, change the last item of the rect of the group to adjust the height rather than just setting the height property itself. If you only reset the height, the group will resize around its center. Changing the group's rectangle ensures the top and sides remain fixed.