Works on my nspanel and smart clock
When I make timeline long in height you get big not used space. Is it possible with css to adjust this top en bottom borders smaller?
Edit: nevermind found it position: initial
.box has position absolute, you can change height and top
New test version test27.apk.
- Complete migrate from old database engine to new database engine: before install it’s raccomanded to make a backup
- Added square layout for every layout
- New backup exporting function (don’t need a file manager with share option)
- Optimize bearer token for Homey 2016/2019: in local connection the token is getted every call and stored in database if is updated. In remote connection it use the stored bearer token: if expire need to update manually or connect to local for autoupdate @sandro711
- New option for VirtualButton. Now, if you choose a variable boolean, you have a new option “toggle”. It invert the boolean value and add a “on” if value is true @sandro711
- Fixed some bugs
Soon i will release the update as official
2 Likes
I purchased one 
1 Like
Is ability to change dashboard background also still in the pipeline?
That will make it even better I think in customizing dashboards.
Yes, is in todo.
Maybe i add a custom css section for change every panel
Actually that is the only thing you need to do. Just allow css of the individual tiles. U can direct url to a custom background and hence does not need to implement import files function, which will be much more tricky
Certainly:
iOS flow widget style css below. Keep in mind that the default setup is for “off” status and you are altering how the “on” status should look like by .on .content xxx syntax.
Some coding includes redundant syntax (like when the border is none, there is no point to set up the border-width in px). But i keep it there, because while I was experimenting with the design, I tried various options and when you want to change something, its good that you just change one parameter rather than write part of the script from a scratch.
.content {
background: transparent
}
This makes sure that the original grid does not affect the graphics
.content .name {
z-index: 10;
color: #d2d2d2;
font-size: 10pt;
height: 54px;
font-weight: 500;
text-transform: uppercase;
background: #242424;
border-style: none;
border-radius: 30px;
border-width: 1px;
border-color: #d2d2d2;
margin-top: 5px;
padding-top: 19px;
padding-left: 60px;
text-align: left
}
This styles the box with the text and the text within
.content .box {
z-index: 99;
font-size: 20pt;
width: 50px;
height 50px;
background: red;
border-style: none;
border-radius: 50%;
border-width: 1px;
border-color: #d2d2d2;
margin-left: 0px;
margin-top: -5px
}
This styles the box with the icon
.content .update {
display: none
}
This makes sure that the “last updated” is not visible
.content .state {
color: #242424
}
This styles the icon (for example which color it should be)
.on .content .box {
z-index: 90;
font-size: 20pt;
width: 50px;
height 50px;
background: #15c23e;
border-style: none;
border-radius: 50%;
border-width: 1px;
border-color: #d2d2d2;
margin-left: 0px;
margin-top: -5px
}
This tells how the text part should change once the widget is ON
.on .content .mdi::before {
z-index: 99;
content: “\F033E”
}
This replaces icon when the widget is ON (from MDI repository)
.on .content .name {
color: #242424
}
This makes the original text on the widget invisible.There is no way you could remove just the text by something like display:none, because we are styling the whole divs, there are apparently no span within the div for the text section. display: none would therefore make the whole box not there (which may be good when you want to make circle, android-like icons). The only option thus is to make the text invisible, either by make the color as the background (like in this case), or via color: rgba(x,x,x,0), but unfortunately, rgba is not working.
.on .content .name::before {
content: “Text when on”;
color: #d2d2d2
}
This replaces (actually just put before) the original text with alternative text when widget is ON. SO it may replace original text (e.g. “Tomas home” with “Tomas away”)
SO if you just copy all the syntax to the css field one under another and set the widget size 2x0,5, the design should be such as you saw on the printscreen above (with maybe different icon and name)
1 Like
Consider 3 minor add-ons please:
- allow separator to be 3x0.5
- allow custom icons and css for separator and dummy
- make dummy as solid object that appears in the grid
The reason why I want the dummy to be a solid object is to make it a graphics element to fill in the grid. In my previous example, the big icons Family, Roborock and Surveillance are done via Virtual button and calling a dummy flow, which is just a workaround. It would be better if it would be a static object with which you cannot interact, but you can style it for the aestethic reasons.
No problem 
I can add all!
1 Like
An optimization…
For vertical centering, reset padding-top and padding-bottom and use line-height=54px.
1 Like
Thanks for sharing! Diapolon added rgba in the latest test APK.
I m an oldschool guy, I actively programmed when there was the CSS 1.0, PHP 4.0.0, HTML 4.01
Prehistory 
is it possible to get a 4x4 grid? I think that this would work nicely on my nspanel and also makes the widgets square. The square option now is enormous big. Thats now a 3x2.8 or something.
I don’t remember it correctly, but thought that it was called versions before 3x4;3x5;3x6 instead of big standaard compact. That was more clear to me.
With new update i change the widget dimension, no more 0.5x0.5 but minimal is 1x1.
The grid change from 3x3, 3x4, etc to 6x6, 6x8, etc.
After that in ns panel the 6x6 make square the widget 1x1 etc and the toolbar height is 1x1, the usable grid is 6x5.
1 Like
Check, that make sense
I don’t forget to write my blog post 
but I’ve just seen this:
A bigger NSPanel PRO 
2 Likes
damn!!! i need to buy it!
