'Changing front-end image based on back-end variable change without reloading page in django

I'm using Django framework to monitor garbage fill ratio. I' m getting the data via IOT device with Raspberry Pi. So when the sensor data change, I want to change the image on front-end without page reload. So I want to see real time data on front-end. I searched about Django channels but I can not figure it out how to change image.

  <body>
    <h1 class="title">Garbage Monitoring System</h1>
    <div class="trash-bin">
      {% if binCapacity == 0 %}
       <img src="static/images/0.png" alt="zeroGarbage" />
      <p>Fill Ratio: 0%</p>
      {% elif binCapacity == 25 %}
       <img src="static/images/25.png" alt="%25 Garbage" />
      <p>Fill Ratio: 25%</p>
      {% elif binCapacity == 50 %}
       <img src="static/images/50.png" alt="%50 Garbage" />
      <p>Fill Ratio: 50%</p>
      {% elif binCapacity == 75 %}
       <img src="static/images/75.png" alt="%75 Garbage" />
      <p>Fill Ratio: 75%</p>
      {% elif binCapacity == 100 %}
       <img src="static/images/100.png" alt="%100 Garbage" />
      <p>Fill Ratio: 100%</p>
      {% endif %}
    </div>
  </body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Changing front-end image based on back-end variable change without reloading page in django

Sources

Related Questions