Learning Lab: Your first Forge Dashboard

JAIME ROSALES D.: So I guess we still have a couple of more minutes. So get comfortable. We can actually save some time. Basically, this workshop is going to be a build up of some of the previous ones that we have been doing during the day. How many of you guys, it's your first lab today, this one? Beautiful.

All right. So actually, let's save some time. First off, I'm going to need you to create an Autodesk account. So if you have an Autodesk account, you can skip that step and head over to forge.autodesk.com. On the top right corner there is a sign in button there in order to sign in into the Forge environment. And from there, we're going to create an app. So there is a free trial that gets setup for this. So don't worry. We won't ask for a credit card, or anything like that.

So you will get a set of API keys that you're going to be using later on with our workshop. So let me show you a little video how that looks. So basically, once you create and log into it, you're going to create an app by selecting all the different services, give your app a name, a description, and then a callback URL.

The tutorial itself, it can use either accessing from buckets, so containers where our files are going to be hosted. And if you already have experience with this, and you want to interact with your models that are in BIM 360 Docs or Fusion Team, for example, just make sure that the callback URL that you setup kind of matches whatever you're running on it. So if you don't know what that means, stay with the other one. OK?

So the callback, we can do something similar to that one. Or just do a dummy one for now. We will not be using it. OK?

So while we wait, the guys and the girls that don't have that, please, go ahead and set it up. And then we'll get started shortly. All right?

Come over, Xiaodong. Xiao? Xiaodong.

[LAUGHING]

You can raise hands to just get an idea of who already went through this process, so that way we kind of know where we're at. A little bit higher. We're good. All right. So that way I can see everybody.

So ooh, what's that error that I have there? So I will do maybe one more minute, and then we will get started. OK? So it's a tight schedule. We have one hour. I want to get you running with some dashboards at the end. OK?

And any other questions, please, if you have problems, just raise your hand. My team will give help. Fernando, can you help me over there? And then give me a second. I will send you him right now in a second.

What's your question? Maybe I can help you out.

AUDIENCE: [INAUDIBLE] [? get started ?] [INAUDIBLE]?

JAIME ROSALES D.: Oh, OK. So I can tell you. Wait one second. Do you need that one?

AUDIENCE: The callback URL [? doesn't matter. ?]

JAIME ROSALES D.: The callback URL doesn't matter. You can do just some dummy ones. So do HTTP, forward slash, forward slash, localhost 3,000, something like that.

But like I said, if you already know about this stuff, and you're doing stuff with BIM 360 Docs or Fusion Team, that means that you already have a previous setup app. So you can use that one as well. OK?

AUDIENCE: [INAUDIBLE] you said [INAUDIBLE] localhost [INAUDIBLE]?

JAIME ROSALES D.: Yeah. So do HTTP colon, forward slash, forward slash, and then localhost colon 3,000. That's it.

AUDIENCE: Ah. OK.

JAIME ROSALES D.: Yeah. It's just a dummy URL. Because you're not going to be using any reference of a callback at the moment. OK?

All right. So it's almost time to get started, because [INAUDIBLE] we're going to be running out of time. So let me quick start.

So welcome. Thanks for joining us in Forge DevCon, as well as AU 2019. So my name is Jaime Rosales. I'm a Forge developer advocate. And with me also I have Xiaodong Liang. He's over there. Xiaodong, say hi. Just raise your hand. There we go.

So Xiaodong is also a Forge developer advocate within my team. Today I'm going to show you how to extend the tutorial material that we have in order to do visualization of your CAD models with some dashboard functionality. So we will use the meta data of your CAD models in order to generate a couple of graphs, bar chart, pie chart, and then do some interaction with those charts with the viewer. All right?

So let me skip this a bit. Just a quick thing about me, I guess. Been with Autodesk eight years. Acquired by Autodesk with BIM 360 Glue product. And I work on Forge now. Xiaodong, more time with me. And awesome guy too to get to know.

All right. So before we get started, this is what we're going to get started with, an application that looks like this. So it is basically the View model's application. And what it's doing is that it allows you to create a container, which, in this case, will be your bucket. Allows you to upload a CAD file into it to later on request a translation, and let you visualize it in the viewer.

So we're going to start this as a base. And I will tell you right now from where you can get it. OK? So let me skip to one more.

All right. So as a starting point, we're going to head over to our Chrome browser, and go to learnforge.autodesk.io. Once we are there, we see on the top right image there is a couple of arrows that point out to view your models or view BIM 360. The ones that don't have BIM 360 are going to go to the View Your Models. OK?

And then from View Your Models, we're going to select you see the second image that is below that one. So it has a node.js one and a .NET framework one. Yeah. So we're not going to interact with the server side language in this one. It's everything going to be from the client side. So basically, just interaction with the JavaScript side.

So you select one of those two. It can be the .NET core one, or the node.js one. I will be showing you everything from the node.js side. If you prefer to use the .NET one, go ahead. My lab assistants can help you out if anything goes wrong. But hopefully, this will go smooth.

And then what we're going to do is that when we click there, it will send us over to a GitHub repository where we can select a different branch. And actually, let me show you that. I think it might be a little bit easier. I sound like Darth Vader.

OK. So we're going to go to View Your Models. And I think I'm going to make this a little bit bigger. And then from here we're going to skip this, because this is what was done on the first lab today. But we're going to head over directly to the download of the project source.

So we go into node.js. For example, you see that the node.js branch, it's selected. If you're familiar with Git, you can do a Git clone of this repo with the specific branch of node.js. If not, you can just do a download ZIP. OK?

So once you download that ZIP-- it's going to download on your computer-- we can extract this ZIP. It will basically look like this. So we will have access to the route and to the client side part of it within the public. And what we are going to do is that this folder, we're going to open it in Visual Studio Code.

So I already have that set up. So this is where we're going to head over. OK? OK. So let me give you two minutes to be at this stage. Whenever you are here, please, just do a quick raise of hand. And that way I know where we're at. All right. Cool. Some of you guys are already done. So I will wait two minutes for you here. And then we will keep going with the setup of the NPMs, and also the configuration for our environment and our development.

AUDIENCE: I could install the package [INAUDIBLE].

JAIME ROSALES D.: Yeah. So if you're already here, the package JSON basically specifies which dependencies we're going to be running. So from the terminal, you can do an NPM install. That will give you all the modules that are going to be needed for it. And now you're going to have a new folder that is called Node Modules.

AUDIENCE: I missed a step. What do you do with the ZIP file once you've extracted it?

JAIME ROSALES D.: So the ZIP file, you extract it. Right? And then you open Visual Studio Code. So in your desktop there is a Visual Studio Code. And you're going to do Open Folder, and select the folder that you extracted.

So in that way, it loads the project with this look on the right side where you have-- you're going to be missing a couple ones, because I already set up this, but you're going to have public, routes, Git, maybe the config.js, the license, the package JSONs, the readme, and the start.js. And then from there, we're going to start adding the other ones.

OK. So now, in Visual Studio Code when we have the structure of the files that that project contains, we have a file that's called Package JSON. In the package JSON, it references which dependencies from node we will be using. Right?

So in the top part of our menus, we have one for terminal. And we're going to do a new terminal. And then a terminal will show up here inside of our Learn Forge View Models project.

From there we're going to run the command NPM install. [? Once ?] it's run, it will install all the dependencies that it needs to do. And now you're going to have a new folder that will show up in this side saying, no modules.

And let me know if the dark screen is not good. I can switch it to white.

AUDIENCE: [INAUDIBLE]

JAIME ROSALES D.: What? Oh. So I will switch it to white then. Is that better?

AUDIENCE: Yes.

JAIME ROSALES D.: All right. Cool. Sorry about that. I'm a big fan of the dark screen stuff.

OK. So now, once you install the [INAUDIBLE] modules, we need to include the configuration setup. Right? So a configuration setup from Visual Studio Code will allow us to debug this application later on. So in the tab of debug, we're going to open a configuration, or add a configuration. This will give you an option to select node.js as a configuration. And then from there, we'll get something that will look like a launch JSON like this, where we will input our Forge client ID in secret, and so on.

And don't worry about this. I will [? kill this ?] app after the tutorial. So that way you guys can use my keys. In order to get a structure of this launch JSON, you can obtain one from the tutorial that it's located here. It is under View Your Models, Create Server. You select node.js. And then scroll down to look for Launch JSON. So you can copy this to clipboard, and then include it in your Launch JSON.

In here we're going to substitute the values of your client ID and your client [? secret ?] in the Launch JSON. OK?

AUDIENCE: Sorry. Where is the [INAUDIBLE]?

JAIME ROSALES D.: In VS Code or where?

AUDIENCE: No. In [INAUDIBLE].

JAIME ROSALES D.: The project? Did you have the project already? Or not yet?

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: Let me see?

AUDIENCE: Yes. Yes. [INAUDIBLE].

JAIME ROSALES D.: Yeah. But no. You're in-- OK. Let me see.

AUDIENCE: Yeah. I know. That's the other-- sorry.

JAIME ROSALES D.: No. It's OK. But you already have something similar.

AUDIENCE: No. But I was working-- let me see.

JAIME ROSALES D.: It's this one, the one [? that we need. ?] And then from here you go into node.js.

AUDIENCE: Yeah. But I did that. I don't know what happened.

JAIME ROSALES D.: I might need to [INAUDIBLE] I think it's this one. Right?

AUDIENCE: Yes. But I already downloaded.

JAIME ROSALES D.: 345. Yeah. This is the one. Did it download? Oh, no.

AUDIENCE: I already did that. I don't know-- [INAUDIBLE] was it inside Downloads [INAUDIBLE].

JAIME ROSALES D.: Yeah. But it's not--

AUDIENCE: The one I opened.

JAIME ROSALES D.: So let's do this. Or is it still doing it? Yeah. The thing is there's a mix up of both of them here.

AUDIENCE: I don't know why.

JAIME ROSALES D.: Yeah. So get a new source, and then just start it.

OK. How many of you guys have the Launch JSON already setup? Can you raise your hand? A little bit higher, please. There we go. Thank you.

All right. So if we have this already setup with the keys, we installed no modules, now we can start debugging. And this will launch in the port 3000. So in our browser, we can head out to localhost 3000.

I already have something here because it's using my keys, but you should be seeing an application like this running that allows you to create a bucket. And then from there, we are going to be able to upload files to it. So if this is what you're seeing, go ahead and create a new bucket. The bucket names have to be all of them in lowercase.

Try to think of a unique name. Because test, it's something [INAUDIBLE] [? user ?] [? brought, ?] [? that ?] it will still work, because we have something in the back of this tutorial to add an invisible hash to the name. But just do something else for you to kind of have a better record of it.

So once you have that bucket, let me know, and raise a hand. OK? All right. Awesome.

OK. So how many of you guys have the bucket running already? Awesome. Almost 70% of the room. I will give you another two minutes. And that way we get the other ones.

And if you need help, just raise the hand. And that way, we know. Go there and I'll go with him.

Yeah. It's because [INAUDIBLE] like node.js. OK.

AUDIENCE: Ah. OK.

JAIME ROSALES D.: So it has to be here in the Launch JSON. Yeah. And now we do Start Debugging, Debugger Attach.

AUDIENCE: If I want to do this [INAUDIBLE] is it the same?

JAIME ROSALES D.: Yeah. But I don't want to focus too much on the server side. It's more on the client side today. So create a bucket. Give it some sort of name there.

OK. So can I get a raise of hands of how many of you guys were able to get a bucket? Just please, a little bit higher. That way I can see better.

All right. So can you guys help me out with the other ones that are still not able to? Who else is having problems with this? Can you raise your hands? All right. So it's one, two, three, four, this full line there.

All right. I'll give another two minutes. I'll try to get that. You're having problems. Right? All right. What's up?

AUDIENCE: [INAUDIBLE]

JAIME ROSALES D.: You're doing the [? Hobbs ?] model. Right?

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: Is that the intended one? Do you have a BIM 360 setup and everything?

AUDIENCE: Which model?

JAIME ROSALES D.: This is for accessing 360 models. Do you have BIM 360 models and connect the API keys to it?

AUDIENCE: No.

JAIME ROSALES D.: So I will say, go to--

AUDIENCE: I was using-- [INAUDIBLE] we setup one earlier today.

JAIME ROSALES D.: And did it work?

AUDIENCE: --a sample BIM 360 model.

JAIME ROSALES D.: Oh, OK. Yeah. If that worked, that should be fine then.

AUDIENCE: Yeah. So it was under a different folder. I keep going back and forth.

JAIME ROSALES D.: It's OK. Is it node.js? Can you click Control-A? Yeah. Save. And then add your API keys here. [INAUDIBLE] there.

And yeah. I want to see your app, the first one. So we might need to modify this one if you're going to be doing stuff with BIM 360. Copy that.

OK. Get those API keys in there. [INAUDIBLE] try to debug. Who else have problems here? I was told there is some. Oh, Peter. Peter, there is one there. And then there are some other ones here.

All right. You need to input your API keys in here in order to run.

AUDIENCE: OK.

JAIME ROSALES D.: OK? Because right now, it's not going to run.

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: This one. So copy there. Yeah. Yeah. You can just click on it. [INAUDIBLE] copies. Yeah. It's copied.

Yeah. But we need to save it or that's not going to save. I think you did something to package JSON. [? It won't ?] start. OK. [INAUDIBLE]. Did you do NPM Install? You did.

