my configfiles change all the time. 
because i still am improving things.
there are some topics here on the forum about how i have things changed.
I have already made a few of my widgets to a single reusable file.
and no i dont have any files online.
these are 2 that are used on the mobile from my wife right now.
they are not changed that much.
Ok, thanks.
It would be great if you publish your current config files somewhere.
i have started to build a website for my appdeamon and HAdashboard stuff.
just publishing my config files wouldnt bring anything because they are not ânormalâ
my dashboardfiles look like this:
<div class="gridster"> <!--test dashboard-->
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><%= erb :"switch.hbank" %></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><%= erb :"input_boolean.lights%></li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><%= erb :"sensor.temperature" %></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><%= erb :"page.kitchen" %></li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><%= erb :"page.hallway" %></li>
</ul>
</div>
how to create such dashboards can be found here:
Ok, I understand
i can give you 1 ânormalâ dashboard file.
it is this one:
to create something like this you need to make the grid very small and count a little more.
<% content_for :title do %>test<% end %>
<script type='text/javascript'>
$(function() {
// These settings override the defaults set in application.coffee. You can do this on a per dashboard basis.
Dashing.widget_margins = [0, 0]
Dashing.widget_base_dimensions = [13, 12]
Dashing.numColumns = 130
});
</script>
<div class="gridster"> <!-- Main Panel - PAGE 1 -->
<ul>
<li data-row="2" data-col="2" data-sizex="30" data-sizey="3">
<div data-text="" data-view="Hatext" data-title="time, sunrise and sunset" data-bgcolor="#2F2F2F"></div>
</li>
<li data-row="5" data-col="2" data-sizex="14" data-sizey="10">
<div data-id="clock2" data-view="Clock2" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="5" data-col="16" data-sizex="8" data-sizey="10">
<div data-id="zononder" data-view="Hasensor" data-title="Sunset" data-title2="Briedel" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="5" data-col="24" data-sizex="8" data-sizey="10">
<div data-id="zonop" data-view="Hasensor" data-title="Sunrise" data-title2="Briedel" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="16" data-col="2" data-sizex="8" data-sizey="3">
<div data-text="" data-view="Hatext" data-title="Switches" data-bgcolor="#2F2F2F"></div>
</li>
<li data-row="19" data-col="2" data-sizex="8" data-sizey="10">
<div data-id="olindedekkie" data-view="Haswitch" data-icon="moon-o" data-timea="dekkies_gaan_aan" data-timeb="dekkies_gaan_uit" data-title="Switch" data-title2="number 3" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="29" data-col="2" data-sizex="8" data-sizey="10">
<div data-id="hboog" data-view="Haswitch" data-icon="lightbulb-o" data-timea="huiskamer_verlichting" data-timeb="o" data-title="Switch" data-title2="number 1" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="39" data-col="2" data-sizex="8" data-sizey="10">
<div data-id="jacuzzi" data-view="Haswitch" data-icon="lightbulb-o" data-timea="buiten_verlichting" data-timeb="verlichting_uit" data-title="Switch" data-title2="number 2" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="16" data-col="11" data-sizex="8" data-sizey="3">
<div data-text="" data-view="Hatext" data-title="Temperature" data-bgcolor="#2F2F2F"></div>
</li>
<li data-row="19" data-col="11" data-sizex="8" data-sizey="10">
<div data-id="vijver_repeater_7_0" data-view="Hameter" data-title="Pond" data-title2="frontside" data-unit="°C" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="29" data-col="11" data-sizex="8" data-sizey="10">
<div data-id="vijver_repeater_7_1" data-view="Hameter" data-title="Outside" data-title2="terras" data-unit="°C" data-bgcolor="#3A3A3A"></div>
</li>
<li data-row="39" data-col="11" data-sizex="8" data-sizey="10">
<div data-id="arduino2_3_0" data-view="Hameter" data-title="Near the" data-title2="wall" data-unit="°C" data-bgcolor="#3A3A3A"></div>
</li>
</ul>
</div>
edit i forgot i used hatext there.
hatext isnt included. you can find info for that here:
Thanks, what do you use to control a thermostat?
my own created input_slider widget. (which is still not posted because you need to edit core files)
andrew still hasnt found the time to implement it, and i still dont know how to give it to him at github.
Ok, but is it this code https://github.com/home-assistant/hadashboard/compare/master...ReneTode:patch-1 ?
i have just now tried that out. (my first actions on github)
i hope i remembered all needed changes correct.
but yeah that should be it.
in the dashboard it looks like this:
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="huiskamerthermostaata" data-view="Hainputslider" data-title="Huiskamer" data-steps="0.5" data-maximum="25" data-minimum="15" data-title2="thermostaat 1" data-bgcolor="#333333"></div>
</li>
steps could be taken out off HA through the atrributes, but i didnt know how. so that would be a future change.
Hi Rene - Iâll be getting back to HADashboard soon - busy with your requested additions to AppDaemon at the moment 
(A clean way to shutdown the threaded app, plus I am adding dependency checking so you can get auto reloads of anything that depends on your sound app)
Yo dawg! I heard you liked panels, etc
Sorry to dig up this ancient thread but your setup is sweet. could you share your dash for the RGB color picker please? Which widget is that?
Are you loading separate dashboards with the options at the bottom? or are they staying on the same page and changing the widgets? Also, what code are you using the for reload widget? and is it reloading HADasboard or HA itself?
Version 1 of my home dashboard, currently running on an ipad2. An awful lot of proprietary CSS, still want to do some more work on the media player and find space for some security camera feeds, but feeling good about 1.0.
Thanks for Home Assistant and HADashboard, itâs freakin incredible.
You mind sharing the code, interested in the weather forecast solution
You mind sharing the code, interested in the weather forecast solution
Not at all. Should probably add to github, but just to share quickly hereâŚ
The Dark Sky code was mostly taken, slightly adapted, from an active thread on this forum, sorry Iâm not giving credit very well:
sensor:
- platform: darksky
api_key: !secret darksky_key
forecast:
- 1
- 2
- 3
- 4
- 5
- 6
monitored_conditions:
- precip_probability
- icon
- temperature_min
- temperature_max
- temperature
- platform: season
- platform: template
sensors:
forecast_0:
friendly_name: Today
value_template: >
{{states.sensor.dark_sky_daily_high_temperature.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
forecast_1:
friendly_name: Tomorrow
value_template: >
{{states.sensor.dark_sky_daily_high_temperature_1.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature_1.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon_1", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon_1", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon_1", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon_1", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon_1", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon_1", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon_1", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon_1", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon_1", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon_1", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
forecast_2:
friendly_name_template: >
{%- set date = as_timestamp(now()) + (2 * 86400 ) -%}
{{ date | timestamp_custom("%A") }}
value_template: >
{{states.sensor.dark_sky_daily_high_temperature_2.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature_2.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon_2", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon_2", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon_2", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon_2", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon_2", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon_2", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon_2", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon_2", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon_2", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon_2", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
forecast_3:
friendly_name_template: >
{%- set date = as_timestamp(now()) + (3 * 86400 ) -%}
{{ date | timestamp_custom("%A") }}
value_template: >
{{states.sensor.dark_sky_daily_high_temperature_3.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature_3.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon_3", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon_3", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon_3", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon_3", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon_3", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon_3", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon_3", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon_3", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon_3", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon_3", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
forecast_4:
friendly_name_template: >
{%- set date = as_timestamp(now()) + (4 * 86400 ) -%}
{{ date | timestamp_custom("%A") }}
value_template: >
{{states.sensor.dark_sky_daily_high_temperature_4.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature_4.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon_4", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon_4", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon_4", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon_4", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon_4", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon_4", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon_4", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon_4", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon_4", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon_4", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
forecast_5:
friendly_name_template: >
{%- set date = as_timestamp(now()) + (5 * 86400 ) -%}
{{ date | timestamp_custom("%A") }}
value_template: >
{{states.sensor.dark_sky_daily_high_temperature_5.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature_5.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon_5", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon_5", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon_5", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon_5", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon_5", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon_5", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon_5", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon_5", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon_5", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon_5", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
forecast_6:
friendly_name_template: >
{%- set date = as_timestamp(now()) + (6 * 86400 ) -%}
{{ date | timestamp_custom("%A") }}
value_template: >
{{states.sensor.dark_sky_daily_high_temperature_6.state|round(0)}}°/{{states.sensor.dark_sky_daily_low_temperature_6.state|round(0)}}°
icon_template: >-
{% if is_state("sensor.dark_sky_icon_6", "clear-day") %}
mdi:weather-sunny
{% elif is_state("sensor.dark_sky_icon_6", "clear-night") %}
mdi:weather-night
{% elif is_state("sensor.dark_sky_icon_6", "cloudy") %}
mdi:weather-cloudy
{% elif is_state("sensor.dark_sky_icon_6", "rain") %}
mdi:weather-pouring
{% elif is_state("sensor.dark_sky_icon_6", "sleet") %}
mdi:weather-snowy-rain
{% elif is_state("sensor.dark_sky_icon_6", "snow") %}
mdi:weather-snowy
{% elif is_state("sensor.dark_sky_icon_6", "wind") %}
mdi:weather-windy
{% elif is_state("sensor.dark_sky_icon_6", "fog") %}
mdi:weather-fog
{% elif is_state("sensor.dark_sky_icon_6", "partly-cloudy-day") %}
mdi:weather-partlycloudy
{% elif is_state("sensor.dark_sky_icon_6", "partly-cloudy-night") %}
mdi:weather-partlycloudy
{% else %}
error
{% endif %}
Then I created a new widget I called day_forecast
base_day_forecast.js
function base_day_forecast(widget_id, url, skin, parameters)
{
self = this;
self.widget_id = widget_id;
self.parameters = parameters;
if ("monitored_entity" in self.parameters)
{
entity = self.parameters.monitored_entity
}
else
{
entity = self.parameters.entity
}
var callbacks = [];
self.OnStateAvailable = OnStateAvailable;
self.OnStateUpdate = OnStateUpdate;
var monitored_entities =
[
{"entity": parameters.entity, "initial": self.OnStateAvailable, "update": self.OnStateUpdate}
];
WidgetBase.call(self, widget_id, url, skin, parameters, monitored_entities, callbacks)
function OnStateAvailable(self, state)
{
set_view(self,state);
}
function OnStateUpdate(self, state)
{
set_view(self,state);
}
function set_view(self,state){
self.icon = 'mdi ' + state.attributes.icon.replace(':','-');
self.title = state.attributes.friendly_name;
self.value = state.state;
self.set_field(self, "icon", self.icon)
self.set_field(self, "value", self.value)
self.set_field(self, "title", self.title)
}
}
base_day_forecast.html
<h1 class="title left-title" data-bind="text: title"></h1>
<h2 class="iconcontainer icon right-icon" data-bind="attr:{style: icon_style}"><i data-bind="attr: {class: icon}"></i></h2>
<div class="valueunit" style=""><h2 class="value left-value" data-bind="html: value" style="color: #fff;font-size: 100%;"></h2></div>
base_day_forecast.css
.widget-base_day_forecast-{{id}} {
position: relative;
}
.widget-base_day_forecast-{{id}} .title {
position: absolute;
top: 5px;
width: 100%;
}
.widget-base_day_forecast-{{id}} .title2 {
position: absolute;
top: 23px;
width: 100%;
}
.widget-base_day_forecast-{{id}} .iconcontainer.icon {
position: absolute;
bottom: 25%;
width: 100%;
}
h1.title.left-title{
text-align:left;
box-sizing:border-box;
padding-left: 15px;
top: 17px;
}
h2.value.left-value{
box-sizing: border-box;
padding-left: 15px;
font-size: 175% !important;
top: 35px !important;
bottom: auto;
position: absolute;
left: 0;
}
.icon.right-icon{
text-align:right;
padding-right:15px;
box-sizing:border-box;
}
day_forecast.yaml
widget_type: base_day_forecast
entity: {{entity}}
fields:
title: ""
value: ""
icon: ""
icon_style: $style_inactive
static_css:
title_style: $style_title
widget_style: $background_style
css:
icon_style_active: $style_active
icon_style_inactive: $style_inactive
dashboard.dash
forecast_0:
widget_type: day_forecast
entity: sensor.forecast_0
forecast_1:
widget_type: day_forecast
entity: sensor.forecast_1
forecast_2:
widget_type: day_forecast
entity: sensor.forecast_2
forecast_3:
widget_type: day_forecast
entity: sensor.forecast_3
forecast_4:
widget_type: day_forecast
entity: sensor.forecast_4
forecast_5:
widget_type: day_forecast
entity: sensor.forecast_5
forecast_6:
widget_type: day_forecast
entity: sensor.forecast_6Should the following files placed in the /config/appdaemon/widgets directory?
if you want to create a custom widget it needs to go in the directory custom_widgets
i suspect you run hassio and if i am correct then the files need to be placed like this:
/config/appdaemon/custom_widgets/base_day_forecast/base_day_forecast.css
/config/appdaemon/custom_widgets/base_day_forecast/base_day_forecast.html
/config/appdaemon/custom_widgets/base_day_forecast/base_day_forecast.js
/config/appdaemon/custom_widgets/day_forecast.yaml
Hi,
very nice, I like the light widget and its controls, would mind sharing this as well please ?
The light widget is @ReneTodeâs light_with_brightness: https://github.com/ReneTode/My-AppDaemon/tree/master/custom_widgets
Edit: If youâre talking about the three small icons beneath the main lights, which are scene selects for party/relax/bright modes, those are separate widgets, so its one large light_with_brightness (6x6) and three small switch widgets (2x2) beneath it.
I did modify the css to get it to look the way it does. And, I doubt hacking the css within a custom widget is the recommended way to do things, but hereâs what my base_light_with_brightness.css looks like, youâll likely want to change some colors as I have some hard coded in here.
.widget-base_light_with_brightness-{{id}} {
position: relative;
}
.widget-base_light_with_brightness-{{id}} .title {
position: absolute;
top: 5px;
width: 100%;
}
.widget-base_light_with_brightness-{{id}} .iconcontainer.icon {
margin-top: -10px;
}
.widget-base_light_with_brightness-{{id}} .toggle-area {
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.widget-base_light_with_brightness-{{id}} .slidercontainer {
position: absolute;
bottom: 6px;
height: 18px;
overflow: hidden;
padding-left: 6px;
padding-right: 6px;
box-sizing: border-box;
width: 100%;
horizontal-align: center;
margin: auto;
z-index: 11;
}
/* Input Slider Customization */
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
width: 100%;
height: 18px;
}
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: linear-gradient(to right, rgba(31,107,117,1) 0%,rgba(58,146,193,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -webkit-linear-gradient(to right, rgba(31,107,117,1) 0%,rgba(58,146,193,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
outline: none;
height: 18px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
background-color: #96DCE4;
padding: 0;
border: 0;
outline: none;
height: 18px;
}