Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-27 02:01:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI bug fixes and feature refinements (#59)

Browse Source 
* Rework settings page; touch up contour, output, and 3D tabs; font sizing

No stream placeholder; driver mode refined; cameras page

Make settings snackbar work

Lint fix

Fix settings page padding

Actually hide settings fields if unsupported

* Make toggle buttons less confusing; fix driver toggle; form validation

* Make eyedropper work and make input/select styling more consistent

* Fix color picker and tabbing bugs

* Set up camera and settings pages to talk to the backend

* Add auto reconnect

* Add lots of tooltips and improve related thematic consistency

* Only show output stream while color picking

* Unbreak robot offset

* Increase tooltip delay and refactor tooltip label into a component

* Remove toggle button switching behavior

* Fix PnP tab and add a flag to disable FOV configuration

* Move FPS indicator

* Make GPU acceleration status use one value in the store

* Only allow IPv4 static IPs and remove accidentally committed index
This commit is contained in:
Declan Freeman-Gleason
2020-07-31 13:50:50 -07:00
committed by GitHub
parent 0b98dc3c9f
commit 19b57235fe
34 changed files with 1099 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
photon-client/src/plugins/ColorPicker.js
View File

@@ -2,8 +2,10 @@ var canvas = undefined;
var image = undefined;
function initColorPicker() {
canvas = document.createElement('canvas');
image = document.getElementById('CameraStream');
if (!canvas)
canvas = document.createElement('canvas');
image = document.querySelector('#normal-stream');
canvas.width = image.width;
canvas.height = image.height;
}
@@ -15,11 +17,12 @@ function initColorPicker() {
//calls the function to handle the button (either eyedrop,expand or shrink)
function colorPickerClick(event, currentFunction, currentRange) {
let rect = image.getBoundingClientRect();
let x = Math.round(event.clientX - rect.left);
let y = Math.round(event.clientY - rect.top);
let x = Math.round((event.clientX - rect.left) / rect.width * image.width);
let y = Math.round((event.clientY - rect.top) / rect.height * image.height);
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let pixelData = context.getImageData(x, y, 1, 1).data;
if (currentFunction !== undefined) {
return currentFunction(pixelData, currentRange);
}
@@ -114,6 +117,7 @@ function shrinkRange(range, color) {
range[1][j] = Math.max(range[1][j] - 10, range[0][j]);//shrink from max side
}
}
return inside;//returns if color is inside or not
}