I’m trying to use Node to capture a screenshot of the user’s screen on all displays and save everything in just one image, so far everything works fine if I call it the first time, but if I try to call it a second time without restarting the server, An error appears saying that the file cannot be opened.

Because I wanted to be able to make several requests to the screenshot, any ideas what I can do?
I’m still integrating with Node and JS so I don’t know how it works very well.

Code:

const express = require('express');
const app = express();
const port = 3000;
const fs = require('fs');


app.get('/', (req, res) => {
  hello = 'Hello World!';
  console.log(hello);
  res.send(hello);
});

app.get('/screenshot', (req, res) => {
  const screenshot = require('screenshot-desktop');
  const sharp = require('sharp');

  screenshot.listDisplays().then((displays) => {
    let screenshots = [];
    displays.forEach((display, i) => {
      const screenshotPath = `screenshot${i}.png`;
      screenshot({ screen: display.id }).then((imgBuffer) => { 
        fs.writeFile(screenshotPath, imgBuffer, (err) => { 
          if (err) throw err;
          console.log('Screenshot salvo!');
          screenshots.push(screenshotPath);
          if (screenshots.length === displays.length) {
            // Todas as screenshots foram salvas, agora junte-as
            Promise.all([
              sharp(screenshots[1]).metadata(),
              sharp(screenshots[0]).metadata()
            ]).then(([metadata1, metadata2]) => {
              sharp(screenshots[1])
                .extend({
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: metadata2.width,
                  background: { r: 0, g: 0, b: 0, alpha: 0 }
                })
                .composite([{ input: screenshots[0], left: metadata1.width, top: 0 }])
                .toBuffer()
                .then((buffer) => {
                  let base64Image = `data:image/png;base64,${buffer.toString('base64')}`;
                  res.send(base64Image);
                })
                .catch((err) => console.error(err));
            }).catch(err => console.error(err));
          }
        });
      }, (err) => {
        console.error(err);
      });
    });
  });
});

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Error im getting and Log:

Servidor rodando em http://localhost:3000
Screenshot salvo!
Screenshot salvo!
F:Andresk-access-control-aifacialRecogserver.js:23
          if (err) throw err;
                   ^

[Error: UNKNOWN: unknown error, open 'facialRecogscreenshot0.png'] {
  errno: -4094,
  code: 'UNKNOWN',
  syscall: 'open',
  path: 'facialRecog\screenshot0.png'
}

Node.js v20.12.2

I tried to create it like this, but instead of replacing the file, I would delete it and create a new one, but it would give me the error error eperm operation not permitted unlink saying that I can’t delete a file, but I’m not using it nowhere, and I can only delete it when I close Vscode

In this sentence “””()=>{Object.defineProperties(navigator,{webdriver:{get:()=>false}})}””” , what is (), => mean?

I only know it is a javascript and set se page evaluate with selenium

This is for setting page evaluate

I Need help to make a registration program in Google Sheets for treatment time measurement for dentist.
The program is meant to be as simple as possible for the user. On the sheet1 the user must register when the treatment starts, which kind of treatment and when its over, this is done by marking checkboxes to TRUE.
On sheet2 have I some data processing, were treatment type and time in seconds is listed. Treatment type is in a2 and time is in b2.
From here do I want to make a database sheet in sheet3.
Here is the treatment types listed in colon A and I want the times registered to be put into colon B next to the treatment type fitting the registration.
Until this part dont I have any problems. But now do I want the next registration with the same treatment type, to push the results in colon B to colon C and insert the new result in B. This proces needs to be ongoing with every new registration. The function I have come up with, makes some weird placesments of the results and I cant seem to find the solution for the function I want.

My code looks like this right now:

// Funktionen onEdit() lytter efter ændringer i arkene og udfører passende handlinger
function onEdit(e) {
  var range = e.range;
  var sheet = range.getSheet();
  var editedCell = sheet.getRange(range.getRow(), range.getColumn());

  // Check if editing is done in the "Registrering" sheet
  if (sheet.getName() == "Registrering") {
    var row = range.getRow();
    var col = range.getColumn();

    // Check if the edited cell is B1 (Checkbox for "start")
    if (col == 2 && row == 1 && editedCell.getValue() == true) {
      var dataSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
      var startTimestamp = new Date();
      dataSheet.getRange("H2").setValue(startTimestamp);
    }

    // Check if the edited cell is B30 (Checkbox for "behandling slut")
    if (col == 2 && row == 30 && editedCell.getValue() == true) {
      var dataSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
      var endTimestamp = new Date();
      var startTimestamp = dataSheet.getRange("H2").getValue();
      var timeDifference = (endTimestamp - startTimestamp) / 1000; // Difference in seconds

      dataSheet.getRange("J3").setValue(timeDifference);
      
      // Call the function to insert time in "Database behandling slut"
      //insertTimeInDatabase();
      // Call the function to to copy the data into the "Database behandling slut" 
      insertDataIntoDatabase()
    }

    // Check if the edited cell is B31 (Checkbox for "stol klar")
    if (col == 2 && row == 31 && editedCell.getValue() == true) {
      var dataSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
      var endTimestamp = new Date();
      var startTimestamp = dataSheet.getRange("H2").getValue();
      var timeDifference = (endTimestamp - startTimestamp) / 1000; // Difference in seconds

      dataSheet.getRange("K3").setValue(timeDifference);
    }
  }
}


