Explore, Process and Visualize your data right in your browser. visualfield.org
Import File
Preview
Charset:
Import URL
Preview
Charset:
General Config
Database Name
Database Size
Mb
Maximum sequence task expansion
tasks
Show Status Pane during Sequence Execution
Truncate display of displayed fields after
characters
Table Config
Table Page Size
rows
Map Config
Map Base Layer Tile URL (EPSG: 3857,900913)
Map Base Layer Attribution
Sample Base Layers
Device Attributes and On Page Load are included in Config settings
Enter SQL Statement
Save Statement
Define Run Sequence
Sequence Task Id
Component Task Id's (comma separated)
Description
Define Custom Function
Input Table
Function
Result Table
Temp
Description
Task Id
Define Prompt Input
Prompt Text
Query String Parameter Name
Description
Task Id
Define Run Menu
Menu Item Label
Menu Item Title
Task Id
Relative Order
Browse
Table/View
Search
Table Visualization
Table/View
Description
Title
Task Id
Link Target
Self Drilldown
Drilldown Column (Query String)
Drilldown Column Replacement Label
Append Original Metadata
Chart Visualization
Table/View
Description
Chart Background Color
Title
Task Id
Link Target
Drilldown Append Original Metadata
Pie Chart Display Theme
X-Axis
X-Axis Column
X-Axis Order By Column
X-Axis Order By Direction
Stacked
Series 1
Type
Y-Axis Orient
Y-Axis Value Column
Drilldown Column (Query String)
Series Color
Series 2
Type
Y-Axis Orient
Y-Axis Value Column
Drilldown Column (Query String)
Series Color
Series 3
Type
Y-Axis Orient
Y-Axis Value Column
Drilldown Column (Query String)
Series Color
Series 4
Type
Y-Axis Orient
Y-Axis Value Column
Drilldown Column (Query String)
Series Color
Map Visualization
Table/View
Description
Title
Task Id
Link Target
Geometry
Geometry Column(s)
Tooltip
Custom Style
Custom Style 1
Custom Style 2
Custom Style 3
Custom Style 4
Custom Style 5
Custom Style 6
Self Drilldown
Drilldown Column (Query String)
Drilldown Column Replacement Label
Append Original Metadata
HeatMap Visualization
Table/View
Description
Point Geometry Column(s)
Title
Task Id
Max Intensity
Min Opacity
Gradient
Network Visualization
Node Table/View
Node Id Column
Edge Table/View
Edge From Id Column
Edge To Id Column
Node Count Limit Explore Fallback
Explore Fallback Start With Node Id(s)
Description
Title
Task Id
Link Target
Node Default Cost
Edge Default Cost
Node Custom Config/Style
Node Custom Style 1
Node Custom Style 2
Node Custom Style 3
Node Custom Style 4
Node Custom Style 5
Node Custom Style 6
Node Custom Style 7
Node Custom Style 8
Edge Custom Config/Style
Edge Custom Style 1
Edge Custom Style 2
Edge Custom Style 3
Edge Custom Style 4
Edge Custom Style 5
Edge Custom Style 6
Edge Custom Style 7
Edge Custom Style 8
Physical Network
Is Physical Network (As Map)
Node Table/View POINT Geometry Column
Edge Table/View Geometry Column
Self Drilldown
Node Drilldown Column (Query String)
Node Drilldown Column Replacement Label
Edge Drilldown Column (Query String)
Edge Drilldown Column Replacement Label
Append Original Metadata
Media Visualization (Slide Show)
Table
Description
Title
Task Id
Link Target
Media Source
Media Source Column
Sequence Order By Column
Sequence Order By Direction
Self Drilldown
Drilldown Column (Query String)
Drilldown Column Replacement Label
Append Original Metadata
Export Metadata
Encode as URI
Reset DB (applies only for Query String invocations)
Import Metadata
Reset Metadata
Reference Guide
Menu (Home)
If you have an RFC 4180 standards based CSV file with a single header row, just drag and drop it
on to the file input area on this pane. Your CSV will be parsed, loaded into a table having
the same name as the filename, and then switched to the Browse pane so you can readily view
the contents.
Table (Import File)
This pane enables you to import a delimited file into the Visual Field WebSQL database. To start,
just drag and drop your file onto the file input area and a preview will be displayed. A destination
table will need to be nominated (which will default to the deduplicated filename). If your delimited
file is in RFC 4180 CSV standards format and contains a single header row then you
should not need to change any of the other setting and can proceed to import your file by using
the Import buttons at the bottom of the pane. In the case you need to change settings for a
different formatted file, these are described as follows;
Charset
Unused in this version - will always be UTF-8
Separator
Specify the file field separator from the select list. If the separator used in your file is
not shown in the select list, then choose "Custom" and enter the separator character in the
Custom input field.
Delimiter
Specify the file field escape delimiter from the Select list. If the delimiter used in your file is
not shown in the select list, then choose "Custom" and enter the delimiter character in the
Custom input field.
Skip first lines
If the delimited content in your file does not begin on the first line, then enter the number
of lines to skip before parsing your data. Please note that leading empty lines will automatically
be omitted during file read.
Header Row
Indicates that the file contains a header row that lists the column names. If this is unchecked,
column names will be assigned as; F1, F2, F3, etc.
Empty Fields as Null
With this checked, empty fields encountered in the file will be assigned null when inserted into
the database table. If this is unchecked an empty string will be inserted.
Destination Table
Enter the table name to be created in the Visual Field database for this import. Will default
to the deduplicated filename. Note that table names cannot begin with a number unless enclosed
in double quotes.
Temp
If this is selected, the table will be created as "TEMP" - meaning that it wont persist after
a subsequent page reload (opening of the database).
After Import Start Task Id
Various actions within Visual Field can have an associated Task Id. Enter the Task Id, that
you wish to start automatically after you file loads here. Eg, you could put an SQL, Custom
Function or Visualization task immediately after your file is loaded.
Automate Import Next Time
With this checked, the next time, you drop a file with the same filename, the import will
run automatically without further action required.
Press this to commence the parse and import of your file. A database table will be (re)created by this import.
Press this to commence the parse and import of your file. Once your file is loaded, the Browse
pane for the corresponding table will be activated so you can immediately see the contents
Use this to save the configuration specified above but do not actually run an import. Useful
if you need to change something about the import.
Will give a mini list with actions in this pane. Limited to 100 rows maximum - if you have more than this
number of tables, use the Browse functions. In the mini list, the actions that can be undertaken are;
Edit the import configuration of the particular table/filename
Drop the import configuration of this particular table/filename.
However, the actual database table, if it exists, will not be dropped.
Will clear this form.
Table (Import URL)
This pane enables you to import a web service that is serving delimited content into a Visual Field WebSQL database
table. If you are using the file:// protocol to use Visual Field, or if the web service is being served
from a different domain, the web service may need to include CORS headers or the import fetch
request may fail. A destination table will need to be nominated. If the web resource is delimited in
RFC 4180 CSV standards format and contains a single header row then you should not need to change
any of the other setting and can proceed to import once a destination table is specified.
In the case you need to change settings for a different formatted resource, these are described as follows;
Charset
Unused in this version - will always be UTF-8
Separator
Specify the file field separator from the select list. If the separator used in your file is
not shown in the select list, then choose "Custom" and enter the separator character in the
Custom input field.
Delimiter
Specify the file field escape delimiter from the Select list. If the delimiter used in your file is
not shown in the select list, then choose "Custom" and enter the delimiter character in the
Custom input field.
Skip first lines
If the delimited content in your file does not begin on the first line, then enter the number
of lines to skip before parsing your data. Please note that leading empty lines will automatically
be omitted during file read.
Header Row
Indicates that the file contains a header row that lists the column names. If this is unchecked,
column names will be assigned as; F1, F2, F3, etc.
Empty Fields as Null
With this checked, empty fields encountered in the file will be assigned null when inserted into
the database table. If this is unchecked an empty string will be inserted.
Destination Table
Enter the table name to be created in the Visual Field database for this import. Will default
to the deduplicated filename. Note that table names cannot begin with a number unless enclosed
in double quotes.
Temp
If this is selected, the table will be created as "TEMP" - meaning that it wont persist after
a subsequent page reload (opening of the database).
Save as Task Id
This will associate a Task Id with this particular import action. The task can then be invoked
at a later point to automate the ingestion of the web service.
Cache Max-Age
If this import has a Task Id and that if the import is being invoked as part of that task, then
if this number of seconds has not yet elapsed since the previous import of this service, then
this task will be skipped. That is, you can specify the number of seconds to elapse before this
resource should be re-imported when invoking this action as a task. Will default to zero meaning
always import. If this import is being run manually by one of the buttons below, then this
setting is ignored.
URL Header Name & Value
You can optionally specify upto 2 http headers to attach as part of the URL request.
This will attempt to retrieve the webservice URL nominated but not import it.
Press this to commence the fetch, parse and import of your web resource. A database table will be
(re)created by this import.
Press this to commence the fetch, parse and import of your web resource. Once your file is loaded, the Browse
pane for the corresponding table will be activated so you can immediately see the contents
Use this to save the configuration specified above but do not actually run an import. Useful
if you need to change something about the import.
Will give a mini list with actions in this pane. Limited to 100 rows maximum - if you have more than this
number of tables, use the Browse functions. In the mini list, the actions that can be undertaken are;
Edit the import configuration of the particular table/filename
Will perform a fetch, parse, Import and switch to the Browse Pane once loaded
Drop the import configuration of this particular resource.
However, the actual database table, if it exists, will not be dropped.
Will clear this form.
SQL Statement
Use this pane to execute an arbitrary SQL statement in the Visual Field WebSQL database. This could be either
a select statement or a DML statement against your own created objects. Some care should be taken in that your
database will also house the Visual Field dictionary which consists of a series of tables that begin with
VF_ - and you should generally not apply DML against these dictionary tables (although there are some
specific exceptions to this guideline - see General Help).
Enter SQL Statement
Enter your SQL statement in the textarea.
Statement Description
If you choose to save your statement, you will need to specify an arbitrary description.
Task Id
A Task id can be associated with your saved SQL Statement so that it can be invoked as
part of a Task.
Press this button to execute your SQL Statement, results will appear below.
 Limited to 100 rows maximum - if you have more than this
