Arduino :: Lecture & TIPs

[ThingSpeak] 플러그인 (Plugins) 기능 활용하기

ThingSpeak 에는 기본적으로 채널에 기록하고, 기록한 내용을 읽어들이는 기능 이외에 Plugins (플러그인) 라는 기능을 제공하고 있습니다.

Plugins 는 ThingSpeak 에서 제공하는 각각의 차트나 뷰 이외에 앱 형식으로 코드를 입력하여 사용자의 입맛에 맞는 뷰를 채널 내에 추가할 수 있도록 제공되고 있는 기능인데요.

일반적인 웹에서 지원하는 CSS 와 HTML, Javascript 를 활용하여 구현할 수 있도록 구성되어 있습니다. 쉽게 사용할 수 있도록 템플릿 형식으로 Google Gauge 나 다중 항목으로 구성된 차트를 선택할 수 있는 옵션도 존재합니다.

 

 

HTML (Hypertext Markup Language) 이란 무엇일까요?

HTML 은 Hypertext Markup Language (하이퍼텍스트 마크업 언어) 의 약자입니다. 웹 개발자와 운영자가 웹 사이트의 구조를 만들 수 있는 비교적 단순하지만 강력한 프로그래밍 언어로 볼 수 있는데요. 블로그 게시글에 있는 어떤 문장을 굵은 글꼴로 표시하고 싶다면, HTML을 사용해서 쉽게 작업할 수 있습니다. HTML을 사용하면, 어떠한 텍스트 파일에서도 태그 (Tag) 를 이용해서 다양한 효과, 그래픽, 폰트, 색상을 커스터마이징 할 수 있습니다. 만일 예전에 어떤 종류의 프로그래밍 언어도 사용해 본 경험이 없다 하더라도, HTML은 프로그래밍 언어를 배울 수 있는 좋은 시작점이 될 수 있습니다. HTML은 Mark-Up (표기) 언어이며, CSS 와 자바스크립트는 HTML을 보강하는 언어이기 때문에 HTML을 가장 먼저 배우는 것이 좋습니다.


– HTML에 대한 내용을 기본적으로 이해하고 있다면, 웹사이트에 대한 제어와 유연성을 크게 높일 수 있습니다.
– HTML 코드에 대한 지식을 갖고 있다면, 사용자가 직접 변경할 수 있습니다.
– 웹 개발을 도와주는 플랫폼들은 웹사이트 디자인에서 필요한 복잡한 기능들은 자동으로 구현하는 경우가 많기 때문에, 일부 사소한 변경사항은 사용자가 HTML을 활용해서 직접 처리할 수 있습니다.

 

CSS (Cascading Style Sheet) 란 무엇일까요?

CSS 는 HTML 구성 요소들이 표시되는 방법을 개선하는 데 주로 사용되는 스타일 시트 (style sheet) 입니다. CSS는 정적인 (static) 특성을 가지고 있지만, 웹사이트를 시각적으로 더욱 매력적으로 보이게 만드는데 사용될 수 있습니다. 페이지를 세련되며 우아하게 만들고 싶다면, CSS가 그러한 목적에 맞는 프로그래밍 언어입니다. CSS에 대한 내용을 기본적으로 이해하고 있다면, 웹사이트의 전반적인 모양과 느낌에 변화를 줄 수 있습니다. 즉, 브랜드의 미학적인 요소에 맞게 웹사이트의 모습을 디자인 하는 작업에서 유용하게 활용할 수 있습니다.

– 웹 페이지에 있는 일부 텍스트의 색상을 변경하고 싶다면, 기초적인 CSS만으로도 기존의 웹 페이지에 구현되어 있는 HTML 코드에 “스타일” 코드를 추가해서 원하는 작업을 처리할 수 있습니다.
– HTML로 표시된 내용에 더해서 CSS를 사용하면, 웹사이트의 레이아웃과 포맷을 변경할 수 있습니다.
– CSS의 기본에 대해서 알고 나면, 웹사이트의 모습은 물론이고 기존의 디자인에 적용된 모든 HTML을 개선할 수 있을 것입니다.

 

Javascript (자바스크립트) 란 무엇일까요?