function insertDataIntoDatabase() {
  var dataSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
  var databaseSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Database behandling slut");
  
  var treatmentType = dataSheet.getRange("A2").getValue(); // Get treatment type from cell A2
  var timeInSeconds = dataSheet.getRange("B2").getValue(); // Get time in seconds from cell B2
  
  // Find den sidste række med data
  var lastRow = databaseSheet.getLastRow();

  // Søg efter behandlingstypen i kollonne A
  var treatmentIndex = -1;
  for (var i = 1; i <= lastRow; i++) {
    if (databaseSheet.getRange(i, 1).getValue() == treatmentType) {
      treatmentIndex = i;
      break;
    }
  }

  // Hvis behandlingstypen ikke findes, så indsæt en ny række
  if (treatmentIndex == -1) {
    treatmentIndex = lastRow + 1;
    databaseSheet.getRange(treatmentIndex, 1).setValue(treatmentType);
  }

  // Find den næste ledige kolonne efter behandlingstypen
  var nextColumn = databaseSheet.getRange(treatmentIndex, 1, 1, lastRow).getValues()[0].filter(String).length + 2;

  // Indsæt den nye værdi i den næste ledige kolonne
  databaseSheet.getRange(treatmentIndex, nextColumn).setValue(timeInSeconds);
}

I want to create the input string where a user can input an expire date of his bank card. I would like the values in the input string look like “MM/YY” and after pressing a key each of the subsquent values (M then M then Y and one more Y) changes to the key, that user pressed

I did try this code, but ran into difficulties with changing characters MM and YY

import React, { useState, useRef} from 'react';


function ExpireDate() {
    const [expireDate, setExpireDate] = useState([])

    const handleExpireDate = event => {
        const keyPressed = event.key

        if (!/d/.test(keyPressed)) {
            if (keyPressed === 'Backspace') {
                setExpireDate((prev) => {
                    const newValue = [...prev]
                    newValue.pop()
                    
                    return newValue;
                })
            }

            return;
        
            
        }
        
        setExpireDate((prev) => {
            if (prev.length >=2) {
                return prev;
            }

            const newValue = [...prev]
            newValue.push(keyPressed)

            return newValue;
        })
    }


    const formattedExpireDate = (expireDate) => {
        console.log(`Expire date is: ${JSON.stringify(expireDate)}`)

        const month = new Array(2 - expireDate.length).fill('M').join('')
        const displayExpireDate = (expireDate.join('') + month)
            .replace(/(.{1,2})/, '$1/')
        

        return displayExpireDate;
    }

    return (
        <div>
            <div>
                <br />
                <input 
                className={`expire-date`}
                value={formattedExpireDate(expireDate)}
                onChange={() => {}}
                onKeyDown={handleExpireDate}
                size='5'
                placeholder=''
                />
            </div>
        </div>
    )
} 


export default ExpireDate;

J’ai récupérer le lien d’un fichier que j’ai enregistrer dans la base et je veux l’afficher dans la vue comme un lien à l’aide de JQuery et Ajax. Je récupère bel et bien le fichier et je l’ajoute à la vue, mais quand je clique sur le lien je vois une erreur. Il y a quelqu’un pour m’aider svp ?
Comment je peux ajouter le lien à ma vue pour le fichier s’afficher dans le navigateur quand on clique ?

Voici un extrait de mon code :
function getComments() {

        var userName = "{{ Auth::user()->name }}";
        var profilName = "{{ Auth::user()->profil->name }}";

        $.ajax({
            url: "{{ route('treatments.liste', $currentAssignement->id) }}",
            type: "GET",
            dataType: "json",
            success: function(response) {

                // Trier les traitements par date (du plus récent au plus ancien)
                var treatments = response.treatments.sort(function(a, b) {
                    return new Date(b.created_at) - new Date(a.created_at);
                });
                // Parcourir les traitements et les afficher dans la vue
                var treatments = response.treatments;
                treatments.forEach(function(treatment) {
                    // Créer la structure HTML pour chaque traitement
                    var treatmentHtml = '<div class="pt-2">' +
                        '<div class="d-flex justify-content-between">' +
                        '<strong><i class="fa fa-user" aria-hidden="true"></i> ' +
                        userName + ' / ' + profilName +
                        '</strong>' +
                        '<p class="pt-1">' + treatment.formatted_date +
                        '</p>' +
                        '</div>' +
                        '<div class="d-flex justify-content-between">' +
                        '<p class="pt-1">' + treatment.response + '</p>';

                    console.log(response);

                    // Ajouter le lien vers le fichier s'il existe
                    /* filePath*/
                    if (treatment.file) {
                        treatmentHtml +=
                            '<a href="' + treatment.file +
                            '" target="_blank" style="text-decoration:none; color:black;">' +
                            '<i class="fa fa-file-pdf" aria-hidden="true"></i>' +

                            '</a>';

                    }
                    treatmentHtml += '</div></div>';

                    // Ajouter le traitement à votre conteneur HTML
                    $('#treatmentsContainer').append(treatmentHtml);

                });

            },
            error: function(xhr, status, error) {
                // Handle errors, if any
                console.log(error);
            }
        });

    }

Je veux ajouter le lien du fichier à ma vue pour le fichier s’afficher dans le navigateur quand on clique

I am new to AG Grid and trying to bind some data to the grid. For one of the column which shows cost, I am trying to format it in currency but my params.data is coming null. I dont know what is the correct way of getting the params so that my params will have data for that row and column. When I console params, I see a lot of properties but data and value is undefined. Below is what I am trying to do. In my third else if, I am trying to format that entire column value in currency format but params.data is coming null. Also my grand row total is not appearing even after using the property. Any help is much appreciated

