Issue with text command in Javascript version of VPython

41 views
Skip to first unread message

Mark Somers

unread,
May 13, 2024, 4:59:41 AMMay 13
to VPython-users
I'm trying to write a simulation in the Javascript version of VPython.  After a bit of hair-pulling, I've been mostly successful.  I have one remaining issue.  I am getting an error when I use the text command.  The relevant lines of code are:

line 125   console.log(wristband.pos.add(vec(-0.02, -0.09, 0.023)));
line 126    let R = text({text:"R", font:"sans", height:0.08, pos:wristband.pos.add(vec(-0.02, -0.09, 0.023)), color:color.red, align:"center"});

I included the console.log statement so you could see that the text pos attribute has a value that is valid.  Below is a copy of the console error message that results.

d9YNuHR:125      vec {x: -0.02, y: -0.24, z: 0.023}
glow.3.2.min.js:1 Uncaught (in promise) Error: Font not available for text object.
    at text3D (glow.3.2.min.js:1:4318616)
    at new text (glow.3.2.min.js:1:4239610)
    at text (glow.3.2.min.js:1:4239067)
    at new righthand (d9YNuHR:126:17)
    at start (d9YNuHR:252:12)
    at __main__ (d9YNuHR:338:2)
    at d9YNuHR:358:1
text3D @ glow.3.2.min.js:1
text @ glow.3.2.min.js:1
text @ glow.3.2.min.js:1
righthand @ d9YNuHR:126
start @ d9YNuHR:252
__main__ @ d9YNuHR:338
(anonymous) @ d9YNuHR:358

I do not know how to handle this error.  Any advice will be appreciated.
Mark

Steve Spicklemire

unread,
May 13, 2024, 5:47:32 AMMay 13
to 'Ian Beatty' via VPython-users, Steve Spicklemire
Hi Mark,

I tried this (essentially the same arguments as your line)

https://glowscript.org/#/user/spicklemire/folder/My_Programs/program/testtext

and it works for me.

Can you provide a simple program that breaks in the same way you’re seeing in your complex program?

thanks,
-steve
> --
> You received this message because you are subscribed to the Google Groups "VPython-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to vpython-user...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/vpython-users/e3505f5f-abfd-4fb8-8070-a4b5d083bf2bn%40googlegroups.com.

Mark Somers

unread,
May 13, 2024, 3:53:11 PMMay 13
to VPython-users
Hey Steve,
I should also have added that I am not running the program in the glowscript editor, but instead have embedded it into an html page.  Below is the code, most of which is copied directly from the VPython documentation:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="glowscript" class="glowscript">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" href="https://www.glowscript.org/css/redmond/2.1/jquery-ui.custom.css" rel="stylesheet" />
<link type="text/css" href="https://www.glowscript.org/css/ide.css" rel="stylesheet" />
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="https://www.glowscript.org/package/glow.3.2.min.js"></script>
<script type="text/javascript">
window.__context = { glowscript_container: $("#glowscript").removeAttr("id") }

let scene = canvas();
scene.background = color.white;
let R = text({text:"R", font:"sans", pos:vec(0,0,0), height:0.08, color:color.red, align:"center"});


</script>
</div>
</body>
</html>

Thanks for the help!
Mark

John

unread,
May 13, 2024, 6:54:54 PMMay 13
to VPython-users
If you click on  View this program     in Steve's example above and then click on  Share or export this program      it will take you here where to can view the javascript code.


You can see in the javascript source code there are calls to load fonts which your code is not doing.

var scene = canvas();
    fontloading();
    await waitforfonts();

You can click on Download as HTML in the above webpage as one of the provided sharing options and then run the html file from where it was downloaded on your computer to see it running.

If you don't want to use this automatically generated javascript code then you will need to incorporate some javascript async functionality into your program to call "await waitforfonts();" to work in your javascript program. 

John

Mark Somers

unread,
May 14, 2024, 1:12:26 AMMay 14
to VPython-users
Hey John,
Not only did you answer my question, you gave me a method I can use to figure out the answer to future questions.  Very helpful!  Thanks!
Mark

Reply all
Reply to author
Forward
0 new messages