Through the Interface

A minor makeover – and a lot of core work – for Dasher

Over the last week I’ve been heads-down on core Dasher work, but with very little visible result. Here’s why. Early last week I received an email telling me that it was time to dig into Dasher’s use of 3rd party components and make sure there weren’t any security issues. (This isn’t something unusual – all our products go through this, and many of our research projects, too.) As anyone working on web development projects will know, it’s important to go through from time to time to reduce the technical debt that accumulates due to the use of old libraries... Read more →

Using A-Frame to build a VR experience for Refinery

This week I decided to take the WebVR/WebXR extension work I did for Van Wijnen to the next level: mainly to integrate metric information in some way into the scene, whether as 3D text objects or via some kind of Heads-Up Display (HUD). But before embarking on this I decided to take another look at the implementation of the HTML client. When I first wrote the HTML page that consumes geometry data from the Refinery server, I decided to use raw JavaScript and WebVR/WebXR calls with three.js. I’d thought briefly about using A-Frame – an awesome framework started by... Read more →

Migrating Dasher 360 to use the Forge viewer v4.2 - Part 2

Last week I mentioned the effort to update Dasher 360 to use v4.2 of the Forge viewer (the most recent version, at the time of writing, and a fairly big jump from our previously-used version, v3.2.1). Here’s how Dasher 360 is now looking after these various changes: In this post I’m going to give more details of what specifically was involved in refreshing Dasher 360 to the latest Forge viewer, in the hope it’ll help people make decisions around their own use of the viewer and hopw/when they migrate their applications. Background As we’ve developed Dasher 360, we’ve done... Read more →

Displaying a round-the-world itinerary with Google Maps – Part 6

Here’s a quick recap of the series, so far: Creating a basic map for our round-the-world itinerary Adding a photo for each placemark Adding labels for the approximate timing of the journey Overlaying the actual path visited from a tracking device Downloading the actual path in multiple queries A few weeks ago – while we were in Tahiti, but again in New Zealand – I noticed that the “visited” path from the Garmin site wasn’t being integrated properly into the Google Map integrated into our family blog. After a little bit of analysis, I realised that the amount of... Read more →

Displaying a round-the-world itinerary using Google Maps – Part 5

I really thought this series was finished, but there you go. In the first part we saw a basic, embedded map and then added information windows and labels. In the most recent part we added overlay data being recorded by a tracking device to show our progress in real-time. Here’s the thing: a few days ago I realised the tracking information wasn’t being displayed. Initially I thought it might be due to limited connectivity or bandwidth – I was in Peru, at the time – but I then realised it was probably due to the volume of points being... Read more →

Displaying a round-the-world itinerary using Google Maps – Part 4

In the first parts of this series we saw a basic, embedded map and then added information windows and labels. In this post we’re going to overlay data being recorded by a tracking device to show our progress in real-time. This was made pretty easy thanks to Garmin’s MapShare service: our Iridium-connected inReach Explorer+ device publishes tracking information automagically to our MapShare page, which has a KML feed that can be embedded as an overlay on Google Maps. The additional code, below, is trivial. It’s possible to zoom into the location of the latest data on map load, but... Read more →

Displaying a round-the-world itinerary using Google Maps – Part 3

After creating a basic map for our round-the-world itinerary and then adding photos when placemarkers are clicked, today we’re going to add some handy labels to the map to show rough dates for when we’ll be arriving in a particular location. This actually proved trickier than expected: there’s an old library called MapLabel that works well with the Google Maps API, but it doesn’t load asynchronously in a straightforward way. So I had to jump through some hoops to load it only when the main Google Maps API is available, avoiding some irritating load errors. I used some code... Read more →

Displaying a round-the-world itinerary using Google Maps – Part 2

In the last post we looked at a basic implementation of a round-the-world itinerary in Google Maps. In today’s post we’re going to add the ability to see the first photo associated with a location when you click on it. The Google Maps API makes it fairly easy to get the photos associated with a particular place, but it helps to identify that place uniquely: while you can search for a place based on its name, it’s more efficient and reliable to get its unique “place ID” and use that instead. I used this handy PlaceD Finder tool to... Read more →

Displaying a round-the-world itinerary using Google Maps – Part 1

Over the next few posts I’m going to talk about the process I went through to integrate the itinerary for our imminent round-the-world trip into the awesome web-site my wife has set up. The initial approach I took was to use Google My Maps: this is a really cool tool for creating a custom map without any coding needed (yes, I know – that doesn’t sound like much fun :-). For instance, you can set up your placemarks and link them with a route, and when individual places are clicked it shows a nice sliding info panel. I started... Read more →

Handling both mouse and touch events in Forge viewer applications