Do localhost 3000. Localhost. Local. L-O-C-A-L. Host, caller, 3000. Yeah. There you go.

So create a bucket. New bucket. Then type a name, lowercase, and then--

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: Was it too big, the file?

AUDIENCE: [INAUDIBLE]

JAIME ROSALES D.: Oh, well, we'll look into it.

All right. So let me continue. All right. So we're not going to go to this. But in case you get lost towards the end, we can head over to this location. I will give you the link after. But I'm pretty sure that we're going to be OK with the other stuff. So let me move along.

So for these dashboards we're going to use a library. It's called Chart.js. The reason that I picked Chart.js is because I wanted to keep it simple. I wanted to get through the pain of actually not having to interact with a lot of stuff, like Power BI, or D3.js in order to generate some report look. In Chart.js it's a third party library, pretty simple to use. And this is what I got the tutorial kind of based on.

So what we are going to be doing is an adjustment of the layout of the tutorial that you guys have running at the moment in order to include the visualization of charts [INAUDIBLE] made of data from the models that you guys are going to upload. OK?

So let's go through this step. OK. So we're going to head over, again, to Learnforge.autodesk.io. And then at the bottom, like towards the bottom, there is a section that is called Dashboard. OK?

This is going to be the outcome of the workshop today. Basically, we are generating two graphical interfaces in order to interact with the viewer directly from the client side application. OK? So it's quite simple, a couple of steps. In order to have success with this thing we need to follow very carefully what we're including into the code. And I can walk you through and kind of do it at the same time with you guys.

So we're going to start by adjusting the layout. And then basically, the first step is we're going to head over back to the tutorial code. And we're going to start by adding a new folder under the JS folder in the public side. OK?

So we're going to add a dashboard folder. And inside of that dashboard folder, we're going to add a dashboard.js file with the following code. So what we can do is copy the clipboard, this one. We're going to get back to here. We can stop this app from running for now. Actually, we don't need to, but we can stop it. Then we're going to head over to Public, JS. Select JS.

We're going to open a new folder. We're going to name this Dashboard. OK? From Dashboard, we're going to have a new file that is going to call Dashboard.js. And here we're going to paste the code that we just copied. Paste it. Save it. And we have now the Dashboard.js file saved.

So basically, this is just a function that when the document gets loaded into the browser, we start adding the bar and the pie chart when the geometry of the model itself is fully finished. Because there is no way to generate data inputs if we don't have access to that data that is coming from the model. Right?

Then we're going to get back to here. And now, we're going to keep going. And we need to add a reference in our index.html file to this new file that we just added.

So again, we're going to copy to clipboard, head back to our code. We're going to go into our index.html file. We have a section where we have certain script references. We're going to enter a new one, paste this one. And now we have one for our dashboard files. OK?

So now, we're including the one that we just added, which is in the JS folder, Dashboard folder, dashboard.js file. OK? Then we will do some adjusting to the CSS file in order to give our application a little bit of transition and styling whenever this thing gets loaded. OK?

So now, again, we already have the main CSS. We just need to add a couple more classes to it. So we're going to copy to clipboard again, go back to our code, look for the CSS file, which is under Public, CSS, main.css file.

We already have some CSS here. Do not get rid of it. Head over below the Forge Viewer reference. We're going to paste the new one, which basically will setup an adjustment for the Dashboard panel where our dashboards are going to live. A little animation on the transition. So it actually doesn't look very choppy. And it gives us a nice looking resizing. And then a general one for the Dashboard panel itself. OK?

So we save that one again. So that's the part of the adjustment of the dashboard. If we load that right now, it's still not going to do anything, because we don't have any charts that have been added to it. So we're going to move to step number two on the adjustment, follow both step number three, and basically, we'll be done.

So let me do a quick check. How many of you guys are up to the part, finishing the main CSS? Raise hands, a little bit higher. OK. So can you guys help me out with the ones that are having problems? And now, the ones having problems, just raise the hand again, please.

If you have problems, just raise the hand. And that way we will send some people. Awesome. All right.

So for the ones that are following along and they're up to this point, the other ones will catch up. We're going to move to panel basics. So now, we're going to prepare this data in order for our viewer, and also the dashboard to represent it in the graphical way.

I'm not going to go through this part right now, because it's basically explaining how do we use the organization of data within the viewer. This is something that's available online. And if you guys want to find out a little bit more about it, you can read after.

So now, we're going to do a new class. And this is going to be the DashboardPanel.js. And DashboardPanel.js, basically it's the one that will get the properties from that model in order to structure it for the dashboard to later on display it.

We're going to do the following again. Under the folder JS, Dashboard, we will create DashboardPanel.js. And we will include the following code.

So copy to clipboard. Go back again. On the Dashboard folder, we will add a new file that is called DashboardPanel, with capital P, .js. We paste the code and save it.

And now, if you remember on the previous step, we needed to add a reference also to our index.html. Other than that, the page will not know that this thing exists. So if we scroll down in that same tutorial, we have that reference of the script. So copy again. Go back to the index.html. And in the section that we have for dashboard, we can include that one.

So now, our HTML knows about the existence of dashboard.js, and also DashboardPanel.js. OK? So we're going to save that. And now, we're going to move into adding the charts.

So another check right now. How many of you guys added already the DashboardPanel.js? Please raise your hand. Awesome. I will give you another minute in order to catch up. We still have some time. So I kind of want to go through this first, because if we have problems, we at least have a couple more minutes to help you out, and then also solve some questions. And feel free to continue with the next step. So in that way, we can save some time as well.

All right. So now, in order to add the charts, now we need to do a reference to the third party library that I mentioned previously, which is called charts.js. So we are going to copy again the definition of those chart.js packages, and include them in our index.html, so when the page loads it knows where to look for in order to understand the following functions that we are going to include for the charts.

So we're going to copy the clipboard, go into the index.html. And we can actually go into an area where it says, come on packages, jQuery Bootstrap, JS3. And in this case, we're going to be adding the charts.js one.

We're going to save index.html again. And now, to the final part of it. We're going to add a bar chart panel.js file. So again, under the JS folder, Dashboard folder, we're going to create PalBarChart.js. Copy to clipboard. Go in here.

Again, Public, JS, Dashboard. Click on Dashboard. New one. PanelBarChart.js. Paste the code. Save it.

Same thing for the pie chart one. Same location. Different name. PanelPieChart.js. Copy to clipboard. Dashboard, New File. PanelPieChart.js. Make sure that you're typing Panel with capital P, Pie with capital P, chart with capital P.

Paste again the code. Save it. And then the last step is we just created new JavaScript files. We need to reference them in the HTML file in order for our page to know about it. Other than that, it's not going to know.

