Howdy,
Just want to share instruction of how to display circular progress bars in anvil.
Please look at the like app here https://progressbar.anvil.app
Working examples are found here Examples - Circle Progress
All credits goes to Tigrr
Step by step guide:
1, Go to https://github.com/tigrr/circle-progress/raw/master/dist/circle-progress.min.js and copy all the source code.
2, Inside anvil, Add a new asset => select Javascript file as file type => name the file progressbar.js
3, paste the copied source code inside progressbar.js
4, Click on Native Libraries and add the following code:
<script src="_/theme/progressbar.js"></script>
5, Add a new Form => select Custom HTML
6, On the right side, at the Properties tab, find the EDIT button to edit the HTML code and paste the following code:
<div class="pb"></div>
<script>
const _pb = new CircleProgress('.pb', {
max: 100,
value: 60,
});
</script>
7, Open up the main (startup form) and drag and drop the newly created form (custom HTML) into the page.
Link to anvil projekt
https://anvil.works/build#clone:ZIWCPAOEIEFAOADK=X2GLHKN7K7EFWJA2WO3G7LN5
UPDATE
After some errors with multiple html forms inside a form i reworked the code a bit. The project below does not use a custom html form.
Now we add the widget with python code inside the form_show method.
from ._anvil_designer import ProcessbarFormTemplate
from anvil import *
import anvil.js
from anvil.js.window import CircleProgress
import time
import random
class ProcessbarForm(ProcessbarFormTemplate):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
# Any code you write here will run before the form opens.
def form_show(self, **event_args):
self.obj = anvil.js.get_dom_node(self.spacer_1) #for some reason it only works with spacer and column_panel
time.sleep(1) #dont know why the sleep is necessary
self._pb = CircleProgress(self.obj, {"max": 100,"value": 60})
def timer_1_tick(self, **event_args):
self._pb['value'] = random.randint(1,100)
https://anvil.works/build#clone:SHT6TS5U43FI6XDJ=UURHKH7KSXPHNTVXJ5CUSTSA