Dashticz - Show your dashboard and how-to's!

[Lokonli]

You try to mimic the previous example?

Then probably it's most easy to add all buttons to one column.
GIve 'hoofdmenu' width 12, so it spans the full column width.
Give the other buttons width 4, so they have 4/12 = 33% of the column width.

I guess 'bt_Hoofdmenu' should be a blocktitle, not a button.

With the following:

Code: Select all

var blocks={}
blocks['bt_Hoofdmenu'] = {
    type: 'blocktitle',
    title: 'Hoofdmenu',
    width:12
}

var buttons = {}
//buttons.hoofdmenu= {width:12, image: 'img/hoofdmenu_mirror.png', title: 'Hoofdmenu' ,slide:0 }
buttons.huismodus= {width:4, image: 'img/house_mirror.png', title: 'Huismodus' ,slide:1 }
buttons.alarm= {width:4, image: 'img/alarmpanel_mirror.png', title: 'Alarm',slide: 2}
buttons.utility= {width:4, image: 'img/power_mirror.png', title: 'Elektra, Gas & Water' ,slide:3 }
buttons.verlichting= {width:4, image: 'img/Light-off_mirror.png', title: 'Verlichting',slide: 4}
buttons.temperatuur= {width:4, image: 'img/temp_mirror.png', title: 'Temperatuur' ,slide:5 }
buttons.weerstation= {width:4, image: 'img/weer_mirror.png', title: 'Weerstation',slide: 6}
buttons.kas_en_moestuin= {width:4, image: 'img/kas_mirror.png', title: 'Kas & Moestuin' ,slide:7 }
buttons.instellingen= {width:4, image: 'img/settings_mirror.png', title: 'Instellingen',slide: 8}
buttons.media= {width:4, image: 'img/media_mirror.png', title: 'Media' ,slide:9 }
buttons.nieuws= {width:4, image: 'img/nieuws_mirror.png', title: 'Nieuws' ,slide:10 }
buttons.plattegrond= {width:4, image: 'img/floorplan_mirror.png', title: 'Plattegrond' ,slide:11 }//buttons.domoticz= {width:3, image: 'img/weer_mirror.png', title: 'Weather',slide: 0}

var columns = {}
//Column[0] contains the 'goto mainmenu' button, so add column[0] on every screen.

columns[0] ={}
columns[0]['blocks'] = ['bt_Hoofdmenu',buttons.huismodus, buttons.alarm, buttons.utility, buttons.verlichting, buttons.temperatuur, buttons.weerstation, buttons.kas_en_moestuin, buttons.instellingen, buttons.media, buttons.nieuws, buttons.plattegrond]
columns[0]['width']=12;

//with columns[1] [2] [3] I define the first screen, the mainmenu

columns[1] = {}
columns[1]['width'] = 3;

columns[2] = {}
columns[2]['blocks'] = [];
columns[2]['width'] = 6;

columns[3] = {}
columns[3]['width'] = 3;

//Definition of screens
screens = {}
screens[1] = {
  columns: [0, 1, 2, 3]
}
screens[2] = {
  columns: [0]
}
screens[3] = {
  columns: [0]
}

You get this:

menu.jpg (95.53 KiB) Viewed 1952 times

