La boîte “container”
We have seen that TV Tools allows you to import and display text and graphic files with the assistance of variables such as #FIC (inserting a rough text file into a text box), #FIN (inserting a line from a text file) or #CSV (displaying the contents of a file (text or an image path) as the lines and columns of an Excel file). You might need to use a large number of text boxes containing these types of variables.
To simplify this procedure, TV tools has "container", not only to include boxes in the models, but also to manage your data dynamically with the "format editor".
Container : example 1
Let's take a simple database with a csv file in which we have several settings. In this example we are using the Moroccan weather service covering several cities such as Casablanca, Marrakech, Tanger, etc. For each piece of meteorological information on a city we have 3 fields: the name of the city, the weather (cloudy, sunny, etc.), and then the temperature.
- In the Designer of TV Tools, in a new design, go to the top menu bar and select the "Boxes/New/Container" function. A transparent box entitled "Container" will appear on your page with a warning "You don’t have any valid RecordSet to configure this container, do you want to create a RecordSet ?" confirm "Yes".
- A new window titled "Database parameters" will open. In the menu called "basic type" choose the heading "fichier.csv”.
A new window titled "Settings database will open. In the menu called "basic type" choose the heading "fichier.csv”.
- Click OK to confirm.
To check your settings, a message Warning will open for you propose to test your data. Click "yes".
Two new windows will open. The window "RecordSets" which displays a list of recordsets our "RecordSet1" we just build.
You can combine several recordsets in the same design.
- The second window "Settings Container" you can choose the type of display different recordings of your base 4 types of organization : high (fixed lines one below the other), width (fixed lines one behind the other) or providing them with the movement functions rolling (from right to left) and scrolling (lines scrolling upward). Here we choose width, then click "OK" .
The container recap window opens with your pre-selection : The “RecordSet1” is activated in the list of available data and the data are organize vertically. Choose the vertical size for records in pixels. In this example : 141 pixels.
- Then click the button “generate build page”.
Select the text fields to be displayed in your page from the recordset list and “Add” then by clicking the add button. If you want to add all the text field at once, use the “Add all” button then select “OK”
The “generate build page” creates automatically a second page in the design. This where the layout of the various data field will be done (in a text box #BDD).
Move all the variables #BDD in the template of the container materialized by the frame dotted white and gray. In this example the size width of the fixture will match the size of the box "Container" (here placed on the 1st page) against the arrivals will be 40 pixels (height Specified in step No. 8). You can also provide text different attributes (height, Police, color, etc...) in different boxes texts #BDD.
This process will allow of inlay on the first page content of the page model in the area of the Container box.
Depending on the size of your container box, TV tools will play as many times page as necessary to display all records. More your container box is small, more there will be pages to play.On the first page manually expand the container box to play all records at once on the page. Give time to your page, and then click the icon "eye" to preview your design.
a. Corresponds to the #BDD variable "town".
b. Corresponds to the #BDD variable "temperature" arranged in decreasing order.
c. Corresponds to the #BDD variable "weather".
We are going to leave the previous example in order to create a variant with two invisible pages instead of one. This will allow us to have a display alternated with two different kinds of line.
Container : example 2
Go to the "Container" box settings by double clicking with the left mouse button.
Select the "multiple model pages, taken alternatively" function. Enter "2" in "number of page used as model" and "3" in the space "then construct with page". Close the window.
- We are going to colorize the background text boxes with variables #BDD rather than let them transparent. On the second page give different to each 3 texts by checking boxes in the window "Information" they have all the same height (here : 40 pixels).
Go to the top menu "Pages/ Copy" then “Pages/Paste” in Add to get a 3rd page.
- On the 3rd page, give different attributes (colours, fonts, background colour of text box, etc...) to the 3 #BDD variables.
Reduce the box container on the first page. In this example we are going to do a kind of display only 3 records per page.We have already defines a vertical size of 40 pixels within the parameters of the box container. With the help of the "information window", give then a size of 120 pixels height for the box container.
In this example, the box container will distribute as many recordings as multiple of 40 pixels. Example : 3 recordings for a size of 120 pixels or 4 to 160 pixels. Note if the size of the tin container is not a multiple of 40 it will be played only whole number of records : for example 3 records to a size of 140 pixels. This will not cut visual content.
Return to the first page of the design to display it with the "eye" icon.
a. Corresponds to the model of the 2nd page in "invisible" mode with the 3 #BDD variables.
b. Corresponds to the model of the 3rd page also in "invisible" mode.
The format editor
Container : example 3
This time we are going to display images to replace the #BDD variable "weather". For best effect we will use the format editor to match the images (cloud.tga, sun.tga and rain.tga) with the words (cloud, sun and rain) contained in the "weather" column of our csv file. Go back to step 11 of the first example.
On page serving as a model (page 2) delete the text box with the variable #BDD "weather" and replace it with a box image to choose from : "cloud.tga", "sun.tga" or "rain.tga" (in this example : "cloud.tga"). Then place the image in the template.
Go to the "Window/Format Editor" menu, select "is the same" in the "value of field" function, then type "cloud" in the text space opposite.
Next select the image you want to match with the word "cloud" (here it will be the image called "cloud.tga") by clicking on the open icon.
Confirm your operation by clicking on the IMP tab (implement) : your instruction will then be included in the list of instructions.
- Using the same procedure, create two other instructions by clicking on the "New" tab and matching the word "sun" to the image "sun.tga" and "rain" to "rain.tga".
Save your "format" file in xml in the top menu "Format / Save as" for example using the name "testContainerEx1.xml".
In the space reserved on behalf of the image of the window "information", enter the formula #BDD (format = testContainerEx1)"weather";"c:\tvtools\images\Nuage.tga" before the name of the image to call the file format. Then click on "update" to validate this operation.
Display of the images connected with the "csv" file and obeying the instructions of the format file "testContainerEx1.xml".
We are going to complete the previous example by adding instructions for the temperatures. Let's assume we want to display automatically temperatures below 24° in red and temperatures above or equal to 28° in green.
Container : example 4
- In the window "RecordSets," click on button "Edition" to open the window "database parameters, then click on the tab "Sort data."
Choose the "Temperature" in the column "fields of the database", validate your choice with the arrow button "1 Sort field" and then check the "reverse order". This manipulation will have a display in descending order of temperatures of different cities.
We have to proceed with sorting temperatures, we still have to provide conditions colour temperatures. For this we will define a new format.
Above all, create a new text box on your page typing "#Format" with police and the color you want, here in white. Then open the editor formats and made a copy and paste the text into the slot "default".
- Choose "is greater or equal" to "value field, then type "28" in the text there.
Copy and paste another style text with the "#Format", here green, from a text box.
- Click on "Refresh" (updated) to insert the model format in the list of conditions.
- Click on "New" to a new model format and make the same manipulations with the times "is less than" to field value, followed by "24" location text and copy and paste text "# Format" in red this time.
- Save your file "format" xml in the top menu "Format / Save as" under the name "testContainerEx2.xml". Then exit the format editor
- Replace page on the variable model #BDD "temperature" by the following formula : #BDD (format=testContainerEx2) "temperature". To facilitate the operation using the window "Information" for entering your text and then click on the icon replace.
Back on the first page of your issue, double-click on the box Container. Then click on "Setting data" button "field types."
To enable TV Tools to apply the format instructions to the temperatures, you must first convert the text in the original csv file into decimal numbers. To do this, click on the Temperature line, then go to the "convert a text field into" menu and select "Whole number". This operation will be applied to all the other records in the csv file. Confirm with "OK" then "Close".
A display of the temperatures complying with the instructions of the format file "testContainerEx2.xml".
Leaving this example, we are going to change the type of display of these various pieces of information with a rolling effect of the elements (town, temperature, weather images). To do this, go to the "Container" box settings on the first page and in organization select the "rolling" mode.
Assign a horizontal size to an element (here a value of "500" pixels), making sure that none of the elements are cut from the display. Select the "automatically adjust width" square so that the elements can correctly follow one behind the other. Also check that the #BDD variables on the 2nd page appear in the container's new structure.
For a better display, you can put a text box with a transparent background colour behind the Container box. You can see the elements rolling across for the duration of the page by clicking the eye icon.
Container et flux RSS
Along the same lines, we are going to use a RSS feed by adapting its graphic form in TV Tools through the use of the Container box.
Container : example 5
- Create a new issue with a tin container on the first page. Approve a "yes" for the creation of a RecordSet.
Choose "RSS Feed" on the menu in the basic type, then click the button "Choose / Edit" to determine your feed URL.
- You can enter or copy and paste the URL of your RSS feeds.
Determine also its options (number of subjects, use a rolling, and display the description...). Validate by then "OK." Back on the window "Settings database", confirm also by "OK" to to open the window "Settings Container
Choose a type of organization "rolling", a size horizontal an element to "400" pixels and check the "automatic left adjust" function.
Select the "create page model" and give the number "2" to the page that will serve as a model. Validate by "Close".
- Add the text fields you want to insert a model page. Then validate "OK".
Stretch container inside the box on the first page so that it takes all width of the screen.Then click the "Edit" window RecordSets. In this way, we will determine conditions for the feed by imposing only the most recent feed of the day during the last four hours. To do this click on the "Filter Data".
Activate the tab with the "green button" then select "PubDate" and confirm with the arrow to insert it in the "1st filter field".
Select the "dating from - to x hours" tab and type "4" to ensure that the flux will only be used if it is less than four hours old. Confirm with "OK".
- In the container structure framed with grey and white dots, place two text boxes with #BDD"Title" (corresponding to the title of the RSS flux) and #BDD"Description" (corresponding to the description of the RSS flux) in the fonts and colours of your choice
- We will replace the text box #BDD "Enclosure" by any image (which will serve as a reference size). Then in the window "information" enter variable #BDD "Enclosure" ; before the location and name of the image used. Confirm with "enter".
View the design. The RSS feed will play out with the images contained in the feed, whose size is determined by the image on the model page (here : 100x75 pixels).
Room Booking
Managing and Booking Resources (GRR) is an application linked to Containers in TV Tools. It is particularly adapted to the organisation and reservation of rooms.
- Above all, we must create a Google account. For this, enter the following link: http://www.google.fr in your web browser, and click the "Login" button.
- If you do not have a Google account, click again on the "Create Account".
- Complete the form below to setup your account (name, username, password, email contact, etc ...) and click the "Next Step" button to confirm.
- Click on "Applications", and select "Agenda" for start the app.
- Vous accédez à l’interface de l’agenda Google. Dans notre exemple, nous allons afficher la grille horaire dans la vue "Jour". Nous allons ensuite double-cliquer à une heure quelconque sur la grille horaire afin d’attribuer un nouvel évènement.
- Enter the name of the event and a start time and end time. For example, type "training: skills management" from 10am to 4.30pm. Otherwise you can check the "all day" if your event covers the whole of the day. In our example we have also completed the fields "Location" and "Description". Click the "Save" button to save your information and return to the planning window.
- We will complete the current day by other records. In our example we will create 3 records covering various time slots.
- In the Designer TVTools we will create a new program with a "container" box on the first page (accessible via the top menu "Tools / New / Container").
- Confirm with "Yes" in the above-cons window to create a new RecordSet.
- In the "Database Settings" select the "Google Calendar" in the menu "Database type".
- Click on the "Choose" button for open the window "TVTools Google Calendar Connector".
- Then click the "Choose Google Account" button.
- Confirm the message window by clicking on "Yes" and click the button "I Agree" to allow Google to use application data.
- The account field will automatically authenticate. Confirm with "OK".
- The account will be identified in the "Calendars" field.
- In the "Database Settings" select the "Sort data" tab. Choose the "start_time" field by clicking the arrow button to perform the sort. This manipulation allows a selection of recordings by displaying only those that must take place to date. Click on the green ball the "Sort data" tab to activate this sorting.
- Click twice on "OK" button to confirm and select the type "height" for the display of your data. Confirm again with "OK".
- In the window "Container settings" we will set the vertical size to "200px" to place a number on our records. We choose build elements from "a model page" and we tick the option "Dynamic Content" in order to assign effects on each of the elements that make up our database (title, description, room name , etc ...). We can then click on the "Close" button.
- You can choose the fields you want to appear in your Design. Select a field in the left column and click the "Add" button (as in the example below against the "name" field). Confirm with "OK".
Page 2 will be created with the various fields requested. You can build your layout on the screen by arranging the different fields inside the dotted frame, who limit the max size of an element. You can also assign typographic settings (font, style, color ...) with different text boxes containing the #BDD variables.
- Back to the page 1. We stretched our container box to 600px height. We can display right now 3 records simultaneously on our design. Click on the "Preview" button for visualize our dynamic datas working.