function BindDataToAGGrid(result, columnData, agGridPlaceHolderName, agChartPlaceHolderName) {
        
        $('#siteTypeHeadCountReportAGGrid').text('');
        $('#siteTypeHeadCostReportAGGrid').text('');
        $('#siteHeadCountReportAGGrid').text('');
        $('#siteHeadCostReportAGGrid').text('');

        // Preparing data for columnDefs
        var columnsArray = [];
        
        if (columnData.length > 0) {
            for (var i = 0; i < columnData.length; i++) {
                if (columnData[i] == "CostCenter" || columnData[i] == "Site" || columnData[i] == "ResourceType" ||
                    columnData[i] == "EStaff" || columnData[i] == "EStaffSub" || columnData[i] == "Year") {
                    var obj = {
                        field: columnData[i],
                        filter: "agTextColumnFilter",
                        rowGroup: false,
                        enableRowGroup: true,
                        pivot: true
                    }
                    columnsArray.push(obj);
                }
                else if (columnData[i] == "SiteType" || columnData[i] == "CoreApp")
                {
                    var obj = {
                        field: columnData[i],
                        filter: "agTextColumnFilter",
                        rowGroup: true,
                        enableRowGroup: true,
                        hide: true,
                        pivot: true
                    }
                    columnsArray.push(obj);
                }
                else if ((agGridPlaceHolderName == "siteTypeHeadCostReportAGGrid" || agGridPlaceHolderName == "siteHeadCostReportAGGrid")
                    && columnData[i] == "HeadCount") {
                    var obj = {
                        field: columnData[i],
                        filter: "agTextColumnFilter",
                        rowGroup: false,
                        enableRowGroup: true,
                        hide: true,
                        pivot: true
                    }
                    columnsArray.push(obj);
                }
                else if ((agGridPlaceHolderName == "siteTypeHeadCostReportAGGrid" || agGridPlaceHolderName == "siteHeadCostReportAGGrid") && columnData[i] == "HeadCost")
                {
                    var obj = {
                        field: columnData[i],
                        valueFormatter: params => currencyFormatter(params.data.HeadCost, "$"),
                        filter: "agTextColumnFilter",
                        rowGroup: false,
                        enableRowGroup: true,
                        pivot: true
                    }
                    columnsArray.push(obj);
                }
                else if ((agGridPlaceHolderName == "siteTypeHeadCountReportAGGrid" || agGridPlaceHolderName == "siteHeadCountReportAGGrid")
                    && columnData[i] == "HeadCost") {
                    var obj = {
                        field: columnData[i], 
                        filter: "agTextColumnFilter",
                        rowGroup: false,
                        enableRowGroup: true,
                        hide: true,
                        pivot: true
                    }
                    columnsArray.push(obj);
                }
                else {
                    var obj = {
                        field: columnData[i],
                        aggFunc: "sum",
                        filter: "agTextColumnFilter",
                        rowGroup: false,
                        enableRowGroup: true,
                        pivot: true
                    }
                    columnsArray.push(obj);
                }
            }
        }
        const gridOptions = {
            rowStyle: { "font-weight": "bold" },
            pagination: true,
            paginationPageSize: 10,
            paginationPageSizeSelector: [10, 20, 50, 100, 200, 500, 1000],
            rowData: result,
            columnDefs: columnsArray,
            defaultColDef: {
                flex: 1,
                minWidth: 105,
                cellClass: "number-cell",
                // allow every column to be aggregated
                enableValue: true,
                // allow every column to be grouped
                enableRowGroup: true,
                // allow every column to be pivoted
                enablePivot: true,
                filter: true,
                editable: false,
            },
            autoGroupColumnDef: {
                minWidth: 200,
                //filter: 'agGroupColumnFilter',
            },
            sideBar: {
                toolPanels: [
                    {
                        id: "filters",
                        labelDefault: "Filters",
                        labelKey: "filters",
                        iconKey: "filter",
                        toolPanel: "agFiltersToolPanel",
                    },
                ],
                defaultToolPanel: "",
            },
            grandTotalRow: 'bottom',
            /* groupSuppressBlankHeader: true,*/
            /* enablePivot: true,*/
            onCellValueChanged: (event) => {
                console.log(`New Cell Value: ${event.value}`);
            },
            enableCharts: true,
            rowGroupPanelShow: 'always',
            groupDisplayType: 'singleColumn',
        };
        // Your Javascript code to create the data grid
        
        //const myGridElement = document.querySelector('#siteTypeHeadCountReportAGGrid');
        const myGridElement = document.querySelector('#' + agGridPlaceHolderName);
        gridApi = agGrid.createGrid(myGridElement, gridOptions);
        
    }

    function currencyFormatter(currency, sign) {
        var sansDec = currency.toFixed(0);
        var formatted = sansDec.replace(/B(?=(d{3})+(?!d))/g, ",");
        return sign + `${formatted}`;
    }

I’m trying to export a module with async/await. Tried other online solutions but none is working for me. Looking for better solution (within db.js file) if possible.

With below implementation, db1 is always undefined:

// db.js

const mysql = require("mysql");
const environment = require("../environment");
const AWS = require("aws-sdk");


const createAuthToken = async () => {
    
        const signer = new AWS.RDS.Signer();

        return await signer.getAuthToken({
            credentials: {
                region: environment.aws.region,
                accessKeyId: environment.aws.accessKeyId,
                secretAccessKey: environment.aws.secretAccessKey
            },
            region: environment.aws.region,
            username: environment.mysql.user,
            hostname: environment.mysql.host,
            port: environment.mysql.port
        })
    
}