To follow up on the last post – where we talked about adding a custom tool to provide better support for pinch gestures – today we’re going to talk about some other possibilities for supporting touch in the Forge viewer. Once again we’re using Autodesk.Viewing.ToolController & ToolInterface. The Forge viewer uses Hammer.js internally to support touch, so that’s one good place to look for clues on how things work. (Groan – I’ve just realised why it’s called “Hammer”… “you CAN touch this!” :-) I was looking into how to support both “touch-capable” (i.e. they also have mouse & keyboard... Read more →

March update of Dasher 360

This week we rolled out a significant update to Dasher 360. Those of you who follow this blog regularly will already have seen the implementation details for a number of the features in this release, from point cloud-based sensor dots to “Kiosk Mode”. I’ve linked to those posts wherever possible. We’ll take a look at the changes in terms of Dasher 360’s Forge viewer extensions, which mostly correspond to items in the Dasher 360 toolbar to the left of the page: Here are the major changes since the December release. If you want to skip the details, just open... Read more →

Implementing a demo mode inside the Forge viewer – Part 3

In this final (for now, anyway) part of the series, we’re going to look at the approach taken in the Dasher 360 kiosk mode to loop the demo indefinitely (although with variations, as mentioned last time) until someone interrupts by moving the mouse. The first piece of this is to track the mouse. We do this by attaching an event handler to ‘mousemove’. Here’s the TypeScript code we’re using: onMouseMove = (event: any): void => { this._canvasX = event.canvasX || event.clientX; this._canvasY = event.canvasY || event.clientY; if (this._startX !== null && this._startY !== null && this._inKioskMode && (Math.abs(this._canvasX -... Read more →

Implementing a demo mode inside the Forge viewer – Part 2

Now that we’ve seen how to move a fake cursor across the screen, let’s talk about how best to use this technique to implement a demo mode for your Forge viewer-based application. Something I mentioned last time was that – for our purposes – this code needs to be fairly adaptable, whether for different views, models or screen configurations. It also needs to be easy for us to modify or extend. Inside Dasher 360 we’ve implemented a number of different extensions. Many of these have their own UI, typically launched by a button. One of the first things I... Read more →

Implementing a demo mode inside the Forge viewer – Part 1

A request came up in a recent meeting talking about future features for Dasher 360. We want to be able to leave Dasher 360 running in “kiosk mode”, whereby if left unattended for some time it starts to run through some canned activities, showing off some of the tool’s capabilities. The mode should be interruptable: when the mouse moves the mode should stop, allowing the user to continue exploring on their own. This sounded like a really fun problem to tackle, so I started on it right away. My first avenue of research was around tools that already exist... Read more →

Hiding unwanted toolbar items in the Forge viewer

Here’s a quick one to wrap up the week. Some time ago we decided that Dasher 360 didn’t need to provide the option for users to do an unconstrained orbit: the default mode of turntable orbit would be perfectly adequate, especially as we deal mainly with building models. So it was that I created a simple extension to hide that particular toolbar button. It worked well enough, but after a while I saw the icon creep back into the UI. It turns out that the application resize event – which is called for lots of different reasons – was... Read more →

Preventing selection of room geometry in the Forge viewer

Some of you may remember this post, which talks about the ability to export to Navisworks from Revit to bring room information into the Forge viewer. One of the side effects of using this technique is that there’s a bunch of semi-transparent room boundary geometry in the resultant model, which can make navigation a little tricky. For instance, here’s what happens when I try to select the wall at the end of a corridor (you can’t see the cursor, but you should get the idea – the invisible room geometry gets selected rather than the wall). To help improve... Read more →

Scaling HTML canvases for HiDPI screens

I’ve been mocking up some UI additions for Dasher 360, today. A big chunk of my time was spent working out how to make flyouts work for vertical toolbars (something I’ll address in a future post, if there’s interest), but I’ve just been fighting another problem that’s probably not really an issue for anyone using standard DPI (and non-“retina”) screens. I’ve been drawing text to a standard HTML canvas and it’s been really ugly. After some minutes of searching the web, I found out it was probably due to my MacBook Pro’s retina display. Here’s the code I integrated... Read more →

Overlaying a logo on the Forge viewer

Today I was asked to add the ability to place a custom logo onto an instance of the Forge viewer (in my case for Dasher 360, of course). It seemed like an interesting one to share, as I’m sure others have the same requirement. There are probably lots of ways to solve this – for instance by adding the image with its own camera as an overlay inside the Forge viewer’s 3D scene – but I decided to stick to something simple and have the browser overlay the image. There are a few changes needed for this to work.... Read more →

WebVR in Chrome and Forge

There’s a lot happening in the world of WebVR at the moment. Today’s big news is that Chrome 56 has now been released for Android, bringing WebVR support to Daydream phones (other devices to follow). This is an important landmark on the journey towards ubiquitous WebVR-capable devices. At some point we’ll be getting a desktop version of Chrome that has WebVR, too: for now I’m still testing with Chromium, as suggested by the WebVR download instructions. The other noteworthy event – at least from Autodesk’s perspective – is the release of v2.13 of the Forge viewer. This brings some... Read more →

Enabling Visual Studio Code’s integrated web debugging

Yesterday I finally took the time to work on one of those tasks that had previously never quite bubbled up to the top of my priority list. Since I’ve been working on Dasher 360 I’ve put up with using the developer tools built into Chrome for debugging. While these are pretty good – especially with source-map support, allowing us to debug the source TypeScript code – which is the main reason I haven’t taken the time to do otherwise, they do have their limitations: just for instance, you very often start to edit code in the debugger before realising... Read more →