Exemplos de Componentes Visuais para iPython



In [ ]:

    
from resources.iot.device import IoT_sensor_consumer
from IPython.core.display import display
import ipywidgets as widgets
from resources.iot.device import IoT_mqtt_publisher, IoT_sensor

Barra



In [ ]:

    
widgets.FloatProgress(value=30.0, min=0, max=100.0, bar_style='danger', orientation='vertical')



In [ ]:

    
widgets.FloatProgress(value=60.0, min=0, max=100.0, bar_style='info', orientation='horizontal', description='pressão: ')

Label



In [ ]:

    
widgets.Label("isto é um label")

Criando dois componentes visuais



In [ ]:

    
widget       = widgets.FloatProgress(min=0, max=100.0, bar_style='info', orientation='vertical', description='exemplo') # 'success', 'info', 'warning', 'danger' or ''

widget_label = widgets.Label("isto é um label")

Renderizando componentes visuais



In [ ]:

    
display(widget, widget_label)

Criando um componente que consome mensagens do MQTT



In [ ]:

    
consumer = IoT_sensor_consumer("localhost",1883,"sensor/+/+")

Conectando os componentes



In [ ]:

    
consumer.connect(widget, widget_label)

Dashboard de componentes

Criando o consumidor_1 e seus widgets



In [ ]:

    
widget_1       = widgets.FloatProgress(min=0, max=40.0, bar_style='info', orientation='vertical') 

widget_1_label = widgets.Label()

consumer_1 = IoT_sensor_consumer("localhost",1883,"sensor/1/+")

Criando o consumidor_2 e seus widgets



In [ ]:

    
widget_2       = widgets.FloatProgress(min=0, max=90.0, bar_style='warning', orientation='vertical')

widget_2_label = widgets.Label()

consumer_2 = IoT_sensor_consumer("localhost",1883,"sensor/2/+")

Criando o consumidor_3 e seus widgets



In [ ]:

    
widget_3       = widgets.FloatProgress(min=0, max=40.0, bar_style='info', orientation='vertical')

widget_3_label = widgets.Label()

consumer_3 = IoT_sensor_consumer("localhost",1883,"sensor/3/+")

Criando o consumidor_4 e seus widgets



In [ ]:

    
widget_4       = widgets.FloatProgress(min=0, max=90.0, bar_style='warning', orientation='vertical')

widget_4_label = widgets.Label()

consumer_4 = IoT_sensor_consumer("localhost",1883,"sensor/4/+")

Criando o consumidor_avg e seus widgets



In [ ]:

    
widget_avg       = widgets.FloatProgress(min=0, max=90.0, bar_style='success', orientation='horizontal')

widget_avg_label = widgets.Label()

consumer_avg = IoT_sensor_consumer("localhost",1883,"sensor/*/temperature/avg")

Organizando os componentes visualmente



In [ ]:

    
separator = widgets.Label(value=" ---------- ")
col_1 = widgets.VBox([widget_1, widget_1_label])
col_2 = widgets.VBox([widget_2, widget_2_label])
col_3 = widgets.VBox([widget_3, widget_3_label])
col_4 = widgets.VBox([widget_4, widget_4_label])

col_5 = widgets.HBox([widget_avg, widget_avg_label])


row_1 = widgets.HBox([separator, col_1, separator, col_2, separator, col_3, separator, col_4])
row_2 = widgets.HBox([col_5])
display(row_1)
display(row_2)

Conectando componentes visuais e seus respectivos consumidores



In [ ]:

    
consumer_1.connect(widget_1, widget_1_label)
consumer_2.connect(widget_2, widget_2_label)
consumer_3.connect(widget_3, widget_3_label)
consumer_4.connect(widget_4, widget_4_label)

consumer_avg.connect(widget_avg, widget_avg_label)

Exercícios

Exercício 1 (não é necessário entregar)

No notebook 2.iot-java.ipynb, faça o componente que publica a média dos valores das N leituras publicar uma mensagem com a média das próximas 15 leituras de temperatura. Verifique se estas mensagens atualizarão o componente visual do tipo barra que está mais acima na posição horizontal.

Exercício 2

Seguindo o notebook 1.iot-devices.ipynb, na célula abaixo crie um sensor_5 com id/name 50 que publica leituras da grandeza física pressure que variam dentro dentro do intervalo [90,110] psi (publicações devem ser feitas a cada 5 segundos). Crie também um publisher e conecte os dois componentes.



In [ ]:

Exercício 3

Seguindo os exemplos deste notebook, crie um widget do tipo barra (faixa de valores entre 0 e 150) e um widget do tipo label que deverão exibir os valores publicados no barramento pelo sensor_5 criado no exercício 2.

Crie um IoT_sensor_consumer que deverá escutar o tópico sensor/50/pressure. Exiba os componentes visuais e conecte os componentes para visualizar os valores.



In [ ]: