diff --git a/chromium-setup/PAGE-SCALING-SOLUTIONS.md b/chromium-setup/PAGE-SCALING-SOLUTIONS.md new file mode 100644 index 0000000..94f02b0 --- /dev/null +++ b/chromium-setup/PAGE-SCALING-SOLUTIONS.md @@ -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 ``:** +```html + +``` + +**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. diff --git a/chromium-setup/start-chromium.sh b/chromium-setup/start-chromium.sh index 04cf078..36b5611 100755 --- a/chromium-setup/start-chromium.sh +++ b/chromium-setup/start-chromium.sh @@ -30,6 +30,7 @@ sleep 5 # Wait for Chromium window to appear and then force fullscreen sleep 3 # Try to find Chromium window and force it to fullscreen +WINDOW_ID="" for i in {1..10}; do WINDOW_ID=$(wmctrl -l 2>/dev/null | grep -i chromium | head -1 | awk '{print $1}') if [ -n "$WINDOW_ID" ]; then @@ -39,6 +40,23 @@ for i in {1..10}; do sleep 0.5 done +# Wait for page to load, then auto-scale to fit +sleep 5 +if [ -n "$WINDOW_ID" ] && command -v xdotool >/dev/null 2>&1; then + # Activate Chromium window + xdotool windowactivate $WINDOW_ID 2>/dev/null + sleep 1 + # Reset zoom first (Ctrl+0) + xdotool key --window $WINDOW_ID ctrl+0 2>/dev/null + sleep 1 + # Zoom out to fit (Ctrl+- multiple times if needed) + # Adjust the number of zoom-out commands based on your page size + for i in {1..3}; do + xdotool key --window $WINDOW_ID ctrl+minus 2>/dev/null + sleep 0.5 + done +fi + # Keep script running wait