Blancer.com Tutorials and projects

I’m trying to use Javascript to extract and unwarp a picture of a piece of paper.

Running on Node.js v22.13.1 w/ jscanify v1.4.0, this is my main.js file.

When run through node main.js, the following snippet keeps raising a “cannot read property of undefined” error:

const imageProcessor = require('jscanify');
const { loadImage } = require('canvas');
const fileSystem = require('fs');

const processor = new imageProcessor();

loadImage('images/test.png').then((originalImage) => {
    // extract and highlight the papers
    const paperExtracted = processor.extractPaper(originalImage, 50, 100);
    const paperHighlighted = processor.highlightPaper(originalImage);

    // convert result to JPG file
    const extractedBuffer = paperExtracted.toBuffer('image/jpeg');
    const highlightedBuffer = paperHighlighted.toBuffer('image/jpeg');

    // write it to file
    fileSystem.writeFileSync('images/test-extracted.png', extractedBuffer);
    fileSystem.writeFileSync('images/test-highlighted.png', highlightedBuffer);
});

The full stack trace:

C:...node_modulesjscanifysrcjscanify-node.js:155
    const img = cv.imread(image);
                   ^

TypeError: Cannot read properties of undefined (reading 'imread')
    at jscanify.extractPaper (C:...node_modulesjscanifysrcjscanify-node.js:155:20)
    at C:...main.js:8:38
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

I’m not quite familiar with this library. It appears that cv is undefined, which makes no sense to me. Any ideas on how to fix this?

