Page 45 of 50

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

Posted: Monday 11 January 2021 22:50
by 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
menu.jpg (95.53 KiB) Viewed 1950 times
Is this what you try to achieve? (I don't have the images ...)

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

Posted: Monday 11 January 2021 23:00
by 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
desktop
Snímek obrazovky 2021-01-11 224329.jpg (388.18 KiB) Viewed 1949 times

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

Posted: Tuesday 12 January 2021 13:00
by JuanUil
Hi,

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

Imagemaffia 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

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

Posted: Tuesday 12 January 2021 15:19
by 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;
}

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

Posted: Tuesday 12 January 2021 16:07
by JuanUil
Thnx that did the trick!!

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

Posted: Monday 18 January 2021 17:04
by 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

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

Posted: Monday 18 January 2021 17:15
by 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.

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

Posted: Monday 18 January 2021 18:58
by 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.

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

Posted: Monday 18 January 2021 22:09
by 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


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

Posted: Tuesday 19 January 2021 12:14
by 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.

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

Posted: Tuesday 26 January 2021 21:46
by HansieNL
My colorpicker:
Screenshot_2021-01-26 Dashticz.png
Screenshot_2021-01-26 Dashticz.png (85.72 KiB) Viewed 1711 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;
}

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

Posted: Thursday 28 January 2021 23:55
by Eekie72
Thuis wrote: Monday 05 November 2018 11:47 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 :-)

Image

Image

Image

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

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

Posted: Saturday 30 January 2021 22:29
by 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
wind.png (28.15 KiB) Viewed 1629 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
wind2.png (4.6 KiB) Viewed 1629 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
wind3.png (10.71 KiB) Viewed 1629 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

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

Posted: Saturday 30 January 2021 22:44
by 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

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

Posted: Sunday 31 January 2021 10:02
by 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

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

Posted: Sunday 31 January 2021 11:36
by 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

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

Posted: Sunday 31 January 2021 12:11
by 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',

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

Posted: Sunday 31 January 2021 15:58
by 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

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

Posted: Sunday 31 January 2021 16:50
by 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.

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

Posted: Sunday 31 January 2021 18:47
by 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 :-/