Forge Viewer is a browser based technology, i.e. structure of BS. Although Forge Viewer supports offline mode, you will still need to setup a server-client environment. It is not a problem to run a localhost on the PC, however it would not much be practicable if you configure a localhost on the PC of your customers.
Recently, I got to know Electron. As it says: Electron provides the way to build cross platform desktop apps with JavaScript, HTML, and CSS. By this mean, your project will be looked like a standalone executable project, similar to typical desktop application. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux. So if you worked with a Node.js project, it will be more easier to migrate it to an Election stuff.
Quite a lot of tutorials are available with Electron community. In this blog, I will simply describe how to build a skeleton with a demo of Forge Viewer in offline mode.
1. Clone the minimal Electron app, install the npm modules and test the app.
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
The app will look like the snapshot below. We can even debug, check network, element etc. These are similar to the practices in Chrome.
For more details of the skeleton, please refer to http://electron.atom.io/docs/tutorial/quick-start.
2. On Extract tool of Forge Viewer, upload your model file and follow those steps to get the offline package. Unzip the package
3. Create a new folder in the root of Electron project (say ‘Forge’), copy the contents of the package in #2 to this folder.
4. Edit main.js of Electron project to load the index.html in Forge folder.
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './Forge/index.html'),
protocol: 'file:',
slashes: true
}))
5. npm start to run the application. a failure would probably occur that indicates jQuery is not defined. This is because of this code:
if ( typeof module === "object" && typeof module.exports === "object" ) {
// set jQuery in `module`
} else {
// set jQuery in `window`
}
The jQuery code "sees" that its running in a CommonJS environment and ignores window. With the workaround, add two lines in ./Forge/index.html:
now, you can see the project is running well. To make it fits well with the window, I adjusted height of div of viewer to 550px. In addition, the application icon can be modified by editing the line in main.js.
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600,icon: __dirname + './Forge/Tools.ico'})
6. The steps above are for debugging mode. To make a release version, install the electron-packager. in the terminal, type:
npm install electron-packager -g
next, follow the format below to package:
electron-packager < sourcedir > < appname > --platform=< platform > --arch=< arch > [optional flags...]
e.g. on my Windows 10 OS, electron-packager will produce Windows version by default.
electron-packager “C:\temp\electron-quick-start” MyForgeApp
after the packing, a new folder will be generated. There is an executable application in the folder. Now, you can distribute the package as a typcical desktop application to your customers.
The full source of my demo is available at:
https://github.com/xiaodongliang/Forge-Viewer-Electron-PC
From what I googled, it is a bit pity Electron has not well supported the version for mobile. I am looking for other approaches such as Cordovar. If you know any ways, I'd love to have your sharing. Thank you.
Update: I have figured out one way to produce app of iOS by Cordova :) This is the other blog which tells more:
Subscribe
Comments