Skip to content
This repository has been archived by the owner on Jan 10, 2025. It is now read-only.

Commit

Permalink
Added widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tom-van-Woudenberg
Tom-van-Woudenberg committed May 1, 2024
1 parent b5614ad commit ae00e0e
Show file tree
Hide file tree
Showing 3 changed files with 558 additions and 126 deletions.
118 changes: 66 additions & 52 deletions book/_static/power.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}
.slider-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 100%;
}
Expand Down Expand Up @@ -54,52 +54,76 @@
}

function CO2func(s) {
return numeric.spline(RPM, CO2, s);
return interpolate(RPM, CO2, s);
}

function POWfunc(s) {
return numeric.spline(RPM, POW, s);
return interpolate(RPM, POW, s);

}

function interpolate(x, y, s) {
var i = 1;
while (x[i] < s) {
i++;
}
var x0 = x[i - 1];
var x1 = x[i];
var y0 = y[i - 1];
var y1 = y[i];
var t = (s - x0) / (x1 - x0);

// Calculate the coefficients for the cubic spline interpolation
var h = x1 - x0;
var a = (1 - t) * (1 - t) * (1 - t);
var b = 3 * t * (1 - t) * (1 - t);
var c = 3 * t * t * (1 - t);
var d = t * t * t;

// Perform cubic spline interpolation
var interpolatedValue = a * y0 + b * y[i - 1] + c * y[i] + d * y1;

return interpolatedValue;
}