자바스크립트는 웹사이트를 보다 인터랙티브 하게 만들고 싶은 운영자들에게는 가장 중요한 프로그래밍 언어입니다. 그리고 이번 글에서 소개하는 세 가지의 기본적인 프로그래밍 언어들 중에서는 가장 복잡한 언어이기도 합니다. HTML은 웹사이트의 구조를 제공하고 CSS 는 웹사이트가 표시되는 모습을 제어하게 해준다면, 자바스크립트라는 프로그래밍 언어는 웹페이지에 포함되어 있는 다양한 구성요소들의 동작을 변경할 수 있는 도구를 제공해줍니다. 이러한 도구를 활용하면, 웹사이트의 CSS와 HTML 구성요소들에 인터랙티브 계층을 추가할 수 있습니다.
요즘에 볼 수 있는 대부분의 웹사이트에서는, 어떤 버튼을 클릭하면 새로운 메뉴가 펼쳐지면서 사용자가 웹사이트를 쉽게 탐색할 수 있게 만들어져 있습니다. 메뉴 버튼은 페이지의 옆쪽에 작은 메뉴 형태로 표시되며, 이것 만으로도 페이지에 인터랙티브 요소가 더해지게 됩니다. 이런 기능들은 모두 자바스크립트에 의해서 가능한 것이며, 웹사이트를 보다 정교하면서도 최신 버전으로 보이게 만들어줍니다.
자바스크립트에 대한 기본적인 내용을 이해하고 있으면, 웹사이트에 있는 여러 가지의 인터랙티브 기능들을 조작해서 다양한 범위의 작업을 수행할 수 있습니다. 웹사이트의 디자인과 기능을 완전히 제어하려면, 자바스크립트와 관련된 코딩을 어느 정도는 알고 있어야 합니다.

​– 웹사이트에 계산기 기능 등의 구현이 가능합니다.
– 다양한 키보드 단축키를 만들어서, 사용자들이 다른 페이지로 쉽게 이동할 수 있도록 합니다.
– 사용자가 페이지에서 스크롤을 내리면 애니메이션을 실행합니다.

 

이를 이용하여 ThingSpeak 에서 현재 지원하고 있지 않은 부족한 기능들을 구현할 수 있고, 채널 페이지에 직접 구현한 기능을 추가할 수도 있습니다.
가령, 저는 매번 정보를 확인하기 위해 스크롤을 내려서 측정 값을 확인하여야 하는데 번거로움을 느껴 다음과 같이 표를 만들어 상단에 배치해두었습니다.

 

HTML
<html>

  <head>
    <!-- 
		NOTE: This plugin will not be visible on public views of a channel. 
			    If you intend to make your channel public, consider using the
			    MATLAB Visualization App to create your visualizations.
    -->

    %%PLUGIN_CSS%%
    %%PLUGIN_JAVASCRIPT%%

  
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>

  <meta charset="utf-8">
  </head>

  <body onload="initPage()">
    <table>
      <colgroup>
        <col span="1" style="width: 20%;">
        <col span="1" style="width: 80%;">
      </colgroup>
      <tbody>
        <tr>
          <td class="data_title">주변 온도</td>
          <td id="temperature" class="data_value"></td>
        </tr>
        <tr>
          <td class="data_title">주변 습도</td>
          <td id="humidity" class="data_value"></td>
        </tr>
        <tr>
          <td class="data_title">광량</td>
          <td id="lx" class="data_value"></td>
        </tr>
        <tr>
          <td class="data_title">토양 습도</td>
          <td id="smoisture" class="data_value"></td>
        </tr>
        <tr>
          <td class="data_title">토양 염도</td>
          <td id="ssalinity" class="data_value"></td>
        </tr>
        <tr>
          <td class="data_title">배터리 전압</td>
          <td id="battvolt" class="data_value"></td>
        </tr>
        <tr>
          <td colspan="2" id="timestamp"></td>
        </tr>
      </tbody>
    </table>
            <div id="footer">
              <p>ⓒ 2021 - 2022 <a href="https://www.happybono.net" style="color:#0f4c75">happybono</a>. All Rights Reserved.</p>
          </div>
        
  </body>

</html>

CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
  
