Изменение внешнего изображения на основе изменения внутренней переменной без перезагрузки страницы в django

Я использую фреймворк Django для мониторинга коэффициента заполнения мусора. Я получаю данные через IOT устройство с Raspberry Pi. Когда данные датчика меняются, я хочу менять изображение на front-end без перезагрузки страницы. Таким образом, я хочу видеть данные в реальном времени на front-end. Я искал о каналах Django, но не могу понять, как изменить изображение.

  <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>

Я решил проблему с помощью этого видео https://www.youtube.com/watch?v=4StG8ZEdt-k&t=210s

Вернуться на верх