Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
415 changes: 401 additions & 14 deletions hello-world/next/README.md

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions hello-world/next/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Hello World for Next.js - Dynamsoft Barcode Reader Sample",
description: "Dynamsoft Barcode Reader in a Next.js Application, helps read barcodes from camera or images.",
keywords: "barcodes, camera, images, nextjs",
};

export default function RootLayout({
Expand Down
28 changes: 7 additions & 21 deletions hello-world/next/app/page.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,30 @@
align-items: center;
margin-top: 20px;
}
.title .title-logo {
width: 60px;
height: 60px;
animation: retate 5s infinite linear;
}
.top-btns {
.buttons-container {
width: 30%;
margin: 20px auto;
}
.top-btns button {
.buttons-container button {
display: inline-block;
border: 1px solid black;
padding: 5px 15px;
background-color: transparent;
cursor: pointer;
}
.top-btns button:first-child {
.buttons-container button:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right: transparent;
}
.top-btns button:nth-child(2) {
.buttons-container button:nth-child(2) {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left: transparent;
}

@media screen and (max-width: 500px) {
.top-btns {
width: 70%;
@media screen and (max-width: 800px) {
.buttons-container {
width: 70%;
}
}

@keyframes retate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
51 changes: 40 additions & 11 deletions hello-world/next/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,51 @@
"use client";

import { useState } from 'react';
import dynamic from "next/dynamic";
import { useState } from "react";
import "./page.css";
import VideoCapture from '@/component/VideoCapture';
import ImageCapture from '@/component/ImageCapture';

const VideoCapture = dynamic(() => import("../components/VideoCapture/VideoCapture"), {
ssr: false,
});
const ImageCapture = dynamic(() => import("../components/ImageCapture/ImageCapture"), {
ssr: false,
});

enum Modes {
VIDEO_CAPTURE = "video",
IMAGE_CAPTURE = "image",
}

export default function Home() {
const [mode, setMode] = useState("video");
const [mode, setMode] = useState(Modes.VIDEO_CAPTURE);

const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE);
const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE);

return (
<div className='App'>
<div className='title'>
<h2 className='title-text'>Hello World for React</h2>
<div className="hello-world-page">
<div className="title">
<h2 className="title-text">Hello World for Next.js</h2>
</div>
<div className='top-btns'>
<button onClick={()=>{setMode("video")}} style={{backgroundColor: mode === "video" ? "rgb(255, 174, 55)" : "#fff"}}>Video Capture</button>
<button onClick={()=>{setMode("image")}} style={{backgroundColor: mode === "image" ? "rgb(255, 174, 55)" : "#fff"}}>Image Capture</button>
<div className="buttons-container">
<button
style={{
backgroundColor: mode === Modes.VIDEO_CAPTURE ? "rgb(255,174,55)" : "white",
}}
onClick={showVideoCapture}
>
Decode Video
</button>
<button
style={{
backgroundColor: mode === Modes.IMAGE_CAPTURE ? "rgb(255,174,55)" : "white",
}}
onClick={showImageCapture}
>
Decode Image
</button>
</div>
{ mode === "video" ? <VideoCapture /> : <ImageCapture /> }
<div className="container">{mode === Modes.VIDEO_CAPTURE ? <VideoCapture /> : <ImageCapture />}</div>
</div>
);
}
18 changes: 0 additions & 18 deletions hello-world/next/component/ImageCapture.css

This file was deleted.

70 changes: 0 additions & 70 deletions hello-world/next/component/ImageCapture.tsx

This file was deleted.

11 changes: 0 additions & 11 deletions hello-world/next/component/VideoCapture.css

This file was deleted.

103 changes: 0 additions & 103 deletions hello-world/next/component/VideoCapture.tsx

This file was deleted.

20 changes: 20 additions & 0 deletions hello-world/next/components/ImageCapture/ImageCapture.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.image-capture-container {
width: 100%;
height: 100%;
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
Courier New, monospace;
}

.image-capture-container .input-container {
width: 80%;
height: 100%;
display: flex;
justify-content: center;
border: 1px solid black;
margin: 0 auto;
}

.image-capture-container .results {
margin-top: 20px;
height: 100%;
}
Loading