Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
For example if i listen to NOTIFICATION/USER_ID/2 i can see all the socket event on network tab, i dont want the current user to be able to see another user event because its not belong to them
how to prevent this? i dont want the user to able to see all the ongoing event, because its not belong to the user and it will consume a lot of data, because there are thousands of event every minutes that belong to all online user
<mat-label *ngIf="field?.entitySchemaField"> {{field.entitySchemaField?.label? (field.entitySchemaField.label|titlecase):(field.entitySchemaField?.name|titlecase)}}
<input matInput [owlDateTimeTrigger]="timePicker" [(ngModel)]="dateTime" [owlDateTime]="timePicker"
placeholder="{{field?.entitySchemaField.label || field?.entitySchemaField.name || 'HH:MM:SS'}}" readonly
[required]="field?.entitySchemaField.isRequired" [min]="minTime" [max]="maxTime"
class="rt-cursor-pointer" (dateTimeChange)="setTime($event)" style="height: 30px;"
[ngStyle]="{'color':style?.color, 'font-family':style?.['font-family'], 'font-size' : style?.['font-size'] }" />
@if (formFieldControl.errors?.matTimePickerError){
<mat-icon class='rt-red-color rt-mr-5 rt-font-18' matSuffix matTooltipClass="custom-error-tooltip" [matTooltip]="getErrorTooltip()"
matTooltipPosition="below">warning
}
—
<span [owlDateTimeTrigger]="timePicker" class="svg-icons-hf-time-picker rt-mr-5 rt-font-20 timer-icon">
<owl-date-time [pickerType]="'timer'" [stepMinute]="min_step" [showSecondsTimer]="true" (afterPickerOpen)="setMinAndMaxTime()" [hour12Timer]="true"
#timePicker>
Hi I have a simple html file, with a bit if CSS and JavaScript. I am printing 2 columns. In both columns, JavaScript is used to print numbers from 1 to 200. In the right column, there is a nested div. In this div, numbers do not show starting from 1, but start around 86. Its difficult to understand why it is acting this way. Could someone help me?
body, html {
margin: 0;
padding: 0;
height: 100vh;
}
body {
width:100%;
/* height:100%; */
/* max-height:100%; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: yellow;
/* background-image: url("../public/msgappback.png"); */
/* background-repeat: no-repeat;
background-size: 100% 100%; */
}
.col1 {
height:100%;
overflow-y:auto;
width:20%;
min-width: 5rem;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(0, 255, 242, 0.5);
/* padding:1rem; */
}
.col2 {
height:100%;
/* overflow-y:auto; */
width:80%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: rgba(0,0,255,0.5);
/* padding:1rem; */
}
.nested {
height:100%;
/* min-height:100%; */
width:60%;
overflow-y:scroll;
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(157, 255, 0);
} <div class="col1">
<!-- Left column div with numbers 1 to 200 -->
<!-- Loop to print numbers 1 to 200 -->
<script>
for(let i = 1; i <= 200; i++) {
document.write('<p>' + i + '</p>');
}
</script>
</div>
<div class="col2">
<!-- Right column div with nested div containing numbers 1 to 200 -->
<div class="nested">
<script>
for(let i = 1; i <= 200; i++) {
document.write('<p>' + i + '</p>');
}
</script>
</div>
</div>I set height of the right column to 100 percent. I set overflow-y to ‘scroll’ for the nested div. So that when 200
tags are printed inside the nested div, and the height of the nested div exceeds height of right column, then it can show a scroll bar.
But it seems to only show
tags starting form 86 to 200. Not the ones below 86.
So I know that the data used in a setState call won’t be updated until the next render and have looked up plenty to figure out what to do about that. The best solution I kept finding was to use a loading state and set it to true and rendering a loading screen until the data is fetched. But for some reason I can’t seem to get this to work for me. I’m curious if there is something I’m missing about this or what is going on but when the paramData is passed to the LineGraph, it never renders out and is undefined when I log it in a useEffect, though it logs again after and has the data. Though if I remove the ? in the line graph data?.entries, there is an undefined error. Here is the component doing the fetch and loading (I originally had a setState for loading, and would set it to true at the start of the useEffect, and set to false at the end to no avail):
import { useState, useEffect } from "react";
import LineGraph from "../components/Graphs/LineGraph";
import TopNav from "../components/General/TopNav";
import Card from "../layout/Card";
import { fetchParamData } from "../utils/dataHandler";
const Parameters = () => {
const [paramData, setParamData] = useState([]);
useEffect(() => {
const fetchParameters = async () => {
const data = await fetchParamData();
setParamData(data)
}
fetchParameters();
},[]);
if(!paramData || paramData === undefined) {
return (
<section className="loading">
<p>
Loading
</p>
</section>
)
}
return (
<>
<TopNav />
<Card>
<LineGraph data={paramData[0]} />
</Card>
</>
);
}
export default Parameters;
and the LineGraph just in case it’s needed:
import { useEffect, useRef } from "react";
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from "recharts";
import colorVars from "../../modules/sassVars.module.scss";
const LineGraph = ({ data }) => {
useEffect(() => {
console.log(data);
},[data]);
return (
<div>
<LineChart width={400} height={200} data={data?.entries} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
<Line type="monotone" dataKey="parameterLevel" stroke={colorVars.primary20} strokeWidth="5" />
<CartesianGrid stroke="#ccc" />
<XAxis />
<YAxis />
</LineChart>
</div>
);
}
export default LineGraph;
I feel like there is something I’m missing about this, but I’m unsure as to what. I can’t seem to find a good answer elsewhere with my searching. Any help would be great! Thanks
import {Component, OnInit} from '@angular/core';
import {Canvas, FabricImage, Image, Rect} from 'fabric';
@Component({
selector: 'app-shirt',
imports: [],
templateUrl: './shirt.component.html',
styleUrl: './shirt.component.scss'
})
export class ShirtComponent implements OnInit {
canvas: Canvas | undefined;
ngOnInit(): void {
this.canvas = new Canvas('canvas', {
width: window.innerWidth,
height: window.innerHeight
});
// Add a rectangle to the canvas
const rectangle = new Rect({
left: 100,
top: 100,
fill: 'blue',
width: 200,
height: 100,
});
this.canvas.add(rectangle);
// Load an external image into the canvas
FabricImage.fromURL('images/custom/shirts/final/1.webp', function (img:any){
var img1 = img.set({
left: 300,
top: 100,
scaleX: 1.5,
scaleY: 1.5,
});
this.canvas.add(img1);
});
this.canvas.renderAll()
}
}
Angular Version: 19
Fabric.js Version: 6
Angular error
TS2683: ‘this’ implicitly has type ‘any’ because it does not have a type annotation. [plugin angular-compiler]
src/app/custom/products/shirt/shirt.component.ts:38:6:
38 │ this.canvas.add(img1);
╵ ~~~~
An outer value of ‘this’ is shadowed by this container.
src/app/custom/products/shirt/shirt.component.ts:31:61:
31 │ ...e.fromURL('images/custom/shirts/final/1.webp', function (img:any){
I also use arrow function in the fromUrl but same problem.
What is the actual solution for this.
I have a Next.js application where:
Staging is hosted on Vercel (everything works fine).
Production is hosted on AWS Amplify.
When I check the sitemap in Vercel, it returns the expected results:
https://vercel.domain.ai/sitemap.xml ✅ Works
However, in Amplify, it returns a 404 error:
https://amplify.domain.ai/sitemap.xml ❌ 404 Not Found
My Current Setup
Next.js version: latest
Amplify build settings (amplify.yml):
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
redirects:
- source: '/api/<*>'
target: '/api/<*>'
status: 200
Sitemap Generation:
The sitemap is dynamically generated using getServerSideProps() in a file called pages/sitemap.xml.js.
It works fine in development and on Vercel.
I’m developing a carousel for my website where users can navigate forward and backward between cards using arrows, and the cards should loop infinitely. However, clicking the arrows currently has no effect.
Problem Description:
The arrows are intended to navigate to the next or previous card in the carousel. Additionally, the carousel should have an “infinite” loop feature, meaning that reaching the last card should automatically loop back to the first card. At the moment, the arrow click events are not functioning as expected.
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrossel de Produtos</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<section class="carousel-section py-5">
<div class="container">
<h2 class="text-center mb-5">Explore Nossas Linhas de Produtos</h2>
<p class="text-center text-muted mb-5">
Descubra nossa coleção completa de móveis profissionais, projetados para
transformar seu ambiente de trabalho com estilo e funcionalidade.
</p>
<div class="carousel-container">
<!-- Botões de navegação -->
<button class="carousel-button prev">
<i class="fas fa-chevron-left"></i>
</button>
<button class="carousel-button next">
<i class="fas fa-chevron-right"></i>
</button>
<!-- Wrapper do carrossel -->
<div class="carousel-wrapper">
<div class="carousel-track">
<!-- Cards serão inseridos aqui via JavaScript -->
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
<script src="carousel.js"></script>
</body>
</html>
CSS:
.carousel-section {
background-color: #f8f9fa;
padding: 4rem 0;
}
.carousel-container {
position: relative;
padding: 0 60px; /* Espaço para os botões */
}
.carousel-wrapper {
overflow: hidden;
position: relative;
}
.carousel-track {
display: flex;
gap: 2rem;
transition: transform 0.5s ease-in-out;
cursor: grab;
}
.carousel-track.dragging {
cursor: grabbing;
transition: none;
}
/* Cards */
.carousel-card {
flex: 0 0 300px;
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.carousel-card:hover {
transform: translateY(-10px);
}
.card-image {
height: 200px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #333;
}
.card-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: #e9ecef;
color: #666;
border-radius: 1rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.card-button {
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: #0d6efd;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
width: 100%;
text-align: center;
}
.card-button:hover {
background-color: #0b5ed7;
}
/* Botões de navegação */
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.carousel-button:hover {
background: #f8f9fa;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.carousel-button.prev {
left: 0;
}
.carousel-button.next {
right: 0;
}
/* Responsividade */
@media (max-width: 768px) {
.carousel-card {
flex: 0 0 calc(100% - 2rem);
}
.carousel-container {
padding: 0 40px;
}
}
Javascript:
class Carousel {
constructor() {
// Elementos do DOM
this.container = document.querySelector('.carousel-wrapper');
this.track = document.querySelector('.carousel-track');
this.prevButton = document.querySelector('.carousel-button.prev');
this.nextButton = document.querySelector('.carousel-button.next');
// Estado do carrossel
this.isDragging = false;
this.startX = 0;
this.scrollLeft = 0;
// Dados dos produtos
this.products = [
{
id: 1,
title: 'Linha Escritório',
category: 'Escritório',
description: 'Móveis ergonômicos para seu ambiente de trabalho',
image: 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
},
{
id: 2,
title: 'Linha Sala',
category: 'Sala',
description: 'Conforto e elegância para suas reuniões',
image: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
},
{
id: 3,
title: 'Linha Armários',
category: 'Armários',
description: 'Organização e praticidade para seu espaço',
image: 'https://images.unsplash.com/photo-1595428774223-ef52624120d2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
},
{
id: 4,
title: 'Linha Executiva',
category: 'Executivo',
description: 'Sofisticação para ambientes corporativos',
image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
}
];
this.initialize();
}
initialize() {
this.renderCards();
this.addEventListeners();
}
renderCards() {
// Duplica os produtos para criar o efeito infinito
const items = [...this.products, ...this.products, ...this.products];
this.track.innerHTML = items.map(product => `
<div class="carousel-card" data-id="${product.id}">
<div class="card-image">
<img src="${product.image}" alt="${product.title}">
</div>
<div class="card-content">
<span class="card-category">${product.category}</span>
<h3 class="card-title">${product.title}</h3>
<p class="card-description">${product.description}</p>
<a href="/produtos/${product.id}" class="card-button">Explorar</a>
</div>
</div>
`).join('');
}
addEventListeners() {
// Navegação por botões
this.prevButton.addEventListener('click', () => this.scroll('left'));
this.nextButton.addEventListener('click', () => this.scroll('right'));
// Eventos de mouse para drag
this.track.addEventListener('mousedown', this.startDragging.bind(this));
this.track.addEventListener('mousemove', this.drag.bind(this));
this.track.addEventListener('mouseup', this.stopDragging.bind(this));
this.track.addEventListener('mouseleave', this.stopDragging.bind(this));
// Previne o menu de contexto ao arrastar
this.track.addEventListener('contextmenu', e => e.preventDefault());
}
startDragging(e) {
if (e.button !== 0) return; // Apenas botão esquerdo do mouse
this.isDragging = true;
this.track.classList.add('dragging');
this.startX = e.pageX - this.track.offsetLeft;
this.scrollLeft = this.track.scrollLeft;
}
drag(e) {
if (!this.isDragging) return;
e.preventDefault();
const x = e.pageX - this.track.offsetLeft;
const walk = (x - this.startX) * 2;
this.track.scrollLeft = this.scrollLeft - walk;
}
stopDragging() {
this.isDragging = false;
this.track.classList.remove('dragging');
}
scroll(direction) {
const cardWidth = this.track.querySelector('.carousel-card').offsetWidth + parseInt(window.getComputedStyle(this.track).gap); // Corrigido para garantir que o valor seja numérico
const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
this.track.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
}
}
// Inicializa o carrossel quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', () => {
new Carousel();
});
I hope you all can assist me in getting the arrows to function properly.
[20:41:14] Starting compilation in watch mode...
[20:41:26] Found 0 errors. Watching for file changes.
[Nest] 14312 - 16.02.2025, 20:41:44 LOG [NestFactory] Starting Nest application...
[Nest] 14312 - 16.02.2025, 20:41:46 LOG [InstanceLoader] AppModule dependencies initialized +1744ms
[Nest] 14312 - 16.02.2025, 20:41:46 LOG [InstanceLoader] SequelizeModule dependencies initialized +0ms
[Nest] 14312 - 16.02.2025, 20:41:46 LOG [InstanceLoader] UsersModule dependencies initialized +1ms
[Nest] 14312 - 16.02.2025, 20:41:46 LOG [InstanceLoader] ConfigHostModule dependencies initialized +0ms
[Nest] 14312 - 16.02.2025, 20:41:46 LOG [InstanceLoader] ConfigModule dependencies initialized +0ms
Executing (default): SELECT 1+1 AS result
Executing (default): SELECT table_name FROM information_schema.tables WHERE table_schema = 'public' AND table_name = 'users'
Executing (default): CREATE TABLE IF NOT EXISTS "users" ("id" NUMBER SERIAL UNIQUE , "email" VARCHAR(255) NOT NULL UNIQUE, "password" VARCHAR(255) NOT NULL, "banned" BOOLEAN DEFAULT false, "banReason" VARCHAR(255), "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "updatedAt" TIMESTAMP WITH TIME ZONE NOT NULL, PRIMARY KEY ("id"));
[Nest] 14312 - 16.02.2025, 20:41:46 ERROR [SequelizeModule] Unable to connect to the database. Retrying (1)...
Error
at Query.run (D:ITITPROJECTSmy_projectsulbibackend_node_nest_dockernode_modulessequelizesrcdialectspostgresquery.js:76:25)
at <anonymous> (D:ITITPROJECTSmy_projectsulbibackend_node_nest_dockernode_modulessequelizesrcsequelize.js:650:28)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at PostgresQueryInterface.createTable (D:ITITPROJECTSmy_projectsulbibackend_node_nest_dockernode_modulessequelizesrcdialectsabstractquery-interface.js:229:12)
at Function.sync (D:ITITPROJECTSmy_projectsulbibackend_node_nest_dockernode_modulessequelizesrcmodel.js:1353:7)
at Sequelize.sync (D:ITITPROJECTSmy_projectsulbibackend_node_nest_dockernode_modulessequelizesrcsequelize.js:825:9)
at async D:ITITPROJECTSmy_projectsulbibackend_node_nest_dockernode_modules@nestjssequelizedistsequelize-core.module.js:123:17
At the beginning, it seems, some manipulations take place, but then an error is thrown without explaining what happened (at least I don’t see anything useful here) and then 10 times error after error…
import { Module } from '@nestjs/common';
import { SequelizeModule } from '@nestjs/sequelize';
import { UsersModule } from './users/users.module';
import { ConfigModule } from '@nestjs/config';
import { User } from './users/users.model';
@Module({
controllers: [],
providers: [],
imports: [
ConfigModule.forRoot({
envFilePath: `.${process.env.NODE_ENV}.env`
}),
SequelizeModule.forRoot({
dialect: 'postgres',
host: process.env.POSTGRES_HOST,
port: Number(process.env.POSTGRES_PORT),
username: process.env.POSTGRES_USER,
password: String(process.env.POSTGRES_PASSWORD),
database: process.env.POSTGRES_DB,
models: [User],
autoLoadModels: false
}),
UsersModule,
],
})
export class AppModule {}
ps: password via String(), because for some reason it scolded me that it was not a string…
import { Module } from '@nestjs/common';
import { UsersController } from './users.controller';
import { UsersService } from './users.service';
import { SequelizeModule } from '@nestjs/sequelize';
import { User } from './users.model';
@Module({
controllers: [UsersController],
providers: [UsersService],
imports: [
SequelizeModule.forFeature([User]),
]
})
export class UsersModule {}
.env file
PORT=5000
POSTGRES_HOST=localhost
POSTGRES_USER=postgres
POSTGRES_PASSWORD=admin
POSTGRES_PORT=5432
POSTGRES_DB=ulbi-nest-course
I did some searching and found that it is related to the option autoLoadModels=true;
[20:43:19] Starting compilation in watch mode...
[20:43:23] Found 0 errors. Watching for file changes.
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [NestFactory] Starting Nest application...
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] AppModule dependencies initialized +162ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] SequelizeModule dependencies initialized +0ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] SequelizeCoreModule dependencies initialized +0ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] UsersModule dependencies initialized +1ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] ConfigHostModule dependencies initialized +0ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] SequelizeModule dependencies initialized +0ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [InstanceLoader] ConfigModule dependencies initialized +0ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [RoutesResolver] UsersController {/users}: +6ms
[Nest] 28912 - 16.02.2025, 20:43:25 LOG [NestApplication] Nest application successfully started +3ms
Listening on port 5000
import { Column, DataType, Model, Table } from 'sequelize-typescript';
interface UserCreationAttrs {
email: string,
password: string,
}
@Table({tableName: 'users'})
export class User extends Model<User, UserCreationAttrs> {
@Column({type: DataType.NUMBER, unique: true, autoIncrement: true, primaryKey: true})
id: number;
@Column({type: DataType.STRING, unique: true, allowNull: false})
email: string;
@Column({type: DataType.STRING, allowNull: false})
password: string;
@Column({type: DataType.BOOLEAN, defaultValue: false})
banned: boolean;
@Column({type: DataType.STRING, allowNull: true})
banReason: string;
}
I’m building a capstone project for my website and software and i want to connect both of them using API and the database is also into cloud
Do you guys have any suggestions what framework and languages should i use?
I’m only proficient in frameworks like springboot(java),react js(javascript),codeigniter(php)
I don’t know any other else
I don’t other languages and framework and I’m a 3 year student
Mobile application, web developmen and software dev
I have an array of objects that have alot of values pulled from an excel sheet and I am using .filter() to compare certain keys from main object to return a new array.
But if this array is more than 1 I want to show the user that these values were found as duplicates and tell them what of what I was comparing was found to be the duplicate
let existingContacts;
function handleUpdate(){
existingContacts = secondSheet.filter((currContact) => {
if( [currContact['plan1'], [currContact['plan2'], [currContact['plan3']].indexOf(currentUser['memberNumber']) > -1 || currContact['email'] === currentUser['email'] || currContact['Cell Phone'] === currentUser['Cell Phone'] ) {
return true;
} else {
/* second check here for because how the original excel sheet puts people */
return false;
}
})
if (existingContact.length === 1) {return: true}
else if (existingContact.length > 1) { /* Wanna push was found in the .filter() here */ return false; }
else { return false; }
}
filteredSheet.push({
...(handleUpdate() && existingContact[0]),
/* rest of my keys i'm replacing here */
})
That is most of the function. I have some minor things converting the values so they dont error like emails being blank and stuff
I just want to be able to display to the user what was found and show them what was the duplicate in a seperate modal I got set up already
so example would be
Error Log:
Billy Bob: duplicate with Benny Socks at Member Number
Sara Jones: duplicate with Jones Smith at Cell Phone
…etc
Sorry for it being long.
My only idea currently is to just rerun my test in multiple if statements pushing to another array an object by running a for loop on the length of existingContacts if its more than 1
but I feel that there is a better way to do this.
In general, a turf polygon can be converted to Leaflet as per https://gis.stackexchange.com/questions/448435/converting-turf-polygon-to-leaflet-polygon .
But there seems to be a difficulty when the polygon is formed by an intersection. Sometimes the coordinates are embedded thus:
[[[long1, lat1],[long2,lat2], ... ]]
but other times this seems to be embedded one layer further:
[[[[long1, lat1],[long2,lat2], ... ]]]
at least, when displayed with
console.log(JSON.stringify(intersection.geometry.coordinates));
This means that for some turf intersect polygons, the coordinates can be obtained with coordinates[0], but for others I’d need coordinates[0][0].
Is there any straightforward way to manage this? (I’ve tried using turf.getCoords but it doesn’t seem to make any difference.)
I have a React application that makes a POST request to a backend API to process an image. The backend correctly processes the request and returns the expected response. However, the UI is not displaying the output correctly.
Repo: https://github.com/DingPingPong/image-ocr-app
import React, { useState } from "react";
import axios from "axios";
import { useDropzone } from "react-dropzone";
interface ExtractedData {
company: string;
invoice_date: string;
items: { description: string; quantity: number; amount: string }[]; // Changed amount to string for "$745.00" format
total_amount: string;
practitioner: string;
patient: string;
location: string;
currency: string | null;
other_details?: string;
}
const ImageUploadOCR: React.FC = () => {
const [image, setImage] = useState<File | null>(null);
const [data, setData] = useState<ExtractedData | null>(null);
const [loading, setLoading] = useState<boolean>(false);
const { getRootProps, getInputProps } = useDropzone({
accept: { "image/*": [] },
onDrop: (acceptedFiles) => setImage(acceptedFiles[0]),
});
const handleUpload = async () => {
if (!image) return;
setLoading(true);
const formData = new FormData();
formData.append("image", image);
try {
console.log("Data disk reached");
const response = await axios.post("http://localhost:5000/api/extract", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
// Log the full response to verify the structure
console.log("Response data:", response.data);
// Set data to the state
setData(response.data);
// Optionally log company and invoice_date for debugging
console.log("Company:", response.data?.company);
console.log("Invoice Date:", response.data?.invoice_date);
} catch (error) {
console.error("Error uploading image:", error);
} finally {
setLoading(false);
}
};
return (
<div className="p-6 max-w-2xl mx-auto">
<div {...getRootProps()} className="border-2 border-dashed p-4 cursor-pointer text-center">
<input {...getInputProps()} />
{image ? <p><img src={URL.createObjectURL(image)} /></p> : <p>Drag & drop an image, or click to select</p>}
</div>
<button className="mt-4 bg-blue-500 text-white px-4 py-2 rounded" onClick={handleUpload} disabled={!image || loading}>
{loading ? "Processing..." : "Upload & Extract"}
</button>
{data && (
<div className="mt-6">
<h2 className="text-xl font-bold mb-2">Extracted Data</h2>
<table className="w-full border-collapse border border-gray-300">
<thead>
<tr>
<th className="border p-2">Field</th>
<th className="border p-2">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border p-2">Company</td>
<td className="border p-2">{data?.company || "Not available"}</td> {/* Optional chaining added */}
</tr>
<tr>
<td className="border p-2">Invoice Date</td>
<td className="border p-2">{data?.invoice_date || "Not available"}</td> {/* Optional chaining added */}
</tr>
</tbody>
</table>
<h3 className="text-lg font-bold mt-4">Items</h3>
<table className="w-full border-collapse border border-gray-300">
<thead>
<tr>
<th className="border p-2">Description</th>
<th className="border p-2">Quantity</th>
<th className="border p-2">Amount</th>
</tr>
</thead>
<tbody>
{data.items.map((item, index) => (
<tr key={index}>
<td className="border p-2">{item.description}</td>
<td className="border p-2">{item.quantity}</td>
<td className="border p-2">{item.amount}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
);
};
export default ImageUploadOCR;
Issue:
The API returns the expected result, but the UI does not display the image.
No errors are shown in the console.
Backend response:
{'Currency': None, 'Location': {'Patient Address': '11 Rosewood Drive, Collingwood, NY 33580', 'Physician Address': '102 Trope Street, New York, NY 45568'}, 'Other relevant details': {'Due Date': '07/30/23', 'Invoice Number': '12245', 'Note': 'A prescription has been written out for patient, for an acute throat infection.', 'Sub Total': '$745.00', 'Tax': '$157.05', 'Tax Rate': '9%'}, 'Patient': 'Kemba Harris', 'Practitioner': 'Dr. Alanah Gomez', 'Total Amount': '$1,902.05', 'company': 'Not Specified', 'invoice_date': '07/01/23', 'items': [{'Amount': '$745.00', 'Description': 'Full body check up', 'Item': 'Full Check Up', 'Quantity': 1}, {'Amount': '$1,000.00', 'Description': 'Infection check due to inflammation', 'Item': 'Ear & Throat Examination', 'Quantity': 1}]}
How can I properly display the image output in the UI? What could be causing the issue?
The 3dvista virtual tour provides demo projects on its website, one of which is “E-learning Safety at Work” (https://www.3dvista.com/en/support/projects/). The quiz has questions, scores, panoramas (scenes) and the correct answers. The virtual tour generates an index.html to run the tour in the browser, and I need to somehow store in the browser’s cookies which panorama (scene) the user stopped at and which question was answered, so that the next time the user returns to the tour, he or she is redirected directly to the scene (panorama) of the next quiz question.
How do I store in the browser’s cookies the last scene the user stopped at? And redirect him or her to the next question/scene automatically?
For example, if the user returns to the tour and enters the questions section, before even rendering the scene (panorama) of the first question, it must be checked whether he or she has already answered a question before. If so, the next scene is loaded, otherwise the first scene is loaded. (panorama) is loaded. In other words, if you answered questions 1 and 2, as soon as you return to the tour, you should be automatically directed to the scene of the next question.
The idea I had was to run a javascript in the first media (panorama) related to the quiz. It would check if any question was answered. If not, the first scene (panorama) would be rendered. If not, it would check which questions were answered and direct the user to the last question answered or the next one. However, I don’t know how to do this within the 3dvista virtual tour and how to store this in the cookies so the user can return to where they left off.
TOUR: https://storage.net-fs.com/hosting/2727323/382/index.htm
GITHUB: https://github.com/paulinha-19/tour-bioterio
There is also this page on the website that can help solve the problem, but I don’t know how to do it. Can someone help me please?
HELPER LINKS:
https://www.3dvista.com/en/blog/the-url-of-a-virtual-tour/
https://www.3dvista.com/en/blog/managing-big-tours-thanks-to-new-deep-linking-options/
I have a react electron app where the user can drag and drop files on the front end react component, and those files are sent to the backend via an ipc render function.
I need to be able to get the full filepath for these dropped files from within the backend main.js electron process, but I can’t figure out how to do so.
const handleDrop = async (event) => {
// Get dropped files
event.preventDefault();
const droppedFiles = Array.from(event.dataTransfer.files);
console.log('Dropped files:', droppedFiles);
// Send dropped files to backend main.js process
window.api.send('get-filepaths', droppedFiles);
// Handle returned file paths
window.api.receive('get-filepaths-response', ( filepathsRsp ) => {
console.log('Received file paths:', filepathsRsp);
});
}
You can see on the front end my react app prints out the dropped file details, and filepath is not there.
Then in the main.js backend, the filepaths are received, but how do I in this main.js code below get the filepath for these files?
ipcMain.on('get-filepaths', (event, files) => {
console.log('get-filepaths: ', files);
// Get filepaths for each file
files.forEach(file => {
console.log('file = ', file.name)
});
// Send filepaths back to front end
event.reply('get-filepaths-response', ['filepath1','filepath2']);
});
get-filepaths: [ {}, {}, {} ]
file = undefined
file = undefined
file = undefined
How can I get the filepath from these files in my backend main.js?
I see in the electron docs online a section for how to do this with Renderer Process Modules, but I cant find any info on how to do this with Main Process Modules https://www.electronjs.org/docs/latest/api/web-utils
All my code is on the main branch here:
https://github.com/MartinBarker/electron-react-file-drop
How to correctly type server action functions passed in to a child components as properties?
Example server action definition:
export const addProduct = async (product: Product): Promise<{ success: boolean } | null> => {
// do something
return {
success: true
};
}
Example page.tsx:
import { addProduct } from '@/actions/products-actions';
const ProductsAddPage = async () => {
return <>
<h1>Add Post</h1>
<section>
<ProductForm
action={addProduct}
actionType='add'
/>
</section>
</>;
}
export default ProductsAddPage;
And here is ProductForm definition:
'use client';
interface ProductFormProps {
action: any; // this is where I have no clue what to do?
actionType: string;
}
const ProductForm = (
{
action,
actionType
}: ProductFormProps
) => {
return <>
{/* show something */}
</>;
}
so I understand there are ‘generics’ where we can make the interface ProductFormProps property action instead of any, a generic type so I can pass any type of server action function to it so it’s not just a single type definition?