Blancer.com Tutorials and projects

I’m working on a project which should create a dynamic mask of the object(s) of focus (or mimic one). So far, I have the functionality to get the data of coordinates of pixels corresponding to that object from the Lucas-Kanade method. Basically, I have a two-color video, one color the dynamic “mask” of the object and the other of the background. Likewise, I have this data as a binary matrix.

Does anyone know the method to create an alpha matte in premiere script like you can do in AE. I’ve given up on an actual mask as I don’t know of any file types which can support transparency. If it’s not possible, perhaps there is a better method to mimic a mask; that’d be even better.

I’ve checked the guide and dug through what I could of the sample (A lot is a lot to follow honestly, I’m still new to adobe scripting), and I’m at somewhat of an impasse. Any suggestions are appreciated, thank you

I have a grid of v-autocomplete components which have a multiple attribute added. However, to try and keep the formating clean I shorten the length of whats shown by using the selection slot as shown:

          <v-autocomplete
        v-model="programModel"
        multiple
        density="compact"
        variant="outlined"
        hide-details
        color="primary"
        flat
        rounded
        label="Programs"
        :items="programData"
        item-title="program_name"
        return-object
        :rules="arrayRequiredRule"
        :readonly="!editableTopSectionModel"
      >
      <template v-slot:selection="{ item, index }">
        <span v-if="!index">{{ item.title }}</span>
        <span class="grey--text caption" v-else-if="index === 1">
          &nbsp;(+ {{programModel!.length - 1}} others)
        </span>
      </template>
    </v-autocomplete>

However, my form there is a button that will activate whether the v-autocompletes are editable or not by toggling readonly. The issue is if it is readonly true then a user cannot click the dropdown to see the potential options. Its unclear how to get around this to make this functional.

a javascript function like this:

async function getData(){
    //do something and return a string
}

my_module.set_js_func(getData);

my c++ emscripten code like this:

