Good morning
I'm a new user of this software, and as soon as I resolve some issues, it will replace OpenAuto Pro. Great job guys. I'm new to this, and maybe my question is a trivial one, but how do I change the font size within HUDIY? The date disappears from the main screen (see photo). Thanks to anyone who can help me.
display
-
ElmodiLatta
- Posts: 21
- Joined: Mon Sep 15, 2025 10:11 am
- Location: Italy
Re: display
Thank you for your kind words.
It looks like there’s a missing newline character between the weekday name and the rest of the date (might be specific for Italian locale).
We’ll check the widget and try to fix it. Fortunately, the widget can easily be recreated in HTML/JavaScript, where the date displays correctly.
Below is the code you can use in your dashboard (e.g., as a replacement for the date_time widget):
dashboards.json
date_time.html
In the attachment, you’ll find the HTML file and the Roboto font.
You can also host this widget on a local HTTP server. Then it should load faster because the server can cache the Roboto font.
Instructions on how to start the HTTP server can be found in the README on our GitHub: https://github.com/wiboma/hudiy/blob/ma ... javascript
It looks like there’s a missing newline character between the weekday name and the rest of the date (might be specific for Italian locale).
We’ll check the widget and try to fix it. Fortunately, the widget can easily be recreated in HTML/JavaScript, where the date displays correctly.
Below is the code you can use in your dashboard (e.g., as a replacement for the date_time widget):
dashboards.json
Code: Select all
{
"type": "web_static",
"size": "small_narrow",
"url": "file:///absolute/path/to/date_time.html"
}
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport">
<title>Date and Time</title>
<style>
body {
background-color: transparent;
border: 4px solid transparent;
font-family: "RobotoRegular";
color: var(--clock-color);
overflow: hidden;
}
.clock-box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height: 88vh;
width: 100%;
box-sizing: border-box;
text-align: left;
}
.time {
display: flex;
align-items: center;
gap: 4vh;
font-size: 23vh;
fill: var(--clock-color);
}
.time svg {
width: 18vh;
height: 18vh;
fill: var(--clock-color);
}
.day,
.date {
font-size: 19vh;
margin-top: 2vh;
}
@font-face {
font-family: "RobotoRegular";
src: url("Roboto-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
:root {
--clock-color: #e3e3e3;
}
</style>
</head>
<body>
<div class="clock-box">
<div class="time">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
<path
d="M592-302 450-444v-196h60v171l124 124-42 43ZM450-730v-90h60v90h-60Zm280 280v-60h90v60h-90ZM450-140v-90h60v90h-60ZM140-450v-60h90v60h-90ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" />
</svg>
<span id="time"></span>
</div>
<div>
<div class="day" id="day"></div>
<div class="date" id="date"></div>
</div>
</div>
<script>
document.body.style.borderColor = "transparent"
hudiy = {}
function updateColors() {
document.documentElement.style.setProperty('--clock-color', hudiy.colorScheme.onSurface);
}
hudiy.onInputFocusChanged = function () {
}
hudiy.onActivatedChanged = function () {
}
hudiy.onMoveToNextControl = function () {
}
hudiy.onMoveToPreviousControl = function () {
}
hudiy.onTriggered = function () {
}
hudiy.onGoLeft = function () {
}
hudiy.onGoRight = function () {
}
hudiy.onGoBack = function () {
return false;
}
hudiy.onAttached = function () {
updateColors();
}
hudiy.onColorSchemeChanged = function () {
updateColors()
}
function updateClock() {
const now = new Date();
const lang = navigator.language;
document.getElementById('time').textContent =
new Intl.DateTimeFormat(lang, { hour: '2-digit', minute: '2-digit' }).format(now);
document.getElementById('day').textContent =
new Intl.DateTimeFormat(lang, { weekday: 'long' }).format(now);
document.getElementById('date').textContent =
new Intl.DateTimeFormat(lang, { day: 'numeric', month: 'long', year: 'numeric' }).format(now);
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>You can also host this widget on a local HTTP server. Then it should load faster because the server can cache the Roboto font.
Instructions on how to start the HTTP server can be found in the README on our GitHub: https://github.com/wiboma/hudiy/blob/ma ... javascript
- Attachments
-
- date_time.zip
- (88.21 KiB) Downloaded 79 times
-
ElmodiLatta
- Posts: 21
- Joined: Mon Sep 15, 2025 10:11 am
- Location: Italy
Re: display
Thanks for the reply, I'll try it this evening and let you know. I also saw that there is the possibility of translating the texts into my language. I'll try to understand how to do it. For now, thanks again, congratulations on the product which promises very well.
Re: display
Regarding translations, you can find the instructions here https://github.com/wiboma/hudiy/blob/ma ... /README.mdElmodiLatta wrote: Thu Sep 18, 2025 11:54 am Thanks for the reply, I'll try it this evening and let you know. I also saw that there is the possibility of translating the texts into my language. I'll try to understand how to do it. For now, thanks again, congratulations on the product which promises very well.
Path to the generated *.qm file can be set in main_configuration.json (Application.translationFile) https://github.com/wiboma/hudiy/blob/ma ... appearance
-
ElmodiLatta
- Posts: 21
- Joined: Mon Sep 15, 2025 10:11 am
- Location: Italy
Re: display
Good morning
Date_Time works, thanks. I installed the HTTP server and it works that way too, even though it was late. I tried installing Protobuf, but as happened with OpenAuto Pro, I'm having some problems. I don't understand the syntax of this command:
protoc --python_out=python/common ../api/Api.proto.
I tried following Re: Help with setup, but I'm already having problems with this command: python3 -m venv /destination/path/to/your/osk/venv --system-site-packages.
Does /destination/path/to/your/osk mean the folder where the Python and HTML files are located? I put them all in the /scripts folder. Thanks for the help.
The basic installation you suggested works fine for me. The only thing missing is the ability to easily activate the reversecamera. I receive data from my car's CAN bus. Arduino reads it and sends it via serial to Raspberry Pi. I should figure out how to activate it through an API (or something else). OpenAuto had a GPIO that needed to be activated/deactivated.
Date_Time works, thanks. I installed the HTTP server and it works that way too, even though it was late. I tried installing Protobuf, but as happened with OpenAuto Pro, I'm having some problems. I don't understand the syntax of this command:
protoc --python_out=python/common ../api/Api.proto.
I tried following Re: Help with setup, but I'm already having problems with this command: python3 -m venv /destination/path/to/your/osk/venv --system-site-packages.
Does /destination/path/to/your/osk mean the folder where the Python and HTML files are located? I put them all in the /scripts folder. Thanks for the help.
The basic installation you suggested works fine for me. The only thing missing is the ability to easily activate the reversecamera. I receive data from my car's CAN bus. Arduino reads it and sends it via serial to Raspberry Pi. I should figure out how to activate it through an API (or something else). OpenAuto had a GPIO that needed to be activated/deactivated.
- Attachments
-
- IMG_20250918_234745368.jpg (3 MiB) Viewed 946 times
Re: display
/destination/path/to/your/osk/venv is the path where you want to create your virtual environment. Inside the venv directory, Python will create a bin/activate script, which you can activate using the source command, for example:
This gives you a separate Python instance where you can install different versions of libraries (dependencies) just for that specific environment.
The list of Python dependencies required to use the Hudiy API is in this file: https://github.com/wiboma/hudiy/blob/ma ... ements.txt
The protoc command generates Python code from the .proto file that defines the Hudiy API. Protocol Buffers are language-neutral, platform-neutral extensible mechanisms for serializing structured data (https://protobuf.dev/).
As for the rear-view camera, Hudiy offers two possible approaches.
The first is to use the built-in mechanism for displaying the camera feed. You can control it via the API and messages https://github.com/wiboma/hudiy/blob/ma ... proto#L123
The second option is to use Overlays with HTML/JavaScript. On our GitHub, you’ll find an example showing how to display a camera feed in HTML/JavaScript: https://github.com/wiboma/hudiy/blob/ma ... amera.html
User noobychris has also prepared an HTML/JavaScript version of the rear-view camera that displays guidelines: viewtopic.php?t=38
Then you can control visibility of the overlay with camera feed using API: https://github.com/wiboma/hudiy/blob/ma ... proto#L703
Managing the visibility of the rear-view camera can be done in a Python script that reads the state of a selected GPIO pin and sends the appropriate messages to Hudiy through the API.
Bunch of useful links:
https://github.com/wiboma/hudiy/blob/ma ... rse-camera
https://github.com/wiboma/hudiy/blob/ma ... ersecamera
https://github.com/wiboma/hudiy/blob/ma ... d#web-view
https://github.com/wiboma/hudiy/blob/ma ... d#overlays
Code: Select all
source /home/pi/yourvenv/bin/activateThe list of Python dependencies required to use the Hudiy API is in this file: https://github.com/wiboma/hudiy/blob/ma ... ements.txt
The protoc command generates Python code from the .proto file that defines the Hudiy API. Protocol Buffers are language-neutral, platform-neutral extensible mechanisms for serializing structured data (https://protobuf.dev/).
As for the rear-view camera, Hudiy offers two possible approaches.
The first is to use the built-in mechanism for displaying the camera feed. You can control it via the API and messages https://github.com/wiboma/hudiy/blob/ma ... proto#L123
The second option is to use Overlays with HTML/JavaScript. On our GitHub, you’ll find an example showing how to display a camera feed in HTML/JavaScript: https://github.com/wiboma/hudiy/blob/ma ... amera.html
User noobychris has also prepared an HTML/JavaScript version of the rear-view camera that displays guidelines: viewtopic.php?t=38
Then you can control visibility of the overlay with camera feed using API: https://github.com/wiboma/hudiy/blob/ma ... proto#L703
Managing the visibility of the rear-view camera can be done in a Python script that reads the state of a selected GPIO pin and sends the appropriate messages to Hudiy through the API.
Bunch of useful links:
https://github.com/wiboma/hudiy/blob/ma ... rse-camera
https://github.com/wiboma/hudiy/blob/ma ... ersecamera
https://github.com/wiboma/hudiy/blob/ma ... d#web-view
https://github.com/wiboma/hudiy/blob/ma ... d#overlays
-
ElmodiLatta
- Posts: 21
- Joined: Mon Sep 15, 2025 10:11 am
- Location: Italy
Re: display
One more question in the requirements.txt file.
The Protobuf version is 3.19. Does it have to be that, or is a more recent one also okay?
I'll try this weekend and see what happens.
Thanks
The Protobuf version is 3.19. Does it have to be that, or is a more recent one also okay?
I'll try this weekend and see what happens.
Thanks
Re: display
We tested API with 3.19 but newer versions should be okay.ElmodiLatta wrote: Fri Sep 19, 2025 2:00 pm One more question in the requirements.txt file.
The Protobuf version is 3.19. Does it have to be that, or is a more recent one also okay?
I'll try this weekend and see what happens.
Thanks