Category: javascript

I was trying to make a recording app and I just wanted it to trim the silence at the start and at the end of the recording. Is there any library to detect the silence and then trim it? I am using react-audio-recorder to record the audio. and using Waveform js to visualize it.

I am trying to create a page that lets me auto complete a document for use elsewhere.

I have multiple input boxes and eventually multiple drop down boxes that each represent a variable inside the large body of text. After selecting, or sticking with the default selected, the text can be copied out to another location for use.

Right now I have this and it somewhat works for text boxes but has a lot of issues:

Below is what I currently use and can easily enough expand it out to multiple input boxes however if I click anywhere inside the textarea or try to rechange the text after making the initial change of any of the input boxes it no longer works because the variable is missing.

<script>
function tst(elm){
    var trgt=document.getElementsByTagName('textarea')[0];
    trgt.value=trgt.value.replace(elm.getAttribute('name'), elm.value);
}
</script>
<form action="" method="POST">
  <input type="text" name="firstname" onblur="tst(this);" />
    <input type="text" name="whoisthis" onblur="tst(this);" />
    <input type="text" name="positionwithin" onblur="tst(this);" />
    <textarea style="width:500px; height: 100px;" name="result">Hello, firstname

 I am writing to inform you that whoisthisis no longer available for the position of positionwithin. They finished 4th.</textarea>
</form>

What I am trying to accomplish, and failing at so far, is being able to manipulate the fields, if needed multiple times for it to show the changes and to add the ability to use drop down boxes such as 4th being changable to 1st, 2nd or whatever other number or text is needed.

I’m currently receiving a request to my Nginx server at domain1.com/test?param1=123&param2=abc&param3=xyz. I need to take the three parameters, execute a separate HTTP call using those parameters (domain2.com/test?param1=123&param2=abc), which returns an object ‘abc123’.

Then based on the response from the call, 302 redirect to domain2.com/endpoint?paramFromCall=abc123&param3=xyz.

Is this possible in Nginx? If not, how should I do this? I’m newer to web dev just trying to get some backend things setup for testing purposes.

I currently have this working by having an index at domain1.com/test that executes this via JS, but it just sets the href. I’d like to 302 instead and not load an index if possible.

I have a .dzi image rendered in Openseadragon, I’ve added annotations on top of it using GeoJs.
When the viewer reach to max zoom the annotations doesn’t stay in its place and move.
I need to have the annotations completely fixed as if they’re part of the image.

const osd = OpenSeadragon({
      id: "osd",
      prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
      tileSources: [
        "part.dzi",
      ],
      showNavigator: true,
      navigatorPosition: "BOTTOM_RIGHT",
      animationTime: 0,
    });

let layer = map.createLayer("annotation", {
      showLabels: false,
    });



function draw(evt: any) {
      $("#geojs .geojs-layer").css("pointer-events", "auto");
      const type = $(evt.target).data("type");
      layer.mode(type, undefined, { scaleOnZoom: true });
    }
    $(".controls-container button").on("click", draw);

The result is something like this: giggly annotations that change their positions.

Is there any solution based on GeoJs & Openseadragon or any other libraries that could replace them and provide multiple annotations shapes.

Demo link: https://ezgif.com/optimize/ezgif-1-638dd74716.gif

I am using this code I would like to change it a bit so that it is smarter so for example if I search for .an.d I want all the words that have a “a” at the second postion and a “n” at the third potions and again any characther at the fourh postion and a “d” at the fifth postion how can I modify the code to get the desired result thank you very much.

I have a group of panels that I would like to expand individually when clicked upon, but also if the user clicks on Expand + the text should change to Collapse and all panels should expand. Currently, this only works on the second click. I have also tried using “toggle”.
Expected functionality:
Click on Expand + the the text changes to Collapse – and all panels regardless if they are currently being shown should collapse
Click on Collapse – and all panels regardless if they are currently being shown should display.

function travelAccordion() {

  var x = document.getElementById("travelClick");
  if (x.innerHTML === "Expand All +") {
    x.innerHTML = "Collapse All -";
    $('#travel-accordion .collapse').collapse('show');
  } else {
    x.innerHTML = "Expand All +";
    $('#travel-accordion .collapse').collapse('hide');
  }
}

