### Start Next.js Development Server Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.React/UserInterface/README.md Commands to start the Next.js development server using different package managers. Ensures the application is running locally for development. ```bash npm run dev ``` ```bash yarn dev ``` ```bash pnpm dev ``` ```bash bun dev ``` -------------------------------- ### Start Angular Development Server Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/README.md Starts the Angular development server, which is required for the .NET application to proxy requests to during development. Run this from the UserInterface folder. ```bash npm run start ``` -------------------------------- ### Build .NET Application (Release) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/README.md Builds the .NET application in release mode for production. This can be done via Visual Studio's Configuration Manager or by running this command from the root .NET project folder. ```bash dotnet build -c Release ``` -------------------------------- ### Installing Flatpak and Adding Repositories (Bash) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This sequence of bash commands installs the Flatpak package manager on Debian-based systems, adds the Flathub repository for accessing a wide range of applications, and installs the GNOME runtime and SDK. These steps are necessary for running Flatpak applications. ```bash # Install Flatpak sudo apt install flatpak # Add the Flathub repository flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo # Add the GNOME runtime and SDK forx64 flatpak install org.gnome.Sdk/x86_64/45 flatpak install org.gnome.Platform/x86_64/45 ``` -------------------------------- ### Run .NET Application (Development) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/README.md Runs the .NET application, which proxies requests to the running Angular development server. Execute this command from the UserInterface folder. ```bash dotnet run ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Vue/UserInterface/README.md Installs all the necessary packages for the project using npm. This is a fundamental step before running or building the application. ```sh npm install ``` -------------------------------- ### Run Project Development Server Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d.React/UserInterface/README.md Starts the React development server, which runs the application in development mode. It opens the application at http://localhost:3000 and enables live reloading for edits. Lint errors are displayed in the console. ```shell yarn start ``` -------------------------------- ### Build and Bundle Flatpak Package Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md Commands to build a Photino application into a Flatpak repository and then bundle it into a distributable installation file. This process prepares the application for deployment on systems with Flatpak support. ```bash # Build the Flatpak flatpak-builder --force-clean --repo=./flatpak-repo ./flatpak-build io.tryphotino.publishphotino.yml # Create the Flatpak installation file flatpak build-bundle ./flatpak-repo PublishPhotino.flatpak io.tryphotino.publishphotino ``` -------------------------------- ### Install GNOME Runtime and SDK for ARM64 Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md Installs the GNOME runtime and SDK necessary for building Flatpak applications targeting ARM64 architecture. These are essential dependencies for applications that rely on GNOME technologies. ```bash flatpak install org.gnome.Sdk/aarch64/45 flatpak install org.gnome.Platform/aarch64/45 ``` -------------------------------- ### Install Yarn Globally Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d.React/UserInterface/README.md Installs the Yarn package manager globally using npm. This is a prerequisite for managing project dependencies and running scripts within the Photino Samples project. ```shell npm install -g yarn ``` -------------------------------- ### Angular CLI Development Server Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/UserInterface/README.md Starts the Angular development server for local testing and hot-reloading. Uses the Angular CLI and requires the project to be built. ```bash ng serve ``` -------------------------------- ### Angular CLI Unit Tests Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/UserInterface/README.md Executes unit tests for the Angular project using Karma. Requires a testing framework setup. ```bash ng test ``` -------------------------------- ### Run Development Server Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Vue/UserInterface/README.md Starts the Vite development server with hot-reloading enabled. This command is used for active development and allows you to see changes instantly. ```sh npm run dev ``` -------------------------------- ### Eject from Create React App Configuration Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d.React/UserInterface/README.md Performs a one-way eject operation, removing the single build dependency from the project. This action copies all configuration files (Webpack, Babel, ESLint) into the project, granting full control over the build setup. After ejecting, scripts like `yarn start` will point to the copied configurations. ```shell yarn eject ``` -------------------------------- ### Debian Package Control File (control) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md The control file provides essential metadata for a Debian package, including its name, version, architecture, dependencies, and a brief description. It's crucial for package installation and management on Debian-based systems. ```debian Source: PublishPhotino Section: custom Priority: optional Maintainer: your name Package: PublishPhotino Version: 1.0.0 Architecture: amd64 Depends: libc6 (>= 2.31), gir1.2-gtk-3.0 (>= 3.24), libwebkit2gtk-4.1-0 (>= 2.42) Description: PublishPhotino A simple Photino application. ``` -------------------------------- ### Build Project for Production Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d.React/UserInterface/README.md Builds the React application for production deployment. It optimizes the build by minifying code and adding hash filenames, preparing the app for deployment to the `build` folder. ```shell yarn build ``` -------------------------------- ### Angular CLI Help Command Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/UserInterface/README.md Displays help information and documentation for Angular CLI commands. Provides access to the Angular CLI overview and command reference. ```bash ng help ``` -------------------------------- ### Initialize Three.js Scene and Objects Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d/wwwroot/index.html Sets up the WebGL renderer, camera, scene, and basic game elements like the playing field, paddles, and ball. It also includes text geometry for the game title. ```javascript container = document.getElementById('container'); const renderer = new THREE.WebGLRenderer(); renderer.setSize(700, 500); renderer.setClearColor(0x9999BB, 1); container.appendChild(renderer.domElement); const camera = new THREE.PerspectiveCamera(45, 2, 2.5, 10000); camera.position.set(0, 300, 3500 / 2 + 500); const scene = new THREE.Scene(); scene.add(camera); var fieldGeometry = new THREE.BoxGeometry(1200, 50, 3000, 1, 1, 1), fieldMaterial = new THREE.MeshLambertMaterial({ color: 0x113377 }); field = new THREE.Mesh(fieldGeometry, fieldMaterial); field.position.set(0, -50, 0); scene.add(field); paddle1 = addPaddle(); paddle1.position.z = 3000 / 2; paddle2 = addPaddle(); paddle2.position.z = -3000 / 2; var ballGeometry = new THREE.SphereGeometry(20, 16, 16), ballMaterial = new THREE.MeshLambertMaterial({ color: 0x39FF14 }); var ball = new THREE.Mesh(ballGeometry, ballMaterial); scene.add(ball); let loader = new THREE.FontLoader(); let loadedFont = loader.parse(rawFont); var materialFront = new THREE.MeshBasicMaterial({ color: 0xff1111 }); var materialSide = new THREE.MeshBasicMaterial({ color: 0x115078 }); var materialArray = [materialFront, materialSide]; var textGeom = new THREE.TextGeometry("PONGINO", { size: 8, height: 4, curveSegments: 1, font: loadedFont, weight: "bold", style: "normal", bevelThickness: 0.1, bevelSize: 0.5, bevelEnabled: true, material: 0, extrudeMaterial: 1 }); var textMaterial = new THREE.MeshFaceMaterial(materialArray); var textMesh = new THREE.Mesh(textGeom, textMaterial); textGeom.computeBoundingBox(); textMesh.position.x = -1000; textMesh.position.y = 300; textMesh.position.z = 0; textMesh.scale.x = 50.1; textMesh.scale.y = 50.1; textMesh.scale.z = 50.1; textMesh.rotation.x = -Math.PI / 50; scene.add(textMesh); camera.lookAt(ball.position); var mainLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000); scene.add(mainLight); camera.lookAt(ball.position); startRender(); renderer.domElement.addEventListener('mousemove', containerMouseMove); renderer.domElement.style.cursor = 'none'; ``` -------------------------------- ### Basic Photino.NET Project Configuration (.csproj) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This XML snippet shows a typical .csproj file for a Photino.NET application. It includes project type, target framework, implicit usings, nullability, and references the Photino.NET NuGet package. It also specifies content files to be copied to the output directory. ```xml WinExe net8.0 enable enable ``` -------------------------------- ### Desktop Entry File (.desktop) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md The .desktop file is used to create application shortcuts in desktop environments, defining the application's name, icon, executable path, and other display properties. This allows users to launch the application easily from menus or docks. ```ini [Desktop Entry] Name=PublishPhotino Comment=A simple Photino application Exec=/usr/bin/PublishPhotino Icon=/usr/share/icons/hicolor/512x512/apps/PublishPhotino.png Terminal=false Type=Application Categories=Utility; ``` -------------------------------- ### Publishing for Windows (dotnet CLI) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md Command to publish a .NET application as a self-contained single file executable for Windows (x64 architecture). This includes the .NET runtime in the executable. ```bash dotnet publish -r win-x64 ``` -------------------------------- ### Angular CLI Build Project Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/UserInterface/README.md Builds the Angular project for production deployment. Compiles and minifies application assets, storing them in the 'dist/' directory. ```bash ng build ``` -------------------------------- ### Advanced Photino.NET Project Configuration for Single-File Executable (.csproj) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This enhanced .csproj configuration enables the creation of a single-file executable. Key properties include `SelfContained`, `PublishSingleFile`, `IncludeAllContentForSelfExtract`, `EnableCompressionInSingleFile`, and `DebugType: embedded`. It also includes a custom target to move the built single file. ```xml WinExe net8.0 enable enable ./publish/templates/win/app.ico 0.0.0-$([System.DateTime]::Now.ToString(yyyyMMddHms)) true true true true false false embedded ``` -------------------------------- ### Run Project Tests Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d.React/UserInterface/README.md Launches the test runner in an interactive watch mode. This command is used to execute the project's test suite and monitor for changes. ```shell yarn test ``` -------------------------------- ### Next.js App Directory Structure Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.React/Resources/wwwroot/index.txt Illustrates the basic file structure of a Next.js application using the app directory. It shows the main page component and its child elements, including navigation links and logos. ```javascript import Image from "next/image"; export default function Home() { return (