Is this what you try to achieve? (I don't have the images ...)

[Krenstik]

Any idea of how to get a flip day and moth? I change a clock to flip, which I love, but I miss weekday and date.

desktop

Snímek obrazovky 2021-01-11 224329.jpg (388.18 KiB) Viewed 1951 times

[JuanUil]

Hi,

I am a bit further but now I am struggling with the size of the image, I can't get it bigger.

maffia way

my custom css:

Spoiler: show

.button[data-id='knop'] {

padding:40px 0px !important;
color: Black;
font-size: 10px !important;
font-style: Italic;
text-align: center;
line-height: 0.7em;
border-radius:8px;
background: rgba(0, 0, 0, 0) linear-gradient(#4d4d4d, #999999) repeat scroll 0 0 !important;
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255,0.5) !important;
margin:5px 5px;
height:125px
img {width: 200%}
/* add background and box-shadow for other browsers*/

}

.button[data-id='HM'] {

padding:10px 10px !important;
color: Black;
font-size: 8px !important;
font-style: Italic;
text-align: center;
line-height: 0.7em;
background: rgba(0, 0, 0, 0) linear-gradient(#4d4d4d, #999999) repeat scroll 0 0 !important;
box-shadow: inset 1px 0px 0px 0px rgba(255,255,255,0.5) !important;
margin:5px 5px;
/* add background and box-shadow for other browsers*/

}

.button[data-id='knop'] .buttonimg {
/*width:120px;*/
height:150px;
}

and my config.js

Spoiler: show

var buttons = {}
buttons.hoofdmenuterug= {key : "HM", width:4, title: 'Hoofdmenu' ,slide:1 }
buttons.hoofdmenu= {key : "knop", width:4, image: 'hoofdmenu_mirror.png', title: 'Hoofdmenu' ,slide:1 }
buttons.huismodus= {key : "knop", width:4, image: 'house_mirror.png', title: 'Huismodus' ,slide:2 }
buttons.alarm= {key : "knop", width:4, image: 'alarmpanel_mirror.png', title: 'Alarm',slide: 3}
buttons.utility= {key : "knop", width:4, image: 'power_mirror.png', title: 'Energie' ,slide:4 }
buttons.verlichting= {key : "knop", width:4, image: 'Light-off_mirror.png', title: 'Verlichting',slide: 5}
buttons.temperatuur= {key : "knop", width:4, image: 'temp_mirror.png', title: 'Temperatuur' ,slide:6 }
buttons.weerstation= {key : "knop", width:4, image: 'weer_mirror.png', title: 'Weerstation',slide: 7}
buttons.kas_en_moestuin= {key : "knop", width:4, image: 'kas_mirror.png', title: 'Kas & Moestuin' ,slide:8 }
buttons.instellingen= {key : "knop", width:4, image: 'settings_mirror.png', title: 'Instellingen',slide: 9}
buttons.media= {key : "knop", width:4, image: 'media_mirror.png', title: 'Media' ,slide:10 }
buttons.nieuws= {key : "knop", width:4, image: 'nieuws_mirror.png', title: 'Nieuws' ,slide:11 }
buttons.plattegrond= {key : "knop", width:4, height:10, image: 'floorplan_mirror.png', title: 'Plattegrond' ,slide:12 }//buttons.domoticz= {width:3, image: 'img/weer_mirror.png', title: 'Weather',slide: 0}

var blocks ={}

var columns = {}
//Column[0] contains the 'goto mainmenu' button, so add column[0] on every screen.

columns[0] ={}
columns[0]['blocks']=[buttons.hoofdmenuterug]
columns[0]['width']=2;

//with columns[1] [2] [3] I define the first screen, the mainmenu

columns[1] = {}
columns[1]['width'] = 3;

columns[2] = {}
columns[2]['blocks'] = [buttons.hoofdmenu, buttons.huismodus, buttons.alarm, buttons.utility, buttons.verlichting, buttons.temperatuur, buttons.weerstation, buttons.kas_en_moestuin, buttons.instellingen, buttons.media, buttons.nieuws, buttons.plattegrond]
columns[2]['width'] = 8;

columns[3] = {}
columns[3]['width'] = 1;

//Definition of screens
screens = {}
screens[0] = {
columns: [1, 2, 3]
}
screens[1] = {
columns: [0]
}
screens[2] = {
columns: [0]
}
screens[3] = {
columns: [0]
}
screens[4] = {
columns: [0]
}
screens[5] = {
columns: [0]
}
screens[6] = {
columns: [0]
}
screens[7] = {
columns: [0]
}
screens[8] = {
columns: [0]
}
screens[9] = {
columns: [0]
}
screens[10] = {
columns: [0]
}
screens[11] = {
columns: [0]
}

Spoiler: show

any help?

jan

[Lokonli]

To enlarge the button icons, you have to do three things:
1) increase the width of the icon column
2a) increase the width of the image icon
2b) increase the max width of the image icon

Code: Select all

