{% extends "page.html" %} {% load static tethys_gizmos %} {% block title %}- Gizmo Showcase{% endblock %} {% block import_gizmos %} {% import_gizmo_dependency bokeh_view %} {% import_gizmo_dependency plotly_view %} {% endblock %} {% block styles %} {{ block.super }} {% gizmo_dependencies global_css %} {% endblock %} {% block global_scripts %} {{ block.super }} {% gizmo_dependencies global_js %} {% endblock %} {% block bodytag %}data-spy="scroll" data-target="#showcase_nav_list" style="position: relative;"{% endblock %} {% block primary_content %}
Template Gizmos are building blocks that can be used to create beautiful interactive controls for web apps. Using gizmos, developers can add date-pickers, plots, and maps to their templates with minimal coding. This page provides the documentation developers need to user Gizmos.
{# Quick Start -------------------------------------------------------------------------------------------------#}What does "minimal coding" mean? Take a look at the following example. Let's say you want to include a date picker in your template using a gizmo. First, import the DatePickerOptions class and initialize a new object with the configuration options for the date picker (more on that later) in your view/controller for the template and add it to the context:
from tethys_gizmos.gizmo_options import DatePickerOptions
def my_view(request):
date_picker_options = DatePickerOptions(name='date1',
display_text='Date',
autoclose=True,
format='MM d, yyyy',
start_date='2/15/2014',
start_view='decade',
today_button=True,
initial='February 15, 2014')
context = {'date_picker_options': date_picker_options}
return render(request, 'path/to/my/template.html', context)
Next, open the template you intend to add the gizmo to and load the tethys_gizmos library. Be sure to do this somewhere near the top of your template—before any gizmo occurrences. This only needs to be done once for each template that uses gizmos.
{% templatetag openblock %} load tethys_gizmos {% templatetag closeblock %}
Then, use the gizmo tag to insert the date picker anywhere in your template. Pass the the options dictionary that you passed to the template from your view as arguments:
{% templatetag openblock %} gizmo date_picker_options {% templatetag closeblock %}
All together your template may look something like this:
{% templatetag openblock %} extends "tethys_apps/app_base.html" {% templatetag closeblock %}
{% templatetag openblock %} load static tethys_gizmos {% templatetag closeblock %}
{% templatetag openblock %} block app_content {% templatetag closeblock %}
{% templatetag openblock %} gizmo date_picker_options {% templatetag closeblock %}
{% templatetag openblock %} endblock {% templatetag closeblock %}
Gizmos are composed of HTML, JavaScript, and CSS. When the template is rendered, each of the gizmo tags are replaced by the HTML that is needed to render the gizmo. All gizmos accept a Python dictionary with options for configuring the gizmo. This page provides live demos of each gizmo with links to code examples and explanations of the options. The tethys_gizmos library must be loaded at the top of the template to provide the gizmo template tag.
The button and button group gizmos can be used to generate a single button or a group of buttons, respectively. Groups of buttons can be stacked horizontally or vertically. This gizmo is a wrapper for Twitter Bootstrap buttons.
For example code and an explanation of options see Gizmo Options Object API for Button and Button Group.
Date pickers are used to make the input of dates streamlined and easy. Rather than typing the date, the user is presented with a calendar to select the date. This date picker was implemented using Bootstrap Datepicker.
For example code and an explanation of options see Gizmo Options Object API for Date Picker.
Sliders can be used to request an input value from a range of possible values. A slider is configured with a dictionary of key-value options. The table below summarizes the options for sliders.
For example code and an explanation of options see Gizmo Options Object API for Range Slider.
Select inputs are used to select values from an given set of values. Use this gizmo to create select inputs and multi select inputs. This uses the Select2 functionality.
For example code and an explanation of options see Gizmo Options Object API for Select Input.
The text input gizmo makes it easy to add text inputs to your app that are styled similarly to the other input snippets.
For example code and an explanation of options see Gizmo Options Object API for Text Input.
Toggle switches can be used as an alternative to check boxes for boolean or binomial input. Toggle switches are implemented using the excellent Bootstrap Switch project.
For example code and an explanation of options see Gizmo Options Object API for Toggle Switch.
Message box gizmos can be used to display messages to users. These are especially useful for alerts and warning messages. The message box gizmo is implemented using Twitter Bootstrap's modal.
For example code and an explanation of options see Gizmo Options Object API for Message Box.
Table views can be used to display tabular data. The table view gizmo can be configured to have columns that are editable. When used in this capacity, embed the table view in a form with a submit button.
For example code and an explanation of options see Gizmo Options Object API for Table View.
DataTable views can be used to display, search, and sort tabular data. Many of the DataTable options are supported and can be added by using the name of the input value for DataTables. For more information about DataTables, see the DataTables website
For example code and an explanation of options see Gizmo Options Object API for DataTable View.
Plot views can be used to generate interactive plots of tabular data. All of the plots available through this gizmo are powered by the Highcharts JavaScript library.
For example code and an explanation of options see Gizmo Options Object API for Plot View.
Highcharts is not free and open source, though it can be used for free under certain conditions. Please familiarize yourself with Highcharts JS Licensing before using it.
Plotly views can be used to create interactive charts using the Plotly python library. For more information about Plotly, see the Plotly website
For example code and an explanation of options see Gizmo Options Object API for Plotly View.
Bokeh views can be used to create charts using the Bokeh python library. For more information about Bokeh, see the Bokeh website
For example code and an explanation of options see Gizmo Options Object API for Bokeh View.
The Map View gizmo can be used to visualize maps of spatial data. Map View is powered by OpenLayers 4, an open source pure javascript mapping library.
For example code and an explanation of options see Gizmo Options Object API for Map View.
NOTE: Do not create more than one Map View gizmo on a page at any given time.
Click here for demo on a separate page.
The Google Map View is powered by Google Maps 3. It has the drawing library enabled to allow geospatial user input. An optional background dataset can be specified for reference, but only the shapes drawn by the user are returned (see Retrieving Shapes section).
For example code and an explanation of options see Gizmo Options Object API for Google Map View.
NOTE: Do not create more than one map on a page at any given time.
Google Maps API is not free and open source and it is only free to use under certain conditions. Please familiarize yourself with Google Maps API Licensing before using it.
Click here for demo on a separate page.
{{ flash_message }}
The ESRI Map gizmo can be used to visualize ESRI ArcGIS web maps and layers. ESRI Map is powered by ArcGIS API for Javascript.
For example code and an explanation of options see Gizmo Options Object API for ESRI Map.
{#NOTE: Do not create more than one ESRI Map gizmo on a page at any given time.
#} {#Click here for demo on a separate page.
#}The CesiumMapView gizmo can be used to harvest the power of CesiumJs. Cesium is powered by Cesium API for Javascript.
For example code and an explanation of options see Gizmo Options Object API for Cesium Map.
Click here for demo on a separate page.
The Jobs Table gizmo can be used to track the progress of jobs that are processing.
For example code and an explanation of options see Gizmo Options Object API for Jobs Table.
Click here for demo.