Remove obsolete audio and buzzer control documentation files, including detailed guides and HTML interfaces, to streamline the repository and eliminate redundancy. This cleanup enhances maintainability and focuses on essential resources for the reTerminal DM4 audio and buzzer functionalities.
This commit is contained in:
nearxos
266
archive/chromium-setup-legacy/PAGE-SCALING-SOLUTIONS.md
Normal file
266
archive/chromium-setup-legacy/PAGE-SCALING-SOLUTIONS.md
Normal file
@@ -0,0 +1,266 @@
|
||||
# Page Scaling Solutions for Chromium Fullscreen
|
||||
|
||||
## Problem
|
||||
When Chromium loads in fullscreen, the page content requires scrolling (scrollbar appears) instead of fitting the viewport.
|
||||
|
||||
## Solutions
|
||||
|
||||
### Solution 1: Automatic Zoom via Script (Current Implementation) ⭐
|
||||
|
||||
The startup script now automatically zooms out the page after it loads using `xdotool`.
|
||||
|
||||
**How it works:**
|
||||
- Waits for Chromium to load
|
||||
- Sends keyboard commands to zoom out (Ctrl+-)
|
||||
- Adjusts zoom level to fit content
|
||||
|
||||
**Configuration:**
|
||||
Edit `~/start-chromium.sh` and adjust the zoom-out loop:
|
||||
```bash
|
||||
# Change the number of zoom-out commands (currently 3)
|
||||
for i in {1..3}; do # Increase number for larger pages
|
||||
xdotool key --window $WINDOW_ID ctrl+minus
|
||||
sleep 0.5
|
||||
done
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- Works with any page
|
||||
- No page modification needed
|
||||
- Easy to adjust
|
||||
|
||||
**Cons:**
|
||||
- Requires xdotool
|
||||
- May need fine-tuning for different page sizes
|
||||
|
||||
---
|
||||
|
||||
### Solution 2: Edit the Page Itself (Best Long-term Solution)
|
||||
|
||||
If you control the web page at `http://127.0.0.1:8080`, add responsive CSS:
|
||||
|
||||
**Add to your HTML `<head>`:**
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
```
|
||||
|
||||
**Add responsive CSS:**
|
||||
```css
|
||||
/* Make page fit viewport */
|
||||
html, body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Scale content to fit */
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
/* Use CSS media queries for different screen sizes */
|
||||
@media (max-width: 1280px) {
|
||||
.container {
|
||||
transform: scale(calc(100vw / 1280));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- Most reliable solution
|
||||
- Works without external tools
|
||||
- Better user experience
|
||||
|
||||
**Cons:**
|
||||
- Requires access to edit the page
|
||||
- May need to redesign layout
|
||||
|
||||
---
|
||||
|
||||
### Solution 3: JavaScript Injection
|
||||
|
||||
Inject JavaScript to auto-scale the page.
|
||||
|
||||
**Create a user script:**
|
||||
```javascript
|
||||
// Auto-fit page to viewport
|
||||
(function() {
|
||||
function autoFit() {
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const pw = document.body.scrollWidth;
|
||||
const ph = document.body.scrollHeight;
|
||||
|
||||
const zoom = Math.min(vw/pw, vh/ph, 1.0);
|
||||
|
||||
if (zoom < 1.0) {
|
||||
document.body.style.transform = 'scale(' + zoom + ')';
|
||||
document.body.style.transformOrigin = 'top left';
|
||||
document.body.style.width = (100/zoom) + '%';
|
||||
document.body.style.height = (100/zoom) + '%';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', autoFit);
|
||||
} else {
|
||||
autoFit();
|
||||
}
|
||||
window.addEventListener('resize', autoFit);
|
||||
setTimeout(autoFit, 2000);
|
||||
})();
|
||||
```
|
||||
|
||||
**To use:**
|
||||
1. Install a userscript extension (like Tampermonkey)
|
||||
2. Create a script that runs on `http://127.0.0.1:8080`
|
||||
3. Paste the JavaScript above
|
||||
|
||||
**Pros:**
|
||||
- Works automatically
|
||||
- No page modification needed
|
||||
- Can be fine-tuned
|
||||
|
||||
**Cons:**
|
||||
- Requires browser extension
|
||||
- May conflict with page JavaScript
|
||||
|
||||
---
|
||||
|
||||
### Solution 4: Chromium User Stylesheet
|
||||
|
||||
Use a custom CSS file to override page styles.
|
||||
|
||||
**Location:** `~/.config/chromium/Default/User StyleSheets/Custom.css`
|
||||
|
||||
**Content:**
|
||||
```css
|
||||
/* Hide scrollbars and scale content */
|
||||
html, body {
|
||||
overflow: hidden !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
/* Scale body to fit */
|
||||
body {
|
||||
transform: scale(0.8) !important; /* Adjust value as needed */
|
||||
transform-origin: top left !important;
|
||||
width: 125% !important; /* Inverse of scale */
|
||||
}
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- Simple CSS solution
|
||||
- No JavaScript needed
|
||||
|
||||
**Cons:**
|
||||
- Fixed scale value (not dynamic)
|
||||
- May break some layouts
|
||||
|
||||
---
|
||||
|
||||
### Solution 5: Chromium Zoom Flag
|
||||
|
||||
Use Chromium's force-device-scale-factor flag.
|
||||
|
||||
**Add to startup script:**
|
||||
```bash
|
||||
--force-device-scale-factor=0.8 # Adjust value (0.5-2.0)
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- Built-in Chromium feature
|
||||
- Simple to use
|
||||
|
||||
**Cons:**
|
||||
- Affects entire browser, not just page
|
||||
- May make UI elements too small
|
||||
|
||||
---
|
||||
|
||||
## Recommended Approach
|
||||
|
||||
### For Immediate Fix (No Page Editing):
|
||||
✅ **Use Solution 1** (already implemented in script)
|
||||
- Automatic zoom via xdotool
|
||||
- Works immediately
|
||||
- Adjust zoom level in script if needed
|
||||
|
||||
### For Long-term Solution:
|
||||
✅ **Use Solution 2** (Edit the page)
|
||||
- Add responsive viewport meta tag
|
||||
- Add responsive CSS
|
||||
- Best user experience
|
||||
- No external dependencies
|
||||
|
||||
---
|
||||
|
||||
## Testing and Adjustment
|
||||
|
||||
### Test Current Implementation:
|
||||
1. Reboot or restart Chromium:
|
||||
```bash
|
||||
ssh pi@10.130.60.253 "pkill chromium && sleep 2 && DISPLAY=:0 ~/start-chromium.sh"
|
||||
```
|
||||
|
||||
2. Check if scrollbar is gone
|
||||
3. Verify content fits viewport
|
||||
|
||||
### Adjust Zoom Level:
|
||||
|
||||
If content is too small or still scrolling:
|
||||
|
||||
**Edit the script:**
|
||||
```bash
|
||||
ssh pi@10.130.60.253 "nano ~/start-chromium.sh"
|
||||
```
|
||||
|
||||
**Find this section and adjust:**
|
||||
```bash
|
||||
# Increase number for more zoom-out (smaller content)
|
||||
for i in {1..5}; do # Changed from 3 to 5
|
||||
xdotool key --window $WINDOW_ID ctrl+minus
|
||||
sleep 0.5
|
||||
done
|
||||
```
|
||||
|
||||
**Or decrease for less zoom-out:**
|
||||
```bash
|
||||
for i in {1..2}; do # Less zoom-out
|
||||
xdotool key --window $WINDOW_ID ctrl+minus
|
||||
sleep 0.5
|
||||
done
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Scrollbar Still Appears:
|
||||
1. Increase zoom-out commands in script
|
||||
2. Check if page has fixed-width elements
|
||||
3. Consider editing the page CSS
|
||||
|
||||
### Content Too Small:
|
||||
1. Decrease zoom-out commands
|
||||
2. Or use zoom-in: `xdotool key --window $WINDOW_ID ctrl+plus`
|
||||
|
||||
### Zoom Not Working:
|
||||
1. Verify xdotool is installed: `which xdotool`
|
||||
2. Check window ID is found: Add `echo $WINDOW_ID` to script
|
||||
3. Try manual test: `xdotool key ctrl+minus`
|
||||
|
||||
---
|
||||
|
||||
## Current Script Location
|
||||
|
||||
- **Device**: `~/start-chromium.sh`
|
||||
- **Local**: `chromium-setup/start-chromium.sh`
|
||||
|
||||
The script now includes automatic page scaling via xdotool zoom commands.
|
||||
Reference in New Issue
Block a user