Origin C HTML Dialog with JavaScript Support

Origin C now supports using HTML to build dialog boxes in Origin without using a resource DLL. This not only remove the need to use Visual Studio to build a resource DLL, but to allow making use of the vast array of utilities available in public domain for web page constructions. In order to access and control the elements in the HTML dialog, JavaScript integration has been added in Origin 2017, which provides methods for Origin C calling JavaScript and JavaScript calling Origin C. In addition, an Origin graph control can overlap the HTML control so that both of them can be placed arbitrarily and well organized in the dialog.

This guide contains a tutorial that shows how to create an HTML page and then how to use Origin C to display the HTML page as a control in the dialog. Additional sections describe in more detail how to create an HTML dialog with a graph control and how does Origin C calling JavaScript work and vice versa.


HTML dialog sample files of the tutorials, including the cpp file, the html file, the related css files and js file, are available for download

Besides the sample files mentioned in following tutorial, additional examples are under the
\HTMLDlgExamples\OC HTML Dialog\Other Examples subfolder. These other examples will cover more details in various areas as their title suggested.

This section covers the following topics:

In Origin, the newHTML X-Function is provided to create a simple HTML dialog easily and quickly. The HTML file and CPP file created by this X-Function are like the templates, you can redesign your HTML dialog based on these two files. Once you go through all tutorials and have the basics about HTML dialog, you can use the newHTML X-Function to construct starter HTML dialog. In Code Builder interface, you can easily select menu Tools:New HTML Dialog... to launch this X-Function.