사물인터넷 IoT에 연결된 센서의 상태 그래프
센서 네트워크를 사물 인터넷에 연결하는 것의 장점 중 하나는 얻은 데이터를 분석할 수 있다는 것입니다. 이 정보를 그래픽으로 표현함으로써 사람(프로그램이 아닌)은 모니터링된 수량의 의미를 서로 비교하거나 시간 경과에 따른 발전을 추적함으로써 보다 직관적으로 이해할 수 있습니다.
이 기사는 IoT에 연결된 센서에서 얻은 데이터를 그래픽으로 표현하기 위한 간단한 제안을 설명하는 네 부분으로 구성된 시리즈를 시작합니다. 다른 기사와 동일한 철학을 바탕으로 제안된 방법은 주요 목표가 교훈적이지만 완벽하게 기능적입니다. 대중의 기술적 프로필로서 블로그 polaridad.es, 이 텍스트는 웹 개발이 아닌 전자 제품에 관한 것이며, 각 섹션은 사용된 언어 또는 기술에 대한 소개 역할을 합니다. HTML, CSS, SVG y 자바 스크립트.
이전 시리즈의 기사는 다음과 같습니다. 사물 인터넷(IoT)에 연결된 장치에서 얻은 데이터를 저장하는 방법 마지막으로 데이터베이스에 저장된 정보에 접근하는 방법을 설명했습니다. 시리즈의 예에서는 프로세스를 더 쉽게 하기 위해 HTTP 프로토콜의 POST 요청을 통해 데이터를 수신하고 이를 데이터베이스에 저장하고 웹 페이지에 표시하는 역할을 하는 중개자로 웹 서버를 사용했습니다.
이 시스템의 가장 큰 단점은 성능(향후 기사에서 설명할 Node.js 및 MongoDB와 같은 대안으로 완화될 수 있음)이지만 그 대신 두 가지 큰 이점을 제공합니다. 구현이 매우 간단합니다(가용성 포함). 즉, 인터넷에 연결된 장치의 기록 상태를 나타내는 저장된 정보를 표시하기 위해 특정 애플리케이션(예: 모바일 장치용 앱)이 필요하지 않습니다. 것들.
이 문서에서는 IoT에 연결된 장치의 상태에 대해 이 시스템에 저장된 정보를 웹 페이지에 쉽게 표시할 수 있다는 장점을 활용하여 이 정보를 다음 형식을 사용하여 그래픽으로 표시하는 방법을 설명합니다. SVG 부터 자바 스크립트 웹페이지를 동적으로 생성하려면 HTML.
서점이 많아요 자바 스크립트 데이터의 그래픽 표현을 해결하는 방법입니다. 이 기사는 다른 기사를 개발할 의도가 없습니다. 이 텍스트의 목적은 프로세스를 이해하고 자신만의 구현을 개발할 수 있도록 하는 것입니다. 교훈적인 목표이자 생산적인 목표입니다. 제품을 직접 개발하기보다는 사용하는 데 관심이 있다면 다음을 사용하여 그래픽을 생성하기 위한 훌륭한 라이브러리를 살펴보는 것이 좋습니다. 자바 스크립트 다음과 같은 무료 라이센스가 있는 경우 차트.js, Highcharts, Google 차트 도구, 시대, 라파엘, 그라피코 (기준 라파엘), dc.js, 차티스트.js, D3.js (내 추천), C3.js (기준 D3.js), NVD3 (재사용 가능한 그래픽 D3.js) ...
SVG 그래픽을 사용한 HTML 문서 구조
센서 데이터를 그래픽으로 표현하기 위한 이 기사의 제안에서 센서 데이터가 표시되는 웹 페이지는 다음으로 구성됩니다.
- 컨테이너 역할을 하는 문서는 다음과 같이 작성됩니다. HTML,
- 페이지의 모양은 코드로 정의됩니다. CSS,
- 그래프 그리기는 언어를 사용하여 수행됩니다. SVG y
- 서버에서 데이터를 읽고 그래프를 표시하는 것은 다음과 같이 프로그래밍됩니다. 자바 스크립트
모든 요소, 특히 코드 HTML 페이지의 기사에 설명된 대로 PHP를 사용하여 서버에서 생성할 수 있습니다. PHP 프로그래밍 언어 시리즈에서 사물 인터넷에 연결된 장치의 데이터 저장.
코드 CSS y 자바 스크립트 코드에서 로드(가져오기) 가능 HTML 문서의 일부로 직접 작성하는 대신 HTML. 이는 동일한 문서를 여러 페이지에서 재사용할 수 있고, 보다 편안하게 편집할 수 있다는 장점이 있습니다. 하지만 캐시에 포함된 코드(이전 사용 시 로드됨)를 사용할 수 있는지 여부에 따라 로드하는 데 시간이 조금 더 오래 걸리는 불편함을 겪을 수도 있습니다. CDN. 생산 단계에서는 PHP의 모든 코드를 통합하여 단일 문서를 생성하는 것이 쉽습니다. HTML 이 대안을 선택하면 모든 정보가 포함됩니다. 이 일련의 기사 전체에서는 명확성을 위해 별도의 문서로 작업하고 있는 것으로 간주됩니다.
우리가 관심을 갖는 목적을 위해 그래픽 컨테이너로 사용하고 대략적으로 문서 구조의 첫 번째 수준의 콘텐츠를 사용합니다. HTML 할 것이다:
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español –>
<head>
</head>
<body onload=“funcion();”>
</body>
</html>
|
첫 번째 줄은 읽고 있는 문서가 작성된 문서임을 웹 브라우저에 알려주는 역할을 합니다. HTML, 특히 버전 5( HTML5). 이전 버전 HTML, 기반으로 SGML (Standard Generalized Markup Language)에는 문서 유형 정의(DTD) 문서를 설명하기 위해 언어에서 사용되는 규칙 유형이 선언되었습니다.
두 번째와 마지막 줄에는 코드가 포함되어 있습니다. HTML 지시문 중에서 <html> y </html> 각각 열기 및 닫기 기능을 수행합니다. 지시문 HTML 이는 일종의 "급 괄호" 기호를 형성하는 "보다 작음" 및 "보다 큼" 기호 사이에 이름과 속성을 포함합니다. 요소 HTML 콘텐츠를 포함하는 경우 다음과 같이 이름 앞에 슬래시를 포함하는 닫는 지시문이 있습니다. </html>.
요소의 속성 또는 속성은 이름과 서로 공백으로 구분되며 일반 텍스트로 표현되거나 더 자주 텍스트(속성 이름) 뒤에 등호와 따옴표로 묶인 값으로 표현됩니다. 코드 열기 지시문의 경우 HTML 재산이 사용되었습니다 lang 용기를 가지고 es, lang="es" 문서의 텍스트를 나타냅니다. HTML 스페인어를 사용합니다.
HTML 코드의 시작 지시문 뒤에 주석이 포함되었습니다. 의 댓글 HTML 여러 줄을 차지할 수 있으며 코드를 시작 기호로 사용할 수 있습니다. <!-- 그리고 마무리로 -->
코드 HTML 두 개의 블록으로 구성됩니다: 헤더 <head> 그리고 몸 <body>. 첫 번째는 문서에 관한 정보(메타정보)를 포함하여 문서 자체에 대해 알리는 것이 목적이고, 두 번째는 문서의 내용을 뒷받침하는 것입니다.
지시문에서 <body> 이벤트가 포함되었습니다 onload 자동으로 기능을 실행하는 방법 자바 스크립트 콘텐츠가 로드되면 이 리소스를 사용하면 그래픽 개체를 정의하는 코드 실행을 시작하고 이러한 그래픽을 나타내는 센서 상태에 대한 정보가 서버에서 로드될 때 이를 업데이트할 수 있습니다.
문서의 헤더에 포함될 수 있는 모든 메타정보 중 HTML, 우리는 특히 다음 지시문에 설명된 내용을 알고 싶습니다.
-
<title>문서에 제목을 부여하는 역할을 합니다. 이는 일반적으로 브라우저 창이나 해당 탭에 나타나며 포함된 그래픽을 식별하는 데 도움이 됩니다. -
<charset>문서를 인코딩하는 데 사용되는 문자 집합을 선언합니다. 이는 eñes 또는 악센트와 같은 "특수" 기호에 특히 중요합니다. -
<link>문서 간의 관계를 설정할 수 있습니다. HTML 현재 및 기타 외부 것. 스타일 시트를 형식으로 로드하는 데 도움이 됩니다. CSS 문서의 모습과 함께. -
<script>실행 가능한 코드가 포함된 스크립트가 포함되어 있습니다. 이 지시어를 사용하여 함수를 로드합니다. 자바 스크립트 그래픽을 생성하거나 수정하는 데 사용됩니다. SVG.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
</body>
</html>
|
의 예에서 볼 수 있듯이 HTML 위의 스타일이 포함된 문서의 이름(및 해당되는 경우 경로) CSS 속성으로 표시됩니다. href, 코드의 경우 자바 스크립트 그것은 사용되었습니다 src. 둘 다 소유권을 공유함 type 용기를 가지고 text/css y text/javascript 각각.
문서의 내용 중 해당 요소에 해당하는 부분 <body>, HTML5 이를 통해 바닥글, 측면 섹션 또는 탐색 모음과 같이 웹 페이지에서 가장 자주 사용되는 구성 요소에 대한 특정 구조를 만들 수 있지만 우리가 관심을 갖는 것은 문서를 그래픽 컨테이너로 사용하는 것입니다. SVG 요소들이다 <div> 일부를 중첩하여 계층 구조를 정의할 수 있는 독립적인 블록으로 기능합니다. <div> 다른 사람들 안에.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
</html>
|
이전 예에서는 요소가 사용되었습니다. <div> 여기에는 다른 두 개가 포함되어 있습니다. 이 예에서는 코드 사용에 있어 매우 중요한 두 가지 속성을 소개합니다. HTML: id 요소에 고유 식별자를 할당하는 데 사용됩니다. HTML ( <div>, 이 경우) 및 class 모양을 설정하는 데 사용할 카테고리가 지정됩니다. 카테고리, 클래스는 고유할 필요가 없습니다. 사실 그 효과의 대부분은 동일한 측면을 공유하는 여러 요소에 있습니다.
요소(또는 태그) <p> 일반적으로 텍스트를 포함하는 단락을 정의하는 역할을 합니다(비록 HTML 이에 대해서는 제한이 없습니다.) 단락(또는 단락) 내에서 그룹화하려면 <div>, 또한 제한이 없습니다) 태그가 사용됩니다 <span>. 예를 들어, 이 요소를 사용하면 단락 내에 텍스트를 포함하여 밑줄이나 굵게 표시 등 다른 모양을 지정할 수 있습니다.
그래픽 특성의 정의 및 일반적으로 요소와 관련된 동작 HTML 클래스 속성 지정은 코드에서 수행됩니다. CSS; 문서의 이전 예의 경우 aspecto.css.
특성 할당을 최적화하려면 CSS 같은 요소일 가능성도 있음 HTML 여러 클래스에 속하므로 해당 클래스에 정의된 모양이나 동작을 갖습니다. 이 할당을 수행하려면 여러 클래스의 이름을 속성 오른쪽에 쉼표로 구분하여 작성합니다. class
|
9
10
11
12
13
14
15
16
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
이전 예에서 요소는 <div> 이는 다음과 같이 확인되었습니다. primer_hijo 세 가지 클래스가 지정되었습니다. aspecto_de_hijo, aspecto_raro y tipografia_grande, 요소의 모양과 동작을 함께 정의해야 합니다. 다음 글에서 설명했듯이 CSS를 사용하여 IoT 센서 그래픽 웹 모양 정의, 여러 클래스를 사용할 때 측면을 정의하는 속성 중 하나가 두 클래스 모두에 정의된 경우 마지막으로 참조된 속성이 우선합니다.
보시다시피 요소는 <div> 여기에는 다른 요소를 포함한 다른 요소가 포함될 수 있습니다. <div>. 더 간단한 경우는 다음과 같습니다. <div> 텍스트가 포함되어 있었습니다. 스타일을 정의하는 룩 CSS 요소에 포함된 텍스트에도 영향을 미칩니다.
특성 할당을 최적화하려면 CSS 같은 요소일 가능성도 있음 HTML 여러 클래스에 속하므로 해당 클래스에 정의된 모양이나 동작을 갖습니다. 이 할당을 수행하려면 여러 클래스의 이름을 속성 오른쪽에 쉼표로 구분하여 작성합니다. class
|
9
10
11
12
13
14
15
16
17
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
이전 예에서는 <div> primer_hijo 요소의 모양과 요소가 포함된 텍스트를 정의합니다. 예를 들어 요소가 작성된 글꼴을 크게 만듭니다(마지막 클래스에서 해당 이름으로 표시된 목적이 true인 경우).
버전 5 이후(HTML5) 형식에 그래픽 코드를 포함하는 것이 가능합니다. SVG 코드 자체 내에서 HTML 또 하나의 요소로. 코드 관점에서 HTML, 내용 SVG 그것은 요소입니다 <svg> 여기에는 다양한 그래픽 요소(선, 원, 직사각형 등)가 포함되어 있습니다.
|
9
10
11
12
13
14
15
16
17
18
19
20
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg id=“dibujo” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
</div>
</body>
|
요소의 그래픽 특성이 다르다고 알려져 있지만 HTML 스타일로 정의됩니다. CSS 클래스를 통해 관련되어 있는 경우 두 가지 방법으로 일부를 요소에 직접 할당할 수도 있습니다. 한편으로는 부동산을 사용할 수 있습니다. style 개체의 다양한 그래픽 특성을 해당 값으로 할당합니다. 논리적으로 앞서 언급한 클래스에 측면을 할당하는 기술을 사용하는 것이 바람직하지만 이 가능성을 사용하면 새 클래스를 생성하지 않고도 요소에 작은 수정 사항(매우 특별한 예외)을 추가할 수 있습니다.
반면에 일부 요소는 HTML 이를 통해 모양을 정의하는 특정 속성을 사용할 수 있습니다. 일반적으로 이러한 속성이 존재하더라도 클래스를 사용하는 것이 바람직하지만 불행히도 모든 요소가 이 대안을 제공하는 것은 아니며 일부 요소는 관련 클래스를 참조하는 대신 특정 속성으로 특정 값이 직접 표시되기를 기대합니다. 이러한 유형의 동작을 갖는 요소 중 하나는 바로 코드입니다. SVG, 속성에서 너비와 높이의 백분율 값을 할당해야 합니다. width y height, 각각 클래스 대신.
에서 더 자세히 살펴보겠지만 SVG 코드에 관해 이야기하는 기사, 제안된 간단한 방법을 사용하려면 그래프의 크기를 백분율로 고려하는 것이 좋습니다. 객체의 전체 크기의 경우 너비와 높이 값을 100%로 표시하여 최종 크기( <div> 와 id="dibujo", 이전 예에서)
그래프의 다양한 구성 요소의 경우 SVG (선, 원, 직사각형...)은 100×100(모든 단위) 크기의 영역에 포함되며 비율을 유지하지 않고 직사각형 모양으로 확장됩니다. 속성 viewBox y preserveAspectRatio 요소의 SVG 그들은 이러한 가치를 확립할 책임이 있습니다. 첫 번째 경우에는 좌표점 (0,0)에서 좌표점 (100,100)으로 이동하고 다음과 같이 표현되는 직사각형 보기가 있습니다. "0 0 100 100" 두 번째에는 값이 있습니다. none.
|
14
15
16
17
18
|
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg viewBox=“0 0 100 100” preserveAspectRatio=“none” width=“100%” height=“100%” id=“dibujo” class=“grafico”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
|
위의 모든 사항을 사용하여 이제 그래픽 컨테이너 역할을 하는 완전한 코드를 정의할 수 있습니다. SVG 다음에서 생성 또는 수정됨 자바 스크립트. 아래 예에는 다음 형식을 사용하는 4개의 그래픽 블록이 포함되어 있습니다. HTML 우리가 사용할 표현 제안의 모습입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang=“es”> <!– Inicio del documento HTML con el idioma –>
<head> <!– Cabecera del documento HTML –>
<meta charset=“utf-8”> <!– Se utiliza el juego de caracteres UTF8 –>
<title>Temperaturas Nave E1</title> <!– Título del documento y seguramente de la ventana del navegador –>
<link rel=“stylesheet” href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” type=“text/css” media=“all”> <!– Cargar el estilo “https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” guardado en la misma carpeta que este documento HTML –>
<script type=“text/javascript” src=“graficos.js”></script> <!– Cargar el código JavaScript del documento “graficos.js” guardado en la misma carpeta que este documento HTML –>
</head> <!– Final de la cabecera del documento HTML –>
<body onload=“iniciar_graficos();”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript iniciar_graficos() –>
<div id=“temperatura_frigorifico_a” class=“bloque_sensor”> <!– Bloque de datos del primer sensor –>
<div id=“titulo_temperatura_frigorifico_a” class=“bloque_titulo”>Temperatura frigorífico 01A</div> <!– Título del bloque de datos del sensor –>
<div id=“descripcion_temperatura_frigorifico_a” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01A</div> <!– Descripción del bloque de datos del sensor –>
<div id=“fecha_temperatura_frigorifico_a” class=“bloque_fecha”>Cargando emperaturas</div> <!– Fecha de la última lectura de datos del sensor. Por ahora vacío, luego se rellenará con la aplicación JavaScript –>
<div id=“bloque_temperatura_frigorifico_a” class=“bloque_grafico”> <!– Bloque con el gráfico –>
<svg id=“grafico_temperatura_frigorifico_a” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_a” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg> <!– Gráfico de los datos –>
</div> <!– Final del bloque que contiene el gráfico –>
</div> <!– Final del bloque de datos del primer sensor –>
<div id=“temperatura_frigorifico_b” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_b” class=“bloque_titulo”>Temperatura frigorífico 01B</div>
<div id=“descripcion_temperatura_frigorifico_b” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01B</div>
<div id=“fecha_temperatura_frigorifico_b” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_temperatura_frigorifico_b” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_b” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_b” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_c” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_c” class=“bloque_titulo”>Temperatura frigorífico 01C</div>
<div id=“descripcion_temperatura_frigorifico_c” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01C</div>
<div id=“fecha_temperatura_frigorifico_c” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_c” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_c” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_c” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_d” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_d” class=“bloque_titulo”>Temperatura frigorífico 01D</div>
<div id=“descripcion_temperatura_frigorifico_d” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01D</div>
<div id=“fecha_temperatura_frigorifico_d” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_d” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_d” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_d” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
</body> <!– Final del cuerpo del documento HTML –>
</html> <!– Final del documento HTML –>
|
아래에서 스타일로 형식화된 이전 코드의 모양을 볼 수 있습니다. CSS 해당, 생성 자바 스크립트 그래픽 SVG IoT에 연결된 센서에 저장된 데이터를 서버에서 판독합니다. 데이터가 서버에서 로드되지 않고 클라이언트(브라우저)에서 무작위로 생성된다는 점을 제외하고 나머지 코드는 이 기사 시리즈에 정의된 제안에 사용됩니다.
이 시리즈의 다음 기사에서는 설명합니다. CSS 스타일을 정의하는 방법 그래픽의 컨테이너 역할을 하는 HTML 코드에 모양을 부여합니다. SVG 사물인터넷(IoT)에 연결된 센서의 상태를 표현하는 것입니다.
1 코멘트