Blancer.com Tutorials and projects

This is my zoom handler for my map:

const zoom = d3.zoom()
    .scaleExtent([1,25])
    .translateExtent([[width * -0.5, height * -0.5], [width * 1.5,height*1.5]])
    .on('zoom', (ev) => {
       svg.selectAll('path').attr('transform', ev.transform);  
    })

It updates the paths in the svg using the transform params from the event. This works great, but if I use projection(point) or similar methods to return the x,y coordinates of a point, then they will be incorrect.

I realise I need to update my projection to update the zoom/pan behaviour.

If I record the original map translation before any zooming, const origTrans = projection.translate(); and then apply the x,y transforms then I am able to correctly sync the projection for the top zoom level (ie k=1).

.on("end", (ev)=> {
  projection.translate([origTrans[0] + ev.transform.x * ev.transform.k, origTrans[1] + ev.transform.y * ev.transform.k]);
  const c =  projection([-3.3632, 55]);
  svg.append("circle")
    .attr("cx", c[0])
    .attr("cy", c[1])
    .attr("r", 9)
    .attr("fill", "red");
  }); 

I’m unclear as how zoom level relates to the projection scale. I can’t achieve the same thing

I’ve tried a few things e.g. – projection.scale(ev.transform.k), or projection.scale(projection.scale() * ev.transform.k) – I’m assuming there’s a lot more to it? If it helps I am using geoMercator for the projection.

After downloading qr code expected results not happening

=>the below following code for gr code

var qrcode = new QRCode(document.getElementById("qrcode"), { text: qrcode_text, width: 212, height: 212, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H });

=> the below following code for canvas

`var downloadButton = document.getElementById('QRCode_download_btn');
downloadButton.addEventListener('click', function () {

    var canvas = document.getElementById('qrcode').querySelector('canvas');
    var anchor = document.createElement('a');
    anchor.href = canvas.toDataURL('image/jpeg');
    anchor.download = fileName +'.jpeg';
    anchor.click();
});`

=>example
qr code height :- 212
qr code width:- 212

canvas height :- 500
canvas width:- 500

=> after user click on download button create canvas(background color = white) and draw qr code with respective values and some content on image

I want to render data from android cache memory JS file stored in my cordova project so I wrote html code as below

<script src="file:///data/data/com.stifirestop.systems2/files/system_menu_data.js"></script>

JS file code for download

var fileTransfer = new FileTransfer();
    var url = "https://systems.stifirestop.com/api/data/system_menu_data.js";
    var targetPath = cordova.file.dataDirectory + "system_menu_data.js";
    console.log("targetPath menu", targetPath);
    fileTransfer.download(
        url,
        targetPath,
        function (entry) {
            console.log("Download complete: menu " + entry.toURL());
        },
        function (error) {
            console.error("Download error:menu " + error.source + ", " + error.target + ", " + error.code);
        },
        true, // Optional, set to true if you want to overwrite existing files
         
    );

    // Second JS file
    var url2 = "https://files.stifirestop.com/automate/systems_mongo_dump/mongo_dump.js";
    var targetPath2 = cordova.file.dataDirectory + "mongo_dump.js";
    console.log("targetPath2 mongo", targetPath2);
    fileTransfer.download(
        url2,
        targetPath2,
        function (entry) {
            console.log("Download complete: mongo " + entry.toURL());
        },
        function (error) {
            console.error("Download error:menu " + error.source + ", " + error.target + ", " + error.code);
        },
        true, // Optional, set to true if you want to overwrite existing files
    );

File is successfully stored in my android files folder as below

When I run project in android device it give me error like

“Not allowed to load local resource: file:///data/data/com.stifirestop.systems2/files/system_menu_data.js”, source: https://localhost/index.html (0)

“Not allowed to load local resource: file:///data/data/com.stifirestop.systems2/files/mongo_dump.js”, source: https://localhost/index.html (0)

Any idea how I can solve this ?

I am trying to download docx or pdf file in React JS(depending on server response) when I get the response from the server. Backend is implemented in Python/Flask.

When I try to download the file, it downloads but damaged and corrupted.

React JS

function downloadDocument(downloadLink, downloadType) {
 const documentBlob = new Blob([downloadLink], { type: downloadType });
 const url = window.URL.createObjectURL(documentBlob);
 const anchor = document.createElement('a');
 anchor.href = url;
 anchor.download = document_title;
 document.body.appendChild(anchor);
 anchor.click();
 document.body.removeChild(anchor);
 window.URL.revokeObjectURL(url) ;
}

Backend Python/Flask

@app.route('/download_document_docx/<request_document_id>', methods=['GET'])
@token_required
def download_document_docx(current_user, request_document_id):
    '''
    Docx document preparation code
    '''
    return send_file(docx_file_path, as_attachment=True, mimetype="application/vnd.openxmlformats-officedocument.wordprocessingml.document")

