Skip to content

Input Field

George Joseph edited this page Oct 20, 2019 · 1 revision

Derived from Element -> Widget

An "input_field" is basically a plain HTML input field.

Doesn't look like much does it. :)

{
	/*
    * All attributes of Element and Widget apply here.
    */

   "id": "my_input_field",
   
   /* field_type can be any standard type for an HTML input field */  
   "field_type": "number",
   
   /* Usually, this will be a field in a status object */
   "value": "${status.temps.bed.active}",

   /*
    * The actions to perform when "enter" is pressed in the input field.
    * "${value}" will be whatever the input field is set to when
    * the submit action is triggered.
    */	
   "actions": {"type": "gcode", "gcode": "Gsomething ${value}"}
}

You can also trigger the input field's actions by sending it an event from another widget. Here's a button that just has a checkbox and, when clicked, runs the actions on the above example. In this case, run the gcode command with the value from the input field.

{
   "type": "button",
   "style": {"width": "50px"},
   "icon": "done",
   "actions": {"type": "event", "event": DUEUI.EVENTS.SUBMIT, "target": "#my_input_field"}
}

Check out the Input composite widget that combines an input field, optional button, and optional label.

Clone this wiki locally