Sending a Javascript Variable to Flask Python Code without Form-Event

I have a problem with Flask and Javascript. I want to use a website to control a minirobot with joysticks. I have found nippleJS (https://github.com/yoannmoinet/nipplejs) and included it to my website. I can print the joystick values to the web console, but i need those values at my pythonscript for the robot control. Can anybody help me please? Here is my code: HTML:

<script src="{{url_for('static', filename='nippleJS.js')}}"></script>
    <script>
        var joystickL = nipplejs.create({
            zone: document.getElementById('left'),
            mode: 'static',
            position: { left: '20%', top: '50%' },
            color: 'green',
            size: 200
            
        });
        

        var joystickR = nipplejs.create({
            zone: document.getElementById('right'),
            mode: 'static',
            position: { left: '80%', top: '50%' },
            color: 'red',
            size: 200,
            lockY: 1
        });

        joystickL.on('move', function (evt, nipple) {
            var dis = nipple.distance;
            var angle = nipple.angle.radian;
            var pos = nipple.position;
            console.log(dis);
            console.log(angle); </script>

And here is my Flask Code:

from flask import Flask, render_template, request, redirect, url_for, jsonify

app = Flask(__name__)

@app.route("/", methods=['GET', 'POST'])
def home():

if request.method == 'POST':
    
    if request.form['btn'] == 'Demo Programme':
        return redirect(url_for('demo'))

    elif request.form['btn'] == 'Manuelle Steuerung':
        return redirect(url_for('steuerung'))

    elif request.form['btn'] == 'Erweiterte Optionen':
        return redirect(url_for('optionen'))



return render_template('home.html')

Create a voice record reactJS

I am trying to add voice record feature in a chat application ,I have tried this package
react-mic it work fine and it give me this data when I stopped the record
enter image description here

I want now to send this as a binary file to the backend I have tried this

  let name = `test.ogg`
  let lastModified = new Date()
  let file = new File([{...audioData.blob,name,lastModified}],name,{
    type:"audio/ogg"
  })

but it didn’t work as expected It change it to binary but it is not a valid file because when I try to change it and played it in the browser it didn’t work ,I have read alot of articles but nothing help

and for the method I used I have follow this article
https://pqina.nl/blog/convert-a-blob-to-a-file-with-javascript/

Chromium based browser freezes if there’s too many JS files

This is something I’ve been trying to fix for months now (it’s not a critical thing, but still annoying). Googling has left me empty handed.

The gist of the problem is this:

  1. Open up Chromium window in Incognito mode with the URL of the local app
  2. Do some dev work, Ctrl+Refresh/refresh with cache disabled
  3. The Browser stops loading the javascript files after a bit, and freezes

This freeze entails every tab in the window. If it happens in a non-incognito Window, it freezes as well. The way it freezes is that, while the requests all return 200, the “Time” column in Chrome Network tab remains pending forever. The window cannot be closed unless the tab is directly closed. Of course there has been entire days where this didn’t happen once, and days where it happens all the time. Sometimes it survives 2 reloads, for example.

The related fact is that the index.html is absolutely huge. It includes a lot of javascript files, and I assume that is what’s causing it to freeze on Chromium-based browsers (doesn’t happen on Firefox, ever). Completely revamping the index.html file because of the above issue would take a lot of work, so I’m asking if there’s a workaround of any kind. Running an uglifier on the js files makes Chrome work flawlessly, but then I am unable to really use the Developer tools properly. So this is what makes me think the problem is the amount of files (there’s around 1.2k tags in there)

The network tab in the tab that freezes looks like this. A whole bunch of 200 requests. Then at some point, they just lose their size and the request is stuck on pending:

Network tab

More info

I’m not sure what other information I could give at this point. The backend obviously sends the files properly, the frontend obviously requests the files properly (as illustrated by Firefox running well). So by process of elimination I’m stuck with blaming Chrome, but unable to find a fix.

I’ve tried Chromium, Google Chrome, Microsoft Edge, Brave Browser, Opera. All had this exact same issue.

So to summarize my question: can I make Chrome somehow load all those files? Is there an extra cache I could turn off (since new Incognito tabs open as they should)? Is there a file limite option I could raise?

Vue.js Como posso ler os dados de um __ob__: Observer [closed]

Estou precisando criar um array ao qual irá ler 4 valores de tipo string e após isso irei passar em um gráfico para criar suas colunas com as respectivas cores (strings).

Esse é o meu array (poo: []) :

data() {
return {
  graphicData: {
    type: 'bar',
    data: {
      labels: [],
      datasets: [],
    },
    options: {
      responsive: true,
      lineTension: 1,
      scales: {
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
              padding: 25,
            },
          },
        ],
      },
    },
  },
  average: 0,
  stepsGrade: [],
  poo: [], //Esse é meu array

Eu passo os valores para ele neste computed:

 case 'P4':
      if (this.stepsGrade[0].step_grade > 92) {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-happy', color: 'green' });
        this.poo.push('green');;
      } else {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-sad', color: 'red' });
        this.poo.push('red');
      }

      if (this.stepsGrade[1].step_grade > 88) {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-happy', color: 'green' });
        this.poo.push('green');;
      } else {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-sad', color: 'red' });
        this.poo.push('red');
      }

      if (this.stepsGrade[2].step_grade > 84) {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-happy', color: 'green' });
        this.poo.push('green');;
      } else {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-sad', color: 'red' });
       this.poo.push('red');
      }

      if (this.stepsGrade[3].step_grade > 80) {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-happy', color: 'green' });
        this.poo.push('green');;
      } else {
        this.stepGradeIcon.push({ icon: 'mdi-emoticon-sad', color: 'red' });
        this.poo.push('red');
      }

      break;
  }

  return this.stepGradeIcon;

No meu console log possuo os dados da seguinte maneira:

[__ob__: Observer]
0: "red"
1: "green"
2: "green"
3: "green"
length: 4
__ob__: Observer {value: Array(4), dep: Dep, vmCount: 0}
[[Prototype]]: Array

Como posso fazer a leitura desses 4 valores ?

Vue.extend throws TypeError: can’t access property “extends”

I’m trying to programmatically append a component to a container called toaster. I’m using vuejs3 to accomplish this.

I create the #toaster element and, with the information gathered from this article, add an addToast() function so I can use it in other modules.

// @/App.vue

<template>
  <div class="h-screen">
    <Navbar />
    <div id="toaster" class="absolute bottom-4 left-2 z-50"></div>
    <router-view> </router-view>
  </div>
</template>

<script>
import Navbar from "./components/Navbar.vue";
import Toast from "./components/Toasts.vue";
import Vue from "vue";

export default {
  name: "RootApp",
  components: {
    Navbar,
  },
  setup() {
    return {};
  },
};

export function addToast(message, type) {
  const toastClass = new Vue.extend(Toast);
  const toastInstance = new toastClass({
    propsData: {
      message,
      type,
    },
  });
  toastInstance.$mount();
  document.querySelector("#toaster")?.appendChild(toastInstance.$el);
}
</script>

I define the component here:

// @/components/Toast.vue

<template> ... </template>
<script>
import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "ToastComponent",
  props: {},
  setup(props) {
    const toasts = ref([]);
    const shown = ref(true);

    setTimeout(() => {
      shown.value = false;
      return;
    }, 3000);
    return {
      props,
      shown,
      toasts,
    };
  },
});
</script>

And finally, try to display a Toast in one of my views:

// @/views/LandingView.vue
<script>
import { ref } from "vue";
import { addToast } from "@/App.vue";

export default {
  name: "LandingView",
  components: {},
  setup() {
    const form = ref({
      email: "",
      password: "",
    });
    const handleFormSubmit = () => {
      addToast("Hello World!", "success");
    };
    return { handleFormSubmit, form };
  },
};
</script>

When handleFormSubmit() fires, I get the following error:
Uncaught TypeError: can't access property "extend", vue__WEBPACK_IMPORTED_MODULE_2__.default is undefined.

I’d appreciate any insight. Let me know if more info is needed.

I would like to know how to install and use mathlive in NuxtJS

please help me I’d like to know why it doesn’t work or if I’m doing it wrong.

I npm i mathlive to get input. And following the implementation of the nuxt plugins in the documentation doesn’t work.

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Nuxtnumer',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['./plugins/mathlive-vue.js'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/',
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ['mathlive-vue']
  },
}

file mathlive-vue.js in directory plugins

import Vue from 'vue';
import * as Mathlive from 'mathlive';
import Mathfield from 'mathlive/dist/vue-mathlive.mjs'

Vue.use(Mathlive,Mathfield)

Error:

ERROR Failed to compile with 1 errors friendly-errors 19:26:11

ERROR in ./node_modules/mathlive/dist/vue-mathlive.mjs friendly-errors 19:26:11

Module parse failed: Unexpected token (2:342) friendly-errors 19:26:11
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /** MathLive 0.69.11 */

How to make Yup field which is object, required if other field is true. -Yup validation

I’m new to using Yup validation.
I’m trying to achieve making fields required based on condition.
as u can see below I want to make this digital object required only if hasDigital is true other wise keep it optional, I tried below approach but it always says digital.pages is required , even when I’m passing hasDigital false.
I tried by removing required tag from hasDigital but still facing same issue.

I don’t know what am I doing wrong, thanks In advance for any help.

const validationSchema=Yup.object({
  hasDigital:Yup.boolean().required(),
  digital:Yup.Object({
    pages:Yup.number().required(),
    price:Yup.number().required()
    }).when("hasDigital", {
        is:true ,
        then: Yup.object().required(),
        otherwise:Yup.object().optional()})
})

How to make SDK from certain API?

I have been making and working with API’s for 2 years now, and wanted to know how to use them to make my own SDK’s. Have read few blogs on net but wasn’t able to get the clear idea how to actually implement it.

On HTML Canvas, certain overlapping colors are creating unwanted shadows

I am playing with various colors on canvas and just noticed that certain overlapping colors (e.g. red on blue) create shadows, as shown in the image below:

enter image description here

If you notice, there’s about 0.5px wide shadow on the right side of the red circle.

I have the following code:

<canvas width="1000" height="1000"></canvas>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// BG
ctx.fillStyle = '#1c4c72'; ctx.fillRect(0, 0, 1000, 1000);

// Circle red
ctx.beginPath(); ctx.arc(500, 500, 250, 0, 2 * Math.PI); ctx.fillStyle = '#9a1500'; ctx.fill();

// Circle white
ctx.beginPath(); ctx.arc(500, 500, 150, 0, 2 * Math.PI); ctx.fillStyle = '#ffffff'; ctx.fill();

Is there a remedy for this or is this something to learn to live with? Thanks for any ideas.

How can I do a config to coop with Redux?

So, I`m working with React and I need to make a config.js file so it could be changed.
I have some template settings in this config. And when I change my template with Redux, I need my config to be completely changed with the Redux state so I could refresh it and have the same settings.

I had an idea about localStorage, but I dont think this is a good idea for business app.

Create array dynamically for javascript

I am trying to show markers on google map. And it is working fine if I use static array for marker’s lat and long.

But when I try to make dynamic using php array, then it is not working.

Here is the code.

 $(document).ready(function(){
   var var_locations = <?=json_encode($locations)?>;

/****** Array which need to make Dynamic *********/
var locations=[
        ['Location <br>Name', 13.0104292, 77.64844689999995, 1],
        ['Location <br>Name', 28.6699553, 77.10752720000005, 1],
    ];
    function initialize() {
        console.log(locations);
        var mapOptions = {
            center: new google.maps.LatLng(20.5937, 78.9629),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var map = new  google.maps.Map(document.getElementById("map"),mapOptions);

        var  i;
        

        for (i = 0; i < locations.length; i++) {
            
          var infoWindow = new google.maps.InfoWindow({
                content: locations[i][0],
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                title:locations[i][0]
            });  
            google.maps.event.addListener(marker, 'click', (function(mm, tt) {
        return function() {
            infoWindow.setContent(tt);
            infoWindow.open(map, mm);
        }
    })(marker, locations[i][0]));

        }
        

    }
google.maps.event.addDomListener(window, 'load', initialize);    

});

I want following array in above code to be dynamic

var locations=[
    ['Location <br>Name', 13.0104292, 77.64844689999995, 1],
    ['Location <br>Name', 28.6699553, 77.10752720000005, 1],
];

For that I am using following code to make it dynamic

var var_locations = <?=json_encode($locations)?>;
var locations=[
       var_locations.forEach(function(item) {
            [item.clinicName, item.latitude, item.longitude],
        });
    ];

But it is not working. To test whether loop is working, I tried to print in console value (item.latitude) in loop, And values are being printed, Means loop is working fine.

But if I use loop inside js array then it is not working. Nor giving error through which I can identify some problem.

How I can make that array dynamic?

vis network double click edit the data

I am trying to create a network graph dynamically using the vis.js library. When I create each node and edge, I want to double click in them and show a pop up window to enter some extra information.
I have made this, but my problem is when I double click again in the same edge/node the information does not store and I lost them. Can you help me with this? I want to keep my previous data and edit the data if the user wants.
Thank you!
I have use this link for my stimulation vis network stimulation

I have add this function to achieve the double click

enter code here document.getElementById("eventSpanHeading").innerText = "doubleClick event:";
      if(data.nodes.length){
       
        document.getElementById("node-operation").innerText = "Add Node Data";
        editNode(data,clearNodePopUp,callback);
        
        
      }
      if(data.edges.length){
        document.getElementById("edge-operation").innerText = "Add Edge Data";
        editEdgeWithoutDrag(data,clearEdgePopUp,callback); 
       
       
      }

Loading a config file in Angular

I have multiple server environment and i need to change backend URL on every Environment , I need to read
backend URL from external file path in angular and set this file on every server and when I make new deployment on any server read from this file