number of saved SQL statements, use the Browse functions. In the mini list, the actions that can be undertaken are;
Edit the saved SQL statement
Will run the saved statement
Will drop the saved statement.
Will clear this form.
Will allow you to download the SQL statement result set as CSV.
Custom Function
Use this pane to specify Custom Function definitions. Custom Functions are a series of some predefined javascript
functions that extend what is available within native WebSQL. Custom Functions operate against a WebSQL
table and apply the javascript function specified using parameter characteristics (mappings). A Custom Function
will drop and recreate a result table of the function results. For all Custom Functions, the structure of the
result table is the same - which means that Custom Function outputs can be automated (as part of a task)
and can either be linked (joined) back to the source table or used for further processing (as a task).
This is because the structure of the output table is predictable. Custom Functions have a function Id that
is associated with them and an arbitrary "library" that is a general grouping (described below). If you are a
web developer, the Custom Function metadata is extensible - please search the source of this page for
"// Example of adding your own Custom Function definition" approximately line 18655 for
instructions.
Input Table
Specify the input table the Custom Function will be run against.
Function
Select the function that you wish to apply. Functions are broken down by a "library" which is
just an arbitrary grouping. Please refer to the API section for further details of each specific
Custom Functions.
Library
Math
A collection of javascript Math functions
String
A collection of javascript String functions
Stats
A small collection of mathematical statistical functions
Misc
A collection of functions written by the author that do not largely fall
within another library. This may contain large parts of functions from
other libraries (such as Turf and Metaphone) but have been substantially
reworked to function within Visual Field.
Turf
A collection of spatial analytical functions from the Turf.js library
As mentioned, when a custom function runs it will drop and recreate the result table which is
of a predefined structure. This structure is;
SRC_TABLE
This will be populated with the source input table used for the function.
SRC_ROWID
If there is a direct mapping of the custom function row back to a corresponding
row in the SRC_TABLE, then this field will be populated with the ROWID of the
SRC_TABLE. This gives a definitive way to link the output of Custom Function
results back to the source input table. Not all functions produce a result
set that is directly mappable. And some functions produce grouping results
where these rowid's may be repeated.
GROUPING_RESULT
This value is a secondary result value. It is either populated when the
Custom Function is some sort of aggregation function or the Custom Function
produces a secondary result. In the case of an aggregation value, this can
typically be used with repeating ROWID's to aggregate the results back to
the original table. In the case it is used for secondary results, this will
be specific to the particular Custom Function.
RESULT_STATUS
Either 'true' or 'false'. For each row, this is the result status of the
execution of the javascript Custom Function. If the function completes
successfully (normally) then this will be set to 'true'. If the function
threw an exception, then this will be set to 'false'
RESULT
This is the actual output of the invoked Custom Function. This is a normally
a scalar result and may or may not map back to the source input table by way
of SRC_ROWID.
ERR_MESSAGE
If the Custom Function threw an exception, this is populated with any associated
error message
Custom Functions operate against a single input table (and not joined tables). If you
need to apply a custom function using input data from 2 or more tables, the source tables
will need to be joined prior to passing to the joined table to the Custom Function. Please
refer to an example in General Help guide. When joining input tables, typically a
cross join or Cartesian Product is to be generated to be passed to the Custom Function.
In order to minimise the number of input rows in the join table, it is suggested to
apply any additional relational filtering predicates as possible prior to joining tables.
Relating the results of Custom Function output back to the source input tables can then
still be achieved via the SRC_ROWID values from the Result table - but in the case of
joined table input may involve a select statement of multiple tables to achieve this.
Initially, using the ROWID's in this way may seem awkward until you get understand how
to easily apply this. Because ROWID's are used in this way, the inputs to Custom Functions
must be a table and not a database view.
Some Custom Functions require an array of input values. For such functions, arrays
can be passed as a delimited list of values. Such functions will typically accept a
list parameter and a list separator and delimiter parameter. This is how arrays can
be passed to Custom Functions. Generating delimited lists from SQL, for input to
Custom Functions, might seem difficult at first but thankfully WebSQL (sqlite) provides
the fantastic group_concat function that can make the generation of such lists
very simple. Please refer to the General Help section for some examples of using
group_concat.
The fields on the Define Custom Function pane are;
Input Table
Nominate the source input table here.
Function
Select the Custom Function to be applied.
Press this to retrieve the Custom Function Parameters and nominate the Parameter mapping values.
For the parameter type - "Literal Constant" will pass a constant value, "Column Value" will
pass the table column and "Query String Param" will pass the nominated Query String Parameter.
Note in the case of "Query String Param" only 1 query string value for a given parameter name
will be passed (ie, if your query string parameter is an array (eg; ?A=1&A=2) then only
1 single value (the first) will be passed to the function.
Result Table
Specify the Result table to be created when this Custom Function runs.
Temp
Select if the result table should be created as a TEMP table.
Description
Enter a description for this Custom Function.
Task Id
Enter an optional Task Id that will be associated with this Custom Function so it can
be run as part of a task.
 Limited to 100 rows maximum - if you have more than this
number of functions, use the Browse functions. In the mini list, the actions that can be undertaken are;
Browse the output table of a Custom Function
Edit the saved Custom Function
Will run the saved Custom Function
Will drop the saved Custom Function
Will clear this form.
Table Visualization
A table visualization is a tabular presentation of a nominated table or view. The actual visualization produced
will be based on the table/view, have a filter input, and paginated tabular output. The fields in this pane
are used to define a Table Visualization.
Table/View
Specify the Table or View for the visualization.
Description
Specify a description to be associated with this visualization.
Title
This is the title heading that will be displayed at the top of the page when this
table visualization runs. Titles can either be a constant ("Literal Constant") or
come from a table column ("Column Value") itself. For the case of "Column Value", the
value of the first row of the table column will be used.
Task Id
A Task Id to be associated with this table visualization
Link Target
If any presented data in the table/view contains valid hyperlinks, then this value will
be passed to the "target" attribute of the generated hyperlink. For example, this
may be useful if you are invoking Visual Field from within an iframe and require
linking to a parent page.
Self Drilldown
Self Drilldown is a mechanism that will enable you to create a hyperlink from your presented
data that will link back to the Visual Field page (ie, vf.html). This is provided
to enable the creation of mini data driven applications.
Drilldown Column (Query String)
Nominate a column in the Table/View that has a Query String value that can be used for
the self drilldown. The Drilldown Column will be passed as a Query String to the vf.html
invocation. Note that this needs to be in the form of a valid web GET Query String name
value pairs. Eg; param1=value1¶m2=value2. Query Strings may also need to be
encoded if the parameter name or value contains spaces for example. Please refer to the
Misc:encodeURIComponent Custom Function as a possible mechanism that can be used to assist
the encoding of such Query Strings (that could be called as a prior task to creating these
links). The Query String value should NOT include a leading Question Mark.
Drilldown Column Replacement Label
This is just a constant string value that will be used in replacement of the Drilldown
Column itself (name/value pair) and used as the hyperlink anchor text.
Append Original Metadata
If this page was invoked with a passed METADATA parameter then by selecting this
checkbox, that original METADATA parameter will be attached to the URL string in the
Drilldown Column. Eg; name1=value1&name2=value2&METADATA=... Note that it
may not be essential to reattach the METADATA - as you application could potentially
rely on existing saved offline state data. However, if you intend to provide hyperlinks
that do not rely on any saved offline state, then as a general guideline, the METADATA
(which defines your mini-app) parameter should be appended to your hyperlink.
 Limited to 100 rows maximum -
if you have more than this number of Table Visualizations, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Table Visualization
Will run the saved Table Visualization
Will drop the saved Table Visualization
Will clear this form.
Will exit from a Table Visualization and return to the Visual Field Menu (Home) pane
Will toggle between Fullscreen mode for this visualization
Will toggle filtering of individual table/view column values. Note that when enabled,
filter values must be exact column value matches, whereas Search Input is a wildcard search.
When the filter is enabled this button is displayed in blue;
= Filter is Enabled
Will allow you to download the Table Visualization data.
Usage Notes
If a Table Visualization is used as a Task in a Sequence, the sequence will be terminated
as part of this Task (even if there are other tasks defined after this task in the Sequence).
Columns used in the definition of the Table Visualization - eg, Title or Drilldown Column will
be omitted from the Table Visualization when it runs.
Chart Visualization
A Chart Visualization is a Pie, Bar or Line chart presentation of a nominated table or view.
The fields in this pane are used to define a Chart Visualization. A chart of upto 4 data
series can be generated.
Table/View
Specify the Table or View as the input source for the visualization.
Description
Specify a description to be associated with this visualization.
Chart Background Color
Specify a background color for the chart.
Title
This is the title heading that will be displayed at the top of the page when this
chart visualization runs. Titles can either be a constant ("Literal Constant") or
come from a table column ("Column Value") itself. For the case of "Column Value", the
value of the first row of the table column will be used.
Task Id
A Task Id to be associated with this Chart Visualization
Link Target
If Drilldown Columns are specified in the chart definition, then upon invocation
of such links, the "target" attribute of the generated hyperlink will be set to
this value. For example, this may be useful if you are invoking Visual Field
from within an iframe and require linking to a parent page.
Drilldown Append Original Metadata
If this page was invoked with a passed METADATA parameter then by selecting this
checkbox, that original METADATA parameter will be attached to any chart drilldown
links. Note that it may not be essential to reattach the METADATA - as you application
could potentially rely on existing saved offline state data. However, if you intend to
provide hyperlinks that do not rely on any saved offline state, then as a general
guideline, the METADATA (which defines your mini-app) parameter should be appended.
Pie Chart Display Theme
Pie Charts use this input field as a list of hex triplet color codes to be
used in the generation of the pie chart. This value does not apply to
Bar or Line charts. As the colors are internally converted to RGBA values,
please only specify hex triplet color codes and not HTML named colors and
ensure they are separated by commas.
X-Axis Column
Specify the X-Axis or, in the case of a Pie chart, the reference column. For Line and
Bar charts, if the X-Axis Column is a parsable date (typically adhering to either
ISO 8601 or RFC 2822 Date time formats), then the chart will be created as a
Time-Series chart. In this case, the next field (X-Axis Order-By-Column) should
also be set to this X-Axis Column Value or may otherwise result in curious (distorted)
Chart Visualizations being generated.
X-Axis Order By Column
Optionally specify the column to order the result set by within the chart.
If the Chart is a Time Series (ie, the X-Aixs Column is a date/time), then
this should be set to the same field. For non-Time-Series Line and Bar
charts, the ordering of the X-Axis is perhaps less important in relation to
possibly distorting the resultant chart image. For Scatter charts, the
ordering of the X-Axis may be significant - if unspecified, the points
will be ordered as encountered (read) during rendering of a Scatter
chart. For most Scatter charts rendered on a cartesian basis, in most
cases, the X-Axis order should be specified as the X-Axis column in ascending
order.
X-Axis Order by Direction
Select either 'asc' or 'desc' for the order by direction.
Stacked
Applies only to Bar and Line charts and specifies whether the series are to
be stacked in the chart. Note that Bars and Lines are stacked as groupings
of Bars and Lines (and not combined).
Series - Type
4 core types of charts are supported; Line, Bar, Scatter or Pie. Note that if
this is set to Pie, then only Series 1 is used and Series 2-4 are ignored.
If Series 1 is specified as a "Scatter" type then Series 2-4 will only also be
rendered if they too are specified as a "Scatter" type.
Chart Types are described as follows;
Line
Will render a basic Line Chart.
Line (fill)
Will render a Line Chart with the region between the line and the X-Axis
filled with the same color as the line but at a lighter opacity.
Line (skip)
Applies to multi-series charts. If this particular series is
missing an X-Axis value that is present in other series of the chart,
then the rendered line will span the missing gap - ie, will be
continuous. Internally, this passes "spanGaps" to the Chartjs library.
Line (fill+skip)
Applies both the "fill" and "skip" properties described above.
Bar
Will render a basic Bar Chart with the region of the bar unfilled. Ie, a bar
outline only.
Bar (fill)
Will render a Bar Chart with the region of the bar filled with the
same color as the bar outline but at a lighter opacity.
Scatter (points)
Will render a Scatter Chart as points. Scatter charts require a
numeric X and, at least 1, numeric Y series data points.
Scatter (line)
Will render a Scatter Chart as points with a connecting line.
Scatter (line+fill)
Will render a Scatter Chart as points with a connecting line and
with the region between the line and the X-Axis filled with the same
color as the line but at a lighter opacity.
Scatter (line+skip)
Will render a Scatter Chart as points with a connecting line.
For mutli series scatter charts, if this series is missing a data point
then the rendered line will span the missing gap - ie, will be continuous.
Scatter (line+fill+skip)
Applies all "line", "fill" and "skip" properties described above
when rendering a scatter chart for this series.
Pie
Will render a basic Pie Chart.
Series - Y-Axis Orient
Select "Left" or "Right" for the Y axis that will be associated with this
series. Allows charts to be generated with up to 2 independent Y axis.
Series - Drilldown Column (Query String)
Nominate a column in the Table/View that has a Query String value that can be used for
the self drilldown. The Drilldown Column will be passed as a Query String to the vf.html
invocation. Note that this needs to be in the form of a valid web GET Query String name
value pairs. Eg; param1=value1¶m2=value2. Query Strings may also need to be
encoded if the parameter name or value contains spaces for example. Please refer to the
Misc:encodeURIComponent Custom Function as a possible mechanism that can be used to assist
the encoding of such Query Strings (that could be called as a prior task to creating these
links). The Query String value should NOT include a leading Question Mark.
In relation to the hyperlink itself - a click event upon the associated chart element
itself will invoke the hyperlink.
Series - Series Color
Select the color to be used for this series
Will save your Chart Visualization Definition
Will give a mini list of your saved Chart Visualizations. Limited to 100 rows maximum -
if you have more than this number of Chart Visualizations, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Chart Visualization
Will run the saved Chart Visualization
Will drop the saved Chart Visualization
Will clear this form.
Will exit from a Chart Visualization and return to the Visual Field Menu (Home) pane
Will toggle Line Chart point markers between 3 set radii size values. Possibly useful
for; 1) when viewing on a touch device that requires larger points to interact with, and 2) when
downloading a Chart as an image it may be desirable to remove all point markers from the chart.
Will download a chart in an image format.
Will toggle between Fullscreen mode for this visualization
Will restore chart (reset zoom) from any pan or zoom action.
Usage Notes
If a Chart Visualization is used as a Task in a Sequence, the sequence will be terminated
as part of this visualization task (even if there are other tasks defined after this task in the sequence).
Chart Visualizations have an internal limit of the maximum number of table/view rows
that can be displayed. Charts with a greater number of rows will automatically fallback to a Table
Visualization. Please refer to the General Help for details of this.
Pie Chart Visualizations have an internal limit of the maximum number rows that will include
a chart header legend. In charts with a greater number of rows the header legend will automatically
be omitted. Please refer to the General Help for details of this.
Chart Visualizations must have a minimum number of results required for pan and zoom to be enabled.
In the current version of Chartjs, Time-Series Bar charts that consist of duplicate values
may result in no chart being rendered for that particular series. Tip: If you are creating
a Time-Series X-Axis column and a Bar chart is failing to render - please ensure you do not have
duplicate data elements in the dataset being used.
Map Visualization
A Map Visualization is a Leaflet Map presentation of a nominated table or view.
The fields in this pane are used to define a Map Visualization.
Table/View
Specify the Table or View as the input source for the visualization.
Description
Specify a description to be associated with this visualization.
Title
This is the title heading that will be displayed at the top of the page when this
map visualization runs. Titles can either be a constant ("Literal Constant") or
come from a table column ("Column Value") itself. For the case of "Column Value", the
value of the first row of the table column will be used.
Task Id
A Task Id to be associated with this Map Visualization
Link Target
If a Drilldown Column is specified in the map definition, then upon invocation
of such links, the "target" attribute of the generated hyperlink will be set to
this value. For example, this may be useful if you are invoking Visual Field
from within an iframe and require linking to a parent page.
Drilldown Column (Query String)
Nominate a column in the Table/View that has a Query String value that can be used for
the self drilldown. The Drilldown Column will be passed as a Query String to the vf.html
invocation. Note that this needs to be in the form of a valid web GET Query String name
value pairs. Eg; param1=value1¶m2=value2. Query Strings may also need to be
encoded if the parameter name or value contains spaces for example. Please refer to the
Misc:encodeURIComponent Custom Function as a possible mechanism that can be used to assist
the encoding of such Query Strings (that could be called as a prior task to creating these
links). The Query String value should NOT include a leading Question Mark.
Drilldown Column Replacement Label
This is just a constant string value that will be used in replacement of the Drilldown
Column itself (name/value pair) and used as the hyperlink anchor text. The hyperlink
itself will be displayed within the map geometry element onclick popup.
Append Original Metadata
If this page was invoked with a passed METADATA parameter then by selecting this
checkbox, that original METADATA parameter will be attached to the URL string in the
Drilldown Column. Eg; name1=value1&name2=value2&METADATA=... Note that it
may not be essential to reattach the METADATA - as you application could potentially
rely on existing saved offline state data. However, if you intend to provide hyperlinks
that do not rely on any saved offline state, then as a general guideline, the METADATA
(which defines your mini-app) parameter should be appended to your hyperlink.
Geometry Column(s)
Enter the table/view geometry (WKT) column that the Map Visualization will be based upon.
In the current version of Visual Field, only a single geometry column can be entered.
Tooltip
This is the mouseover tooltip that will be displayed upon hover of map geometries.
Tooltips can either be a constant ("Literal Constant") or come from a table column
("Column Value") itself.
Custom Style
Maps with no Custom Style defined will use the Leaflet Mapping Library default path
styling options. Please refer to the Leaflet Mapping Library Path options reference.
Maps can have up to 6 custom styles defined that override the default Leaflet styling.
The Leaflet Path Styling options used, and will override Leaflet default values, are described as follows;
radius
Radius in pixels of a Point circle marker.
stroke
Whether to draw stroke along the path.
Set it to 'false' to disable borders on polygons or circles. Default: 'true'.
color
Stroke color. Default: '#3388ff'.
weight
Stroke width in pixels. Default: '3'.
opacity
Stroke opacity. Default: '1'.
lineCap
A string that defines shape to be used at the end of the stroke. Default: 'round'.
lineJoin
A string that defines shape to be used at the corners of the stroke. Default: 'round'.
dashArray
A string that defines the stroke dash pattern. Doesn't work on
Canvas-powered layers in some old browsers. Default: null
dashOffset
A string that defines the distance into the dash pattern to start the dash.
Doesn't work on Canvas-powered layers in some old browsers. Default: null
fill
Whether to fill the path with color. Set it to 'false' to disable filling on polygons or circles.
fillColor
Fill color. Defaults to the value of the color option.
fillOpacity
Fill opacity. Default: '0.2'
fillRule
A string that defines how the inside of a shape is determined. Default: 'evenodd'.
Custom Style - Option
Enter the Leaflet Mapping Library Path Option value. That is, the Path option
relating to the map geometry.
Custom Style - regular/hover
Select either "regular" or "hover". "regular" means the styling will be used in place
of the Leaflet default styling. "hover" means the styling will be applied upon mouseover
hover of the map geometry.
Custom Style - Value
This is the value that for the styling that will be applied.
Style values can either be a constant ("Literal Constant") or come from a table column
("Column Value") itself. Applying styles from a "Column Value" will enable you to
create data context driven map styling.
 Limited to 100 rows maximum -
