HHTTMMLL && XXMMLL//RRSSSS CCaappttuurree RReeggiioonnss

UUsseerr GGuuiiddee

for Noventri

Suite Design Tab

Version 2.6.XXX

Page 1 of 18

Table of Contents

Section 1 HTML Capture

1-1. Overview of HTML Capture Region ............................................................3

1-2. HTML Capture Region Properties Configuration.........................................3

1-2.1 HTML CheckBox...................................................................................4

1-2.2 Website Address......................................................................................4

1-2.3 Delay (mS) CheckBox.............................................................................4

1-2.4 Override Dimensions CheckBox.............................................................5

1-2.5 Update Interval (min) ..............................................................................5

1-2.6 Refresh Now Pushbutton.........................................................................6

1-3. Creating a Project Using the HTML Capture Region...................................6

1-3.1 Full Website Page Capture ......................................................................6

1-3.2 Partial Website Page Capture ..................................................................9

Section 2 RSS/XML Capture 2-1. Overview of XML/RSS Capture Region.................................................... 17

2-2. XML/RSS Capture Region Properties Configuration................................ 17

2-3. Creating Projects Using XML/RSS............................................................ 17

2-3.1 Creating a Page with an RSS Feed...................................................... 17

2-3.2 Creating a Page with an XML file (output from the NDI Service

Delphi interface) ............................................................................................ 17

Page 2 of 18

Section 1

HTML Capture

Page 3 of 18

1-1. Overview of HTML Capture Region With the release of Noventri Suite version 2.6, Noventri is happy to announce the

addition of the HTML capture region feature. The HTML capture region is enabled as

a sub-function of the standard ‘Image Region’. So in order to make use of it, the user

will need to have a basic understanding of the standard project creation tools and

