Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Uhula]

Im ioBroker.vis-Editor lässt sich ein Raster einschalten, welches durch Punkte im Editor angezeigt wird und auch gleichzeitig den Fang von Widgets einschaltet. Nun ist es manchmal so, dass man zwar einen feinen Fang von bspw. 16px haben möchte, aber die Rasterpunkte dann zu dominant im Editor sind. Außerdem wäre ein zusätzliches gröberes Raster von bswp. 64px und 320px nett.

Das kann man leicht mit einem CSS-Hack erreichen, den man unter [Einstellungen | CSS | Projekt] dem Projekt hinzufügt. Dabei wird das vorhandene Raster transparent gesetzt und der Editor bekommt ein background-image zugewiesen, welches das gewünschte Raster zeichnet. In meinem Fall wird ein weißes Raster verwendet, durch das Ersetzen der rgba(255,255,255,x) mit rgba(0,0,0,x) ist aber auch ein dunkles Raster möglich. Das 16px Raster wird mit 5%, das 64px Raster wird mit 10% und das 320px Raster wird mit 20% Helligkeit gezeichnet.

Den vis-Fang (Raster) kann man nun auf 16px setzen und hat einen Fang bei 16px und trotzdem ein tolles Rasterbild im Editor (nicht zur Laufzeit^^).

So sieht es aus:

Und hier die CSS-Anweisungen:

! ````
/* Weißes Raster mit 16x16 64x64 320x320 als Hintergrund */
.vis_container_edit {
background-image:
repeating-linear-gradient(
transparent,
transparent 14px, rgba(255,255,255,0.05) 14px, transparent 16px,
transparent 31px, rgba(255,255,255,0.05) 31px, transparent 32px,
transparent 47px, rgba(255,255,255,0.05) 47px, transparent 48px,
transparent 63px, rgba(255,255,255,0.1) 63px, transparent 64px,

 transparent 79px, rgba(255,255,255,0.05) 79px, transparent 80px, 
 transparent 94px, rgba(255,255,255,0.05) 94px, transparent 96px, 
 transparent 111px, rgba(255,255,255,0.05) 111px, transparent 112px, 
 transparent 127px, rgba(255,255,255,0.1) 127px, transparent 128px, 

 transparent 143px, rgba(255,255,255,0.05) 143px, transparent 144px, 
 transparent 159px, rgba(255,255,255,0.05) 159px, transparent 160px, 
 transparent 174px, rgba(255,255,255,0.05) 174px, transparent 176px, 
 transparent 191px, rgba(255,255,255,0.1) 191px, transparent 192px, 

 transparent 207px, rgba(255,255,255,0.05) 207px, transparent 208px, 
 transparent 223px, rgba(255,255,255,0.05) 223px, transparent 224px, 
 transparent 239px, rgba(255,255,255,0.05) 239px, transparent 240px, 
 transparent 254px, rgba(255,255,255,0.1) 254px, transparent 256px, 

! transparent 271px, rgba(255,255,255,0.05) 271px, transparent 272px,
transparent 287px, rgba(255,255,255,0.05) 287px, transparent 288px,
transparent 303px, rgba(255,255,255,0.05) 303px, transparent 304px,
transparent 318px, rgba(255,255,255,0.2) 318px, transparent 320px
),
! repeating-linear-gradient(to right,
transparent,
transparent 14px, rgba(255,255,255,0.05) 14px, transparent 16px,
transparent 31px, rgba(255,255,255,0.05) 31px, transparent 32px,
transparent 47px, rgba(255,255,255,0.05) 47px, transparent 48px,
transparent 63px, rgba(255,255,255,0.1) 63px, transparent 64px,

 transparent 79px, rgba(255,255,255,0.05) 79px, transparent 80px, 
 transparent 94px, rgba(255,255,255,0.05) 94px, transparent 96px, 
 transparent 111px, rgba(255,255,255,0.05) 111px, transparent 112px, 
 transparent 127px, rgba(255,255,255,0.1) 127px, transparent 128px, 

 transparent 143px, rgba(255,255,255,0.05) 143px, transparent 144px, 
 transparent 159px, rgba(255,255,255,0.05) 159px, transparent 160px, 
 transparent 174px, rgba(255,255,255,0.05) 174px, transparent 176px, 
 transparent 191px, rgba(255,255,255,0.1) 191px, transparent 192px, 

 transparent 207px, rgba(255,255,255,0.05) 207px, transparent 208px, 
 transparent 223px, rgba(255,255,255,0.05) 223px, transparent 224px, 
 transparent 239px, rgba(255,255,255,0.05) 239px, transparent 240px, 
 transparent 254px, rgba(255,255,255,0.1) 254px, transparent 256px, 

! transparent 271px, rgba(255,255,255,0.05) 271px, transparent 272px,
transparent 287px, rgba(255,255,255,0.05) 287px, transparent 288px,
transparent 303px, rgba(255,255,255,0.05) 303px, transparent 304px,
transparent 318px, rgba(255,255,255,0.2) 318px, transparent 320px
)
!important;
}
! /* Sichtbarkeit des Grids auf 0% verringern */
.vis-grid {
opacity: 0;
}
! ````

[lobomau]

Ich wollte dieses nette Feature mal ausprobieren.

Irgendwie zeigt sich mein VIS unbeeindruckt vom Eintrag unter CSS. Ich habe den Code 100% unverändert übernommen. :roll: