Project:Multiline Menu
From SpinetiX Support Wiki
Contents
Specifications
- Category: Feeds
- Author: SpinetiX S.A.
- License: GPL Version 3
- Target: HMD
Description
This is an advanced HMD project consisting of some custom JavaScript which retrieves data from a CSV file and uses it to create a table with variable line height.
This example will load the content of the CSV file included in the project and create a table out of its data. The JavaScript file can be modified to change the source of the data (to use other local CSV file or even use source from remote server such as the google documents for instance).
The layout of the table is determined by the variable config. This variable defines the position and the layout parameters used to display each line of the data. For each entry of the config array, the script will create a new textArea and set text content of the textArea to be equal to the data. The position of the next line is controlled by the 'inc' parameter. This parameter will be used only if the corresponding data is not empty, thus allowing the height of the table to depends on the content of the data.
Download the Media:MultilineMenuProject.7z
Controlling the parameters
- Open the JavaScript file with a text editor.
- The line
var uri =" ... ";controls the location of the datasource. Local file or remote file served by an HTTP server can be used. - Save the JavaScript file
Note that the script is designed to operate the following way:
- When the document is opened, the uri is checked and the data is downloaded. The table is created as soon as the data is received.
- If the data is modified while the document is opened, then it will be downloaded again, and the table will be immediately updated.
Controlling the layout
The layout is controlled using the var config = [ ... ];. It is not possible to edit the layout using HMD with this script.
- The same layout will be applied to each line of the data.
- The offset from one line to another is variable and depends on the data
- Each line of the the config correspond to the layout of one entry in one line of the data.
- name: Identify the column name in the data to which this layout should be applied
- x,y, width, height : position of the textArea
- size, family : layout of the text
- inc: increment for the next line. This will only be used if the data is not empty.
Note that the script do not check that all lines can be displayed on the screen. In case there are too many lines to be displayed, the last one are rendered outside the screen.
Multiple files
If the same script is needed for multiple tables in the same project, then it is recommended to split the script in two:
- In the JavaScript file, remove the definition of the variables (from "var uri ..." to the end of "var target ...", lines 5 to 20)
- In the svg file calling the script (Format.svg in the example), add a <script> elements. And inside this element copy the lines removed from the JavaScript file:
<script><![CDATA[
var uri = "Menu_workbook.csv"; // source of the data
[...]
var target = document.getElementById("layers");
]]></script>
- This allows different settings for different SVG files.