# Using plugins to extend HTML cells This demo illustrates the use of HTML cells with widgets that are not natively availble in SWISH. There are two options to load external JavaScript and CSS: 1. Use `notebook.loadCSS(URL)` and the _RequireJS_ `require(dependencies, function)`. Note that loading additional CSS may have global effect on the application. 2. Pre-load the plugin using a Prolog config file. An example is provided in the SWISH distribution in `config-available/plugin_slider.pl`, which preloads the Bootstrap slider. We use the _slider_ plugin in the HTML cells below. The three demos show the same chart, but illustrate the aspects below. You may __double click__ on any of the HTML cells below to view the __source__. 1. Explicitly load the CSS and JavaScript 2. Rely on pre-loaded plugin 3. Hide the Prolog query. --

Color tempterature chart -- explicitly loaded extensions

Create a chart showing the relation between the color temperature and the RGB value.

Temperature range

1000 40000

projection([Chart]), color_temp_chart(Min, Max, 500, Chart)

Color tempterature chart -- preloaded extensions

Create a chart showing the relation between the color temperature and the RGB value.

Temperature range

1000 40000

projection([Chart]), color_temp_chart(Min, Max, 500, Chart)

Color tempterature chart -- hidden Prolog query

Create a chart showing the relation between the color temperature and the RGB value.

Temperature range

1000 40000

projection([Chart]), color_temp_chart(Min, Max, 500, Chart)

## The helper programs The first cell creates the charts. The one below provides the actual implementation of the conversion routine.

:- use_rendering(c3). color_temp_chart(Min, Max, Steps, Chart) :- Step is (Max-Min)/Steps, Start is round(Min/Step), End is round(Max/Step), findall(_{temp:Temp, red:R, green:G, blue:B}, ( between(Start, End, T0), Temp is T0*Step, color_temp_rgb(Temp, R, G, B) ), Data), Chart = c3{data:_{x:temp, colors:_{red:red, green:green, blue:blue}, type:spline, rows:Data}, point:_{show:false}, axis:_{x:_{tick: _{values: [1000, 6600, 10000, 20000, 40000]}}}}.

%! color_temp_rgb(+Temp, -R, -G, -B) % % @see http://www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code/ color_temp_rgb(Temp, R, G, B) :- T is Temp/100, ctemp_red(T, R), ctemp_green(T, G), ctemp_blue(T, B). ctemp_red(T, R) :- T =< 66, !, R = 255. ctemp_red(T, R) :- R is max(0, min(255, 329.698727446 * ((T-60) ^ -0.1332047592))). ctemp_green(T, G) :- T =< 66, !, G is max(0, min(255, 99.4708025861 * log(T) - 161.1195681661)). ctemp_green(T, G) :- G is max(0, min(255, 288.1221695283 * (T-60) ^ -0.0755148492)). ctemp_blue(T, B) :- T >= 66, !, B = 255. ctemp_blue(T, B) :- T =< 19, !, B = 0. ctemp_blue(T, B) :- B is max(0, min(255, 138.5177312231 * log(T-10) - 305.0447927307)).