Images

Images can be inserted into your app using a single line of code with a reference to the name of the image, either as a URL or as a file system path. If specifying the source path of the image, it must first be placed into the resources folder inside of your project. You can drag-and-drop the image file from Windows Explorer directly into the resources folder.

By default all images and GIFs are inspectable (i.e. open in a larger view on tap). You can toggle this option by setting the inspect attribute in the image tag to false.

Example 1: Image

This example inserts a web-based image into an app and applies a small style to it to reduce its size. The size styles are available at the bottom of this page.

You can not copy this example into your document as-is, as the URL is not valid.

<image src="http://website.com/logo.jpeg" style="small" />

Example 2: GIF

In this example a GIF inside the resources folder of the project is inserted into the app.

You can not copy this example into your document without including a GIF file in your resources folder.

<image src="resources\logo.gif" style="medium"/>

Example 3: In Line Image

This example inserts an image in-line with text. The image autoscales to the height of the surrounding text.

You can not copy this example into your document without including an image file in your resources folder.

<p>
  This sentence contains an image here: <image src="resources\logo.jpg"/>
</p>

Example 4: Side-by-Side Images

To insert two or more images or GIFs next to each other, use a table with the grid lines turned off.

You can not copy this example into your document without including an image file in your resources folder.

<table grid="false" widths="50% 50%">
  <row>
    <column>
      <image src="resources/logo.png" style="medium"/>
    </column>
    <column>
      <image src="resources/logo.png" style="medium"/>
    </column>
  </row>
</table>

If you would like your images to contain captions, insert a figure and title (as outlined in Captions) inside the table cell.

Note: Vertical alignment inside of table cells does not work at this time. All images in tables will be aligned to the top of the cell.

Image Styles

Back to Knowledge Base

Captions

To add a caption to an image or GIF, define the image in a figure tag and include a title. The caption text will be centered below the image, and the font will be slightly smaller than that of a paragraph.

<figure>
    <title>This is a caption for the figure.</title>
    <image src="resources\logo.png" style="medium" />
</figure>

Back to Knowledge Base

Video

Videos are inserted using the video tag and by referencing the directory that the video is in, in the same way that you would insert an image or a GIF. However, videos allow for more advanced control beyond playing and pausing. Take a look at the Scripting Reference for more information on manipulating videos through scripts.

<video src="resources/videoName.mp4" />

Users can start and pause a video by tapping anywhere on the video. They can also seek to a particular time by dragging the seek cursor back and forth. As an author, you can enable or disable these controls, or use buttons and sliders to manipulate the video. See the Scripting Reference for a complete list of video elements.

At this time the video tag only supports MP4 file types.

Back to Knowledge Base

Library Cover Image

You can include a cover image for your app in the library using the coverImage tag in the metadata. The image can be a JPEG or PNG.

  <metadata>
    <title>Title of the App</title>
    <creator>Quanser</creator>
    <abstract>This document is an example app to show users how to insert a cover image into their apps. Cover images are a great way to make your apps look polished and professional.</abstract>
    <coverImage src="resources/file_name.png" />
  </metadata>

We recommend using the logo for your organization or institution as the cover image.

If you do not include a cover image, the default image will be the qdex logo.

Back to Knowledge Base

Inserting Hyperlinks

You can insert hyperlinks to external webpages using the link tag within a paragraph. The pages are loaded in-app without the use of external applications, meaning it is easy to go back and forth between your document and the hyperlinked page. If you would like to insert a web page directly into your app, use a web view.

<p> 
   This sentence contains a hyperlink <link url="https://www.youtube.com/watch?v=4krqhgAQ4Fg">here.</link>
</p>

At this time, any hyperlinks that contain illegal XML characters will cause an error on publish. Simply replace the illegal characters in the hyperlink with the escaped character version, and your hyperlinks will work as expected.

" to " > to >

' to ' & to &

< to <

Back to Knowledge Base

Web Views

Web views allow you to view and manipulate a web page while inside of a qdex app. This allows users to explore a website within the app itself, rather than having to click on a link and exit the app like with a hyperlink. While in the app, you can navigate through a website by moving it within its frame. You can also zoom in or out by tapping on the web view, and then using two fingers to pinch in and out.

To insert a web view into your app, use the web tag.

<web url="http://qdexapps.com/" />

You can also alter the web address of a web view from script. Take a look at the following example, where the address of a web view is toggled from script.

<web name="myWebView" url="http://qdexapps.com/" />

<button name="thisButton" content="Go to Quanser Website">
  <onClick>
    if thisButton.Text == "Go to Quanser Website" then
      myWebView.Url = "http://www.quanser.com/";
      thisButton.Text = "Go to qdex Website"
    elseif thisButton.Text == "Go to qdex Website" then
      myWebView.Url = "http://qdexapps.com/";
      thisButton.Text = "Go to Quanser Website"
    end
  </onClick>
</button>

You can also browse a web page that is directly inserted into the document bundle.

<web url="resources/my_page.html" />