Skip to content

Instantly share code, notes, and snippets.

@teddokano

teddokano/pca995x_gradation_control_interface_prototype.html

Last active November 5, 2022 00:42
Show Gist options
  • Save teddokano/5603e8f4582f10852e4334ba1f8ae72f to your computer and use it in GitHub Desktop.
Save teddokano/5603e8f4582f10852e4334ba1f8ae72f to your computer and use it in GitHub Desktop.
Download ZIP
for "mikan" project: pca995x gradation control interface prototype
Raw
pca995x_gradation_control_interface_prototype.html
<!--
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ui prototype</title>
<style>
</style>
</head>
<body>
<div class="header">
</div>
<div id="temperature" class="datetime" width="50%"></div>
<div>
<canvas id="myLineChart" width="40" height="10"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
class GradationFunc {
constructor( max_iref, ramp_time, up, down, hold_on_time, hold_off_time, phase ) {
if ( 0 < ramp_time ) {
let iref = max_iref * 255;
let time = ramp_time * 1000;
let step_duration = time / iref;
let cycle_time;
let multi_fctr;
let iref_inc;
if ( 32 < step_duration )
cycle_time = 8;
else
cycle_time = 0.5;
multi_fctr = parseInt( step_duration / cycle_time );
multi_fctr = (multi_fctr < 1) ? 1 : multi_fctr;
multi_fctr = (64 < multi_fctr) ? 64 : multi_fctr;
if ( 1 == multi_fctr )
iref_inc = parseInt( iref / (time / cycle_time) )
else
iref_inc = 1
ramp_time = ((multi_fctr * cycle_time ) * (iref / iref_inc)) / 1000
}
this.phase = phase;
this.iref = max_iref;
this.ramp_time = ramp_time;
this.t_ramp_up = up ? ramp_time : 0;
this.t_hold_on = this.t_ramp_up + hold_on_time;
this.t_ramp_dn = this.t_hold_on + (down ? ramp_time : 0);
this.t_cycle = this.t_ramp_dn + hold_off_time;
this.values = [];
}
getCurve( time ) {
let t;
let v;
time %= this.t_cycle;
if ( time < this.t_ramp_up ) {
t = time - 0;
v = this.iref * (t / this.ramp_time);
}
else if ( time < this.t_hold_on ) {
v = this.iref;
}
else if ( time < this.t_ramp_dn ) {
t = time - this.t_hold_on;
v = this.iref * (1 - (t / this.ramp_time));
}
else {
v = 0;
}
this.values.push( v );
}
}
/*
* Javascript code for DUT_TEMP.py
*
* This script will be processed in DUT_LEDC.py to replace "{% %}" valriables
*/
const TABLE_LEN = 10
const GRAPH_HIGH = 1
const GRAPH_LOW = 0
function drawChart( time, g0, g1, g2, g3, g4, g5, g6 ) {
var ctx = document.getElementById("myLineChart");
window.myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [
{
label: 'group0',
data: g0,
lineTension: 0.0,
pointRadius: 0,
borderColor: "rgba( 0, 0, 0, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )"
},
{
label: 'group1',
data: g1,
lineTension: 0.0,
pointRadius: 0,
borderColor: "rgba( 115, 78, 48, 0.5 )",
backgroundColor: "rgba( 0, 0, 0, 0 )"
},
{
label: 'group2',
data: g2,
lineTension: 0.0,
pointRadius: 0,
borderColor: "rgba( 255, 0, 0, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )"
},
{
label: 'group3',
data: g3,
lineTension: 0.0,
pointRadius: 0,
borderColor: "rgba( 237, 109, 53, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )"
},
{
label: 'group4',
data: g4,
lineTension: 0.0,
pointRadius: 0,
borderColor: "rgba( 255, 190, 0, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )"
},
{
label: 'group5',
data: g5,
lineTension: 0.0,
pointRadius: 0,
borderColor: "rgba( 0, 255, 0, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )"
},
],
},
options: {
animation: false,
title: {
display: true,
text: 'gradation curves'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: GRAPH_HIGH,
suggestedMin: GRAPH_LOW,
stepSize: 0.1,
callback: function(value, index, values){
return value + ''
}
},
scaleLabel: {
display: true,
labelString: 'current ratio'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'time'
}
}]
},
}
});
}
window.addEventListener( 'load', function () {
updatePlot();
});
function updatePlot() {
let time_base = []
let gradation_groups = [];
for ( let i = 0; i < 6; i++ ) {
let iref = parseFloat( document.getElementById( 'maxCurrent' + 0 ).value ) - (i * 0.1);
let rtime = parseFloat( document.getElementById( 'rampTimeField' + 0 ).value );
let h_on = parseFloat( document.getElementById( 'holdON' + 0 ).value );
let h_off = parseFloat( document.getElementById( 'holdOFF' + 0 ).value );
let up = document.getElementById( 'rampSwUp' + 0 ).checked;
let down = document.getElementById( 'rampSwDown' + 0 ).checked;
let phase = document.getElementById( 'phase' + 0 ).value;
gradation_groups[ i ] = new GradationFunc( iref, rtime, up, down, h_on, h_off, phase );
}
t_max = 0;
for ( let g of gradation_groups ){
t_max = (t_max < g.t_cycle) ? g.t_cycle : t_max;
}
let resoution = 1000
for ( let i = 0; i <= t_max * resoution; i ++ ) {
time_base.push( i / resoution );
}
for ( let g of gradation_groups ) {
for ( let element of time_base ) {
g.getCurve( element );
}
}
drawChart( time_base, gradation_groups[ 0 ].values, gradation_groups[ 1 ].values, gradation_groups[ 2 ].values, gradation_groups[ 3 ].values, gradation_groups[ 4 ].values, gradation_groups[ 5 ].values );
document.getElementById( 'rampTimeField' + 0 ).value = gradation_groups[ 0 ].ramp_time
}
function updateGroupSelect( id, i ) {
let value = document.getElementById( id + i ).value;
console.log( id + i + ' : ' + value );
}
function updateGradationEnable( id, i ) {
let value = document.getElementById( id + i ).checked;
console.log( id + i + ' : ' + value );
}
</script>
</div>
<div class="para">
<div id="reg_table" class="control_panel reg_table log_panel">
AAAAA
</div>
<div id="reg_table" class="control_panel reg_table log_panel">
Gradation enable<br/>
<table>
<tr>
<td>
<input type="checkbox" onchange="updateGradationEnable( 'gradationEnable', 0 );" id="gradationEnable0">
<label for="gradationEnable0">ch 0</label>
</td>
</tr>
</table>
Group select<br/>
<table>
<tr>
<td>
<label for="groupSelect0">ch 0</label>
<select name="group" id="groupSelect0" oninput="updateGroupSelect( 'groupSelect', 0 );">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>
<label for="maxCurrent0">Max curent ratio</label>
<input type="text" onchange="updatePlot();" id="maxCurrent0" value="1.0" size=6>
</td>
<td>
<label for="rampTimeField0">Ramp-time</label>
<input type="text" onchange="updatePlot();" id="rampTimeField0" value="1.0" size=6>
</td>
<td>
<input type="checkbox" checked onchange="updatePlot();" id="rampSwUp0">
<label for="updateRampSwUp0">Ramp-up</label>
</td>
<td>
<input type="checkbox" checked onchange="updatePlot();" id="rampSwDown0">
<label for="updateRampSwDown0">Ramp-down</label>
</td>
<td>
<label for="updateHoldON0">Hold-ON time</label>
<select name="hold_on_time" id="holdON0" oninput="updatePlot();">
<option value="1.00" selected hidden>1.00</option>
<option disabled="disabled" >---</option>
<option value="0.00">0.00</option>
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="0.75">0.75</option>
<option value="1.00">1.00</option>
<option value="2.00">2.00</option>
<option value="4.00">4.00</option>
<option value="6.00">6.00</option>
</select>
</td>
<td>
<label for="updateHoldOFF0">Hold-OFF time</label>
<select name="hold_on_time" id="holdOFF0" oninput="updatePlot();" value="1.00">
<option value="1.00" selected hidden>1.00</option>
<option disabled="disabled" >---</option>
<option value="0.00">0.00</option>
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="0.75">0.75</option>
<option value="1.00">1.00</option>
<option value="2.00">2.00</option>
<option value="4.00">4.00</option>
<option value="6.00">6.00</option>
</select>
</td>
<td>
<label for="updatePhase0">Phase*</label>
<select name="phase" id="phase0" oninput="updatePlot();">
<option value="0">no delay</option>
<option disabled="disabled" >---</option>
<option value="1/2">1 / 2</option>
<option disabled="disabled" >---</option>
<option value="1/3">1 / 3</option>
<option value="2/3">2 / 3</option>
<option disabled="disabled" >---</option>
<option value="1/4">1 / 4</option>
<option value="3/4">3 / 4</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment