Forem: Navnit Rai

How to Create Passport & Visa Photos at Home (Without Mistakes) – Complete Guide

Navnit Rai — Mon, 13 Apr 2026 12:15:47 +0000

Applying for a passport or visa?

One of the most common reasons for rejection is incorrect photo format.

Wrong size, bad background, poor lighting — even small mistakes can delay your application.

In this guide, you'll learn how to create a perfect passport or visa photo at home, step-by-step — without going to a studio.

Why Passport Photos Get Rejected

Before creating your photo, understand the common mistakes:

❌ Wrong dimensions (size mismatch)
❌ Improper head position
❌ Shadows on face or background
❌ Non-white or uneven background
❌ Low resolution or blur
❌ Incorrect facial expression

Even a minor issue can lead to application rejection or delay

Requirements for a Perfect Passport Photo

Although requirements vary slightly by country, most follow these rules:

Standard Guidelines:

Neutral facial expression (no smile)
Eyes open and clearly visible
Plain white or light background
No shadows
Proper head size (usually 70–80% of image height)
High resolution (300 DPI preferred)

Step-by-Step: Create Passport Photo at Home

1. Use a Good Camera

Use a smartphone with a decent camera
Avoid front camera if possible (lower quality)

2. Set Proper Lighting

Stand facing natural light (window light works best)
Avoid harsh shadows

3. Background Setup

Use a plain white wall
Or a clean light-colored background

4. Maintain Correct Position

Stand straight
Keep head centered
Look directly into the camera

5. 📷Take Multiple Shots

Capture 5–10 photos
Choose the sharpest and best-lit one

Use AI Tools to Fix & Format (Recommended)

Manual editing is difficult and error-prone.

Instead, use an AI tool like:

👉 AI passport photo maker for multiple countries

Why use PixPassport?

✅ Automatically removes background
✅ Adjusts head size to match country rules
✅ Crops to exact passport/visa dimensions
✅ Supports multiple countries
✅ Instant download

For US Visa & Passport Photos

If you're applying specifically for the US:

👉 Create DS-160 compliant US visa photo online

This tool ensures:

Exact US photo size (2x2 inches)
Correct head ratio
Compliance with official US guidelines

⚡ Pro Tips to Avoid Rejection

✔️ Don’t wear white clothes (blend with background)
✔️ Avoid glasses (some countries restrict them)
✔️ Keep hair away from face
✔️ Use high-quality image (no compression)
✔️ Always double-check country-specific requirements

🔍 Why AI Tools Are Better Than Photo Studios

Feature	Studio	AI Tool
Cost	High	Low / Free
Time	Hours	Seconds
Accuracy	Depends	High
Convenience	Low	High

AI tools like pixpassport make the process faster, cheaper, and more accurate

Final Thoughts

Creating passport or visa photos at home is now easier than ever.

With the right setup + AI tools, you can:

Save money 💰
Save time ⏱️
Avoid rejection

🔗 Try These Tools

🌍 Passport photo tool for all countries
🇺🇸 US visa photo maker (DS-160 ready)

💬 Have Questions?

Drop them in the comments — happy to help!

AI #WebDevelopment #SaaS #PassportPhoto #Visa #IndieHacker #Startup #BuildInPublic #SEO

US Visa Photo Rejected? Here’s How USVisaPhotoAI Solves It Instantly

Navnit Rai — Sat, 04 Apr 2026 05:29:56 +0000

✅ What “Full Compliance” Means

Your photo is automatically checked against all critical rules, including:

Head Size Accuracy (50%–69% of image height)
Eye Position Alignment (correct vertical placement)
Neutral Expression (no smiling, no exaggerated expressions)
Straight Head Position (no tilt or rotation)
Plain White Background (no patterns, shadows, or objects)
Proper Lighting (even exposure, no harsh shadows)
High Resolution & Clarity
Correct Framing & Centering
No Obstructions (glasses glare, shadows, accessories issues)

US Visa Photo Rejected? Here’s How USVisaPhotoAI Solves It Instantly

Applying for a U.S. visa, passport, or DV Lottery can be stressful — but one of the most common reasons for rejection is something surprisingly simple: your photo.

Every year, thousands of applicants get rejected due to incorrect photo size, wrong background, improper head positioning, or even subtle issues like facial expression. Most people don’t even realize their photo is non-compliant until it’s too late.

That’s exactly the problem USVisaPhotoAI is built to solve.

👉 Try it now: https://www.usvisaphotoai.pro/

🚨 The Real Problem with U.S. Visa Photos

The U.S. Department of State has strict requirements:

Head size must be between 50%–69% of image height
Eyes must be positioned correctly
Neutral expression (no smile)
Plain white background
No shadows or tilts
Proper lighting and resolution

Even a small mistake can lead to rejection.

Traditional tools only help with cropping — they don’t validate compliance.

👉 Validate your photo instantly:

https://www.usvisaphotoai.pro/photo-validator

🤖 What Makes USVisaPhotoAI Different?

Unlike basic photo tools, USVisaPhotoAI uses AI to analyze your image across 9 critical compliance parameters.

✅ Advanced AI Checks Include:

Head size accuracy
Eye position alignment
Face orientation (no tilt)
Background detection
Lighting & shadow analysis
Expression validation (no smiling)
Image resolution & quality
Centering & framing
Cropping compliance

You get instant feedback — not guesswork.

🎯 Built for Every U.S. Photo Requirement

Whether you're applying for a visa, green card, or lottery, the tool is tailored for all major use cases:

🇺🇸 DV Lottery Photo (2027 Entry)

Generate and validate photos specifically for the Diversity Visa program:

https://www.usvisaphotoai.pro/dv-lottery-photo-2027

🛂 U.S. Passport Photo

Ensure your passport photo meets official standards:

https://www.usvisaphotoai.pro/us-passport-photo

💳 Green Card Photo

Avoid delays in your Green Card application:

https://www.usvisaphotoai.pro/green-card-photo

⚡ Why People Love USVisaPhotoAI

Instant Results — No waiting, no manual checks
Beginner Friendly — Upload and get results in seconds
Accurate AI Validation — Goes beyond simple cropping tools
Saves Time & Money — Avoid rejections and reapplications
Works Online — No software installation needed

❌ Common Mistakes This Tool Helps You Avoid

Slight head tilt (often unnoticed)
Incorrect head size after cropping
Poor lighting or shadows
Smiling or non-neutral expression
Background not fully white
Face not centered

Most people think their photo is fine — until it's rejected. This tool eliminates that risk.

💡 Who Should Use This?

DV Lottery applicants
U.S. visa applicants (DS-160)
Passport applicants
Immigration & Green Card applicants
Developers building visa tools (API potential)

🚀 Final Thoughts

Getting your U.S. visa photo right shouldn’t be complicated — but strict rules make it easy to fail.

USVisaPhotoAI simplifies everything by giving you instant, AI-powered validation so you can submit your application with confidence.

👉 Start now and check your photo:

https://www.usvisaphotoai.pro/photo-validator

👉 Or explore all tools:

https://www.usvisaphotoai.pro/

Stop guessing. Start validating.

How I Built an AI Tool to Generate US Visa Photos (And Why Most Photos Fail)

Navnit Rai — Wed, 01 Apr 2026 08:22:43 +0000

Why Most US Visa Photos Get Rejected (And How I Solved It with AI)

While working on a visa-related project, I noticed something surprising:

👉 Most users fail at something as simple as uploading a correct visa photo.

And this small mistake?

It leads to delays, rejections, and frustration.

❌ The Problem: Visa Photo Requirements Are Brutal

If you’ve ever filled the DS-160 form, you already know:

The photo requirements are extremely strict:

📏 600x600 pixels (exact)
⚪ Pure white background
🙂 Neutral expression
📐 Proper face alignment
🌗 No shadows

Sounds simple… right?

Not really.

🤦 What Users Actually Upload

From real user uploads, I saw patterns:

🤳 Selfies taken from phone cameras
🔄 Tilted or rotated faces
🎨 Colored or messy backgrounds
🌑 Shadows on face or wall

👉 These mistakes are super common.

And guess what?

❗ Even a small misalignment = Photo rejection

⚠️ The Real Impact

This is not just a UX issue.

It creates real problems:

❌ Visa application delays
❌ Re-upload frustration
❌ Confusion about requirements
❌ Drop-offs during payment

For developers building in this space →

👉 This is a hidden conversion killer.

💡 The Solution: Automating It with AI

Instead of expecting users to “figure it out”…

I built a tool that does everything automatically:

🔧 What It Does

🧠 Detects face using AI
📐 Fixes head alignment
⚪ Removes & replaces background
📏 Resizes to exact 600x600 format
✅ Makes it compliant with US visa rules

👉 No manual editing needed.

🚀 Try It Yourself

I turned this into a simple SaaS tool:
If you’ve ever struggled with DS-160 photo requirements,
you can now solve it using an AI usvisaphotoai.pro tool.

Upload your photo → get a compliant visa photo instantly.

🧠 Key Insight for Builders

If you're building SaaS products:

👉 Don’t trust users to follow strict rules

👉 Automate compliance instead

Because:

Users don’t read instructions.

They just want results.

💬 Would Love Your Feedback

If you're working on:

AI tools
Image processing
SaaS conversions

👉 I’d love to hear your thoughts.

Or roast the product 😄

🔖 Tags

saas #buildinpublic #ai #webdev #startup #indiehackers #nextjs

Building a Scalable Background Removal API with Python, FastAPI, and Rembg 📸

Navnit Rai — Thu, 26 Feb 2026 09:40:00 +0000

Removing backgrounds from images used to require complex Photoshop skills or expensive proprietary APIs. But with the rise of Pre-trained Deep Learning models, we can now build our own production-ready service in minutes.

In this post, I’ll walk you through a scalable background removal tool I built using FastAPI and Rembg, which is the engine behind my project USVisaPhotoAI.pro.

🚀 The Tech Stack

To make this service fast and scalable, I chose:

Python 3.10+: For its robust ML ecosystem.
FastAPI: For high-performance, asynchronous API endpoints.
Rembg: A powerful library based on the U2-Net model.
Pillow (PIL): For image processing and formatting.
Uvicorn: As a lightning-fast ASGI server.

🛠️ Key Features

Unlike a simple script, this implementation is designed for real-world use:

Async Processing: Handles multiple requests simultaneously without blocking.
Scalable Architecture: Easy to containerize with Docker for Kubernetes or AWS ECS deployment.
Multiple Output Formats: Supports returning raw bytes or Base64 encoded strings.
Auto-Optimization: Handles image resizing to ensure fast processing for large files.

📦 Quick Start & Implementation

You can find the full source code and documentation in my repository:
👉 GitHub: Rembg Background Remover

Core Logic Snippet

The heart of the API is simple yet powerful:


python
from fastapi import FastAPI, UploadFile, File
from rembg import remove
import io
from PIL import Image

app = FastAPI()

@app.post("/remove-bg")
async def remove_background(file: UploadFile = File(...)):
    input_image = await file.read()

    # The Magic Happens Here
    output_image = remove(input_image)

    return StreamingResponse(io.BytesIO(output_image), media_type="image/png")

Why I Built (and Use) AI to Solve the US Visa Photo Nightmare 📸

Navnit Rai — Thu, 26 Feb 2026 09:31:23 +0000

We’ve all been there. You’re filling out the DS-160 for a US Visa, and you get to the final hurdle: The Photo Upload. You take a selfie against a white-ish wall, upload it, and... Internal Server Error or Photo Rejected. The U.S. Department of State has notoriously strict requirements. If your head isn't the right size or the background has a slight shadow, your application can be delayed by weeks.

In 2026, we shouldn't be driving to a CVS or a professional studio for a $20 digital file. That’s why AI-driven compliance tools are changing the game.

The Technical Challenge: More Than Just a Crop

A US Visa photo isn't just a square image. To pass the automated validators, it must meet these exact specs:

The Ratio: Your head must be between 50% and 69% of the image's total height.
The Lighting: No shadows on the face or background.
The Background: Must be a plain, off-white, or white background with no textures.
The Pixels: Exactly 600x600px minimum (up to 1200x1200px).

Doing this manually in Photoshop is a headache. Doing it on your phone is nearly impossible.

Enter US Visa Photo AI

I’ve been working with a tool designed specifically to handle these edge cases using Computer Vision. USVisaPhotoAI.pro uses a trained model to:

Auto-Detect Landmarks: It finds your chin and the top of your head to calculate the perfect ratio.
AI Background Removal: It strips out your messy room and replaces it with a compliant, high-quality white background.
Real-Time Validation: It checks for "no glasses" and "neutral expression" before you even pay.

Why Devs Love This Approach

As developers, we love automation. Instead of the manual "trial and error" of uploading to the government portal, usvisaphotoai.pro provides a pre-validated file that is virtually guaranteed to pass.

Quick Comparison:

Feature	Manual/DIY	US Visa Photo AI
Success Rate	~40% (First try)	100% Guaranteed
Time Spent	30 mins +	30 seconds
Equipment	Tripod + Lighting	Your Phone

Wrapping Up

If you're planning your next tech conference in the States or moving for a new role, don't let a $2.00 photo error ruin your $185 visa fee.

Give it a try here: 👉 Get Your Compliant Photo at USVisaPhotoAI.pro

Have you ever had a visa application rejected for a silly reason? Let’s talk about the worst bureaucratic hurdles in the comments!

Microfrontend using vuejs

Navnit Rai — Wed, 04 Feb 2026 13:55:04 +0000

In 2026, the "frontend monolith" is becoming a thing of the past for enterprise-scale applications. As teams grow, the ability to deploy features independently—without waiting for a 20-minute build of the entire system—is no longer a luxury; it’s a requirement.

In this guide, we’ll explore how to build a scalable Microfrontend (MFE) architecture using Vue 3, Vite, and Module Federation.

What are Microfrontends?

Microfrontends bring the microservices philosophy to the browser. Instead of one massive Vue application, you break your UI into smaller, self-contained apps that are composed at runtime.

Why use them?

Independent Deployments: Team A can update the "Checkout" module without touching Team B's "Product Catalog."
Technology Agnostic: While we’re focusing on Vue, different modules could theoretically use different versions of Vue or even different frameworks.
Faster Build Times: You only build and test the module you changed. The Tech Stack: Vite + Module Federation

While Webpack 5 pioneered Module Federation, in 2026, Vite is the go-to for Vue developers due to its insane speed. We’ll use vite-plugin-federation to bridge the gap.
The Architecture

Host (The Shell): The main container that handles routing and global state.
Remote (The Microapp): A standalone Vue app that "exposes" specific components or entire pages.
Step 1: Setting Up the Remote App
Imagine we are building a User Dashboard microfrontend.
Create the project:
npm create vite@latest dashboard-mfe -- --template vue
cd dashboard-mfe
npm install @originjs/vite-plugin-federation --save-dev
Configure vite.config.js:
You need to tell Vite which components to "expose" to the outside world.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
plugins: [
vue(),
federation({
name: 'dashboard_app',
filename: 'remoteEntry.js',
exposes: {
'./Dashboard': './src/components/Dashboard.vue',
},
shared: ['vue'], // Share Vue to avoid loading it twice
}),
],
build: {
target: 'esnext', // Required for module federation
},
});

Step 2: Setting Up the Host (Shell)
The Host is the "parent" app that will consume the Dashboard component.

Configure vite.config.js in the Host:
We define where the remote app is located.
federation({
name: 'host_app',
remotes: {
dashboard: 'http://localhost:5001/assets/remoteEntry.js',
},
shared: ['vue'],
})
Consume the Remote Component:
In your Host's Vue files, you can now import the remote component as if it were local.
 import { defineAsyncComponent } from 'vue';</li> </ul> // Lazy load the remote component const RemoteDashboard = defineAsyncComponent(() => import('dashboard/Dashboard')); 

Shell Navigation

Best Practices for 2026
1. State Management (Pinia) Don't try to share a single global Pinia store across all MFEs. This creates tight coupling. Instead:
 - Remotes should have their own local stores.
 - Communication should happen via Custom Events or a lightweight Event Bus.
2. Versioning and Deployment
 Always use a Blue/Green deployment strategy for your remotes. Since the Host fetches the remoteEntry.js at runtime, a broken remote can take down the UI. Use Error Boundaries in Vue to catch loading failures:
 
 Loading Dashboard...
3. CSS Isolation
 Use CSS Modules or Scoped Styles () religiously. In a microfrontend world, a global .btn class in your Auth MFE can accidentally ruin the styling of your Dashboard MFE. Summary Table: Vite vs. Single-SPA | Feature | Vite + Module Federation | Single-SPA | |---|---|---| | Ease of Use | High (Plugin-based) | Medium (High Boilerplate) | | Performance | Native ESM (Fastest) | SystemJS (Slight Overhead) | | Best For | Pure Vue/Modern Stacks | Heterogeneous Stacks (Angular + Vue + React) | Microfrontends aren't a silver bullet—they add operational complexity. But for large teams, the trade-off in developer velocity is almost always worth it. Would you like me to generate a complete boilerplate repository structure for this setup?</li> </ol>

How to Create a Modern Chatbot Component in Vue.js Using Vuetify and CSS

Navnit Rai — Fri, 30 Jan 2026 05:36:43 +0000

Building a chatbot UI is no longer just a “nice to have” feature — it’s becoming a core part of modern web applications. Whether you’re creating a customer support bot, appointment booking assistant, or AI chat interface, Vue.js combined with Vuetify makes the job clean, scalable, and visually polished.

In this post, you’ll learn how to create a fully functional chatbot component in Vue.js using Vuetify and custom CSS, inspired by popular messaging apps like WhatsApp.

What You’ll Build

By the end of this tutorial, you’ll have a chatbot that includes:

WhatsApp-style chat UI
AI & user message bubbles
Typing indicator animation
Quick reply buttons
Emoji picker
API integration using Axios
Auto-scrolling chat history
Modular widget actions (Booking / Ticket widgets)

Tech Stack Used

Vue.js (Options API)
Vuetify (Material UI for Vue)
Axios (API calls)
CSS Animations
REST API (Chat backend)

Chatbot Component Structure

At a high level, the chatbot UI is divided into three main sections:
Header – Bot name, avatar, online status
Messages Area – Chat history, typing animation, quick replies
Input Area – Message input, emoji picker, send button

ChatbotCard
 ├── Header
 ├── MessageContainer
 │    ├── AI Messages
 │    ├── User Messages
 │    ├── Typing Indicator
 │    └── Widgets
 └── Input Area

1. Creating the Chatbot Layout (Vuetify Card)

We use a v-card as the chatbot container to give it a clean, app-like feel.

<v-card class="chatbot-container d-flex flex-column" height="90vh" rounded="xl">

This makes the chatbot:

Responsive
Scrollable
Mobile-friendly

2. Chat Header (Custom Toolbar)

Instead of using v-toolbar, a custom header gives you full control over design:

Features:

Back button
Bot avatar
Online status
Menu icon

This is perfect for embedded chatbots or mobile layouts.

3. Rendering Chat Messages (AI vs User)

Messages are rendered dynamically using v-for from chat_history.

AI Message Bubble

<div v-if="item.actor === 'ai'" class="ai-message">

User Message Bubble

<div v-if="item.actor === 'user'" class="user-message">

Each message includes:

Text
Timestamp
Smooth fade-in animation
Responsive max width

4. Quick Reply Buttons

Quick replies improve UX and reduce typing friction.

<v-btn
  v-for="button in item.button"
  @click="handleButtonClick(button)"
>
  {{ button.title }}
</v-btn>

Use cases:

Appointment booking
FAQs
Menu-based navigation
AI actions

5. Action-Based Widgets (Advanced Feature)

**
Your chatbot supports dynamic UI widgets, such as:**

<BookingWidget v-if="currentAction === 'SHOW_BOOKING_WIDGET'" />
<TicketWidget v-if="currentAction === 'SHOW_TICKET_WIDGET'" />

This allows:

Appointment booking inside chat
Forms without navigation
Conversational workflows

<template>
    <v-card 
        class="chatbot-container d-flex flex-column" 
        height="90vh"
        elevation="0"
        rounded="xl"
    >
        <!-- Custom Header (no v-toolbar) -->
        <div class="chatbot-header">
            <div class="d-flex align-center pa-3">
                <v-btn 
                    icon 
                    variant="text" 
                    size="small"
                    @click="$emit('close')"
                    class="mr-2"
                >
                    <v-icon color="white">mdi-arrow-left</v-icon>
                </v-btn>

                <v-avatar size="40" class="mr-3 bot-avatar">
                    <v-icon color="white">mdi-robot-happy</v-icon>
                </v-avatar>

                <div class="flex-grow-1">
                    <div class="text-white font-weight-medium">QR Buddy Bot</div>
                    <div class="text-caption" style="color: rgba(255,255,255,0.8);">
                        <v-icon size="8" color="success" class="mr-1">mdi-circle</v-icon>
                        Online
                    </div>
                </div>

                <v-btn 
                    icon 
                    variant="text" 
                    size="small"
                >
                    <v-icon color="white">mdi-dots-vertical</v-icon>
                </v-btn>
            </div>
        </div>

        <!-- Chat messages area -->
        <v-card-text class="flex-grow-1 overflow-y-auto pa-3 message-container" ref="messageContainer">
            <div v-if="isLoading" class="d-flex justify-center align-center fill-height">
                <div class="text-center">
                    <v-progress-circular 
                        indeterminate 
                        color="primary" 
                        size="48"
                        width="4"
                    ></v-progress-circular>
                    <p class="mt-3 text-grey">Loading chat...</p>
                </div>
            </div>

            <div v-else>
                <transition-group name="message" tag="div">
                    <div v-for="(item, index) in chat_history" :key="index" class="mb-2 message-item">
                        <!-- AI Message -->
                        <div v-if="item.actor === 'ai'" class="d-flex align-start message-fade-in">
                            <v-avatar class="mr-2 flex-shrink-0" size="32" color="primary">
                                <v-icon color="white" size="18">mdi-robot-happy</v-icon>
                            </v-avatar>

                            <div class="flex-grow-1" style="max-width: calc(100% - 48px);">
                                <div class="ai-message">
                                    <p class="text-body-2 mb-0 message-text">{{ item.message }}</p>
                                    <div class="d-flex align-center justify-end mt-1">
                                        <span class="message-time">{{ formatTime(item.timestamp) }}</span>
                                    </div>
                                </div>

                                <!-- Quick Reply Buttons -->
                                <div v-if="item.button && item.button.length" class="d-flex flex-wrap mt-2 gap-2">
                                    <v-btn
                                        v-for="(button, i) in item.button"
                                        :key="i"
                                        class="quick-reply-btn"
                                        variant="outlined"
                                        size="small"
                                        rounded="xl"
                                        @click="handleButtonClick(button)"
                                        :color="button.color || 'primary'"
                                    >
                                        <v-icon v-if="button.icon" size="16" class="mr-1">{{ button.icon }}</v-icon>
                                        {{ button.title }}
                                    </v-btn>
                                </div>
                            </div>
                        </div>

                        <!-- User Message -->
                        <div v-if="item.actor === 'user'" class="d-flex justify-end message-fade-in">
                            <div class="user-message">
                                <p class="text-body-2 text-white mb-0 message-text">
                                    {{ item.display_text || item.message }}
                                </p>
                                <div class="d-flex align-center justify-end mt-1">
                                    <span class="message-time-user">{{ formatTime(item.timestamp) }}</span>
                                    <v-icon size="14" color="white" class="ml-1">mdi-check-all</v-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition-group>

                <!-- Typing indicator -->
                <div v-if="isTyping" class="d-flex align-start mb-2 message-fade-in">
                    <v-avatar class="mr-2" size="32" color="primary">
                        <v-icon color="white" size="18">mdi-robot-happy</v-icon>
                    </v-avatar>
                    <div class="ai-message typing-bubble">
                        <div class="typing-indicator">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Widgets -->
            <BookingWidget v-if="currentAction === 'SHOW_BOOKING_WIDGET'" />
            <TicketWidget v-if="currentAction === 'SHOW_TICKET_WIDGET'" />
        </v-card-text>

        <!-- WhatsApp-style Input area -->
        <div class="input-area">
            <div class="input-container">
                <!-- Emoji Picker -->
                <v-menu 
                    location="top" 
                    :close-on-content-click="false"
                    offset="8"
                >
                    <template v-slot:activator="{ props }">
                        <v-btn 
                            v-bind="props" 
                            icon 
                            variant="text" 
                            size="small" 
                            class="emoji-trigger"
                        >
                            <v-icon color="grey-darken-1">mdi-emoticon-happy-outline</v-icon>
                        </v-btn>
                    </template>

                    <v-card class="emoji-picker" rounded="xl" elevation="8">
                        <v-card-text class="pa-3">
                            <div class="text-caption text-grey mb-2 font-weight-medium">Frequently Used</div>
                            <div class="emoji-grid">
                                <button 
                                    v-for="emoji in quickEmojis" 
                                    :key="emoji"
                                    class="emoji-btn"
                                    @click="newMessage += emoji"
                                >
                                    {{ emoji }}
                                </button>
                            </div>
                        </v-card-text>
                    </v-card>
                </v-menu>

                <!-- Message Input Field -->
                <div class="message-input-wrapper">
                    <input
                        v-model="newMessage"
                        type="text"
                        placeholder="Type a message"
                        class="message-input"
                        @keyup.enter="sendMessage"
                    />
                </div>

                <!-- Attachment Button (optional) -->
                <v-btn 
                    v-if="!newMessage.trim()"
                    icon 
                    variant="text" 
                    size="small" 
                    class="attachment-btn"
                >
                    <v-icon color="grey-darken-1">mdi-paperclip</v-icon>
                </v-btn>

                <!-- Camera Button (optional) -->
                <v-btn 
                    v-if="!newMessage.trim()"
                    icon 
                    variant="text" 
                    size="small" 
                    class="camera-btn"
                >
                    <v-icon color="grey-darken-1">mdi-camera</v-icon>
                </v-btn>

                <!-- Send/Voice Button -->
                <v-btn 
                    icon
                    size="small"
                    class="send-button"
                    :class="{ 'has-text': newMessage.trim() }"
                    @click="sendMessage"
                    elevation="0"
                >
                    <v-icon color="white" size="20">
                        {{ newMessage.trim() ? 'mdi-send' : 'mdi-microphone' }}
                    </v-icon>
                </v-btn>
            </div>
        </div>
    </v-card>
</template>

<script>
import BookingWidget from './BookingWidget.vue';
import TicketWidget from './TicketWidget.vue';
import axios from 'axios';

export default {
    components: {
        BookingWidget,
        TicketWidget
    },
    data() {
        return {
            newMessage: '',
            isLoading: false,
            isTyping: false,
            user_id: 'user_1138',
            chat_history: [
                {
                    actor: 'user',
                    message: 'hi how are you',
                    timestamp: '2025-07-25T05:21:41.636Z'
                },
                {
                    actor: 'ai',
                    type: 'text',
                    message: 'I am doing well, thank you for asking! How are you?',
                    timestamp: '2025-07-25T05:21:42.696Z'
                },
                {
                    actor: 'user',
                    message: 'i need a help',
                    timestamp: '2025-07-25T05:21:52.965Z'
                },
                {
                    actor: 'ai',
                    type: 'text',
                    message: "Okay, I'm here to help! Please tell me what you need help with. The more details you can provide, the better I can assist you.",
                    timestamp: '2025-07-25T05:21:55.172Z'
                },
                {
                    actor: 'user',
                    message: 'i want to book appointment',
                    timestamp: '2025-07-25T05:22:05.565Z'
                },
                {
                    actor: 'ai',
                    type: 'text',
                    message: 'Great! I can help you book an appointment. To get started, I need some information from you. What type of appointment would you like to book?',
                    timestamp: '2025-07-25T05:22:07.368Z',
                    action: 'SHOW_BOOKING_WIDGET',
                    button: [
                        { title: 'Doctor Appointment', payload: 'book_doctor', icon: 'mdi-hospital-box', color: 'primary' },
                        { title: 'Salon Booking', payload: 'book_salon', icon: 'mdi-content-cut', color: 'purple' },
                        { title: 'Service Appointment', payload: 'book_service', icon: 'mdi-wrench', color: 'orange' }
                    ]
                },
                {
                    actor: 'user',
                    message: 'ok thanks for provided me guidence',
                    timestamp: '2025-07-25T05:22:28.668Z'
                },
                {
                    actor: 'ai',
                    type: 'text',
                    message: "You're welcome! Let me know if you have any other questions or need further assistance with anything else.",
                    timestamp: '2025-07-25T05:22:30.356Z'
                }
            ],
            currentAction: null,
            quickEmojis: ['😊', '😂', '❤️', '👍', '🙏', '🎉', '👏', '🔥', '✨', '💯', '🚀', '💪', '😍', '🤔', '👌', '🙌']
        };
    },
    async created() {
        await this.loadData();
    },
    mounted() {
        this.scrollToBottom();
    },
    updated() {
        this.scrollToBottom();
    },
    methods: {
        async loadData() {
            this.isLoading = true;
            try {
                const response = await axios.get(`http://localhost:3005/chat/history`, {
                    params: { user_id: this.user_id }
                });
                this.chat_history = response.data;
            } catch (error) {
                console.error('Error loading chat history:', error);
            } finally {
                this.isLoading = false;
            }
        },
        async sendMessage() {
            const messageText = this.newMessage.trim();
            if (!messageText) return;

            this.chat_history.push({
                actor: 'user',
                message: messageText,
                timestamp: new Date().toISOString()
            });

            this.newMessage = '';
            this.isTyping = true;

            await this.postChatUpdate();

            this.isTyping = false;
        },
        async handleButtonClick(button) {
            this.chat_history.push({
                actor: 'user',
                type: 'payload',
                message: button.payload,
                display_text: button.title,
                timestamp: new Date().toISOString()
            });

            this.isTyping = true;
            await this.postChatUpdate();
            this.isTyping = false;
        },
        async postChatUpdate() {
            try {
                const response = await axios.post('http://localhost:3005/chat', {
                    user_id: 1,
                    chat_history: this.chat_history
                });
                this.chat_history = response.data.chat_history;
                const lastAiMessage = [...this.chat_history].reverse().find((m) => m.actor === 'ai' && m.action);
                this.currentAction = lastAiMessage ? lastAiMessage.action : null;
            } catch (error) {
                console.error('Error sending message:', error);
                this.chat_history.push({
                    actor: 'ai',
                    type: 'text',
                    message: "Sorry, I couldn't connect to the server. Please try again later.",
                    timestamp: new Date().toISOString()
                });
            }
        },
        formatTime(timestamp) {
            if (!timestamp) return '';
            const date = new Date(timestamp);
            return date.toLocaleTimeString('en-US', { 
                hour: 'numeric', 
                minute: '2-digit',
                hour12: true 
            });
        },
        scrollToBottom() {
            this.$nextTick(() => {
                const container = this.$refs.messageContainer;
                if (container) {
                    container.scrollTop = container.scrollHeight;
                }
            });
        }
    }
};
</script>

<style scoped>
* {
    box-sizing: border-box;
}

.chatbot-container {
    background: #f0f2f5;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* Header Styling */
.chatbot-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bot-avatar {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}

/* Message Container */
.message-container {
    background: #e5ddd5;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d9d9d9' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    position: relative;
}

.message-container::-webkit-scrollbar {
    width: 6px;
}

.message-container::-webkit-scrollbar-track {
    background: transparent;
}

.message-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* AI Message Bubbles */
.ai-message {
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    border-top-left-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
    max-width: 100%;
    word-wrap: break-word;
}

/* User Message Bubbles */
.user-message {
    background: #a5a9eb;
    padding: 8px 12px;
    border-radius: 8px;
    border-top-right-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
    max-width: 75%;
    word-wrap: break-word;
    margin-left: auto;
}

.message-text {
    line-height: 1.4;
    color: #303030;
    font-size: 14px;
}

.message-time {
    font-size: 11px;
    color: #0b0000;
    margin-top: 2px;
}

.message-time-user {
    font-size: 11px;
    color: rgb(246, 243, 243);
    margin-top: 2px;
}

/* Quick Reply Buttons */
.quick-reply-btn {
    text-transform: none !important;
    font-weight: 500;
    font-size: 13px;
    height: 32px !important;
    border-width: 1.5px !important;
    transition: all 0.2s ease;
}

.quick-reply-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gap-2 {
    gap: 8px;
}

/* Typing Indicator */
.typing-bubble {
    padding: 12px 16px;
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #90949c;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* WhatsApp-style Input Area */
.input-area {
    background: #f0f2f5;
    padding: 8px 12px 8px 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.input-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border-radius: 24px;
    padding: 4px 4px 4px 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.emoji-trigger, .attachment-btn, .camera-btn {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
}

.message-input-wrapper {
    flex: 1;
    position: relative;
}

.message-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 8px 12px;
    color: #303030;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.message-input::placeholder {
    color: #667781;
}

.send-button {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    background: #b0b3b8 !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.send-button.has-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    transform: scale(1);
}

.send-button:hover {
    transform: scale(1.05);
}

.send-button:active {
    transform: scale(0.95);
}

/* Emoji Picker */
.emoji-picker {
    max-width: 300px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.emoji-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn:hover {
    background: #f0f2f5;
    transform: scale(1.2);
}

.emoji-btn:active {
    transform: scale(0.95);
}

/* Message Animations */
.message-fade-in {
    animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-enter-active {
    animation: fadeInUp 0.3s ease-out;
}

.message-leave-active {
    animation: fadeInUp 0.2s ease-in reverse;
}

/* Mobile Optimizations */
@media (max-width: 600px) {
    .chatbot-container {
        border-radius: 10 !important;
    }

    .user-message {
        max-width: 80%;
    }

    .emoji-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Prevent text selection on buttons */
.v-btn {
    user-select: none;
    -webkit-user-select: none;
}

/* Focus states */
.message-input:focus {
    outline: none;
}

/* Smooth scrolling */
.message-container {
    scroll-behavior: smooth;
}
</style>

Building a Secure QR Scanner with Geofencing in Vue.js

Navnit Rai — Mon, 04 Aug 2025 06:50:32 +0000

In today's mobile-first world, QR code scanning has become an essential feature for many applications, particularly in healthcare settings. In this post, I'll walk through how I built a secure QR scanner component for a hospital staff application that includes geofencing capabilities to ensure scanning only occurs within authorized locations.

The Challenge
The requirements for this scanner were specific:

Only work when staff are physically within the hospital premises
Provide both automatic QR scanning and manual UHID entry
Include flash capability for low-light conditions
Validate scanned data against backend systems
Maintain security throughout the process

Solution Architecture

The component uses several key technologies:
Vue 3 with Composition API for reactive UI
qr-scanner library for efficient QR code detection
Google Geolocation API for accurate positioning
Vuetify for Material Design UI components
Pinia for state management

1. Geofencing Implementation

async checkGeofence() {
  this.isLocating = true;
  this.locationError = 'Checking your location, please wait...';

  let userCoords = await this.getAccurateLocation();

  // Fallback to browser geolocation if Google API fails
  if (!userCoords && navigator.geolocation) {
    userCoords = await this.getBrowserLocation();
  }

  if (!userCoords) {
    this.handleLocationError();
    return;
  }

  const distance = this.calculateDistance(this.hospitalLocation, userCoords);

  if (distance <= this.allowedRadius) {
    this.enableScanner();
  } else {
    this.disableScanner(distance);
  }

  this.isLocating = false;
}

The geofencing uses the Haversine formula to calculate distance between coordinates:

getDistance(coords1, coords2) {
  const R = 6371e3; // Earth radius in meters
  const φ1 = (coords1.lat * Math.PI) / 180;
  const φ2 = (coords2.lat * Math.PI) / 180;
  const Δφ = ((coords2.lat - coords1.lat) * Math.PI) / 180;
  const Δλ = ((coords2.lon - coords1.lon) * Math.PI) / 180;

  const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + 
            Math.cos(φ1) * Math.cos(φ2) * 
            Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

  return R * c;
}

2. QR Scanner Implementation
The scanner initializes with optimal settings for healthcare use:

initScanner() {
  this.scannerRef = new QrScanner(
    this.$refs.videoRef,
    (result) => {
      const decodedData = this.decodeBase64(result.data);
      if (decodedData) {
        this.processScanResult(decodedData);
      }
    },
    {
      highlightScanRegion: true,
      preferredCamera: 'environment',
      maxScansPerSecond: 1,
      returnDetailedScanResult: true
    }
  );

  this.scannerRef.start().catch(this.handleCameraError);
}

3. Manual Entry Fallback
For cases where QR scanning isn't possible, we provide a manual entry option:

<v-fade-transition>
  <div v-if="showManualEntry" class="w-100 mt-2 d-flex align-center">
    <v-text-field
      v-model="manualUhid"
      label="Enter UHID"
      variant="outlined"
      class="w-100"
      rounded="xl"
      density="compact"
      hide-details
    />
    <v-btn
      @click="submitManualUhid"
      color="green"
      size="small"
      icon="mdi-check"
      class="ml-3"
      rounded="xl"
      elevation="2"
    />
  </div>
</v-fade-transition>

Security Considerations

Location Verification: Ensures scanning only occurs within hospital premises
Base64 Decoding: Safely decodes and parses QR content
Camera Permissions: Handles permission errors gracefully
Data Validation: All scanned data is validated against backend systems ** Challenges and Solutions** Challenge: **Accurate location detection on mobile devices **Solution: Implemented a hybrid approach using Google's Geolocation API with browser geolocation fallback

Challenge: Camera performance on low-end devices
Solution: Limited scan rate to 1 scan/second and optimized video settings

Challenge: User experience in varying light conditions
Solution: Added flash toggle and clear visual feedback

Complete code--->

<template>
    <div>
        <div v-if="locationError" class="pa-4 text-center">
            <v-alert type="error" variant="tonal" border="start" prominent>
                {{ locationError }}
            </v-alert>
        </div>

        <div v-if="isWithinRange">
            <div class="scanner-wrapper">
                <video
                    ref="videoRef"
                    class="scanner-video rounded-xl elevation-3"
                    :style="{ border: scanActive ? '2px solid #4CAF50' : '2px solid #757575' }"
                ></video>
                <div class="scanner-frame">
                    <div class="scan-line" :class="{ 'scan-animation': scanActive }"></div>
                </div>
            </div>

            <div class="d-flex flex-column align-center pa-4 gap-4">
                <div class="d-flex justify-center align-center">
                    <v-btn
                        @click="toggleManualEntry"
                        :color="showManualEntry ? 'green' : 'secondary'"
                        rounded="xl"
                        elevation="2"
                        :text="showManualEntry ? 'Close Manual Entry' : 'Enter UHID Manually'"
                    />
                    <v-btn
                        v-if="cameraAvailable"
                        @click="toggleFlash"
                        :color="flashOn ? 'yellow' : 'grey-lighten-1'"
                        :icon="flashOn ? 'mdi-flashlight-off' : 'mdi-flashlight'"
                        class="ml-3"
                        size="small"
                        rounded="xl"
                        elevation="2"
                    />
                    <v-btn
                        color="primary"
                        @click="checkGeofence"
                        rounded="xl"
                        class="ml-2"
                        elevation="2"
                        prepend-icon="mdi-crosshairs-gps"
                        text=" Current Location"
                    />
                </div>
                <v-fade-transition>
                    <div v-if="showManualEntry" class="w-100 mt-2 d-flex align-center">
                        <v-text-field
                            v-model="manualUhid"
                            label="Enter UHID"
                            variant="outlined"
                            class="w-100"
                            rounded="xl"
                            density="compact"
                            hide-details
                        />
                        <v-btn
                            @click="submitManualUhid"
                            color="green"
                            size="small"
                            icon="mdi-check"
                            class="ml-3"
                            rounded="xl"
                            elevation="2"
                        />
                    </div>
                </v-fade-transition>
            </div>
        </div>
    </div>
</template>
<script>
import QrScanner from 'qr-scanner';
import { useStaffStore } from '@/store/staffStore.js';
import axios from 'axios';

export default {
    name: 'OBQRScanner',
    data() {
        return {
            scanActive: true,
            flashOn: false,
            scanResult: false,
            cameraAvailable: false,
            scannerRef: null,
            showManualEntry: false,
            manualUhid: null,
            hco_id: null,
            user_id: null,
            uhid: null,
            location_id: null,
            isLocating: false,
            visit_id: null,
            key: null,
            appointment_id: null,
            isWithinRange: false,
            locationError: 'Checking your location, please wait...',
            hospitalLocation: {
                lat: 25.9278416,
                lon: 83.6141056
            },
            allowedRadius: 300
        };
    },
    mounted() {
        this.checkGeofence();
    },
    beforeUnmount() {
        this.stopScanner();
    },
    computed: {
        user_type: () => useStaffStore().user_type || ''
    },
    methods: {
        async getAccurateLocation() {
            const GOOGLE_API_KEY = import.meta.env.VITE_GOOGLE_GEOLOCATION_API_KEY;

            try {
                const response = await axios.post(`https://www.googleapis.com/geolocation/v1/geolocate?key=${GOOGLE_API_KEY}`, {
                    considerIp: 'true'
                });
                if (response.data && response.data.location) {
                    const userCoords = {
                        lat: response.data.location.lat,
                        lon: response.data.location.lng,
                        accuracy: response.data.accuracy
                    };

                    console.log(' Google API location:', userCoords);
                    return userCoords;
                } else {
                    throw new Error('Failed to get location from Google API.');
                }
            } catch (error) {
                console.error('Google Geolocation API error:', error);
                return null;
            }
        },

        async checkGeofence() {
            this.isLocating = true;
            this.locationError = 'Checking your location, please wait...';

            let userCoords = await this.getAccurateLocation();

            // fallback
            if (!userCoords && navigator.geolocation) {
                try {
                    userCoords = await new Promise((resolve, reject) => {
                        navigator.geolocation.getCurrentPosition(
                            (pos) => resolve({ lat: pos.coords.latitude, lon: pos.coords.longitude }),
                            (err) => reject(err),
                            { enableHighAccuracy: true, timeout: 10000 }
                        );
                    });
                } catch (e) {
                    this.locationError = 'Unable to determine your location.';
                    this.isLocating = false;
                    return;
                }
            }

            if (!userCoords) {
                this.locationError = 'Location detection failed.';
                this.isLocating = false;
                return;
            }

            const distance = this.getDistance(this.hospitalLocation, userCoords);

            if (distance <= this.allowedRadius) {
                this.isWithinRange = true;
                this.locationError = null;
                this.$nextTick(() => {
                    this.initScanner();
                });
            } else {
                this.isWithinRange = false;
                this.locationError = `Scanner Disabled: You are approximately ${distance.toFixed(0)} meters away and need to be within ${
                    this.allowedRadius
                } meters of the hospital.`;
            }

            this.isLocating = false;
        },

        getDistance(coords1, coords2) {
            const R = 6371e3;
            const φ1 = (coords1.lat * Math.PI) / 180;
            const φ2 = (coords2.lat * Math.PI) / 180;
            const Δφ = ((coords2.lat - coords1.lat) * Math.PI) / 180;
            const Δλ = ((coords2.lon - coords1.lon) * Math.PI) / 180;

            const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

            return R * c;
        },

        initScanner() {
            const videoRef = this.$refs.videoRef;

            if (!videoRef) {
                console.error('Scanner init failed: Video element not found.');
                return;
            }

            this.scannerRef = new QrScanner(
                videoRef,
                (result) => {
                    const decodedData = this.decodeBase64(result.data);
                    if (decodedData) {
                        this.parseDecodedData(decodedData);
                        this.validatePatient();
                        this.scanResult = true;
                        this.scanActive = false;
                        this.scannerRef.stop();
                    }
                },
                {
                    highlightScanRegion: true,
                    highlightCodeOutline: true,
                    preferredCamera: 'environment',
                    maxScansPerSecond: 1,
                    returnDetailedScanResult: true
                }
            );

            this.scannerRef
                .start()
                .then(() => {
                    this.cameraAvailable = true;
                })
                .catch((err) => {
                    console.error('Camera error:', err);

                    if (err === 'NotAllowedError') {
                        this.locationError = 'Camera access was denied. Please enable camera permissions in your browser settings.';
                    } else {
                        this.locationError = `Could not start camera. Error: ${err.name || err}`;
                    }
                });
        },

        stopScanner() {
            if (this.scannerRef) {
                this.scannerRef.stop();
                this.scannerRef.destroy();
                this.scannerRef = null;
            }
        },
        toggleManualEntry() {
            this.showManualEntry = !this.showManualEntry;
            if (!this.showManualEntry) {
                this.manualUhid = null;
            }
        },
        submitManualUhid() {
            if (this.manualUhid) {
                this.uhid = this.manualUhid;
                this.validatePatient();
            }
        },
        toggleFlash() {
            if (this.cameraAvailable) {
                this.scannerRef.toggleFlash().then(() => {
                    this.flashOn = !this.flashOn;
                });
            }
        },
        decodeBase64(base64Data) {
            try {
                const decoded = atob(base64Data);
                return JSON.parse(decoded);
            } catch (error) {
                console.error('Failed to decode base64 or parse JSON:', error);
                return null;
            }
        },
        parseDecodedData(decodedData) {
            this.hco_id = decodedData.hco_id;
            this.user_id = decodedData.user_id;
            this.uhid = decodedData.uhid;
            this.location_id = decodedData.location_id;
            this.visit_id = decodedData.visit_id;
            this.key = decodedData.key;
            this.appointment_id = decodedData.appointment_id || null;
        },
        async validatePatient() {
            try {
                const data = {
                    hco_id: this.hco_id,
                    user_id: this.user_id,
                    uhid: this.uhid,
                    location_id: 1,
                    visit_id: this.visit_id,
                    key: this.key,
                    event: this.user_type,
                    manualUhid: this.manualUhid,
                    appointment_id: this.appointment_id
                };

                const response = await axios.post('/staff/QrScanner.html?action=scanQR', data);

                if (response.data) {
                    this.stopScanner();
                    this.$router.go(-1);
                }
            } catch (error) {
                console.error('Error validating patient:', error);
            }
        }
    }
};
</script>

<style scoped>
.qr-scanner-container {
    max-width: 100%;
    padding: 16px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.scanner-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 400px;
}

.scanner-video {
    width: 100%;
    height: 400px;
    display: block;
    transition: all 0.3s ease;
}

.scanner-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.scan-line {
    position: absolute;
    top: 50%;

    left: 30%;
    width: 39%;
    height: 2px;
    background: rgba(76, 175, 80, 0.8);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
    z-index: 1;
}

.scan-animation {
    animation: scan 2s infinite linear;
}

@keyframes scan {
    0% {
        top: 10%;
    }
    100% {
        top: 90%;
    }
}
</style>

Creating a Gauge Chart (Speedometer) in Vue.js Using Vue Speedometer Plugin

Navnit Rai — Fri, 30 May 2025 05:23:41 +0000

⚡ Vue Advanced Speedometer — A Professional Gauge Chart for Vue 3

Docs
Dashboards, monitoring systems, IoT panels, and analytics apps often need visual indicators like speedometers or gauge charts.

But most Vue gauge libraries are either:

Not customizable enough
Not TypeScript friendly
Not performant
Or visually outdated

So I built Vue Advanced Speedometer — a modern, customizable, TypeScript-first gauge component for Vue 3.

It renders with SVG, supports animations, and is designed for real-world dashboards.

🚀 Vue Advanced Speedometer

A professional-grade gauge chart library for Vue 3.

✔ Vue 3 native
✔ TypeScript support
✔ Highly customizable
✔ Smooth animations
✔ Production ready

GitHub
https://github.com/Navnit73/vue-speedometer-gauge-chart

📦 Installation

Install using your preferred package manager.

npm install vue-advanced-speedometer

⚙ Global Registration

// main.ts
import { createApp } from 'vue'
import { VueSpeedometer } from 'vue-advanced-speedometer'
import 'vue-advanced-speedometer/dist/style.css'
import App from './App.vue'

const app = createApp(App)

app.component('VueSpeedometer', VueSpeedometer)

app.mount('#app')

📌 Basic Usage

The simplest example requires only value and max.

<VueSpeedometer :value="65" :max="100" />

This instantly renders a responsive animated gauge.

Perfect for:

CPU usage
Performance scores
KPIs
Health indicators

🎨 Customization Example

You can easily customize the theme, animation, and gauge type.

<VueSpeedometer
  :value="120"
  :max="180"
  type="full"
  theme="dark"
  :animationDuration="1000"
/>

Options include:

semi gauge
full circle
quarter gauge

🧩 Custom Segments

Define colored ranges to show safe / warning / danger zones.

const segments = [
  { from: 0, to: 60, color: '#22c55e' },
  { from: 60, to: 120, color: '#eab308' },
  { from: 120, to: 180, color: '#ef4444' }
]

<VueSpeedometer
  :value="95"
  :max="180"
  :segments="segments"
/>

Perfect for:

Health metrics
Server load
Risk indicators

🌈 Gradient Gauges

You can also render smooth gradient arcs.

<VueSpeedometer
  :value="120"
  :max="180"
  :gradient="['#00ff88', '#ffaa00', '#ff3300']"
/>

🚨 Alert Thresholds

Trigger visual alerts when values cross thresholds.

const alerts = [
  { value: 80, color: '#f59e0b' },
  { value: 140, color: '#ef4444' }
]

<VueSpeedometer
  :value="150"
  :max="180"
  :alerts="alerts"
/>

Great for:

system monitoring
analytics dashboards
medical monitoring

🎯 Custom Center Slot

You can fully customize the center display using Vue slots.

<VueSpeedometer :value="85" :max="100">
  <template #center="{ value, percentage }">
    <div class="custom-center">
      <div>{{ value }}</div>
      <div>{{ percentage }}%</div>
    </div>
  </template>
</VueSpeedometer>

✨ New in v2.0

Version 2.0 introduces several powerful new features.

Multi-Needle Support

Display multiple metrics in one gauge.

const needles = [
  { value: 60, color: '#3b82f6', label: 'AVG' },
  { value: 140, color: '#ef4444', label: 'MAX' }
]

<VueSpeedometer :max="200" :needles="needles" />

Logarithmic Scale

Useful for wide-range data like metrics from 1 → 10000.

<VueSpeedometer
  :value="500"
  :min="1"
  :max="10000"
  :logarithmic="true"
/>

Custom Tick Labels

Format ticks as currency, RPM, percentages, etc.

<VueSpeedometer
  :value="4500"
  :max="10000"
  :formatTick="(v) => '$' + v"
/>

Concentric Arcs

Add additional metrics around the main gauge.

const arcs = [
  { radius: 80, color: '#3b82f6', value: 55, max: 100 },
  { radius: 70, color: '#22c55e', value: 40, max: 100 }
]

<VueSpeedometer
  :value="75"
  :max="100"
  :concentricArcs="arcs"
/>

🎮 Events

The component emits useful lifecycle events.

Example:

@value-change
@segment-enter
@segment-leave
@animation-end

This allows you to trigger logic like:

alerts
analytics
notifications

🛠 Exposed Methods

Control the gauge programmatically.

animateTo(value: number)

Example:

speedometer.animateTo(75)

You can also export the gauge.

exportAs('png')
exportAs('svg')

🧠 Full TypeScript Support

The library exports typed interfaces:

interface Segment {
  from: number
  to: number
  color: string
}

interface NeedleConfig {
  value: number
  color?: string
  label?: string
}

Perfect for TypeScript-first Vue apps.

📊 Ideal Use Cases

Vue Advanced Speedometer works great for:

Analytics dashboards
IoT monitoring panels
Medical systems
Finance dashboards
Admin panels
Real-time metrics

🔗 Links

GitHub
https://github.com/Navnit73/vue-speedometer-gauge-chart

NPM
https://www.npmjs.com/package/vue-advanced-speedometer-pro

❤️ Built for the Vue Community

Vue Advanced Speedometer is MIT licensed and open for contributions.

If you like it:

⭐ Star the repository
🐛 Report issues
🚀 Contribute improvements

Let’s build better Vue dashboards together.

College dunia interview questions

Navnit Rai — Sat, 14 Sep 2024 06:32:25 +0000

Q1. Given an array of n elements that contains elements from 0 to n-1, with any of these numbers appearing any number of times. Find these repeating numbers in O(n) and use only constant memory space.

Note: The repeating element should be printed only once.

Input: n=7, array[]={1, 2, 3, 6, 3, 6, 1

Output: 1, 3, 6

Explanation. The numbers 1.3 and 6 appear more than once in the array.

Q2. Given an array of integers, return all the elements having positive and negative values of a number that exists in the array,

Note: If no such pair exists, simply retum an empty array, also multiple pairs of the same number could exist and you need to put each of them in the array. Return the pairs in sorted order.

Expected Time Complexity O(nlog(n))

Expected Auxiliary Space, O(n)

Input: arr[] = [1, -3, 2, 3, 6,-1,-3,31

Output: 1-1. 1, -3, 3-3.3]

Explanation: The array contains both 1 and -1, and 3 &-3 two times

Advance pattern python webkul interview

Navnit Rai — Fri, 06 Sep 2024 02:25:08 +0000

# n=4                  *    
#                      * *
#              ****eeee*   *
#         *    ****    * *
#       * *    ****    *
#     *   *eeee****
#       * *
#         *


n=4

for i in range(n//2):
    for j in range(3*n+n//2+1):
        print(' ',end='')
    for j in range(i+1):
        print('*',end='')
    print()

for i in range(1):
    for j in range(n+n//2+1):
        print(' ',end='')
    for j in range(n):
        print('*',end='')
    for j in range(n):
        print('e',end='')
    print('*',end='')
    for j in range(n//2-1):
        print(' ',end='')
    print('*')

for i in range(n//2):
    for j in range(n//2-i):
        print(' ',end='')
    for j in range(i+1):
        print('*',end='')
    for j in range(n):
        print(' ',end='')
    for j in range(n):
        print('*',end='')
    for j in range(n):
        print(' ',end='')
    for j in range(n//2-i):
        print('*',end='')
    print()

for i in range(1):
    print('*',end='')
    for j in range(n//2-1):
        print(' ',end='')
    print('*',end='')
    for j in range(n):
        print('e',end='')
    for j in range(n):
        print('*',end='')
    print()

for i in range(n//2):
    for j in range(i+1):
        print(' ',end='')
    for j in range(n//2-i):
        print('*',end='')
    print()

Webkul pattern question advance pattern for interview with python

Navnit Rai — Thu, 05 Sep 2024 17:29:37 +0000

n=5
for i in range(n-2):
    for j in range(i+1):
        print("*",end='')
    print()
print("*"*(n-1),end='')
print(" "*(n+1),end='')
print("*")
print("*"*(2*n+2))
print("*"*(n-1),end='')
print(" "*(n+1),end='')
print("*")

for i in range(n):
    for j in range(n-i-2):
        print("*",end='')
    print()

https://www.photoresizer.co.in/
This free online photo resizer helps candidates resize photos for SSC CGL, UPSC, IBPS, Banking, Railway and other government exams. for dev.to post



# n=3
# *
# **    *
# ********
# **    *
# *

# n=5

# *             
# **           
# ***         
# ****      *
# ************
# ****      *
# ***
# ***
# **
# *

# #webkul pattern program round 1 
# #pattern runs for odd number like min 3 , 5, 7 etc
# #here is ther pattern
# #for n==3
# *       *
# **     **
# ***@@@***
#    @@@
#    @@@
#    ***
#     *
# #for n==5 
# *             *
# **           **
# ***         ***
# ****       ****
# *****@@@@@*****
#      @@@@@
#      @@@@@
#      @@@@@
#      @@@@@
#      *****
#       ***
#        *
# #and so on for n==7.....
# #here is the program


n=5
for i in range(n+1):
    for j in range(i):
        print('*',end='')
    for j in range(n-i):
        print(' ',end='')
    for j in range(n):
        if(i==n):
            print('@',end='')
        else:
            print(' ',end='')
    for j in range(n-i):
        print(' ',end='')
    for j in range(i):
        print('*',end='')
    print()
for i in range(n-1):5
    for j in range(3*n):
        if(j<n or j>2*n-1):
            print(' ',end='')
        else:
            print('@',end='')
    print()
for i in range(n//2+1):
    for j in range(n):
        print(' ',end='')
    for j in range(i):
        print(' ',end='')
    for j in range(n-2*i):
        print('*',end='')
    for j in range(i):
        print(' ',end='')
    for j in range(n):
        print(' ',end='')
    print()

# Input : 3
# Output : 
#                             @
#                            @@@
#                           @@@@@
#                           *   *
#                          **@@@**
#                           *   *
# Input : 5
# Output : 
#                             @
#                            @@@
#                           @@@@@
#                          @@@@@@@
#                          *     *
#                         **     **
#                        ***@@@@@***
#                         **     **
#                          *     *

n=3
for i in range(n//2+2):
    for j in  range(n-i):
        print(" ",end='')
    for j in range(1+2*i):
        print('@',end='')
    print()
for i in range(1,n//2+1):
    if(i<n//2+1):
        for j in range(n//2-i+1):
            print(' ',end='')
        for j in range(i):
            print("*",end="")
        for j in range(n):
            print(" ",end='')
        for j in range(i):
            print("*",end="")
    print()
for i in range(1):
    for j in range(n+2*(n//2+1)):
        if(j<n//2+1 or j>n+n//2):
            print("*",end='')
        else:
            print('@',end='')
    print()
for i in range(n//2):
    for j in range(i+1):
        print(' ',end='')
    for j in range(n//2-i):
        print('*',end='')
    for j in range(n):
        print(' ',end='')
    for j in range(n//2-i):
        print('*',end='')
    print()


# n=3

# @       
# @@      @@@
# @@@*****@@@
# @@      @@@
# @       


# n=5

# @          
# @@         @@@@@
# @@@        @@@@@
# @@@@*******@@@@@
# @@@        @@@@@
# @@         @@@@@
# @     


n=5
for i in range(n-1):
    for j in range(i+1):
        print('@',end='')
    for j in range(n-2-i):
        print('_',end='')
    for j in range(n+2):
        if(i==n-2):
            print('*',end='')
        else:
            print('_',end='')
    for j in range(n):
        if(i>0):
            print('@',end='')
        else:
            print('_',end='')
    print()

for i in range(n//2+1):
    for j in range(n//2+1-i):
        print('@',end='')
    for j in range(i):
        print('_',end='')
    for j in range(n+3):
        print('_',end='')
    for j in range (n):
        if(i<n//2):
            print('@',end='')
        else:
            print(' ',end='')
    print()

# n=3
#     *
#   ***
#   @ @   
# ***@ @***
#  *     *


# n=5
#       *
#       ***
#      *****
#      @   @     
#      @   @     
#      @   @     
# *****@   @*****
#  ***       ***
#   *         *



n=5
for i in range(n//2+1):
    for j in range(n):
        print(' ',end='')
    for j in range(n//2-i):
        print(' ',end='')
    for j in range(1+2*i):
        print('*',end='')
    print()
for i in range(n-1):
    for j in range(3*n):
        if(j==n or j==2*n-1):
            print('@',end='')
        elif(i==n-2 and(j<n or j>2*n-1)):
            print('*',end='')
        else:
            print(' ',end='')
    print()
for i in range(n//2):
    for j in range(i+1):
        print(' ',end='')
    for j in range(n-2-2*i):
        print('*',end='')
    for j in range(i+1):
        print(' ',end='')
    for j in range(n):
        print(' ',end='')
    for j in range(i+1):
        print(' ',end='')
    for j in range(n-2-2*i):
        print('*',end='')
    print()

n= int(input("enter only odd number"))


for i in range(n//2+1):
    for j in range(n//2):
        print("-",end="")
    for j in range(i):
        print("1",end="")
    for j in range(n-2*i):
        print("@",end="")
    print()

for i in range(n):
    for j in range(n):
        if i==0 or j==n-1 or j==0:
            print("*",end="")
        else:
            print("-",end="")



    print()```