Frontend design (printscreen sharing)

Avatar
  • updated
  • Under review

Hello everyone,


I'm always curious about the templates from bOS users. I think it would be a cool idea to share some printscreens.


Sharing is good! All of us can learn and share. No need to share all the menus, just a quick view. So here it goes my home template:


Image 1315

Avatar
Jürgen Jürgenson

Very nice Kristián Vojčík
I think webm support would be nice too. Webm's quality is much better while file size is smaller. Configurator and windows client is having problems with larger files(I got a 16mb gif to work but  yeah it not pretty when it loads late and is glitchy), although on android there is no problems when the internet is good.  https://drive.google.com/file/d/1dXjLfXzf1hk6wd-OxqoXyPkHfWwhUv_H/view?usp=sharing

Avatar
Jürgen Jürgenson
Quote from Jürgen Jürgenson

Very nice Kristián Vojčík
I think webm support would be nice too. Webm's quality is much better while file size is smaller. Configurator and windows client is having problems with larger files(I got a 16mb gif to work but  yeah it not pretty when it loads late and is glitchy), although on android there is no problems when the internet is good.  https://drive.google.com/file/d/1dXjLfXzf1hk6wd-OxqoXyPkHfWwhUv_H/view?usp=sharing

I messed up again with the link, i wanted to post this https://drive.google.com/open?id=1azdyher-Vzr6GBviatq6W3q5F4cvEn3d other video has some compression glitches in it.

Avatar
Ricardo Pinto

Hey Kristián,

Was it too hard to code / create the animation?

I'm looking forward to also use SVG animations, but didn't had time to explore the process.

Best regards

Avatar
Ricardo Pinto

I've downloaded a SVG animation file for testing, and I can confirm that in Android phone the animation works, but not in the Windows client... :-( I think it has to do with the SVG browser compatibility...


Also, I have a problem / bug:


The demo file I'm using is transparent. If I placed it has Image on a button, I can't center the image... But if I place it as Background image, I can center the image. The problem is that it messes with the text, so the image gets on the back of the text and the text appears centered on the button rather than below.

Example: (Left: Animated SVG as Image. Right: Animated SVG as Background image)


Is it supposed? :-(

Avatar
Kristián Vojčík
Quote from Ricardo Pinto

Hey Kristián,

Was it too hard to code / create the animation?

I'm looking forward to also use SVG animations, but didn't had time to explore the process.

Best regards

Ricardo.

it is not necessary hard to code, if you have some skills with html and css you should be good. But if you want "100%" compatibility with bOS there are some rules to follow. A have hard time getting it to work with bult in color change. But in the end it works. And also please CC team let us change icon for weather so we can use cool animation :)

Avatar
Kristián Vojčík

Ricardo.

I have same problems with SVG at start. Picture should have 256pix x 256pix size, or background of 512pix x 256pix with two pic of 256pix x 256pix. Try resize it and try again.

Avatar
Łukasz Klinger

za tu wersja mobilna


czekam na inspirację bo mam niedosyt 

Avatar
Łukasz Klinger
Quote from Fabien Fuster

Hi Ricardo,


I really like your idea to share some printscreen ! I do find your really nice and simple to read... really good !


Here few of mine take from my computer interface (constantly evolving since few months...) :





Regards,

podzielisz się swoim przykładem i konfigurają pogody bo to nie jest pogoda bos

Avatar
Tasos Tsimpogiannis
Quote from Fabien Fuster

Hi Ricardo,


I really like your idea to share some printscreen ! I do find your really nice and simple to read... really good !


Here few of mine take from my computer interface (constantly evolving since few months...) :





Regards,

Hi Fabien. Your visualization looks great and neat. I would like to ask how you have achieved the battery icons to look relevant to charging percentage. Did you used "status values" to change the icons?

Avatar
Constantin Larco

Building Management System (BMS) for Residential Building – 200 Apartments, 23 Floors

The BMS is designed to manage and monitor all key services in the building, including:

  • Energy Measurement: Monitoring and recording energy consumption for each apartment and common areas.

  • Ventilation Control: Supervising and adjusting ventilation systems for optimal indoor air quality.

  • Water and Energy Reading: Collecting water and energy usage data for each apartment, enabling precise billing to residents.

  • Generator Interface: Integrating with standby generators for automatic control and status monitoring.

  • Main Distribution Board Monitoring: Real-time supervision of main electrical distribution boards, ensuring system reliability and safety.

This setup provides centralized management, supports efficient operation, and ensures transparent billing for all occupants.

Image 5323

Image 5324

Image 5325

Image 5326

Image 5327