I'm using the claraifai API I've retrieved the regions for the face to form the bounding box but actually drawing the box gives me seriously off values as seen in the image.
code:
return {
topRow: face.top_row * height,
leftCol: face.left_col * width,
bottomRow: (face.bottom_row * height) - (face.top_row * height),
rightCol: (face.right_col * width) - (face.left_col * width)
}
Try to add a div relatively positioned inside the parent div.
Before:
const FaceImage = ({image, boxs}) => {
return (
<div className="faceimage">
<img id="imgA" alt='' src={image}/>
<div className="bounding-box" style={{
top: boxs.top_row,
left: boxs.left_col,
bottom: boxs.bottom_row,
right: boxs.right_col
}}></div>
</div>
);
}
After:
const FaceImage = ({image, boxs}) => {
return (
<div className="faceimage">
<div className="relative">
<img id="imgA" alt='' src={image}/>
<div className="bounding-box" style={{
top: boxs.top_row,
left: boxs.left_col,
bottom: boxs.bottom_row,
right: boxs.right_col
}}></div>
</div>
</div>
);
}
Css:
.relative {
position: relative;
}
Related
I am using drag and drop in my project for slides. What I done is drag a slide and swap slide position with other.It works perfectly. But the issue is the symbol
comes even if it is allow to drag .I want to remove this icon and show drag icon while draging.Also I need an empty space on dragged slide. My code is
onDragStart = (event, index) => {
this.draggedItem = this.state.slides[index];
event.dataTransfer.setDragImage(event.target.parentNode, 20, 20);
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text/html", event.target.parentNode);
};
onDragOver = index => {
const { slides } = this.state;
const hoveredItem = slides[index];
if (this.draggedItem === hoveredItem) {
return;
}
const filteredItems = slides.filter(item => item !== this.draggedItem);
filteredItems.splice(index, 0, this.draggedItem);
this.setState({ slides: filteredItems });
};
onDragEnd = () => {
this.draggedIdx = null;
};
<div className="draggableList">
<div key={data} onDragOver={() => onDragOver(index)}>
<div className="handle"
draggable
onDragStart={event => onDragStart(event, index)}
onDragEnd={onDragEnd}>
<div class="d-flex justify-content-center" style={{ fontWeight: "bold", paddingTop: "20px" }}>{"Slide " + (index + 1)}</div>
<div className={"py-3 d-flex justify-content-center course_slide slide_" + index}>
<div style={{ backgroundColor: 'white', height: 150, width: 120, boxShadow: '4px 4px 5px grey', cursor: 'pointer', overflowY: 'hidden', border: selected ? '2px solid limegreen' : '', position: 'relative' }} onClick={onClick}>
<h1 style={{ fontSize: 7 }}>{data.title}</h1>
<div style={{ fontSize: 4 }} dangerouslySetInnerHTML={{ __html: data.description }}>
</div>
{onDelete && <div onClick={onDelete} style={{ padding: 4, position: 'absolute', bottom: 0, right: 0 }}><DeleteOutline /></div>}
</div>
</div>
</div>
</div>
</div>
Can anyone please help me to sort out this issue?
Im trying to make my modal (react-modal node package) scrollable (There is an img inside)
here is my code:
content: {
position: 'absolute',
backgroundColor: '#FFF',
padding: '15px',
zIndex: '1000',
width: '90%',
borderRadius: '.5em',
},
overlay: {
position: 'fixed',
display: 'flex',
justifyContent: 'center',
top: '0',
left: '0',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0, .8)',
zIndex: '1000',
overflowY: 'auto',
},
}
Modal.setAppElement('#__next')
export const langContext = React.createContext()
export default function Home() {
const [isEn, setIsEn] = useState(true)
const [modalIsOpen, setIsOpen] = useState(false)
const { width } = useWindowDimensions()
function openModal() {
setIsOpen(true)
}
function closeModal() {
setIsOpen(false)
}
function updateLang() {
setIsEn((isEn) => !isEn)
}
return (
<langContext.Provider value={{ isEn, updateLang }}>
<div id="modal" className="overflow-hidden relative">
<Header />
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
style={customStyles}>
<div className="relative m-h-[1000px] h-full w-full overflow-y-scroll">
{isEn ? (
<Image
layout="fill"
objectFit={width >= 750 ? 'fill' : ' cover'}
quality={100}
src={
width >= 750 ? '/assets/menu-en.png' : '/assets/Menu_en_m.png'
}
alt="Menu"
/>
) : (
<Image
layout="fill"
objectFit={width >= 750 ? 'fill' : ' cover'}
quality={100}
src={
width >= 750 ? '/assets/menu-he.png' : '/assets/Menu_he_m.png'
}
alt="Menu"
/>
)}
</div>
</Modal>
</div>
</langContext.Provider>
)
}
Any ideas on how can I do it? (I'm trying to play with the overflow and position element but I can't find the proper solution
The scrolling suppose to happen on Mobile and the Image dimensions are: 550*1550 (I can resize it if necessary)
Right now the image is cut
Thanks for the helpers!
I think your modal is good in terms of vertical scrolling, but the problem has may come from this line
objectFit={width >= 750 ? 'fill' : 'cover'}
Your mobile dimension is 500*1550 which means the image will take object-fit:cover;
You can check object-fit:cover; definition here
The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
If you already check the dimension to load the device-respective image, you can remove the condition to check for cover.
object-fit:fill is sufficient for your case
The change can be
objectFit="fill"
Another potential problem I can see here that you have layout="fill" for that image which will make it absolute. The image container has relative which restricts the original size of your image.
To fix it, you may need to remove relative from the image container too.
I am trying to crop an image in react by using the react-image-crop library, and I got the cropping functionality working.
import React, { useCallback, useRef, useState } from "react";
import ReactCrop, { Crop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
export const ImageCropper = () => {
const [upImg, setUpImg] = useState<string>(
"https://www.vintagemovieposters.co.uk/wp-content/uploads/2020/04/IMG_5274-scaled.jpeg"
);
const imgRef = useRef<HTMLImageElement | null>(null);
const [crop, setCrop] = useState<Partial<Crop>>({
unit: "%",
aspect: 0.68,
height: 100
});
const onLoad: (image: HTMLImageElement) => boolean | void = useCallback(
(img) => {
imgRef.current = img;
const aspect = 0.68;
const width =
img.width / aspect < img.height * aspect
? 100
: ((img.height * aspect) / img.width) * 100;
const height =
img.width / aspect > img.height * aspect
? 100
: (img.width / aspect / img.height) * 100;
const y = (100 - height) / 2;
const x = (100 - width) / 2;
setCrop({
unit: "%",
width,
height,
x,
y,
aspect
});
},
[]
);
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<ReactCrop
src={upImg}
onImageLoaded={onLoad}
crop={crop}
onChange={(crop, percentageCrop) => {
setCrop(percentageCrop);
}}
keepSelection={true}
/>
<div
style={{
width: imgRef.current?.width! * (crop.width! / 100),
height: imgRef.current?.height! * (crop.height! / 100),
overflow: "hidden"
}}
>
<img
alt="cropped_image"
src={upImg}
style={{
width: imgRef.current?.width!,
height: imgRef.current?.height!,
transform: `translate(-${
(crop.x! / 100) * imgRef.current?.width!
}px, -${(crop.y! / 100) * imgRef.current?.height!}px )`
}}
/>
</div>
</div>
);
};
However, what I am trying to achieve is:
keep the original image after cropping
put the image in a preview div with specific dimensions (235px x 346px)
transform the image to fit within that preview div with the same defined crop
make sure the preview div matches with the highlighted crop
what I tried is the code above, but the issue with it is that the width + height change dynamically.
I tried to use fixed width and height values, but the cropping is off.
I also tried using the scale property in transform, but it was off too:
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<ReactCrop
src={upImg}
onImageLoaded={onLoad}
crop={crop}
onChange={(crop, percentageCrop) => {
console.log("percent", percentageCrop);
setCrop(percentageCrop);
}}
keepSelection={true}
/>
<div
style={{
width: 235,
height: 346,
overflow: "hidden"
}}
>
<img
alt="cropped_image"
src={upImg}
style={{
width: imgRef.current?.width!,
height: imgRef.current?.height!,
transform: `translate(-${
(crop.x! / 100) * imgRef.current?.width!
}px, -${(crop.y! / 100) * imgRef.current?.height!}px) scale(${
crop.width/100
}, ${crop.height/100})`
}}
/>
</div>
</div>
);
I need to figure out how to constrain them to (235px x 346px), and "zoom" the image to match the crop from react-image-crop.
How can I do that?
Example in code sandbox
Here the width is mentioned inline so i want to make a card component where the width can be handled dynamically. what i mean to say is there will be one card component from which i can handle the width property dynmically through jsx suppose for one card the width is 250px and for another card the width might be 100px like this
<div className="white-box v-align ht-100" style={{ width: '250px', marginRight: '10px' }}>
<div className="flex-one"></div>
<div className="wd-80">
<div className="fs-xl fw-bold" style={{ color: '#142654' }}>{pct}%</div>
<div className="small-text">{text}</div>
</div>
</div>
A solution to this problem might be using props:
// SomeComponent.js class
class SomeComponent {
// Uncomment if you need to set a state
//constructor(props) {
// super(props);
//
// this.state = {};
//}
render() {
let width = Math.min(Math.max(this.props.width, SOME_MAX_WIDTH), SOME_MIN_WIDTH); // clamp (optional)
return ( // replace with your component
<div style={{width: width, backgroundColor: "#23a4f6"}}>
Width set from parent (and clamped)
</div>
);
}
}
SomeComponent.defaultProps = {
width: 200
};
// SomeComponent.js in functional
function SomeComponent({width}) {
let width = Math.min(Math.max(this.props.width, SOME_MAX_WIDTH), SOME_MIN_WIDTH); // clamp (optional)
return ( // replace with your component
<div style={{width: width, backgroundColor: "#23a4f6"}}>
Width set from parent (and clamped)
</div>
);
}
SomeComponent.defaultProps = {
width: 200
};
// main.js
ReactDOM.render(<SomeComponent />, document.querySelector(".myelement"));
You can take width variable like let width = '100px' and then apply this variable to your code like this. here width you can pass as a prop which could be any value
let width = '100px';
<div className="white-box v-align ht-100" style={{ width: width, marginRight: '10px' }}>
<div className="flex-one"></div>
<div className="wd-80">
<div className="fs-xl fw-bold" style={{ color: '#142654' }}>{pct}%</div>
<div className="small-text">{text}</div>
</div>
</div>
I'm relatively new to React and I'm trying to create a sort of dashboard for Cryptocurrency prices.
I'm using react-financial-charts to generate an OHLCV chart within a ResponsiveReactGridLayout.
However, the svg always displays outside the grid. Can anyone help with how I could fix this:
Here is the code: https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Home.tsx where I render my Component that contains the ChartCanvas.
<div key="candlestick" className="home-card">
<div ref={canvasRef} style={{ width: "100%", height: "100%" }}>
{canvasRef.current ? (
<Candlestick
coin={coin}
width={canvasRef.current.clientWidth}
height={canvasRef.current.offsetHeight}
/>
) : null}
</div>
</div>
and here is the code for the chartCanvas: https://github.com/astronights/market_analysis_tool_evaluation-ui/blob/master/src/components/Home/Candlestick.tsx
return (
<ChartCanvas
height={props.height}
ratio={1}
width={props.width}
margin={{ bottom: 50, top: 100, left: 50, right: 50 }}
padding={0}
seriesName={`OHLCV prices - ${props.coin.coin}`}
data={prices}
xScale={scaleTime()}
xAccessor={xAccessor}
xExtents={xExtents}
/>
As you can see in the image, the SVG chart generated seems to be going outside.
Fixed by adding these lines of CSS.
.react-financial-charts {
position: absolute !important;
top: 0;
left: 0;
}
canvas {
position: absolute !important;
top: 0;
left: 0;
}