Quick Index
- mqttcogs_drawgoogle – draw a google visualization chart (requires mqttcogs_data child)
- mqttcogs_drawdatatable – draw a datatables table (requires mqttcogs_data child)
- mqttcogs_drawleaflet – draw data on a map using lng lat (requires mqttcogs_data child)
- mqttcogs_drawhtml – draw/replace data in html
- mqttcogs_data – extract data for use in the ‘draw’ routines
- mqttcogs_set – set a value for an mqtt topic
mqttcogs_drawgoogle
Draw a google visualization of mqtt data. Shortcode content should include an mqttcogs_data shortcode . See example
Attributes
charttype – optional, default ‘LineChart’. The google visualization chart type as shown here. Simple charts are supported, for example ‘LineChart’, ‘ColumnChart’.
options – optional javascript object literal, default ”. This is passed directly to google visualization draw method as defined here. Can be used to customize the chart. For example, for setting the legend and axes labels.
refresh_secs – optional, default ”. The refresh interval for the chart in seconds. If not set, the chart will not be refreshed.
script – optional, default ”. New version 2.2. This is a reference to a custom field that contains a javascript function. The function is used to manipulate the data client side before the chart is drawn. See here for a walk through of this attribute.
Notes
This Shortcode must contain a mqttcogs_data shortcode . This defines the data to be used in the visualization.
Example
Show the last 100 data points for a single topic and set graph legends and titles.
[ mqttcogs_drawgoogle
options="{series: {0:{labelInLegend: 'Soil'}},
title:'My graph',
height:300,
hAxis: { title: 'DateTime(UTC)',format:'d MMM HH:mm' },
vAxis: { title: 'Temp (C)' }}"
charttype="LineChart"]
[ mqttcogs_data limit="100" topics="mysensors_out/100/1/1/0/0"]
[/mqttcogs_drawgoogle ]mqttcogs_data
Specifies the mqtt data used for drawing the visualization. Shortcode should be wrapped by a mqttcogs_drawgoogle shortcode. See example below
Attributes
topics – required. A comma delimited list of topics to graph. Each topic ends up as a separate series on the final graph. For example, topics=”mysensors_out/100/1/1/0/0,mysensors_out/100/2/1/0/0″
limit – optional, default ‘100’. The maxium number of data points to be returned for each topic
from – optional, default ”. Either a negative number of days from now or a date & time in the format yyyy-mm-dd hh:mm:ss
to – optional, default ”. Either a negative number of days from now or a date & time in the format yyyy-mm-dd hh:mm:ss
order – optional, default ‘ASC’. Either ‘ASC’ or ‘DESC’
group – optional, default ”. New version 2.2. Applies grouping based on the MySQL EXTRACT() function.
aggregations – optional, default ”. New version 2.2. If a group is set, apply the aggregation to each grouped topic.
raw – options, default false. New version 3.0. If true, outputs first column as topic. Only useful when drawing tables.
Notes
If from and to are omitted. The last N data points will be returned for each topic. For example
[ mqttcogs_data limit="100" from="2016-12-01 00:00:00" topics="mysensors_out/100/1/1/0/0" ]A negative number N in the from or to field represents (current date and time) – N days. This example shows data from no more than 2 days ago restricted to a maximum of 40 data points.
[ mqttcogs_data limit="40" from="-2" topics="mysensors_out/100/1/1/0/0" ]Example
Show data for the last 24 hours using the default LineChart
[ mqttcogs_drawgoogle]
[ mqttcogs_data limit="999" from="-1" topics="mysensors_out/100/1/1/0/0"]
[/mqttcogs_drawgoogle ]
mqttcogs_drawhtml
Replaces values in the enclosed html with mqtt data. Replaces deprecated mqttcogs_get shortcode. This shortcode can be used to replace mqtt data from multiple topics and has the advantage it will refresh automatically using a single server call.
Attributes
topic – required. One or more topics. Topics should be delimited with a comma. For example topic=”mysensors_out/100/1/1/0/0, mysensors_out/100/1/2/0/0″
order – optional, either ‘desc’ or ‘asc’, default ‘desc’. Order of returned data. By default the data is ordered by descending datetime
from – optional, default ”. Either a negative number of days from now or a date & time in the format yyyy-mm-dd hh:mm:ss
to – optional, default ”. Either a negative number of days from now or a date & time in the format yyyy-mm-dd hh:mm:ss.
dateformat – optional, default blog datetime. By default will use the datetime settings of the blog. Otherwise use standard PHP date formatting strings. Eg ‘Y-m-d H:i:s’
local – optional, default ‘false’. If set to true will return blog’s localised datetime. This will depend on settings.
Notes
Note that a SINGLE piece of data is retrieved per topic. Data is returned in a nxm table ‘pivot’ table like this.
| utc | topic 1 | topic 2 | … | topic n |
| 2020-12-01 21:22:22 | 12.2 | null | null | null |
| 2020-12-01 21:22:20 | null | 23.2 | null | null |
| 2020-12-01 02:22:22 | null | null | 11.2 | null |
| 2020-12-02 11:22:22 | null | null | null | 11.5 |
Replacement syntax uses a simple {row,col} zero based syntax. This allows for either the datetime or the topic value to be extracted. In the above, topic 2 utc can be extracted using the key {1,0} and the value using the key {1,2}.
Although not documented it should be possible to set the limit attribute. You would then get n rows per topic (assuming that there are n rows per topic).
Example 1
[ mqttcogs_drawhtml topics='mysensors_out/92/1/1/0/0, mysensors_out/92/2/1/0/0' dateformat='YYYY']<h1>Sensor 1</h1>At {0,0} UTC temperature is {0,1}<h1>Sensor 2</h1>At {1,0} UTC temperature is {1,2}[/mqttcogs_drawhtml]mqttcogs_get
Deprecated version v2.3. Replace with draw_HTML above.
Returns a single piece of Mqtt data. Attributes determine if payload or datetime are returned. See example below
Attributes
topic – required. A single topic. For example, topic=”mysensors_out/100/1/1/0/0″
field – optional, one of ‘datetime’ or ‘payload’, default ‘payload’.
order – optional, either ‘desc’ or ‘asc’, default ‘desc’. Order of returned data. By default the data is ordered by descending datetime
from – optional, default ”. Either a negative number of days from now or a date & time in the format yyyy-mm-dd hh:mm:ss
to – optional, default ”. Either a negative number of days from now or a date & time in the format yyyy-mm-dd hh:mm:ss.
dateformat – optional, default blog datetime. By default will use the datetime settings of the blog. Otherwise use standard PHP date formatting strings. Eg ‘Y-m-d H:i:s’
local – optional, default ‘false’. If set to true will return blog’s localised datetime. This will depend on settings.
mqttcogs_set
Allows a user to publish data to an Mqtt Broker. The Shortcode can display most supported html input types. This includes ‘text’, ‘checkbox’, ‘range’. Shortcode will display a label and an html input element. Data is published on the onchange event of the input element.
On initialization the input is populated with the last known value for the chosen topic. If there is no last value then the value in the input_value attribute. This is coerced into an appropriate type. For example, input_value=’0′ will be set as 0. On submit the data entered into the input field is published to specified Mqtt topic. When type is set to ‘checkbox’ the values 0,1 or ‘false’, ‘true’ will be toggled. This will depend on the initial value.
See example below, in addition there is a more detailed blog here with some more examples.
Attributes
topic – required. A single topic to which data will be published. For example, topic=”mysensors_out/100/1/1/0/0″
minrole – optional, default ‘Administrator’. WordPress User role required for the Shortcode. If the user does not have the minimum role the text specified in the ‘restrictedtext’ field will be displayed.
qos – optional, one of ‘0’, ‘1’ or ‘2’, default ‘1’. Mqtt QOS (quality of service) level. A setting of 1 means ‘acknowledged’.
retained – optional, one of ‘0’ or ‘1’, default ‘0’. Mqtt retained flag. A setting of 0 means not retained. 0 is normal.
id – optional, html id attribute. A unique id will be auto generated if not provided
class – optional.
label_text – optional. Label text next after input
input_value – optional. Will be used as a default value if the topic does not have a last value
input_type – optional, default ‘text’. Written to type attribute of input element.
input_title – optional. Written to title attribute of input element.
input_pattern – optional. Written to pattern attribute of input element. Use a regex for text validation
input_min – optional. Written to min attribute of input element.
input_max – optional. Written to max attribute of input element.
input_step – optional. Written to step attribute of input element.
class – optional. Class for styling purposes
restrictedtext – optional, default ”. Text to display if user does not have sufficient privileges for this Shortcode
Notes
Html similar to the following will be inserted into the dom by the shortcode. The code below omits any input attributes, it shows the basic structure only. The span class is added so that a checkbox can easily be styled into a toggle button if required.
<div id="5df9f0141f226" class="yourclass">
<input id="mqttcogs_set_5df9f0141f226" type="text" onchange="setMQTTData5df9f0141f226()">
<label for="mqttcogs_set_5df9f0141f226">Enter a new value here<span class="sw"></span></label>
<script type="text/javascript">
function setMQTTData5df9f0141f226() {
.....the function
</div>If the user does not meet the minrole requirements (i.e if minrole was Author and current role is Subscriber) then the text displayed in the ‘restrictedtext’ attribute will be displayed. Use the yourclassfromattribute tag to style the html. See here for an example.
Currently no validation is performed on the payload!
Example
[ mqttcogs_set topic='tests/blog/publishingdata' label_text='Enter a new value here:' input_value='23' input_type='number' input_min='0' input_max='50' input_step='1']