Category: javascript

I would like to change the font color and the box width in my chart but it doesn’t work.
I tried it a lot of way but cant solve it.

Also it must be better solution to edit borderColor, pointRadius, etc. then set it in every label.

Sorry for my stupid question, i am beginner.

Here is my chart component:

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'ChanceChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false,
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

And here is my app:

<template>
    <div id="chart">
      <ChanceChart :chartData="chartData" />
    </div>
</template>

<script>
import ChanceChart from "../components/ChanceChart.vue";

export default {
  components: {
    ChanceChart
  },

  computed: {
    chartData() {
      return {
        labels: this.enemysCards.map((x, index) => index + 1),
        datasets: [
          {
            label: "Enemy's Chance",
            borderColor: "#1161ed",
            borderWidth: 2,
            pointRadius: 0,
            color: "#fff",
            data: this.enemysCards,
            defaultFontColor: "#fff",
          },
          {
            label: "My Chance",
            borderColor: "#f87979",
            borderWidth: 2,
            pointRadius: 0,
            data: this.myCardsFilled,
          },
          {
            label: "Enemy's Avarage",
            borderColor: "rgb(238, 255, 0)",
            borderWidth: 2,
            pointRadius: 0,
            data: this.avgArray,
          },
          {
            label: "Enemy's Median",
            borderColor: "rgb(255, 0, 191)",
            borderWidth: 2,
            pointRadius: 0,
            data: this.medianArray,
          },
          {
            label: "Standard Deviation",
            borderColor: "#fff",
            borderWidth: 2,
            pointRadius: 0,
            data: this.upDev,
          },
          {
            label: "Standard Deviation",
            borderColor: "#fff",
            borderWidth: 2,
            pointRadius: 0,
            data: this.downDev,
          },
        ],
        options: {
          plugins: {
            legend: {
              labels: {
                boxWidth: 0,
                font: {
                  color: "#fff",
                },
              },
            },
          },
        },
      };
    },
  },

Can anyone help me?

anyone of you coder know about a extension like this?

For example: i Have this code multiplied for 100

 plan: <?= $this->user->plan_id ?>,
 trial: <?= $this->user->plan_trial_done ?>,
 email: "<?= $this->user->email ?>",

I need to replace
$this->user->plan_id
to
isset($$this->user->plan_id) ? $this->user->plan_id : “”

For example a tool if i select this code: isset({X}) ? {X} : “”
Automaticaly replace all {X} with the previously selected code?

I hope you understand, if not exist i will create it lol.

there is a problem with my code I try to split array values to single individual strings that contains part of links.

I tried with dele.join() , but still the output is single string with coma separation

$(function () {

            $("#selectedel").click(function () {
                var dele =[]; // Array look like this  ["/delete.php?id=1","/delete.php?id=2","/delete.php?id=3"]
                $.each($("input:checkbox[name='dele']:checked"), function () {
                    dele.push($(this).val());

                });
                console.log(dele.toString());
                console.log(dele.join(","));
            })


        });

output of this code is

/delete.php?id=1,/delete.php?id=2,/delete.php?id=3

The output that i want is

/delete.php?id=1
/delete.php?id=2
/delete.php?id=3

Which in the end i want to open this links with window.open() at once .

Thank you in advance

 {% for person in teacher %}
                            <tr class="bg-gray-100 border-b">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"></td>
                                <td class="p-0 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    <img src="{{person.customuser.profile_pic.url}}" class="rounded-lg w-32"
                                        alt="Avatar" />
                                </td>
                                <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                    <p>{{person.customuser.first_name}} {{person.customuser.last_name}}</p>
                                </td>
                                <td class="text-sm text-gray-900 font-light px-4 py-4 whitespace-nowrap">
                                    {% for item in person.subjects.all %}
                                    <p>{{item.name}}</p>
                                    {% endfor %}
                                </td>
                                <td class="text-sm text-gray-900 font-light px-4 py-4 whitespace-nowrap">

                                    <div class="flex items-center justify-center">
                                        <div id="btnView" class="inline-flex shadow-md hover:shadow-lg focus:shadow-lg"
                                            role="group">
                                            <button type="button"
                                                class="rounded-l inline-block px-6 py-2.5 bg-[#4951bf]  text-white font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out">Edit</button>
                                            <button onclick='viewDetails()'
                                                    type="button"
                                                    class=" inline-block px-6 py-2.5 bg-[#4951bf]  text-white font-medium text-xs leading-tight uppercase hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-0 active:bg-green-800 transition duration-150 ease-in-out">View</button>
                                            <button type="button"
                                                class=" rounded-r inline-block px-6 py-2.5 bg-[#4951bf]  text-white font-medium text-xs leading-tight uppercase hover:bg-red-700 focus:bg-red-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out">Delete</button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}

I want to call a javascript function viewDetails({{person.id}}) inside onclick event when the user presses the button.I want the value {{person.id}} to be passed as an argument which is coming from the for loop in jinja tag. Is it possible?

When I try to register a new user all data are passed except “avatar”, even if that avatar is regularly uploaded on my Cloudinary.

Don’t even know what is the problem in and tried to find answer on google but unsuccessfully, so any help is very welcome 😀

Here is some code, if need more tell me in a comment and I’ll send you

Cannot finish my site, don’t know what to do…

// frontend Register component
import React, { Fragment, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

import MetaData from '../layout/MetaData';

import { useAlert } from 'react-alert';
import { useDispatch, useSelector } from 'react-redux';
import { register, clearErrors } from '../../actions/userActions';

const Register = () => {
  const navigate = useNavigate();

  const [user, setUser] = useState({
    name: '',
    email: '',
    password: '',
  });

  const { name, email, password } = user;

  const [avatar, setAvatar] = useState('');
  const [avatarPreview, setAvatarPreview] = useState(
    '/images/default_avatar.jpg'
  );

  const alert = useAlert();
  const dispatch = useDispatch();

  const { isAuthenticated, error, loading } = useSelector(
    (state) => state.auth
  );

  useEffect(() => {
    if (isAuthenticated) {
      navigate('/');
    }

    if (error) {
      alert.error(error);
      dispatch(clearErrors());
    }
  }, [dispatch, alert, isAuthenticated, error, navigate]);

  const submitHandler = (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.set('name', name);
    formData.set('email', email);
    formData.set('password', password);
    formData.set('avatar', avatar);

    dispatch(register(formData));
  };

  const onChange = (e) => {
    if (e.target.name === 'avatar') {
      const reader = new FileReader();

      reader.onload = () => {
        if (reader.readyState === 2) {
          setAvatarPreview(reader.result);
          setAvatar(reader.result);
        }
      };

      reader.readAsDataURL(e.target.files[0]);
    } else {
      setUser({ ...user, [e.target.name]: e.target.value });
    }
  };

  return (
    <Fragment>
      <MetaData title={'Register User'} />

      <div className='row wrapper'>
        <div className='col-10 col-lg-5'>
          <form
            className='shadow-lg'
            onSubmit={submitHandler}
            encType='multipart/form-data'
          >
            <h1 className='mb-3'>Register</h1>

            <div className='form-group'>
              <label htmlFor='email_field'>Name</label>
              <input
                type='name'
                id='name_field'
                className='form-control'
                name='name'
                value={name}
                onChange={onChange}
              />
            </div>

            <div className='form-group'>
              <label htmlFor='email_field'>Email</label>
              <input
                type='email'
                id='email_field'
                className='form-control'
                name='email'
                value={email}
                onChange={onChange}
              />
            </div>

            <div className='form-group'>
              <label htmlFor='password_field'>Password</label>
              <input
                type='password'
                id='password_field'
                className='form-control'
                name='password'
                value={password}
                onChange={onChange}
              />
            </div>

            <div className='form-group'>
              <label htmlFor='avatar_upload'>Avatar</label>
              <div className='d-flex align-items-center'>
                <div>
                  <figure className='avatar mr-3 item-rtl'>
                    <img
                      src={avatarPreview}
                      className='rounded-circle'
                      alt='Avatar Preview'
                    />
                  </figure>
                </div>
                <div className='custom-file'>
                  <input
                    type='file'
                    name='avatar'
                    className='custom-file-input'
                    id='customFile'
                    accept='iamges/*'
                    onChange={onChange}
                  />
                  <label className='custom-file-label' htmlFor='customFile'>
                    Choose Avatar
                  </label>
                </div>
              </div>
            </div>

            <button
              id='register_button'
              type='submit'
              className='btn btn-block py-3'
              disabled={loading ? true : false}
            >
              REGISTER
            </button>
          </form>
        </div>
      </div>
    </Fragment>
  );
};

export default Register;

// backend  Register a user => /api/v1/register
exports.registerUser = catchAsyncErrors(async (req, res, next) => {
  const result = await cloudinary.v2.uploader.upload(req.body.avatar, {
    folder: 'avatars',
    width: 150,
    crop: 'scale',
  });

  const { name, email, password } = req.body;

  const user = await User.create({
    name,
    email,
    password,
    avatar: {
      public_id: result.public_id,
      url: result.secure_url,
    },
  });

  sendToken(user, 200, res);
});

I have a basic React application. I want to show a list of links, and in the right column I want to show their status.

I have a .json file that has my urls:

[
    {
        "name": "Google",
        "url": "www.google.com"
    },
    {
        "name": "Bing",
        "url": "www.bing.com"
    },
    etc.
]

and I have a basic React component that reads it, builds a table with two rows:

• <a href=url>name</a>
• the status of this url

Here is the code:

import React from 'react'
import Table from 'react-bootstrap/Table'
import data from './data/urls.json'

function returnStatus (url) {
    fetch(url)
        .then(function(response) {
            return response.status
         })
        .catch(err => {
            console.log('Error: ',err)
        })
}

function Urls() {
    const urls = data.map(url => (
        <tr>
            <td>
                <a href={url.url} target='_blank'>{url.name}</a>
            </td>
            <td>{returnStatus(url.url)}</td>  ----> THIS IS THE LINE THAT DOESN'T WORK
        </tr>
    ))

    return (
        <div>
            <Table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>{urls}</tbody>
            </Table>
        </div>
    )
}

export default Urls

I know well Java and Python, and IMO it should work. But it doesn’t! Can you guys please help me 🙂

I’m trying to figure out how to get the rect coords of a mesh for 2D projection.

I need X, Y, Width and Height.

After reading many SO posts and various blogs, it seems like none of them work with latest modern Three.JS and the documentation doesn’t have a function for it.

How is this achieved?

Currently, I’m looking at using a Box3 and then project the Box3 to screen.

My code looks like this

var bbox = new THREE.Box3().setFromObject(mesh);

Unfortunately I don’t know what else to provide.

I’m lost.

I am working on a global storage of user information coming from the server. To do this, I want to utilize React Context API. The method seems to work with the child routes/functions, but in the Parent (index.js) it cannot read any value and gets the error “TypeError: Cannot destructure property ‘user’ of ‘Object(…)(…)’ as it is undefined”. Why can all my child components read and update the user context but not the Parent (index.js)? Btw, same approach here as used in the child components.

UserConext.js

import { createContext, useState } from "react";

export const UserContext = createContext();

// This context provider is passed to any component requiring the context
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    id: 0,
    name: ""
  });

  return (
    <UserContext.Provider value={{user, setUser}}>
      {children}
    </UserContext.Provider>
  );
};

Index.js (Parent)

import React, { useState, useEffect, useContext } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './components/Login/Login';
import Registration from './components/Registration/Registration';
import RegistrationConfirmed from './components/Confirmation/RegistrationConfirmed'
import Home from './components/Home/Home';
import myProfile from './components/Profile/myProfile';
import ProtectedRoute from './ProtectedRoute';
import { AuthContext } from './components/Context/AuthContext';
import Axios from 'axios';
import {UserContext, UserProvider} from './components/Context/UserContext';    

function App () {           //Exact path = Beginning page of the site

const [authStatus, setAuthStatus] = useState(AuthContext);
const {user, setUser} = useContext(UserContext);   

   useEffect(() => { //Stay logged in, if user is logged in, after refresh

    const token = localStorage.getItem('token');

    Axios.post("http://localhost:3001/authenticate", {  //End-point for creation request
    token: token, 
    },{withCredentials: true}).then(response => {
      if (!response.data.auth) { //checking for response message
        setAuthStatus(false); //Login status is 
        localStorage.clear();
        console.log("NOT LOGGED IN!");
       } else {
        setAuthStatus(true);  
        console.log("LOGGED IN!");
        setUser({id: JSON.stringify(response.data.user[0]).id, name: JSON.stringify(response.data.user[0]).name});

    })
  }
  ,[]);

  return (
  <AuthContext.Provider value={[authStatus, setAuthStatus]}>
    <UserProvider>
    <Router>
    <Switch>
      <Route exact={true} path="/" component={Login} />
      <Route path="/Registration" component={Registration} />
      <Route path ="/Confirmation" component={RegistrationConfirmed}/>
      <ProtectedRoute path="/home" component ={Home} authStatus = {authStatus}/>
      <ProtectedRoute path = "/myProfile" component={myProfile} authStatus = {authStatus}/>
    </Switch>
    </Router>
    </UserProvider>
  </AuthContext.Provider>
  );
  };
render(
<App />, document.getElementById('root') 

);

Here’s some text encoded in a simple format. But i am unable to figure out the pattern

IyEvdXNyL2Jpbi9lbnYgcHl0aG9uMwoKaW1wb3J0IGNvZGVjcwppbXBvcnQgc3RyaW5nCmltcG9ydCBzeXMKaW1wb3J0IHRpbWUKCmZyb20gY3J5cHRvZ3JhcGh5Lmhhem1hdC5iYWNrZW5kcyBpbXBvcnQgZGVmYXVsdF9iYWNrZW5kCmZyb20gY3J5cHRvZ3JhcGh5Lmhhem1hdC5wcmltaXRpdmVzLmhhc2hlcyBpbXBvcnQgU0hBMQpmcm9tIGNyeXB0b2dyYXBoeS5oYXptYXQucHJpbWl0aXZlcy50d29mYWN0b3IudG90cCBpbXBvcnQgVE9UUAoKCk9ORV9XRUVLX0lOX1NFQ09ORFMgPSA2MDRfODAwCgoKZGVmIGdlbmVyYXRlX3NlY3JldCgpOgogICAgdG90cCA9IFRPVFAoCiAgICAgICAga2V5PWNvZGVjcy5lbmNvZGUoc3RyaW5nLmFzY2lpX2xldHRlcnMsIGVuY29kaW5nPSJ1dGYtOCIpLAogICAgICAgIGxlbmd0aD04LAogICAgICAgIGFsZ29yaXRobT1TSEExKCksCiAgICAgICAgdGltZV9zdGVwPU9ORV9XRUVLX0lOX1NFQ09ORFMsCiAgICAgICAgYmFja2VuZD1kZWZhdWx0X2JhY2tlbmQoKSwKICAgICkKICAgIHNlZWQgPSBpbnQodGltZS50aW1lKCkpCiAgICB0b2tlbiA9IGNvZGVjcy5kZWNvZGUodG90cC5nZW5lcmF0ZShzZWVkKSwgZW5jb2Rpbmc9InV0Zi04IikKICAgIHJldHVybiBmInt0b2tlbn0te3NlZWR9IgoKCiMgdGhlcmUgYXJlIDIgc21hbGwgYnVncyBiZWxvdyB5b3UnbGwgaGF2ZSB0byBmaXggYmVmb3JlIHByb2NlZWRpbmcgOikKaWYgX19uYW1lX18gPT0gIl9fbWFpbl9fIjoKICAgIHN5cy5zdGRvdXQoCiAgICAgICAgZiJQbGVhc2UgZ28gdG8gaHR0cHM6Ly9yYW1wLmNvbS9jYXJlZXJzIGFuZCB1c2UgdGhpcyBzZWNyZXQgd2hlbiAiCiAgICAgICAgZiJ5b3UgYXBwbHk6IHtnZW5lcmF0ZV9zZWNyZXR9XG4iCiAgICAp==

I am used to working in C#, and just got handed this project with querybuilder.
I have been searching for hours and can’t seem to figure out how to achieve this.

What I want is for the root condition to be “AND” – which is default.
But since it is default – for every subquery (new group) I add, the default condition is “AND”, but I need it to be “OR”.

I added a photo which you can reach with below link.

Does anyone have an idea? It would be highly appreciated.

Limit conditions in querybuilder subgroups

Problem: Searching is working only on one page not others

I have hit a roadblock in my project that has an issue is not being able to search from the rest of the pages that have the Travis component(Travis = Header), The Travis Component only works in SearchResult Page hence I have difficulty in solving this problem. Help will be grateful!

Header.js

export default function Travis({ onPlaceChanged, onLoad }) {
return (
        <Autocomplete className="search" onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
          <div className="form">
        <Search className="ml-2 text-slate-600"/>
          <InputBase
            type="text"
            id="location"
            className="input"
            ref={primaryLocationRef}
            placeholder="Where are you going to Explore?"
            required
          />
          </div>
        </Autocomplete>
)
}

SearchR.js

import React, { useState, useEffect } from 'react';
import { getPlacesData, getWeatherData } from '../api/travelApi';
import Travis from '../components/Header';
import Map from '../components/Map/Map';
import SearchResults from '../components/Map/SearchResults';
import Footer from '../components/Footer';

const SearchR = () => {
  const [type, setType] = useState('hotels');
  const [rating, setRating] = useState('');

  const [coords, setCoords] = useState({});
  const [bounds, setBounds] = useState(null);

  const [weatherData, setWeatherData] = useState([]);
  const [filteredPlaces, setFilteredPlaces] = useState([]);
  const [places, setPlaces] = useState([]);

  const [autocomplete, setAutocomplete] = useState(null);
  const [childClicked, setChildClicked] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(({ coords: { latitude, longitude } }) => {
      setCoords({ lat: latitude, lng: longitude });
    });
  }, []);

  useEffect(() => {
    const filtered = places.filter((place) => Number(place.rating) > rating);

    setFilteredPlaces(filtered);
  }, [rating]);

  useEffect(() => {
    if (bounds) {
      setIsLoading(true);

      getWeatherData(coords.lat, coords.lng)
        .then((data) => setWeatherData(data));

      getPlacesData(type, bounds.sw, bounds.ne)
        .then((data) => {
          setPlaces(data.filter((place) => place.name && place.num_reviews > 0));
          setFilteredPlaces([]);
          setRating('');
          setIsLoading(false);
        });
    }
  }, [bounds, type]);

  const onLoad = (autoC) => setAutocomplete(autoC);

  const onPlaceChanged = () => {
    const lat = autocomplete.getPlace().geometry.location.lat();
    const lng = autocomplete.getPlace().geometry.location.lng();

    setCoords({ lat, lng });
  };

  return (
    <>
    <Travis onPlaceChanged={onPlaceChanged} onLoad={onLoad}/>
    <main>
      <Map
              setChildClicked={setChildClicked}
              setBounds={setBounds}
              setCoords={setCoords}
              coords={coords}
              places={filteredPlaces.length ? filteredPlaces : places}
              weatherData={weatherData} 
      />
      <SearchResults
        isLoading={isLoading}
        childClicked={childClicked}
        places={filteredPlaces.length ? filteredPlaces : places}
        type={type}
        setType={setType}
        rating={rating}
        setRating={setRating} 
      />
    </main>
    <Footer />
    </>
  );
}

export default SearchR;

Here is one of the page that has Travis Component

Index.js

import React, { useState } from 'react';
import Footer from "../components/Footer";
import Hero from '../components/Hero';
import Banner from '../components/Banner';
import Hosting from '../components/Hosting';
import Article from '../components/Articles/Article';
import Travis from '../components/Header';


export default function Index() {

  return (
    <>
    <Travis />
      <main>
        <Hero />
        <Banner />
        <Article />
        <Hosting />
      </main>

      <Footer />
    </>
  );
}

I have three CSS @media queries and I need to run some JavaScript to measure the height of a div and move a second div on some screen sizes. The issue is that all of my queries are applying, obviously because they all return true. How can I adjust this so that only one of the conditionals fire in jQuery, similarly to CSS?

//Responsive Adjustments
jQuery(document).ready(function($) {
  $(window).resize(function () {
    console.log($(window).width());
    
    if ($(window).width() <= 1024) {
      console.log ('tab land');
    }

    if ($(window).width() <= 980) {
      console.log ('tab port');
    }

    if ($(window).width() <= 479) {
      console.log ('phone port');
    }
  });
});

i have code like below,

const output = (data?.item?.someItem?.count ?? 0) === 0;

what is the value of output in this case what does ?? in above line mean. could someone help me understand this line of code.

I am new to programming. thanks.

I’m trying to make a HexGrid in React, but I cannot find a solution to add the styles of top and left to each element, in a way it renders on the screen. I tried to use the React.createElement to create the instances of Hexagon element and added the styles to it, but when I use map to render it on the screen, the styles are not there. I can see them in the console in props, but the styles are not added to the component. In Hexagon component I use Styled component to give it styles, not Css file.
Code:

import { StyledHexagonGrid } from './StyledHexagonGrid.jsx';
import Hexagon from "../Hexagon/Hexagon"
import { HexHeight, HexWidth } from '../Hexagon/StyledHexagon.jsx';


const coordinatesCalc = (radius) => {
  let coordinateRadius = (radius-1);
  let coordinates = [];
  for(let x=-coordinateRadius; x<(coordinateRadius+1); x++){
    for(let z=-coordinateRadius; z<(coordinateRadius+1); z++){
      for(let y=-coordinateRadius; y<(coordinateRadius+1); y++){
        let sum = x + y + z;
        let coordinate = {x,y,z};
        if(sum === 0){
          coordinates.push(coordinate)
        }
      }
    }
  }
  console.log(coordinates);
}

function HexagonGrid ({dataparentToChild}) {
  let passedRadius = Object.values({dataparentToChild});
  coordinatesCalc(passedRadius[0]);

  let radius = passedRadius[0];
  let columns = (2*radius -1);
  let dom_content = [];
  for(let i=0, j=(radius-1);i<columns; i++, j--){
    for(let k=0;k<columns-Math.abs(j);k++){
      let left = (HexWidth*0.75)*i;
      let top = (k*HexHeight) + Math.abs(j*(HexHeight/2));
      // const Hex = document.createElement('Hexagon');
      // Hex.style.left = `${left}px`;
      // Hex.style.top = `${top}px`;
      // dom_content.push(<Hexagon style={{top: `${top}px`, left: `${left}px`}} />);
      dom_content.push(React.createElement('Hexagon', {style: {left: `${left}px`, top: `${top}px`}}))
    }
  }
  console.log(dom_content);

  return(
    <StyledHexagonGrid>
      {dom_content.map((item,index)=><Hexagon obj={item} key={index}/>)}
    </StyledHexagonGrid>
  );

}

export default HexagonGrid; ```

I have a video game made in JavaScript using the createjs library.

In the credits, I draw a URL on the canvas as text, but I wish to make it a clickable link.

After a lot of Googling and searching through forums I haven’t found a similar question being asked.

I tried using the String link() method, but it does not work. The game launches but the credits won’t open.

    var oLink = new createjs.Text("www.amzd.hr"," 20px "+FONT_GAME, "#000080");
    oLink.y = +270;
    oLink.textAlign = "center";
    oLink.textBaseline = "middle";
    oLink.x = +100;
    oLink.lineWidth = 300;
    let oLink = oLink.link("https://www.amzd.hr");
    _oPanelContainer.addChild(oLink);