techniques outlined in the ‘Noventri Suite Design Tab’ User Manual (found at

http://www.noventri.com/forum/viewforum.php?f=36).

There are countless uses for this type of region, but the primary usages will be

discusses in this manual. Namely, the capture of a complete web page for display on

the digital sign, and cropping a small portion of a web page area (like a featured item

or a particular image) for display on the digital sign, as part of a greater project page.

1-2. HTML Capture Region Properties Configuration Before the example applications can be discussed, the user should be familiar with the

new feature controls. These new controls can be seen by creating a new project in the

Noventri Suite software.

Once the project has been created, the user must add an image region to the default

page of the project (automatically created by the program). After selecting the ‘Image’

tab from the top menu items, a rectangle can be dragged open in the drawing canvas

for the default page. This action will enable the region ‘Properties’ tab on the lower

left side of the main program window (refer to Figure 1 below). The ‘HTML’

checkbox will now become visible. To enable and show the HTML controls, this

checkbox must be clicked.

Figure 1. Draw an Image Region

Page 4 of 18

As each of the properties of the HTML Capture Region are discussed, refer to Figure 2

below.

Figure 2. HTML Region Properties

1-2.1 HTML CheckBox

This checkbox is used to enable or disable the region as a HTML type. If the

box is in the checked state, then the controls shown inside of the red rectangle

of Figure 2 become visible. If the region is to be returned to the standard

image region state, then this box can be clicked again to clear the ‘check’

mark and hide the HTML specific properties.

1-2.2 Website Address

This is the area where the user will type or paste the web address for the

website that is to be examined and displayed on the digital signage display.

The prefix: ‘http://’ is automatically populated in the textbox.

1-2.3 Delay (mS) CheckBox

When the Noventri software launches the web rendering back-end (IE-Internet

Explorer), there is no way of predicting what kind of website to which the

user will want to link. Many web developers use Flash videos or animations

Page 5 of 18

to call attention to a particular area of interest on the page. Additionally, pop-

ups and advertisements may cycle throughout time on the page. For these and

various other similar reasons, the output webcapture may be incomplete, or

inaccurate. To avoid any misreading of the web page and poor rendering

quality Noventri has placed a user defined ‘Load time Delay’ into the

properties window.

Through either experimentation or fore-knowledge of the site load time, the

user is able to cause the web renderer to wait until the full page loading is

completed, or until a particular advertisement interval is completed before

capturing and publishing the content to the digital signage display.

This delay is made in units of 1/1000 of a second (or milliseconds). So if, for

example, the user wants to wait a total of three seconds for the site to

complete a video playback before taking a Snap-shot of the web page, then

this checkbox should be clicked. Once the textbox becomes enabled, a value

of ‘3000’ can be typed, pasted, or entered by clicking on the up/down arrow

buttons to the right of the textbox to set the delay.

Remember this is the delay AFTER the web renderer launches, not the

‘Update Interval’ (see section 1-2.5 below).

1-2.4 Override Dimensions CheckBox

This checkbox is used when the user wishes to modify the actual dimensions

read from the HTML stream and then re-render it in another dimension more

suitable to the project being created. In the ‘Checked’ state, the grayed-out

width and height fields will become usable and ready to accept input. Once

clicked, values can be added by typing, pasting, or by clicking on the up/down

arrow buttons to the right of the corresponding textboxes.

Because each website is created with dimensions that are unique, the amount

of content that the web designer desires to present at a particular screen

resolution varies. For web pages to display correctly within the region of your

project, some combination of standard region properties may be needed to

modify the presentation of the HTML capture.

When ‘Override Dimensions’ is used in conjunction with content positioning,

scaling, and cropping tools provided by Noventri Suite, creative ways to

display the entire web page, or even portions of a web page on your digital

signage display are now possible (see Section 1-3.2 for an example usage).

1-2.5 Update Interval (min)

The update interval is used to tell the web renderer back-end how often the

website should be re-examined for changes. The default time interval for

content to be generated is 15-minutes. That means every 15-minutes the

website will be reloaded and regenerated, regardless of any changes to the

website. If for any reason the interval between updates does not need to be

the default, Noventri recommends changing this value.

Page 6 of 18

If the website being monitored is known to update their content every hour,

setting this value to 15-minutes would produce needless content generation

and download by the Noventri Server. This would be wasteful because

nothing would have changed in the rendered image output.

Conversely, if the content changes every 10-minutes and it is critical data that

is being monitored, the value of the update interval should be changed to

match the change speed of the website data.

New update interval values can be added by typing, pasting, or by clicking on

the up/down arrow buttons to the right of the corresponding textbox.

1-2.6 Refresh Now Pushbutton

After the website’s address has been added to the properties window, the user

may desire to see the rendered output before beginning any modifications.

That is the purpose of this button.

If any changes to the override dimensions or website address have been made,

the user will need to refresh the rendered web capture before any changes in

the output can be seen in the region preview. This Button can be very helpful

during the design phase of the project to help get the positioning of the capture

correct.

During the refreshing process it is not uncommon to see pop-ups, if they are

enabled, coming from the Internet Explorer backend. Simply click the close

button to dismiss them. They have no effect on the rendered output HTML

capture.

1-3. Creating a Project Using the HTML Capture Region Now that the properties have been adequately covered, it would be beneficial to put into

practice what has been discussed. There are 2 scenarios that will be covered; the full

website page capture and the partial website page capture. It is recommended that the

information contained in the online Noventri Manuals be reviewed or referenced to clarify

any points that may be considered out of scope for this immediate discussion.

These manuals can be found at website listed below:

http://www.noventri.com/forum/viewforum.php?f=36

1-3.1 Full Website Page Capture

In order successfully add a full page web capture region to a project, the user

must first open the Noventri Suite program, create a new project, and select

the default page (Page01).

Page 7 of 18

The project should be created in a resolution and orientation that best matches

the target web page dimensions. In this example, the Noventri web page will

be used. The address for the site is: http://www.noventri.com, and it is best

viewed in a vertical (Portrait) page layout in the 1920x1080 resolution.

Ensure that the project properties reflects these attributes.

Refer to Figure 3 below while assembling the project properties.

Figure 3. Project Properties

To begin the web site capture, select the ‘Image’ tab from the top menu items.

A rectangle can be dragged open in the drawing canvas for the default page.

This action will enable the region ‘Properties’ tab on the lower left side of the

main program window (refer to Figure 4 below). The ‘HTML’ checkbox will

now become visible. To enable and show the HTML controls, this checkbox

must be clicked.

Figure 4. Create the HTML Capture Region

Page 8 of 18

Type or paste the test address ( www.noventri.com ) into the ‘http://’ prefix

that was automatically populated into the ‘Website Address’ textbox of the

region ‘Properties” window (refer to Figure 5 below).

Next, click the ‘Fit to Page’ button to expand the region boundary to the full

extent of the 1080x1920 drawing canvas.

Finally, click the ‘Refresh Now’ button to render the website into the HTML

capture region.

Figure 5. Capture the Noventri web site home page

Notice that the image rendered in Figure 5 above does not fully occupy the

provided region space allocated. This is due to the fact that the region

dimensions are larger than the full dimension of the web site page.

In fact, the rendered size is actually larger than the entire intended web page

size, but the ‘Adjustments’ radiobox for scale is turned on by default and

causes the HTML Capture region to scale to fill the entire image size. To see

what the actual website dimensions of the page are, feel free to select the

‘Crop’ radio button; However, in order to display the page on a standard

1920x1080 monitor (rotated 90°) we will want to let the Noventri Suite Scale

up the image.

The reason for the black bar at the top and bottom of the rendered HTML

image is because the ‘Preserve Aspect’ checkbox is also turned on by default.

Since the image aspect ratio is very close to the project dimensions, the user

Page 9 of 18

may choose to Uncheck the ‘Preserve Aspect’ checkbox to completely fill in

the region with the HTML capture (see Figure 6 below).

Figure 6. Remove ‘Preserve Aspect’ checkbox to finish scaling into the region

Now the user can follow the standard method for adding the page to a

sequence, and then scheduling the sequence to a SF-100e Player. Every 15-

minutes the website will be re-examined and new content published to the

digital signage player. So, as the media on the web page is changed, the

digital display will update within that update interval.

1-3.2 Partial Website Page Capture

As we demonstrated in section 1-3.1 above, the HTML capture region is

useful for a full screen capture of a web page; However in many instances,

the project designer is not able to modify the project dimensions or change the

orientation of the digital display to match the intended dimensions of the web

site. There will also be times when he is only interested in a particular line of

text or an image from the web site page. It is during these kinds of scenarios

that a partial website page capture may be appropriate.

In this example, we will demonstrate how to take an image of an SF-100e

from the ‘www.noventri.com’ web site, and use it as a featured item to be

displayed on a larger Noventri Suite page layout.

Once again, it is recommended that the information contained in the online

Noventri Manuals be reviewed or referenced for this discussion. These

manuals can be found at website listed below:

http://www.noventri.com/forum/viewforum.php?f=36

Page 10 of 18

To begin, open the Noventri Suite software and create a new project. The

default resolution of 1024x768 at 0° rotation may be used.

Once that is done, select the default page (Page01) and create a layout that has

a small HTML capture region ‘Window’ at the bottom and center of the page

(refer to Figure 7 below) that will be used to feature the image of the SF-100e

from the web site capture.

Figure 7. Create an HTML Capture Region ‘Window’

Next, add http://www.noventri.com to the ‘Website Address’ field and click

on the ‘Refresh Now’ pushbutton to preview the web page in the HTML

capture region (Figure 8 below). Notice the ‘Scale’ radiobutton and the

‘Preserve Aspect’ are enabled. For this reason the whole site will be fit into

the small region. Also Notice the image at the lower-left of the rendered web

page. This is the image that we will zoom in on to fill the region.

Figure 8. Scaled Full Web Site and the Image of Interest

Page 11 of 18

Now, in order to pan the rendered web page around within the region, we will

need to uncheck the ‘Preserve Aspect’ checkbox, and then click the ‘Crop’

radiobutton. These actions will produce an unscaled and offset image of the

web site capture within the boundaries of the region rectangle (Figure 9

below).

Figure 9. Starting Position of the Rendered Web Site Page

To understand the position of the rendered view relative to the web site page,

it is important to review the ‘Positioning’ menu tab features. Click on the

‘Positioning’ tab to switch to those properties in the ‘Properties’ window.

Once the positioning controls are visible, refer to Figure 10 below to see how

the ‘Content’ position grid relates to the default rendered HTML page view.

Page 12 of 18

Figure 10. Content Position Grid

So, the ‘Content’ control will operate on the website by sliding it around

within the rectangular bounds of the visible HTML capture region. Since the

defaulted content position is for the center of the grid, it is easy to see why the

region of the example project shows the image that it does (compare Figure 10

with Figure 9).

The user may have noticed that the center grid region of Figure 10 does not

correspond exactly 1:1 to the image displayed in Figure 9. This is normal

behavior because the actual HTML capture region size is not as large as the

predefined area that it could capture. It was intentionally drawn smaller

because the SF-100e image that we hope to capture is small relative to the

available capture space (refer to Figure 10 lower-left grid area).

The user is encouraged to click all of the content locations and watch how the

image rendered in the HTML capture region moves to show the corresponding

grid locations of Figure 10.

When the lower-left content location is chosen, the image of the SF-100e

should be displayed somewhere in the region area. This will not yet be exact,

but if it should be very close. If it is not visible, the user may manually enter a

region size that corresponds to the size of the image on the web site, and then

use the ‘Region’ control to bottom and center justify the region on the page

(refer to Figure 11 below). The values for the region width and height are:

Width: 270, Height: 280

Figure 11. Set Region Dimensions and Bottom-Center Justify.

At this point the user can proceed in one of two ways. He may wish to use the

image as it has been captured, and proceed to complete the rest of the page

layout, or he may choose to apply careful use of the HTML override

dimensions to fine tune the position of the image within the region rectangle.

Whichever path the user chooses, the region is ready to be moved to any

location on the page layout without changing the capture position.

Page 13 of 18

Since in our example we want a precise balance of blue area on both sides of

the SF-100e image, we will continue to adjust the image location within the

region. The user may now return to the image properties view by clicking on

the ‘Image’ menu tab.

To make any fine adjustments we will need to know the intended dimensions

of the web site page. In the previous section, it was mentioned that the

Noventri web site was best viewed in the 1080x1920 resolution. This

information will be helpful in calculating the image override values.

As a general ‘Rule of Thumb”, the override dimensions for any web site page

should be resized from the intended dimension down 10%. To calculate the

new dimensions for our example, the user may independently multiply the

width and height values by .90 to get the new scaled down values.

Scaling down the rendered output image allows the rendered output room to

move around or grow since this would not be possible at the full intended size

of the page. That translates into slight variations to the image position within

the region.

Let’s use the example figures to calculate our example dimensions.

Width: 1080 X .90 = 972

Height: 1920 X .90 = 1728

Now that we have the override values, we can begin to make the adjustments.

Click on the ‘Override Dimensions’ checkbox and verify that the ‘Width’ and

‘Height’ controls become enabled. Enter the above values into the

corresponding textbox fields, and click the ‘Refresh Now’ pushbutton (refer to

Figure 12 below).

Figure 12. Apply the Override Dimensions of 90% full size

Page 14 of 18

The re-rendered output should have caused some shifting of the image within

the HTML capture region; however, the position can now be re-adjusted by

adding or subtracting increments from the width and height values, and then

clicking the ‘Refresh Now’ pushbutton.

• To move the image to the right, Add numbers to the Width value.

• To move the image to the left, Subtract numbers from the Width

value.

• To move the image to the top, Add numbers to the Height value.

• To move the image to the bottom, Subtract numbers from the Height

value.

After some experimentation, the image of our example is perfectly centered in

the HTML capture region at the Override Dimensions:

Width = 1000 and Height = 1790

Figure 13. After Fine Adjustments Have Been Made

Finally, the user may continue the design and layout of the rest of the

Noventri project page.

To finish up the example usage project, two ‘Text’ regions were added. The

first one to give the background color, and the second one to give a message

about the featured product (refer to Figure 14). Once the project is complete, it

can be sent to the player by the standard means of ‘Publish’ outlined in the

Noventri online manual.

Page 15 of 18

Figure 14. The Finished Noventri Project Page

This concludes the HTML Capture Region section of this manual.

Page 16 of 18

Section 2

RSS/XML Capture

Page 17 of 18

2-1. Overview of XML/RSS Capture Region With the release of Noventri Suite version 2.6, Noventri is happy to announce the addition of

the XML/RSS capture region feature. The XML/RSS capture region is enabled as a sub-

function of the standard ‘Text Region’. So in order to make use of it, the user will need to

have a basic understanding of the standard project creation tools and techniques outlined in

the ‘Noventri Suite Design Tab’ User Manual (found at

http://www.noventri.com/forum/viewforum.php?f=36).

2-2. XML/RSS Capture Region Properties Configuration

2-3. Creating Projects Using XML/RSS

2-3.1 Creating a Page with an RSS Feed

2-3.2 Creating a Page with an XML file (output from the NDI Service Delphi interface)

Filename: Design Tab HTML & RSSXML Manual 2.6.doc

Directory: D:\Documents

Template: C:\Documents and

Settings\Administrator\Application

Data\Microsoft\Templates\Normal.dot

Title:

Subject:

Author: user

Keywords:

Comments:

Creation Date: 8/2/2012 2:14 PM

Change Number: 42

Last Saved On: 8/8/2012 9:22 AM

Last Saved By: Administrator

Total Editing Time: 8,207 Minutes

Last Printed On: 8/8/2012 9:23 AM

As of Last Complete Printing

Number of Pages: 18

Number of Words: 3,155 (approx.)

Number of Characters: 17,986 (approx.)