WebCanvas vs WebImageView for generated image with text and graphics

Targets Web
1

Continuing the saga of creating a nice looking list with icons… and there are probably lots of good reasons to not approach it this way - feel free to express those thoughts…

I have a database with user info, one field is a text description which could be any length.

Method 1: I have experimented with expressing this list of descriptions in a canvas, using the g.drawstring command in the paint event of the canvas.
Method 2: I have also defined a picture property § and expressed the text using p.graphics.drawstring…

In method 1 - the text is updated as I scroll through the database (using verticalscrollbar and code to do so) - however, it doesn’t take long for the program to crash this way - I am suspecting some sort of overload condition that is difficult to recreate in a simple test app without a database. I introduced a timer to do the repaint after things settle down from the scrolling (say refresh after waiting a second) - but it still crashes.
In method 2 - once I render the first image in the canvas (g.drawpicture p,0,0) in the canvas paint event, I can not seem to get the picture to update when I re-render p, and refresh the canvas - instead the canvas goes blank.

If instead (since I am creating a picture - p) I use a WebImageView and just re-assign WebImageView.Picture = p after every time I re-render the list in p, everything seems to work just fine - it just feels a bit less responsive than Method 1 and the WebCanvas - if only that method didn’t crash.

Any comments or insights on best approach for mixing text from a database and small images in a list like fashion without using 3rd party controls?

2

I’d like to know more about the crashes. Can you give some more specifics, like a stack trace?

What many people do is create a list using ContainerControls and adding them with EmbedWithin.

3

[quote=136084:@Greg O’Lone]I’d like to know more about the crashes. Can you give some more specifics, like a stack trace?

What many people do is create a list using ContainerControls and adding them with EmbedWithin.[/quote]
Sure I will do that. When you say using ContainerControls and EmbedWithin - I have done a lot of that as well - using a canvas in the container, but was having a heck of a time getting that to scroll as I wanted it to without a scrollbar. And since I wasn’t scrolling as I wanted, I probably didn’t generate the crash condition.

4

This is the info reported when it crashed - I think this is what you are asking for? I modified some of the confidential contents of the text below. I notice that some of the records are repeating, which I would not expect.

When I initialize the view, I generate a record set (rs). When I move the scroll bar, I move to the appropriate starting record in the record set: rs.MoveFirst, then do loop rs.MoveNext to the appropriate location in the record set (without exceeding eof). So when I move the scroll bar quickly, this crash situation occurs. Even if I delay things via timer as mentioned previously in this thread.

Here is the dump…

Could not execute returned javascript: Unexpected token ILLEGAL
Source: Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\’ Student Fees are in Infinite Campus and may be paid at this time. Click here to learn more. If you have questions about any fee that is listed for your child, please contact the school.

If you have any questions, please contact the school at (555) 555-5555.\‘,40,30);’,8);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Piano lessons for xxxxxxxx\’,40,60);’,17);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Oil & Gas version of xxxx+xxxxSB\’,40,90);’,26);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘ROI of Archive Fed Deck for Book of LLLLLLL\’,40,120);’,35);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Schedule Eye Appointment 555.555.5555 -why is this here?\’,40,150);’,44);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Check in with Jeff llllllllll\’,40,180);’,53);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Get an electrician to complete basement\’,40,210);’,62);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Barclays Bank Delaware - Master Card\’,40,240);’,71);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘LLLLLL-X + Software Partner Solution Brief\’,40,270);’,80);
Xojo.controls[‘TcOUZaUe’].editScript(2,‘context.fillText(\‘Piano Tuner\’,40,300);’,89);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Oil & Gas version of LLLLLL+AAAAASB\’,40,30);’,8);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘ROI of Archive Fed Deck for Book of LLLLLL\’,40,60);’,18);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Schedule Eye Appointment 555.555.5555-why is this here?\’,40,90);’,28);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Check in with Jeff llllllll\’,40,120);’,38);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Get an electrician to complete basement\’,40,150);’,48);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Barclays Bank Delaware - Master Card\’,40,180);’,58);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘LLLLL-X + Software Partner Solution Brief\’,40,210);’,68);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Piano Tuner\’,40,240);’,78);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Facebook Blu-ray Technology - Blog\’,40,270);’,88);
Xojo.controls[‘TcOUZaUe’].editScript(1,‘context.fillText(\‘Chiropractor from Race Event - sent email to him on 8.26\’,40,300);’,98);
Xojo.controls[‘TcOUZaUe’].runScript(23);

5

Ok. To be clear, this is not a crash per se, it’s just a bug of some kind. That window will have a note about an Exception if it’s a crash.

I’m guessing that the problem is that the multi-line items are not being escaped properly, but I have no idea why.

As far as the duplicates go, WebCanvas uses a diff algorithm to send new data to the browser in an attempt to speed things up a bit, but if you’re drawing the same text twice in the same event loop, it’ll look just like this.

6

[quote=136090:@Greg O’Lone]Ok. To be clear, this is not a crash per se, it’s just a bug of some kind. That window will have a note about an Exception if it’s a crash.

I’m guessing that the problem is that the multi-line items are not being escaped properly, but I have no idea why.[/quote]
I think this is yours to fix, not mine - right?

7

Just to be clear, I have also experimented with a lot of this approach - where a row is a container of controls, and the list is a collection of those rows. I always get that to work well, as long as I don’t try to generate too many rows (causing lots of latency); and yes I can create them in small batches as well. I was just looking for a pure graphics approach which has some appeal for appearances and other factors.

8

I replaced all line endings with " | " and that seems to avoid the ‘crash’.

9

I’d check the encoding of the data coming out of your database. It’s entirely possible that there’s NO encoding set. I’d make sure they are UTF8.

10

Where is the appropriate place to set these encodings? I hate to admit this is not something I have typically done.

11

I am using SQLite - and the language reference says: "SQLiteDatabase converts text to UTF-8 text encoding. "
So I think that means I am OK - right?

12

Still, you should set the encoding when you retrieve it.

RS.field(“name”).stringvalue.defineEncoding(Encodings.UTF8)

13

What a pain - lots of code without that already.
But thanks for the insight.

14

any time you get data from outside you should use define encoding
this includes reading from a database, reading a file, serial ports, sockets of all kinds
NOT doing so leaves yourself open to unexpected handling of what should be “text”