.button[data-id='knop'] .col-icon {
   width: 200px !important
}

.button[data-id='knop'] img {
max-width: 200px;
width: 200px;
}

[JuanUil]

Thnx that did the trick!!

[JuanUil]

Hi,

getting more and more enthusiastic about Dashticz!!!
I have another problem:
I have made a block for nu.nl.
This is showing the latest items but when I click on it a popup appears but it is saying that nu.nl refused the connection.
can this be solved in any way.

Thnx in advance

Jan

[Lokonli]

More and more sites, including nu.nl, prevent being displayed in an iframe.

What you can do is open the url in a new tab, by adding 'newwindow:1' as block parameter.

[HansieNL]

@Lokonli
Can the newwindow option be added to the calendar block too? Now I have an url configured which is being prevented from displaying.
Thanks in advance.

[Lokonli]

I'm working on a more generic popup and newwindow handling. Impact is a bit more than expected, but everything is starting to work again.
I hope I can create a new beta this weekend.

Sent from my SM-A320FL using Tapatalk

[JuanUil]

Not working Lokonli.

Code: Select all

blocks['nieuws'] = {
  feed: 'http://www.nu.nl/rss/algemeen',
  newwindow:1,
}

I will wait till your update is there.

[HansieNL]

My colorpicker:

Screenshot_2021-01-26 Dashticz.png (85.72 KiB) Viewed 1713 times

Code used:

Code: Select all

/* Colorpicker */
.colorpicker .modal-content {
    background-color: rgba(32,32,32,0.9);
}
.colorpicker .modal-title {
	color: #FFFFFF;
	font-size: 133%;
}
.colorpicker button.close {
	color: #FFA500;
	opacity: 1.0;
	text-shadow: none;
	font-size: 32px;
}
.colorpicker .text-center {
	color: #FFFFFF;
	font-weight: bold;
}
.colorpicker .cp-buttonsOnOff .btn {
	background-color: rgba(255, 0, 0, 0.6);
	color: white;
}
.colorpicker .cp-buttonsOnOff .btn.active {
	background-color: rgb(0, 128, 0, 0.6);
	border-color: green;
	color: white;
}

[Eekie72]

Hier is mijn 55 inch "tablet", haha nee het is gewoon een TV. Kodi staat hier bijna 24/7 aan, en kan Dashticz via Kodi oproepen, geen tab nodig dus

Here is my 55 inch "tablet", haha no, it is just a TV. Kodi is almost 24/7 on over here, and I call Dashticz with Kodi, no need of a tablet thus







When will there be a product that is controlled over ethernet, can dim, and does not use internet, and works out of the box with domoticz, so i can change out my x10 dimmers and switches. Try to read about flashing and soldering, but i think i wait until a products will arrive that can do this. Would be very easy, on: 192.168.0.100/on, off: 192.168.0.100/off, dim or bright 45%: 192.168.0.100/45 etc... Why do all these companies want me to use their cloud, it is useless. Well there must be a smart company that will do this in the future, must wait for it. Until then, my X10 CM15 is just not connectable to domoticz, on windows, i use windows. I've read this rfxcom, but does it work under windows and can i dim bright my x10 in wall switches? Can i use my RF IR universal ICON10 remote controller? it is unclear in the rfxcom manual.

I know I'm looking at a old post of yours, but using the code you shared, a long time ago, I'm still running into some issues.

Would you mind resharing your current code again? I would also love to have a copy of the HoneywellThermostaat img and it's custom icons that you are using.

Thank you in advance!

Regards,

Egon

[damdub]

Hello,
First of all, thank you for the job done.

I'm trying to add a block showing wind speed in km/h rather than m/s
My domoticz counters settings are set for km/h display
Sensor in domoticz shows km/h wind speed

wind.png (28.15 KiB) Viewed 1631 times

Domoticz idx is 196
I tried to add block like this

Code: Select all

blocks[196] = {
width : 8,
}

I noticed in the Domoticz 196 device status that the speed in kmh shows up under "Speed" data name

wind2.png (4.6 KiB) Viewed 1631 times

So I tried this config too

Code: Select all

blocks[196_Speed] = {
width : 8,
}

But I still get the speed in m/s in dashticz

wind3.png (10.71 KiB) Viewed 1631 times

Interresting thing is that I also tried to show this wind speed in a dial using idx number

Code: Select all

blocks['wind2'] = {
        idx: 196,
        title: 'Wind',
        type: 'dial',
        setpoint: 18, // the entire outer ring will change color based on this setpoint, factoring in the current temperature (default 15)
        offset: 180,  // 0 will point to the wind source, 180 will point to wind direction (default is 0)
        width: 6,
        showring: true,
        showunit: true,
        shownumbers: true,
        last_update: false
}

and in this dial the speed shows up in km/h

Any idea ?
Thank you

[damdub]

Hello

I added a few calendar blocks and one of them contains only "all day" events (birthday dates)
Is it possible to hide the "hour" column for these events or for an entire calendar even if events are not all day events ?
I'm using the "New Calendar" block in last beta.
I tried to use "fixAllDay" (which is an "old" calendar parameter) with no luck.

Another one about New Calendar:
I noticed that you can only colorize calendars if more than one calendar is configured in a single block.
I like my calendar blocks seperated (one block for each calendar) but I would like to have different colors for each one of them anyway.

Thank you for your help

[HansieNL]

Q: Is it possible to hide the "hour" column for these events or for an entire calendar even if events are not all day events ?
A: Can you try with:

Code: Select all

[data-id='calendar_id'] .agenda-time {
    display: none;
}

Q: I like my calendar blocks seperated (one block for each calendar) but I would like to have different colors for each one of them anyway.
A: Can you try with:

Code: Select all

[data-id='calendar_id'] .icon,
[data-id='calendar_id'] .agenda-date,
[data-id='calendar_id'] .agenda-time,
[data-id='calendar_id'] .agenda-title {
	color: red !important;
}

You have to add these codes to your config.css file and change calendar_id to your own calendar_id

[damdub]

Thank you @HansieNL
That worked like a charm.

Do you think it would be possible to use different calendar format for each calendar ?
Example
'calendarformat' = 'DD.MM dddd HH:mm';
for calendar-id1
and
'calendarformat' = 'DD.MM HH:mm';
for calendar-id2

Thank you and have a nice weekend

[HansieNL]

Q: Do you think it would be possible to use different calendar format for each calendar ?
A: Yes, but that's only possible if you add calFormat: 1 (Table format) to your calendar block. See for all options: https://github.com/Dashticz/dashticz/bl ... lendar.rst
An example of what you have to add to your block to set date and time to your needs:

Code: Select all

calformat: 1,
dateFormat: 'DD.MM dddd',
timeFormat: 'HH:mm',

[damdub]

Problem solved !
Thank you !

I have another request about the garbage block this time.
My local company doesn't provide any public calendar, so I made one myself.
I have 4 types of garbage
I created one all day event for each type in a google calendar, some day there are 2 or 3 all day events, depending on the type collected on that day.
It's working as expected but I'm a bit frustrated antway

Garbage collection takes place every friday
Every week they collect bio bags
Every 2 weeks they collect plastic
Once a month they collect paper
...

I created specific images for each type of garbage

The way the garbage block is displayed, the bio bag image is always the only one displayed.
Example : If next friday the Bio and Plastic are to be collected, I can see 2 lines in the list (with correct colors) but only the first item in the list has its icon displayed. And it is always Bio bag, which is not the most interresting because this is the type which is collected every week.

Is there any way to prioritize the garbage type or, even better, a way to display a combination of images depending on the types collected on the next day ?

I tried to adjust the event times in home made garbage google calendar :
Plastic at 09.00 and Bio at 10.00
Even like this, the first item displayed in the list (and icon displayed) is always Bio bag.

Any idea ?
Thanks

[HansieNL]

@damdub I don’t know if it works, but can you try to change the order of the lines in garbage and garbage_mapping.

[damdub]

Hello @HansieNL and thank you for helping me

I forgot to mention in my previous post that I did try what you suggest. It doesn't change anything unfortunately :-/