Publish Data Using An MqttCogs Shortcode

Not only can you visualize data using Mqttcogs but it is also possible to publish data to your Mqtt broker using the [mqttcogs_set] shortcode. The ability to publish data is useful, here are a couple of reasons I wanted to do this.

Number 1: I can publish data directly to my blog without having to use a generic Mqtt client.

Number 2: In the IOT (internet of things) world iot devices can be controlled by publishing appropriate messages. For example, you might be able to control your outside lights by publishing to a topic such as myhouse\lights\outside.

Remember though – you can’t have just ANYONE publishing to your broker!!

Lets start with a basic example

If you want to see the results on the page you need to subscribe to this blog and make sure you are logged in. You need to have a role of ‘subscriber’ to have the ability to publish on this page. If you aren’t logged in, you’ll see the code & graph only.

I decided to open this up. If there is a lot of ‘spam-a-lot’ then I’ll put the restriction back in. I’ve added the strikethrough to the shortcode attributes below so that you can see what I removed.

Here is the code for the graph and underneath the shortcode for publishing to the tests/blog/publishingdata topic. The results are shown underneath.

[ mqttcogs_drawgoogle options="{width:'100%'}" ]
       [ mqttcogs_data topics="tests/blog/publishingdata" ]
[ /mqttcogs_drawgoogle]

[ mqttcogs_set topic='tests/blog/publishingdata'
     minrole='Subscriber' 
     label_text='Enter a new value here:' ] 

I have used the [ mqttcogs_set ] shortcode. You’ll notice that the field is automatically populated with the last value stored in the database. I’ve used the minimum number of attributes in the shortcode that I could get away with.

topic – the fixed topic to send the new messages to
minrole – the minimum wordpress role that is required for the fields to be displayed
label_text – the label shown above the field

….but you’ll notice a problem! There is no field validation. I could enter anything into the field and it will published!!

You’ll also notice that adding a new value doesn’t automatically update the graph. The graph refresh is independent of the ‘add’. There is no link between the add and the visualization. You will need to wait until the next ‘refresh’ time for the graph to update.

Lets add some validation!

Validation is applied in the browser by using HTML5 validation. There are a number of attributes starting ‘input_’. Each is mapped directly to a HTML5 attribute on the input element. You can even change the input type to ‘range’ or ‘number’ but more about this later.

Ok, so we’ll update the attributes in the shortcode to make the field accept numeric integer values only between 0 and 50.

[ mqttcogs_set  
	topic='tests/blog/publishingdata'
	minrole='Subscriber' 
	label_text='Enter a new value here:'  
	input_type='number' 
	input_min='0' 
	input_max='50' 
	input_title='Please enter a whole number between 0 and 50' ]

We’ve now restricted the field to accept values between 0 and 50. It’ll also notify the user if the input is invalid. Our numerical entry now looks like this:

Validation to 2 decimal places

I might decide that actually I want to allow decimals, say to 2 decimal places. I could achieve this using the HTML5 step attibute:

[ mqttcogs_set  
	topic='tests/blog/publishingdata'
	minrole='Subscriber'
	label_text='Enter a new value here:'
	input_type='number' 
	input_min='0'
	input_max='50'
	input_step='0.01'
	input_title='Please enter a number between 0 and 50 to 2dp maximum' ]

You can even do sliders

You can do this by setting the input_type to ‘range’. What is rendered will depend on your browser. The result isn’t particularly pretty in firefox. There is no feedback showing what the current slider value actually is.

A full list of supported HTML5 shortcode attributes are documented here

Ok, so this isn’t very pretty?

Being pretty has never been my strongpoint. There is also a ‘class’ shortcode attribute. So we can tidy things up by specifying a class to apply

[ mqttcogs_set  
	topic='tests/blog/publishingdata'
	text='Add'
	label_text='Enter a new value here:'
	minrole='Subscriber'
	input_type='number'
	input_min='0'
	input_max='50'
	input_title='Please enter a number between 0 and 50' 
	class='mqttcogs_set' ]

My css looks something like this. I added this under the Appearance…Custom CSS option in the wordpress menu.

.mqttcogs_set label {
	display:block;
} 
.mqttcogs_set input {
	display:inline-block;
	margin-right:5px; 
} 

.mqttcogs_set input[type="text"] { 
	margin-bottom: 10px;   width:66%; 
}

….the result now looks like this. A little better!




3 Comments

I would like to publish meta_data for a user with MQTT. For example if a user in WP enter that persons meta_data filed “number of cupcakes at home” I would like to pass that information to the broker. I would also like the userID or name being part of the MQTT-topic, is it possible to configure using PHP?

Hi Anders – my plugin was written mainly to visualize MQTT data with a little bit of publish. You can use one of my shortcodes to publish to an MQTT data and use the plugin to collect that data. The data would then be in your wordpress database to allow you to visualize. That is what this page does, publishes to a topic and then displays from that topic. Just not as wordpress user meta_data….

Ok, I’ve implemented this pending check in. When you specify the topics in the shortcode [mqttcogs_data topics="sometopic/{user_login}/1/1/0/0"] you can add in curly braces and the value you want injected. It uses the WordPress user properties user_login, user_email, user_firstname, user_lastname, display_name, ID. See https://codex.wordpress.org/wp_get_current_user

Leave a Reply

Your email address will not be published. Required fields are marked *