Frontend Calculation & Tools (JS)
Relevant source files
The following files were used as context for generating this wiki page:
- app/public/js/riso-tools.js (Note: Referenced in riso_separator.html.php)
- app/view/riso_separator.html.php
- app/view/image_processor.html.php
- app/view/taux_remplissage.html.php
- app/view/tirage_multimachines.html.php (Referenced via translations and logic in main-caddy.js)
- app/js/web/debugger.js
The frontend calculation and tools module provides the user interface and logic for complex document reproduction tasks, including ink fill rate estimation, color separation for Riso duplicators, and image processing. These tools are built primarily using JavaScript and HTML5 Canvas to perform heavy lifting on the client side, ensuring a responsive experience when handling high-resolution images and PDF documents.
This system is tightly integrated with the Electron main process for file handling and uses external libraries like PDF.js for document rendering and JSZip for multi-file exports. Sources: app/view/riso_separator.html.php:1-10, app/view/image_processor.html.php:1-15
Image Processing and Bitmap Conversion
The image processing module allows users to manipulate visual properties of documents before reproduction. This includes adjusting brightness, contrast, gamma, and saturation, as well as specialized bitmap conversions (dithering or thresholding) essential for screen printing and risography.
Processing Logic
Adjustments are typically applied in real-time to a previewCanvas, while final high-resolution processing is handled on a fullSizeCanvas. The logic supports both standard image formats (PNG, JPEG) and PDF documents via PDF.js.
The diagram shows the dual-path processing flow for images and PDF pages within the browser environment. Sources: app/view/image_processor.html.php:330-400
Adjustment Parameters
| Parameter | Range | Description |
|---|---|---|
| Contrast | -100 to 100 | Adjusts the difference between light and dark areas using a 259-factor algorithm. |
| Brightness | -100 to 100 | Increases or decreases the intensity of RGB values. |
| Gamma | 0.1 to 3.0 | Power-law relationship adjustment for mid-tone luminance. |
| Saturation | -100 to 100 | Modifies color intensity by calculating grayscale values and interpolating. |
| Threshold | 0 to 255 | Simple binary conversion for bitmap mode. |
Sources: app/view/image_processor.html.php:143-185, app/view/image_processor.html.php:418-460
Riso Color Separation
The Riso Separator tool is a specialized module for splitting color images into discrete grayscale layers intended for multi-drum printing. It supports multiple color models and interactive selection tools. Sources: app/view/riso_separator.html.php:100-150
Color Models and Extraction
- RGB Mode: Splits the image into Red, Green, and Blue channels.
- CMYK Mode: Uses a CMYK extraction algorithm to generate Cyan, Magenta, Yellow, and Black plates.
- 2-Color Mode: Splits an image based on grayscale luminance into "Dark" and "Light" plates.
- Pipette (Eyedropper): Allows users to click a pixel and isolate all pixels within a specific color distance (tolerance).
This sequence illustrates the interaction between the user interface and the backend logic for custom color isolation. Sources: app/view/riso_separator.html.php:485-530, app/view/riso_separator.html.php:570-600
Effects and Halftones
Users can apply post-separation effects to simulate the Risograph aesthetic:
- Posterization: Reduces grayscale levels to a user-defined number (e.g., 4 levels).
- Halftoning: Applies dot patterns (trames) using specific angles for different channels (e.g., 15°, 45°, 75°) to avoid Moiré patterns.
Sources: app/view/riso_separator.html.php:650-680, app/view/riso_separator.html.php:710-735
Ink Fill Rate Analysis
The fill rate tool calculates the percentage of ink required for a specific document by performing a pixel-by-pixel analysis of the document's content. Sources: app/view/taux_remplissage.html.php:1-20
Calculation Methodology
The analysis works by counting "non-white" pixels based on a user-defined tolerance.
- Tolerance Setting: Pixels are evaluated against a threshold (default 245/255). Pixels where the average RGB value is lower than this threshold are considered "inked."
- Dominant Colors: The tool identifies the most frequent hex codes in the document to help determine secondary ink costs.
- Optimization: Large documents are often analyzed via scaled previews to maintain performance, though full-resolution analysis is available.
PDF Debugging and Inspection Tools
For advanced technical analysis, the project includes a Debugger module (based on PDF.js logic) that allows for low-level document inspection. Sources: app/js/web/debugger.js:1-50
Key Components
- Font Inspector: Identifies every font used in the document and allows for individual font downloading or selective visibility.
- Stepper: Provides a mechanism to step through the PDF operator list (
fnArrayandargsArray) to debug rendering issues. - Stats Panel: Tracks per-page rendering performance and memory usage.
Sources: app/js/web/debugger.js:33-100, app/js/web/debugger.js:254-300
Technical Implementation Details
File Handling and Blobs
Calculated results and processed images are converted into Blob objects for user downloads. Multi-file exports (like isolated Riso layers) utilize JSZip to bundle PNG files into a single archive.
// Example of exporting a processed channel as PNG
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `riso_${id}.png`;
document.body.appendChild(a);
a.click();
});
Sources: app/view/riso_separator.html.php:440-460
Progress Monitoring
For long-running processes (like large PDF conversions in the ImageProcessor), the frontend implements a polling mechanism that queries an API endpoint (api/check_image_progress.php) using a progress_key to update a UI progress bar. Sources: app/view/image_processor.html.php:540-600
This modular approach to frontend tools ensures that users can perform specialized pre-press tasks directly within the application without needing external graphic design software.