.panel-title:hover,
#travelClick {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p class="text-right" id="travelClick" onclick="travelAccordion()"> Expand All +</p>
<div class="panel-group" id="travel-accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a aria-expanded="false" class="collapsed" data-parent="#travel-accordion" data-toggle="collapse" href="#collapse1">
        <h4 class="panel-title">Group 1</h4>
      </a>
    </div>
    <div class="panel-collapse collapse" id="collapse1" style="">
      <div class="panel-body">
        Group 1 Text
      </div>
    </div>
    <div class="panel-heading">
      <a aria-expanded="false" class="collapsed" data-parent="#travel-accordion" data-toggle="collapse" href="#collapse2">
        <h4 class="panel-title">Group 2</h4>
      </a>
    </div>
    <div class="panel-collapse collapse" id="collapse2" style="">
      <div class="panel-body">
        Group 2 Text
      </div>
    </div>
  </div>
</div>

I am working in creating a list of cards that get their info from a Backend component, the problems comes when im returning an url variable inside the objects, but when trying to use it appears null.
This would be my code:
Backend The problem is in url var.

export async function getAllIDs(){
  const q = query(collection(db, "Books"));
  const querySnapshot = await getDocs(q);
  let array= [];
  let it=0;
  querySnapshot.forEach((doc) => {
    var data = {};
    //console.log(doc.data().Image);
    getDownloadURL(ref(storageRef, doc.data().Image))
    .then((url) => {
    // Or inserted into an <img> element
      data.url=url;
      
  })
  .catch((error) => {
    // Handle any errors
  }); 
    

    data.id=doc.id;
    data.Title=doc.data().Title;
    data.Summary=doc.data().Summary;
    array[it]=data;
    it++;
    //console.log(data);
    
  });
  //console.log(array);
  return array;

}```

List data

render() {
    let data = [];
    data = this.state.data;
    console.log(data);
    return (
      <Box sx={{ justifyContent: "center" }}>
        <Button onClick={() => this.handleScroll("left")}>Left</Button>
        <Box
          ref={this.scrollContainerRef}
          style={{
            //flexWrap: "wrap",
            justifyContent: "space-around",
            overflow: "hidden",
            width: "70%",
            overflowX: "scroll",
            flexGrow: 1,
          }}
        >
          <Grid container spacing={3} style={{ flexWrap: "nowrap" }}>
            {data.map((data, index) => {
              const { pp, url, Title, Summary } = data;
              console.log(pp);
              return (
                <Grid item>
                  <Card sx={{ width: 300 }}>
                    <CardMedia
                      sx={{ height: 140 }}
                      component="img"
                      image={url}
                      title="green iguana"
                    />
                    <CardContent>
                      <Typography gutterBottom variant="h5" component="div">
                        {Title}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {Summary}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              );
            })}
          </Grid>
        </Box>
        <Button onClick={() => this.handleScroll("right")}>Right</Button>
      </Box>
    );
  }

I have coded some logs to try to understand the array,
The first array written is from the start of the render(this array of objects is correct because each object has a url variable)
The second part of the image is the logs of each object on the moment i am using them(as you can see the url is not connected)
[enter image description here](https://i.stack.imgur.com/qksrP.png)

I think the problems could come from the moment each object is created and depends if i added that var to the obejct inside the “getdownloadURL”
I tried adding: `data.try=”working”; `inside and outside the `getdownloadURL` function and it only works when adding outside.

I dont know how to solve this error, it seems that it could be how the objects are created but they are returned correctly, the objects change when trying to use it in the obj.map

Is there any reliable way to detect when an element becomes invisible from the users point of view? So it should not only check stuff like display:none or visibility:hidden but also e.g. detect when another element with higher z-index is placed on top of the element.

(I don’t think so but I’m asking anyway, in case I’m wrong.)

Implement the function deleteArrayElements() that reads N elements from the array starting from the given start index i and deletes every x-th element within this sub-array. The parameter startIndex can be greater than the length of the array. Implement a continuous addressing by looping through the array from the beginning again. The parameter everyIth can also be greater than the length of the array. However, at least one element, namely the 0-th element of the sub-array, should always be deleted. Return both the array without the deleted elements and the deleted elements

function deleteArrayElements(number, startIndex, everyIth) {
  let array = [];  
  let result = [];
  let removedItems = [];


  if (startIndex > array.length) {
    startIndex = startIndex % array.length;
  }

  for (let i = startIndex; i < startIndex + number; i += everyIth) {
    let indexToRemove = i % array.length;
    removedItems.push(array[indexToRemove]);
    array.splice(indexToRemove, 1);
  }

  result = array;
  return { newResult: result, removedItems: removedItems };
}

the expected output is
{“newResult”:[null, “katze”, null, “elefant”, null, “stachelschwein”, “affe”, “giraffe”], “removedItems”:[“hund”, “maus”, “schlange”]};
but the output I get is:
{“newResult”:[“hund”, “katze”, “maus”, “elefant”, “schlange”, “stachelschwein”, “affe”, “giraffe”], “removedItems”:[“hund”, “elefant”, “affe”]}

phrase

i want to create this css in react native avec au mot en green et je veux le mot confidentialités sera dans une autre ligne centree et le mot et sera juste une texte aussi et En vous connectant, vous acceptez nos une text aussi

I have an SVG with thousands of paths in this format:

<path id="c02130" d="m256.29 573.18-0.78515 1.1758h1.1777v-0.78516zm0.39258-1...
  <title>Ketchikan Gateway, AK</title>
</path>

I need to call a Javascript function whenever a mouse event occurs for the path. Currently, I do this on click and it works well:

<path id="c02130" onclick="on('c021830')"  d="m256.29 573.18-0.78515 1.1758h1.1777v-...
  <title>Ketchikan Gateway, AK</title>
</path>

The on() function fetches text from the server using AJAX and writes it to a <div> area.

I’m wondering if there’s a better way that doesn’t require adding an onclick to each path, given that all paths will be treated the same way – passing their id to a Javascript function.

I am trying to make a system auto timeouting people who talks bad I did word array everything everything looks good but the timeout function is a problem

client.on("messageDelete", (messageDelete) => {
client.channels.fetch('1178750152991838209')
.then(channel=> channel.send(`The message : "${messageDelete.content}" by ${messageDelete.author} was deleted. Their ID is ${messageDelete.author.id}. And they are muted for 5 minutes if this is repeated 5 times more ban him!`))
const member = messageDelete.author.id
member.timeout(60 * 5 * 1000)

});

voiceState.channel and channelId returns null on discord.js v14

How can i get the voice channel, why they are all null?

Newbie to front-end world here. I am getting null when i tried to call document.getElementById from external typescript file. Below is my impelmentation –

some-file.ts

validateToggle() {

    var input = document.getElementById("togBtn") as HTMLInputElement;
    console.log('----->', input)  //this is returning null

    if (input != null) {
      if (input.value.includes("ON")) {
        this.isToggled = "ON";
      } else {
        this.isToggled = "OFF";
      }
    }
  }

Below is HTML file

<div class="toggle-button">

    <body>
      <label class="showLabel" for="show">Toggle on or off :</label>
      <label class="toggle">
        <input class="toggle-input" id="togBtn" type="checkbox" (click)="validateToggle()" />
        <span class="toggle-label" data-off="OFF" data-on="ON"></span>
        <span class="toggle-handle"></span>
      </label>
      <script src="some-file.ts"></script>
    </body>
  </div>
</div>

I’m working on an application where I use ThreeJS. Here I am obtaining a 3D model with spheres, as seen in the figure. My goal is to turn the spheres within this area red by using a select area. However, when doing this, spheres elsewhere, not the areas within the area, are turned red.

This is how to create spheres:

    lines.forEach(line => {
        const values = line.split('t'); // tab separated
        if (values.length === 8) {
            const x = parseFloat(values[0]);
            const y = parseFloat(values[1]);
            const z = parseFloat(values[2]);
            const designvar = values[4];
            const sphere = new THREE.Mesh(geometry, defaultMaterial.clone());   
            scene.add(sphere); 
            sphere.designvar = designvar;  // id
       
            spheres.push(sphere);     

        }
        
    }); 

And this is how to create select area and colored spheres:

const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    var selectedMeshes = [];
    var selectionBox = document.getElementById("sel_box");
    let isOrbitControlEnabled = true;
    document.getElementById('forceareaadd').addEventListener('click', onPickAreaClick, false);
    var mouseDownCoords = { x: 0, y: 0 };
    var mouseUpCoords = { x: 0, y: 0 };
        
    function onPickAreaClick() {
        isOrbitControlEnabled = !isOrbitControlEnabled;
        controls.enabled = isOrbitControlEnabled;
        if (!isOrbitControlEnabled) {
        
        }
    }

    function getCursorPosition(e)
    {
    e = e || window.event;
    if (e)
        {
        if (e.pageX || e.pageX == 0) return [e.pageX,e.pageY];
        var dE = document.documentElement || {};
        var dB = document.body || {};
        if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0),e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
        }
    return null;
    }

function mousedown(e)
    {
        if (!isOrbitControlEnabled) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("sel_box");
    mouseDownCoords.x = mxy[0];
    mouseDownCoords.y = mxy[1];
    box.orig_x = mxy[0];
    box.orig_y = mxy[1];
    box.style.left = mxy[0]+"px";
    box.style.top = mxy[1]+"px";
    box.style.display = "block";
    document.onmousemove = mousemove;
    document.onmouseup = mouseup;
    console.log("down x y: "+ mouseDownCoords.x + " " + mouseDownCoords.y);
    }
}

function mousemove(e)
    {
        if (!isOrbitControlEnabled) {
    var mxy = getCursorPosition(e);
    var box = document.getElementById("sel_box");
    if(mxy[0]-box.orig_x<0){
  box.style.left = mxy[0]+"px";
    
    }
    if(mxy[1]-box.orig_y<0){
      box.style.top = mxy[1]+"px";
    }
    box.style.width = Math.abs(mxy[0]-box.orig_x)+"px";
    box.style.height = Math.abs(mxy[1]-box.orig_y)+"px";
    }
}

function mouseup(e) {
    if (!isOrbitControlEnabled) {
        var box = document.getElementById("sel_box");
        var mxy = getCursorPosition(e);
        box.style.display = "none";
        box.style.width = "0";
        box.style.height = "0";
        document.onmousemove = function () {};
        document.onmouseup = function () {};

        mouseUpCoords.x = mxy[0];
        mouseUpCoords.y = mxy[1];
        console.log("up x y: " + mouseUpCoords.x + " " + mouseUpCoords.y);

        // Get the relative position of the design-part container
        var selBoxRect = box.getBoundingClientRect();
        var designContainerRect = document.getElementById("scene-container1").getBoundingClientRect();

        var designPartX = designContainerRect.left - selBoxRect.left;
        var designPartY = designContainerRect.top - selBoxRect.top;

        // Iterate through spheres and check if they are within the selection box
        spheres.forEach((sphere) => {
            const spherePosition = sphere.position.clone();
            const screenPosition = spherePosition.clone().project(camera);

            // Convert screen position to DOM coordinates
            const domX = (screenPosition.x + 1) / 2 * window.innerWidth + designPartX;
            const domY = (-screenPosition.y + 1) / 2 * window.innerHeight + designPartY;

            // Check if the sphere is within the selection box
            if (
                domX >= Math.min(mouseDownCoords.x, mouseUpCoords.x) &&
                domX <= Math.max(mouseDownCoords.x, mouseUpCoords.x) &&
                domY >= Math.min(mouseDownCoords.y, mouseUpCoords.y) &&
                domY <= Math.max(mouseDownCoords.y, mouseUpCoords.y)
            ) {
                console.log("sphere x y: " + domX + " " + domY);
                sphere.material.color.set(0xff0000); // Set to red color
                selectedMeshes.push(sphere);
            }
        });
    }
}



document.onmousedown = mousedown; 

Also HTML here (simplified version):

<body>
    <div class="main-part" id="main-part">
      <div class="design-part" id="scene-container1">
      </div>
   </div>
   <div id="sel_box"></div>
</body>

How can I turn only the spheres within the select area red?