const setConnectionPool = async () => {                 // How to export db1 using async await
    const token = await createAuthToken();

    return mysql.createPool({
        host: environment.mysql[0].host,
        port: environment.mysql[0].port,
        user: environment.mysql[0].user,
        password: token,
        connectionLimit: 10
    });
}

exports.db1 = setConnectionPool;                                // I can't use (top-level) await, as my package.json doesn't have type: module and I don't want to add it.

I don’t want to make changes (like adding await) in this file:

// common.query.js

const database = require("../db");
const db1 = database.db1;                     // db1 is undefined obviously

class CommonQuery {

 static executeQuery = () => {
    db1.serialize(() => {
            db.all(query, param,
                (error, rows) => {
                    if (error) {
                        logger.error("error occured in executing query !", { error: error }, { service: "common" }, { file: `${__filename}` }, { user: ClaimService.getUser() });
                        return cb({ message: ERROR_MSG.DB_ERROR });
                    }
                    return cb(null, rows);
                });
        });
   }
}

module.exports = CommonQuery ;

// controller.js

const CommonQuery = require("../common.query.js")

CommonQuery.executeQuery();

I don’t want to use db1.then() syntax, just need better solution with async/await.

I have an student array with date of birth, I try to sort based on date of the birth using below code. it is working fine in chrome,but it is not working in firefox

StudentArray.sort((a, b) => new Date(a.dateofBirth) - new Date(b.dateofBirth)); 

Whenever I click on the X on top left to close the full-screen video the website goes back a page. This behavior occurs only on an iphone and not on android or browser on laptop (I haven’t tested a macbook). The relevant div section of code:

<div class="container-fluid first-cont">
   <div class="container columns"> 
       <div class="iframe-container">
           <iframe src="{{ user.video_url }}" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0"></iframe>
       </div>
   </div>
</div>

How can i solve this? The headers in the html if they could be causing this effect:

<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

I noticed that only in Firefox and only when clicking one button (the settings one), the border of the div becomes white. This isn’t a problem on computers, but on mobile that is detected as a touch, meaning that when I press the settings button it also opens the keyboard to edit the text.

This is the repo of the project. After cloning it, to run it use:

npm install
npm run dev

I already tried to stop the event’s propagation:

<!-- Settings Button: copy, reset, allow tabs -->
  <settings-button
    {type}
    editor={codeMirrorEditor}
    tabsconf={tabsConfiguration}
    editableconf={editableFilterConfiguration}
    {code}
    on:changedout={(event) => {
      event.stopPropagation();
      output = event.detail.output;
    }}
    on:showmsg={(event) => {
      event.stopPropagation();
      showMessage(event.detail);
    }}
  />

If it might be of help, this is the Svelte file of the settings button (long text, sorry):

<svelte:options tag="settings-button" />

<script lang="ts">
    /**
     * IMPORTS
     */
    import type { Compartment } from "@codemirror/state";
    import type { EditorView } from "@codemirror/view";
    import { onMount } from "svelte";
    import { setEditableFilter, setTabsHandling } from "../../utils";

    /**
     * PROPS
     */
    export let type: "normal" | "vertical" = "normal";
    export let editor: EditorView;
    export let tabsconf: Compartment;
    export let editableconf: Compartment;
    export let code: string;

    /**
     * ELEMENTS
     */
    let ref: HTMLElement;
    let settingsButtonContainer: HTMLElement;
    let copyContainer: HTMLElement;
    let tabsContainer: HTMLElement;
    let resetContainer: HTMLElement;
    let textLockedContainer: HTMLElement;

    /**
     * VARIABLES
     */
    let tabsEnabled = false;

    let isTextLocked = true;

    /**
     * FUNCTIONS
     */

    /**
     * Send an event with the message that needs to be displayed
     * @param message the message to be displayed
     */
    function showMessage(message: string) {
        const event = new CustomEvent("showmsg", {
            detail: message,
            bubbles: true,
            cancelable: true,
            composed: true,
        });
        ref?.dispatchEvent(event);
    }

    /**
     * Send an event to reset the code output
     */
     function resetOutput() {
        const event = new CustomEvent("changedout", {
        detail: {
            output: "",
            outputError: false,
        },
        bubbles: true,
        cancelable: true,
        composed: true,
        });
        ref?.dispatchEvent(event);
    }

    /**
     * On mount, add the event listeners for every button
     */
    onMount(() => {
        // Define the behavior of the copy button when clicked
        copyContainer.addEventListener("click", (e) => {
            var copyText = editor.state.doc.toString();
            navigator.clipboard.writeText(copyText);
            settingsButtonContainer.click();
            showMessage("Text Copied!");
        });

        // Define the behavior of the tabs button when clicked
        tabsContainer.addEventListener("click", (e) => {
            tabsEnabled = !tabsEnabled;
            setTabsHandling(editor, tabsconf, tabsEnabled);
            settingsButtonContainer.click();
            showMessage(
                tabsEnabled ? "Tabs handling enabled" : "Tabs handling disabled"
            );
        });

        // Define the behavior of the reset button when clicked
        resetContainer.addEventListener("click", (e) => {
            editor.dispatch({
                changes: [
                    {
                        from: 0,
                        to: editor.state.doc.length,
                        insert: isTextLocked
                            ? code
                            : code
                                  .replaceAll("<EDITABLE>", "")
                                  .replaceAll("</EDITABLE>", ""),
                    },
                ],
            });
            resetOutput();
            settingsButtonContainer.click();
            showMessage("Code reset!");
        });

        // Define the behavior of the text locked button when clicked
        textLockedContainer.addEventListener("click", (e) => {
            // Emulate click on reset button
            resetContainer.click();

            // Toggle the text locked state
            isTextLocked = !isTextLocked;
            setEditableFilter(editor, editableconf, code, isTextLocked);
            showMessage(isTextLocked ? "Text locked" : "Text unlocked");
        });
    });

    var checkWidth = window.matchMedia("(max-width: 992px)")
    let mobile = false;
    if (checkWidth.matches) {
        mobile = true;
    }
