Oddity happening with deployed web app (growing canvas does not grow)

Ryan_Hartz · July 17, 2023, 3:56pm

Over the past several months I have been working on my first web app, and it has been coming along nicely, until I noticed something today. I just deployed the app via Xojo Cloud to do some live testing and went in to find an oddity occurring. I have a couple of places where I need a canvas to grow in height, depending on the amount of text present, such as in the screenshots below for a multiple choice feature. In the deployed app, it seems as though the calculations and adjusting the canvas heights is being ignored. Do I need to add a timer or something to adjust the canvas sizes after XX milliseconds?

Practice exam screen in debug (works as expected)

Practice exam screen in deployed app (canvases are same height and way too short which cuts off the text)

AlbertoD · July 17, 2023, 4:19pm

Can you provide a sample project?
You only show the standard size for canvas in both screens, when a larger text is used the canvas grow when you are in debug?
What version of Xojo are you using?

Ryan_Hartz · July 17, 2023, 4:49pm

Sample attached and deployed link below. Using Xojo 2023 r1

Try the sample in debug mode, then try the same project I just deployed
https://www.dropbox.com/scl/fi/qilabsscmhpd102v0j17q/canvas-height-oddity.xojo_binary_project?rlkey=06xd1td8icnt3csny81rge4sb&dl=0

Here is the deployed app:
https://canvasheightoddity.xojocloud.net

AlbertoD · July 17, 2023, 5:22pm

There are differences between OS and console graphics.

Also some bugs like this one:
#72832 - Graphics problems on Webapp Xojo 2023-1.1

You can create an Issue with your sample code for easier review.

You can try to use a different font that may work better on your deployed app (if any).

Ryan_Hartz · July 17, 2023, 5:56pm

Issue created
https://tracker.xojo.com/xojoinc/xojo/-/issues/73389

I’d like to know if there is some sort of workaround or something else to do to get this to work in the meantime. This is a huge deal breaker as I need this functionality in several areas of the app. I tried it with a timer set at 3,000 ms, but this did not change anything. I don’t think the font is an issue. Looking for other ideas as I am so close to launching. @Ricardo_Cruz any hacks you can think of?

AlbertoD · July 17, 2023, 5:58pm

Are you getting the right height in your deployed app?

I mean is just a Canvas not refreshing problem or the graphics height calculation is wrong too?

Ryan_Hartz · July 17, 2023, 6:27pm

Good question. See my screenshots below. I added 2 labels to display the heights. Seems as though the height calculation is off, so it never gets to the canvas/label heights

In the debug:

In the deployed:

Ryan_Hartz · July 17, 2023, 6:32pm

The “height: 30” in the deployed example stems from the spacer I add in:

can1.Height = htA1 + 30

I confirmed this by changing the spacer of one to 20, and the label displayed 20 for that calculation. It seems to be ignoring the htA1/htA2 calculations here:

htA1 = txAnswerPic1.Graphics.TextHeight(myText1, 440)

AlbertoD · July 17, 2023, 6:42pm

The TextHeight result is 0 on your app, Xojo needs to fix that bug. I remember something about console graphics problems.

Ryan_Hartz · July 17, 2023, 6:58pm

I added some comments to the Issue per my investigation and your mention of the TextHeight result

Still looking for a hack in the interim. I suppose I could calculate the number of characters and determine the height that way, but many of the text that is to be used also includes returns, which I don’t think a character count would work

Rick_Araujo · July 17, 2023, 7:16pm

Many moons ago, using other language, I wrote a graphics COM Object to render graphics and charts in MS Web servers. All tests were ok, and we used it extensively. One day, people told me “the component is not working anymore, the charts are blank” and I made a test and it worked in my local web server. Then I inspected the specific remote web server looking for problems. What I got different? That web server had no graphics card. Doing local tests I discovered that the graphic lib I was using, all in memory, depended in some way of the presence of graphics hardware. Techs reached the server and installed a cheap graphics card and the component started to work. Maybe something like this, currently, in some order, occurs in virtual web servers installed in text mode? Graphic subsystems missing some graphics capabilities needing installation of some kind of graphics driver/lib? Or just a Xojo bug? Why I remembered that? Because some readings I got without a graphics card were 0 (zero) too.

Ryan_Hartz · July 17, 2023, 8:25pm

So I made up my own hack for this issue since I would like to get this app launched sooner than any fix (if any) will be implemented

I made a new MySQL table to hold the text heights

In the debug-mode app (the one that works with the TextHeight calculations and getting the canvases and labels to grow), I saved to the text height table the different heights of the various fields I need to calculate the heights. Ran the app and saved to this table

I modified the app and removed the instances of relying on the Graphics.TextHeight calculation and changed this to the call to the new table to get the height of each field that needs calculating. Set the labels and canvases to this height, deployed and tested, and it works

