-
-
Notifications
You must be signed in to change notification settings - Fork 93
[Feature] Screen Saver #287
[Feature] Screen Saver #287
Conversation
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Added Translation keys and values Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Added more missing translation keys Added error message if no dashboards setup Disable checkbox if no dashboards configured
Added translation keys for help Updated md files and package.json Gulped scss
Added more translation keys for the button text
Text changes Added and Implemented ui-sortable Style changes Gulped
Added more translation keys Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
More code improvements Admin.pot changes Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
More changes to uib-alerts Styling changes Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Admin.pot translation additions Reset screensaver _config on dashboard settings changes Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Gulped Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Alright, thanks for your work! Didn't review the code yet, just had a quick look, but tested on an incognito window with no config and it doesn't work (and breaks the settings screen):
Also it causes the config to be loaded twice. |
A few initial remarks:
|
Yeah I'll work on these suggestions in a bit (currently hammered at work) |
Remove angular-ui-sortable (lib, jQuery, and jQueryUI) Implemented ng-sortable Style changes
Removed unnecessary classes Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Fixed
Removed them all and used ng-sortable (which uses vanilla js). Preferred not to reinvent the wheel.
Removed unnecessary animations. This is meant to be a screensaver, which is triggered when user is idle so animations, I believe, are totally redundant here.
Completely downgraded to ES5 style |
Thanks! This looks better :)
That works.
Agreed, I'm not a big fan of overusing animations (I try to always think about lower-end hardware which a lot of users use HABPanel on) but I have nothing against them per se, I only avoid ngAnimate :) I'll do a proper code review next week, but some additional general remarks about the presentation:
|
Ng-Idle was too big for what it is. It had 3 other events I didn't need but lacked the one I actually do. It doesn't not raise an even when the idle ends (user is not idle any more). It's "idle end" event is trigerred when the user does not do anything after x time. The idle end event if Ng-Idle is basically the beginning of the "warning" phase.
Yeah this one makes sense. I'll try to move it out further and not the first one they see.
Yeah I think there should basically only 2 tabs here.. General and Advanced.
They can disable the button just like they can for any of the header buttons. I meant this to still be there even if screensaver is off but the button setting is on. The reason is they might not like the screensaver to be automatic but still want the slideshow on demand.
That's the opposite for me. I have several habpanels in different devices and I want only a few of them with the screensaver turned on. On some of the devices, I want different sets if dashboards to rotate. So having the setting separate was a must for me. |
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
It looks better!
At the very least it should be hidden if the screensaver is not configured because the button will do nothing and clutter the screen for no reason - long titles on narrow screens won't fit anymore and so on. Same thing as the speak button doesn't appear if the browser doesn't support it.
I understand, but I still dont think this particular setting should be treated separately, it feels illogical. Besides, not having it tied to the panel configuration means you have to silently mess with the dashboard rotation config made by the user when it's changed. Need to think about this. Maybe there should be some sort of "local override" (with a warning) for certain settings - the "voice" and "switch when item changes" would also be good candidates. |
I initially wanted to use bootstrap panels but .panel itself was overridden
Yeah that makes sense. Should be an easy change.
I agree. And perhaps the better approach is to have a means to target specific HABPanel instances. Just on top of my head, perhaps from an item (string):
.. and of course, we can still make it backwards-compatible, so other common users can still use the 'old' way |
Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Save to panel config instead of local storage. Signed-off-by: Lucky Mallari <luckymallari@gmail.todotcom>
Barely had time :) |
Nice! No worries, I had a few things on my plate too :) Cool that you put the settings in the panel configuration, it's more in line with the documented concepts so people won't be surprised their screensaver configs are not carried over with the other settings. I haven't found a good solution for allowing "local overrides" for settings that doesn't feel odd or overengineered (it's an edge case I believe so introducing complexity for all users might not be the best), I'm even actually beginning to think it's not strictly necessary - if you want to deviate from the server-hosted panel configuration you can always switch to local storage and make the local changes. To pick up changes from the server, you change back to the panel configuration then back again to local storage and re-configure the local deviations. I'll try to do a thorough review on Sunday. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alright, here are the promised review/comments ;)
@@ -40,7 +42,7 @@ <h2 class="dashboard-title" ng-if="!vm.dashboard.header.use_custom_widget"> | |||
tooltip-placement="top"> | |||
<i class="glyphicon" ng-class="vm.isListening ? 'glyphicon-stop' : 'glyphicon-comment'"></i> | |||
</a> | |||
<div class="scrollable" ng-show="vm.ready" gridster="vm.gridsterOptions"> | |||
<div class="scrollable widget-container" ng-show="vm.ready" gridster="vm.gridsterOptions"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
New class? Is this needed?
// Uniqify our arrays | ||
function onlyUnique(value, index, self) { return self.indexOf(value) === index; } | ||
config.onStart.dashboards = config.onStart.dashboards.filter(onlyUnique); | ||
config.onStart.dashboardsExcluded = config.onStart.dashboardsExcluded.filter(onlyUnique); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why store the excluded dashboards in the config, wouldn't the ones in the rotation be enough? Seems weird and would need maintenance when the dashboard list is updated.
This is what I have in the panel configuration after storing the settings?
"settings": {
...
"screensaver": {
"idleTimeoutSec": 300,
"slideshowIntervalSec": 5,
"isEnabled": true,
"eventsToWatch": {
"mousedown": true,
"keydown": true,
"mousewheel": true,
"touchstart": true,
"touchmove": true
},
"additionalEventsToWatch": [],
"onStart": {
"type": "slideshow",
"dashboardsExcluded": [
{
"id": "test"
},
{
"id": "mobile"
},
{
"id": "map"
},
{
"id": "weather"
},
{
"id": "ec vdsgsrg"
}
],
"dashboards": [],
"dashboard": null
},
"onStop": {
"type": "stop",
"dashboard": "test"
}
}
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I initially wanted to have 2 containers for the dbs (included/excluded) so that I would not have to loop through the array while in the settings controller (for the included/excluded) draggable items. But let me see if I can improve this.
get: function () { return _config; } | ||
}) | ||
|
||
var reConfig = function () { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe this isn't needed anymore now that the dashboard rotation is stored in the panel config? The only remaining check necessary as I see it is if a dashboard has been removed while it's part of the screensaver rotation.
@@ -96,6 +97,24 @@ <h4 translate-keep-content translate="settings.panel.customwidgets.header">Custo | |||
<span translate-keep-content translate="settings.panel.customwidgets.manage">Manage</span> > | |||
</a> | |||
|
|||
<br /> | |||
<br /> | |||
<h4 translate-keep-content translate="settings.panel.screensaver">ScreenSaver</h4> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Screensaver?
'$timeout' | ||
]; | ||
|
||
function ScreensaverSettingsCtrl( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you use controlllerAs like the other controllers in this folder?
<option translate-keep-content translate="screensaver.settings.common.gotodashboard" value='gotodashboard'>Go to dashboard</option> | ||
<option translate-keep-content translate="screensaver.settings.onstarttype.options.slideshow" value='slideshow'>Dashboard Slideshow</option> | ||
</select> | ||
<span class='helpinfo'> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wonder whether this is really needed. Seems obvious, adds translation work and could be handled in the docs instead.
<input id="ss_idleTimeout" class="d-block" type="number" ng-min="10" ng-change="validate()" name="idleTimeout" ng-model="config.idleTimeoutSec" | ||
required> | ||
<span> | ||
<em translate-keep-content translate="screensaver.settings.idletimeout.info">Seconds of being idle until screensaver kicks in</em> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wonder whether this is really needed. Seems obvious, adds translation work and could be handled in the docs instead.
<label translate-keep-content translate="screensaver.settings.common.perform" for="ss_onStopType">Perform: </label> | ||
<div> | ||
<select id="ss_onStopType" class="d-block" name='onStopType' ng-model="config.onStop.type" ng-change="validate()"> | ||
<option translate-keep-content translate="screensaver.settings.common.stop" value='stop'>Stop</option> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe "Do nothing" is a better label?
<option translate-keep-content translate="screensaver.settings.common.stop" value='stop'>Stop</option> | ||
<option translate-keep-content translate="screensaver.settings.common.gotodashboard" value='gotodashboard'>Go to dashboard</option> | ||
</select> | ||
<span class='helpinfo'> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wonder whether this is really needed. Seems obvious, adds translation work and could be handled in the docs instead.
<a>{{::translations.showadvanced}}</a> | ||
</label> | ||
</div> | ||
<ul class="settings-outer" ng-if="showAdvancedSettings"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm actually wondering if all that customization really adds value for the end user. Sensible hardcoded defaults could be enough, with an eventual textbox with csv values to allow events to be customized if deemed necessary for the (really) advanced users.
@LuckyMallari are you still on track? I'd love to use that feature myself! :) |
Same here. This feature is quite nice. This would allow me to get rid of a rule switching to an empty Dashboard (to avoid overheating my raspim, because the main dashboard has some animated weather icons... which seems to be a heavy task for a raspi 3). @LuckyMallari & @ghys |
@LKuech I'm achieving something similar with PicApport and a web frame.... would be nice for the in-build functionality though! |
agerly waiing to test this - has the project gone cold? |
Closing. |
New Feature: ScreenSaver
Resolves #282
Same features from #282
I made the feature name simple, just call it screen saver, since users can simply navigate to a dashboard when screensaver kicks in. That dashboard page could have another album slideshow, etc. Another feature is to rotate the dashboards (configurable).
Signed-off-by: Lucky Mallari luckymallari@gmail.todotcom
Demo
Configurable
Error Checking
Friendly Help messages
Responsive