{% 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 %}
{# Navigation ----------------------------------------------------------------------------------------------------#}
{# end col #} {# Content -------------------------------------------------------------------------------------------------------#}

Gizmo Showcase

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 -------------------------------------------------------------------------------------------------#}

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 %}

How it Works

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.

{# Buttons and Button Groups -----------------------------------------------------------------------------------#}

Buttons and Button Groups

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.

{% gizmo button single_button %} {% gizmo horizontal_buttons %} {% gizmo button_group vertical_buttons %}
{# Date Picker -------------------------------------------------------------------------------------------------#}

Date Picker

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.

{% gizmo date_picker %} {% gizmo date_picker date_picker_error %}
{# Range Slider ------------------------------------------------------------------------------------------------#}

Range Slider

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.

{% gizmo range_slider slider1 %} {% gizmo slider2 %}
{# Select Input ------------------------------------------------------------------------------------------------#}

Select Input

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.

{% gizmo select_input select_input2 %} {% gizmo select_input2_multiple %} {% gizmo select_input select_input2_error %} {% gizmo select_input %} {% gizmo select_input_multiple %}
{# Text Input --------------------------------------------------------------------------------------------------#}

Text 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.

{% gizmo text_input text_input %} {% gizmo text_error_input %}
{# Toggle Switch -----------------------------------------------------------------------------------------------#}

Toggle Switch

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.

{% gizmo toggle_switch toggle_switch %} {% gizmo toggle_switch_styled %} {% gizmo toggle_switch toggle_switch_disabled %}
{# Message Box -------------------------------------------------------------------------------------------------#}

Message Box

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.

Show Message Box {% gizmo message_box message_box %}
{# Table View --------------------------------------------------------------------------------------------------#}

Table View

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.

{% gizmo table_view table_view %}
{% gizmo table_view table_view_edit %}
{# DataTable View --------------------------------------------------------------------------------------------------#}

DataTable 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.

{% gizmo datatable_view datatable_default %}
{% gizmo datatable_view datatable_with_extension %}
{# Plot View ---------------------------------------------------------------------------------------------------#}

Plot 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.

{% gizmo line_plot_view %}
{% gizmo scatter_plot_view %}
{% gizmo web_plot %}
{% gizmo pie_plot_view %}
{% gizmo bar_plot_view %}
{% gizmo timeseries_plot %}
{% gizmo area_range_plot %}
{% gizmo d3_line_plot_view %}
{% gizmo d3_pie_plot_view %}
{% gizmo d3_scatter_plot_view %}
{% gizmo d3_bar_plot_view %}
{% gizmo d3_timeseries_plot_view %}
{# Plotly View --------------------------------------------------------------------------------------------------#}

Plotly View

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.

{% gizmo plotly_view my_plotly_view %}
{# Bokeh View --------------------------------------------------------------------------------------------------#}

Bokeh 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.

{% gizmo bokeh_view my_bokeh_view %}
{# Map View ----------------------------------------------------------------------------------------------------#}

Map 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.

{% gizmo map_view_options %}
{# Google Map View -----------------------------------------------------------------------------------------#}

Google Map View

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.

Click here for demo on a separate page.

{% if flash_message %}
JSON:

{{ flash_message }}

{% endif %}
{% csrf_token %} {% gizmo google_map_view google_map_view %}
{# ESRI Map View -----------------------------------------------------------------------------------------#}

ESRI Map View

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.

#}
{% gizmo esri_map esri_map %}
{# Cesium Map View -----------------------------------------------------------------------------------------#}

Cesium Map View

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.

{# Jobs Table -----------------------------------------------------------------------------------------------#}

Jobs Table

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.

{# end col #}
{# end gizmo-showcase-wrapper #} {% endblock %} {% block scripts %} {% gizmo_dependencies css %} {{ block.super }} {% gizmo_dependencies js %} {% endblock %}