thing-it-device-chp/web/chp.html

[thing-it-node] Device Plugin to demo Combined Heat and Power operations.

<style>
    .compass {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 100%;
        position: relative;
    }

    .compass .direction {
        height: 100%;
        width: 100%;
        display: block;
        background: #f2f6f5;
        border-radius: 100%;
    }

    .compass .direction p {
        text-align: center;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 80px;
        display: block;
        margin-top: -40px;
    }
</style>
<div class="marginTop1" style="display: flex; justify-content: center;">
    <div style="display: flex; flex-direction: column; align-items: center;">
        <h3 class="noTopMargin">Motor</h3>
        <div class="compass marginTop0_5">
            <div class="direction primaryColor">
                <p class="fontSize1_5">{{component._state.drive | number:2}}<span
                        class="fontSize0_8 marginLeft0_2">rpm</span>
                </p>
            </div>
        </div>
    </div>
    <div style="margin-left: 1em; display: flex; flex-direction: column; align-items: center;">
        <h3 class="noTopMargin">Generator</h3>
        <div class="compass marginTop0_5">
            <div class="direction primaryColor">
                <p class="fontSize1_5">{{component._state.power | number:2}}<span
                        class="fontSize0_8 marginLeft0_2">kW</span></p>
            </div>
        </div>
    </div>
    <div style="margin-left: 1em; display: flex; flex-direction: column; align-items: center;">
        <h3 class="noTopMargin">Temperature</h3>
        <div class="compass marginTop0_5">
            <div class="direction primaryColor fontSize2">
                <p class="fontSize1_5">{{component._state.exhaustTemperature | number:1}}<span
                        class="fontSize0_8 marginLeft0_2">&#8451;</span>
                </p>
            </div>
        </div>
    </div>
</div>
<div class="flexLayout flexAlignCenter marginTop1">
    <div class="flexLayout flexJustifyStart flexGrow1">
        <div ng-if="!component._state.running" class="circleButton"
             ng-click="panel.callDeviceService(component, 'activate')">
            <i class="icon sl-sync-1 fontSize1_5"></i>
        </div>
        <div ng-if="component._state.running" class="circleButton"
             ng-click="panel.callDeviceService(component, 'shutdown')">
            <i class="icon sl-power-4 fontSize1_5"></i>
        </div>
    </div>
    <div class="flexLayout flexJustifyEnd flexGrow1 flexAlignBaseline primaryColor">
        <i class="icon sl-torch fontSize1_5"></i>
        <span class="fontSize1_5">{{component._state.gasConsumption | number:2}}</span>
        <span class="fontSize0_8">kg</span>
    </div>
</div>