</script>

<div
    bind:this={ref}
    id="settings-container"
    style={type == "vertical"
        ? `right: calc(var(--output-height) + min(0.7vw, 1.4vh) + 1px); bottom: min(4.5vw, 9vh)`
        : `right: min(0.4vw, 0.8vh); bottom: calc(var(--output-height) + min(4.7vw, 9.4vh))`}
>
    <div class="menu">
        <input
            type="checkbox"
            class="menu-open"
            name="menu-open"
            id="menu-open"
            bind:this={settingsButtonContainer}
        />
        <label id="settings-button" class="settings-button" for="menu-open">
            <svg
                class="settings"
                style="width: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`};
                height: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`}"
                viewBox="0 0 14 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M8.20442 13.6177H5.7956C5.64467 13.6177 5.49827 13.5661 5.38067 13.4715C5.26308 13.3769 5.18135 13.2449 5.14905 13.0975L4.87972 11.8507C4.52042 11.6933 4.17972 11.4964 3.86391 11.2638L2.64825 11.6509C2.50435 11.6968 2.34909 11.6921 2.20825 11.6375C2.06741 11.583 1.94946 11.4819 1.87398 11.3511L0.666921 9.26589C0.592238 9.13495 0.564204 8.98254 0.587405 8.83359C0.610607 8.68465 0.68367 8.54798 0.794642 8.44596L1.73766 7.58567C1.69477 7.19596 1.69477 6.80273 1.73766 6.41302L0.794642 5.55471C0.683513 5.45265 0.61035 5.31587 0.587145 5.16677C0.56394 5.01768 0.592069 4.86513 0.666921 4.73412L1.87133 2.64758C1.94681 2.51676 2.06476 2.41569 2.2056 2.36116C2.34645 2.30663 2.50171 2.30191 2.6456 2.3478L3.86126 2.73493C4.02273 2.61581 4.19082 2.50464 4.3642 2.40405C4.53163 2.31008 4.70369 2.22471 4.87972 2.14861L5.14972 0.903167C5.18186 0.755725 5.26343 0.623696 5.3809 0.528972C5.49837 0.434247 5.64469 0.382517 5.7956 0.382359H8.20442C8.35533 0.382517 8.50165 0.434247 8.61912 0.528972C8.73659 0.623696 8.81816 0.755725 8.85031 0.903167L9.12295 2.14927C9.48179 2.30761 9.82239 2.50442 10.1388 2.73626L11.3551 2.34912C11.4989 2.30341 11.654 2.30821 11.7947 2.36273C11.9354 2.41725 12.0532 2.51822 12.1287 2.6489L13.3331 4.73545C13.4866 5.00479 13.4337 5.3456 13.2054 5.55537L12.2624 6.41567C12.3052 6.80537 12.3052 7.19861 12.2624 7.58832L13.2054 8.44861C13.4337 8.65905 13.4866 8.9992 13.3331 9.26854L12.1287 11.3551C12.0532 11.4859 11.9353 11.587 11.7944 11.6415C11.6536 11.696 11.4983 11.7007 11.3544 11.6549L10.1388 11.2677C9.82319 11.5002 9.48271 11.6969 9.12361 11.8541L8.85031 13.0975C8.81803 13.2448 8.73641 13.3767 8.61895 13.4713C8.50148 13.5659 8.35524 13.6175 8.20442 13.6177V13.6177ZM6.99736 4.35295C6.29532 4.35295 5.62203 4.63183 5.12561 5.12825C4.62919 5.62467 4.3503 6.29796 4.3503 7.00001C4.3503 7.70205 4.62919 8.37534 5.12561 8.87176C5.62203 9.36818 6.29532 9.64707 6.99736 9.64707C7.69941 9.64707 8.3727 9.36818 8.86912 8.87176C9.36554 8.37534 9.64442 7.70205 9.64442 7.00001C9.64442 6.29796 9.36554 5.62467 8.86912 5.12825C8.3727 4.63183 7.69941 4.35295 6.99736 4.35295V4.35295Z"
                    fill="white"
                />
            </svg>
        </label>

        <div
            bind:this={copyContainer}
            class="menu-item"
            style="background-color: #00CC3D;"
        >
            <svg
                style="width: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`};
                height: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`}"
                viewBox="0 0 12 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M10.0625 0.682514C10.0625 0.592517 10.0447 0.503409 10.0101 0.420318C9.97556 0.337227 9.92489 0.261794 9.86105 0.19836C9.79721 0.134927 9.72146 0.0847456 9.63815 0.0507051C9.55484 0.0166647 9.46562 -0.000562877 9.37562 1.40238e-05H0.686875C0.59688 -0.000562877 0.50766 0.0166647 0.42435 0.0507051C0.341039 0.0847456 0.265284 0.134927 0.201444 0.19836C0.137604 0.261794 0.0869395 0.337227 0.0523675 0.420318C0.0177954 0.503409 -1.84891e-06 0.592517 1.44068e-10 0.682514V11.5675C-1.84891e-06 11.6575 0.0177954 11.7466 0.0523675 11.8297C0.0869395 11.9128 0.137604 11.9882 0.201444 12.0517C0.265284 12.1151 0.341039 12.1653 0.42435 12.1993C0.50766 12.2334 0.59688 12.2506 0.686875 12.25H0.914375V0.905639H10.0625V0.682514Z"
                    fill="white"
                />
                <path
                    d="M11.1562 1.75H2.40625C2.04381 1.75 1.75 2.04381 1.75 2.40625V13.3437C1.75 13.7062 2.04381 14 2.40625 14H11.1562C11.5187 14 11.8125 13.7062 11.8125 13.3437V2.40625C11.8125 2.04381 11.5187 1.75 11.1562 1.75Z"
                    fill="white"
                />
            </svg>
        </div>
        <div
            bind:this={tabsContainer}
            class="menu-item"
            style="background-color: {tabsEnabled ? '#00cc3d' : '#ff4133'}"
        >
            <svg
                style="width: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`};
                height: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`}"
                viewBox="0 0 14 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M14 0.7C14 0.514348 13.9263 0.336301 13.795 0.205025C13.6637 0.0737497 13.4857 0 13.3 0C13.1143 0 12.9363 0.0737497 12.805 0.205025C12.6738 0.336301 12.6 0.514348 12.6 0.7V10.5C12.6 10.6857 12.6738 10.8637 12.805 10.995C12.9363 11.1262 13.1143 11.2 13.3 11.2C13.4857 11.2 13.6637 11.1262 13.795 10.995C13.9263 10.8637 14 10.6857 14 10.5V0.7ZM6.09467 0.205333C5.96197 0.0816851 5.78646 0.0143704 5.60511 0.01757C5.42377 0.0207697 5.25074 0.094234 5.12249 0.222486C4.99423 0.350738 4.92077 0.523765 4.91757 0.705112C4.91437 0.88646 4.98169 1.06197 5.10533 1.19467L8.81067 4.9H0.7C0.514348 4.9 0.336301 4.97375 0.205025 5.10503C0.0737497 5.2363 0 5.41435 0 5.6C0 5.78565 0.0737497 5.9637 0.205025 6.09497C0.336301 6.22625 0.514348 6.3 0.7 6.3H8.81067L5.10533 10.0053C5.03656 10.0694 4.9814 10.1467 4.94314 10.2326C4.90488 10.3184 4.88431 10.4111 4.88265 10.5051C4.88099 10.5991 4.89828 10.6925 4.93349 10.7796C4.96869 10.8668 5.02109 10.946 5.08756 11.0124C5.15404 11.0789 5.23321 11.1313 5.32038 11.1665C5.40754 11.2017 5.5009 11.219 5.59489 11.2174C5.68888 11.2157 5.78157 11.1951 5.86744 11.1569C5.9533 11.1186 6.03058 11.0634 6.09467 10.9947L10.9947 6.09467C11.1258 5.96342 11.1994 5.7855 11.1994 5.6C11.1994 5.4145 11.1258 5.23658 10.9947 5.10533L6.09467 0.205333Z"
                    fill="white"
                />
            </svg>
        </div>
        <div
            bind:this={resetContainer}
            class="menu-item"
            style="background-color: #ff4133"
        >
            <svg
                style="width: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`};
                height: {mobile == true
                    ? `min(2vw, 3vh)`
                    : ` min(0.8vw, 1.6vh)`}"
                viewBox="0 0 13 13"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M6.48807 1.0568e-05C4.75119 0.00312952 3.17418 0.687569 2.00989 1.80022L1.07384 0.86417C0.677546 0.46788 0 0.748533 0 1.30895V4.82259C0 5.17 0.281623 5.45162 0.629032 5.45162H4.14268C4.70309 5.45162 4.98374 4.77408 4.58748 4.37779L3.49323 3.28353C4.30216 2.5261 5.3489 2.10653 6.46095 2.09694C8.88267 2.07603 10.924 4.03586 10.9031 6.53796C10.8832 8.91154 8.95889 10.9032 6.5 10.9032C5.42207 10.9032 4.4033 10.5185 3.60042 9.81407C3.47611 9.70501 3.28837 9.71164 3.17142 9.82856L2.1319 10.8681C2.0042 10.9958 2.01052 11.204 2.14453 11.325C3.29712 12.3661 4.82452 13 6.5 13C10.0898 13 13 10.0899 13 6.50006C13 2.91434 10.0738 -0.0064108 6.48807 1.0568e-05Z"
                    fill="white"
                />
            </svg>
        </div>
        <div
            bind:this={textLockedContainer}
            class="menu-item"
            style="background-color: {isTextLocked
                ? '#ff4133'
                : '#00cc3d'}; {!editableconf || !editableconf.get(editor.state)
                ? 'display: none !important'
                : ''}"
        >
            <div class="container">
                <span class="lock {isTextLocked ? '' : 'unlocked'}" />
            </div>
        </div>
    </div>
