Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I am writing a Chrome extension that can extract items from a page like this: https://ny.eater.com/maps/taylor-swift-nyc-restaurants
I am only interested in the following items:
<h1>, <h2>, <h3>, <h4> etc header tags<b> bold tagsWhat’s the best way to achieve this?
I am writing a Chrome extension that can extract items from a page like this: https://ny.eater.com/maps/taylor-swift-nyc-restaurants
I am only interested in the following items:
<h1>, <h2>, <h3>, <h4> etc header tags<b> bold tagsWhat’s the best way to achieve this?
We utilize the html2pdf library and require the bugfix/clone-nodes-BUILD, but it is causing deployment issues for us. Despite being created later, versions 0.9.1 and 0.9.3 do not include this fix. Does version 0.10 or 0.10.1 incorporate the necessary bugfix/clone-nodes-BUILD?
we tried to use the 0.9.1/0.9.3 version with no success
animation does not work on IOS, although it works on a computer and in adaptive mode, everything is correct, tell me what is the reason
I was shocked because it works on the computer and as a mobile version on the computer, but does not work on IOS ((
[codepen](https://codepen.io/Nazar1992/pen/WNPZyLM)
Is it possible in JavaScript to iterate a deep nested object and get the full path for each key being iterated?
Iterating an object recursively is not a problem. But somehow assembling the path doesn’t really work.
I want to keep user “deleted” document for next one month in db and then it should be deleted automatically
let product = new Schema({
name: String,
trash: false
},
{
timestamps: true
}
);
let task = { $set: { trash: true };
removeDoc = await Product.findOneAndUpdate(query, task, {new: true });
Through the code below, we tried to reissue the token through the React Axios Interceptor and retry the existing request that was denied due to the token expiration.
When testing on local host, requests that were buffered while the token was refreshed work well again after the access token was reissued, but not on the distributed page.
Can’t I access the error’s config in the https environment?
let isTokenRefreshing = false;
const refreshSubscribers = [];
const onTokenRefreshed = accessToken => {
refreshSubscribers.map(callback => {
callback(accessToken);
});
};
const addRefreshSubscriber = callback => {
refreshSubscribers.push(callback);
};
AxiosInterceptor.interceptors.response.use(
response => {
return response;
},
async error => {
if (error.response && error.response.status === 401) {
const originalRequest = error.config;
if (isTokenRefreshing === false) {
isTokenRefreshing = true;
const tokenData = await localStorage.getItem('token');
const { refreshToken } = JSON.parse(tokenData);
try {
const resp = await axios.post(
`refresh token api url`,
null,
{
params: { refreshToken },
headers: {
Authorization: null,
},
},
);
if (parseInt(resp.status / 200, 10) === 1) {
await localStorage.setItem('token', JSON.stringify(resp.data));
isTokenRefreshing = false;
axios.defaults.headers.common.Authorization = `Bearer ${resp.data.accessToken}`;
onTokenRefreshed(resp.data.accessToken);
}
} catch (e) {
if (e.response.status === 401) {
localStorage.clear();
window.location.reload();
}
}
}
const retryOriginalRequest = new Promise(resolve => {
addRefreshSubscriber(accessToken => {
originalRequest.headers.Authorization = `Bearer ${accessToken}`;
resolve(axios(originalRequest));
});
});
return retryOriginalRequest;
}
return error;
},
);
I want to know why it works well in a local host environment, but it doesn’t work well in a deployed environment.
I’m trying to create a project with the help of the post from the following link : Blog Link
I cloned the source code for the ESP from it’s Git Hub and added the extra code for the webpage from the post as a string in the provided ESP setup code. The stream is visible on port 81 on my IP and the webpage is visible on adding /art to the IP, but the webpage is showing an error in sourcing the stream as it is trying to get the stream from the IP which is given in the post. I changed the IP everywhere in the code but I’m still receiving the same error message. It would be helpful if you provide me with some guidance. I’m trying to work this code in VSCode with the PIO extension.
I’m providing my code below:
#include <Arduino.h>
#include <WiFi.h>
#include "esp_http_server.h"
#include "esp_timer.h"
#include "esp_camera.h"
#include "img_converters.h"
#include "camera_pins.h"
#include "page.h"
#define PART_BOUNDARY "123456789000000000000987654321"
static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "rn--" PART_BOUNDARY "rn";
static const char* _STREAM_PART = "Content-Type: image/jpegrnContent-Length: %urnrn";
httpd_handle_t camera_httpd = NULL;
httpd_handle_t stream_httpd = NULL;
const char* ssid = "******";
const char* password = "*******";
const char htmlContent[] = R"(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32-CAM Style Transfer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
font-family: "PT Sans", sans-serif;
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
color: #636060;
line-height: 1.6;
}
a {
text-decoration: none;
color: #ccc;
}
h2 {
margin-left: auto;
margin-right: auto;
color: #ffffff;
margin-bottom: 10px;
}
h3 {
color: #ffffff;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
margin-top: 5px;
background: #a944a6;
color: #FFFFFF;
}
input[type="file"] {
display: none;
}
button {
margin-top: 5px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@magenta/image@^0.2.1"></script>
<p id="currentIP">Current IP Address: <span id="ipAddress">192.168.1.1</span></p>
<script language="javascript">
function loadImage(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
var styleImg = document.getElementById("img_style");
styleImg.title = selectedFile.name;
reader.onload = function(event) {
styleImg.src = event.target.result;
};
reader.readAsDataURL(selectedFile);
}
function applyStyle() {
console.log("Applying style...");
const model = new mi.ArbitraryStyleTransferNetwork();
const contentImg = document.getElementById("img_source");
const styleImg = document.getElementById("img_style");
const stylizedCanvas = document.getElementById("stylized");
contentImg.onload = function() {
console.log("Capturing content image..");
model.initialize().then( function() {
model.stylize(contentImg, styleImg).then((imageData) => {
stylizedCanvas.getContext("2d").putImageData(imageData, 0, 0);
contentImg.onload = null;
contentImg.src = "http://192.168.1.6/capture?t=" + Math.random();
});
});
}
contentImg.src = "http://192.168.1.6/capture?t=" + Math.random();
}
</script>
</head>
<body>
<div class="container">
<h2>Magenta Style Transfer with ESP32-CAM</h2>
<div class="row">
<div class="col-sm">
<img id="img_style" width="320" height="200" />
<label for="stylefile" class="custom-file-upload">Select your style file
<input type="file" id="stylefile" class="form-control-file" onchange='loadImage(event)'>
</label>
</div>
<div class="col-sm">
<img id="img_source" width="320" height="200" src="http://192.168.1.6 " crossorigin style="border:1px solid red"/>
<button type="button" class="btn btn-primary" onclick='applyStyle()'>Apply Style to Image</button>
</div>
</div>
<div class="row">
<div class="col-sm align-middle">
<span></span>
</div>
<div class="col-sm">
<h3>Your styled image</h3>
<canvas id="stylized" width="320" height="200"></canvas>
</div>
</div>
</div>
</body>
</html>
)";
static esp_err_t capture_handler(httpd_req_t *req){
Serial.println("Capture image");
camera_fb_t *fb = NULL;
esp_err_t res = ESP_OK;
fb = esp_camera_fb_get();
if (!fb) {
Serial.println("Camera capture failed");
httpd_resp_send_500(req);
return ESP_FAIL;
}
httpd_resp_set_type(req, "image/jpeg");
httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
res = httpd_resp_send(req, (const char *)fb->buf, fb->len);
esp_camera_fb_return(fb);
return res;
}
static esp_err_t page_handler(httpd_req_t *req) {
httpd_resp_set_type(req, "text/html");
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
httpd_resp_send(req, page, sizeof(page));
return ESP_OK;
}
static esp_err_t stream_handler(httpd_req_t *req){
camera_fb_t *fb = NULL;
esp_err_t res = ESP_OK;
size_t _jpg_buf_len = 0;
uint8_t *_jpg_buf = NULL;
char part_buf[64];
res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
if (res != ESP_OK) {
return res;
}
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
while (true) {
fb = esp_camera_fb_get();
if (!fb) {
Serial.println("Camera capture failed");
res = ESP_FAIL;
} else {
if (fb->format != PIXFORMAT_JPEG) {
bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
esp_camera_fb_return(fb);
fb = NULL;
if (!jpeg_converted) {
Serial.println("JPEG compression failed");
res = ESP_FAIL;
}
} else {
_jpg_buf_len = fb->len;
_jpg_buf = fb->buf;
}
}
if (res == ESP_OK) {
res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
}
if (res == ESP_OK) {
size_t hlen = snprintf(part_buf, 64, _STREAM_PART, _jpg_buf_len);
res = httpd_resp_send_chunk(req, part_buf, hlen);
}
if (res == ESP_OK) {
res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
}
if (fb) {
esp_camera_fb_return(fb);
fb = NULL;
_jpg_buf = NULL;
} else if (_jpg_buf) {
free(_jpg_buf);
_jpg_buf = NULL;
}
if (res != ESP_OK) {
break;
}
}
return res;
}
void startCameraServer(){
httpd_config_t config = HTTPD_DEFAULT_CONFIG();
httpd_uri_t index_uri = {
.uri = "/",
.method = HTTP_GET,
.handler = stream_handler,
.user_ctx = NULL
};
httpd_uri_t page_uri = {
.uri = "/art",
.method = HTTP_GET,
.handler = page_handler,
.user_ctx = NULL
};
httpd_uri_t capture_uri = {
.uri = "/capture",
.method = HTTP_GET,
.handler = capture_handler,
.user_ctx = NULL
};
Serial.printf("Starting web server on port: '%d'n", config.server_port);
if (httpd_start(&camera_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(camera_httpd, &capture_uri);
httpd_register_uri_handler(camera_httpd, &page_uri);
}
// Start stream using another webserver
config.server_port += 1;
config.ctrl_port += 1;
Serial.printf("Starting stream server on port: '%d'n", config.server_port);
if (httpd_start(&stream_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(stream_httpd, &index_uri);
}
}
void setup() {
Serial.begin(9600);
Serial.println("Serial communication started.");
// ... (Other setup code)
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) {
Serial.println("");
Serial.println("WiFi connected");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
} else {
Serial.println("");
Serial.println("Failed to connect to WiFi");
return;
}
// Camera configuration
camera_config_t config;
config.ledc_channel = LEDC_CHANNEL_0;
config.ledc_timer = LEDC_TIMER_0;
config.pin_d0 = Y2_GPIO_NUM;
config.pin_d1 = Y3_GPIO_NUM;
config.pin_d2 = Y4_GPIO_NUM;
config.pin_d3 = Y5_GPIO_NUM;
config.pin_d4 = Y6_GPIO_NUM;
config.pin_d5 = Y7_GPIO_NUM;
config.pin_d6 = Y8_GPIO_NUM;
config.pin_d7 = Y9_GPIO_NUM;
config.pin_xclk = XCLK_GPIO_NUM;
config.pin_pclk = PCLK_GPIO_NUM;
config.pin_vsync = VSYNC_GPIO_NUM;
config.pin_href = HREF_GPIO_NUM;
config.pin_sccb_sda = SIOD_GPIO_NUM;
config.pin_sccb_scl = SIOC_GPIO_NUM;
config.pin_pwdn = PWDN_GPIO_NUM;
config.pin_reset = RESET_GPIO_NUM;
config.xclk_freq_hz = 20000000;
config.pixel_format = PIXFORMAT_JPEG;
// if PSRAM IC present, init with UXGA resolution and higher JPEG quality
// for larger pre-allocated frame buffer.
if (psramFound()) {
config.frame_size = FRAMESIZE_QVGA;
config.jpeg_quality = 10;
config.fb_count = 2;
} else {
config.frame_size = FRAMESIZE_QVGA;
config.jpeg_quality = 12;
config.fb_count = 1;
}
#if defined(CAMERA_MODEL_ESP_EYE)
pinMode(13, INPUT_PULLUP);
pinMode(14, INPUT_PULLUP);
#endif
// Camera init
esp_err_t err = esp_camera_init(&config);
if (err != ESP_OK) {
Serial.printf("Camera init failed with error 0x%x", err);
return;
}
sensor_t *s = esp_camera_sensor_get();
// initial sensors are flipped vertically and colors are a bit saturated
if (s->id.PID == OV3660_PID) {
s->set_vflip(s, 1); // flip it back
s->set_brightness(s, 1); // up the brightness just a bit
s->set_saturation(s, 0); // lower the saturation
}
// drop down frame size for higher initial frame rate
s->set_framesize(s, FRAMESIZE_QVGA);
#if defined(CAMERA_MODEL_M5STACK_WIDE)
s->set_vflip(s, 1);
s->set_hmirror(s, 1);
#endif
startCameraServer();
Serial.print("Camera Ready! Use 'http://");
Serial.print(WiFi.localIP());
Serial.println("' to connect");
}
void loop() {
// put your main code here, to run repeatedly:
delay(10);
}
I changed the IP everywhere in the code but it’s not helping.
I have an array that contain
var arr = [{
firstName: 'Jane',
lastName:'Doe',
age:19,
isActive: true
},
{
firstName: 'Wane',
lastName:'Doe',
age:21,
isActive: false
},
{
firstName: 'Kane',
lastName:'Doe',
age:23,
isActive: false
},
{
firstName: 'Mane',
lastName:'Doe',
age:25,
isActive: true
}]
The sorting function looks like
const sortedRows = (rows: any) => {
let order === 'asc'; // this is static for the time being
return [...rows].sort((a, b) => {
const aData = a['firstName'] === null ? '' : a['firstName'];
const bData = b['firstName'] === null ? '' : b['firstName'];
if (order === 'asc') {
return aData > bData ? 1 : -1;
}
return bData > aData ? 1 : -1;
});
};
The sorting works as expected but I would like to align isActive:false elements at the end of the sorted rows.
So the final result should be like
[
{
"firstName": "Jane",
"lastName": "Doe",
"age": 19,
"isActive": true
},
{
"firstName": "Mane",
"lastName": "Doe",
"age": 25,
"isActive": true
},
// listing all isActive:false at the end
{
"firstName": "Kane",
"lastName": "Doe",
"age": 23,
"isActive": false
},
{
"firstName": "Wane",
"lastName": "Doe",
"age": 21,
"isActive": false
}
]
I have the code that when the button is pressed play a different animation, but I would like to assign each animation to a certain button, how would I change it? Could i just use array.push(value)?
Javascript:
const nextButtonComponent = () => ({
init() {
const animationList = ['idle', 'pockets', 'hiphop', 'chicken']
const model = document.getElementById('model')
const nextButton = document.getElementById('nextbutton')
nextButton.style.display = 'block'
let idx = 1 // Start with the 2nd animation because the model starts with idle animation
const nextAnimation = () => {
model.setAttribute('animation-mixer', {
clip: animationList[idx],
loop: 'repeat',
crossFadeDuration: 0.4,
})
idx = (idx + 1) % animationList.length
}
nextButton.onclick = nextAnimation // Switch to the next animation when the button is pressed.
},
})
export {nextButtonComponent}
I have below function in my service file which i am executing from Component, i want to prepare one get URL from below function.
getStartEndTime(body) {
const query = `select min(shiftstart) starttimeofmonth,max(shiftend) endtimeofmonth from ShiftCalendarDeDup where lineid=${body.lineId} and factoryid=${body.factoryId} and businessdate between ${body.firstDay} and ${body.lastDay}`;
return this.http.get(`${environment.apiDFOS3BaseUrl}/dfosbroker/generic/query/${query}`);
}
But above code generates below URL in the Network tab
URL :
https://dfos-qa.unilever.com/dfosbroker/generic/query/select%20min(shiftstart)%20starttimeofmonth,max(shiftend)%20endtimeofmonth%20from%20ShiftCalendarDeDup%20where%20lineid=E_A571_A%20and%20factoryid=E_A571%20and%20businessdate%20between%202023-10-01%20and%202023-10-31
My expected output
https://dfos.unilever.com/dfosbroker/generic/query/select min(shiftstart) starttimeofmonth,max(shiftend) endtimeofmonth from ShiftCalendarDeDup where lineid='R_A002_MAFLRIA1' and factoryid='R_A002' and businessdate between '2023-10-01' and '2023-10-31'
Can anyone help me to get my expected output.
So I want to get video input devices from a webapp. I want to filter out virtual cameras.
await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
let devices = await navigator.mediaDevices.enumerateDevices();
devices = devices.filter((device) => device.kind == "videoinput");
I can get the list of devices this way. But they also include virtual cameras.
I could use label property to check if it contains ‘virtual’ text. But users can name it without word ‘virtual’. So it’s not a good enough solution.
Is there a way to get only physical webcams(exclude virtual cameras)?
My task is to use a query, send the mandatory variables and get a pdf from the BE.
Right now, I have the code but I can’t get the pdf downloaded.
In the network tab I can see my request and the response is a url as string
This is the request:
query getCollectionReportOverview(
$filterReportCollectionOverview: ReportCollectionOverviewInput!
) {
getCollectionReportOverview(
filterReportCollectionOverview: $filterReportCollectionOverview
)
}
{
"filterReportCollectionOverview": {
"collectionNames": [
"2024 copy"
],
"collectionNumbers": [
49464
],
"brandName": "fake it",
"createdByName": "John doe",
"createdBy": "125256",
"sortby": "masterCategoryName"
}
}
I’m not entirely sure about the code for getting the pdf but the query works.
As a result, the response is a url as a string.
I’ve tried this code to display the pdf in the app I can’t see any pdf downloaded.
Here is my code
const CreateViewButton = ({ isLargeScreen, onClick, isOptionSelected }: ButtonProps): ReactElement => (
<Button size={isLargeScreen ? 'large' : 'small'} disabled={!isOptionSelected} onClick={(): void => void onClick()}>
view report
</Button>
);
export const ReportsFooter = ({
isOptionSelected,
handleOnClearAll,
sortby,
collectionNames,
collectionNumbers,
brandName,
}: {
isOptionSelected: boolean;
handleOnClearAll: () => void;
sortby: string;
collectionNames: Array<string>;
collectionNumbers: Array<number>;
brandName: string;
}): ReactElement => {
const theme = useTheme();
const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
const { buyingProfile } = useProfiles();
const [getCollectionReportOverview, { loading, error, data, called }] = useLazyQuery(
GET_COLLECTION_REPORT_OVERVIEW,
{
onCompleted: (result) => {
console.log('Request completed');
const base64Pdf = result?.data?.getCollectionReportOverview;
console.log(base64Pdf);
if (base64Pdf) {
downloadPdf(base64Pdf);
}
},
onError: (error) => {
console.error('GraphQL error:', error);
},
fetchPolicy: 'network-only',
context: { clientName: GraphClientNames['reports'] },
}
);
const filterReportCollectionOverview = {
collectionNames: collectionNames,
collectionNumbers: collectionNumbers,
brandName: brandName,
createdByName: buyingProfile?.name,
createdBy: buyingProfile?.userNumber,
sortBy: sortby,
};
const handleClickCreateViewButton = (): void => {
console.log('Button clicked'); // Add this log
getCollectionReportOverview({
variables: {
filterReportCollectionOverview: filterReportCollectionOverview,
},
});
};
const downloadPdf = (base64Pdf: string, fileName = 'report.pdf') => {
console.log('Downloading PDF'); // Add this log
const blob = b64toBlob(base64Pdf, 'application/pdf');
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
};
const b64toBlob = (base64: string, type = 'application/octet-stream') => {
const byteCharacters = atob(base64);
const byteArrays: Array<number> = [];
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
const slice = byteCharacters.slice(offset, offset + 512);
const byteNumbers = new Array<number>(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArrays.push(...byteNumbers);
}
const blob = new Blob([new Uint8Array(byteArrays)], { type });
return blob;
};
const hintComponent = (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
flex: '1',
alignItems: 'center',
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
flex: '1',
}}
>
<Typography variant={isLargeScreen ? 'body.default' : 'bodySmall.default'} sx={{ whiteSpace: 'nowrap' }}>
* required:
</Typography>
<Typography variant={isLargeScreen ? 'body.highlight' : 'bodySmall.highlight'} sx={{ paddingLeft: 1, whiteSpace: 'nowrap' }}>
{isOptionSelected ? '1/1' : '0/1'}
</Typography>
</Box>
<Typography variant='captions.default' sx={{ paddingLeft: 1, whiteSpace: 'nowrap' }}>
{isOptionSelected ? "You're good to go" : 'Select a Collection'}
</Typography>
</Box>
);
return (
<ProcessFooter
leftSideComponents={[
<Button
key='cancel-button'
variant="outlined"
size={isLargeScreen ? 'large' : 'small'}
disabled={!isOptionSelected}
onClick={handleOnClearAll}
>
<CrossIcon style={{ padding: '0px 12px 0px 0px' }} />
clear all
</Button>,
]}
hint={hintComponent}
rightSideComponents={[
loading ? (
<Stack
justifyContent="center"
alignItems="center"
spacing={5}
>
<LoadingSpinner />
<Typography variant="headings.h4" textAlign="center">
generating report
</Typography>
</Stack>
) : (
<CreateViewButton
key='create-orders-button'
isLargeScreen={isLargeScreen}
isOptionSelected={isOptionSelected}
sortbyValue={sortby}
collectionNames={collectionNames}
collectionNumbers={collectionNumbers}
brandName={brandName}
onClick={handleClickCreateViewButton}
/>
),
]}
/>
);
};
If someone can guide me and counsel me as I’m a bit lost and confused.
I’m not entirely sure about the code for getting the pdf but the query works.
As a result, the response is a url as a string.
I have been trying to calc rotation (in degrees) from current camera view (always straight to camera) – something like three.js component “TransformControls” but the rotation of it should always lookAt the camera. The rotation needs to be calced from the same projection as the camera is – the result of angle will be needed to set texture rotation.
The method I tried to achieve it:
lookAt(camera)
In my current example rotation works properly only when the camera orientation is looking down otherwise it’s rotating weird, for instance: when camera is looking up then rotation is inversed, other angles behaves strange like it’s not its projection axis.
Code sandbox for my example can be found here: https://codesandbox.io/s/rotation-438sgd?file=/src/App.js
Any suggestion would are welcome.
Note: Calculate the 2D angle based on the plane view from the camera view is crucial for me (as I will need to use angle for texture rotation later)
I am new to node/express and came across something strange to me. If I include a 4th “value” parameter on certain middleware functions, they wont work, while others do. I’ve read adding a 4th parameter will count it as Error Handling middleware, but I’m not sure if this is the same thing. Here is what I read: Express.js middleware extra (fourth) argument .
I suspect it has something to do with middleware1 being passed in as a param while middleware2 is being past into a post, but I’m lost as to how it works. Any help explaining would be greatly appreciated, thank you.
controller.js
exports.middleware1 = (req, res, next, val) => {
if (Number(req.params.id) > tours.length) {
return res.status(404).json({
status: 'failed',
message: 'Invalid ID',
});
}
next();
};
exports.middleware2 = (req, res, next) => {
if (!req.body.name || !req.body.price) {
return res.status(400).json({
status: 'fail',
message: 'Missing name or price',
});
}
next();
};
routes.js
router.param('id', middleware1) // this one works even if I include the "val" parameter
router.post(middleware2, createPost) // this one wont work if I include the "val" parameter as my 4th parameter