I am new to Ionic React. I am trying to make a calendar app in which I can add/edit/delete Tasks. I can do all of that, but heres the issue.

When I edit the startDate or endDate the time seems to be 2 hours in the past. So when I create a startDate: 7-4-2024 13:00 and endDate 9-4-2024 23:59 and click edit, the values for startDate 7-4-2024 11:00 and for endDate 9-4-2024 21:59

Anyone have any idea on how to fix this? If anyone knows a better approach to doing this, ANY help is welcome :)!

EventComponentList.tsx:

interface TaskComponentProps {
    task: Task;
    index: number; // Index van de taak
    onDelete: () => void;
}

const TaskComponent: React.FC<TaskComponentProps> = ({task, index, onDelete}) => {
    const [newTask, setNewTask] = useState<Task>({...task}); // State for the new task
    const [editing, setEditing] = useState(false); // New state for editing mode
    const [expandedText, setExpandedText] = useState<string | null>(null); // State for expanded text

    const {
        handleInputChange,
        handleDateChange,
        handleToggleChange,
        handleEditTask,
    } = useTaskForm();

    // useEffect hook to reset newTask when editing mode is turned off
    useEffect(() => {
        if (!editing) {
            setNewTask({...task}); // Reset newTask when editing mode is turned off
        }
    }, [editing, task]);

    const handleEditClick = () => {
        setEditing(true); // Turn on editing mode
    };

    const handleSaveClick = () => {
        handleEditTask(index, newTask); // Save the edited task
        setEditing(false); // Turn off editing mode
    };

    const handleCancelClick = () => {
        setEditing(false); // Turn off editing mode
    };

    const toggleExpand = (textType: string) => {
        setExpandedText(expandedText === textType ? null : textType); // Toggle expanded text
    };

     return (
        <IonCard>
            
                <IonList className={'edit-task-form'}>
                    <IonItem>
                      <IonTextarea
                            label={"Name"}
                            labelPlacement={"floating"}
                            autoGrow={true}
                            name="name"
                            value={newTask.title}
                            onIonChange={(e) => setNewTask({...newTask, title: e.detail.value!})}
                        />
                    </IonItem>

                    {/* rest of the inputs */}

                    <IonItem>
                        <IonLabel>Start Date</IonLabel>
                        <IonDatetimeButton datetime="startDate"></IonDatetimeButton>
                        <IonModal keepContentsMounted={true}>
                            <IonDatetime
                                id="startDate"
                                onIonChange={handleDateChange('startDate')}
                                value={newTask.startDate.toISOString()}
                            >
                            </IonDatetime>
                        </IonModal>
                    </IonItem>
                    <IonItem>
                        <IonLabel>End Date</IonLabel>
                        <IonDatetimeButton datetime={"endDate"}></IonDatetimeButton>
                        <IonModal keepContentsMounted={true}>
                            <IonDatetime
                                id="endDate"
                                onIonChange={handleDateChange('endDate')}
                                value={newTask.endDate.toISOString()}
                            >
                            </IonDatetime>
                        </IonModal>
                    </IonItem>

TaskHelper.tsx:

export function useTaskForm() {

    const handleDateChange = (name: string) => (e: CustomEvent<any>) => {
        const value = new Date(e.detail.value);
        setNewTask(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

Task.tsx:

interface Task {
  title: string;
  description: string;
  startDate: Date;
  endDate: Date;
  openTimeSlot: boolean;
  remindMe: boolean;
  priority: number;
  category: number;
  url: string;
  note: string;
}

export default Task;

things I’ve tried:
1.
value={newTask.startDate ? newTask.startDate.toISOString() : undefined}
display-timezone=”UTC”
2.
value={newTask.startDate ? newTask.startDate.toISOString() : undefined} // Convert Date to string
onIonChange={(e) => setNewTask({…newTask, startDate: new Date(e.detail.value!)})}
3.
value={newTask.startDate.getTime() + 2 * 60 * 60 * 1000).toISOString()}

none of the above seem to work when editing a Task :`(

I have a requirement where i call api to extend the session , it’s a redirect Api which goes to IDP and IDP calls the rest api via iframe and then it calls the component where the iframe resides. If there is any error then we are passing queryParam “hasError” while calling component from backend. With in the component I am not able to look for queryParam . Can somebody please provide the guidance here :

this is my html : 
<iframe id='myIframe' hidden="hidden" (load)="onLoadIframe(iframe)" title="iframe-authn"></iframe>

this is my component : 

@Component({
    selector: "sso-authn",
    templateUrl: "./sso-authn.component.html"
})
export class SSOAuthNComponent implements AfterViewInit {
@Input()
public loadIframe: boolean;

constructor( @Inject('Window') private window: Window, private webhookServerConfigManager: WebhookServerConfigManager,private router: Router, private acRoute: ActivatedRoute) { }

    ngAfterViewInit() {
        if (this.loadIframe) {
            this.iframe = document.getElementById('myIframe');
            this.iframe.src= "http://localhost.com:4200/extend?goto=http://localhost.ukg.com:4200/sso-authn&realm=ok&compReq=ok;
        }
    }

    onLoadIframe(iframe: any) {
        **//tried to get url with this approach but it is returning parent window location href.**
        const iframeUrl = window.location.href;
  
        let queryParam = this.acRoute.snapshot.queryParams || {};
        if (iframeUrl && iframeUrl.indexOf("hasError") >= 0) {
            // Display session timeout page
            window.parent?.window?.postMessage({ "extendSession": false },     this.ServerConfigManager.ssoOrigin);
            // terminate session and redirect to error page
            console.log('error from auth',queryParam);
            window.parent?.window?.postMessage({ "extendSession": false, "error": queryParam }, this.ServerConfigManager.ssoOrigin);
             this.loadIframe = false;
        } else if (iframeUrl && iframeUrl.indexOf("hasSSO") >= 0) {
            console.log('success response');
            window.parent?.window?.postMessage({ "extendSession": true }, this.ServerConfigManager.ssoOrigin);
            this.loadIframe = false;
        }
    }
path to my component is :  {
    path:'sso-authn',
    component:SSOAuthNComponent
  }

# I want to access queryParam hasError from below url :
http://localhost.com:4200/sso-authn?hasSSO=true&realm=ok&hasError=QVVUSENPREVfSU5WQUxJRA%3D%3D

I’m using webpack version 5 with:

• @babel/[email protected]
• @babel/[email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

The console leading me to inpage.js file that I don’t have it in my source I assume it’s webpack thing (I’m newbie) and the code that cause’s error is:

setConnectionUrl() {
                return Nc(this, null, function*() {
                    const {nodes: C} = yield this.bm.emit(Mu.GET_NODE, Ve.solana);
                    this.provider.connection = D1(C[0].url)
                })
            }

The part that giving error cannot read properties of undefined (reading '0') is D1(C[0].url

Console Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
    at U1.<anonymous> (inpage.js:28930:39845)
    at Generator.next (<anonymous>)
    at ce (inpage.js:28930:37705)

I tried Updating all of the subpackages like loaders, babels, etc. But it was not helpful.
I put my github rep link down here so you can take a look at the source and config file yourself.

Clone: https://github.com/mhmdmsvi24/Front-End-Projects.git

It’s my first project and it’s in early stages and each time I reload this bug appears I can click on the X and the projects works just fine but It’s on my nerve.

I do not have enough reputation to post images please clone the project and check it out!

I’m working on a project where I’m trying to process PDF files using OCR (Optical Character Recognition). I’ve managed to split the PDF into individual pages using PDF.js on the client side, but now I’m stuck on how to upload each page to the backend for OCR processing.

Here’s what I’ve done so far:

Successfully integrated PDF.js into my project to split the PDF into separate pages.
I can access each page as a canvas element and perform some basic processing.
However, I’m struggling with the next steps:

How do I upload each page of the PDF to the backend one by one after splitting it using PDF.js?

I’m trying to build a web application that loads data from neo4j graph database and visualize it with the ability to control node placement and send query to sort the graph in different ways. I’ve heard of neosigma library that connects neo4j database to sigma js for visualization, but i don’t know if it’s possible to use it with react-sigma, especially since i’m still learning react and javascript along with it.

The farthest i’ve gone is trying react-sigma basic and neosigma library. the former is successful but since it use the example dataset made from randomly generated names, i’m not sure on how it works with a database and the limitations, and the latter i’m not even sure where to start.

I wrote a subscriber to send messages when placing an order, but it is not triggered. I removed all the code from my email client and left only the logs, but it still doesn’t work.
event-bus-redis works, new events are created in my redis.

import {
    Logger,
    OrderService,
    SubscriberArgs,
    SubscriberConfig,
} from "@medusajs/medusa";

type OrderPlacedEvent = {
    id: string;
    no_notification: boolean;
};

export default async function orderPlacedHandler({data, eventName, container}: SubscriberArgs<OrderPlacedEvent>) {

    const logger = container.resolve<Logger>("logger")

    console.log("Order placed event received")
    console.log(data)
    console.log(eventName)

    logger.log("Order placed event received")


    const orderService: OrderService = container.resolve('orderService');

    const order = await orderService.retrieve(data.id, {
        relations: ["items", "items.variant", "items.variant.product"],
    });

    // Do something with the order
}

export const config: SubscriberConfig = {
    event: OrderService.Events.PLACED,
    context: {
        subscriberId: "order-place-handler",
    },

};