CSS, JQuery 를 이용한 웹 어플리케이션 적용

2020.11.29 - [Embedded] - 시스템 모니터링 인터페이스 개발

이전에 Node JS 기반인 Node Red 를 통해 Raspberry Pi 보드에 키오스크 모드를 적용한 웹어플리케이션을 개발했었다.

Node Red 는 JavaScript 기반으로 함수 등을 만들 수 있으며, 여러 기능들이 모듈화 되어있다. 하지만 한계는 존재하고

추가 적인 기능을 위해 CSS 나 JQuery, Angular JS 를 통해 개발을 할 수도 있다.

 

이번에는 더욱더 섬세하며 추가적인 기능을 위해 CSS, JQuery 를 통해 개발을 진행해 보았다.

Node Red 에서 제공하는 기능으로 접근 불가능한 영역에 대하여 개발을 진행했으며.

HTML 에 접근하기 위한 CSS 를 만들어야 하며, JavaScript 의 Value 를 전달하기 위해 JQuery 를 이용한다.

또한 CSS 를 통해 Node Red Class, id 등에 접근하여 get set 을 진행한다.

 

아래는 CSS 와 JQuery 를 이용한 JavaScript 이다.

실제 개발 환경에는 한곳에 있지만 식별을 위해 따로 나누어 올려보았다.

<style>
#Production_Count_cards  {
    xborder: solid 3px red ;
    height: 825px !important;
}
#Movement_IO_cards  {
    xborder: solid 3px red ;
    height: 868px !important;
}
#Movement_Speed_cards  {
    xborder: solid 3px red ;
    height: 336px !important;
}

#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope {
    font-size: 0px;
}
#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope:before {
    content: attr(data-content);
    font-size: 23px;
    display: block;
}
</style>

<script>
(
    function($scope) 
    {
        $scope.$watch('msg.payload', function() 
        {
            if ($scope.msg.payload)
            {
                $("#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope").attr('data-content',$scope.msg.payload);
                
                /*1.
                $("#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope").css("font-size", "0px");
                2.
                content: attr(data-content) '';
                $('#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope').hover(function()
                {
                    $(this).attr('data-content',$scope.msg.payload);
                });
                3.
                content: attr(data-content) '';
                $('#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope').on('click', function () 
                {
                   $(this).attr('data-content','bar');
                });
                4.
                content:var(--content,"I am a before element");            
                <div class="Movement_IO nr-dashboard-cardtitle ng-binding ng-scope"></div>
                <div class="Movement_IO nr-dashboard-cardtitle ng-binding ng-scope" style="--content:'I am a blue element'"></div>
                5.
                content:var(--content,"I am a before element");
                document.querySelectorAll('#Movement_IO .nr-dashboard-cardtitle.ng-binding.ng-scope')[0].style.setProperty("--content", "'$scope.msg.payload'");*/
            }
        });
    }
)(scope);
</script>

Node Red 환경에서 지정한 id 와 class 에 접근 가능하며, id 와 class 동시에 중복으로 사용도 가능하다 우선순위는 id

가 더 높다. 이러한 방식으로 각 property 들을 control 할 수 있으며, JQuery 를 사용하여 ,script 에서도 접근이 가능하

다.

script 에서 접근이 가능하다는 것은 Node Red msg.payload 값을 이용하여 HTML 에 접근이 가능하다는 것이다.

결국 Node Red 개발 환경에서 접근 하지 못하는 곳도 마음대로 개발 할 수 있다. 즉, UI 도 화려하게 꾸밀 수 있다.

아래는 Node Red class property 값을 이용하여 보기좋게 꾸며놓은 CSS 이다.

<style>
root, a, button, p, div {
    -webkit-user-select: none !important;
}

body {
    background: -webkit-linear-gradient(
    55deg,
    #631111 10%,
    #2d5569 50%
    );
    -webkit-touch-callout: none !important;
}

    
body.nr-dashboard-theme md-toolbar,
body.nr-dashboard-theme md-content md-card {
    background-color: transparent !important;
    color: #FFFFFF;
}

ui-card-panel {
    background-color: rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
}
    
#Homey_Dashboard_Navigation {
    background-color: transparent !important;
    border-radius: 10px !important;
}

.md-card.md-default-theme, md-card {
    border-radius: 10px;
}

.nr-dashboard-switch.ng-scope {
    background-color: rgba(255,255,255,.2) !important;
}

.nr-dashboard-switch.ng-scope:hover {
    background-color: rgba(255,255,255,.5) !important;
}

.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: rgba(255,255,255,.2);
}

.md-button {
    border-radius: 10px;
}

.nr-dashboard-cardpanel layout-column {
    background-color: rgba(255,255,255,0.9) !important;
    background-color: transparent !important;
    border-radius: 10px !important;
}

.nr-dashboard-theme ui-card-panel {
    border: none;
}

.nr-dashboard-template {
    overflow-y: visible;
}
.nr-dashboard-theme md-content md-card {
    background-color: transparent !important;
}

.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
    color: rgba(255, 255, 255, 0.9);
}
</style>

<script>
document.ontouchmove = function (e) {
    e.preventDefault();
}
</script>

이러한 방식들을 통해 유저에게 오픈 파일을 제공하여 유저가 원하는 값을 입력하면 섬세한 부분까지 적용가능하게 만

들면 더욱더 가치 있을것으로 여겨진다.

(참고로 본인은 유저가 쓴 ini file parsing 을 통해 최종 HTML 데이터를 변경 가능하게 만들어 놓았다.)