Mona, can you help me out with him? Thank you. So we're going to copy to clipboard. Add the two scripts into our index.html file in the same location where we were adding the Dashboard ones. Save this. OK? And then I believe we are ready to run. OK?

So now, we're going to try it, the moment of truth. It's always whenever I'm doing live coding or anything like that, demo gods always do not agree with me. But we'll see how it goes this time.

So now, we're going to add, again, a reload. I will give you a link for you to get files if you don't have any at the moment. But so if we load [INAUDIBLE] sample, you see that the adjustment of the viewer happens whenever this is starting to get loading. And the charts will show up as soon as the geometry of the model gets finalized in order to know with what to populate the dashboard.

I'm using categories on the viewer in order to pass in the values to the dashboards. In this case, I'm using only material, because if we use construction models, and also manufacturing models, something that we can always make sure that it has, its material. OK?

But you guys can extend this use later on in order to, let's say, let's focus on the system type of whatever the category of the model is. So you will get information about the HVAC system and some other stuff in there. So now that we have this, it not only gives you a view of the graphical content, but also, it lets you interact with the viewer by clicking on the dashboards, and so on. OK?

So if we head over, and if you want to get models, you can head over to-- let me actually copy this. Let's see how I can do this better. I think that might work.

So in this repository also, the code that is available, it's the one that we just added manually right now. In there you can find a folder that is called models. There are three models available in there, two Revit ones, and one Fusion one. So you can download them from that location.

And what you're going to do after, it's upload those files to the bucket that you created in your application, request the translation. And once that model is ready for visualization, it will load you the dashboards. OK?

So let's go ahead and do that. And since we still have a bit of time, who needs help? Let's start here, and then I will start moving along.

AUDIENCE: [INAUDIBLE] so I'm able to get it to [INAUDIBLE] the model like we had before and all that, but I can't get the dashboard to show up.

JAIME ROSALES D.: Yeah. So did you edit the reference for the dashboard? OK. So I think you're missing something. Go back to the code, to this. Add charts. To the top.

Keep going. This. You're missing this. So copy the clipboard.

AUDIENCE: Ah.

JAIME ROSALES D.: Because [INAUDIBLE] the HTML doesn't know that we're using a third party library. OK? So you're going to click here. Do a new line. And then paste it there. Save that. And then run it.

Was it running before? It takes a little bit [INAUDIBLE]. Do you have any models already or not yet?

Yeah. It's still not loading.

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: One second. Yeah. [INAUDIBLE].

AUDIENCE: [INAUDIBLE].

Repair the data. I didn't do anything with [INAUDIBLE].

JAIME ROSALES D.: No. This is fine if we skip it.

AUDIENCE: OK. Yep. See that.

JAIME ROSALES D.: Yeah. But did you do this? The dashboard panels and all that?

Did you do the main CS ones. [INAUDIBLE] HTML.

AUDIENCE: You could maybe take that [? off, ?] because that could be [INAUDIBLE].

JAIME ROSALES D.: Yeah. It looks like it's-- Charts. [INAUDIBLE]. Yeah, but this is not [INAUDIBLE]. And save.

AUDIENCE: Those two lines that you just deleted, were they [INAUDIBLE].

JAIME ROSALES D.: Yeah. Yeah. They need to be up there. Right now it doesn't work.

AUDIENCE: Oh.

JAIME ROSALES D.: Because it goes by order in the document when it's loading.

[INAUDIBLE].

AUDIENCE: How do I get to this view?

JAIME ROSALES D.: It's not adding those. So we're missing some stuff in there. That's the reason why. Dashboard. Yeah. So we're missing one. [? Did ?] you forget another one?

AUDIENCE: DashboardPanel.

JAIME ROSALES D.: Mhm. That should work now.

AUDIENCE: All right. Thank you.

JAIME ROSALES D.: Yeah. Hey.

AUDIENCE: [INAUDIBLE]. But I'm not seeing the pie chart.

JAIME ROSALES D.: We're missing one.

AUDIENCE: Oh.