Get started by editing  app/page.tsx

By{' '} Vercel Logo
Next.js Logo

Docs{' '} ->

Find in-depth information about Next.js features and API.

Learn{' '} ->

Learn about Next.js in an interactive course with quizzes!

Templates{' '} ->

Explore starter templates for Next.js.

Deploy{' '} ->

Instantly deploy your Next.js site to a public URL with Vercel.

); } ``` -------------------------------- ### Photino Flatpak Manifest File Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md Defines the metadata and build instructions for a Photino application packaged as a Flatpak. It specifies the application ID, runtime, SDK, build commands, sources, and permissions required for execution. ```yaml id: io.tryphotino.publishphotino runtime: org.gnome.Platform runtime-version: "45" sdk: org.gnome.Sdk command: PublishPhotino modules: - name: publishphotino buildsystem: simple build-commands: - install -D PublishPhotino /app/bin/PublishPhotino sources: - type: file path: ./bin/PublishPhotino finish-args: - "--socket=x11" - "--socket=wayland" - "--share=ipc" - "--filesystem=home" ``` -------------------------------- ### Build for Production Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Vue/UserInterface/README.md Compiles and minifies the project for production deployment. This command optimizes the code for performance and smaller file sizes. ```sh npm run build ``` -------------------------------- ### Run Publish Script (Bash) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This script navigates to the publish directory and executes the publish script. It's designed to create cross-platform executables for Photino.NET applications. Ensure you are using a Unix-like environment (like WSL on Windows). ```bash cd publish ./publish.sh ``` -------------------------------- ### Run Unit Tests Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Vue/UserInterface/README.md Executes the unit tests for the project using Vitest. This command helps ensure the quality and correctness of your code. ```sh npm run test:unit ``` -------------------------------- ### macOS Info.plist Configuration Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This XML snippet defines the essential metadata for a macOS application bundle, including executable name, icon, identifier, and minimum system version. It is crucial for the proper functioning and display of the application in macOS. ```xml CFBundleExecutable PublishPhotino CFBundleIconFile BundleIcon.png CFBundleIdentifier io.tryphotino.PublishPhotino CFBundleName PublishPhotino CFBundlePackageType APPL CFBundleVersion 1.0 LSMinimumSystemVersion 13.0 ``` -------------------------------- ### Linux .deb Package Directory Structure Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This outlines the directory structure required for creating a .deb package for Debian-based Linux distributions. It includes the DEBIAN control directory, the bin directory for the executable, and usr for applications, documentation, and icons. ```text debian-build ├── DEBIAN │   └── control ├── bin │   └── PublishPhotino └── usr └── share ├── applications │   └── PublishPhotino.desktop ├── doc │   └── PublishPhotino │   ├── changelog.gz │   ├── copyright │   └── README └── icons └── hicolor └── 512x512 └── apps └── PublishPhotino.png ``` -------------------------------- ### Next.js Internal Script Initialization Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.React/Resources/wwwroot/index.html This snippet contains Next.js internal JavaScript for initializing features and routing. It manages the application's state and prepares for hydration, ensuring a smooth user experience. ```javascript self.__next_f=self.__next_f||[];self.__next_f.push([0]);self.__next_f.push([2,null]);self.__next_f.push([1,"1:HL[\"/_next/static/css/4581698316aa5dc3.css\",\"style\"]\n"]);self.__next_f.push([1,"2:I[2846,[],\"\"]\n4:I[5878,[\"878\",\"static/chunks/878-971370f365b7106a.js\",\"931\",\"static/chunks/app/page-e90ebb3e0970a48f.js\"],\"Image\"]\n5:I[4707,[],\"\"]\n6:I[6423,[],\"\"]\n8:I[1060,[],\"\"]\n9:[]\n"]);self.__next_f.push([1,"0:[\"$\",\"$L2\",null,{\"buildId\":\"SB7w5PHMyUKfCLcK0MvSP\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",[\"$\",\"main\",null,{\"className\":\"flex min-h-screen flex-col items-center justify-between p-24\",\"children\":[[...]]}}]]}]}); ``` -------------------------------- ### macOS Info.plist for Camera/Microphone Access Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This XML snippet extends the Info.plist file for macOS applications to request user permission for accessing the camera and microphone. It includes descriptive strings explaining why these permissions are necessary. ```xml NSCameraUsageDescription Camera access is required to take pictures. NSMicrophoneUsageDescription Microphone access is required to record audio. ``` -------------------------------- ### Photino.NET Publish Folder Structure Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This shows the typical contents of a publish folder after running `dotnet publish` without single-file or self-contained configurations. It includes DLLs, JSON files, native runtime libraries for different platforms, and static web assets. ```text bin/Release/net8.0/publish ├── Photino.NET.dll ├── PublishPhotino ├── PublishPhotino.deps.json ├── PublishPhotino.dll ├── PublishPhotino.pdb ├── PublishPhotino.runtimeconfig.json ├── runtimes │ ├── linux-arm64 │ │ └── native │ │ └── Photino.Native.so │ ├── linux-x64 │ │ └── native │ │ └── Photino.Native.so │ ├── osx-arm64 │ │ └── native │ │ └── Photino.Native.dylib │ ├── osx-x64 │ │ └── native │ │ └── Photino.Native.dylib │ ├── win-arm64 │ │ └── native │ │ ├── Photino.Native.dll │ │ └── WebView2Loader.dll │ └── win-x64 │ └── native │ ├── Photino.Native.dll │ └── WebView2Loader.dll └── wwwroot └── index.html ``` -------------------------------- ### macOS Application Bundle Structure Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This represents the standard directory structure for a macOS application bundle (.app). It includes the Contents directory containing the Info.plist, the MacOS executable, and Resources for icons. ```text PublishPhotino.app └── Contents ├── Info.plist ├── MacOS │ └── PublishPhotino └── Resources └── BundleIcon.png ``` -------------------------------- ### Building and Renaming Debian Package (Bash) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md These bash commands are used to build a .deb package from a directory structure and then rename the resulting package file to a more conventional name. The `dpkg-deb --build` command packages the application, and `mv` renames the output file. ```bash # Create the package dpkg-deb --root-owner-group --build ./deb-build # Rename the package mv ./deb-build.deb ./PublishPhotino.deb ``` -------------------------------- ### Ball and Paddle Movement Logic Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d/wwwroot/index.html Contains functions to manage the ball's velocity, position updates, collision detection with sides and paddles, and CPU paddle AI. It also handles ball stopping and resetting. ```javascript function addPaddle() { var paddleGeometry = new THREE.BoxGeometry(200, 30, 10, 1, 1, 1), paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xFF5555 }), paddle = new THREE.Mesh(paddleGeometry, paddleMaterial); scene.add(paddle); return paddle; } function startBallMovement() { var direction = Math.random() > 0.5 ? -1 : 1; ball.$velocity = { x: 0, z: direction * 20 }; ball.$stopped = false; } function processCpuPaddle() { var ballPos = ball.position, cpuPos = paddle2.position; if (cpuPos.x - 100 > ballPos.x) { cpuPos.x -= Math.min(cpuPos.x - ballPos.x, 6); } else if (cpuPos.x - 100 < ballPos.x) { cpuPos.x += Math.min(ballPos.x - cpuPos.x, 6); } } function processBallMovement() { if (!ball.$velocity) { startBallMovement(); } if (ball.$stopped) { return; } updateBallPosition(); if (isSideCollision()) { ball.$velocity.x *= -1; } if (isPaddle1Collision()) { hitBallBack(paddle1); } if (isPaddle2Collision()) { hitBallBack(paddle2); } if (isPastPaddle1()) { stopBall(); setTimeout(reset, 2000); } if (isPastPaddle2()) { stopBall(); setTimeout(reset, 2000); } } function isPastPaddle1() { return ball.position.z > paddle1.position.z + 100; } function isPastPaddle2() { return ball.position.z < paddle2.position.z - 100; } function updateBallPosition() { var ballPos = ball.position; ballPos.x += ball.$velocity.x; ballPos.z += ball.$velocity.z; } function isSideCollision() { var ballX = ball.position.x, halfFieldWidth = 1200 / 2; return ballX - 20 < -halfFieldWidth || ballX + 20 > halfFieldWidth; } function hitBallBack(paddle) { ball.$velocity.x = (ball.position.x - paddle.position.x) / 5; ball.$velocity.z *= -1; } function isPaddle2Collision() { return ball.position.z - 20 <= paddle2.position.z && isBallAlignedWithPaddle(paddle2); } function isPaddle1Collision() { return ball.position.z + 20 >= paddle1.position.z && isBallAlignedWithPaddle(paddle1); } function stopBall() { ball.$stopped = true; } function isBallAlignedWithPaddle(paddle) { var halfPaddleWidth = 200 / 2, paddleX = paddle.position.x, ballX = ball.position.x; return ballX > paddleX - halfPaddleWidth && ballX < paddleX + halfPaddleWidth; } function reset() { ball.position.set(0, 0, 0); ball.$velocity = null; } ``` -------------------------------- ### Game Rendering Loop and Mouse Input Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.3d/wwwroot/index.html Manages the main game loop using requestAnimationFrame for smooth rendering. It also includes a mouse event listener to control the player's paddle position based on cursor movement. ```javascript function startRender() { running = true; render(); } function stopRender() { running = false; } function render() { if (running) { requestAnimationFrame(render); processBallMovement(); processCpuPaddle(); renderer.render(scene, camera); } } function containerMouseMove(e) { var mouseX = e.clientX; camera.position.x = paddle1.position.x = -((700 - mouseX) / 700 * 1200) + (1200 / 2); } ``` -------------------------------- ### Take Picture from Video Stream (JavaScript) Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.TestBench/wwwroot/main.html Captures a frame from a video stream, draws it onto a canvas, converts it to a PNG data URL, and displays it as an image source. It handles resizing and potential clearing of the photo. ```javascript function takepicture() { const context = canvas.getContext("2d"); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); const data = canvas.toDataURL("image/png"); photo.setAttribute("src", data); } else { clearphoto(); } } window.addEventListener("load", startup, false); })(); ``` -------------------------------- ### Angular CLI End-to-End Tests Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/UserInterface/README.md Runs end-to-end tests for the Angular application. Requires an additional package for end-to-end testing capabilities. ```bash ng e2e ``` -------------------------------- ### Angular CLI Code Scaffolding Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Angular/UserInterface/README.md Generates new Angular components, directives, services, etc. Uses the Angular CLI to create boilerplate code for application modules. ```bash ng generate component component-name ``` ```bash ng generate directive|pipe|service|class|guard|interface|enum|module ``` -------------------------------- ### Single-File Executable Output Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md This represents the output folder structure after successfully publishing a Photino.NET application as a single-file executable for macOS ARM64. It contains only the main executable file. ```text bin/Release/net8.0/osx-arm64/publish └── PublishPhotino ``` -------------------------------- ### Send Messages with Photino Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.TestBench/wwwroot/main.html Demonstrates how to send messages from JavaScript to the .NET backend using window.external.sendMessage. This is a core mechanism for inter-process communication within Photino applications. ```javascript window.external.receiveMessage(message => alert(message)); function OpenChildWindow() { window.external.sendMessage('child-window'); } function ZoomIn() { window.external.sendMessage('zoom-in'); } function ZoomOut() { window.external.sendMessage('zoom-out'); } function Center() { window.external.sendMessage('center'); } function Close() { window.external.sendMessage('close'); } function ClearBrowserAutoFill() { window.external.sendMessage('clearbrowserautofill'); } function Minimize() { window.external.sendMessage('minimize'); } function Maximize() { window.external.sendMessage('maximize'); } function SetContextMenuEnabled() { window.external.sendMessage('setcontextmenuenabled'); } function SetDevToolsEnabled() { window.external.sendMessage('setdevtoolsenabled'); } function SetFullScreen() { window.external.sendMessage('setfullscreen'); } function SetIconFile() { window.external.sendMessage('seticonfile'); } function SetPosition() { window.external.sendMessage('setposition'); } function SetResizable() { window.external.sendMessage('setresizable'); } function SetSizeUp() { window.external.sendMessage('setsize-up'); } function SetSizeDown() { window.external.sendMessage('setsize-down'); } function SetTitle() { window.external.sendMessage('settitle'); } function SetTopmost() { window.external.sendMessage('settopmost'); } function SetTransparent() { window.external.sendMessage('settransparent'); } function ShowState() { window.external.sendMessage('showproperties'); } function SendWebMessage() { window.external.sendMessage('sendWebMessage'); } function ToastNotification() { window.external.sendMessage('toastNotification'); } function ShowOpenFile() { window.external.sendMessage('showOpenFile'); } function ShowOpenFileAsync() { window.external.sendMessage('showOpenFileAsync'); } function ShowOpenFolder() { window.external.sendMessage('showOpenFolder'); } function ShowOpenFolderAsync() { window.external.sendMessage('showOpenFolderAsync'); } function ShowSaveFile() { window.external.sendMessage('showSaveFile'); } function ShowSaveFileAsync() { window.external.sendMessage('showSaveFileAsync'); } function ShowMessage() { window.external.sendMessage('showMessage'); } function SetMinSize() { window.external.sendMessage('setMinSize'); } function SetMaxSize() { window.external.sendMessage('setMaxSize'); } ``` -------------------------------- ### Lint Code with ESLint Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.Vue/UserInterface/README.md Runs ESLint to check for code style and potential errors. This command helps maintain code quality and consistency across the project. ```sh npm run lint ``` -------------------------------- ### Capture Photo from Webcam Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.TestBench/wwwroot/main.html This JavaScript code captures a still photo from a webcam using the getUserMedia API and displays it on an HTML canvas. It includes logic for setting video dimensions based on aspect ratio and handling browser compatibility issues. ```javascript const width = 320; let height = 0; let streaming = false; let video = null; let canvas = null; let photo = null; let startbutton = null; function showViewLiveResultButton() { if (window.self !== window.top) { document.querySelector(".contentarea").remove(); const button = document.createElement("button"); button.textContent = "View live result of the example code above"; document.body.append(button); button.addEventListener("click", () => window.open(location.href)); return true; } return false; } function startup() { if (showViewLiveResultButton()) { return; } video = document.getElementById("video"); canvas = document.getElementById("canvas"); photo = document.getElementById("photo"); startbutton = document.getElementById("startbutton"); navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then((stream) => { video.srcObject = stream; video.play(); }) .catch((err) => { console.error(`An error occurred: ${err}`); }); video.addEventListener( "canplay", (ev) => { if (!streaming) { height = video.videoHeight / (video.videoWidth / width); if (isNaN(height)) { height = width / (4 / 3); } video.setAttribute("width", width); video.setAttribute("height", height); canvas.setAttribute("width", width); canvas.setAttribute("height", height); streaming = true; } }, false, ); startbutton.addEventListener( "click", (ev) => { takepicture(); ev.preventDefault(); }, false, ); clearphoto(); } function clearphoto() { const context = canvas.getContext("2d"); context.fillStyle = "#AAA"; context.fillRect(0, 0, canvas.width, canvas.height); const data = canvas.toDataURL("image/png"); photo.setAttribute("src", data); } function takepicture() { const context = canvas.getContext("2d"); if (width && height) { context.drawImage(video, 0, 0, width, height); const data = canvas.toDataURL("image/png"); photo.setAttribute("src", data); } else { clearphoto(); } } window.addEventListener("load", startup, false); ``` -------------------------------- ### Next.js Page Component Structure Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.React/Resources/wwwroot/index.html This snippet shows the typical structure of a Next.js page component within the `app` directory. It demonstrates how to define the component and its JSX output, including elements like `div`, `p`, and `code` for displaying text and links. ```tsx export default function Page() { return (

Get started by editing  app/page.tsx

By{' '} Vercel Logo
Next.js Logo

Docs{' '} ->

Find in-depth information about Next.js features and API.

); } ``` -------------------------------- ### Disabling Default Content for Bundling Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.PublishPhotino/PublishPhotino/README.md These XML properties are used to disable the default content inclusion behavior when creating single-file executables. This allows for more explicit control over which files are bundled into the final application, preventing unnecessary files from being included. ```xml false false ``` -------------------------------- ### CSS Styling for Next.js 404 Error Page Source: https://github.com/tryphotino/photino.samples/blob/master/Photino.HelloPhotino.React/Resources/wwwroot/404.html This CSS snippet provides basic styling for a Next.js 404 error page. It sets the background and text color, and adjusts the appearance based on the user's preferred color scheme. ```css body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.