Applicantion/HTML site blurry when shown via hudiy

[noobychris]

Hello,

im running a raspberry pi 4b 4GB with hudi. The resolution is set to 800x480.
I've now made my first dashboard (with can-bus data) with chat gpt.
I've tested the dasboard with pre installed browser from bookworm and the image is very sharp/crisp:

sharp

20250815_17h41m41s_grim.png (65 KiB) Viewed 398 times

Now i've made an application in hudi with a new menu entry. If i open the dasboard via hudi now, the image from the dashboard is not that sharp as in the browser:

blurred

20250815_17h58m10s_grim.png (93.49 KiB) Viewed 399 times

I've alreade cleared the hudiy cache with no effect. Chat gpt tried different override settings because hudiy may scale different. But no difference at all.

I've uploaded the html file in the attachments.

@hudiy support: do you have any ideas why? And two more questions: Can i somehow get the application fullscreen? How can i implement a back Funktion on ESC?

[hudiy]

Hello,
The potential issue might be with how the canvas is being scaled. In your code, you're setting the canvas size in CSS using percentages. The thing is, resizing a canvas with CSS just stretches or shrinks the final image - it doesn't actually change the internal drawing surface of the canvas itself. If there's a big difference between canvas.width/height and the rendered size set by CSS in the grid, you can end up with small visual artifacts.

Try using the example on our GitHub and see if you notice similar artifacts in it: https://github.com/wiboma/hudiy/blob/ma ... auges.html

We also have the option in Hudiy to add a simple post-processing shader that can smooth out the Chromium output using scaling. Whatever Chromium renders from the HTML/JavaScript is treated in Hudiy as a standard OpenGL texture.

Here are some comparison images with your gauges:

Original:

original.jpg (51.38 KiB) Viewed 387 times

Post-processed:

postprocessing_shader.jpg (54.76 KiB) Viewed 387 times

We’ll be adding this feature in the next release, coming out in September.

[hudiy]

Hudiy doesn't have a direct configuration setting for running your app in fullscreen. However, you can achieve it using overlays (https://github.com/wiboma/hudiy/blob/ma ... d#overlays). In applications.json, you can declare a dummy app with your custom action, for example:

Code: Select all

{
  "action": "gauges_app",
  "allowBackground": false
}

Then you can display your app inside an Overlay tied to that action:

Code: Select all

{
  "identifier": "fullscreen_gauges_app",
  "action": "",
  "width": 800,
  "height": 480,
  "x": 0,
  "y": 0,
  "visibility": "ALWAYS",
  "url": "URL TO YOUR gauges1.html",
  "controlAudioFocus": false,
  "audioStreamCategory": "NONE",
  "visibleOnActions": [
    "gauges_app"
  ],
  "staticPosition": true
}

Please note that Overlays have limited input events: https://github.com/wiboma/hudiy/blob/ma ... put-events

For apps, when the user presses Escape on the keyboard or sends a KeyEvent with KEY_TYPE_BACK (https://github.com/wiboma/hudiy/blob/ma ... proto#L636) Hudiy will trigger the onGoBack callback (https://github.com/wiboma/hudiy/blob/ma ... iyongoback). There you can add custom logic for your app.

For example, if your app is single-screen and you’d like to return to the Hudiy home screen (or any other screen), you can use the API to inject a KeyEvent with KEY_TYPE_HOME (https://github.com/wiboma/hudiy/blob/ma ... proto#L624) or dispatch a specific action - either a predefined one (https://github.com/wiboma/hudiy/blob/ma ... ed-actions) or one you defined yourself in dashboards.json, applications.json, or registered via the API (https://github.com/wiboma/hudiy/blob/ma ... proto#L723)

You can also check out our GitHub for an example of how to handle input scope inside your app: https://github.com/wiboma/hudiy/blob/ma ... scope.html

[noobychris]

After hudiy update to version 1.2 the html site is now sharp/crisp Thanks a lot!

20250921_22h58m03s_grim.png (47.56 KiB) Viewed 315 times

[hudiy]

Great that it works with new version! Thanks for the feedback.