</div>

<style>
    #settings-container {
        position: absolute;
        z-index: 99;
    }
    #settings-button {
        transition: all ease-in 150ms;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        box-shadow: 2px -7px 17px -5px rgba(0, 0, 0, 0.35);
    }

    .menu-item,



    .settings-button {
        cursor: pointer;
        background: #5f5f5f;
        border-radius: 100%;
        width: min(1.85vw, 3.7vh);
        height: min(1.85vw, 3.7vh);
        margin-left: max(-1.85vw, -3.7vh);
        position: absolute;
        transition: all ease-in-out 200ms;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @media screen and (max-width: 992px) {
        .settings-button {
            cursor: pointer;
            background: #5f5f5f;
            border-radius: 100%;
            width: min(3.7vw, 7.4vh);
            height: min(3.7vw, 7.4vh);
            margin-left: max(-3.7vw, -7.4vh);
            margin-top: max(-4vw, -8vh);
            position: absolute;
            transition: all ease-in-out 200ms;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    @media screen and (max-width: 992px) {
        .menu-item {
            width: min(3.7vw, 7.4vh);
            height: min(3.7vw, 7.4vh);
            margin-left: max(-3.7vw, -7.4vh);
            margin-top: max(-4vw, -8vh);
        }
    }

    .menu-open {
        display: none;
    }
    .menu-item:nth-child(3) {
        transition-duration: 70ms;
    }
    .menu-item:nth-child(4) {
        transition-duration: 130ms;
    }
    .menu-item:nth-child(5) {
        transition-duration: 190ms;
    }
    .menu-item:nth-child(6) {
        transition-duration: 250ms;
    }
    .settings-button {
        z-index: 2;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition-duration: 400ms;
        transform: scale(1.1, 1.1);
        cursor: pointer;
    }
    .settings-button:hover {
        transform: scale(1.2, 1.2);
    }
    .menu-open:checked + .settings-button {
        transition-timing-function: linear;
        transition-duration: 200ms;
        transform: scale(0.8, 0.8);
    }
    .menu-open:checked ~ .menu-item {
        transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    }
    .menu-open:checked ~ .menu-item:nth-child(3) {
        transition-duration: 160ms;
        transform: translate3d(max(-2.5vw, -5vh), 0, 0);
    }
    @media screen and (max-width: 992px) {
        .menu-open:checked ~ .menu-item:nth-child(3) {
            transition-duration: 160ms;
            transform: translate3d(max(-5vw, -10vh), 0, 0);
        }
    }
    .menu-open:checked ~ .menu-item:nth-child(4) {
        transition-duration: 240ms;
        transform: translate3d(max(-2.5vw, -5vh), max(-2.5vw, -5vh), 0);
    }
    @media screen and (max-width: 992px) {
        .menu-open:checked ~ .menu-item:nth-child(4) {
            transition-duration: 240ms;
            transform: translate3d(max(-5vw, -10vh), max(-5vw, -10vh), 0);
        }
    }
    .menu-open:checked ~ .menu-item:nth-child(5) {
        transition-duration: 320ms;
        transform: translate3d(0, max(-2.5vw, -5vh), 0);
    }
    @media screen and (max-width: 992px) {
        .menu-open:checked ~ .menu-item:nth-child(5) {
            transition-duration: 320ms;
            transform: translate3d(0, max(-5vw, -10vh), 0);
        }
    }
    .menu-open:checked ~ .menu-item:nth-child(6) {
        transition-duration: 400ms;
        transform: translate3d(0, max(-5vw, -10vh), 0);
    }
    @media screen and (max-width: 992px) {
        .menu-open:checked ~ .menu-item:nth-child(6) {
            transition-duration: 400ms;
            transform: translate3d(0, max(-10vw, -20vh), 0);
        }
    }

    /* Lock icon CSS */
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lock {
        transform: scale(0.5);
        width: 60%;
        height: 52.5%;
        border: min(0.25vw, 0.5vh) solid white;
        margin-top: 12.5%;
        border-radius: 5px;
        position: relative;
        cursor: pointer;
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }
    .lock:after {
        content: "";
        display: block;
        background: white;
        width: 10%;
        height: 23.3%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -11.7% 0 0 -6.7%;
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }
    .lock:before {
        content: "";
        display: block;
        width: 33.3%;
        height: 50%;
        bottom: 105%;
        position: absolute;
        left: 40%;
        margin-left: -26.7%;
        border: min(0.25vw, 0.5vh) solid white;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom: 0;
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }
    .lock:hover:before {
        height: 40%;
    }
    .unlocked {
        transform: rotate(10deg) scale(0.5);
        margin-top: 26.7%;
    }
    .unlocked:before {
        bottom: 120%;
        left: 31%;
        margin-left: -38.3%;
        transform: rotate(-45deg);
    }
    .unlocked,
    .unlocked:before {
        border-color: white;
    }
    .unlocked:after {
        background: white;
    }
    .unlocked:hover {
        transform: rotate(3deg) scale(0.5);
    }
    .unlocked:hover:before {
        height: 33.3%;
        left: 40%;
        bottom: 124%;
        transform: rotate(-30deg);
    }
</style>

Thanks to anyone who will take the time even to just take a look at this

I have installed ngx-extended-pdf-viewer@18 and angular 13. It works well. But now I want to download edit pdf file with separate button, how can i achieve that. please help

in HTML file

<ngx-extended-pdf-viewer #pdfViewer [src]="pdfSrc" [contextMenuAllowed]="false"
                         [enablePrint]="false"
                         [showSidebarButton]="false"
                         [showOpenFileButton]="false"
                         [showSecondaryToolbarButton]="false"
                         height="80vh"></ngx-extended-pdf-viewer>

<button (click)="downloadPdf()">Download it</button>

in ts file

import {Component, ElementRef, OnInit, ViewChild, NgZone} from '@angular/core';
import SignaturePad from 'signature_pad';
import {PDFDocumentProxy} from 'ng2-pdf-viewer';
import {PDFDocument} from 'pdf-lib';
import {HttpClient} from "@angular/common/http";
import {IPDFViewerApplication, NgxExtendedPdfViewerComponent, PdfDownloadedEvent} from "ngx-extended-pdf-viewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  // pdf document
  pdfSrc = '../assets/download.pdf';
  pdfDoc?: PDFDocumentProxy;
  pdfDownloaded: any;
  @ViewChild('pdfViewer') pdfViewer!: NgxExtendedPdfViewerComponent;
  
constructor(private http: HttpClient, private ngZone: NgZone) {
  }
 
  ngOnInit(): void {
    console.log('dfsd');
  }


  downloadPdf() {
    // Get the PDF data from the PDF viewer
    // @ts-ignore
    const editedPdfData = this.pdfViewer?.getCurrentDocumentAsBlob();

    // Create a Blob URL for the edited PDF data
    const blob = new Blob([editedPdfData], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);

    // Create a download link
    const link = document.createElement('a');
    link.href = url;
    link.download = 'edited-file.pdf'; // Specify the desired filename

    // Append the link to the document, trigger the download, and then remove the link
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // Revoke the Blob URL to free up memory
    URL.revokeObjectURL(url);
  }
}

not only this i have done so many tries to solve it but i don’t get it’s solution.

I just want to find out what is causing barcode detection from image only working on second attempt (button press) even on examples like this:

https://zxing-js.github.io/library/examples/barcode-image/

If i press DECODE once it shows N in Result and only show barcode detected on second press.

Is this something with my setup as i used different browsers on Linux Ubuntu or something that needed to be fixed?

Thank You

I tried changing my code in many ways until i saw that code on examples have same issue.

I have a JSON reponse.

Response JSON:

[
  {
    "price": 388,
    "created_date": "2019-07-30T17:01:38",
    "created_user": "PQR"
  },
  {
    "price": 511,
    "created_date": "2021-02-25T19:19:55",
    "created_user": "ABCD"
  },
  {
    "price": 592,
    "created_date": "2021-09-07T08:10:41",
    "created_user": "ABCD"
  },
  {
    "price": 622,
    "created_date": "2022-01-17T15:37:41",
    "created_user": "ABCD"
  },
  {
    "price": 672,
    "created_date": "2022-02-06T13:34:35",
    "created_user": "PQR"
  },
  {
    "price": 640,
    "created_date": "2024-05-08T15:51:02",
    "created_user": "ABCD"
  }
]

Input Pass Date:

InputPassdate = “2023-05-11T00:00:00”

When I passed “InputPassdate” then it search greater dates values within the response and generate new response include previous object data with “created_date” : “InputPassdate” date in below output.

Expected Output:

[
  {
    "price": 672,
    "created_date": "2023-05-11T00:00:00",
    "created_user": "PQR"
  },
  {
    "price": 640,
    "created_date": "2024-05-08T15:51:02",
    "created_user": "ABCD"
  }
]

I’m aiming to enhance my Node.js-based e-commerce website with real-time features like chat, calling, and live streaming. Currently, it uses HTTP communication.

I have an existing e-commerce website built with Node.js that currently follows the HTTP communication standard. I want to add real-time communication features such as chat, voice/video calling, and live streaming functionality to the website using WebSocket technology.

1. Is it possible to implement WebSocket in my existing Node.js project, or do I need to create a separate project for it?
2. If I can implement WebSocket in my existing project, do I need to create a new port for the WebSocket server, or can I use the same port as the HTTP server?
3. Can I hit both the HTTP and WebSocket servers from the same live API, or do I need to have separate APIs for each server?
4. How can I handle and manage both the HTTP and WebSocket servers on my website? Are there any best practices or architectures to follow?
5. Can you provide any references, tutorials, or resources that could guide me through the process of integrating WebSocket into my existing Node.js project for real-time communication features?

I would appreciate any guidance or recommendations on the best approach to achieve my goal of adding chat, calling, and live streaming functionality to my e-commerce website using WebSocket while working with my existing Node.js codebase.

async createUserAtaAccount(){
  try{
    const programId = new PublicKey(this.USDC_MINT_ADDRESS);
    const [PDA, bump] = PublicKey.findProgramAddressSync([], programId);
    console.log("PDA::::",PDA.toString());
    console.log("PDA::::",bump);
    const associatedToken = getAssociatedTokenAddressSync(
      new PublicKey(this.USDC_MINT_ADDRESS),
      new PublicKey(this.walletAdress),
        false
     );

    let tx= new Transaction();
    tx.add(
        createAssociatedTokenAccountInstruction(
            new PublicKey(this.walletAdress), // payer
            associatedToken, // ata
            new PublicKey(this.walletAdress), // owner
            new PublicKey(this.USDC_MINT_ADDRESS),
        ),
    )
    tx.feePayer = new PublicKey(this.walletAdress);
    const blockhashObj = await this.connection.getRecentBlockhash();
    console.log('blockhashObj ::::',blockhashObj)
    tx.recentBlockhash = await blockhashObj.blockhash;
    const signed = await window.solana.signTransaction(tx);
    console.log('signed.serialize() ::::',signed.serialize())
    let signature = await this.connection.sendRawTransaction(signed.serialize());
    // Confirm whether the transaction went through or not
    let hash= await this.connection.confirmTransaction(signature);
    // console.log('signed:::::',signed);
    console.log('hash:::::',hash);
  }catch (e){
    console.error("createUserAssAccount::::: ",e.toString());
  }
},[enter image description here](https://i.sstatic.net/53gaWKFH.png)

callback error ：createUserAssAccount::::: Error: failed to send transaction: Transaction simulation failed: Error processing Instruction 2: Provided owner is not allowed

I want to create a usdc token account