Board index FlightGear Development Canvas

How to make text on Canvas?

Canvas is FlightGear's new fully scriptable 2D drawing system that will allow you to easily create new instruments, HUDs and even GUI dialogs and custom GUI widgets, without having to write C++ code and without having to rebuild FlightGear.

How to make text on Canvas?

Postby SP-NTX » Sat Apr 03, 2021 6:38 pm

I'm a new developer, I really want to do something to help. Recently I even started doing BAe146, I had a nice 3D model but accidentally deleted it. I went back to my previous idea of adding Canvas to my 734.
At first I wanted to start by doing something like "Hello World" on the display. Something is not working for me and nothing is displayed. When I click Execute on the nasal console nothing happens except that the object I selected turns black, I know this is normal, but no text is displayed. I used the tutorial on fgwiki.
Freedom can be frightening if you've never felt it
User avatar
SP-NTX
 
Posts: 212
Joined: Wed Mar 18, 2020 12:14 pm
Location: Western Poland
Callsign: SP-NTX
Version: 2020.4.0
OS: Windows 11

Re: How to make text on Canvas?

Postby Hooray » Sat Apr 03, 2021 6:58 pm

Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: How to make text on Canvas?

Postby SP-NTX » Sat Apr 03, 2021 7:06 pm

Ok, so it should works?

Code: Select all
var my_canvas = canvas.new({
  "name": "PFD-Test",   # The name is optional but allow for easier identification
  "size": [1024, 1024], # Size of the underlying texture (should be a power of 2, required) [Resolution]
  "view": [1024, 893],  # Virtual resolution (Defines the coordinate system of the canvas [Dimensions]
                        # which will be stretched the size of the texture, required)
  "mipmapping": 1       # Enable mipmapping (optional)
});
# Place it on all objects called PFD-Screen
my_canvas.addPlacement({"node": "EFBscreen"});
var group = root.createGroup();
var myText = root.createChild("text")
      .setText("Hello world!")
      .setFontSize(20, 0.9)          # font size (in texels) and font aspect ratio
      .setColor(1,0,0,1)             # red, fully opaque
      .setAlignment("center-center") # how the text is aligned to where you place it
      .setTranslation(160, 80);     # where to place the text
Last edited by Johan G on Wed Apr 07, 2021 9:23 am, edited 1 time in total.
Reason: Added [code] tags. They can be added manually or with the [^_ ] button above the text editing box.
Freedom can be frightening if you've never felt it
User avatar
SP-NTX
 
Posts: 212
Joined: Wed Mar 18, 2020 12:14 pm
Location: Western Poland
Callsign: SP-NTX
Version: 2020.4.0
OS: Windows 11

Re: How to make text on Canvas?

Postby Hooray » Sat Apr 03, 2021 7:21 pm

Please read the article carefully, especially the beginning: you need to prepend a stub to the code: https://wiki.flightgear.org/Canvas_Snip ... GUI_Window

Do not even try to get this working on an aircraft, until you have this working as a dialog.

And please consider embedding your snippets in code tags, here on the forum.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: How to make text on Canvas?

Postby benih » Sun Apr 04, 2021 11:26 am

A maybe halfway simple real world sample could be the davtron clock:
https://github.com/HHS81/c182s/blob/master/Models/Instruments/Davtron803/davtron803.nas
Last edited by benih on Wed Mar 13, 2024 4:18 pm, edited 1 time in total.
User avatar
benih
 
Posts: 1689
Joined: Tue Aug 15, 2017 10:34 am
Callsign: D-EBHX
Version: next
OS: Debian Linux 64bit

Re: How to make text on Canvas?

Postby Hooray » Sun Apr 04, 2021 12:33 pm

Personally, I am not convinced that people without any prior Nasal/Canvas experience (or coding in general) will benefit too much from looking at existing code.
Even some of our most senior core devs have acknowledged that there's a certain barrier to entry when it comes to the Canvas, and that rapid prototyping really is key to learn this stuff quickly. And that almost certainly means that newcomers should not even look at aircraft-specific Canvas stuff without first using the Nasal console and Canvas GUI dialogs for starters. Changing things subsequently to use an aircraft placement is typically just a one-liner, and loading code that is tested via the Nasal console at the -set.xml level is also well-understood.

So, I'd really suggest to stay with the Nasal console for now and then take it from there one by one.
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: How to make text on Canvas?

Postby SP-NTX » Sun Apr 04, 2021 1:14 pm

Ok, I didn't sleep at night, but I already know how to add SVG images to canvas and my EFB prototype is partially working, I just need to learn how to make a touchscreen and I can further develop the tablet to 734
Freedom can be frightening if you've never felt it
User avatar
SP-NTX
 
Posts: 212
Joined: Wed Mar 18, 2020 12:14 pm
Location: Western Poland
Callsign: SP-NTX
Version: 2020.4.0
OS: Windows 11

Re: How to make text on Canvas?

Postby Hooray » Sun Apr 04, 2021 1:20 pm

You will want to ensure that you can run any of the examples from the "Canvas Snippets" article.

The basic building blocks for a "touchscreen"-like device are the relevant Canvas elements (text, image, path) in conjunction with so called "event handlers".
These are basically callbacks that you can register to be invoked by the Canvas GUI manager whenever a certain type of event takes place.

Under the hood, this basically works by computing a bounding box for the corresponding element (say your hello world string), that bounding box is then used to register a "mouse click" or "mouse over" (hover) event - and when the C++ code registers that event, it invokes your callback/function to handle/process that event: https://wiki.flightgear.org/Canvas_Event_Handling


But again, it makes zero sense to look at these topics until you understand how to create/register and populate/display a Canvas as a GUI dialog
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU

Re: How to make text on Canvas?

Postby benih » Sun Apr 04, 2021 7:46 pm

Hooray: Agreed, that was the approach I took and that was very helpful.
I wanted to bring up the example for later reference, and because I think my code is extensively enough commented so others can learn how to put the basic blocks together once those are learned and understood.
In fact, that code also was developedfirst mainly in a windowed GUI element, before I have put it on the actual intrument surface.

But sure, it makes no sense to dive into that without prior knowledge of nasal or the canvas API.
User avatar
benih
 
Posts: 1689
Joined: Tue Aug 15, 2017 10:34 am
Callsign: D-EBHX
Version: next
OS: Debian Linux 64bit

Re: How to make text on Canvas?

Postby Hooray » Sun Apr 04, 2021 9:09 pm

You can obviously take your code and use it as an example that's built by following a corresponding wiki tutorial, i.e. incrementally adding to it step by step, including a few screen shots showing the Nasal console / Canvas dialogs. I am sure that others would appreciate this sort of tutorial - tutorials tend to be much better if they're written by people who don't already know all the nitty gritty details after all :wink:
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12707
Joined: Tue Mar 25, 2008 9:40 am
Pronouns: THOU


Return to Canvas

Who is online

Users browsing this forum: No registered users and 9 guests