//bind c++ function
EMSCRIPTEN_BINDINGS(my_module) {
function("setJSFunction", &set_js_func);
//...

emscripten::val func2;

void set_js_func(emscripten::val func)
{
    func2 = func;

    //call function directly here or inside a timer loop
    func2();
}

my question is:

i wanna to call getData ( in c++ ) like this:

await getData();

but i only know call it like this in above example code:

func2();

anyone can help me to give some advice ?

i am using emscripten 1.38.31

I am studying pure nodejs, no express, no fastify and other frameworks that’s why I don’t need npm mutler and file-upload.

I am sending 2-3 mp3 files and two txt files from a client side to a nodejs server. I successfully get them as a buffer. Then I need to take them from the buffer and put them in variables. But I don’t know how to do it.

I tried using some buffer methods but they didn’t help me with a buffer of different types of files, so I failed to get variables from it.

What I learned is how to save data from the buffer into a file.

           r.on("data", chunk =>{                 
                body.push(chunk)  
                
           });
            r.on("end", ()=>{  
                let data = Buffer.concat(body);
                writeableStream.write(data);
           })  

This code can save only one file.
But I need to get files as variables before saving them onto disk. Could you possibly give some ideas how get variables from a buffer with different files

I have built a simple form that I put into a sidebar via a shortcode. I needed to do this because our tags are “key:value” pairs, so I need my filter to explode the pairs and group the values by the keys in an accordion-style menu. I then need to reassemble the tag for the submit.

The code for that is below (I have not included the css and js for the accordion functionality – it works, so hopefully it’s not needed here). This code works IF I only want to filter by a single product_tag. However, I am trying to change it to work for selecting multiple product_tags.

This code submits the query as an argument in the url (i.e. “shop?product_tag=Tag”). I had thought to simply look at the query_vars and pre-check the product_tag that is already checked. Then, when I check a second tag, two product_tag arguments would be sent via the url. However, that doesn’t work because only the last product_tag url gets picked up by query_vars. So, if I use “shop?product_tag=Tag1&product_tag=Tag2” in the url, only Tag2 appears in the query_vars until product_tag.

So there must be another way to modify the query_vars from my form so I can select multiple checkboxes. But I can’t figure out how. Anyone here know the magic hook/javascript for my “onchange”?

function my_custom_tag_filter()
{
    global $wp_query;

    $return = '';

    $query_vars = $wp_query->query_vars;

    $tags = get_terms('product_tag');
    $tagsbycategory = array();
    if (!empty($tags) && !is_wp_error($tags)) {
        foreach ($tags as $tag) {
            $tagcategorypair = explode(":", $tag->name);
            if (count($tagcategorypair) != 2) continue;
            if (!array_key_exists($tagcategorypair[0], $tagsbycategory)) {
                $tagsbycategory[$tagcategorypair[0]] = array();
            }
            $tagsbycategory[$tagcategorypair[0]][] = $tagcategorypair[1];
        }
    }

    $return .= '
        <form id="myfilter">
    ';

    $keys = array_keys($tagsbycategory);
    foreach ($keys as $key) {
        $return .= '
            <button type="button" class="collapsiblefilter">' . $key . '</button>
            <div class="filtercontent">
        ';

        $values = $tagsbycategory[$key];
        foreach ($values as $value) {
            $argvalue = str_replace(' ', '-', $value);
            $friendlyvalue = str_replace('/','',str_replace(' ', '', $value));
            $id = $key . '-' . $friendlyvalue . '-check';

            $return .= '
                    <div class="filtercheckdiv">
                        <label for="' . $id . '"><input class="ajax-checkbox" type="checkbox" value="' . $key . ':' . $argvalue . '" id="' . $id . '" name="product_tag" onChange="this.form.submit()" />&nbsp;' . $value . '</label>
                    </div>
            ';
        }

        $return .= '
            </div>
        ';
    }
    if ($query_vars != null) {
        if (array_key_exists("s", $query_vars)) {
            $return .= '<input type="hidden" id="s" value="' . $query_vars["s"] . '">';
        }
        if (array_key_exists("orderby", $query_vars)) {
            $return .= '<input type="hidden" id="sorderby value="' . $query_vars["orderby"] . '">';
        }
        if (array_key_exists("order", $query_vars)) {
            $return .= '<input type="hidden" id="order" value="' . $query_vars["order"] . '">';
        }
    }

    $return .= '
        <div class="small"><a href="#" class="deselect" onChange="this.form.submit()">Clear Filter</a>
        </form>
    ';
  
    return $return;
}
add_shortcode('my_custom_filter', 'my_custom_tag_filter');

Im trying to testing to api with function import token. and have response request is not defined

`import { expect } from "chai"; 
import { updateToken } from "../funtion/UpdatedToken.spec.js"; 
const baseurl = "https://kasir-api.belajarqa.com" describe ("Create User", () => {

it(`Success Create User`, async () =>{
    const accestoken = await updateToken()
    console.log(await accestoken)
    const payload = {
        "name": "wawa-Toko",
        "email": "[email protected]",
        "password": "S123456",
    }
    const response = await request (baseurl) 
    .post('/users') //endpoint
    .send(payload)
    .set('Authorization', `Bearer ${accestoken}`)
     // send request
    console.log(response)
    expect((await response).status).to.equal(201)
})
})`

my funtion code

import request from "supertest";
import { expect } from "chai";

const baseurl = "https://kasir-api.belajarqa.com"
const Token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEwNTBhMmU1LTI5ZTUtNDA0MS1iODdiLTVmZWM2N2ZiZjAzNSIsImNvbXBhbnlJZCI6IjU1OGJmNjA0LTQ2MWYtNGU2NS1iNWRmLTk2YWVkODk0YmUwZCIsImlhdCI6MTcxNTk5MjI4Mn0.OxdsPf72ek0qa0qPVKFN6C9ayqZiWtbdJ9qP-w8rHnE'
describe('Create User Skenario', () => { 
    it('Positive - User berhasil ditambahkan', async() => {
        const payload = {
            "name": "Salwa-Toko",
            "email": "[email protected]",
            "password": "S123456",
        }
        const response = await request (baseurl)
        .post('/users') //endpoint
        .send(payload)
        .set('Authorization', `Bearer ${Token}`)
        // send request
          console.log(response)
         expect((await response).status).to.equal(201)
    
    })   
})

if i try with manual access is fine no have issue but i want try with import accestoken my function test

Am I missing something with express? Thanks

My swiper is not working properly upon resize either it show

My swiper version : "swiper": "^11.1.0",

1. Black blank screen
2. Merges next and previous images

Here is problem

Here is what my current code looks like

import { Zoom, Navigation ,Virtual } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/css';

import 'swiper/css/zoom';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export default{
    data(){
        return {
              slides:[],
              allAssetsList:[],
        }
    },
}

.asset-slider-wrapper{
    height: 100%;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide{
  height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
}

:deep(.swiper-slide){
   height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
   background: #000;
}

 <div class="asset-slider-wrapper">
            <div class="swiper-container" >
                <swiper 
                :zoom="true"
                ref="swiperModuleRef" 
                @slideChange="handleSlideChange" 
                @beforeSlideChangeStart="$emit('beforeSlideChange')"
                @touchStart="$emit('touchStart')"
                @touchEnd="$emit('touchEnd')"
                @beforeResize="$emit('beforeResize')"
                @zoomChange="handleZoomChange"
                :resizeObserver="true"
                :style="{'--swiper-navigation-color': '#fff','--swiper-pagination-color': '#fff'}" 
                :navigation="true" :virtual="{
                     addSlidesBefore:2 , addSlidesAfter:2
                }">
                    <swiper-slide
                    v-for="(asset,index) in allAssetsList"
                    :key="index"
                    :virtualIndex="index"
                    style="height:100vh;"
                    >
                    <div class="swiper-zoom-container" style="position:relative;" :assetId="asset._id">
                            <img v-if="isImage(asset)"   :src="getThumbnailPath(asset,true)" :assetId="asset._id"/>
                    </swiper-slide>
                </swiper>
             </div>
 </div>

Note : I’m using virtual slider for better experience on mobile as it was crashing with 600 + images so i’m using virtual slider.

Please help me i’m struggling with this problem for so many days now.

Below is an example of the APIS doc

DOC EXAMPLE

I tried this approach

$('#arquivoTeste').on('change', function (event) {
    const file = event.target.files[0];

    if (file) {
        const formData = new FormData();
        formData.append('file', file);

        const fileName = encodeURIComponent(file.name);
        const apiUrl = `/v2/documents/upload/${fileName}`;



        $.ajax({
            url: apiUrl,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,  
            success: function (response) {
                console.log('Sucesso:', response);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error('Erro:', textStatus, errorThrown);
                console.error('Resposta do servidor:', jqXHR.responseText);

                if (jqXHR.responseText) {
                    try {
                        let response = JSON.parse(jqXHR.responseText);
                        console.error('Resposta JSON do servidor:', response);
                    } catch (e) {
                        console.error('Resposta não é um JSON válido:', jqXHR.responseText);
                    }
                }
            }
        });
    } else {
        console.log('Nenhum arquivo selecionado.');
    }
});

`

am using elementor to show grid from custom posts, I need to replace some words appear with some images

I used this code but it apply on 1st post in the grid

    document.addEventListener('DOMContentLoaded', function() {
            var id = document.querySelector("#licon") 
      id.innerHTML = id.innerHTML.replace(/Earth Check/g, '<img src="./licon/ec.png">');
            id.innerHTML = id.innerHTML.replace(/Green Globe/g, '<img src="./licon/gg.png">');
            id.innerHTML = id.innerHTML.replace(/Green Key/g, '<img src="./licon/gk.png">');
            id.innerHTML = id.innerHTML.replace(/Green Star/g, '<img src="./licon/gs.png">');
        id.innerHTML = id.innerHTML.replace(/Travelife/g, '<img src="./licon/tr.png">');

thanks in advance.

I already created an animation in dom for the login and registration but the only thing I need is to validate the registration and I already have the registration with django but I need it to show me the error if something happens with ajax and not restart the page or anything for that matter but in real time, this is the django code in views.py:

def registrar_usuario(request):
if request.method != “POST”:
return render(request, “./login.html”)

else:  
    if "cancelar" in request.POST:
        #no hace nada de momento
        return print("aca se pondra la animacion para que vuelva a login")

    try:
        #datos requeridos, haciendolos obligatorios
        required_fields= ["email_usuario", "nombre_usuario", "fecha_nacimiento", "password"]
        #despues de esto hay que generar un mensaje de error en caso de que falten campos, pero se debe hacer con javascript
        for field in required_fields:  
            if not request.POST.get(field):
                print("todos los campos son necesarios")
                return redirect("./login.html")
        #cuando se configure javascript este mensaje puede ser borrado ya que javascript debe hacer el mensaje, sin embargo debe ir de la mano con este fragmento de codigo django

        #verifica que el usuario no este creado
        email_usuario= request.POST["email_usuario"]
        if Registro.objects.filter(email_usuario=email_usuario).exists():
            #aca tambien debe ir un codigo javascript de la mano con django
            print(f"El email {email_usuario} ya existe!")
            return redirect("./login.html")   

        if request.POST["password"] == request.POST["password2"]:
            user = Registro.objects.create(
                nombre_usuario= request.POST["nombre_usuario"],
                fecha_nacimiento= request.POST["fecha_nacimiento"],
                password= request.POST["password"],
                email_usuario=email_usuario
            )
            user.is_active = True
            user.save()

            print(f"usuario creado con exito!")
            return redirect("home")  
        else:
            return HttpResponse("Las contraseñas no coinciden")
        
    except ValidationError as e:
        return HttpResponseBadRequest(e.message)
        #para saber mejor que error ocurre en caso de que sea diferente al esperado
        
    except Exception as e:
        print(f"Error al registrar el usuario: {e}") 
        return HttpResponse("Ocurrió un error durante el registro.")

I already created an animation in dom for the login and registration but the only thing I need is to validate the registration and I already have the registration with django but I need it to show me the error if something happens with ajax and not restart the page or anything for the style but in real time

The name property of a JavaScript class constructor is read-only once the class is defined, but it can be modified by a static field definition in the class body itself. However, I was surprised to find that it can’t be modified in a static initialization block.

This works great:

class Foo {
  static name = 'Bar';
}

But this throws a TypeError saying that name is read-only:

class Foo {
  static {
    this.name = 'Bar';
  }
}

Is this the intended behavior or an accidental quirk in the spec?

I’m trying to create a form that has radio dependent on other radios and I got most of the way there except for the style. I want the left-most column with the console logos to be a fixed height based on the max-content of the thumbnail grid (5×5) while also being evenly spaced (like justify-content:space-around).

For example, if you haven’t clicked anything, all the titles are squished together, but when you select “Super Mario Kart” or “Mario Kart 8”, it grows to the 5×5 grid specified in JS.

`

            <div class="Console">
                <div class="console-column">
                    <label>
                        <input type="radio" name="console" value="SNES" onclick="snesCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Super-Mario-Kart.png" alt="Super Mario Kart">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="N64" onclick="n64Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-64.png" alt="Mario Kart 64">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="GBA" onclick="gbaCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Super-Circuit.png" alt="Mario Kart Super Circuit">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="GCN" onclick="gcnCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Double-Dash.png" alt="Mario Kart Double Dash">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="DS" onclick="dsCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-DS.png" alt="Mario Kart DS">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Wii" onclick="wiiCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Wii.png" alt="Mario Kart Wii">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="3DS" onclick="mk7Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-7.png" alt="Mario Kart 7">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Tour" onclick="tourCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-Tour.png" alt="Mario Kart Tour">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="MK8" onclick="mk8Courses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-8.png" alt="Mario Kart 8">
                        </div>
                    </label>
                    <label>
                        <input type="radio" name="console" value="Booster Courses" onclick="boosterCourses();">
                        <div class="console-image">
                            <img src="./images/logos/Mario-Kart-8-Deluxe-Booster-Course-Pass.png" alt="Mario Kart 8 Deluxe Booster Courses">
                        </div>
                    </label>
                </div>
            </div>

body {
    display: grid; 
    grid-template-columns: 66% 33%; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
    gap: 1% 1%; 
    grid-template-areas: 
        "Header Header"
        "Nav Nav"
        "Settings Settings"
        "Course Stats"
        "Footer Footer";
    height: 100vh;
}

.hide {
    display: none;
}

input[type="radio"]{
    display: none;
}

h1 {
    text-align: center;
    font-size: 16px;
}
.Header { 
    grid-area: Header; 
    background: teal;
}
.Nav { 
    grid-area: Nav; 
    background: salmon;
}
.Settings { 
    grid-area: Settings; 
    background: yellowgreen;
}
.Course {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 10% repeat(3, minmax(1, 1fr)); 
    gap: 5% 5%; 
    grid-template-areas: 
        ". . . Class Class"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"
        "Console Thumbnail Thumbnail Thumbnail Thumbnail"; 
    grid-area: Course; 
    background: brown;
    gap: var(--gap);
}
.Console {
    grid-area: Console;
    border: 5px solid #000000;
    border-radius: 10px;
    align-content: center;
}
.Class { 
    grid-area: Class; 
    background: blue;
}
.Thumbnail { 
    grid-area: Thumbnail; 
    background: purple;
    border: 5px solid #000000;
    border-radius: 10px;
}
.Stats { 
    grid-area: Stats; 
    background: orange;
}
.Footer { 
    grid-area: Footer; 
    background: green;
}

/* Console Header */
.console-column {
    display: table;
    height: auto;
}

.console-image img {
    cursor: pointer;
    display: block;
    opacity: 50%;
    transition: transform 250ms ease-in-out;
    max-width: 70%;
    max-height: 10%;
    margin: auto;

    &:hover {
        opacity: 80%;
        transition: opacity 250ms ease-in-out;
    }
}

.console-column input[type=radio]:checked + .console-image img{
    opacity: 100%;
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px hsla(0, 0%, 0%, 0.75));
    transition: transform 250ms ease-in-out, filter 250ms ease-in-out;
}

