Can't load variables into site.css for Flask app to render home.html

Question:

I’m really struggling with trying to get my site.css file to accept two variables being passed in from my app.py using Jinja2 template i.e., {{ variable }}. Within app.py, I am defining two variables called: empty_fill_line and fill_line, which dynamically update with respect to the water level measurment recorded by an ultrasonic sensor.

What it should do, is I’ve created a table overlaid on an image of a tank in home.html, which has two rows (.empty-line and .fill-line). As the variables are adjusted with the measurement value, should be getting passed into site.css where .empty-line and .fill line are defined. However, it doesn’t appear site.css is accepting this format. I’ve tried adding a script tag within home.html to include these two definitions, but it doesn’t like it.

extract from app.py:

@app.route("/")
def home() -> str:
    distance = get_water_level()
    distance_percentage = distance / 0.126 # 0.126 = 12.6 cm internal height of tank
    fill_line = round(distance_percentage * 2.25) # convert distance to pixels in tank graphic
    empty_fill_line = 225 - fill_line # empty line inverse of fill line
    temp = get_water_temp()
    return render_template("home.html", distance=distance, temp=temp, fill_line=fill_line, empty_fill_line=empty_fill_line)

extract from home.html: (NOTE: I have deliberately added both variables into the div classes for testing)

<table>
      <tr>
        <td id="tank">
          <table id="tanktable" name="table" height=20px style="border-spacing: 50px;">
            <tr>
              <td>
                <div class="empty-line">{{ empty_fill_line }}</div>
                <div class="fill-line">{{ fill_line }}</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

extract from site.css:

/* Water tank */
#tanktable {
  margin-top:29px;
  margin-left:2px;
  /* border: 1px solid rgb(245, 6, 6); */
  /* height: 225px; */
  border-collapse: collapse;
}
.empty-line {
  border-left: 180px solid rgb(255, 255, 255);
  height:{{ empty_fill_line }}px;
}
.fill-line {
  border-left: 180px solid #28a1f7;
  height:{{ fill_line }}px;
}

How this looks when I run the Flask app is as follows:
Flask App

I’m completely stuck with how to get this working.

If I try to use inline css within home.html as follows:

  <table>
      <tr>
        <td id="tank">
          <table id="tanktable" name="table" height=20px style="border-spacing: 50px;">
            <tr>
              <td>
                <div class="empty-line" style="border-left: 180px solid rgb(255, 255, 255); height:{{ empty_fill_line }}px;"></div>
                <div class="fill-line" style="border-left: 180px solid #28a1f7; height:{{ fill_line }}px;"></div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

this is what happens: Flask app with inline css

Asked By: Ash Fletcher

||

Answers:

Sample code

home.html

Here we are using inline css this will work for your solution.

You can also internal css which means you define css style code on head tag.

  <table>
      <tr>
        <td id="tank">
          <table id="tanktable" name="table" height=20px style="border-spacing: 50px;">
            <tr>
              <td>
                <div style="border-left: 180px solid rgb(255, 255, 255); height:{{ empty_fill_line }}px;">{{ empty_fill_line }}</div>
                <div style="border-left: 180px solid #28a1f7;height:{{ fill_line }}px;">{{ fill_line }}</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Answered By: Yuvaraja
Categories: questions Tags: , , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.