<table width="1323">
  <tr>
    <td width="75" height="74">
      <p><strong>Exterior Color</strong></p>
      <p class="style49">&nbsp;</p>
    </td>
    <td width="526" bgcolor="#FFFFFF">
      <table
        width="322"
        border="1"
        align="left"
        bordercolor="#000000"
        bgcolor="#000000"
      >
        <tr>
          <td width="40">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Alfa Rosso.jpg"
              onmouseover="doButtons('2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Alfa Rosso.jpg')"
              title="Alfa Rosso"
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Colors/Alfa Rosso.png"
                onclick="document.getElementById('exteriorColor').value = 'Alfa Rosso';"
                alt="Alfa Rosso "
                width="40"
                height="40"
                border="0"
            /></a>
          </td>
          <td width="30">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Milano White.jpg"
              onmouseover="doButtons('2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Milano White.jpg')"
              title="Milano White"
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Colors/Milano White.png"
                onclick="document.getElementById('exteriorColor').value = 'Milano White';"
                alt="Milano White "
                width="40"
                height="40"
                border="0"
            /></a>
          </td>
          <td width="30">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Misano Blue Metallic.jpg"
              onmouseover="doButtons('2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Misano Blue Metallic.jpg')"
              title="Tempest blue"
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Colors/Misano Blue Metallic.png"
                onclick="document.getElementById('exteriorColor').value = 'Misano Blue Metallic';"
                alt="Misano Blue Metallic "
                width="40"
                height="40"
                border="0"
            /></a>
          </td>
          <td width="30">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Moonlight Grey.jpg"
              onmouseover="doButtons('2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Moonlight Grey.jpg')"
              title="Moonlight Grey"
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Colors/Moonlight Grey.png"
                onclick="document.getElementById('exteriorColor').value = 'Moonlight Grey';"
                alt="Moonlight Grey "
                width="40"
                height="40"
                border="0"
            /></a>
          </td>
          <td width="30">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Verde Fangio metallic.jpg"
              onmouseover="doButtons('2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Verde Fangio metallic.jpg')"
              title="Verde Fangio metallic"
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Colors/Verde Fangio metallic.png"
                onclick="document.getElementById('exteriorColor').value = 'Verde Fangio metallic';"
                alt="Verde Fangio metallic "
                width="40"
                height="40"
                border="0"
            /></a>
          </td>
          <td width="30">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Vulcano Black Metallic.jpg"
              onmouseover="doButtons('2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Vulcano Black Metallic.jpg')"
              title="Vulcano Black Metallic"
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Colors/Vulcano Black Metallic.png"
                onclick="document.getElementById('exteriorColor').value = 'Vulcano Black Metallic';"
                alt="Vulcano Black Metallic "
                width="40"
                height="40"
                border="0"
            /></a>
          </td>
        </tr>
      </table>
    </td>
    <td width="706" rowspan="2">
      <p>&nbsp;</p>
      <img
        src="2025/Alfa Romeo/Giulia 2025 AWD/Alfa Romeo Wheel type 1/Milano White.jpg"
        name="picture1"
        alt="DB9"
        width="698"
        height="456"
        border=""
        id="picture1"
      />
    </td>
  </tr>

  <tr>
    <td height="399">
      <p><strong>Interior Color</strong></p>
      <p class="style49">&nbsp;</p>
    </td>
    <td bgcolor="#FFFFFF">
      <table width="519" border="0" align="left" bordercolor="" bgcolor="">
        <tr>
          <td width="256">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Interior/Black interior  Black seats.png"
              onmouseover="doButtons ('2025/Alfa Romeo/Giulia 2025 AWD/Interior/Black interior  Black seats.png')"
              title=" Kestrel Tan "
              target="_parent"
              rel="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Interior/Black interior  Black seats.png"
                onclick="document.getElementById('interiorColor').value = 'Black Sport Leater Seats ';"
                alt="Black Sport Leather Seats"
                width="254"
                height="201"
                border="1"
            /></a>
          </td>
          <td width="253">
            <a
              href="2025/Alfa Romeo/Giulia 2025 AWD/Interior/Red Seats.png"
              onmouseover="doButtons ('2025/Alfa Romeo/Giulia 2025 AWD/Interior/Red Seats.png')"
              title=" Red Leather Sport Seats "
              target="_parent"
              ="rel"
              ="thumbnail"
              ><img
                src="2025/Alfa Romeo/Giulia 2025 AWD/Interior/Red Seats.png"
                onclick="document.getElementById('interiorColor').value = 'Red Leather Sport Seats ';"
                alt="Red Leather Sport Seats"
                width="254"
                height="201"
                border="1"
            /></a>
          </td>
        </tr>
      </table>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <table width="305" border="0" align="left">
        <tbody>
          <tr>
            <td width="102">
              <a
                href="2025/Alfa Romeo/Giulia 2025 AWD/Wheel Type/18x8-inch dark Turbine aluminum wheels.png"
                onmouseover="doButtons ('2025/Alfa Romeo/Giulia 2025 AWD/Wheel Type/18x8-inch dark Turbine aluminum wheels.png')"
                title=" 18x8-inch dark Turbine aluminum wheels "
                target="_top"
                rel="thumbnail"
                ><img
                  src="2025/Alfa Romeo/Giulia 2025 AWD/Wheel Type/18x8-inch dark Turbine aluminum wheels.png"
                  onclick="document.getElementById('Wheel').value = '18x8-inch dark Turbine aluminum wheels ';"
                  alt="18x8-inch dark Turbine aluminum wheels"
                  width="100"
                  height="100"
                  border="1"
              /></a>
            </td>
            <td width="87" style="text-align: center">Select Wheels</td>
            <td width="102">
              <a
                href="2025/Alfa Romeo/Giulia 2025 AWD/Wheel Type/19x8-inch 5-hole aluminum Sport wheels.png"
                onmouseover="doButtons ('2025/Alfa Romeo/Giulia 2025 AWD/Wheel Type/19x8-inch 5-hole aluminum Sport wheels.png')"
                title=" 19x8-inch 5-hole aluminum Sport wheels "
                target="_blank"
                rel="thumbnail"
                ><img
                  src="2025/Alfa Romeo/Giulia 2025 AWD/Wheel Type/19x8-inch 5-hole aluminum Sport wheels.png"
                  onclick="document.getElementById('Wheel').value = '19x8-inch 5-hole aluminum Sport wheels ';"
                  alt="19x8-inch 5-hole aluminum Sport wheels"
                  width="100"
                  height="100"
                  border="1"
              /></a>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

notice each item such as exterior, interior and wheel all setup for the same picture1.
I do have jquery-3.7.1 min

using the following scripts

function doButtons(picimage) {
  document['picture1'].src=picimage;

  onmouseover="doButtons

Things look and work great, but I would like to set each individual element such as interior, exterior and wheel in their own view picture (picture1) << reference picture2 picture3 and that does not work. So basicaly each item has their own view.

First time here on stackoverflow Sorry for Being a NOOB. I’ve done most of this code on my own back in the day, Just getting back into it.
Full URL https://acarquote.com/AlfaRomeo.html

When I run these 2 git statements, I see some output on the console:

Command 1 (to get number of lines added/deleted):

git -C "/path/to/my/repo" log --author="[email protected]" -i --since="2024-06-01" --until="2025-12-31" --pretty=tformat: --numstat | awk '{added += $1; deleted += $2} END {print added, deleted}'

Output:

374 0

Command 2 (to get number of commits):

git -C "/path/to/my/repo" shortlog -sne --author="[email protected]" -i --since="2024-06-01" --until="2025-12-31" | awk '{print $1}'

Output:

1

When I use nodejs to start a child process, execute the git command, and display the output on console, command 1 produces the expected output but command 2 produces a blank output.

With command 1:

const { execSync } = require('child_process');

const command = `git -C "/path/to/my/repo" log --author="[email protected]" -i --since="2024-06-01" --until="2025-12-31" --pretty=tformat: --numstat | awk '{added += $1; deleted += $2} END {print added, deleted}'`
const output = execSync(command, { encoding: 'utf-8' }).trim();
console.log(output);

Output:

374 0

With command 2:

const { execSync } = require('child_process');

const command = `git -C "/path/to/my/repo" shortlog -sne --author="[email protected]" -i --since="2024-06-01" --until="2025-12-31" | awk '{print $1}'`
const output = execSync(command, { encoding: 'utf-8' }).trim();
console.log(output);

Output:

<blank>

In my actual program, I need to process the output of the Git command back in Javascript. What am I doing wrong in case of nodejs with the second command?

I’m trying to make a slider in javascript with canvas. The moveSlider() function is called by ‘pointermove’ eventlistener, and it changes the X coordinate of a rectangle stored in ‘Slider’ object in 200 pixel range.

I want it to be done in 11 steps, and cant seems to figure out how.

Also for some reason, if I add value of ‘delta’ to Slider.x the slider moves the opposite direction of the mouse, why?

any help is appreciated.

var startPos = e.clientX

function moveSlider(e) {

    let x = ctx.canvas.width / 2
    let delta = startPos - e.clientX;
    startPos = e.clientX;

    Slider.x -= delta;
    Slider.x = Slider.x > x+100 ? x+100 : Slider.x;  
    Slider.x = Slider.x < x-100 ? x-100 : Slider.x; 
}

I am trying to deploy a Next JS app to AWS with OpenNext. One thing is that I am trying to use the new v.3 feature where you can have external middleware (https://opennext.js.org/aws/inner_workings/components/middleware). However, it seems that when the middleware Lambda Edge function is being created, OpenNext is adding a bunch of environemnt variables, even though lambda edge functions don’t allow that. This is the particular deploy error I am receiving:

Site sst:aws:Nextjs → SiteCdnDistribution aws:cloudfront:Distribution
sdk-v2/provider2.go:515: sdk.helper_schema: updating CloudFront Distribution (123): operation error CloudFront: UpdateDistribution, https response error StatusCode: 400, RequestID: 69b2ada4-1f61-4faf-96c1-4e04c714b4b7, InvalidLambdaFunctionAssociation: The function cannot have environment variables. Function: arn:aws:lambda:us-east-1:123:function:ashrae-research-test-SiteEdgeMiddlewareFunction-erhbndat:9: [email protected]

View more in the console: https://sst.dev/u/ede7c640

ELIFECYCLE  Command failed with exit code 1.

It doesn’t make sense to me why OpenNext would be creating this Lambda Edge external middleware function if this is an inherent limitation of Lambda Edge functions. Is there some way to prevent this?

Here is my open next config file:

const config = {
    default: {},
    middleware: {
        external: true,
    },

}

export default config;

I’m working on a React App where the user can enter a protocoll in an input. For now the user shall only enter ‘http’ or ‘https’.

So I did this:
type protocollType = 'http' | 'https'

How can I make sure that the string from an input matches that type?

Obviously I could use
if(inpuString === 'http' or inputString === 'https) { ... }
but that would mean changing mor code if I add options in the future.

I was trying to implement google recaptch v3 in my react app with a an express server, here’s my implementation:

React (Frontend) :

import { GoogleReCaptcha, GoogleReCaptchaProvider, useGoogleReCaptcha } from 'react-google-recaptcha-v3';

const RECAPTCHA_SITE_KEY: string = 'Ive_added_my_generated_key_here';

export default function SignIn() {
    const { executeRecaptcha } = useGoogleReCaptcha();
    const [captchaValue, setCaptchaValue] = React.useState<string | null>(null);
    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        if (!validateInputs()) return;
        if (!executeRecaptcha) {
            console.warn("reCAPTCHA not yet available");
            setError('Please complete the CAPTCHA.');
            return;
        }
        try {

            const captchaResponse = await axios.post('http://localhost:3001/api/v1/verify-captcha', {
                token: captchaValue,
            });

            if (!captchaResponse.data.success) {
                setError('Captcha verification failed. Please try again.');
                return;
            }

        } catch (err) {
            console.error('Error during login:', err);
            // Optionally display error feedback to the user
            dispatch(showAlert({ message: "Login failed. Please try again.", severity: "error" }));
        }
    };
    export default function SignIn() {
        <GoogleReCaptchaProvider reCaptchaKey={RECAPTCHA_SITE_KEY}>
            <GoogleReCaptcha
                onVerify={token => {
                    setCaptchaValue(token);
                }}
            />
        </GoogleReCaptchaProvider>
    }
}

The issues i am facing are:

1. Hitting multiple APIs.
2. When i looked at the APIs, it is v2 (referring to api end point -> google.com/recaptcha/api2/reload?k=my_generated_key) even though i have implemented v3.
   

In a video I saw creating a progress bar and updated its value using state and wrapped it inside setInterval for updating it every 15 millisecond and the whole being wrapped inside useEffect, with no dependency. As state change triggers a UI update, the component re-renders and state value changes, consoling the value should print from 3000 till 0 (or in short in descending order) but it only prints 3000 (200 times) why?

const [progressBar, setProgressBar] = useState(3000);

useEffect(() => {
  const progress = setInterval(() => {
    console.log(progressBar);
    setProgressBar((prevVal) => prevVal - 15);
  }, 15);

  return () => clearInterval(progress);
}, []);

If there is no dependency means the contents inside useEffect should be executed only once know? Kindly explain.

I have implemented a radar line chart using am5’s radar chart.

However, I am facing an issue.

I used templateField in the radarLineSeries to apply different property values such as color and line thickness for each line individually.

Because of this, even though I set connectEnds of the series to true, the start and end of the lines are not connected.

If there is a way to connect the start and end points of the line while using templateField, I would appreciate your guidance.

The version of the am5 library I am using is 5.10.11.

Below is the source code for configuring the radarChart.

var root = am5.Root.new(“chartdiv”);

        // Create chart
        // https://www.amcharts.com/docs/v5/charts/radar-chart/
        window.chart = root.container.children.push(am5radar.RadarChart.new(root, {
            panX: false,
            panY: false,
            wheelX: "panX",
            wheelY: "zoomX",
            layout: root.verticalLayout,
        }));


        // Create axes and their renderers
        // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
        var xRenderer = am5radar.AxisRendererCircular.new(root, {
        });
        xRenderer.labels.template.setAll({

        });

        window.xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
            maxDeviation: 0,
            categoryField: "category",
            renderer: xRenderer,
            tooltip: am5.Tooltip.new(root, {})
        }));

        window.yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
            renderer: am5radar.AxisRendererRadial.new(root, {
                innerRadius : am5.percent(40),
            })
        }));


        // Create series
        // https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
        window.series = chart.series.push(am5radar.RadarLineSeries.new(root, {
            name: "Series",
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "value",
            categoryXField: "category",
            tooltip: am5.Tooltip.new(root, {
                labelText: "{valueY}"
            }),
            connectEnds :true,
           
        }));


       
        series.strokes.template.set("templateField", "test001");
       
        series.strokes.template.set("strokeWidth", 5);

       
       
        data = [
            { category: "A", value: 50, test001: {stroke : am5.color('#ff0000')} },
            { category: "B", value: 70, test001: {stroke : am5.color('#0000ff')} },
            { category: "C", value: 60, test001: {} },
            { category: "D", value: 80, test001: {} },
            { category: "E", value: 80, test001: {} },
        ];
       
       
        series.data.setAll(data);
       
       
        xAxis.data.setAll(data);


        chart.appear(1000, 100);