if you have more than this number of Map Visualizations, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Map Visualization
Will run the saved Map Visualization
Will drop the saved Map Visualization
Will clear this form.
Will exit from a Map Visualization and return to the Visual Field Menu (Home) pane
Zoom In
Zoom Out
Will toggle (enable/disable) your device Geolocation. To enable this will require user input.
If a position can be determined, the map will be zoomed to that location and a marker overlaid on
the map. In addition, the VF_DEVICE_ATTRIBUTES table will be updated with the current position
attribute information.
Will toggle between Fullscreen mode for this visualization
Will enable the fetch and store of Map Tiles that can be used later if the map is viewed offline (without an
internet connection). Requires Map Tile feeds to be CORS enabled. Please note
that your Tile provider may have usage policies relating to the fetching of Map Tiles for
offline use.
Usage Notes
If a Map Visualization is used as a Task in a Sequence, the sequence will be terminated
as part of this visualization task (even if there are other tasks defined after this task in the sequence).
Map Visualizations have an internal limit of the maximum number of table/view rows (features)
that can be displayed. Maps with a greater number of rows will automatically fallback to a Table
Visualization. Please refer to the General Help for details of this. For large point sets,
alternatively, consider using a HeatMap Visualization. Probably due to having no
geometry feature mouse interactivity, HeatMap Visualizations are much more scalable for
very large point sets as compared to Map Visualizations.
Table columns that are used to generate the map - eg; Map Title, Geometry or Custom Styling fields
will be omitted from the Map Visualization geometry onclick popup attribute listing.
As mentioned above - the fetching of Map Tiles for later offline use may be subject to usage
policies of your tile provider.
HeatMap Visualization
A HeatMap Visualization is a Leaflet-heat Map presentation of a nominated table or view.
The fields in this pane are used to define a HeatMap Visualization.
Table/View
Specify the Table or View as the input source for the visualization.
Description
Specify a description to be associated with this visualization.
Point Geometry Column(s)
Enter the table/view Point geometry (WKT) column that the HeatMap Visualization will be based upon.
In the current version of Visual Field, only a single point geometry column can be entered.
Assumed to be WGS84 datum. If the point geometry is 2 dimensional, then '1' will be used as the
intensity value. If the point is 3 dimensional, then the third ordinate, if numeric, will be used as
the point intensity value.
Title
This is the title heading that will be displayed at the top of the page when this
heatmap visualization runs. Titles can either be a constant ("Literal Constant") or
come from a table column ("Column Value") itself. For the case of "Column Value", the
value of the first row of the table column will be used.
Task Id
A Task Id to be associated with this HeatMap Visualization
Max Intensity
The maximum intensity value that will be passed to Leaflet-heat.
If intensity values are not in the range; 0-1, then this value may need to be specified. Default: 1.
Min Opacity
This field is the minimum opacity that will be passed to Leaflet-heat. For sparsely populated sets of points,
the default value may be too low. Try increasing this value to provide an improved heatmap visualization for a
non-dense set of points. Values should be numeric in the range; 0-1. Default: 0.05.
Gradient
This field is a stringified JSON object of color gradients that will be passed to Leaflet-heat. This
object is for name/value pairs of intensity values (numeric) and HTML colors. The input field must be
parsable as JSON.  Limited to 100 rows maximum -
if you have more than this number of HeatMap Visualizations, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved HeatMap Visualization
Will run the saved HeatMap Visualization
Will drop the saved HeatMap Visualization
Will clear this form.
Will exit from a HeatMap Visualization and return to the Visual Field Menu (Home) pane
Zoom In
Zoom Out
Will toggle (enable/disable) your device Geolocation. To enable this will require user input.
If a position can be determined, the map will be zoomed to that location and a marker overlaid on
the map. In addition, the VF_DEVICE_ATTRIBUTES table will be updated with the current position
attribute information.
Will toggle between Fullscreen mode for this visualization
Will enable the fetch and store of Map Tiles that can be used later if the map is viewed offline (without an
internet connection). Requires Map Tile feeds to be CORS enabled. Please note
that your Tile provider may have usage policies relating to the fetching of Map Tiles for
offline use.
Usage Notes
If a HeatMap Visualization is used as a Task in a Sequence, the sequence will be terminated
as part of this visualization task (even if there are other tasks defined after this task in the sequence).
As mentioned above - the fetching of Map Tiles for later offline use may be subject to usage
policies of your tile provider.
Media Visualization
A Media Visualization is a forward and reverse sequential display of a table with a
media (Image, Audio or Video) column. It is much like a Slide Show Presentation with
some additional context functions. The fields in this pane are used to define a
Media Visualization.
Table
Specify the Table as the input source for the visualization. Note that this must
be a table and not a view.
Description
Specify a description to be associated with this visualization.
Title
This is the title heading that will be displayed at the top of the page when this
media visualization runs. Titles can either be a constant ("Literal Constant") or
come from a table column ("Column Value") itself.
Task Id
A Task Id to be associated with this Media Visualization
Media Source Column
Enter the table media column that the Media Visualization will be based upon.
Sequence Order By Column
Enter a table column that will be used to order the Media Visualization Sequence.
Sequence Order by Direction
Select either 'asc' or 'desc' for the order by direction.
Link Target
If a Drilldown Column is specified in the media definition, then upon invocation
of such links, the "target" attribute of the generated hyperlink will be set to
this value. For example, this may be useful if you are invoking Visual Field
from within an iframe and require linking to a parent page.
Drilldown Column (Query String)
Nominate a column in the Table/View that has a Query String value that can be used for
the self drilldown. The Drilldown Column will be passed as a Query String to the vf.html
invocation. Note that this needs to be in the form of a valid web GET Query String name
value pairs. Eg; param1=value1¶m2=value2. Query Strings may also need to be
encoded if the parameter name or value contains spaces for example. Please refer to the
Misc:encodeURIComponent Custom Function as a possible mechanism that can be used to assist
the encoding of such Query Strings (that could be called as a prior task to creating these
links). The Query String value should NOT include a leading Question Mark.
Drilldown Column Replacement Label
This is just a constant string value that will be used in replacement of the Drilldown
Column itself (name/value pair) and used as the hyperlink anchor text. The hyperlink
itself will be displayed within the Media Visualization Context Info Popup.
Append Original Metadata
If this page was invoked with a passed METADATA parameter then by selecting this
checkbox, that original METADATA parameter will be attached to the URL string in the
Drilldown Column. Eg; name1=value1&name2=value2&METADATA=... Note that it
may not be essential to reattach the METADATA - as you application could potentially
rely on existing saved offline state data. However, if you intend to provide hyperlinks
that do not rely on any saved offline state, then as a general guideline, the METADATA
(which defines your mini-app) parameter should be appended to your hyperlink.
 Limited to 100 rows maximum -