While this is A LOT more work (and I only tested in one instance out of many), and is not the most elegant, it will get the job done for the planned launch by the end of July

I am hoping this will get fixed in Xojo. While this is working now, it is now another table I will need to manage with any changes to my content db

Greg_O · July 17, 2023, 9:10pm

There’s nothing for Xojo to fix. The problem is that the font you are using doesn’t exist on the server where it’s deployed. If this is xojo cloud, connect to your server using SFTP and put a copy of the TrueType font file into the supplied fonts directory.

See the issue is that the drawing code is on the server whereas the actual canvas is on the user’s browser so the measurements like this have to be done ahead of time using a rasterized version using a picture. If the font doesn’t exist, TextHeight returns 0 and your calculations are all wrong.

Ryan_Hartz · July 18, 2023, 1:46am

That is interesting Greg. Thanks for the info. I will test it out tomorrow

For my own understanding, since web is a new avenue for me, is the server without any fonts from the get go? I would have assumed a “standard” font would be there. For this app, I am just using the standard built-in font (not specifically setting one for this canvas piece or anywhere else for that matter), but it sounds like that not even that is present on a new server?

Ivan_Tellez · July 18, 2023, 4:01am

Ignore that, you are NOT DRAWING in the canvas, so the font is not really relevant. Measuring text server side it will be just an aproximation but never be reliable.

You are just sending text, it will be rendered by the browser with a size depending on the zoom, DPI, etc, etc…

Using a canvas just to draw some borders is not a good idea, you can set the borders directly on the label.

Your design is a good idea, but xojo is not really made for fancy resizing.

What about fixed sized labels with scrolable content?

It is a shame that xojo dont have a way to use the Bootstrap classes in code, but you can set the Style, Just add this code in the openning event of each label:

Me.Style.Value( "overflow-y" ) = "Auto"
Me.Style.Value( "padding" ) = "6px"
Me.Style.BorderColor = Color.LightGray
Me.Style.BorderThickness = 6

'Also a nice touch a rounded corner:
'Me.Style.Value( "border-radius" ) = "3px"

Greg_O · July 18, 2023, 6:08am

Ivan, please stop talking about things you clearly know nothing about. What I described I does require the font to be present on the server.

Greg_O · July 18, 2023, 6:16am

This was talked about for a long time when it was first decided. The problem is that the server OSes rarely come with the fonts because there is no UI to render them. The fonts that you would most likely want to use require acknowledgement of a license agreement by the end user and it was impractical to do at the time. Even Adobe’s base 13 fonts used in PDF files everywhere have a licensing fee and the onus of not abusing that right is passed on to you when you click “I agree” on the OS license agreement.

Anyway, the end result is that Xojo Cloud does not include any fonts. It’s up to you to license and place the ones you want to use on your server.

Ryan_Hartz · July 18, 2023, 4:15pm

So… This was the key! I SFTP’d a font file to the server, and that seemed to have fixed it! Thanks Greg!

Question. Is that all that needed to happen here? In other words, do I necessarily need to call the new font when drawing the text picture? In my one test project, I did make a call, such as:

txAnswerPic1.Graphics.FontName = "ttARIAL"

But then I commented this out, deployed, and it still worked. The same applied to my main app without changing anything (no setting the FontName to anything). So that was it? Just upload a font?

Ryan_Hartz · July 18, 2023, 4:27pm

Hi Ivan. Thanks for your comments and suggestions. Yes, using a canvas + a label seems like overkill, but I have several reasons for doing this over using a scrollable label

I need the ability for the user to click anywhere in the text’s area to make a selection. When they make a selection, the border changes color to show their selection. A .Pressed event is not available for a label, at least I don’t think it is
I purposely place the label with the text behind the canvas for the purposes of being able to make a selection but also for preventing the ease of selecting the text and copy/paste. This app is a study guide app with a lot of content. In our industry, it is very common for students to copy/paste content and post it publicly. I’ve found that placing a canvas on top of a label prevents the selection of the text. I know, I know, there is nothing stopping someone from typing out the material and posting it. They still do, and I handle these on a case-by-case basis. This at least does not make it easy
Long ago, in my desktop version of this study guide app, I used a fixed sized TextArea to hold the text, and the student would need to scroll through it to read it all. The feedback I received over the years is that the students hated having to do this. Hence, I moved to using a growable canvas. For the desktop app, I do not also need to include the label to hold the text since desktop graphics does work with wrapping. Unfortunately as I’ve found, WebGraphics is missing the one parameter to make this happen

Ivan_Tellez · July 18, 2023, 6:13pm

Actually, labels do have the Pressed event, you just have to change the border color there:

lblText1.Style.BorderColor = Color.red
lblText2.Style.BorderColor = Color.LightGray

It is better if you use CSS for that instead of overlapping things. To disable selection on all the labels, Just put this on the App HTMLHeader:

    <style>
      div label span {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    </style>