I have a big objects with a lot of nested arrays and objects. What I am trying to do is adding a new key value pair to all nested objects (msn_data) if a matching id is found in another array of objects.
Here is the first object:

let firstData = {
    "layout":[
        {
            "name": "Structure",
            "hangars":[
                [
                    {
                        "Structure":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 458741,
                                                "structure": "S14/74",
                                                "production": "in"
                                            },
                                            "tags": "TDS",
                                            "visible": true
                                        },
                                        {
                                            "msn_data": {
                                                "id": 14587,
                                                "structure": "S11/22",
                                                "production": "in"
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ],
            "buffer":[
                [
                    {
                        "Midbuffer":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 489764,
                                                "structure": "S10/04",
                                                "production": "in"
                                            },
                                            "tags": "QL",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 98745,
                                                "structure": "S11/22",
                                                "production": "in"
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ],
        },
        {
            "name": "Equipment",
            "hangars":[
                [
                    {
                        "Equipment":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 3265456,
                                                "structure": "S14/74",
                                                "production": "in"
                                            },
                                            "tags": "TDS",
                                            "visible": true
                                        },
                                        {
                                            "msn_data": {
                                                "id": 987521,
                                                "structure": "S11/22",
                                                "production": "in"
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 8524587,
                                                "structure": "S11/22",
                                                "production": "in",
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 36985471,
                                                "structure": "S11/22",
                                                "production": "in",
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ],
            "buffer":[
                [
                    {
                        "Midbuffer":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 489764,
                                                "structure": "S10/04",
                                                "production": "in"
                                            },
                                            "tags": "QL",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 484630,
                                                "structure": "S11/22",
                                                "production": "in"
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ]
        }
    ]
}

and here is the array of objects which I try to check for matching ids:

let secondData = [
    {
      "id": 458741,
      "rowId": ":!!#9~d5f71e4a",
      "matchData": true
    },
    {
        "id": 489764,
        "rowId": ":!!#9~d5f71e4a",
        "matchData": true
    },
    {
        "id": 7453215,
        "rowId": ":!!#9~d5f71e4a",
        "matchData": false
    },
    {
        "id": 484630,
        "rowId": ":!!#9~d5f71e4a",
        "matchData": true
    },
  ]

and this is what I am trying to achieve as soon as a matching id was found (add "owd": true if id matches, and "owd": false to all objects without matching id):

let firstData = {
    "layout":[
        {
            "name": "Structure",
            "hangars":[
                [
                    {
                        "Structure":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 458741,
                                                "structure": "S14/74",
                                                "production": "in",
                                                "owd": true
                                            },
                                            "tags": "TDS",
                                            "visible": true
                                        },
                                        {
                                            "msn_data": {
                                                "id": 14587,
                                                "structure": "S11/22",
                                                "production": "in",
                                                "owd": false
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ],
            "buffer":[
                [
                    {
                        "Midbuffer":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 489764,
                                                "structure": "S10/04",
                                                "production": "in",
                                                "owd": true
                                            },
                                            "tags": "QL",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 98745,
                                                "structure": "S11/22",
                                                "production": "in",
                                                "owd": false
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ],
        },
        {
            "name": "Equipment",
            "hangars":[
                [
                    {
                        "Equipment":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 3265456,
                                                "structure": "S14/74",
                                                "production": "in",
                                                "owd": false
                                            },
                                            "tags": "TDS",
                                            "visible": true
                                        },
                                        {
                                            "msn_data": {
                                                "id": 987521,
                                                "structure": "S11/22",
                                                "production": "in",
                                                "owd": false
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 8524587,
                                                "structure": "S11/22",
                                                "production": "in",
                                                "owd": false
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 36985471,
                                                "structure": "S11/22",
                                                "production": "in",
                                                "owd": false
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ],
            "buffer":[
                [
                    {
                        "Midbuffer":{
                            "type": "dynamic",
                            "milestones": [],
                            "timeframe": "startDate",
                            "preFilter":{},
                            "stationData":{
                                "NONE":[
                                    [
                                        {
                                            "msn_data": {
                                                "id": 489764,
                                                "structure": "S10/04",
                                                "production": "in",
                                                "owd": true
                                            },
                                            "tags": "QL",
                                            "visible": false
                                        },
                                        {
                                            "msn_data": {
                                                "id": 484630,
                                                "structure": "S11/22",
                                                "production": "in",
                                                "owd": true
                                            },
                                            "tags": "TDS",
                                            "visible": false
                                        },
                                    ]
                                ]
                            }
                        }
                    }
                ]
            ]
        }
    ]
}

I’m trying to convert an HTML element which contains the ▶ character (U+25B6), but in the PDF output it’s represented it as %¶.

I read that embedding fonts in to jsPDF will solve it, but maybe it is too complex for me or maybe I didn’t understand correctly.

How can I achieve this? No matter what I’ve tried I could not figure out how to display it correctly.

The code it self is rather straight forwards. Any help will be greatly appreciated.

const {
  jsPDF
} = window.jspdf;

let darkModeFlag = true;
async function getOutputDivClone() {
  return document.getElementById("output").cloneNode(true)
}
async function exportPDF() {
  const outputDiv = await getOutputDivClone();
  const wrapBoth = document.createElement('div');
  wrapBoth.style.backgroundColor = darkModeFlag ? '#1E1E1E' : '#FFFFFF';
  outputDiv.style.backgroundColor = darkModeFlag ? '#1E1E1E' : '#FFFFFF';
  wrapBoth.appendChild(outputDiv);
  document.body.appendChild(wrapBoth);

  const contentWidth = wrapBoth.offsetWidth;
  const contentHeight = wrapBoth.offsetHeight;
  let doc = new jsPDF({
    orientation: contentWidth > contentHeight ? 'l' : 'p',
    unit: 'px',
    format: [contentWidth, contentHeight]
  });
  await new Promise(resolve => {
    doc.html(wrapBoth, {
      callback: resolve,
      x: 0,
      y: 0,
      margin: [0, 0, 0, 0],
      html2canvas: {
        scale: 1,
        logging: false,
        allowTaint: false,
        useCORS: true
      }
    });
  });
  wrapBoth.remove();
  if (doc.internal.getNumberOfPages() > 1) {
    for (let i = doc.internal.getNumberOfPages(); i > 1; i--) {
      doc.deletePage(i);
    }
  }
  doc.save(`test.pdf`);
}


document.addEventListener('DOMContentLoaded', async () => {
  await exportPDF()
  alert("done")
})

objinsp-summary {
            cursor: pointer;
            color: #d4d4d4;
        }

        summary {
            list-style: none;
            -webkit-appearance: none;
            appearance: none;
        }

        summary::-webkit-details-marker {
            display: none;
        }

        summary::marker {
            display: none;
        }

        details>summary::before {
            content: "▶";
            display: inline-block;
            margin-right: 5px;
            transition: transform 0.2s;
        }

        details[open]>summary::before {
            transform: rotate(90deg);
        }

<div id="output" tabindex="0">
    <div class="outputContent dark-log" style="margin-left: 4px;">
      <div class="flexContainer">
        <div class="dontAllowSelect symbolDiv">[&gt;]</div>
        <div class="outputItem">
          <details data-loaded="true" open="" style="margin-right: 15px;">
            <summary class="objinsp objinsp-summary"><span class="objinsp objinsp-highlight-type">{}</span>
            </summary>
            <div class="objinsp-node">
              <details data-loaded="true" open="">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">log: ƒ log()</span></summary>
                <div class="objinsp-node">
                  <div>
                    <div class="objinsp"><span class="objinsp-highlight-key"> length: </span><span
                                                class="objinsp objinsp-highlight-number">0</span></div>
                  </div>
                  <div>
                    <div class="objinsp"><span class="objinsp-highlight-key"> name: </span><span
                                                class="objinsp objinsp-highlight-string">"log"</span></div>
                  </div>
                  <details data-loaded="false">
                    <summary class="objinsp objinsp-summary"><span
                                                class="objinsp objinsp-highlight-type">[[Prototype]]: ƒ
                                                anonymous()</span></summary>
                  </details>
                </div>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">error: ƒ error()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">warn: ƒ warn()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">info: ƒ info()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">debug: ƒ debug()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">clear: ƒ clear()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">table: ƒ table()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">count: ƒ count()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">countReset: ƒ countReset()</span>
                </summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">assert: ƒ assert()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">dir: ƒ dir()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">dirxml: ƒ dirxml()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">timeStamp: ƒ timeStamp()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">trace: ƒ trace()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">group: ƒ group()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">groupCollapsed: ƒ groupCollapsed()</span>
                </summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">groupEnd: ƒ groupEnd()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">profile: ƒ profile()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">profileEnd: ƒ profileEnd()</span>
                </summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">time: ƒ time()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">timeEnd: ƒ timeEnd()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">timeLog: ƒ timeLog()</span></summary>
              </details>
              <details data-loaded="false">
                <summary class="objinsp objinsp-summary"><span
                                        class="objinsp objinsp-highlight-type">[[Prototype]]: Object</span></summary>
              </details>
            </div>
          </details>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

For some odd reason here html2canvas gives a CORS error

I have an assignment I’m a bit puzzled on after attempting multiple methods of troubleshooting and asking a friend for help. I don’t receive any guidance or help from my Professor so it’s very much self-teaching methodology.

My instructions are to have the counter increase by 3 and for it to print to my paragraph with the id “counter”.

I attempted a few different ways of doing this, though both my friend and I ran into a dead end. I can tell that the newText variable is causing the rest to be ignored since it’s originally defined as “5”, but I’m unsure how to resolve this.

Please offer some guidance if you’re going to provide links. Providing links and self-teaching is the method my Professor uses which obviously has not helped me successfully troubleshoot this issue in spite of spending several days with it.

//Create a variable called “count” that is equal to the number 5.//
var count = 5;
/*Create a while loop that checks if “count” is less than 20 and then writes to the HTML the number in the paragraph with the id “counter”.
Have each iteration of the loop increase “count” by 3.*/
let paragraph = document.getElementById("counter");
let newText = count;
    paragraph.innerHTML = newText;

function addParagraph(){
  while(count < 20){
    count += 3;
    document.querySelector("p").innerHTML = newText;
    write(count);
  }

  addParagraph();

}

I rewrote the script at least 10 different ways with no success. I am wondering how to merge the While Loop with the function so it appropriately writes to the selected paragraph HTML, increasing from 5 in increments of 3 while it is less than 20.

The While Loop needs to

write to the HTML 

My first parsing was written with document.write() which allowed the counter to work the way its intended, but was not writing to the appropriate paragraph since I had not specified.

It is appropriately writing to the selected paragraph but it is only writing the var count = 5 and ignoring the rest. How can I write this properly so that it does count in increments of 3 while less than 20 while writing to the selected HTML element?

I’m running the following handler to process request to a custom post type’s contents

add_action('wp_ajax_uipp_get_button_content', 'uipp_get_button_content');
add_action('wp_ajax_nopriv_uipp_get_button_content', 'uipp_get_button_content');

function uipp_get_button_content() {
    if (!isset($_POST['button_id']) || !is_numeric($_POST['button_id'])) {
        wp_send_json_error(['message' => 'Invalid button ID.']);
    }

    $button_id = intval($_POST['button_id']);
    $button_content = apply_filters('the_content', get_post_field('post_content', $button_id));

    if (!$button_content) {
        wp_send_json_error(['message' => 'Content not found.']);
    }

    wp_send_json_success(['content' => $button_content]);
}

And then attempting to print the resulting content on a page with:

fetch(ajax_object.ajax_url, {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
        action: "uipp_get_button_content",
        button_id: button_id,
    }),
})
.then(response => response.json())
.then(data => {
    if (data.success) {
        revealContainer.innerHTML = data.content;
        console.log(data.content);
    } else {
        revealContainer.innerHTML = `<p>Error: ${data.message}</p>`;
    }
})
.catch(error => {
    revealContainer.innerHTML = "<p>Failed to load content.</p>";
});

Inspecting in the console (Network > Fetch/XHR), fetching was a success, I can see the content there. But on the frontend, it always prints “undefined”.
enter image description here

Nothing in the console in the way of errors – error_log and debug_log are both empty!

Where could I be going wrong?

In the handler, I even tried replacing the sent data with just a simple “Hello”, thinking that there might be special characters from the post content’s HTML, styles, scripts, that could be interfering or causing malformed code.

Replaced:
wp_send_json_success(['content' => $button_content]);
with:
wp_send_json_success(['content' => "Hello"]);

Same issue, still undefined.

let percentage = 30;
var callcount = 0;

function updatePercentage() {
  if (percentage > 102) {
    setTimeout(() => {
      percentage = 30;
    }, 500);
  } else {
    const fillers = document.querySelectorAll(".splash-screen-mask-filler");
    for (const filler of fillers) {
      filler.setAttribute("x", (percentage * 1000) / 100 - 1000);
      filler.setAttribute("width", (percentage * 1000) / 100);
    }
    if (callcount < 5) {
      callcount++;
      requestAnimationFrame(updatePercentage);
    }
  }
}

requestAnimationFrame(updatePercentage);

I want the function to be called 5 times. I added a countdown but somehow it did not work and the animation does not run at all.

I’m working on a React project where I am fetching blog posts from an API and displaying them in cards. I want to allow users to click on a blog card to view a detailed post. However, I am encountering issues with the filtering mechanism and the way the selected post is displayed.

Here is a simplified version of the code:

"use client";
import { useState, useEffect, useReducer, useContext } from "react";
import BlogCard from "./blogCard";
import BlogPost from "./blogPost";
import Menu from "./menu";
import moment from "moment";

// mohol by som urobiť druhy bod rozklik na članok čo je v notion.
// alebo pridať obrazky ak by to nešlo 

const app = () => {


    const [BlogData, setBlogData] = useState([]);
    const [postFilter, setPostFilter] = useState(null);
    const [selectedBlog, setSelectedBlog] = useState([]);

    BlogData.sort((a, b) => {
        if (a.created_at > b.created_at) {
            return 1;
        } else if (a.created_at < b.created_at) {
            return -1;
        }
        return 0;
    })

    useEffect(() => {
        fetch("https://jsonfakery.com/blogs")
            .then(response => response.json())
            .then(data => {
                const convertedData = data.map((item) => ({
                    ...item,
                    created_at: moment(item.created_at, "-----MM-DD-YYYY"),
                }))
                setBlogData(convertedData)
                const filterdata = data.find((user) =>
                    user.id === selectedBlog.id)
                setPostFilter(filterdata)
            })
            .catch(error => {

                console.error('Error fetching data:', error);
            });
    }, []);

    return (
        <div>
            <Menu />
            {BlogData.map((blog) => (
                <div key={blog.id}>
                    <BlogCard blog={blog} selectedBlog={postFilter} />
                </div>
            ))}
            {postFilter ? <BlogPost blog={selectedBlog} /> : null}
        </div>
    )
}



export default app