I have been exploring layouts to make my widgets more appealing and ordered. I came across this page and wanted to replicate it:
Here is the functional code that has all the calculations in it and a basic visual representation:
from ipywidgets import widgets
from ipywidgets import VBox, HBox, Label, Layout, HTML
from IPython.display import SVG, Markdown
layout = widgets.Layout(width='65px')
style = {'description_width': 'initial',
#'width'='50%'
}
layout_label = Layout(width='100%', display='flex', align_items='center')# widgets.Layout(width='65px')
style_label = {'text_align': 'center'}
# Build out the basic widgets
ten = widgets.IntText(layout=layout)
nine = widgets.IntText(layout=layout)
eight = widgets.IntText(layout=layout)
seven = widgets.IntText(layout=layout)
six = widgets.IntText(layout=layout)
five = widgets.IntText(layout=layout)
four = widgets.IntText(layout=layout)
three = widgets.IntText(layout=layout)
two = widgets.IntText(layout=layout)
one = widgets.IntText(layout=layout)
zero = widgets.IntText(layout=layout)
total_promoter = widgets.IntText(layout=layout)
total_passive = widgets.IntText(layout=layout)
total_detractor = widgets.IntText(layout=layout)
percent_promoter = widgets.Text(layout=layout)
percent_detractor = widgets.Text(layout=layout)
nps_result = widgets.Text(layout=layout)
# Build out the watchers to update calculated values
def changed_promoter(change):
total_promoter.value = ten.value + nine.value
ten.observe(changed_promoter, 'value')
nine.observe(changed_promoter, 'value')
def changed_passive(change):
total_passive.value = eight.value + seven.value
eight.observe(changed_passive, 'value')
seven.observe(changed_passive, 'value')
def changed_detractor(change):
total_detractor.value = (
six.value +
five.value +
four.value +
three.value +
two.value +
one.value +
zero.value
)
six.observe(changed_detractor, 'value')
five.observe(changed_detractor, 'value')
four.observe(changed_detractor, 'value')
three.observe(changed_detractor, 'value')
two.observe(changed_detractor, 'value')
one.observe(changed_detractor, 'value')
zero.observe(changed_detractor, 'value')
# Generate/Update the Third row of data
# The percents
def percent_calc(change):
total_surveys = (total_promoter.value +
total_passive.value +
total_detractor.value
)
percent_promoter.value = '{:.1%}'.format(total_promoter.value/total_surveys)
percent_detractor.value = '{:.1%}'.format(total_detractor.value/total_surveys)
total_promoter.observe(percent_calc)
total_passive.observe(percent_calc)
total_detractor.observe(percent_calc)
def nps_score(change):
# Since promoter detractors are represented as strings
# some conversions are necessary to do the last calculation
promoter = float(percent_promoter.value[:-1])
detractor = float(percent_detractor.value[:-1])
total = promoter - detractor
total = total/100
nps_result.value = '{:.1%}'.format(total)
percent_promoter.observe(nps_score)
percent_detractor.observe(nps_score)
# Present the widgets
VBox([
HBox([
VBox([HTML("<b><font color='a1b800'>10</b>"), ten], layout=layout_label),
VBox([HTML("<b><font color='a1b800'>9</b>"), nine], layout=layout_label),
VBox([HTML("<b><font color='969692'>8</b>"), eight], layout=layout_label),
VBox([HTML("<b><font color='969692'>7</b>"), seven], layout=layout_label),
VBox([HTML("<b><font color='e43300'>6</b>"), six], layout=layout_label),
VBox([HTML("<b><font color='e43300'>5</b>"), five], layout=layout_label),
VBox([HTML("<b><font color='e43300'>4</b>"), four], layout=layout_label),
VBox([HTML("<b><font color='e43300'>3</b>"), three], layout=layout_label),
VBox([HTML("<b><font color='e43300'>2</b>"), two], layout=layout_label),
VBox([HTML("<b><font color='e43300'>1</b>"), one], layout=layout_label),
VBox([HTML("<b><font color='e43300'>0</b>"), zero], layout=layout_label),
]),
HBox([
VBox([HTML("<b><font color='a1b800'>Total</b>"), total_promoter], layout=layout_label),
VBox([HTML("<b><font color='969692'>Total</b>"), total_passive], layout=layout_label),
VBox([HTML("<b><font color='e43300'>Total</b>"), total_detractor], layout=layout_label),
]),
HBox([
VBox([percent_promoter, HTML("<b><font color='a1b800'>of total<br> responses</b>")], layout=layout_label),
HTML("<font size='40px'>-"),
VBox([percent_detractor, HTML("<b><font color='e43300'>of total<br> responses</b>")], layout=layout_label),
HTML("<font size='40px'>="),
VBox([nps_result, Label("This is your NPS")], layout=layout_label),
])
])
That has the output (after moving some numbers) of:
(I removed the image as discourse said I could only post one media item per post)
I have been reading through this page for ideas/background:
https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html
but I am not seeing any way to visually layer or make someting a background.
The Question:
I have created svg’s to contain some of the widgets, here is an example:
(I removed the image as discourse said I could only post one media item per post, but in the image at the bottom of the post it is the green outline with the smiley face that is the svg)
Is there a mechanism in which I could contain the widgets I created (for example ten and nine) within an svg or other image?
The ideal result would be: