Command Buttons & Monitors

commands.htm (hint: right click, save as)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!--
  Test/Development/Documentation page; install as plugin to test
-->

<style>
h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}
</style>

<div class="panel panel-primary">
  <div class="panel-heading">Commands &amp; Monitors</div>
  <div class="panel-body">

  <p>Command execution is only allowed for an authorized session. The command API will
    output "Unauthorized" and a Login button as necessary. The login state is also
    available in the global variable <code>loggedin</code>. To send the user to the
    login page and return to the current page after login, call <code>login()</code>:</p>

  <p>
    <button type="button" class="btn btn-default action-login" onclick="login()">Login</button>
    <button type="button" class="btn btn-default action-logout" onclick="logout()">Logout</button>
  </p>

  <script>
    $('.action-login').prop('disabled', loggedin);
    $('.action-logout').prop('disabled', !loggedin);
  </script>


  <h3>Command Execution on Load</h3>

  <p>To execute a command automatically on page load, simply add the <code>monitor</code> class
    to an output element, set <code>data-updcmd</code> to the command to be executed and
    <code>data-updcnt</code> to 1:</p>

  <pre class="monitor" data-updcmd="boot status" data-updcnt="1">Fetching boot status…</pre>

  <p>Output elements typically are <code>samp</code> or <code>pre</code>, as commands
    normally output formatted plain text, but any element can be used. <code>samp</code>
    by default compresses white space and has no visible area, while <code>pre</code>
    is visible and preserves all spacing.</p>

  <p><code>updcnt</code> will count down to zero and stop, or run indefinitely if started
    below zero. The execution interval can be given in <code>data-updint</code> (in seconds).
    You can set the data attributes any time using jQuery, all monitors are checked and
    updated by the framework once per second.</p>


  <h3>Command Execution on Events</h3>

  <p>To automatically trigger a monitor update on OVMS events, additionally set the
    <code>data-events</code> attribute to a regular expression matching the event(s) of
    interest. This example monitor lists the active network channels and automatically
    updates on all server connection events:</p>

  <p><pre class="monitor"
    data-events="server.*(connect|open|close|stop)"
    data-updcmd="network list"
    data-updcnt="1"></pre></p>

  <p>
    Try:
    <a class="btn btn-default" onclick="window.open('/', '_blank', 'width=400,height=500')">Open new window</a>
    <a class="btn btn-default" href="#" data-cmd="server v2 stop">Stop V2 server</a>
    <a class="btn btn-default" href="#" data-cmd="server v2 start">Start V2 server</a>
    <a class="btn btn-default" href="#" data-cmd="event raise server.fake.open">Send fake event</a>
  </p>


  <h3>Command Buttons</h3>

  <p>A bootstrap button has the base class <code>btn</code>. Add the command to execute
    as attribute <code>data-cmd</code> and optionally the output element as
    <code>data-target</code> and you're done.</p>

  <div class="row">

    <div class="col-sm-6">
      <button type="button" class="btn btn-default" data-target="#out1" data-cmd="wifi status">
        Wifi Status → <code>&lt;samp&gt;</code>
      </button>
      <samp id="out1" />
    </div>

    <div class="col-sm-6">
      <button type="button" class="btn btn-default" data-target="#out2" data-cmd="wifi status">
        Wifi Status → <code>&lt;pre&gt;</code>
      </button>
      <pre id="out2" />
    </div>

  </div>

  <p>Add class <code>samp-inline</code> or wrap in a <code>ul.list-inline</code> to place
    the output element on the same line with the button. Prefix the target with a "+" to
    append to it:</p>

  <p>
    External 12V power
    <button type="button" class="btn btn-info" data-target="+#out3" data-cmd="power ext12v on">on</button>
    <button type="button" class="btn btn-info" data-target="+#out3" data-cmd="power ext12v off">off</button>
    <samp class="samp-inline" id="out3" />
  </p>


  <h3>Combining Buttons &amp; Monitors</h3>

  <p>By combination of a button and a monitor, you can let the button start a repeated
    execution of a command: set <code>data-watchcnt</code> on the button to the number of
    repetitions (default 0) and <code>data-watchint</code> to the interval in seconds
    (default 2).</p>

  <p>
    <button type="button" class="btn btn-default" data-target="#out4"
      data-cmd="power simcom on" data-watchcnt="-1" data-watchint="3">
      Power on modem &amp; get status updates every 3 seconds
    </button>
    <pre class="monitor" id="out4" data-updcmd="simcom status" />
  </p>

  <p>Note: to stop a monitor, set <code>data-updcnt</code> to 0:
    <button type="button" class="btn btn-default" onclick="$('#out4').data('updcnt', 0)">
      Stop updates
    </button></p>


  <h3>Execute Javascript</h3>

  <p>To execute Javascript code directly (i.e. without calling <code>script eval</code>),
    simply exchange the <code>data-cmd / data-updcmd</code> attribute by
    <code>data-js / data-updjs</code>. Example:</p>

  <p>
    <button type="button" class="btn btn-default" data-target="#out5"
      data-js="JSON.print(OvmsConfig.GetValues('vehicle'))">
      Show vehicle config
    </button>
    <pre id="out5" />
  </p>

  </div>
</div>


<script>
(function(){
  /* Show page source: */
  var pagesrc = $('#main').html();
  $('.panel-heading').prepend('<button type="button" class="btn btn-sm btn-info action-showsrc"' +
    ' style="float:right; position:relative; top:-5px;">Show page source</button>');
  $('.action-showsrc').on('click', function() {
    $('<div/>').dialog({
      title: 'Source Code',
      body: '<pre style="font-size:85%; height:calc(100vh - 230px);">'
        + encode_html(pagesrc) + '</pre>',
      size: 'lg',
    });
  });
})();
</script>