@font-face {
    font-family: 'KNPSKkomi-Regular00';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KNPSKkomi-Regular00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  
@font-face {
  font-family: 'Segoe UI Variable Display';
  src: local('Segoe UI Variable Display'),
    url('/fonts/SegoeUIVF-all.tff') format('truetype-variations');
  font-variation-settings: 'opsz' 17;
  font-weight: 300 700;
  font-style: normal;
}
  
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
  
	body {
		background-color: #fff;
	}
	
  	table {
		width: 100%;
		border-collapse: collapse;
	}
	
	td {
		padding: 5.07px;
	}
	
	tr:nth-child(odd) {
        background-color: #d8ebf6;
	}
	
	.data_value {
		color: #2a3a4a;
		font-size: 1.06em;
        font-family: 'KNPSKkomi-Regular00', sans-serif;
		text-align: center;
		font-weight: bold;
	}
	
  	.data_title {
		color: #2a3a4a;
		font-size: 1.06em;
        font-family: 'KNPSKkomi-Regular00', sans-serif;
		text-align: center;
		font-weight: bold;
	}
  
	#timestamp {
		color: #2a3a4a;
		font-size: 0.90em;
        font-family: 'KNPSKkomi-Regular00', sans-serif;
		text-align: center;
        font-weight: bold;
	}
  
    #footer {
    color : #9d9e9f;
    font-size : 0.78em;  
    font-family: 'Segoe UI Variable Display', sans-serif;   
    text-align : center;
    }
  
</style>

Javascript
<script type="text/javascript">

var channel_id = ' ';
var api_key = ' ';

// variable for the data point
var p_temp,
  p_humi,
  p_lux,
  p_smoist,
  p_ssalinity,  
  p_battvolt,
  p_timestamp,
  timestamp;

function initPage() {
  loadData();
  setInterval(loadData, 15000);
}

function loadData() {
  p_temp = 0;
  p_humi = 0;
  p_lux = 0;
  p_smoist = 0;
  p_ssalinity = 0;
  p_battvolt = 0;
  p_timestamp = 0;

  // get the data from thingspeak
  $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?results=1&api_key=' + api_key, function(data) {
    // get the data points
    p_temp = parseFloat(data.field1);
    p_humi = parseFloat(data.field2);
    p_lux = parseFloat(data.field3);
    p_smoist = parseFloat(data.field4);
    p_ssalinity = parseFloat(data.field5);
    p_battvolt = parseFloat(data.field6);
    p_timestamp = new Date(data.created_at);
    timestamp = p_timestamp.toLocaleString();
    outputData();
  });
}
  
  function outputData() {
  // update page
  document.getElementById('temperature').innerHTML = p_temp + ' °C';
  document.getElementById('humidity').innerHTML = p_humi + ' %';
  document.getElementById('lx').innerHTML = p_lux + ' ㏓';
  document.getElementById('smoisture').innerHTML = p_smoist + ' %';
  document.getElementById('ssalinity').innerHTML = p_ssalinity + ' %';
  document.getElementById('battvolt').innerHTML = (p_battvolt-3250).toFixed(2) + ' mV / ' + (4200-3250).toFixed(2) + ' mV (' + (100*(p_battvolt-3250)/(4200-3250)).toFixed(0) + ' %)';
  document.getElementById('timestamp').innerHTML = '<i class="material-symbols-rounded" style="font-size:1.17em";">potted_plant</i>' + " " + timestamp;
}

</script>

 

기본적인 원리는 HTML 단에서 기본 틀인, 테이블 (도표) 을 생성해 놓고 CSS 를 통해 사용될 폰트와 테이블과 관련된 디자인 관련 속성들을 설정해 준 후, Javascript 를 이용해 최종적으로 채널의 데이터를 읽어들인 다음에, 각각 필드 값들을 알맞은 데이터 형식으로 변환 후 대응되는 변수에 대입하여 최종적으로Plug-in (플러그인) 에 표시되도록 구현했습니다. 본 예제에서는 간단하게 각각의 텍스트를 표시하고, 배터리 잔량을 계산한 예제이지만, 이를 응용한다면, GPS 센서를 이용해 받아온 위도, 경도 값을 기준으로 Google Maps API 를 이용해 현재 기기의 위치를 Google 지도에 표시하거나, Google 혹은 Kakao 에서 지원하는 역지오코딩 API 를 통해 실시간 위도, 경도 값을 주소로 변환해 출력하는 등의 응용이 가능합니다.

 

 

코드 실행 / 구현 결과는 다음과 같습니다.

 

다만, 이렇게 ThingSpeak 에서 Plug-ins 기능으로 제작된 별도의 기능은 Private View (비공개 채널) 에서만 확인이 가능하며 이는 다른 서비스에서 유료로 제공되는 API Key 가 노출되는 상황에 대한 방지책으로 Public View (공개 채널) 에 공개되지 않습니다. 따라서 로그인 과정을 거쳐 확인하셔야 하는 번거로움은 존재한다는 점도 함께 언급해둡니다.

고맙습니다.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: