آموزش افزودن ویجت ها در برنامه نویسی بوکه

آموزش افزودن ویجت ها در برنامه نویسی بوکه

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش افزودن ویجت ها در برنامه نویسی بوکه خواهیم پرداخت.

پیشنهاد ویژه : پکیج آموزش پایتون مختص بازار کار

ماژول bokeh.models.widgets شامل تعاریفی از اشیا  GUI مشابه عناصر فرم HTML مانند دکمه، اسلایدر، کادر تأیید، دکمه رادیو و غیره است. این کنترل ها رابط تعاملی یک طرح را فراهم می کنند. فراخوانی پردازش هایی مانند تغییر داده های نمودار، تغییر پارامترهای نمودار ، و غیره ، می تواند توسط توابع جاوا اسکریپت سفارشی اجرا شده در رویدادهای مربوطه انجام شود.

بوکه اجازه می دهد تا تابع  برگشتی فراخوانده شده با دو روش تعریف شود –

• از CustomJS callback استفاده کنید تا تعامل در اسناد مستقل HTML کار کند.
• از سرور بوکه استفاده کنید و کنترل کننده های رویداد را تنظیم کنید.

در این بخش، نحوه افزودن ویجت های بوکه و اختصاص دادن پاسخ های جاوا اسکریپت را خواهیم دید.

دکمه

این ویجت یک دکمه قابل کلیک است که به طور کلی برای فراخوانی کنترل کال بک تعریف شده توسط کاربر استفاده می شود. سازنده پارامترهای زیر را در نظر می گیرد –

Button(label, icon, callback)

پارامتر برچسب رشته ای است که به عنوان زیرنویس دکمه استفاده می شود و پاسخ تابع JavaScript سفارشی است که هنگام کلیک فراخوانی می شود.

در مثال زیر، یک طرح و ابزارک دکمه در طرح ستون نمایش داده می شود. نمودار به طور خلاصه خط بین سری داده های x و y را ارائه می دهد.

یک تابع جاوا اسکریپت سفارشی به نام ‘callback’ با استفاده از تابع ()CutomJS  تعریف شده است. این ارجاع به شیئی است که باعث بازگشت (در این مورد دکمه) در متغیر فرم cb_obj می شود.

این تابع داده های ColumnDataSource منبع را تغییر می دهد و در نهایت این به روزرسانی را در داده های منبع منتشر می کند.

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import Button

x = [x*0.05 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

callback = CustomJS(args=dict(source=source), code="""
   var data = source.data;
   x = data['x']
   y = data['y']
   for (i = 0; i < x.length; i++) {
      y[i] = Math.pow(x[i], 4)
   }
   source.change.emit();
""")

btn = Button(label="click here", callback=callback, name="1")

layout = column(btn , plot)
show(layout)

خروجی (اولیه)

روی دکمه بالای طرح کلیک کنید و شکل طرح به روز شده را ببینید که به صورت زیر است –

خروجی (پس از کلیک)

اسلایدر

با کمک یک اسلایدر کنترل می توان بین خصوصیات شروع و پایان اختصاص داده شده به آن عددی را انتخاب کرد.

Slider(start, end, step, value)

مقدار عددی فوری اسلایدر به صورت cb_obj.value برای تغییر داده های ColumnDatasource در دسترس است. با کشیدن موقعیت ، شکل نمودار به طور مداوم به روز می شود.

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import Slider

x = [x*0.05 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

handler = CustomJS(args=dict(source=source), code="""
   var data = source.data;
   var f = cb_obj.value
   var x = data['x']
   var y = data['y']
   for (var i = 0; i < x.length; i++) {
      y[i] = Math.pow(x[i], f)
   }
   source.change.emit();
""")

slider = Slider(start=0.0, end=5, value=1, step=.25, title="Slider Value")

slider.js_on_change('value', handler)
layout = column(slider, plot)
show(layout)

خروجی

RadioGroup
این ویجت مجموعه ای از دکمه های ضامن متغیر را نشان می دهد که دکمه های دایره ای شکل را در سمت چپ زیرنویس نشان می دهد.

RadioGroup(labels, active)

انتخاب  (Select)

این ویجت یک لیست کشویی ساده از موارد رشته ای است که یکی از آنها را می توان انتخاب کرد. رشته انتخاب شده در پنجره بالا ظاهر می شود و این پارامتر مقدار است.

Select(options, value)

لیست عناصر رشته ای در کشویی به شکل لیست گزینه ها آورده شده است.

در زیر مثالی ترکیبی از دکمه های رادیویی و ویجت های انتخابی آورده شده است که هر دو سه رابطه متفاوت بین سری داده های x و y را فراهم می کند. ویجت های RadioGroup و Select با استفاده از متد () on_change در کنترل کننده های مربوطه ثبت می شوند.

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import RadioGroup, Select

x = [x*0.05 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

radiohandler = CustomJS(args=dict(source=source), code="""
   var data = source.data;
   console.log('Tap event occurred at x-position: ' + cb_obj.active);
   //plot.title.text=cb_obj.value;
   x = data['x']
   y = data['y']
   if (cb_obj.active==0){
      for (i = 0; i < x.length; i++) {
         y[i] = x[i];
      }
   }
   if (cb_obj.active==1){
      for (i = 0; i < x.length; i++) {
         y[i] = Math.pow(x[i], 2)
      }
   }
   if (cb_obj.active==2){
      for (i = 0; i < x.length; i++) {
         y[i] = Math.pow(x[i], 4)
      }
   }
   source.change.emit();
""")

selecthandler = CustomJS(args=dict(source=source), code="""
   var data = source.data;
   console.log('Tap event occurred at x-position: ' + cb_obj.value);
   //plot.title.text=cb_obj.value;
   x = data['x']
   y = data['y']
   if (cb_obj.value=="line"){
      for (i = 0; i < x.length; i++) {
         y[i] = x[i];
      }
   }
   if (cb_obj.value=="SquareCurve"){
      for (i = 0; i < x.length; i++) {
         y[i] = Math.pow(x[i], 2)
      }
   }
   if (cb_obj.value=="CubeCurve"){
      for (i = 0; i < x.length; i++) {
         y[i] = Math.pow(x[i], 4)
      }
   }
   source.change.emit();
""")

radio = RadioGroup(
   labels=["line", "SqureCurve", "CubeCurve"], active=0)
radio.js_on_change('active', radiohandler)
select = Select(title="Select:", value='line', options=["line", "SquareCurve", "CubeCurve"])
select.js_on_change('value', selecthandler)

layout = column(radio, select, plot)
show(layout)

خروجی

ویجت Tab

همانطور که در یک مرورگر، هر برگه می تواند صفحه وب مختلفی را نشان دهد ، ویجت Tab نیز مدل بوکه است که نمای متفاوتی به هر شکل ارائه می دهد. در مثال زیر، دو شکل منحنی سینوس و کسینوس در دو زبانه مختلف ارائه شده است –

from bokeh.plotting import figure, output_file, show
from bokeh.models import Panel, Tabs
import numpy as np
import math
x=np.arange(0, math.pi*2, 0.05)
fig1=figure(plot_width=300, plot_height=300)

fig1.line(x, np.sin(x),line_width=2, line_color='navy')

tab1 = Panel(child=fig1, title="sine")
fig2=figure(plot_width=300, plot_height=300)
fig2.line(x,np.cos(x), line_width=2, line_color='orange')
tab2 = Panel(child=fig2, title="cos")

tabs = Tabs(tabs=[ tab1, tab2 ])

show(tabs)

خروجی

منبع.

لیست جلسات قبل آموزش برنامه نویسی بوکه 

1. آموزش برنامه نویسی بوکه – مقدمه
2. آموزش تنظیمات محیط برنامه نویسی بوکه
3. آموزش برنامه نویسی بوکه و شروع کار
4. آموزش ژوپیتر نوت بوک در برنامه نویسی بوکه 
5. آموزش مفاهیم کلی برنامه نویسی بوکه
6. آموزش طرح ها و گلیف در برنامه نویسی بوکه
7. آموزش نمودار مساحت در برنامه نویسی بوکه
8. آموزش گلیف دایره در برنامه نویسی بوکه
9.  آموزش مستطیل، بیضی و چند ضلعی در برنامه نویسی بوکه
10. آموزش گوه و قوس در برنامه نویسی بوکه
11. آموزش منحنی های تخصصی در برنامه نویسی بوکه
12. آموزش تنظیم محدوده ها در برنامه نویسی بوکه
13. آموزش محورها در برنامه نویسی بوکه
14.  آموزش حاشیه نویسی و legendها در برنامه نویسی بوکه
15. آموزش pandas در برنامه نویسی بوکه
16. آموزش  ColumnDataSource در برنامه نویسی بوکه
17. آموزش فیلتر کردن داده ها در برنامه نویسی بوکه
18. آموزش طرح بندی در برنامه نویسی بوکه
19. آموزش نوار ابزار در برنامه نویسی بوکه
20. آموزش ویژگی های بصری در برنامه نویسی بوکه 
21. آموزش سفارشی کردن legend ها در برنامه نویسی بوکه