function func(x, pareto_front) {
var RPM_continuous = numeric.linspace(800, 1800, 100);
var CO2_values = RPM_continuous.map(function(rpm) {
return CO2func(rpm);
});
var POW_values = RPM_continuous.map(function(rpm) {
return POWfunc(rpm);
});
function func(x) {

var weighted_obj_val = weighted_obj(x).toFixed(2);
var goal_attainment_val = goal_attainment(x).toFixed(2);

var data = [
var outputContainer = document.getElementById("outputContainer");
var weighted_obj_val = weighted_obj(x).toFixed(2);
var goal_attainment_val = goal_attainment(x).toFixed(2);
var POWfunc_val = POWfunc(x).toFixed(2);
var CO2func_val = CO2func(x).toFixed(2);

outputContainer.innerHTML = "<p>Weighted 🏋️ Objective: " + " = - 1/3 * POWfunc(" + x + ") + 2/3 * CO2func(" + x + ") = - 1/3 * " + POWfunc_val + " + 2/3 * " + CO2func_val + " = " + weighted_obj_val + "</p>" +
"<p>Goal 🥅 Attainment: max(460 - POWfunc(" + x + "), CO2func(" + x + ") - 640) = max(460 - " + POWfunc_val + ", " + CO2func_val + " - 640) = " + goal_attainment_val ;

var plotContainer = document.createElement("div");
plotContainer.id = "plotContainer";
plotContainer.style.height = "400px";
outputContainer.appendChild(plotContainer);

var plotData = [
{
x: CO2,
y: POW,
x: [CO2func(parseFloat(document.getElementById("x").value))],
y: [POWfunc(parseFloat(document.getElementById("x").value))],
type: 'scatter',
mode: 'markers',
name: 'Data points'
name: 'Selected RPM'
}
];

if (pareto_front) {
data.push({
x: CO2_values,
y: POW_values,
type: 'scatter',
mode: 'lines',
name: 'Pareto Front'
});
}

var layout = {
var plotLayout = {
xaxis: {
title: 'CO2 (g/kWh)',
range: [680, 710]
},
yaxis: {
title: 'Power functions (kW)',
range: [150, 400]
range: [400, 150], // Flipped y-axis range
},
showlegend: true,
title: {
text: 'CO2 vs Power',
font: {
Expand All @@ -108,14 +132,7 @@
}
};

Plotly.newPlot('outputContainer', data, layout);

var weighted_obj_val = weighted_obj(x);
var goal_attainment_val = goal_attainment(x);

var outputContainer = document.getElementById("outputContainer");
outputContainer.innerHTML = "<p>Weighted 🏋️ Objective: " + weighted_obj_val + "</p>" +
"<p>Goal 🥅 Attainment: " + goal_attainment_val + "</p>";
Plotly.newPlot('plotContainer', plotData, plotLayout);
}

var sliderContainer = document.getElementById("sliderContainer");
Expand All @@ -127,7 +144,7 @@
xSlider.step = 1;
xSlider.id = "x";
xSlider.oninput = function() {
func(parseFloat(document.getElementById("x").value), document.getElementById("pareto_front").checked);
func(parseFloat(document.getElementById("x").value));
};
xSlider.classList.add("slider");

Expand All @@ -136,29 +153,26 @@
xLabel.setAttribute("for", "x");
xLabel.style.textAlign = "right";

var paretoFrontCheckbox = document.createElement("input");
paretoFrontCheckbox.type = "checkbox";
paretoFrontCheckbox.checked = false;
paretoFrontCheckbox.id = "pareto_front";
paretoFrontCheckbox.onchange = function() {
func(parseFloat(document.getElementById("x").value), document.getElementById("pareto_front").checked);
};
var valueDisplay = document.createElement("span");
valueDisplay.innerHTML = xSlider.value; // Set the initial value of the display element
valueDisplay.style.marginLeft = "10px"; // Add some margin to separate the value from the slider

var paretoFrontLabel = document.createElement("label");
paretoFrontLabel.innerHTML = "Pareto Front";
paretoFrontLabel.setAttribute("for", "pareto_front");
paretoFrontLabel.style.textAlign = "right";
xSlider.oninput = function() {
valueDisplay.innerHTML = xSlider.value; // Update the value display element when the slider value changes
func(parseFloat(document.getElementById("x").value));
};

sliderContainer.appendChild(xLabel);
sliderContainer.appendChild(xSlider);
sliderContainer.appendChild(paretoFrontLabel);
sliderContainer.appendChild(paretoFrontCheckbox);
sliderContainer.appendChild(valueDisplay); // Append the value display element


var outputContainer = document.getElementById("outputContainer");
outputContainer.style.height = "400px";


// Call func with initial values
func(parseFloat(document.getElementById("x").value), document.getElementById("pareto_front").checked);
func(parseFloat(document.getElementById("x").value));
</script>
</body>
</html>
</html>
76 changes: 2 additions & 74 deletions book/pages/moo_example.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,83 +189,11 @@
"### Find best solution manually\n",
"\n",
":::{card} Test yourself\n",
"Try and adjust the values for $x_1$, $x_2$ and $x_3$. Can you find the optimal solution?\n",
"<iframe src=\"../_static/block.html\" style=\"overflow:hidden;height:350;width:100%\" height=\"350\" width=\"100%\"> frameborder=\"0\"></iframe>\n",
"Try and adjust the values for $x$. Can you find the optimal solution? How does it change for different models?\n",
"<iframe src=\"../_static/power.html\" style=\"overflow:hidden;height:600;width:100%\" height=\"350\" width=\"100%\"> frameborder=\"0\"></iframe>\n",
":::"
]
},
{
"cell_type": "code",
"execution_count": 17,
"id": "78d54a81",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "7399d6f2565944debae08a9f3fc213c9",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"interactive(children=(IntSlider(value=1000, description='RPM', max=1800, min=800), Checkbox(value=False, descr…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from ipywidgets import widgets, interact\n",
"\n",
"import numpy as np\n",
"import scipy as sp\n",
"import matplotlib.pyplot as plt\n",
"%config InlineBackend.figure_formats = ['svg']\n",
"\n",
"RPM = np.array([800, 1000, 1200, 1400, 1700, 1800])\n",
"CO2 = np.array([708, 696.889, 688.247, 682.897, 684.955, 697.3 ])\n",
"POW = np.array([161.141, 263.243, 330.51 , 381.561, 391.17, 370 ])\n",
"\n",
"def weighted_obj(s):\n",
" delta_p = 1/3\n",
" delta_c = 1 - delta_p\n",
" return -delta_p * POWfunc(s) + delta_c * CO2func(s)\n",
"\n",
"Pt = 460\n",
"Ct = 640\n",
"def goal_attainment(s):\n",
" return max(Pt - POWfunc(s),CO2func(s)-Ct)\n",
"\n",
"def CO2func(s):\n",
" return sp.interpolate.pchip_interpolate(RPM,CO2,s)\n",
"\n",
"def POWfunc(s):\n",
" return sp.interpolate.pchip_interpolate(RPM,POW,s)\n",
"\n",
"def func(x,pareto_front=True):\n",
" fig, ax = plt.subplots(1, 1)\n",
" ax.clear()\n",
" ax.plot(CO2func(x),POWfunc(x),'x')\n",
" if pareto_front:\n",
" ax.plot(CO2func(RPM_continuous),POWfunc(RPM_continuous))\n",
" ax.set_xlim([680,710])\n",
" ax.set_ylim([150,400])\n",
" ax.invert_yaxis()\n",
" ax.set_xlabel('CO$_2$ (g/kWh)')\n",
" ax.set_ylabel('Power functions (kW)')\n",
" ax.spines['right'].set_color('none')\n",
" ax.spines['top'].set_color('none')\n",
" ax.set_title('CO$_2$ vs Power')\n",
" plt.draw()\n",
" weighted_obj_val = weighted_obj(x)\n",
" goal_attainment_val = goal_attainment(x)\n",
" print('Weighted 🏋️ Objective:',weighted_obj_val)\n",
" print('Goal 🥅 Attainment:',goal_attainment_val)\n",
"\n",
"interact(func, x = widgets.IntSlider(min=800, max=1800, value=1000, step=1, description=\"RPM\"), pareto_front = widgets.Checkbox(value=False, description=\"All possible RPM\"));"
]
},
{
"cell_type": "markdown",
"id": "2a609af6",
Expand Down
Loading

0 comments on commit ae00e0e

Please sign in to comment.