Skip to content

Commit

Permalink
save
Browse files Browse the repository at this point in the history
  • Loading branch information
@zamuzakki
zamuzakki committed Jan 22, 2025
1 parent a1f51e5 commit 8207f0e
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 57 deletions.
7 changes: 5 additions & 2 deletions django_project/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@
"@mui/x-date-pickers": "^5.0.8",
"@mui/x-tree-view": "^6.17.0",
"@turf/turf": "^6.5.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"alasql": "^1.7.3",
"axios": "^1.2.1",
"bootstrap": "^5.1.3",
Expand Down Expand Up @@ -98,11 +100,11 @@
"pluralize": "^8.0.0",
"proj4": "^2.15.0",
"prop-types": "^15.8.1",
"react": "^18.1.0",
"react": "^18.3.1",
"react-chartjs-2": "^5.2.0",
"react-color": "^2.19.3",
"react-datepicker": "^4.8.0",
"react-dom": "^18.1.0",
"react-dom": "^18.3.1",
"react-dropzone-uploader": "^2.11.0",
"react-i18next": "^11.16.9",
"react-js-cron": "^4.0.0",
Expand All @@ -116,6 +118,7 @@
"react-timezone-select": "1.4.0",
"redux": "^4.2.0",
"remark-gfm": "^4.0.0",
"typescript": "^5.7.3",
"uuid": "^9.0.0"
},
"overrides": {
Expand Down
51 changes: 34 additions & 17 deletions django_project/frontend/src/components/Input/ColorSelectorWithAlpha/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,34 @@
import React, { useState } from "react";
import { SketchPicker, ColorResult } from "react-color";
import { SketchPicker, ColorResult, SketchPickerProps } from "react-color";
// import {rgbaToHex} from "../../../pages/Dashboard/MapLibre/utils"

// interface ColorPickerInput {
// color:
// }
interface ColorPickerInputProps {
color: string;
setColor: (val: any) => void;

}

export default function ColorPickerInput(){
const [color, setColor] = useState({ r: 0, g: 0, b: 0, a: 1 }); // Default RGBA color
/**
* Convert RGBA to hex
* @param rgba object from react-color
* @returns hex color with alpha
*/
export const rgbaToHex = (rgba: { r: number; g: number; b: number; a: number }) => {
const toHex = (value: number) => {
const hex = Math.round(value).toString(16);
return hex.padStart(2, "0");
};

const alpha = Math.round(rgba.a * 255); // Convert alpha to a value between 0-255

// Combine RGBA components into a single HEX string
return `#${toHex(rgba.r)}${toHex(rgba.g)}${toHex(rgba.b)}${toHex(alpha)}`;
}

export default function ColorPickerInput({color, setColor}: ColorPickerInputProps){
// const [color, setColor] = useState({ r: 0, g: 0, b: 0, a: 1 }); // Default RGBA color
const [showPicker, setShowPicker] = useState(false);
console.log(`color: ${color}`)

const handleColorChange = (colorResult: ColorResult) => {
// @ts-ignore
Expand All @@ -23,30 +43,27 @@ export default function ColorPickerInput(){
setShowPicker(false);
};

const colorToString = (rgba: { r: number; g: number; b: number; a: number }) =>
`rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;

return (
<div style={{ position: "relative" }}>
<input
type="text"
value={colorToString(color)}
value={color}
readOnly
onClick={togglePicker}
style={{
backgroundColor: colorToString(color),
backgroundColor: color,
cursor: "pointer",
border: "1px solid #ccc",
padding: "5px",
color: "#000",
color: "#00000000",
}}
/>
{showPicker && (
<div style={{ position: "absolute", zIndex: 2 }}>
<SketchPicker
color={color}
onChange={handleColorChange}
/>
<div style={{ position: "absolute", zIndex: 2, right: "0px" }}>
{React.createElement(SketchPicker as unknown as React.ComponentType<SketchPickerProps>, {
color,
onChange: handleColorChange,
})}
<button
onClick={handleOk}
style={{
Expand Down
46 changes: 13 additions & 33 deletions django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/RasterCogLayer/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ import ColorPaletteStyleConfig, {QUANTITATIVE_TYPE} from "../../../Style/Form/Dy
import {dictDeepCopy} from "../../../../../utils/main";
import {dynamicClassificationChoices} from "../../../Style/Form/DynamicStyleConfig";
import ColorSelector from "../../../../../components/Input/ColorSelector";
import ColorPickerInput from "../../../../../components/Input/ColorSelectorWithAlpha";


import ColorPickerInput, {rgbaToHex} from "../../../../../components/Input/ColorSelectorWithAlpha";


const constructStyle = (styles) => {
Expand All @@ -47,10 +45,7 @@ const constructStyle = (styles) => {
newStyles.additional_nodata = null;
}
if (newStyles.nodata_color === undefined) {
newStyles.nodata_color = '#000000';
}
if (newStyles.nodata_opacity === undefined) {
newStyles.nodata_opacity = 0;
newStyles.nodata_color = '#00000000';
}

return newStyles
Expand All @@ -70,6 +65,7 @@ export default function RasterCogLayer(
const [noDataColor, setNoDataColor] = useState(styles.nodata_color);

useEffect(() => {
console.log(noDataColor)
setData({
...data,
styles: {
Expand Down Expand Up @@ -144,20 +140,17 @@ export default function RasterCogLayer(
flexDirection={'row'}
spacing={1}
>
<Grid item md={12} xl={12} lg={12}>
NoData Configuration
</Grid>
<Grid item md={3} xl={3} lg={3}>
<Grid item md={4} xl={4} lg={4}>
<div>
<div>Original NoData</div>
<div>NoData Value</div>
<input
placeholder='Original NoData' type='text'
placeholder='NoData Value' type='text'
value={styles.nodata}
disabled={true}
/>
</div>
</Grid>
<Grid item md={3} xl={3} lg={3}>
<Grid item md={4} xl={4} lg={4}>
<div>
<div>Additional NoData</div>
<input
Expand All @@ -175,9 +168,9 @@ export default function RasterCogLayer(
/>
</div>
</Grid>
<Grid item md={3} xl={3} lg={3}>
<Grid item md={4} xl={4} lg={4}>
<div>
<div>Color</div>
<div>NoData Color</div>
{/*<ColorSelector*/}
{/* color={noDataColor}*/}
{/* onChange={evt => {*/}
Expand All @@ -186,23 +179,10 @@ export default function RasterCogLayer(
{/* hideInput={true}*/}
{/* fullWidth={true}*/}
{/*/>*/}
<ColorPickerInput/>
</div>
</Grid>
<Grid item md={3} xl={3} lg={3}>
<div>
<div>Opacity (0-100)</div>
<input
placeholder='Opacity' type='number'
value={styles.nodata_opacity}
onChange={evt => {
setData({
...data,
styles: {
...styles,
nodata_opacity: parseFloat(evt.target.value)
}
})
<ColorPickerInput
color={noDataColor}
setColor={val => {
setNoDataColor(rgbaToHex(val))
}}
/>
</div>
Expand Down
7 changes: 3 additions & 4 deletions django_project/frontend/src/pages/Dashboard/MapLibre/LayerType/RasterCog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,8 @@ export default function rasterCogLayer(map, id, data, setData, contextLayerData,
dynamic_classification,
additional_nodata,
nodata_color,
nodata_opacity,
} = data?.styles;
const additional_ndt_val = additional_nodata ? parseFloat(additional_nodata) : additional_nodata;
const ndt_opacity = nodata_opacity ? parseFloat(nodata_opacity) : nodata_opacity;
const colors = createColorsFromPaletteId(color_palette, dynamic_class_num, color_palette_reverse);
let init = isInit;

Expand Down Expand Up @@ -97,11 +95,12 @@ export default function rasterCogLayer(map, id, data, setData, contextLayerData,
const url = `cog://${data.url}#` + contextLayerData.id;

removeSource(map, id)
console.log(classifications)

const getColor = (value) => {
for (const classification of classifications) {
if (value >= classification.bottom && value < classification.top) {
return hexToRgba(classification.color, 255);
return hexToRgba(classification.color);
}
}
return null;
Expand All @@ -120,7 +119,7 @@ export default function rasterCogLayer(map, id, data, setData, contextLayerData,
});
}
if (value === noData || value === Infinity || isNaN(value) || value === additional_ndt_val) {
rgba.set(hexToRgba(nodata_color, (ndt_opacity/100) * 255));
rgba.set(hexToRgba(nodata_color));
} else if (value < min_band || value > max_band) {
rgba.set([0, 0, 0, 0]); // noData, fillValue or NaN => transparent
} else {
Expand Down
20 changes: 19 additions & 1 deletion django_project/frontend/src/pages/Dashboard/MapLibre/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,10 +297,28 @@ export const hexToRgba = (hex, alpha = 1, format = 'array') => {
const r = parseInt(hexClean.substring(0, 2), 16);
const g = parseInt(hexClean.substring(2, 4), 16);
const b = parseInt(hexClean.substring(4, 6), 16);
alpha = hexClean.length == 8 ? parseInt(hexClean.substring(6, 8), 16) : alpha

// Return in RGBA format
if (format == 'array') {
return [r, g, b, alpha]
}
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
};

// /**
// * Convert RGBA to hex
// * @param rgba object
// * @returns hex color with alpha
// */
// export const rgbaToHex = (rgba) => {
// const toHex = (value) => {
// const hex = Math.round(value).toString(16);
// return hex.padStart(2, "0");
// };

// const alpha = Math.round(rgba.a * 255); // Convert alpha to a value between 0-255

// // Combine RGBA components into a single HEX string
// return `#${toHex(rgba.r)}${toHex(rgba.g)}${toHex(rgba.b)}${toHex(alpha)}`;
// }

0 comments on commit 8207f0e

Please sign in to comment.