コード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Azure IoT Central</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p class="title">Azure IoT Central</p>
<div id="area1">
<button type="button" id="btn1">値取得</button>
<br>
<input type="text" id="tBox" class="font-main" />
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
|
1
2
3
4
5
6
7
| .font-main {
padding: 2px;
}
#btn1 {
margin-bottom: 4px;
}
|
※{}の中は適切なものに置き換えてください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $("#btn1").on("click",async function() {
response = (await fetch('https://{your app subdomain}.azureiotcentral.com/api/preview/devices/{Device ID}/telemetry/{telemetry name}',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': {api token}
}
}
))
data = await response.json()
$("#tBox").val(data.value);
});
|
例
以下の内容の場合、javascriptのコードを示します。
- your app subdomain:iot-gr-rose-application
- Device ID:2p02xiojzry
- telemetry name:Humidity
- api token:SharedAccessSignature sr=cad…(※ここは適切なものを入れてください)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $("#btn1").on("click",async function() {
response = (await fetch('https://iot-gr-rose-application.azureiotcentral.com/api/preview/devices/2p02xiojzry/telemetry/Humidity',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'SharedAccessSignature sr=cad...'
}
}
))
data = await response.json()
$("#tBox").val(data.value);
});
|
無事表示されました
参考