JAIME ROSALES D.: PanelPieChart. PanelPieChart. You have it.

PanelPieChart? [INAUDIBLE]. Dashboards. Dashboard. [? Host, ?] Index, Main, Transition. I don't think that matters. But Index.

Ah. We're missing the reference to the-- oh, no. You do have the charts. [INAUDIBLE] then it shouldn't matter, to be honest. That should be fine there.

I see some status [? button ?] request on the start.js. [INAUDIBLE]. Come on, [INAUDIBLE]. That should be it.

How are you running this? Did you setup the debugger, or no?

AUDIENCE: Yeah. I used debugger.

JAIME ROSALES D.: But where is it?

AUDIENCE: [INAUDIBLE] here.

JAIME ROSALES D.: Yeah. But it's not. Where? OK.

AUDIENCE: Maybe it just needed to refresh.

JAIME ROSALES D.: It's still not adding all the dashboards, which is weird. Let's clean out cache, I guess.

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: No. It's not. Close [INAUDIBLE]. Close. Close. Close. Close. Close. OK. Pie charts.

[INAUDIBLE]. It should be fine. I don't know why it's not.

AUDIENCE: Don't worry.

JAIME ROSALES D.: No. No. It's OK.

AUDIENCE: I probably misspelled something.

JAIME ROSALES D.: That's what I'm trying to catch. Cause the one that I'm not seeing is-- I see dashboard. Oh, I see what it is.

I know. But you typed it like that. So that should be-- wait. [INAUDIBLE] really look [INAUDIBLE].

AUDIENCE: Yeah.

JAIME ROSALES D.: No. But DashboardPanel is fine. No. No. Never mind.

AUDIENCE: No. It's PanelBarCharts is the same. Right?

JAIME ROSALES D.: No. It's right here.

AUDIENCE: Yeah. But that's the one that's not showing.

JAIME ROSALES D.: Yeah. It is. So it's that one, the one that it's missing. Bar chart.

AUDIENCE: In the index maybe? Maybe I'm missing an [? S ?] or something?

JAIME ROSALES D.: Ah. Yeah. That's the one. So it actually has to be [? chart. ?]

AUDIENCE: Oh. So much better to copy and paste.

JAIME ROSALES D.: Yeah.

[LAUGHING]

OK. So now we should be fine. Is this still running? No.

AUDIENCE: Yeah. It seems to stop [INAUDIBLE].

JAIME ROSALES D.: What the hell? Wait. You're doing debug. Right?

AUDIENCE: Yeah. It just did start debugging.

JAIME ROSALES D.: But now it tells me that I have to select an environment.

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: That's [INAUDIBLE].

AUDIENCE: Maybe I just went back to here.

JAIME ROSALES D.: OK. That is so weird.

AUDIENCE: I don't [? know. ?]

JAIME ROSALES D.: Let's see [? if it ?] loads it.

AUDIENCE: Amazing.

JAIME ROSALES D.: There you go.

AUDIENCE: [? Very ?] [? cool. ?]

JAIME ROSALES D.: Yeah. Yeah. Sure.

You're my last one. All right.

AUDIENCE: [INAUDIBLE].

JAIME ROSALES D.: Oh, no. No. No. No. No. You can skip this one.

AUDIENCE: Oh, OK.

JAIME ROSALES D.: Yeah. Yeah. Yeah.

AUDIENCE: [INAUDIBLE] I'll show you what I got so far.

JAIME ROSALES D.: It's not loading? OK. Let me see.

AUDIENCE: I'm close. I'm close.

JAIME ROSALES D.: Yeah. You're really close. It's probably missing a reference.

AUDIENCE: It said something about my pie chart in the debugger thing, missing a node. Or it might have been the way I copy and pasted.

JAIME ROSALES D.: Probably. But if not, we can-- just to be safe, I guess.

AUDIENCE: Yeah. It's probably--

JAIME ROSALES D.: You have a lot of them.

AUDIENCE: Yeah. I started freelancing on it, and then I realized that wasn't the way to go about it. So I went and started, and did it all right, [? just like ?] [INAUDIBLE].

