Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
can you help me how can i add i18n localize function to this project? i would like to have a dropdown in the navbar for the languages.
here is the code:
https://github.com/GergoJeles/portfolio_tailwind.git
I would like to have a navbar like here from the flowbite website with the language dropdown.
https://flowbite.com/docs/components/navbar/
I understand that using arr.pick() allows you to pick out a subarray along an orthogonal axis, however, how can I pick out an angled (non-orthogonal) slice?
I’ve tried looking at the other scijs libraries, but i could not find any utility function for this specific problem.
me working on python django school LMS project and facing issue in html dropdown filter. there are 3 fields. teacher name, subject list, and checkbox of classes. If I select class 1 one then that time subject dropdown should be show only related subject but in subject list its showing all subject from database. i will attach a code and required output for reference.
</head>
<body>
<script>
function showSuccessPopup() {
alert("Successfully Submitted");
}
</script>
<h2 style="text-align: center;">Assign Subjects and Classes to Teachers</h2><br>
<div class="container">
<div class="card">
<form method="post" onsubmit="showSuccessPopup()">
{% csrf_token %}
<div class="form-group">
<label for="teacher">Teacher:</label>
<select name="teacher" id="teacher" class="form-control">
<option>----Select Teacher----</option>
{% for teacher in teachers %}
<option value="{{ teacher.id }}">{{ teacher.first_name }} {{ teacher.last_name }}</option>
{% endfor %}
</select>
</div><br>
<div class="form-group">
<label for="subject">Subject:</label>
<select name="subject" id="subject" class="form-control">
<option>----Select Subject-----</option>
{% for subject in subjects %}
<option value="{{ subject.id }}">{{ subject.name }}</option>
{% endfor %}
</select>
</div><br>
<div class="form-group">
<label for="classes">Classes:</label>
{% for cls in classes %}
<div class="form-check">
<input type="checkbox" name="classes" value="{{ cls.id }}" class="form-check-input">
<label class="form-check-label">{{ cls.classes }}</label>
</div>
{% endfor %}
</div>
<button type="submit" class="btn btn-primary">Assign</button>
</form>
</div>
</div>
</body>[dropdown subject](https://i.sstatic.net/Tgkf4GJj.jpg)
Im making an audio enhancer application in electron but as i click on the enhance button in getting this error on console
(node:7587) UnhandledPromiseRejectionWarning: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/adi/spectrum/node_modules/tone/build/esm/core/Global' imported from /home/adi/spectrum/node_modules/tone/build/esm/index.js
at finalizeResolution (node:internal/modules/esm/resolve:264:11)
at moduleResolve (node:internal/modules/esm/resolve:924:10)
at defaultResolve (node:internal/modules/esm/resolve:1137:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36)
(Use `electron --trace-warnings ...` to show where the warning was created)
(node:7587) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 8)
,main js:
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false, // Consider revisiting for security in future development
preload: path.join(__dirname, 'preload.js') // Optional preload script for additional security (refer to Electron documentation)
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
try {
ipcMain.on('enhance-audio', async (event, filePath) => {
const Tone = await import('tone')
const player = new Tone.Player(filePath).toDestination()
const eq = new Tone.EQ({
low: 0,
mid: 1,
high: 0
}).toDestination()
player.connect(eq)
player.start()
const outputPath = 'enhanced_audio.mp3' // Replace with your logic
event.sender.send('enhancement-complete', outputPath)
})
} catch (error) {
console.log("error",error)
}
this is a main js file, which is responsible for much of the work.
below is renderer.js
const ipcRenderer = require('electron').ipcRenderer
const audioUpload = document.getElementById('audio-upload')
const enhanceButton = document.getElementById('enhance-button')
const outputFilename = document.getElementById('output-filename')
enhanceButton.addEventListener('click', () => {
const filePath = audioUpload.files[0].path
console.log("Sending file path:", filePath);
ipcRenderer.send('enhance-audio', filePath)
})
ipcRenderer.on('enhancement-complete', (event, outputPath) => {
outputFilename.textContent = `Enhanced file: ${outputPath}`
})
this is index html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spectrum</title>
</head>
<body>
<h1>Audio Enhancer</h1>
<input type="file" id="audio-upload">
<button id="enhance-button">Enhance</button>
<p id="output-filename"></p>
<script src="renderer.js"></script>
</body>
</html>
and
this is my package json
{
"name": "spectrum",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"electron": "^30.0.3"
},
"dependencies": {
"path": "^0.12.7",
"tone": "^14.9.17"
}
}
I tried Gemini and CHATGPT and tried to re import libs but its working
I want to send an email with a custom sender, but some reason it always says SharePoint Online.
await pnp.sp.utility.sendEmail({
From: "Tester",
To: ["[email protected]"],
Subject: "Test",
Body: "Hi this is a test email",
})
For example, I have slick library connected and I wrote a small js script to add active class for certain blocks. The thing is that the library starts working only after I make some manipulations with the slider, and until then there is nothing in place of pictures (except for the slider). The problem is that there are no errors in the console, what could be the problem? Here is my js:
<script>
window.addEventListener('load', function() {
const stepCircles = document.querySelectorAll('.step-circle');
const sections = document.querySelectorAll('.section');
stepCircles.forEach(stepCircle => {
stepCircle.addEventListener('click', () => {
const section = document.querySelector(`.${stepCircle.dataset.section}`);
sections.forEach(section => section.classList.remove('active'));
section.classList.add('active');
stepCircles.forEach(stepCircle => stepCircle.classList.remove('active'));
stepCircle.classList.add('active');
});
});
});
</script>
I want to test that closing a tab (or reloading the tab) results in a confirmation box being displayed. If the user clicks ‘cancel’, the confirmation box should disappear and the page didn’t reload.
I tried to test this with something like this:
cy.on('window:confirm', () => false)
cy.reload()
However, this fails – the page just reloads & the confirmation box doesn’t appear. (The confirmation box is definitely working).
In my NextJS 14 app, I am trying to get a Swiper working.
My issue is that only the first slide works, the other ones are not visible. When I console.log my slide images to ensure they are loaded correctly, I can see that they are so the issue isn’t there. If I put the same image for all the slides, only the first one loads still. So the issue isn’t from the images I am trying to use in my swiper. I also tried several other packages offering carousels/swipers, and even written by myself without a package, all the codes I have tried led to the same issue, one slide only. I figured at some point that it looks like the 3 images/ slides are actually appearing yet the last two for just a second, then they vanish, leaving only the first one on screen. It really seems to be the case with every swipers. I also tried “use client”, without success…
To Reproduce:
Please note that the first slide is also controllable with the mouse while the other 2 aren’t. Which means they probably just aren’t there, while the pagination shows my three items properly…
Here is my code:
"use client";
import React, { useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/scss";
import "swiper/scss/pagination";
import { Autoplay, Pagination } from "swiper/modules";
import Image from "next/image";
import slide1 from "../../public/assets/img/surfboard.jpg";
import slide2 from "../../public/assets/img/beach-surfers.jpg";
import slide3 from "../../public/assets/img/homepage-bg.jpg";
import "./Carousel.scss";
export const Carousel: React.FC = () => {
const images = [slide1, slide2, slide3];
console.log("slide 1: ", slide1); // output: slide 1: Object{...}
console.log("slide 2: ", slide2); // output: slide 2: Object{...}
console.log("slide 3: ", slide3); // output: slide 3: Object{...}
return (
<>
<Swiper
pagination={{ clickable: true }}
modules={[Pagination, Autoplay]}
autoplay={{
delay: 3000,
}}
className="swiper"
>
{images.map((imageUrl, index) => (
<SwiperSlide key={index} className="swiper__slide">
<div className="swiper__slide__img-container">
<Image
src={imageUrl}
alt="image"
layout="fill"
objectFit="cover"
className="swiper__slide__img-container__img"
/>
</div>
</SwiperSlide>
))}
<div></div>
</Swiper>
</>
);
};
I have tried downgrading my swiper version as I used it in a recent NextJS project in which I had no issue, but no luck either. I also tried downgrading my NextJS version, nothing either.
Here is what my current package.json looks like, in case it may help…
{
"dependencies": {
"@reduxjs/toolkit": "^2.2.3",
"@supabase/supabase-js": "^2.43.1",
"dotenv": "^16.4.5",
"next": "14.2.3",
"react": "^18",
"react-bootstrap": "^2.10.2",
"react-dom": "^18",
"react-icons": "^5.2.1",
"sass": "^1.77.0",
"swiper": "^11.0.5"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.3",
"typescript": "^5"
}
}
Hope someone can help! Thanks 🙂
Expected Behavior
The swiper should display all 3 slides/Images instead of just one.
Actual Behavior
Only showing one slide
I am getting this error, could anyone help?
import React from "react";
import { View, TouchableWithoutFeedback} from 'react-native';
import Video from 'react-native-video';
import styles from "./styles";
import { useState } from 'react';
const Post = () => {
const [paused, setPaused] = useState(false);
const onPlayPausePress = () => {
setPaused(!paused);
};
return (
<View style = {styles.container}>
<TouchableWithoutFeedback onPress={onPlayPausePress}>
{/* <> */}
<Video
source={{uri: "https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/proccessed_720.mp4"}}
style={styles.video}
onError={(e) => console.log(e)}
resizeMode={"cover"}
repeat={true}
paused={paused}
/>
{/* </> */}
</TouchableWithoutFeedback>
</View>
);
}
export default Post;
import { StyleSheet,Dimensions } from "react-native";
const styles = StyleSheet.create({
container: {
width: '100%',
height: Dimensions.get('window').height,
},
video: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
},
})
export default styles;
Hello, I am trying to add the functionality of play pause when clicked and it is giving me a error.
I tried changing tags looking for answers online but nothing.
The error message is:
Exception thrown while executing UI block: -[RCTVideo setOnClick:]: unrecognise selector sent to instance.
I’m setting up a playwright project and trying to store Basic auth for reusability in my tests using dependencies.
The setup always passes, yet the example spec fails with the error page.goto: net::ERR_INVALID_AUTH_CREDENTIALS at https://the-internet.herokuapp.com/basic_auth
My config file:
// @ts-check
const {defineConfig, devices} = require('@playwright/test');
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();
/**
* @see https://playwright.dev/docs/test-configuration
*/
module.exports = defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'https://the-internet.herokuapp.com/basic_auth',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'setup',
testDir: './',
testMatch: 'globalSetup.js'
},
{
name: 'testrun',
dependencies: ['setup'],
use: { storageState: './LoginAuth.json' }
},
],
}
globalSetup:
test('setup', async ({ page }) => {
const authHeaders = 'Basic ' + Buffer.from('admin:admin').toString('base64');
await page.setExtraHTTPHeaders({ Authorization : authHeaders })
await page.goto('');
await expect(page.getByText('Congratulations!')).toBeVisible();
await page.context().storageState({ path: './LoginAuth.json' })
})
my spec:
test('new fckn test', async ({page}) => {
await page.goto('');
await expect(page.getByText('Congratulations!')).toBeVisible();
})
I tried the old way as well already (function globalSetup()) and a few different variations, yet nothing works. What am I doing wrong?
first, I’m french, so please my apologies for my bad english, I also had a serious stroke twenty years ago, so it’s quite difficult for me to understand new tools ( despite this, I still have somme good knowledge in php, html, mysql, css and javascript ) but I have some problems to understand how works quill and modules, by example, I would like to add an image resizer module, but I don’t succed.. Coul someone please help me, and show me the right way to do this kind of things ? ( with a piece of code by example, it should be very nice of uou)
Many thanks in advance,
Guillaume.
I have tried some tutoriel on internet but I don’t succed/ understand with those .. So I turn to you. Thanks in advance.
Guillaume.
I am using Lerna to setup a monorepo, when I import the package into another application I am getting below errors.
react.development.js:210 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
react.development.js:1619 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
at Object.useContext (react.development.js:1619:21)
at useTheme (useThemeWithoutDefault.js:16:59)
at useTheme (useTheme.js:14:77)
at Box (createBox.js:37:72)
at renderWithHooks (react-dom.development.js:15486:18)
at updateForwardRef (react-dom.development.js:19240:20)
at beginWork (react-dom.development.js:21670:16)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
**Below is the @dummy/login/lib/login.tsx -**
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function Login() {
return (
<Box>
<p>I am inside FE code.</p>
);
}
**Below is the Application code where I am trying to import login.tsx :-**
import Login from "@dummy/login";
import React from "react";
import Box from '@mui/material/Box';
const LoginComponent:any = () => {
return (
<Box>
<Login></Login>
</Box>
)
}
export default LoginComponent;
Please help me fix the issue.
I am expecting the output to display as “I am inside FE code.”
The above code works fine if I remove the styled components and if I dont use any react hooks.
I am trying to change a fontawesome icon (which is automatically switched out from an <i> element with a title attribute, to an <svg> element with a nested <title> element), by changing the class on the resulting <svg> element. However I also need to update the nested <title> element, but I am seeing that changing the class will result in the nested <title> element being removed. How should I update the <title> element? I might also add that I’m not using any modules, I’m simply using the fontawesome script from a cdn:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script>
const getIconOuterHTML = () => {
return new Promise((resolve) => {
setTimeout(() => {
const iconEl = document.querySelector('#commentIcon');
let output = $('<div>').text(iconEl.outerHTML).html();
//console.log(output);
output = output.replaceAll('><', '>n<');
resolve(output);
}, 200);
});
}
$(document).ready(async () => {
document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML();
});
$(document).on('click', '#switchIconBtn', async (ev) => {
const iconEl = document.querySelector('#commentIcon');
const titleElId = iconEl.getAttribute('aria-labelledby');
const titleEl = iconEl.querySelector(`#${titleElId}`);
if( iconEl.classList.contains('fa-comment-dots') ) {
iconEl.classList.remove('fa-comment-dots');
iconEl.classList.add('fa-comment-medical');
if(titleEl !== null){
titleEl.textContent = 'add a comment';
} else {
alert('could not find title element');
}
} else {
iconEl.classList.remove('fa-comment-medical');
iconEl.classList.add('fa-comment-dots');
if(titleEl !== null){
titleEl.textContent = 'edit comment';
} else {
alert('could not find title element');
}
}
document.querySelector('#htmlRepresentation').innerHTML = await getIconOuterHTML();
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/js/all.min.js"></script>
<i class="fas fa-comment-medical" title="add a comment" id="commentIcon"></i>
<div><button id="switchIconBtn" style="margin-top: 15px;">Switch icon and title</button></div>
<div>Resulting HTML:</div>
<pre id="htmlRepresentation"></pre>As you can see in the resulting HTML representation, clicking on the button which changes the icon class will result in the <title> element getting removed. How should I approach updating the title?
I’m new to using java script in Qualtrics and I have a question – maybe someone here can help me?
I’m running a study where participants are randomly allocated to read one of 16 vignettes. Of course, I could set this up using the survey builder and survey flow, but I would like to use code – this is a pilot study for a larger experiment with over 500 vignettes, which would be too complicated to set up manually.
What I think I need to do is to set embedded data fields with variable names for each vignette, and then tell Qualtrics the corresponding vignette text for each name. Next, I can use the survey flow to randomly assign one vignette to each participant.
I have never used java script before, so this is the code I scrambled together (it’s probably totally wrong):
Qualtrics.SurveyEngine.addOnload(function() {
// Get the value of the selected variable from embedded data
var selectedVariable = "${e://Field/SelectedVariable}";
// Define the vignettes with their corresponding text
var vignettes = {
"aAA1BB1AB1BA1": "Text for vignette 1...",
"aAA1BB1AB1BA0": "Text for vignette 2...",
// Add more vignettes as needed
};
// Get the text for the selected vignette based on the selected variable
var selectedVignetteText = vignettes[selectedVariable];
// Set the text of the question to display the selected vignette
this.getQuestionTextContainer().innerHTML = selectedVignetteText;
});
Could somebody help me with this?
I entered the code above in the java script window for a text/ graphic question, but when I click preview it just says “undefined”.
I also tried to enter something similar into the html view in the rich text editor, but the code was never saved there and always disappeared.
I got this warning: VirtualizedList: You have a large list that is slow to update – make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {“contentLength”: 8832, “dt”: 1939, “prevDt”: 1122}
code 1
import React, { useMemo } from 'react';
const Verse = React.memo(({ coord, verse, color }) => (
<div key={coord.key} style={{position: 'absolute', top: `${coord.top}%`, right: `${coord.right}%`, width: `${coord.width}%`, height: `${coord.height}%`, backgroundColor: color}}>
{verse}
</div>
));
const renderItem = (coord, verse, color) => <Verse coord={coord} verse={verse} color={color} />;
const MushafPage = React.memo(({ pageData, parts = 2 }) => {
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'pink']; // Array of colors
// Calculate the total height of all verses
const totalHeight = useMemo(() => pageData.reduce((total, item) => total + item.coord.reduce((totalCoord, coord) => totalCoord + coord.top + coord.height, 0), 0), [pageData]);
// Calculate the height of each part
const partHeight = totalHeight / parts;
// Initialize the current part and its height
let currentPart = 0;
let currentHeight = 0;
return (
<div>
{pageData.map((item) => {
return item.coord.map((coord, index) => {
// Add the height of the current item to the current height
currentHeight += coord.top + coord.height;
// If the current height exceeds the part height, move to the next part
if (currentHeight > partHeight) {
currentPart++;
currentHeight -= partHeight; // Subtract the partHeight from the currentHeight
}
// Choose a color based on the current part
const color = colors[currentPart % colors.length];
return renderItem(coord, item.verse, color);
});
})}
</div>
);
});
export default MushafPage;
The code above will be imported into the this file code ,
code 2:
import React, { useEffect, useState } from 'react';
import MushafPage from '../../components/MushafPage';
// Import JSON files
import data1 from '../../assets/mushaf/juz30/content/1.json';
import data2 from '../../assets/mushaf/juz30/content/2.json';
import data3 from '../../assets/mushaf/juz30/content/3.json';
import data4 from '../../assets/mushaf/juz30/content/4.json';
function Block() {
const [pageData, setPageData] = useState([]);
useEffect(() => {
// Combine all JSON data into one array
const allData = [data1, data2, data3, data4];
setPageData(allData.flat());
}, []);
return (
<div className="Block">
{pageData.map((data, index) => <MushafPage key={index} pageData={data} parts={2} />)}
</div>
);
}
export default React.memo(Block);
then in it there are .json files which are the basis for dividing the pages, like this
code 3:
[
{
"key": "581-1",
"verse": "78:1",
"coord": [
{
"key": "78:1:1",
"top": 21.6,
"right": 2.2,
"width": 26.1,
"height": 4.7
}
]
},
{
"key": "581-2",
"verse": "78:2",
"coord": [
{
"key": "78:2:1",
"top": 21.6,
"right": 28.4,
"width": 28.1,
"height": 4.7
}
]
},
{
"key": "581-3",
"verse": "78:3",
"coord": [
{
"key": "78:3:1",
"top": 21.6,
"right": 56.75,
"width": 36.2,
"height": 4.7
}
]
},
{
"key": "581-4",
"verse": "78:4",
"coord": [
{
"key": "78:4:1",
"top": 26.7,
"right": 2.2,
"width": 26.1,
"height": 4.7
}
]
},
{
"key": "581-5",
"verse": "78:5",
"coord": [
{
"key": "78:5:1",
"top": 26.7,
"right": 28.75,
"width": 28.6,
"height": 4.7
}
]
},
{
"key": "581-6",
"verse": "78:6",
"coord": [
{
"key": "78:6:1",
"top": 26.7,
"right": 57.5,
"width": 36.1,
"height": 4.7
}
]
},
{
"key": "581-7",
"verse": "78:7",
"coord": [
{
"key": "78:7:1",
"top": 31.8,
"right": 2.2,
"width": 27.1,
"height": 4.7
}
]
},
{
"key": "581-8",
"verse": "78:8",
"coord": [
{
"key": "78:8:1",
"top": 31.8,
"right": 31,
"width": 30.1,
"height": 4.7
}
]
},
{
"key": "581-9",
"verse": "78:9",
"coord": [
{
"key": "78:9:1",
"top": 31.8,
"right": 61.75,
"width": 32,
"height": 4.7
},
{
"key": "78:9:2",
"top": 36.9,
"right": 2.2,
"width": 5.1,
"height": 4.7
}
]
},
{
"key": "581-10",
"verse": "78:10",
"coord": [
{
"key": "78:10:1",
"top": 36.9,
"right": 7.2,
"width": 35.6,
"height": 4.7
}
]
},
{
"key": "581-11",
"verse": "78:11",
"coord": [
{
"key": "78:11:1",
"top": 36.9,
"right": 42.9,
"width": 39.1,
"height": 4.7
}
]
},
{
"key": "581-12",
"verse": "78:12",
"coord": [
{
"key": "78:12:1",
"top": 36.9,
"right": 82.25,
"width": 11.5,
"height": 4.7
},
{
"key": "78:12:2",
"top": 42.05,
"right": 2.2,
"width": 36.6,
"height": 4.7
}
]
},
{
"key": "581-13",
"verse": "78:13",
"coord": [
{
"key": "78:13:1",
"top": 42.05,
"right": 40,
"width": 40.6,
"height": 4.7
}
]
},
{
"key": "581-14",
"verse": "78:14",
"coord": [
{
"key": "78:14:1",
"top": 42.05,
"right": 82,
"width": 11.5,
"height": 4.7
},
{
"key": "78:14:2",
"top": 47.15,
"right": 2.2,
"width": 40.1,
"height": 4.7
}
],
"covers": {
"firstWord": [
{
"key": "78:14:1",
"top": 47.15,
"right": 2.2,
"width": 35,
"height": 4.7
}
],
"invisible": [
{
"key": "78:14:1",
"top": 42.05,
"right": 82,
"width": 11.5,
"height": 4.7
},
{
"key": "78:14:2",
"top": 47.15,
"right": 2.2,
"width": 35,
"height": 4.7
}
]
}
},
{
"key": "581-15",
"verse": "78:15",
"coord": [
{
"key": "78:15:1",
"top": 47.15,
"right": 42.47,
"width": 38.1,
"height": 4.7
}
]
},
{
"key": "581-16",
"verse": "78:16",
"coord": [
{
"key": "78:16:1",
"top": 47.15,
"right": 81.5,
"width": 12,
"height": 4.7
},
{
"key": "78:16:2",
"top": 52.35,
"right": 2.2,
"width": 14.6,
"height": 4.7
}
]
},
{
"key": "581-17",
"verse": "78:17",
"coord": [
{
"key": "78:17:1",
"top": 52.35,
"right": 17.5,
"width": 45.1,
"height": 4.7
}
]
},
{
"key": "581-18",
"verse": "78:18",
"coord": [
{
"key": "78:18:1",
"top": 52.35,
"right": 62.75,
"width": 30,
"height": 4.7
},
{
"key": "78:18:2",
"top": 57.45,
"right": 2.2,
"width": 24.6,
"height": 4.7
}
]
},
{
"key": "581-19",
"verse": "78:19",
"coord": [
{
"key": "78:19:1",
"top": 57.45,
"right": 27.3,
"width": 50.1,
"height": 4.7
}
]
},
{
"key": "581-20",
"verse": "78:20",
"coord": [
{
"key": "78:20:1",
"top": 57.45,
"right": 77.75,
"width": 15.5,
"height": 4.7
},
{
"key": "78:20:2",
"top": 62.55,
"right": 2.2,
"width": 36.1,
"height": 4.7
}
]
},
{
"key": "581-21",
"verse": "78:21",
"coord": [
{
"key": "78:21:1",
"top": 62.55,
"right": 39,
"width": 39.85,
"height": 4.7
}
]
},
{
"key": "581-22",
"verse": "78:22",
"coord": [
{
"key": "78:22:1",
"top": 62.55,
"right": 78.85,
"width": 14.75,
"height": 4.7
},
{
"key": "78:22:2",
"top": 67.65,
"right": 2.2,
"width": 13.85,
"height": 4.7
}
]
},
{
"key": "581-23",
"verse": "78:23",
"coord": [
{
"key": "78:23:1",
"top": 67.7,
"right": 16.25,
"width": 33.6,
"height": 4.7
}
]
},
{
"key": "581-24",
"verse": "78:24",
"coord": [
{
"key": "78:24:1",
"top": 67.7,
"right": 50,
"width": 43.5,
"height": 4.7
},
{
"key": "78:24:2",
"top": 72.85,
"right": 2.2,
"width": 5.1,
"height": 4.7
}
] },
{
"key": "581-25",
"verse": "78:25",
"coord": [
{
"key": "78:25:1",
"top": 72.85,
"right": 7.4,
"width": 37.6,
"height": 4.7
}
]
},
{
"key": "581-26",
"verse": "78:26",
"coord": [
{
"key": "78:26:1",
"top": 72.85,
"right": 45,
"width": 27.6,
"height": 4.7
}
]
},
{
"key": "581-27",
"verse": "78:27",
"coord": [
{
"key": "78:27:1",
"top": 72.85,
"right": 73,
"width": 20,
"height": 4.7
},
{
"key": "78:27:2",
"top": 77.95,
"right": 2.2,
"width": 32.6,
"height": 4.7
}
]
},
{
"key": "581-28",
"verse": "78:28",
"coord": [
{
"key": "78:28:1",
"top": 77.95,
"right": 34.9,
"width": 43.1,
"height": 4.7
}
]
},
{
"key": "581-29",
"verse": "78:29",
"coord": [
{
"key": "78:29:1",
"top": 77.95,
"right": 78,
"width": 15.5,
"height": 4.7
},
{
"key": "78:29:2",
"top": 83.05,
"right": 2.2,
"width": 31.1,
"height": 4.7
}
],
"covers": {
"firstWord": [
{
"key": "78:29:1",
"top": 77.95,
"right": 85.25,
"width": 8.25,
"height": 4.7
},
{
"key": "78:29:2",
"top": 83.05,
"right": 2.2,
"width": 26,
"height": 4.7
}
]
},
{
"key": "581-30",
"verse": "78:30",
"coord": [
{
"key": "78:30:1",
"top": 83.05,
"right": 33.75,
"width": 59.1,
"height": 4.95
}
]
}
]
The context is that I want to divide a manuscript page into several parts (2-8 parts) using Code 1, which applies color. After that, I use Code 2 to import Code 1, enabling it to be applied to five .json files. These files contain coordinate image data for the start and end of each paragraph. Code 3 refers to the original .json file, which contains the coordinates of each item and the length of the paragraph. In the original implementation, there were ten .json files
I have tried many times to optimize my code but the program still gives the same warning, namely: VirtualizedList: You have a large list that is slow to update – make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {“contentLength”: 8832, “dt”: 1939, “prevDt”: 1122}