Although CSPro is not a web-based application, HTML is used in CSPro in a variety of ways:
HTML files or web pages are displayed in an embedded window using a Chromium-based web browser:
In this web browser, it is possible to:
When a CSPro application runs, a
local web server is launched that can serve content stored on the local file system. HTML, JavaScript, CSS, and other files that CSPro uses for its operations are located in a
html directory. On Windows, these files are typically found here:
C:\Program Files (x86)\CSPro 8.0\html\
The
pathname and other path-related functions can return the name of this directory using the
Html argument.
The local web server treats the html directory as the root of the server. Relative paths that are not based off the root are evaluated from the location of the displayed HTML content:
- Question Text: Relative to the data entry application (.ent) or .pen file.
- Reports: Relative to the location of the report (or, when running a .pen file, where it would have existed relative to the data entry application).
- HTML Files (e.g., shown using view): Relative to the location of the file.
For example, these references in question text would refer to files in the application directory and in a relative directory located one level above the application directory:
<img src="image-in-application-directory.jpg" />
<img src="../shared/image-in-relative-directory.jpg" />
If you want to access any of the files in HTML that you write, you should not reference the file using an absolute path (using a file URL) because the web view that displays the HTML may not be able to access local files. Instead, you should use the
Path.getRelativePath function to construct a relative path from the location of your HTML content. For example, if trying to use the PFF icon from a
templated report:
<!-- will not work when displayed in CSPro: -->
<img src="file:///C:/Program Files (x86)/CSPro 8.0/html/images/pff-icon.png" />
<!-- correct format: -->
<img src="~~Path.getRelativePath(Path.getDirectoryName(filename($)),
"C:/Program Files (x86)/CSPro 8.0/html/images/pff-icon.png")~~" />
Fortunately, because the local web server treats the html directory as the root of the server, the above example can instead be coded as:
<img src="/images/pff-icon.png" />