JAIME ROSALES D.: Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. It's empty. Right?

AUDIENCE: I was proofreading it.

JAIME ROSALES D.: Oh, wait. Wait. Wait. Wait. I know what it is.

AUDIENCE: I'm missing a js reference.

JAIME ROSALES D.: This thing needs to be up there.

AUDIENCE: Oh. [INAUDIBLE]. OK. Because it said right after, [INAUDIBLE] after that.

JAIME ROSALES D.: Yeah. That's probably something that I need to-- come on. It needs to finish the geometry. Oh, material. Ah. That might be the reason why.

Yeah. So if it doesn't have material, it doesn't. So it's working. We need a different model. That's all.

AUDIENCE: OK.

JAIME ROSALES D.: OK?

AUDIENCE: Ooh, man. I'm surprised I got that far. I did this at home, and it worked. You know what I mean? I followed the steps through the--

JAIME ROSALES D.: Get this one.

AUDIENCE: Used my own model and everything. Did I load the wrong one? Or how'd I mess [? that up? ?]

JAIME ROSALES D.: This is an RSD one. So this is an architectural one. That's going to have materials. The RSD doesn't have any materials.

So give it to one or two minutes, and then click on it. That'll work. Yeah.

All right. So we're getting close to the end. Can I get a quick raise of hands of how many of you guys are seeing the dashboard? Raise it a little bit higher.

OK. All right. So I'm going to give you an option to ask questions. So this should be your final result. Like I mentioned before, basically, you get an animation of the resize in order to be able to visualize the different types of materials that are available within.

This video is basically using a different category. It's using system type and order stuff. That's the reason it might look a little bit different. But the idea itself is that one. Right?

So if you got that, I think, good job. Awesome. So any questions that I can take in the last five minutes that I have? Yes.

AUDIENCE: You have all this JavaScript I think in one of those. [INAUDIBLE] C# in the [? parameters. ?] Do you [INAUDIBLE]?

JAIME ROSALES D.: I don't know at the moment. But I guess we will have to start taking a look into it. I usually know that C# itself will be for the server side.

So there is a lot of functionality that we have with Forge that basically uses the server side. But when it comes to client side, which is the web browser itself, JavaScript, it's kind of like the main part of it.

AUDIENCE: It's called Blazer.

JAIME ROSALES D.: Blazer?

AUDIENCE: Yeah. That's C# [INAUDIBLE].

JAIME ROSALES D.: Really? Awesome. That'll be nice. Yeah. So we'll definitely start looking into it. Our C# guy, you have it right behind you. Yeah. So you can tell him. [? Agusto. ?] He's right there.

So we will start looking into it. And then if that's where, I guess, with everything it's starting to go when it comes to C# development and all that stuff, and that's going to benefit some of you guys. Or even if it benefits one of you, we'll take care of it. All right? Any other questions? No?

Wow. I still have two minutes. All right. Well, so if I still have two minutes, I will give you just a quick-- for resources and learning, you guys can get more information about how to get to work with Forge. If you have questions and you need to reach out support, feel free to write us through Stack Overflow. You can use the Autodesk-Forge or Autodesk-Viewer, or ModelDerivative tags. We have an implementation in order to get those questions into our system. So in that way, we can kind of track it from there.

Then at the same time also, we run accelerators around the world. This are the list for the next seven months actually. So if you are interested in working with us for a week, it's free of charge. You only have to cover your travel expenses, and maybe a few beers for us. That's it.

But we will help you out during the week, basically building your prototype, or enhancing any kind of project that you already have. So you can submit a proposal to either of those cities, wherever it's closest to you, or wherever you want to check it out and extend it as a vacation, I guess.

And then also, if you're more interested about learning for Forge, we have the Forge Village on the fifth floor. So you guys are welcome to come and talk to us. And during AU, we will have the Forge Answer Bar. So please feel free to come by.

Let us know. Treat us. I will appreciate if you guys can do the survey about the class. Hopefully I get some positive feedback. If not, it's OK. It's improvement for myself. So that's always good.

And I think that's it. Thank you, guys.

[APPLAUSE]