Line Colors: Every Other Line

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

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

ChristopherBodell
Posts: 52
Joined: Sun Jan 20, 2008 7:06 am

Line Colors: Every Other Line

Post by ChristopherBodell » Fri Mar 14, 2008 3:09 am

Does anybody know how to set every other line's background color differently? If you can help that'd be great.

Many thanks,
Christopher

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Post by Mark » Fri Mar 14, 2008 10:13 am

Hi Christopher,

You can use a backgroundpattern for this. If your lines are all 14 pixels high, create a background pattern of 28 pixels hight, e.g. 14 pixels white and 14 pixels blue. If you set the backgroundpattern of a field to the ID of the image, you'll have alternately coloured lines.

Best,

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

ChristopherBodell
Posts: 52
Joined: Sun Jan 20, 2008 7:06 am

Thanks

Post by ChristopherBodell » Fri Mar 14, 2008 1:15 pm

Thanks mark,

that's easy enough.

Many Thanks,
Christopher

andyh1234
Posts: 476
Joined: Mon Aug 13, 2007 4:44 pm
Contact:

Post by andyh1234 » Mon Mar 24, 2008 2:48 pm

Just adding to this, is there any way to shade certain lines in a field.

Ive tried setting the backgroundcolor for the line, but it only puts the color behind the text and not right across.

What I would like to do is group certain lines of a table, say the first 4 items with a blue shade at the back, the next 6 with yellow etc, the number of lines would be variable, and the shade should be solid, just like when you highlight an entry (which I still need to be able to do!)

Any ideas?

Andy

Janschenkel
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 977
Joined: Sat Apr 08, 2006 7:47 am
Contact:

Post by Janschenkel » Mon Mar 24, 2008 3:53 pm

In theory, you can do this by making the field transparent and place it on top of a group control which is a collection of rectangle graphics with the correct background color per line.

You can then have the underlying group scroll along with the field, by placing this script in the field:

Code: Select all

on scrollbarDrag x
  set the scroll of group "MyBackground" to the scroll of me
end scrollbarDrag
Beware that groups can scroll no further than ~32000 pixels, so this is not going to work if you have a lot of lines.

Jan Schenkel.
Quartam Reports & PDF Library for LiveCode
www.quartam.com

andyh1234
Posts: 476
Joined: Mon Aug 13, 2007 4:44 pm
Contact:

Post by andyh1234 » Mon Mar 24, 2008 6:15 pm

Thanks, that works a treat!

Andy

bangkok
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 937
Joined: Fri Aug 15, 2008 7:15 am

Post by bangkok » Fri Aug 29, 2008 8:49 am

By looking for the same subject (different colors on different lines inside a field) I found this thread.

I would like to add my own solution.

Basically, within a table field, I want to "highlight" some lines with a specific background color, linked to the content of the table field, in order to ease the reading for user.

-table field, opaque false

-behind it, a set of small field, one per line of the table field
blending set at 30% for instance, opaque false

-then after the tricky part is to manage the "scroll" of the table field, to refresh the backgroundcolor (if needed) of the small fields.

I'm still working on it. ;-)

Something like that.


on scrollbarDrag
put the scroll of me div the textHeight of me into a
changeColorOfSmallFields (a)
end scrollbarDrag

on changeColorOfSmallFields para
repeat with c=1 to totalNumberOfLineOfTableField
put ("SmallField"&c) into SF
if line (c+para) of field "Table Field" contains KeywordToHighlight then
put "255,255,0" into myColor
set backgroundcolor of field SF to myColor
else
put "0,255,0" into myColor
set backgroundcolor of field SF to myColor
end if
end repeat
end changeColorOfSmallFields

bangkok
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 937
Joined: Fri Aug 15, 2008 7:15 am

Post by bangkok » Sat Aug 30, 2008 6:46 pm

Regarding the way to "visually discriminate" some lines within a table field, there is another solution than the color background : HTML.

(idea found in a Eric Chatonet's stacks)

By simply putting a HTML text inside the table field, with a column with icons (or any other images).

Code: Select all

   constant kTab = "	" 
put "<p><b> <img src=" & quote & "200083" & quote & ">" & kTab &ktab&"THIS IS A TEST"&"</b></p>" & cr into tHtmlList
set the htmlText of fld "testhtml" to tHtmlList

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Post by Mark » Sat Aug 30, 2008 11:22 pm

Hi Bangkok,

What about the easy way?

Create a new field, set the listBehavior of the field to true, set the multipleHilited and the nonContiguousHilites of the field to true as well. Now just click and shift-click on the lines. You can set the toggleHilites of the field to true as well, which makes shift-clik unnecessary.

Best,

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

bangkok
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 937
Joined: Fri Aug 15, 2008 7:15 am

Post by bangkok » Sun Aug 31, 2008 9:12 am

Mark wrote: What about the easy way?
Create a new field, set the listBehavior of the field to true, set the multipleHilited and the nonContiguousHilites of the field to true as well. Now just click and shift-click on the lines. You can set the toggleHilites of the field to true as well, which makes shift-clik unnecessary.
Mark
Okay, but it gives you only 2 "colors" per line if I may say: non highlited and highlited , right ?

bangkok
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 937
Joined: Fri Aug 15, 2008 7:15 am

Post by bangkok » Sun Sep 14, 2008 5:49 pm

Here is another way to "visually discriminate" some lines into a field.

-create an image, a colored bar, with some blend, of the width of your table field

-put a special character (like space) in the first column

-then we can use the propery imagesource

Code: Select all

set the imagesource of char 1 of line 1 of fld "myField" to "myImage"
Trick found on :
http://mail.runrev.com/pipermail/use-re ... 14469.html

Mark
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 5150
Joined: Thu Feb 23, 2006 9:24 pm
Contact:

Post by Mark » Sun Sep 14, 2008 6:03 pm

Bangkok, have you actually tried this with an image of the same width as the field?

Mark
The biggest LiveCode group on Facebook: https://www.facebook.com/groups/livecode.developers
The book "Programming LiveCode for the Real Beginner"! Get it here! http://tinyurl.com/book-livecode

bangkok
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 937
Joined: Fri Aug 15, 2008 7:15 am

Post by bangkok » Sun Sep 14, 2008 9:58 pm

Mark wrote:Bangkok, have you actually tried this with an image of the same width as the field?

Mark
Yes. It looks fine.

Of course, I wouldn't use this solution.

But it was just to explore the thing.

I guess it's too heavy. I would rather go for the "fields behind" or the HTML solution (very elegant I think).
:D

espais
Posts: 14
Joined: Thu Jun 22, 2006 12:16 am

Post by espais » Thu Oct 16, 2008 4:19 am

Hi,

I try the BackgroundPattern with a 28px hight but every line is misplaced from the top. How to adjust the position? or what I do wrong?
I have a image of 28 x 50.

Cheers,
Josep

Janschenkel
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 977
Joined: Sat Apr 08, 2006 7:47 am
Contact:

Post by Janschenkel » Thu Oct 16, 2008 5:57 am

You may have to tweak the 'margins' property of the field. The defautl value is '8' but this has as subtle side effect that the first line is actually tqwo pixels taller than the rest.
So try and set the 'margins' property (in the 'Text formatting' panel of the Inspector palette) to "8,6,8,8"

Hope this helped,

Jan Schenkel.
Quartam Reports & PDF Library for LiveCode
www.quartam.com

Post Reply