Đọc dữ liệu từ MQTT bằng JavaScript

Step 1:

Download file JS từ CDN sau:
mqttws31.js

Step 2: demo.js để test thử như sau:

var websocket=”m15.cloudmqtt.com”;
var port=36113;
var user=”hlexxxxx”;
var pass=”wOWkJOtyyyy”;

clientID = “clientID-” + parseInt(Math.random() * 100);

// Create a client instance
client = new Paho.MQTT.Client(websocket, port,clientID);

// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

var options = {
useSSL: true,
userName: user,
password: pass,
onSuccess:onConnect,
onFailure:doFail
}

// connect the client
client.connect(options);

// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
console.log(“onConnect”);
client.subscribe(“light”);
message = new Paho.MQTT.Message(“Hello CloudMQTT”);
message.destinationName = “light”;
client.send(message);
}

function doFail(e){
console.log(e);
}

// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log(“onConnectionLost:”+responseObject.errorMessage);
}
}

// called when a message arrives
function onMessageArrived(message) {
console.log(“onMessageArrived:”+message.payloadString);
}

Step 3: chèn js vào phần head của trang html

<head>

http://mqttws31.js
http://demo.js
</head>

Step 4: chạy trang html và mở Console ra để test

Advertisements

AdminLTE template

Bài này hướng dẫn cách dùng AdminLTE tích hợp vào MVC Project

  1. Tạo project mới, chọn template ASP.NET MVC
  2. NugetPackage -> install WebHelpers.MVC5
  3. Chép các file trong thư mục Contents từ mẫu AdminLTE qua project ASP.NET MVC
  4. Thiết lập bundle css, js

Hope this help

CKEditor 4 và CFinder 3 – PHP

Hướng dẫn cài đặt CKEditor 4 và Cfinder 3

  • Tải CKEditor, CKFinder ở 2 link sau

https://ckeditor.com/ckeditor-4/
https://ckeditor.com/ckeditor-4/download/#ckfinder (3.4.2)

  • Giải nén và chép ckeditor, cfinfer vào thư mục gốc của website (web root folder)
  • Cấu hình cfinder tích hợp với ckeditor

Thay đổi $config[‘authentication’] file config.php nằm trong thư mục cfinder như sau

$config[‘authentication’] = function () {
return true; // FALSE -> TRUE
};

  • Add CKEditor vào trang web

src=”ckeditor/ckeditor.js”>
src=”ckfinder/ckfinder.js” type=”text/javascript”>

Thành phần TEXT EDITOR //TextArea
<textarea name=”editor1″ id=”editor1″ rows=”10″ cols=”80″>
This is my textarea to be replaced with CKEditor.
</textarea>
//Script for CKEditor

// Replace the with a CKEditor
// instance, using default configuration.
var editor = CKEDITOR.replace( ‘editor1’, {
filebrowserBrowseUrl: ‘ckfinder/ckfinder.html’,
filebrowserImageBrowseUrl: ‘ckfinder/ckfinder.html?type=Images’,
filebrowserFlashBrowseUrl: ‘ckfinder/ckfinder.html?type=Flash’,
filebrowserUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files’,
filebrowserImageUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images’,
filebrowserFlashUploadUrl: ‘ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash’
});
CKFinder.setupCKEditor( editor, {
skin: ‘jquery-mobile’,
swatch: ‘b’,
onInit: function( finder ) {
finder.on( ‘files:choose’, function( evt ) {
var file = evt.data.files.first();
console.log( ‘Selected: ‘ + file.get( ‘name’ ) );
} );
}
} );

 

ChartJS – Hướng dẫn sử dụng biểu đồ ChartJS

Bài viết này hướng dẫn bạn cách tích hợp ChartJS và sử dụng biểu đồ trong ứng dụng web, các bước thực hiện khá đơn giản như sau:

  • Download ChartJS và tích hợp vào trang như sau

<script src=”Scripts/Chart.min.js” />;

  • Khai báo canvas trong HTML như sau

<canvas id=”clients” width=”500″ height=”350″></canvas>

  • Load dữ liệu cho biểu đồ và vẽ biểu đồ

<script>
var barData = {
labels: [‘Italy’, ‘UK’, ‘USA’, ‘Germany’, ‘France’, ‘Japan’],
datasets: [
{
label: ‘2010 customers #’,
fillColor: ‘#382765’,
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: ‘2014 customers #’,
fillColor: ‘#7BC225’,
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};

var context = document.getElementById(‘clients’).getContext(‘2d’);
var clientsChart = new Chart(context).Bar(barData);
</script>

Hướng dẫn sử dụng DataTables

Các bước dưới đây hướng dẫn cách sử dụng DataTables pluggin

  1. _Lauout.cshtml

Chèn đoạn code sau vào phần

<head>
….
<link href=”https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css&#8221; rel=”stylesheet” />
</head>

Chép đoạn code sau trước thẻ đóng </form>

src

2. Trong trang index.cshtml hoặc trang bất kỳ dùng bảng

1) Chỉnh sửa lại id của bảng và class như sau

<table class=”display” id=”mytable”>
<thead>
<tr>
<th>

//Những phần highlight là những nội dung thay đổi và bổ sung
2) Trước vòng lặp để hiển thị dữ liệu cho bảng, bổ sung thêm thẻ <tbody>
<tbody>
@foreach (var item in Model)
{

….

}
</tbody>

3) Chèn thêm đoạn mã sau vào cuối trang Index.cshtml hoặc trang sử dụng bảng bất kỳ
@section scripts
{
    $(document).ready(function () {
        $(‘#mytable’).DataTable();
    });
}

Bootstrap Dropdown menu is not working

Hướng dẫn dưới đây giúp khắc phục lỗi Bootstrap Dropdown không hoạt động (Bootstrap Dropdown menu is not working)

Khắc phục:

  1. Thứ tự file JS đặt trước file CSS trong phần head của trang
  2. Thứ tự file Jquery.js đặt trước bootstrap.js

src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js“>

src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”>

<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#8221; integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>