Retro-tv page3

      - id: page3
        lambda: |-

          //color temp bar DOWN
          if ((id(temp_down).state) < 12) {
            bar_color_down = id(my_grey);
          } else if ((id(temp_down).state) < 16) {
            bar_color_down = id(my_blue);
          } else if ((id(temp_down).state) < 24) {
            bar_color_down = id(my_green);
          } else if ((id(temp_down).state) < 26) {
            bar_color_down = id(my_orange);
          } else {
            bar_color_down = id(my_red);
          }

          if ((id(temp_up).state) < 12) {
            bar_color_up = id(my_grey);
          } else if ((id(temp_up).state) < 16) {
            bar_color_up = id(my_blue);
          } else if ((id(temp_up).state) < 24) {
            bar_color_up = id(my_green);
          } else if ((id(temp_up).state) < 26) {
            bar_color_up = id(my_orange);
          } else {
            bar_color_up = id(my_red);
          }

          if ((id(temp_outside).state) < 12) {
            bar_color_out = id(my_grey);
          } else if ((id(temp_outside).state) < 16) {
            bar_color_out = id(my_blue);
          } else if ((id(temp_outside).state) < 24) {
            bar_color_out = id(my_green);
          } else if ((id(temp_outside).state) < 26) {
            bar_color_out = id(my_orange);
          } else {
            bar_color_out = id(my_red);
          }

          //grid
          it.rectangle(0, 0, 132, 128, my_grey);
          // bottom line = 0°
          it.line(5, 120, 127, 120, my_grey);
          // first line = 5°
          it.line(5, 105 ,127 , 105, my_grey);
          // 10°
          it.line(5, 90 ,127 , 90, my_grey);
          // 15°
          it.line(5, 75 ,127 , 75, my_grey);
          // 20°
          it.line(5, 60 ,127 , 60, my_grey);
          // 25°
          it.line(5, 45 ,127 , 45, my_grey);
          // 30°
          it.line(5, 30 ,127 , 30, my_grey);
          // 35°
          it.line(5, 15 ,127 , 15, my_grey);
          // 40°
          it.line(5, 0 ,127 , 0, my_grey);

          //outside temp bar graph
          int height = roundf(3 * (id(temp_outside).state));
          it.filled_rectangle(10, 128 - height, 30, height, bar_color_out);
          it.print(25, 108, id(roboto_reg), my_white, TextAlign::TOP_CENTER, "OUT");
          it.printf(25, 128 - height - 16, id(roboto_reg), my_white, TextAlign::TOP_CENTER, "%.0f°",id(temp_outside).state);

          //inside temp bar graph
          int heightIN = roundf(3 * (id(temp_down).state));
          it.filled_rectangle(50, 128 - heightIN, 30, heightIN, bar_color_down);
          it.print(65, 108, id(roboto_reg), my_white, TextAlign::TOP_CENTER, "IN");
          it.printf(65, 128 - heightIN - 16, id(roboto_reg), my_white, TextAlign::TOP_CENTER, "%.0f°",id(temp_down).state);

          //upstairs temp bar graph
          int heightUP = roundf(3 * (id(temp_up).state));
          it.filled_rectangle(90, 128 - heightUP, 30, heightUP, bar_color_up);
          it.print(105, 108, id(roboto_reg), my_white, TextAlign::TOP_CENTER, "UP");
          it.printf(105, 128 - heightUP - 16, id(roboto_reg), my_white, TextAlign::TOP_CENTER, "%.0f°",id(temp_up).state);