180 lines
12 KiB
HTML
180 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<style>
|
|
body {
|
|
background-color: grey;
|
|
}
|
|
#mycanvas {
|
|
width: 800px;
|
|
height: 600px;
|
|
display: block;
|
|
margin: 20px auto;
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button onclick="UpdateDataFromClipboard();">Paste Data from Clip</button>
|
|
<canvas id="mycanvas"></canvas>
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
const SAMPLES_PER_SECOND = 250_000;
|
|
|
|
console.log("Script defer???");
|
|
let data = [3948, 3962, 3958, 3956, 3942, 3952, 3936, 3948, 3946, 3940, 3931, 3933, 3940, 3930, 3930, 3929, 3930, 3926, 3912, 3912, 3923, 3922, 3918, 3919, 3917, 3898, 3896, 3900, 3908, 3899, 3894, 3886, 3904, 3884, 3894, 3886, 3882, 3888, 3885, 3874, 3868, 3884, 3866, 3861, 3865, 3864, 3854, 3854, 3852, 3850, 3848, 3852, 3857, 3842, 3845, 3838, 3849, 3842, 3846, 3835, 3838, 3844, 3827, 3827, 3823, 3833, 3838, 3833, 3816, 3822, 3810, 3810, 3819, 3804, 3802, 3803, 3800, 3803, 3799, 3793, 3801, 3791, 3794, 3794, 3795, 3785, 3787, 3782, 3789, 3774, 3781, 3778, 3781, 3778, 3778, 3763, 3763, 3768, 3768, 3756, 3758, 3766, 3765, 3768, 3759, 3744, 3753, 3741, 3760, 3737, 3736, 3744, 3746, 3739, 3740, 3730, 3725, 3724, 3731, 3721, 3729, 3724, 3714, 3718, 3710, 3708, 3712, 3709, 3704, 3710, 3716, 3698, 3706, 3694, 3701, 3706, 3691, 3698, 3685, 3694, 3681, 3697, 3692, 3685, 3674, 3683, 3680, 3669, 3666, 3670, 3678, 3666, 3676, 3668, 3674, 3662, 3653, 3664, 3652, 3652, 3654, 3662, 3652, 3640, 3650, 3648, 3644, 3651, 3646, 3632, 3630, 3633, 3627, 3631, 3622, 3622, 3619, 3616, 3627, 3629, 3625, 3614, 3608, 3625, 3609, 3602, 3606, 3599, 3607, 3595, 3604, 3594, 3593, 3595, 3587, 3597, 3601, 3585, 3584, 3583, 3586, 3583, 3590, 3583, 3584, 3584, 3576, 3576, 3580, 3583, 3578, 3573, 3573, 3580, 3580, 3577, 3570, 3561, 3566, 3561, 3556, 3557, 3564, 3548, 3558, 3560, 3546, 3540, 3552, 3537, 3553, 3545, 3537, 3541, 3532, 3527, 3529, 3530, 3526, 3533, 3536, 3528, 3528, 3520, 3512, 3524, 3515, 3521, 3508, 3516, 3504, 3510, 3514, 3502, 3496, 3494, 3496, 3492, 3489, 3489, 3500, 3488, 3494, 3494, 3490, 3489, 3477, 3482, 3473, 3473, 3469, 3467, 3472, 3474, 3480, 3475, 3469, 3469, 3461, 3456, 3452, 3461, 3465, 3460, 3446, 3444, 3448, 3443, 3440, 3442, 3436, 3435, 3434, 3445, 3433, 3428, 3435, 3426, 3423, 3422, 3425, 3420, 3430, 3425, 3416, 3418, 3411, 3428, 3425, 3421, 3405, 3408, 3409, 3400, 3398, 3398, 3402, 3408, 3394, 3390, 3392, 3387, 3397, 3388, 3393, 3389, 3387, 3385, 3390, 3388, 3377, 3372, 3385, 3369, 3371, 3366, 3370, 3374, 3362, 3360, 3366, 3363, 3357, 3357, 3352, 3358, 3355, 3347, 3360, 3360, 3343, 3342, 3347, 3337, 3334, 3334, 3342, 3344, 3339, 3337, 3340, 3337, 3331, 3335, 3322, 3333, 3331, 3317, 3326, 3328, 3317, 3312, 3318, 3312, 3304, 3312, 3316, 3300, 3298, 3298, 3309, 3301, 3295, 3295, 3289, 3296, 3291, 3293, 3298, 3293, 3280, 3288, 3277, 3277, 3273, 3284, 3286, 3285, 3274, 3272, 3282, 3264, 3266, 3265, 3272, 3267, 3273, 3258, 3258, 3251, 3264, 3264, 3258, 3251, 3254, 3259, 3246, 3240, 3246, 3244, 3243, 3246, 3241, 3243, 3242, 3227, 3241, 3233, 3224, 3229, 3220, 3230, 3226, 3228, 3225, 3216, 3228, 3212, 3222, 3217, 3212, 3210, 3217, 3208, 3206, 3203, 3202, 3194, 3204, 3195, 3206, 3200, 3192, 3194, 3188, 3181, 3181, 3195, 3179, 3193, 3182, 3177, 3182, 3171, 3171, 3168, 3180, 3177, 3176, 3176, 3169, 3174, 3164, 3169, 3155, 3153, 3154, 3150, 3149, 3158, 3156, 3154, 3145, 3140, 3146, 3139, 3154, 3139, 3137, 3133, 3131, 3131, 3128, 3128, 3129, 3129, 3133, 3128, 3120, 3132, 3122, 3115, 3116, 3113, 3118, 3123, 3116, 3107, 3112, 3120, 3120, 3113, 3100, 3105, 3110, 3101, 3100, 3099, 3097, 3101, 3105, 3097, 3099, 3096, 3084, 3093, 3081, 3089, 3089, 3091, 3091, 3080, 3084, 3072, 3084, 3082, 3078, 3070, 3065, 3065, 3069, 3072, 3060, 3056, 3054, 3054, 3055, 3062, 3058, 3052, 3050, 3045, 3044, 3056, 3055, 3041, 3038, 3037, 3038, 3035, 3040, 3033, 3040, 3031, 3041, 3034, 3033, 3024, 3030, 3022, 3019, 3032, 3022, 3024, 3027, 3018, 3025, 3010, 3009, 3022, 3014, 3014, 3003, 3001, 3008, 3009, 3005, 3005, 2996, 2993, 2992, 2992, 2990, 2998, 2988, 2985, 2991, 2981, 2989, 2991, 2985, 2992, 2977, 2977, 2973, 2980, 2979, 2975, 2969, 2978, 2966, 2969, 2963, 2964, 2962, 2971, 2970, 2961, 2957, 2961, 2964, 2955, 2957, 2949, 2946, 2945, 2955, 2941, 2953, 2948, 2947, 2948, 2946, 2939, 2940, 2941, 2941, 2945, 2940, 2926, 2926, 2937, 2936, 2922, 2917, 2927, 2922, 2922, 2922, 2922, 2911, 2910, 2908, 2907, 2905, 2911, 2904, 2905, 2909, 2901, 2912, 2898, 2895, 2907, 2892, 2893, 2892, 2890, 2900, 2888, 2884, 2888, 2888, 2884, 2889, 2883, 2885, 2886, 2880, 2873, 2885, 2881, 2873, 2868, 2868, 2871, 2866, 2863, 2861, 2868, 2868, 2857, 2867, 2855, 2852, 2865, 2859, 2861, 2860, 2849, 2845, 2856, 2849, 2845, 2841, 2846, 2844, 2838, 2838, 2837, 2833, 2834, 2834, 2832, 2837, 2828, 2825, 2826, 2829, 2820, 2820, 2823, 2821, 2820, 2814, 2821, 2812, 2809, 2813, 2808, 2817, 2809, 2810, 2806, 2817, 2800, 2802, 2797, 2796, 2805, 2801, 2794, 2798, 2790, 2788, 2796, 2795, 2795, 2795, 2783, 2781, 2779, 2786, 2781, 2776, 2774, 2773, 2772, 2779, 2780, 2781, 2779, 2774, 2776, 2764, 2772, 2768, 2769, 2760, 2764, 2761, 2756, 2754, 2753, 2755, 2764, 2757, 2750, 2749, 2745, 2747, 2750, 2741, 2749, 2740, 2737, 2736, 2736, 2740, 2732, 2732, 2731, 2740, 2728, 2732, 2737, 2726, 2731, 2731, 2732, 2725, 2728, 2721, 2716, 2723, 2720, 2713, 2710, 2710, 2715, 2713, 2704, 2706, 2704, 2701, 2715, 2700, 2698, 2707, 2707, 2702, 2706, 2700, 2697, 2693, 2689, 2697, 2698, 2689, 2685, 2681, 2686, 2681, 2686, 2677, 2676, 2674, 2673, 2675, 2675, 2681, 2669, 2668, 2673, 2675, 2674, 2670, 2672, 2660, 2666, 2658, 2661, 2668, 2654, 2664, 2652, 2651, 2649, 2655, 2654, 2650, 2649, 2652, 2645, 2648, 2640, 2643, 2645, 2648, 2637, 2633, 2636, 2638, 2632, 2634, 2641, 2634, 2628, 2624, 2628, 2628, 2623, 2628, 2627, 2621, 2624, 2614, 2621, 2619, 2611, 2620, 2621, 2618, 2608, 2605, 2608, 2606, 2602, 2601, 2602, 2598, 2597, 2603, 2597, 2593, 2592, 2594, 2593, 2596, 2602, 2587, 2585, 2582, 2582, 2585, 2581, 2579, 2578, 2578, 2577, 2584, 2575, 2573, 2572, 2579, 2579, 2569, 2573, 2572, 2568, 2565, 2562, 2563, 2563, 2559, 2566, 2559, 2565, 2559, 2559, 2559, 2559, 2559, 2559, 2559, 2559, 2556, 2554, 2557, 2559, 2557, 2553, 2556, 2553, 2545, 2546, 2544, 2546, 2541, 2546, 2547, 2538, 2542, 2537, 2533, 2537, 2540, 2537, 2540, 2531, 2541, 2527, 2528, 2523, 2526, 2523, 2532, 2528, 2528, 2528, 2526, 2524, 2518, 2520, 2513, 2516, 2520, 2520, 2508, 2506, 2512, 2513, 2512, 2501, 2512, 2498, 2502, 2499, 2506, 2498, 2497, 2500, 2493, 2492, 2489, 2499, 2499, 2484, 2492, 2491, 2482, 2491, 2483, 2482, 2489, 2482, 2477, 2475, 2484, 2475, 2470, 2475, 2477, 2469];
|
|
|
|
let canvas = document.getElementById("mycanvas");
|
|
canvas.width = 800;
|
|
canvas.height = 600;
|
|
let context = canvas.getContext("2d");
|
|
|
|
let min = 10000;
|
|
let max = 0;
|
|
|
|
redraw();
|
|
|
|
function redraw() {
|
|
context.clearRect(0,0,800,600);
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = "green";
|
|
context.setLineDash([]);
|
|
|
|
min = 10000;
|
|
max = 0;
|
|
|
|
data.forEach((v) => {
|
|
min = Math.min(min, v);
|
|
max = Math.max(max, v);
|
|
});
|
|
|
|
|
|
if (min / max < 0.5) {
|
|
let cutoff_max = data.findIndex((v) => v <= max*0.99);
|
|
let cutoff_min = data.findIndex((v) => v <= min*1.01 );
|
|
|
|
cutoff_max = Math.max(0, cutoff_max-10);
|
|
cutoff_min = Math.min(data.length, cutoff_min+10);
|
|
|
|
let trimmed_data = data.slice(cutoff_max, cutoff_min);
|
|
|
|
console.log(`Trimmed Length: ${trimmed_data.length}`);
|
|
|
|
data = trimmed_data;
|
|
}
|
|
|
|
|
|
console.log(data.length);
|
|
context.beginPath();
|
|
context.moveTo(100, GetYForData(data[1]));
|
|
for (let i = 1; i < data.length; i++) {
|
|
let y = GetYForData(data[i]);
|
|
let x = (i*600)/data.length;
|
|
context.lineTo(100+x, y);
|
|
}
|
|
context.stroke();
|
|
|
|
context.lineWidth = 1;
|
|
context.strokeStyle = "grey";
|
|
context.setLineDash([2,2]);
|
|
|
|
// axes
|
|
context.beginPath();
|
|
context.moveTo(80, GetYForData(min));
|
|
context.lineTo(780, GetYForData(min));
|
|
context.stroke();
|
|
|
|
context.beginPath();
|
|
context.moveTo(100, 20);
|
|
context.lineTo(100, 580);
|
|
context.stroke();
|
|
|
|
// max dashed line
|
|
context.beginPath();
|
|
context.moveTo(80, GetYForData(max));
|
|
context.lineTo(780, GetYForData(max));
|
|
context.stroke();
|
|
|
|
console.log(`${min}, ${max}`);
|
|
|
|
context.font = "16px sans-serif";
|
|
console.log(`${context.font}`);
|
|
context.fillText(`${GetVForData(min)}v`, 20, GetYForData(min)+9);
|
|
context.fillText(`${GetVForData(max)}v`, 20, GetYForData(max)+9);
|
|
|
|
// draw y grid levels
|
|
for (let y = 1; y < 5; y++) {
|
|
let one_fifth = (max-min)/5 * y + min;
|
|
context.beginPath();
|
|
context.moveTo(80, GetYForData(one_fifth));
|
|
context.lineTo(780, GetYForData(one_fifth));
|
|
context.stroke();
|
|
context.fillText(`${GetVForData(one_fifth)}v`, 20, GetYForData(one_fifth)+9);
|
|
}
|
|
|
|
|
|
// draw x grid
|
|
context.strokeStyle = "#ccc";
|
|
context.setLineDash([3, 3]);
|
|
for (let x = 0; x <= 10; x++) {
|
|
let t = x / 10;
|
|
t = (t * data.length) / (SAMPLES_PER_SECOND / 1000);
|
|
t = Math.round(t*100)/100;
|
|
let x_px = x*60 + 100;
|
|
context.fillText(`${t}ms`, x_px, 580);
|
|
context.beginPath();
|
|
context.moveTo(x_px, 580);
|
|
context.lineTo(x_px, 20);
|
|
context.stroke();
|
|
}
|
|
|
|
|
|
let total_time = data.length / SAMPLES_PER_SECOND;
|
|
console.log(`Total Data Time: ${total_time}s`);
|
|
let cap = -total_time / (330 * Math.log(min/max));
|
|
console.log(`Calculated capacitance: ${cap}`);
|
|
|
|
let unit = "F";
|
|
|
|
if (cap < 0.001) {
|
|
cap *= 1_000_000;
|
|
unit = "μF";
|
|
} else if (cap < 1) {
|
|
cap *= 1_000;
|
|
unit = "mF"
|
|
}
|
|
|
|
context.fillText(`Cap: ${cap.toFixed(3)}${unit}`, 600, 100);
|
|
}
|
|
|
|
function GetYForData(val) {
|
|
let normalized = (val - min) / (max - min);
|
|
let y = normalized * 540 + 40;
|
|
return 600-y;
|
|
}
|
|
|
|
function GetVForData(val) {
|
|
let v = val * (3.3 / 4095);
|
|
v *= 100;
|
|
v = Math.round(v);
|
|
return v / 100;
|
|
}
|
|
|
|
function UpdateDataFromClipboard() {
|
|
navigator.clipboard.readText().then((clipText) => {
|
|
// console.log(clipText);
|
|
|
|
let array = JSON.parse(clipText);
|
|
|
|
// console.log(array);
|
|
|
|
data = array;
|
|
redraw();
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</html> |