/* Course Grid */
.course-container {
    display: flex;
}

.course-thumbnail img {
    cursor: pointer;
    display: block;
    opacity: 80%;
    max-width: 90%;
    transition: transform 250ms ease-in-out;
    border: 5px solid transparent;
    margin: 5% auto;

    &:hover {
        opacity: 100%;
        transition: opacity 250ms ease-in-out;
    }
}

.course-grid input[type=radio]:checked + .course-thumbnail img{
    border: 5px solid salmon;
    background-color: salmon;
    opacity: 100%;
    mask-image: linear-gradient(135deg, transparent 5px, gold 0),
                linear-gradient(-135deg, transparent 5px, gold 0),
                linear-gradient(45deg, transparent 5px, gold 0),
                linear-gradient(-45deg, transparent 5px, gold 0);
    mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
} 

function snesCourses(){ 
  document.getElementById('snesCourses').style.display = 'grid';
  document.getElementById('snesCourses').style.gridTemplateColumns = "repeat(5, 1fr)"; 
  document.getElementById('snesCourses').style.gridTemplateRows = "repeat(5, 1fr)"; 
  document.getElementById('mk8Courses').style.display = 'none';
}

function n64Courses(){ 
  document.getElementById('snesCourses').style.display = 'none';
  document.getElementById('mk8Courses').style.display = 'none';
}

function mk8Courses(){ 
  document.getElementById('snesCourses').style.display = 'none';
  document.getElementById('mk8Courses').style.display = 'grid';
  document.getElementById('mk8Courses').style.gridTemplateColumns = "repeat(5, 1fr)"; 
  document.getElementById('mk8Courses').style.gridTemplateRows = "repeat(5, 1fr)"; 
}

Here is a CodePen example

I know I have to change min-height of .course-container to something, I just don’t know what.

I’m trying to add an event listener to my input box, to check if it’s empty. If it is empty then hide autoComplete-Box-id. But when I load the page and the input box is empty it show’s the element. How do I fix this?

HTML:

        <span>
          <input id="originInput" style="width: 350px;" name="origin" type="text" placeholder="Origin">
        </span>
        <div id="autoComplete-Box-id"></div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <span>
          <input style="width: 350px;" name="destination" type="text" placeholder="Destination">
        </span>
      </form>`

JS:

    let getOriginInput = document.getElementById("originInput");

    getOriginInput.addEventListener("input", function(e) {
      
      console.log(e.target.value.length);
  
      if(e.target.value == ""){
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="none";
      }else{
        let autoCompleteBox = document.getElementById("autoComplete-Box-id");
        autoCompleteBox.style.display="";
      }
    });

CSS:

#autoComplete-Box-id{
  width: 350px;
  height: 150px;
  background-color: gray;
}

I tried checking e.target.value.length and trying to see if the length was = 0. If so I, would be able to make the element disappear on load and re-appear when there was input in the box.

So, I found that this error usually comes up when you’re using AJAX. The problem is: I don’t. I tried to use $(this.element) instead, but then it returnes only undefined.

So, my code is (I reduced it to bare minimum for you to understand):

$("document").ready(() => {  
    $(".department-item").on("click", () => {
        console.log($(this).text())
    })
})

That’s what I get from that:

I have a form on my CPanel. The url show the path to the file the form is located (website.com/folder/subfolder/file-name). I want to change this url to something else (website.com/new-url). I tried the code below, but when I type website.com/new-url directly into the address box, it doesn’t show the form.

window.history.replaceState('', '', '/new-url');