Techtopic

Thingworx에서 Slider위젯의 커스텀 한계로 진행도 표시를 위한 게이지 바 UI 구성이 원활하지 않은 경우가 있습니다. 이 경우 자사의 Innofactory Highchart Extension을 사용하여 Extension에 스크립트를 추가하여 게이지 바를 구현할 수 있는 방법을 제시합니다. Thingworx에서 Highchart를 사용한 Gauge bar 구현 방법 # 준비물 # Innofactory highchart Extension Thingworx에서 Innofactory Highchart Extension을 사용해야 합니다. Highchart Extension을 수정하여 Highchart 모듈을 추가할 수 있어야 합니다. (pattern-fill 추가하여 패턴을 추가하는 기능을 더할 수 있습니다.) Thingworx의 Slider로 만든 게이지 바 예시 #

본 글에서는 Hugo블로그에 shortcode를 추가하여 JS Fiddle을 글에 첨부할 수 있도록 합니다. JS Fiddle 서비스에 저장된 데모를 첨부할 수 있으며, 직접 JS 데모를 작성하고 저장하기 위해서는 JS Fiddle 계정이 생성되어있어야 합니다. Hugo에 JS Fiddle Shortcode 추가 # Shortcode 작성 # Hugo 블로그의 layout/shortcodes 위치에 Js Fiddle용 shortcode html을 생성합니다.

Thingworx Extension # Thingworx Extension으로 Third-Party Javascript Libraries를 사용하는 방법은 Thingworx Document에 다음과 같이 소개되어 있습니다. if (!jQuery().qtip) { $("body").append('<script type="text/javascript" src="../Common/extensions/MyExtension/ui/mywidget/ include/qtip/jquery.qtip.js"></script>'); $("head").append('<link type="text/css" rel="stylesheet" href=" ../Common/extensions/MyExtension/ui/mywidget/include/ qtip/jquery.qtip.css" />'); } Thingworx widget Extension을 만들 때, 아래 코드와 같이 renderHtml 함수에 추가하여 사용하는 방법을 제시하고 있습니다. this.renderHtml = function() { ... if(!jQuery().ptccommonhighchart){ this.body_append( '<script type="text/javascript" src="../Common/extensions/<project>/ui/<widget>/lib/highcharts.js"></script>'); } } 이렇게 사용할 경우 종종 Thingworx Runtime 시에 Third-Party Javascript libraries에 정의되어 있는 기능이 정의되지 않았다고 에러가 발생하곤 합니다.

JavaScript로 CustomElement 작성법 # 이 글은 Javascript로 Custom HTMLElemnet를 만드는 방법을 포함합니다. 이 글은 Node.js와 npm의 기능에 대해 설명하지 않습니다. Custom Tag를 확인하기 위해 Node와 npm(node package manager)를 사용했습니다.(별도의 환경에서도 확인 가능합니다.) Custom HTMLElement만들기 # custom-tag.js class CustomElement extends HTMLElement { constructor() { super(); // Create a shadow root. const shadowRoot = this.attachShadow({ mode: "open" }); const button = document.createElement("input"); button.type = "button"; button.value = "my button"; shadowRoot.appendChild(button); } } customElements.define("my-custom-tag", CustomElement); index.html

본 포스팅 시리즈에서는 최근 트랜드였던 ChatGPT에 대한 개요와 OpenAI에서 제공하는 AI 언어모델 API를 이용한 응용 사례들, OpenAI에서 제공하는 각종 모델의 특징들에 대해 안내하고 더 나아가 OpenAI에서 제공하는 AI 언어모델 API 사용법, 인공지능 모델에 목표를 부여하고 특정 방향성으로 응답하도록 하는 인공지능 튜닝방법 까지 소개할 예정입니다. 이번 포스트는 세번째 시리즈의 연속으로서, 지난 포스팅에 이어, 지난 포스팅의 예제로 파인튜닝한 데이터를 사용해 회사 전용 행정 챗봇을 만드는 예제를 다뤄보겠습니다. 챗봇을 통한 파인 튜닝 데이터 모델 사용 예시 # 챗봇 환경 및 구성도 # Synology Chat과 OpenAI API 간의 통신을 활용하여 사용자의 질문을 OpenAI API 모델에 전달하고, 그에 대한 응답을 다시 Synology Chat으로 반환하는 챗봇 API를 개발하는 예제를 통해 튜닝된 모델에 대한 응용 예시를 확인해보겠습니다.