if you have more than this number of Media Visualizations, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Media Visualization
Will run the saved Media Visualization
Will drop the saved Media Visualization
Will clear this form.
Will exit from a Media Visualization and return to the Visual Field Menu (Home) pane
Will open a context Info Popup of the remaining table attributes and values for this table row.
Advance to Previous Slide.
Advance to Next Slide.
Toggle between Fullscreen mode.
Usage Notes
If a Media Visualization is used as a Task in a Sequence, the sequence will be terminated
as part of this visualization task (even if there are other tasks defined after this task in the sequence).
Network Visualization
A Network Visualization is a more complex visualization involving multiple
source input table/views. A table/view of a set of network nodes is required along
with a table/view of a set of network edges. These could be the same input table in some
cases. The set of nodes and edges then define a network graph. A Network Visualization
allows this graph to be defined and facilitates rendering it either as a logical
network or as a physical network (shown as a map). Network Visualizations have
some more advanced additional functionality than just visualizations. For example,
you can save a partial network visualization - as a node set as a "Saved Graph".
You can also walk, or explore, your network in the case that the entire network is
unable to be displayed. You can also perform shortest path searches within your
Network Visualization. The following describes the fields that can be used to
define a Network Visualization.
Node Table/View
The Table or View as the source data input of the Network Nodes.
Node Id Column
The Node Table/View column that identifies network nodes. Must be unique.
Edge Table/View
The Table or View as the source data input of the Network Edges.
Edge From Id Column
The Edge Table/View column that identifies the start Node (Node Id) of the edge start.
Edge To Id Column
The Edge Table/View column that identifies the end Node (Node Id) of the edge end.
Node Count Limit Explore Fallback
When the input Node Table/View exceeds this number of nodes, the Network Visualization
will fallback to an "explore" mode where the entire network will not be rendered as a whole
but can be explored (walked) by clicking/tapping on a Node and expanding the immediate
neighbors of any given Node. The maximum number of initial Nodes able to be rendered in
a visualization is limited to enable such visualizations to be scalable for
large networks.
Explore Fallback Start With Node Id(s)
When falling back to "Explore" mode, a list of starting nodes can be specified.
Up to 999 nodes can be added at the start. The first field here specifies the type of
the starting node values, if the input Node Table/View exceeds the Node Count Limit Explore
Fallback. A value of "First n Node Rows" will select the first n rows from the Node Table/View
and add them to the Network Visualization. Where 'n' is a numeric integer specified in the next field
A value here of "Literal Constant" will accept a comma separated list of Node Id's in the
next field to be specified up to a maximum of 999 Node Id's. A value of "Query String" will
allow a Query String parameter to be specified - where that Query String parameter may contain
a list of comma separated Node Id's to be added up to a maximum of 999 Node Id's.
The second field here is used to be used when falling back to "Explore" mode, the value of starting
nodes here depends upon the type of list being provided.
Description
Specify a description to be associated with this visualization.
Title
The type of Title displayed on the Network Visualization ("Literal Constant", "Node Column Value" or
"Edge Column Value"). "Literal Constant" will use the specified value, whereas "Node Column Value" will
use the Node table/view column value. "Edge Column Value" will use the Edge table/view column value.
Note that if either "Node Column Value" or "Edge Column Value" is used to generate the
Network Visualization title then that column will be omitted from any popup display.
The second field here is used as the value of the Network Visualization Title Displayed.
Task Id
The Task Id that will associated with this Network Visualization
Link Target
If either a Node or Edge Drilldown Column is specified in the network definition, then upon
invocation of such links, the "target" attribute of the generated hyperlink will be set to
this value. For example, this may be useful if you are invoking Visual Field
from within an iframe and require linking to a parent page.
Node Default Cost
The default cost value of traversing a Node for Shortest Path calculations.
This value will be used when no Node "cost" styling property attribute is found.
Must not be less than zero.
Edge Default Cost
The default cost value of traversing an Edge for Shortest Path calculations.
This value will be used when no "cost" styling property attribute is found.
Must be positive and greater than zero (non-zero).
Node Custom Config/Style
Network Visualizations with no Custom Config/Style defined will use the default Vis.js Network
properties (in the case of a logical network) or use the Leaflet Mapping Library default path
styling options (in the case of a physical network). Node Custom Config/Style settings have
a multi purpose use; it may define customised styling for the Nodes in your Network Visualization
or define configuration properties of the Nodes in your Network Visualization. When defining
such Config/Styling the configuration page has some subtle rendering styling applied that
differentiates the usage. As such;
This styling is used for Logical Network Styling and will be passed to
the Vis.js Network renderer for rendering Logical Network Visualizations.
This styling is used for both Logical but also Physical
Network styling and will either be passed to Vis.js for Logical Networks
or passed to Leaflet for Physical Networks.
This styling is used for both Logical and Physical Networks
but represents a configuration setting that is used for another
purpose other than network rendering styling.
Please refer to both the Vis.js Network Nodes rendering properties and the Leaflet Mapping Library Path
options references. Networks can have up to 8 custom Node styles defined that override the default Vis.js
and Leaflet styling. Or be used as a configuration property. The following are the Config/Styling options that
can be set;
borderWidth
The width of the border of the node. Applies to Logical Networks only.
Default: 1
borderWidthSelected
The width of the border of the node when it is selected.
When undefined, the borderWidth * 2 is used.
Applies to Logical Networks only.
brokenImage
When the shape is set to image or circularImage,
this option can be an URL to a backup image in case the URL supplied
in the image option cannot be resolved.
Applies to Logical Networks only.
color (fillColor)
For Logical Networks the color contains the
color information of the node in every situation. A color value
like 'rgba(120,32,14,1)', '#ffffff' or 'red' can be used. For Physical
Networks, the color contains the fillColor of the Node circular marker
that will be placed on the Map and will default to the default Leaflet
stroke color of '#3388ff'.
opacity (opacity)
The overall node opacity. No default
for Logical Networks. For physical Networks the default is; 1.
heightConstraint
If 'false', no heightConstraint is applied. If a number
is specified, the value is used as the minimum height of the
node. The node's height will be set to the minimum if less
than the value. Applies to Logical Networks only.
image
When the shape is set to 'image' or 'circularImage', this option should
be either the URL to an image, or an appropriate "Column Value" of
a Visual Field stored image. If the image cannot be found, the
brokenImage option can be used. Applies to Logical Networks only.
imagePadding
If a number is specified the paddings of the image inside the
shape are set to that value on all sides. This option is only
used when the shape is set to 'image' or 'circularImage'.
Applies to Logical Networks only.
label (tooltip)
For Logical Networks, the label is the
piece of text shown in or under the node, depending on the shape.
For the case of Physical Networks, the label is the mouseover
tooltip piece of text that will be displayed during hover of
a Map node circle marker.
labelColor
Color of the label text. Applies to Logical Networks only.
Default; '#343434'. Internally translated to Vis.js "font.color"
labelSize
Size of the label text. Applies to Logical Networks only.
Default: 14. Internally translated to Vis.js "font.size"
labelHighlightBold
Determines whether or not the label becomes bold when
the node is selected. Default: 'true'. Applies to
Logical Networks only.
level
When using the hierarchical layout, the level determines
where the node is going to be positioned. Applies to Logical
Networks only.
mass
The barnesHut physics model (which is enabled by default) is based on an
inverted gravity model. By increasing the mass of a node, you increase
it's repulsion. Values between 0 and 1 are not recommended.
Negative or zero values are not allowed. These will generate a console
error and will be set to 1. Applies to Logical Networks only.
physics
When 'false', the node is not part of the physics simulation.
It will not move except for from manual dragging. Applies to
Logical Networks only. Please note that changing physics
settings is currently disabled due to observered rendering
problems with the current version of Vis.js.
shadow
When 'true', the node casts a shadow using the default Vis.js settings.
Applies to Logical Networks only.
shape
The shape defines what the node looks like. There are two types of nodes
in Visual Field. One type has the label inside of it and the other type
has the label underneath it. The types with the label inside of it are:
'ellipse', 'circle', 'database', 'box', 'text'. The ones with the label
outside of it are: 'image', 'circularImage', 'diamond', 'dot', 'star',
'triangle', 'triangleDown', 'hexagon' and 'square'. Applies to
Logical Networks only. For Physical Networks, Nodes are always
rendered as a circular marker.
size (radius)
For Logical Networks, size is used to determine the size
of node shapes that do not have the label inside of them. These shapes are:
'image', 'circularImage', 'diamond', 'dot', 'star', 'triangle', 'triangleDown',
'hexagon' and 'square'. For Physical Networks this is the radius in pixels
of the circular node Map markers.
widthConstraint
If 'false', no widthConstraint is applied. If a number is specified,
the minimum and maximum widths of the node are set to the value.
The node's label's lines will be broken on spaces to stay below the
maximum and the node's width will be set to the minimum if less than the
value. Applies to Logical Networks only.
cost
This represents the "cost" of traversing this node when using
Network Shortest Path searches. For nodes having multiple
"cost" values specified, the cost values will be summed to
determine the overall node cost. If the overall node cost
is below zero, or not specified, the Network Node Default
Cost value will be used.
Custom Style - Value
This is the value that for the styling that will be applied.
Config/Style values can either be a constant ("Literal Constant") or come from a Node table/view
column ("Column Value") itself. Applying Config/Styles from a "Column Value" will enable you to
create data context driven Node styling. Note that any field specified in a "Column Value"
Config/Style setting will be omitted from the node click/tap popup listing during the
actual Visualization.
Edge Custom Config/Style
Network Visualizations with no Custom Config/Style defined will use the default Vis.js Network
properties (in the case of a logical network) or use the Leaflet Mapping Library default path
styling options (in the case of a physical network). Edge Custom Config/Style settings have
a multi purpose use; it may define customised styling for the Edge in your Network Visualization
or define configuration properties of the Edge in your Network Visualization. When defining
such Config/Styling the configuration page has some subtle rendering styling applied that
differentiates the usage. As such;
This styling is used for Logical Network Styling and will be passed to
the Vis.js Network renderer for rendering Logical Network Visualizations.
This styling is used for both Logical but also Physical
Network styling and will either be passed to Vis.js for Logical Networks
or passed to Leaflet for Physical Networks.
This styling is used for both Logical and Physical Networks
but represents a configuration setting that is used for another
purpose other than network rendering styling.
Please refer to both the Vis.js Network Edge rendering properties and the Leaflet Mapping Library Path
options references. Networks can have up to 8 custom Edge styles defined that override the default Vis.js
and Leaflet styling. Or be used as a configuration property. The following are the Config/Styling options that
can be set;
arrows
Will place an arrow head at a single position in a rendered Edge link.
Valid values are; 'to','from' or 'middle'. Applies to Logical Networks only.
arrowType
The type of arrow head to be rendered.
Valid values are; 'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve', 'diamond',
'triangle', 'inv_triangle' or 'vee'. Applies to Logical Networks only.
color (StrokeColor)
For Logical Networks the color contains the
color information of the edge in every situation. A color value
like 'rgba(120,32,14,1)', '#ffffff' or 'red' can be used. For Physical
Networks, the color contains the strokeColor of the Edge (Linestring)
that will be placed on the Map and will default to the default Leaflet
stroke color of '#3388ff'.
dashes (dashArray)
When 'true', the edge will be drawn as a dashed line.
You can customise the dashes by supplying a comma
separated list of integers. List format of numbers,
gap length, dash length, gap length, dash length, ... etc.
The list is repeated until the distance is filled.
When using dashed lines in IE versions older than 11, the
line will be drawn straight, not smooth. Applies to both
Logical and Physical Networks.
hoverWidth
The hoverWidth determines the width of the edge when the user hovers over it with the mouse.
If a number is supplied, this number will be added to the width. Applies to Logical Networks only.
opacity (opacity)
The overall edge opacity. No default
for Logical Networks. For physical Networks the default is; 1.
label (tooltip)
For Logical Networks, the label is the
piece of text shown with the edge. For the case of Physical Networks,
the label is the mouseover tooltip piece of text that will be displayed
during hover of a Map edge (Linestring).
labelAlign
The position the label will be placed in relation to the Edge (link) .
Valid values; 'horizontal', 'top', 'middle', 'bottom'. Applies to Logical Networks only.
labelColor
Color of the label text. Applies to Logical Networks only.
Default; '#343434'. Internally translated to Vis.js "font.color"
labelSize
Size of the label text. Applies to Logical Networks only.
Default: 14. Internally translated to Vis.js "font.size"
labelHighlightBold
Determines whether or not the label becomes bold when
the edge is selected. Default: 'true'. Applies to
Logical Networks only.
physics
When 'false', the edge is not part of the physics simulation.
It will not move except for from manual dragging. Applies to
Logical Networks only. Please note that changing physics
settings is currently disabled due to observered rendering
problems with the current version of Vis.js.
selectionWidth
The selectionWidth determines the width of the edge when the edge is selected.
Applies to Logical Networks only.
selfReferenceSize
When the to and from nodes are the same, a circle is drawn. This is the radius of
that circle. This property may be removed in a future version. Applies to
Logical Networks only.
shadow
When 'true', the edge casts a shadow. Applies to Logical Networks only.
smooth
When 'true', the edge is drawn as a dynamic quadratic bezier curve.
The drawing of these curves takes longer than that of a straight curve but it
looks better. If you have a lot of edges, you may want to consider setting
this to 'false' for better performance. Applies to Logical Networks only.
width (weight)
The width of the edge in pixels. Applies to both
Logical and Physical Networks.
widthConstraint
If 'false', no widthConstraint is applied. If a number is
specified, the maximum width of the edge's label is set to the
value. The edge's label's lines will be broken on spaces to stay
below the maximum. Applies to Logical Networks only.
cost
This represents the "cost" of traversing this edge when using
Network Shortest Path searches. For edges having multiple
"cost" values specified, the cost values will be summed to
determine the overall edge cost. If the overall edge cost
is zero or less, or not specified, the Network Edge Default
Cost value will be used.
Custom Style - Value
This is the value that for the styling that will be applied.
Config/Style values can either be a constant ("Literal Constant") or come from an Edge table/view
column ("Column Value") itself. Applying Config/Styles from a "Column Value" will enable you to
create data context driven Edge (link) styling. Note that any field specified in a "Column Value"
Config/Style setting will be omitted from the edge click/tap popup listing during the
actual Visualization.
Physical Network
This section relates to additional information required when your Network will be
rendered as a physical real world network.
Is Physical Network (As Map)
This checkbox is the main indicator whether
the network is Logical or Physical. If not checked - a Logical Network
Visualization will be used (using Vis.js). If checked - a Physical real world Map will
be used for the Network Visualization (using Leaflet).
Node Table/View POINT Geometry Column
This is a column in the Node Table/View
that has the WKT Point Geometry of the Node. Assumed to be WGS84 Datum. Must be provided
for Physical Networks.
Edge Table/View Geometry Column
This is a column in the Edge Table/View that
has the WKT Geometry of the Edge. This generally should be a Linestring Geometry.
Assumed to be WGS84 Datum. Must be provided for Physical Networks.
Node Drilldown Column (Query String)
Nominate a column in the Node Table/View that has a Query String value that can be used for
the self drilldown. The Drilldown Column will be passed as a Query String to the vf.html
invocation. Note that this needs to be in the form of a valid web GET Query String name
value pairs. Eg; param1=value1¶m2=value2. Query Strings may also need to be
encoded if the parameter name or value contains spaces for example. Please refer to the
Misc:encodeURIComponent Custom Function as a possible mechanism that can be used to assist
the encoding of such Query Strings (that could be called as a prior task to creating these
links). The Query String value should NOT include a leading Question Mark.
Node Drilldown Column Replacement Label
This is just a constant string value that will be used in replacement of the Node Drilldown
Column itself (name/value pair) and used as the hyperlink anchor text. The hyperlink
itself will be displayed within the node popup.
Edge Drilldown Column (Query String)
Nominate a column in the Edge Table/View that has a Query String value that can be used for
the self drilldown. The Drilldown Column will be passed as a Query String to the vf.html
invocation. Note that this needs to be in the form of a valid web GET Query String name
value pairs. Eg; param1=value1¶m2=value2. Query Strings may also need to be
encoded if the parameter name or value contains spaces for example. Please refer to the
Misc:encodeURIComponent Custom Function as a possible mechanism that can be used to assist
the encoding of such Query Strings (that could be called as a prior task to creating these
links). The Query String value should NOT include a leading Question Mark.
Edge Drilldown Column Replacement Label
This is just a constant string value that will be used in replacement of the Edge Drilldown
Column itself (name/value pair) and used as the hyperlink anchor text. The hyperlink
itself will be displayed within the edge popup.
Append Original Metadata
If this page was invoked with a passed METADATA parameter then by selecting this
checkbox, that original METADATA parameter will be attached to the URL string in the
Drilldown Column. Eg; name1=value1&name2=value2&METADATA=... Note that it
may not be essential to reattach the METADATA - as you application could potentially
rely on existing saved offline state data. However, if you intend to provide hyperlinks
that do not rely on any saved offline state, then as a general guideline, the METADATA
(which defines your mini-app) parameter should be appended to your hyperlink.
 Limited to 100 rows maximum -
if you have more than this number of Network Visualizations, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Network Visualization
Will run the saved Network Visualization
Will drop the saved Drop Visualization
Will clear this form.
Logical Network Visualization Runtime buttons
Will exit from a Network Visualization and return to the Visual Field Menu (Home) pane
Zoom In
Zoom Out
Click to Add a Node to the Visualized Graph. Can be used either when a Node has been omitted or
when using "Explore" mode.
Save the current Visualization as a Saved Graph
Perform a Shortest Path Search in the Network. Paths will be searched in a "directed" mode
unless the "Undirected" checkbox is checked - in which case path links will be searched in
both directions.
Download your Network Visualization as an Image.
Will toggle between Fullscreen mode for this visualization
Used for "Explore" mode - clicking this in a Node popup will expand the Node neighbors (undirected)
and add any new neighbors to the visualization.
Used for "Explore" mode - clicking this in a Node popup will omit this node only from the visualization.
Nodes are not permanently removed from the Node Table/View - only omitted from the visualization.
Physical Network Visualization Runtime buttons
Will exit from a Network Visualization and return to the Visual Field Menu (Home) pane
Zoom In
Zoom Out
Will enable the fetch and store of Map Tiles that can be used later if the map is viewed offline (without an
internet connection). Requires Map Tile feeds to be CORS enabled. Please note
that your Tile provider may have usage policies relating to the fetching of Map Tiles for
offline use.
Click to Add a Node to the Visualization. Can be used when a Node has been omitted or
when using "Explore" mode.
Save the current Visualization as a Saved Graph
Perform a Shortest Path Search in the Network. Paths will be searched in a "directed" mode
unless the "Undirected" checkbox is checked - in which case path links will be searched in
both directions.
Will toggle (enable/disable) your device Geolocation. To enable this will require user input.
If a position can be determined, the map will be zoomed to that location and a marker overlaid on
the map. In addition, the VF_DEVICE_ATTRIBUTES table will be updated with the current position
attribute information.
Will toggle between Fullscreen mode for this visualization
Used for "Explore" mode - clicking this in a Node popup will expand the Node neighbors (undirected)
and add any new neighbors to the visualization.
Used for "Explore" mode - clicking this in a Node popup will omit this node only from the visualization.
Nodes are not permanently removed from the Node Table/View - only omitted from the visualization.
Used for "Explore" mode or as part of Shortest Path Search. Will enable a Node to be added to
the visualization by clicking/tapping on the map. The nearest node to the map click will be added to the
visualization.
Usage Notes
If a Network Visualization is used as a Task in a Sequence, the sequence will be terminated
as part of this visualization task (even if there are other tasks defined after this task in the sequence).
Table columns that are used to generate the visualization - eg; Network Title, Custom Config/Style
or Geometry fields will be omitted from the Network Visualization Node onclick popup attribute listing.
As mentioned above - the fetching of Map Tiles for later offline use may be subject to usage
policies of your tile provider.
For large networks that will use the "Explore" mode in that the network will be navigated during
visualization by clicking on Nodes and "Expanding" the node neighbors - it may be beneficial to
create database indexes on the underlying Node and Edge tables to optimise performance. Suggested
indexes are as follows;
An index on the Node table Node Id (if not primary key). Eg;
create index node_idx on my_nodes(node_id);
A composite index on the Edge table for the "from" and "to" Node Id's. Eg;
create index edge_idx on my_edges(from_node_id, to_node_id);
Define Prompt Input
A prompt input allows for the creation of a simple javascript prompt to retrieve a single line
of input text from the user. This text will then be saved to the VF_QUERY_STRING table as
a simple name/value parameter. It may overwrite any existing Query String Parameters.
More detailed mechanisms for retrieving input fields from users are not currently provided.
Prompt Text
Specify the Prompt Greeting text that is to be displayed when the Prompt runs.
Query String Parameter Name
Specify the Query String Parameter Name for the value that will be saved to the VF_QUERY_STRING table.
Description
Specify a description for this Prompt.
Task Id
Specify a Task Id that will be associated with this Prompt.
 Limited to 100 rows maximum -
if you have more than this number of Prompt Definitions, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Prompt Definition
Will run the saved Prompt Definition
Will drop the saved Prompt Definition
Will clear this form.
 When the sequence is run,
the component task list is expanded to all leaf tasks and then they are run in order.
Sequence Task Id
Specify the Task Id for this Sequence.
Component Task Id's (comma separated)
This is a list of Task Id's that make up this sequence. The list should consist of comma separated numeric values.
Description
Specify a description for this Sequence.
 Limited to 100 rows maximum -
if you have more than this number of Sequence Definitions, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Sequence Definition
Will run the saved Sequence Definition
Will drop the saved Sequence Definition
Will clear this form.
Usage Notes
When executed, a Sequence is first expanded into a list of leaf Task Id's. In order
to prevent possible infinite loops, a maximum sequence predefined limit is used.
This limit can be adjusted somewhat under the Config settings; Maximum sequence task expansion
setting.
In the current version of Visual Field, a sequence will terminate upon the rendering of any Visualization
task even if there are other subsequent tasks defined as part of the Sequence. Such as a
Table Visualization, Chart Visualization or a Map Visualization. This may be changed in
subsequent versions of Visual Field.
When tasks are executed as part of a Sequence, they will be logged to the VF_SEQUENCE_RUN_LOG table.
A certain number of maximum log entries will automatically be maintained in VF_SEQUENCE_RUN_LOG. This
Sequence Run Log can be viewed under the "Help" section.
Define Run Menu
The run menu is found in the upper left part of the Menu (Home) pane and can be identified by the cyan
icon. Run menu entries are simple label entries that have a Task Id
associated with them. The run menu gives a very simple way (shortcut) to run a task from the
Home pane of Visual Field. This may be useful for presentations and quick summaries where a
menu entry will be far easier to navigate to than locating the particular Task under under
the general dropdown menus.
Menu Item Label
Specify the textual label that will make up the run menu entry.
Menu Item Title
This will be populated in the HTML title attribute of the Run Menu entry and may be useful
for a simple tooltip. Optional.
Task Id
Specify the Task Id that should be run upon selection of this menu entry.
Relative Order
A numeric value that depicts the relative order (from lowest to highest) that this menu item
should appear down in the menu list.
 Limited to 100 rows maximum -
if you have more than this number of Sequence Definitions, use the Browse functions.
In the mini list, the actions that can be undertaken are;
Edit the saved Run Menu Item Definition
Will run the saved Run Menu Item Definition
Will drop the saved Run Menu Item Definition
Will clear this form.
Collect Device Attributes
Here you can specify a Task Id that will be associated with the collection of device attributes.
Device attributes are a set of attributes that are specific to the client device. Instantaneous
collected device attributes are saved in the VF_DEVICE_ATTRIBUTES table. No historical values
are saved - only instantaneous values. Currently, only GeoLocation Device Attributes are
collected and, with current browsers, typically will only work on file:// protocol or https://
protocol contexts. GeoLocation also typically requires an input action from the user.
Task Id
This is a Task Id that will be associated with the Collection of Device Attributes. The
task will need to be run to collect the device attributes.
Will assign the specified Task Id to the Collection of Device Attributes
Will Run the Collection of Device Attributes.
Will clear this form and reset the Task Id.
On Page Load
Here you can specify a Task Id that will be run after the Visual Field page loads in
the browser. This can either be a constant value or a value passed in as a Query
String parameter.
Run Task Id
This is a Task Id that will be run upon when the Visual Field page loads in the browser.
"Literal Constant" will run the specified Task Id, whereas "Query String Param" will
run the value of the named Query String parameter passed in as a GET parameter as
part of the URL to this page.
Will assign the specified Task Id to the On Page Load
Will Run the On Page Load Task Id.
Will clear this form and Reset the Task Id.
Browse
This pane enables you to readily browse objects (tables and views) in your Visual Field WebSQL database.
In addition to your own created table, there are a set of Visual Field tables and views - which can be
identified by the "VF_" prefix. Ordinarily, you should not need to browse or modify the "VF_" tables
but there are some specific exceptions to this guideline - refer to the General Help section. Some
"VF_" tables have table specific markup associated with them and will render with a certain set of
functionality to allow further operations from the browse pane. For your own loaded tables, there will
be no markup associated with the display of the table data. The Browse pane generates a paginated and
sortable table listing. It can be used for listing of all tables, whereas the mini-lists within
Visual Field are unsortable and are limited to 100 rows.
Table/View
Enter the Table or View you wish to browse. A datalist of values should be suggested to make easy
identification of your loaded tables.
Search
You can filter your table result listing by search filter criteria. All tokens in the Search input
must be present in any of the fields in your table.
Will Run your Search.
Will toggle filtering of individual table/view column values. Note that when enabled,
filter values must be exact column value matches, whereas Search Input is a wildcard search.
When the filter is enabled this button is displayed in blue;
= Filter is Enabled
Will clear this form.
Will download the displayed table, with any filtering applied, as CSV format.
Will delete a single row from the table in your WebSQL database. Applies to tables
only (not applicable to Views).
Browse VF Tables
A shortcut to Browse the Visual Field internal table VF_TABLES - which houses the metadata for
any table you have created as part of a "Table import (File)" or "Table Import (URL)". Refer
to the Browse section above for more detail.
Browse All DB Objects
A shortcut to Browse all Visual Field WebSQL database objects (tables, views and temp tables).
Refer to the Browse section above for more detail.
Browse Media
A shortcut to Browse the VF_MEDIA table. The VF_MEDIA table is the table that raw media is
loaded into using the media file import capability under the section.
The displayed media can be resized by dragging the lower right corner of the media or can be displayed
Fullscreen by clicking on the Media. Because Media can be very large in size (upto 40Mb), this pane is
limited to a page size of 5 rows. This 5 row pagination will be used regardless of what you may have set
in the "Table Page Size" setting in the Config section. This limited page size is intended to reduce the
likelihood of browser memory issues (browser crash).
Show Query String
A shortcut to Browse Visual Field WebSQL database VF_QUERY_STRING table. This table is
populated upon page load and prompt actions. Refer to the Browse section above.
Show Device Attributes
A shortcut to Browse Visual Field WebSQL database VF_DEVICE_ATTRIBUTES table. This table is
populated upon the running of "Collect Device Attributes" Task Id. Refer to the Browse section above.
Photo Map
A Photo Map enables the quick creation of a Map Visualization of Geotagged Media contained
in the VF_MEDIA table. This requires geotagged embedded Exif data within the loaded media.
The Map display can be further filtered on File Modification Date as well as general
searching against; Comments, File Name or All Exif tag entries. Because raw unprocessed
Media may be potentially very large in size, there are some display limits on the resulting
Map. These limits are as follows;
If the total size of Media to be displayed exceeds 300Mb, then the Media field
will be omitted from the map and an attempt to use any embedded thumbnail instead
will be done. Embedded thumbnails are Images that are contained within Exif tags
within the Media themselves. Thumbnails will be used when the total original Media
exceeds 300Mb and all the Media have a thumbnail Exif tag.
If the total size of the Media thumbnails exceeds 300Mb, or all the Media do not have
an associated thumbnail Exif tag, then no Image will be displayed in the Map Media popup field.
From
Optionally specify a date that the Last Modified Date of the VF_MEDIA entry must occur on or after.
To
Optionally specify a date that the Last Modified Date of the VF_MEDIA entry must occur on or before.
Search
Optionally specify a text filter search expression to search within VF_MEDIA Comments, File Name or All Exif tag
fields.
Will clear this form.
Will exit from the Photo Map and return to the Visual Field Menu (Home) pane
Will toggle (enable/disable) your device Geolocation. To enable this will require user input.
If a position can be determined, the map will be zoomed to that location and a marker overlaid on
the map. In addition, the VF_DEVICE_ATTRIBUTES table will be updated with the current position
attribute information.
Will toggle between Fullscreen mode
Will enable the fetch and store of Map Tiles that can be used later if the map is viewed offline (without an
internet connection). Requires Map Tile feeds to be CORS enabled. Please note
that your Tile provider may have usage policies relating to the fetching of Map Tiles for
offline use.
Browse Saved Graphs
Graphs saved during the execution of a Network Visualization are referred to as "Saved Graphs".
These can be browsed under this section. Clicking on the Label or the "Run" button will
re-run the Network Visualization and restore the saved graph. Saved Graphs assume the
Network Definition and source Node and Edge Tables/Views are all available and current.
A saved graph just consists of a set of Network Nodes and Network Visualization properties.
Export Metadata
This pane enables you to export the metadata of the essential Visual Field configuration that
you may have defined. Exported metadata can then be re-imported either manually or automated
by passing in on the Query String. So you can share your metadata with your colleagues or
generate reports using your metadata. Metadata is made up of a simple JSON structure consisting
of a core subset of the Visual Field configuration. So the metadata is human readable.
Encode as URI
If you intend to re-import your metadata in a file:// context as part of the
Query String, then check this checkbox so that your JSON metadata is generated and then URI encoded.
You can then make a reference to this metadata in the Query String that will be valid in a
file:// context. Ie, if you want to make Visual Field reports without needing the use of a web server.
The way you would reference this is to re-import the whole encoded metadata in a Query String URL
upon page load as the METADATA parameter. Eg; file://vf.html?METADATA=<encodedURI>.
This may be necessary because of browser security restrictions that prevent loading of
file URL's over Ajax in a file:// context. Encoding of the Metadata as a URI is provided if
you are not using a web server but wish to load in METADATA on the Query String. If you simply
wish to generate a JSON representation of your Metadata, do not check this checkbox.
Reset DB
When Metadata is (re)imported it will be applied in a "merge" sense. In that existing
Metadata will not be affected unless it is referencing by the same Id values. Metadata can
be reset by the user - see Reset Metadata. But in a web context, whilst possibly unusual, this
option can allow the reset of Visual Field Metadata objects upon pageload. Checking this
option will simply include a tag; "RESET_DB:true" within the Metadata. When such metadata
is loaded in a URL context on the Query String, then all Visual Field related WebSQL Objects
will be dropped and recreated (as empty) upon initial page load. Normally, you should not need
to check this checkbox (and for some actions where offline state is required to be maintained
between web invocations this option should NOT be selected). Reseting of Metadata by way
of a passed METADATA url parameter can be overwritten (disabled) by an Internal Setting
in this page.
Will export your Visual Field Metadata as either an Encoded URI text file or a JSON file.
Import Metadata
This pane enables you to import previously saved Visual Field Metadata. Simply drop your metadata
file on this input field. Files can be JSON, or URI encoded JSON. Import of Metadata in this
way by the user will apply it in a "merge" sense in that it will only overwrite objects with the
same Id's. In this way you can share Metadata amongst your colleagues - and can do that
non-destructively by using non-overlapping sets of Id's. Metadata imported in this way
ignores any "RESET_DB" setting within the Metadata.
Usage Notes
To re-import Metadata by using the Query String, specify the parameter METADATA.
When passed on the URL as a Query String parameter, the METADATA parameter will be evaluated as;
If the METADATA parameter is an URI encoded string of JSON, it will be parsed and imported.
If the METADATA parameter is a string (that fails to parse as JSON), it will be
assumed to be a URL reference and fetched as a URL (remote web request) to
retrieve the Metadata as JSON.
Please note that the above default behaivour processing of the METADATA Query String
parameter can be modified, in the case of the way CORS requests are handled, or disabled
entirely, by changing Internal Settings to this page.
Reset Metadata
This pane enables you to reset Visual Field Metadata. Reseting Metadata means that
all Visual Field WebSQL objects will be dropped and recreated as empty. If you have
existing objects within the database, these should not be affected (however, any metadata
references to them will be lost).
Will drop and recreate (empty) Visual Field Metadata WebSQL objects.
Export Dump
This pane enables you to create a Visual Field Export Dump of either an individual
table or view, or of your entire database. A Visual Field Dump can then be re-imported
at a later stage or imported into another HTML5 WebSQL enabled browser using Visual Field
by using the "Import Dump" facility (see next section). A Visual Field Dump is made up
of simple encoded variable width csv data. It is intended to be a robust method to enable
the offline transfer of database objects, and data, between Visual Field WebSQL databases.
Max Dump File Size
This is the maximum file size that will be used when creating a Dump File. Dump Files will have
a maximum of this size. During the creation of the Dump, if a write exceeds this file size, the
Dump creation will be unsuccessful. This setting generally does not need to be changed. If a Dump uses less
space than this limit - there should be no issues when creating the Dump. This limit is both
browser and device dependent. At the time of writing, this limit was typically 2Gb on most devices.
If your Dump will exceed this limit, you may need to break up your Dump by using the "Export Single
Table/View" option.
Export Single Table/View
This will enable you to create a Dump of a single Table or View. A Dump will consist of encoded
DDL drop and create instructions. And in the case of a table, index DDL creation and DML data load
instructions. Dump Files can then be imported back into Visual Field using the "Import Dump" facility.
Export Entire Database
This will enable you to create a Dump of all of your Visual Field Database objects (tables,views,indexes)
along with associated table data. Such Dumps can then be imported back into Visual Field using the
"Import Dump" facility.
Omit Metadata Objects
In the case of a full Dump, you can omit Visual Field metadata objects by selecting this checkbox.
Metadata objects are those database objects that begin with "VF_". Such metadata objects partly
make up the sequencing, workflow, URL/File table definitions, etc, that you may have defined. It
may be useful to not overwrite Metadata objects during an Import - especially perhaps if you are
sharing or transferring data with your colleagues and you do not wish to overwrite their Visual Field
Metadata for example.
Import Dump
This pane enables you to import a Visual Field Export Dump file. Simply select a file
or drag and drop your Dump file here. Dump Imports will display importation progress
and any failure lines encountered during the Import.
SQL Dump
This pane enables you to create an SQL Dump of either an individual table or view, or of
your entire database. An SQL Dump is intended to be a portable mechanism to facilitate
the easy import of such Dumps into another SQL Database such as sqlite or PostgreSQL.
Due to various current limitations, SQL Dumps are perhaps not as robust as the "Export Dump"
facility (discussed above) however SQL Dumps are perhaps more portable because they consist
only of SQL statements. Please refer to the General Help regarding the differences in Export types
and limitations. Currently, there is no SQL Import facility provided in Visual Field.
Max Dump File Size
This is the maximum file size that will be used when creating a Dump File. Dump Files will have
a maximum of this size. During the creation of the Dump, if a write exceeds this file size, the
Dump creation will be unsuccessful. This setting generally does not need to be changed. If a Dump uses less
space than this limit - there should be no issues when creating the Dump. This limit is both
browser and device dependent. At the time of writing, this limit was typically 2Gb on most devices.
If your Dump will exceed this limit, you may need to break up your Dump by using the "Export Single
Table/View" option.
Export Single Table/View
This will enable you to create an SQL Dump of a single Table or View. An SQL Dump will consist of
SQL DDL drop and create instructions. And in the case of a table, index DDL creation and DML data load
instructions. SQL Dump Files can then possibly be imported into another database such as sqlite or
PostgreSQL.
Export Entire Database
This will enable you to create an SQL Dump of all of your Visual Field Database objects (tables,views,indexes)
along with associated table data. Such Dumps can then possibly be imported into another database such as
sqlite or PostgreSQL.
Omit Metadata Objects
In the case of a full SQL Dump, you can omit Visual Field metadata objects by selecting this checkbox.
Metadata objects are those database objects that begin with "VF_". Such metadata objects partly
make up the sequencing, workflow, URL/File table definitions, etc, that you may have defined. Visual
Field Metadata objects are possibly of little use in a non browser based database (outside of Visual Field).
Config
This pane enables the setting of various application wide values.
Database Name
This will specify the WebSQL database name. Currently disabled and fixed as "vf"
Database Size
Specify the size of the WebSQL database in Mb.
Show Status Pane during Sequence Execution
The Status Pane shows a broad summary during Sequence Execution. It is set to be shown
by default (with this setting) and it is generally useful once your report/workflow is deployed
in a production sense so that some general feedback is given to the user. Unchecking this and
running a sequence will switch between pertinent panes during sequence execution. This might be
more useful during development so you can monitor the details of the sequence execution but could
be distracting once a report is finalised. Once you finalise and debug your sequence, you should
re-check this checkbox.
Truncate display of displayed fields after
This sets a limit on the maximum number of characters that will be displayed in Visual Field for
any given result set. Eg, Browse, SQL output and Table, Chart and Map Visualizations. This helps
mitigate against potential browser issues (memory crash) due to extremely large table fields as
the display will be truncated after this length. Truncation is not applied to CSV downloads.
Table Page Size
This sets a limit to the pagination for SQL output, Table Browse and Table Visualizations. Setting
a page size and pagination of output helps mitigate against potential browser issues (memory crash).
Map Base Layer Tile URL
Enter the Tile URL for use in any Map Visualization. Map Tile URL's should be in EPSG 3857 datum.
To enable Offline Map Tile store, Tile URL's will need to be CORS enabled. A sample of Tile URL's
is available by selecting a Sample Base Layers.
Map Base Layer Attribution
Enter the Map Base Layer Attribution that for the Map Base Layer Tile URL. This will be displayed
on Map Visualizations.
Save the specified Configuration.
Reset the Configuration to default Settings.
Import Media
This pane facilitates the import of media files into your Visual Field database.
Media Files may be of type; Image, Audio or Video. Multiple files may be imported
at a time. Simply drag and drop your media files onto the Import area. Individual
file sizes are limited to a maximum of 40Mb. Files larger than 40Mb or non Image,
Audio or Video files will be rejected. Files will be inserted into the VF_MEDIA
table using the file name as the primary key. If an existing entry in VF_MEDIA exists
for a file of the same name, then that will be replaced the new media - otherwise
a new entry will be made. If Exif data is present in your media files, then this will be
extracted and inserted into a table called VF_IMG_EXIF. VF_IMG_EXIF is linked to
VF_MEDIA by using the FILE_NAME column as the key. There may be multiple rows in
VF_IMG_EXIF for a given file name. If the embedded Exif contains extended parameters
such as XMP tags, etc (eg, from Drone Imagery), then these extended Exif values will
also attempted to be extracted and placed into the VF_IMG_EXIF. Such extended Exif
values can be distinguished by the CATEGORY field in VF_IMG_EXIF.
It is assumed that your browser will be capable of displaying your particular
media. It may be necessary to convert your media into a browser enabled format
prior to Import. Because of the 40Mb limit and otherwise, you may need to consider
reducing the file size prior to Import. Whilst raw files upto 40Mb may be imported,
you may achieve better browser response time by converting imported media prior to
Import. Eg, converting Video to a format optimised for Browser viewing. Or resizing
your Images for Browser viewing. This is optional however.
From within Visual Field, Media fields can be viewed just like regular fields from
Browse functions and form SQL statements, etc.
Comments
You can optionally specify a simple Comments text as part of you Media
Import. Comments will be inserted into the VF_MEDIA COMMENTS field and
may be useful for filtering by at a later point in time.
API Guide
The METADATA that can be generated and imported back into Visual Field is essentially
a simplistic JSON object with 4 key elements. This may be optionally URI encoded but
underlying it is still a simple JSON object. This API page is included for those
who may wish to automatically generate Visual Field metadata such as an automated
report for example. The 4 elements in the metadata are;
VERSION
This is the Visual Field metadata version number. It is not the same
as the Visual Field Release number but the Version number represents the
structure of the metadata. The following describes the metadata structure
for Version 1. This is currently the only version supported for import.
This should be set to 1 for any generated metadata.
RESET_DB
Either "true" or "false". Indicates whether the WebSQL database Visual
Field dictionary objects should be dropped and recreated upon page load.
Applicable only when passed in using the METADATA parameter in the Query
String and is ignored for manually imported metadata. This should normally
be set to "false" or omitted. Should you need to reset the WebSQL database,
then set this to "true". This option can/may be disabled by changing some
Internal Settings to this page.
CONFIG
An array of Config Item values for Visual Field. Config Values typically
broadly affect the behaviour of Visual Field. Please refer to the config
section displayed below for the specifics of what needs to be included in
the CONFIG array. The CONFIG array needs to be included with the correct
number of elements.
TABLES
The TABLES element is an object of a subset of Visual Field tables that
are used to represent the core Metadata structured elements. This is a subset
of all of the Visual Field tables and views. Please see the Tables section
displayed below for a listing of these tables. TABLE elements are simply
an array of table rows (another array). TABLES need to be included
with the correct table elements and the correct number of elements for each
table row to be imported successfully.
CONFIG
The CONFIG element is made up of an array with the following entries;
TABLES
The TABLES element is made up of an array of elements that are the Visual Field
internal tables that are represented in the metadata. TABLE element themselves
are then made up of an array of rows. The list of TABLES that can be included
in metadata definitions is a subset of all of the Visual Field internal tables.
Select a TABLE below to detail the row components to be included in a TABLES
definition entry;
CUSTOM FUNCTION (ID)
Custom Functions are identified by a numeric ID within Visual Field. This is
an extensible array should you wish to add your own function definitions
(refer to the General Help section). To assist in identifying a Custom Function
definition and its ID details, please choose from the following selection. Custom
functions that are deterministic in that their output is solely dependent upon their
input parameters, should be defined as "type=immutable".
General Help
Mandatory, Optional input fields and Editable Content
This Styling Indicates a Mandatory Input Field
This Styling indicates an Optional Input Field
This Styling Indicates an Editable Data Content
File Import
If your Import File is in CSV standards format (RFC 4180) with a 1 row header containing field names, then
you can generally accept the default settings and import your data without needing to change
any settings. Many open data CSV datasets are in this format.
CSV parsing of multi line fields
The internal algorithm in which Visual Field parses import delimited files (eg, CSV) varies
dependent upon the size of the input file. For files less than 20Mb, the parser will perform
a full standards parse (RFC 4180) on the input file as a whole (internally done by the fantastic
jQuery-csv parser). So any multi-line input fields (fields containing carriage returns or line feeds)
should be parsed correctly. However, full file parsing of the input files in this way is not
scalable for extremely large input data files. And this can cause memory utilisation issues within the
browser (ie, crash) if this approach were to be adopted for all file sizes. To mitigate against this,
there is an internal threshold set in Visual Field of 20Mb. For files larger than this 20Mb threshold,
the input file will be split line-by-line and processed incrementally (ie, CSV parsed line-by-line).
This enables Visual Field to ingest extremely large CSV, or other delimited, files (without having to parse
the file as a whole). However for such large files (larger than this 20Mb threshold), multi-line
input fields will typically cause a parse failure of those particular lines. In actuality, most of
the very large delimited files, there are typically no multi-line fields. So in general, this 20Mb
threshold for parsing approach - should go unnoticed and should not cause any issues -
it also means that the Visual Field input file ingestion is very scalable for extremely large files
with little to no inconvenience. Please refer to the Internal Limits section below.
Querying Columns containing spaces
If you are not accustomed to referencing database columns containing spaces when using SQL or
similar, you may need to enclose those fields either in double quotes or square brackets.
For example, suppose you have a table called SCHOOLS and one of its fields is "Upper Grade",
then you could query this by something like;
select "Upper Grade" from SCHOOLS;
Or,
select [Upper Grade] from SCHOOLS;
Casting to correct datatypes
When importing delimited data (from the File Import or URL Import), for the created database table
all of the field datatypes will be TEXT. No heuristics are applied to attempt to ascertain import
field datatypes. Columns are simply all created as TEXT datatype and you may wish to CAST
these to other datatypes. Casting can easily be done by various ways. You can cast in subsequent
SQL queries. You may also wish to consider creating a task that runs after your
table import and drops/(re)creates a database view that does the appropriate datatype casting.
That is, the fields in the view could be cast to the appropriate datatypes. Casting is not
strictly important in general - you can typically query numeric and string values in a similar way.
However casting to the correct datatypes may become important when you start to relationally join
tables together by SQL joins. Also, imported Query String Parameters placed in the
VF_QUERY_STRING table are created as "TEXT" - and again they may need casting to
appropriate datatypes if you relationally join these to other tables via SQL queries
or views.
create view if not exists SCHOOLS_GRADE
as
select cast("Upper Grade" as INT) "Upper Grade",
"Campus Name"
from SCHOOLS;
group_concat
There are several Custom Functions in Visual Field that require an array input by way of a delimited list.
That is typically a list of values separated by a comma to form an input array of values. This may initially
seem difficult to produce from SQL but thankfully, within WebSQL (sqllite), there is the excellent
group_concat function. This is a string aggregation function with an optional delimiter.
For example, if you wish to apply a statistical Custom Function against all lower grade values
from the SCHOOLS table, you could prepare input to the Custom Function by a statement similar
to the following;
create table if not exists SCHOOLS_LOWER_GRADES
as
select group_concat("Lower Grade",',') as lower_grade_list
from SCHOOLS;
There are also several Spatial Custom Functions in Visual Field (courtesy of the fantastic Turf js library)
that accept an array of geometries as input. Again, the group_concat function may be useful in producing a list
(array) of WKT geometries for input. In this case however, WKT geometries may contain commas, so
it is safer to enclose the grouped geometries in double quotes (delimiter). Eg, suppose our SCHOOLS table
has a WKT geometry field called "Location 1", then to get a list (array) of geometries, you
could use the following;
create table if not exists SCHOOLS_GEOMS_LIST
as
select group_concat('"'||"Location 1"||'"',',') as geom_list
from SCHOOLS;
But what about the case where your input may contain double quotes or commas? The approach
here is to take group_concat further with the replace function and replace any occurrence of
a double quote with a double double quote. In this case you will essentially be producing a
standards based CSV input list (array) from SQL! Eg, suppose we wish to make a listing of the
"Campus Name" field in the SCHOOLS table and that field may contain either commas or double quotes,
then the following approach is suggested;
create table if not exists SCHOOLS_NAME_LIST
as
select
group_concat('"'||replace("Campus Name",'"','""')||'"',',')
as name_list
from SCHOOLS;
If for some reason you need the inverse function to group_concat, please see the Custom
Function Misc:ListSplit - which takes a list (delimited array) and splits the results
out to individual rows in the result table.
Editable Data Content
Editable Data Content enables you to easily change a database field value
by simply clicking on the value and changing the content in page. Your
WebSQL database will be updated with the new value.
Slightly different styling is used to indicate an Editable Data Content and
it may be displayed in;
Browse Screens - directly in the displayed result table
Table Visualizations - directly in the displayed result table
Map Visualizations (including Photo Map) - in Map Feature Popups
Media Visualizations - in Media Info Popups
There are several limitations that will cause a data value to not be able
to be edited in page. These limitations are;
The Content is based on a database View instead of a Table.
The Content is not a simple scalar field. Eg, it cannot be edited if
it is made up of;
A hyperlink
Media - eg; Image, Audio or Video
The Content has had a formatting function applied.
The Content has been truncated for display. Refer to the Config
Section for setting length limits of displayed fields.
Exceptions to Guidelines relating to VF_ dictionary objects
As mentioned in the Reference Guide section, the Visual Field data dictionary is
also maintained in the same WebSQL database that your tables will reside. The Visual Field
dictionary tables and views are generally prefixed with "VF_" and there should generally
be no need to query or run DML directly against these dictionary objects. There
are a few specific exceptions to this guideline however, namely; VF_QUERY_STRING,
VF_DEVICE_ATTRIBUTRES and VF_TILE_STORE.
VF_QUERY_STRING
This table contains the name value pairs of any Query String parameters passed to Visual
Field in a GET context.
To obtain Query String expressions within SQL, it may be necessary to query the VF_QUERY_STRING
table directly. No shortcut technique is provided - it is up to you to manually query this table.
Some points worth noting also are;
The passed Query String values are of type TEXT. As per mentioned above, if you
are joining such values to other tables, you may need to explicitly CAST such
values correctly either as part of the join or otherwise.
Multi value parameters are acceptable and can be passed in so you may need to account
for that also in any SQL referencing the VF_QUERY_STRING table.
Here are some SQL examples of querying VF_QUERY_STRING;
Suppose our URL is; vf.html?A=-2&B=0&B=1
select "Campus Name"
from SCHOOLS
where "Lower Grade" =
(select cast(value as INT)
from VF_QUERY_STRING
where name = 'A');
And for a multi valued parameter;
select "Campus Name"
from SCHOOLS
where "Lower Grade" in
(select cast(value as INT)
as "Value"
from VF_QUERY_STRING
where name = 'B');
VF_DEVICE_ATTRIBURES
Similar to VF_QUERY_STRING the VF_DEVICE_ATTRIBUTES will be populated with a Collect Device Attributes
task invoked and acceptance by the user. Device Attributes are similar to VF_QUERY_STRING in that
they may need to be explicitly queried and CAST to appropriate datatypes.
VF_TILE_STORE
The VF_TILE_STORE houses stored offline Map Tiles. This table is initially empty and gets populated
if a user clicks the button in a Map Visualization and
downloads Map Tiles for possible Offline use. Map Tile images must be CORS enabled and are simply
stored in the VF_TILE_STORE table as an encoded array of Uint8 values. This is referred internally
as ENCODING_ALGORITHM 1. However, more advanced users should recognise that the VF_TILE_STORE
can be Browsed in Visual Field just like any other table and extracted as a CSV download. So,
if you are technically impelled, you could create a tile store, extract it, and make the CSV
available as a web service. You could then define a Table (Import URL) as part of a Page load,
Run Menu, or Sequence that will fetch the web accessible CSV Tile Store and reload it into the
VF_TILE_STORE table. You will then be able to create a mini application complete with an
Offline Map Tile store. Please Note, as mentioned in the Reference Guide, downloading Map
tiles for Offline use may be subject to your Tile providers usage policies.
Preparing multi table input for Custom Function invocation - an example
Suppose we have 2 tables; SCHOOLS and HAZARDS. The SCHOOLS table contains a point WKT
geometry ("Location 1") and the HAZARDS contains a polygon WKT geometry ("the_geom").
Suppose we want to run the Turf:booleanPointInPolygon test against these 2 tables. To
do this, it will be necessary to combine these prior for input to the
Custom Function into a single table. The following SQL extract demonstrates how to
possibly do this by way of a preparing a Cartesian Product. You could then use this joined
table as input to the Custom Function and link the output of the Custom Function by way of
referencing the appropriate ROWID's back to the source tables;
create table if not exists SCHOOLS_HAZARD
as select s.rowid as SCHOOLS_ROWID,
s."Location 1" as the_point,
h.rowid as HAZARDS_ROWID,
h."the_geom" as the_polygon
from SCHOOLS s, HAZARDS h;
Chart and Map - Table Visualization Fallback
Table Visualizations in Visual Field are paginated in the number of rows displayed on a page and a limit
also set for the maximum field display length. As such, Table Visualizations and SQL Statement (output)
is intended to be much more scalable and allow far greater result sets. Browse and Table Visualizations
are written in a way that should enable indefinite scalability where SQL Statement (output) is scalable to
about 512Mb result set size. However, this is far greater than what is practical as a Chart or Map
Visualization. And a Table Visualization should be fully scalable (and render without crashing the browser)
even for extremely large tables. This is currently not the case for Chart and Map Visualizations.
Currently, Chart (using the Chartjs library internally) and Map (using the Leaflet library internally) Visualizations
typically attempt to render (or process) the entire result set. This tends to mean that, currently, such
visualizations may not scalable for extremely large datasets and may cause memory issues in the browser
(ie, may crash the browser) if left unbounded. To mitigate this, there are some fixed internal fallback
thresholds in Visual Field that will render a Table Visualization instead of a Chart or Map after a certain
number of rows. Please refer to the Internal Limits section below for more detail. Once a Chart or a
Map result set result set exceeds a certain number of rows - a Table Visualization will be shown
instead. To avoid such fallbacks, you may need to either reduce or somehow aggregate your data to produce a
smaller result set before showing as a Chart or Map Visualization.
Visual Field - Internal Limits
The following are some fixed internal limits within Visual Field;
20Mb - Maximum full standards parse (RFC 4180) CSV file size. Larger CSV files
will be parsed line-by-line.
10,000 - Maximum number of rows in Chart Visualization result set before falling back to Table Visualization.
30 - Maximum number of rows in Pie Chart Visualization result set before Pie Chart header legend will be omitted.
20 - Minimum number of rows in Chart Visualizations result set for the Chart to be pan and zoom enabled.
120,000 - Maximum number of rows in Map Visualization result set before falling back to Table Visualization.
3,000 or any coincident Points - Maximum number of rows in Map Visualization Point only result set before Points will clustered.
100 unsorted rows - Maximum number of rows displayed in Visual Field mini-lists.
Visual Field - Soft Limits
The following are some observed limits;
512Mb - Maximum SQL Statement result set limit. If you generate a result set greater than this size
you may encounter browser memory issues (browser crash). For "select" statements, consider using
the OFFSET and LIMIT directives to reduce the total result set.
512Mb - Maximum CSV Download size. If you generate CSV greater than this size you
may encounter browser memory issues (browser crash). You may need to break up your
CSV downloads into chunks by using the SQL Statement pane and specifying appropriate
OFFSET and LIMIT directives in order to reduce the total result set.
Brief Discussion of Differences and Limitations between Metadata, Export Dump and SQL Dump
Visual Field Metadata Exports primarily define the key aspects of your Visual Field
configuration. That is in respect to what you define in various Visual Field screens
in the way of CSV file ingestion, defined sequences and visualizations for example.
Visual Field Metadata is primarily intended to be useful if you are using Visual Field
in an online (web) capacity, or a reporting, or mini data-driven application. Metadata
is a JSON representation of your Visual Field configuration and can be imported into
Visual Field by use of the METADATA parameter in the Query String when you invoke
vf.html as a standalone file or from a web page. Visual Field Metadata can be used
in both an online and offline capacity to define a particular Visual Field configuration.
A Visual Field Export Dump is a variable width csv file of encoded DDL and DML instructions.
Visual Field Export Dumps are specific to Visual Field and should be able to be imported
into Visual Field using another device or HTML5 WebSQL browser running Visual Field.
As such Visual Field Dumps are intended to be a robust offline way of transferring
your database objects between devices, browsers, or just making a backup.
SQL Dumps just consist of a series of DDL and DML SQL statements. SQL Dumps are intended
to be a portable mechanism to facilitate the offline transfer of your Visual Field
objects to another database such as sqlite or PostgreSQL. If you are using Visual
Field for offline asset management, this SQL Dump option may be useful to send you
offline edits to a central database.
However, SQL Dumps are perhaps not as robust as Export Dumps for a number of reasons.
SQL Dumps are just SQL statements and are not encoded. This may cause
issues if you are using non-ascii (non-English) data or non-ascii object names.
Ie, UTF8. Importing UTF8 database objects or data into another database
may be problematic when running as SQL in another target database. And
hence may cause SQL parsing errors in your target database.
Another significant limitation with SQL Dumps, is that, at the time of writing,
a single WebSQL SQL statement is limited to 1,000,000 characters.
Unfortunately,
this is a significant limitation and pretty much means that the exportation of
large database objects (such as Audio, Image or Video objects) is not practical in
the way of an SQL Export. So again, whilst portable, the SQL Export is perhaps not
as robust as the Export Dump facility. Meaning SQL Dumps are probably best suited
to exporting tables with field data no greater than 1,000,000 characters.
There is currently no "SQL Import" facility provided within Visual Field.
Storage Allocation Error
If you experience this error during the Import phase (there was not enough remaining storage space, or the storage quota was reached
and the user declined to allow more space), it may indicate that a request for
the initial WebSQL database storage was initially successful however during
actual allocation, your browser is enforcing quota restrictions on the amount of usable storage/disk space on
your device for TEMPORARY objects. Common quota restrictions for Chrome and Opera on Windows and Android
platforms for TEMPORARY objects (ie, WebSQL database) may mean that it is necessary to have up to 10 times
the required database storage space available. Such quota restrictions commonly apply the following rules;
1) only 50% of remaining storage/disk space on your device will be considered in the usable "pool", 2) of the usable
"pool" a single web page may only be permitted to use a maximum of 20% of the pool. In other words, you may need
up to 10 times free space on your device that what your Offline Visual Field WebSQL database will occupy.
Application Usage
Visual Field is intended to be able to be used in any of the following ways;
Online Web Application
Offline Web Application
As a stand alone html file
As an Installed Progressive Web Application
Online Web Application
For an online web application, just install the vf.html file in your intended web server directory.
This will allow Visual Field on your web server to be used in an online way.
Offline Web Application
For an offline web application, you will need to install both vf.html and the vf_service_worker.js
files in your intended web server directory. This will allow Visual Field to be loaded in a browser even if your
users do not have an internet connection (after initial load). Both the vf.hml and vf_service_worker.js will
need to reside in the same directory.
As a stand alone html file
Visual Field can function as a stand alone html file just by loading the vf.html file in your
browser using a file:// protocol context. That is, no web server is necessary to use the full functions
of Visual Field. This usage option may be useful if you are unable to install Visual Field on a web server
or unable to install it as a Progressive Web Application.
As an Installed Progressive Web Application
Progressive Web Applications are intended to be able to be installed on your device by using HTML
component "Add to Home Screen" (A2HS). As of version 3.1.0, Visual Field is typically able to be installed
on your device by a simple click on the "Install" option under the "Help" tab. This enables a quick,
simple, non-technical install of Visual Field on to your users device. In order to support Visual Field
as a Progressive Web Application, you will need to place vf.html, vf_service_worker.js,
vf.webmanifest and the favicon.svg all 4 files on to your web server in the same directory.
Should all these files be installed on your web server, and your web server can serve these over https,
then end users should be able to successfully invoke the "Install" option to add Visual Field to their
device as an installed Progressive Web Application. Ie, a simple, non-technical, install on their device.
Status
Tasks Remaining
Current Task Id
Current Task Type
Current Task Description
URL Fetch Status
Table Import Status
Custom Function Status
SQL Statement Status
About
Copyright (c) 2019-2021 Harris Hudson
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list
of conditions and the following disclaimer in the documentation and/or other materials
provided with the distribution.

Import Media
Geotagged Photo (Media) Map
From
To
Search
Please refer to Help section regarding limitations of this facility.