<window anim_hint="htranslate" style="black" x="0%" y="0%" w="800" h="480">
    <label name="bkgnd" x="0" y="0" w="100%" h="100%" style="bg0"/>

    <app_bar x="0" y="0" w="100%" h="40">
        <label name="dev_name" x="0" y="0" w="200" h="100%" tr_text="CleanAir Demo" style="title_left"/>
        <label name="sys_time" x="right:35" y="0" w="-200" h="100%" style="title_right"/>
		<button name="language_btn" x="right:5" y="0" w="25" h="100%" style="language_btn"/>
    </app_bar>

    <view x="0" y="44" w="88" h="44" layout="r:1 c:2">
        <image name="timing_status" image="clock" draw_type="icon"/>
        <image name="alarm_status" image="bell" draw_type="icon"/>
    </view>

    <view x="62" y="146" w="300" h="44">
        <label text="PM2.5" w="80" h="100%" style="reading_pm_co_t"/>
        <label name="PM2_5" x="80" w="108" h="100%" text="18" style="reading_pm_co"/>
        <rich_text x="188" w="-188" h="100%" text="<font color=&quota;white&quota; align_v=&quota;top&quota; size=&quota;18&quota;>μg/m</font><font color=&quota;white&quota; align_v=&quota;top&quota; size=&quota;10&quota;>3</font>" />
    </view>

    <view x="62" y="192" w="226" h="44">
        <rich_text w="80" h="100%" text="<font color=&quota;white&quota; align_v=&quota;middle&quota; size=&quota;32&quota;>CO</font><font color=&quota;white&quota; align_v=&quota;bottom&quota; size=&quota;18&quota;>2</font>" />
        <label x="80" name="CO_2" w="108" h="100%" text="350" style="reading_pm_co"/>
        <label x="188" w="-188" h="100%" text="ppm" style="top"/>
    </view>

    <view x="345" y="150" w="265" h="100">
        <label name="flow" w="200" h="100%" text="500" style="reading_flow"/>
        <rich_text x="200" w="65" h="100%" text="<font color=&quota;white&quota; align_v=&quota;bottom&quota; size=&quota;28&quota;>m</font><font color=&quota;white&quota; align_v=&quota;top&quota; size=&quota;18&quota;>3</font><font color=&quota;white&quota; align_v=&quota;bottom&quota; size=&quota;28&quota;>/h</font>" />
    </view>

    <view x="48" y="256" w="390" h="100">
        <view x="0" y="0" w="30" h="100%" layout="r:3 c:1" >
            <label />
            <image_animation name="fan_1" image="fan_1" sequence="ab" auto_play="false" interval="500" delay="100"/>
            <image name="fan_2" image="fan_2" draw_type="default" />
        </view>
        <view x="30" y="0" w="40" h="100%" layout="r:3 c:1" >
            <label />
            <label name="fan1" w="100%" h="100%" text="80" style="reading_temp_hum"/>
            <label name="fan2" w="100%" h="100%" text="80" style="reading_temp_hum"/>
        </view>
        <view x="70" y="0" w="20" h="100%" layout="r:3 c:1" >
            <label />
            <label text="%"/>
            <label text="%"/>
        </view>
        <view x="90" y="0" w="108" h="100%" layout="r:3 c:1" >
            <label name="humidity_in" text="50" style="reading_temp_hum"/>
            <label name="temperature_in1" text="22.0" style="reading_temp_hum"/>
            <label name="temperature_in2" text="23.0" style="reading_temp_hum"/>
        </view>
        <view x="198" y="0" w="30" h="100%" layout="r:3 c:1" >
            <label text="%"/>
            <label text="℃"/>
            <label text="℃"/>
        </view>
        <view x="228" y="0" w="86" h="100%" layout="r:3 c:1" >
            <label />
            <image name="wind_out" image="wind_out" draw_type="center"/>
            <image name="wind_in" image="wind_in" draw_type="center"/>
        </view>
        <view x="314" y="0" w="50" h="100%" layout="r:3 c:1" >
            <label name="humidity_out" text="50" style="reading_temp_hum"/>
            <label name="temperature_out1" text="20.0" style="reading_temp_hum"/>
            <label name="temperature_out2" text="18.0" style="reading_temp_hum"/>
        </view>
        <view x="364" y="0" w="30" h="100%" layout="r:3 c:1" >
            <label text="%"/>
            <label text="℃"/>
            <label text="℃"/>
        </view>
    </view>

    <view x="618" y="44" w="-618" h="352">
        <label x="35" w="100%" h="40" text="Frequency" style="left"/>
        <view x="0" y="40" w="100%" h="60">
            <button name="frequency_dec" w="20%" h="100%" style="dec_btn"/>
            <label name="frequency" x="20%" w="45%" h="100%" text="50" style="setting"/>
            <label text="Hz" x="65%" w="15%" h="100%" style="setting_unit"/>
            <button name="frequency_inc" x="80%" w="20%" h="100%" style="inc_btn"/>
        </view>
        <label x="35" y="110" w="100%" h="40" text="Temperature" style="left"/>
        <view x="0" y="150" w="100%" h="60">
            <button name="temperature_dec" w="20%" h="100%" style="dec_btn"/>
            <label name="temperature" x="20%" w="45%" h="100%" text="25" style="setting"/>
            <label text="℃" x="65%" w="15%" h="100%" style="setting_unit"/>
            <button name="temperature_inc" x="80%" w="20%" h="100%" style="inc_btn"/>
        </view>
        <label x="35" y="226" w="100%" h="40" text="Humidity" style="left"/>
        <view x="0" y="266" w="100%" h="60">
            <button name="humidity_dec" w="20%" h="100%" style="dec_btn"/>
            <label name="humidity" x="20%" w="45%" h="100%" text="45" style="setting"/>
            <label text="%" x="65%" w="15%" h="100%" style="setting_unit"/>
            <button name="humidity_inc" x="80%" w="20%" h="100%" style="inc_btn"/>
        </view>
    </view>
    
    <view x="0" y="bottom:0" w="100%" h="88">
        <button name="switch" x="0" w="147" h="100%" style="switch_btn"/>
        <button name="auto" x="149" w="166" h="100%" style="auto_btn_2a"/>
        <button name="timing" x="317" w="166" h="100%" style="timing_btn"/>
        <button name="record" x="485" w="166" h="100%" style="record_btn"/>
        <button name="setting" x="655" w="146" h="100%" style="setting_btn"/>
    </view>
</window>
