I would like to know if lovelace-floorplan can be used for navigating through the Home Assistant tabs, like picture-elements does. If this is the case, could you provide some yaml example for configuring this feature?
As far as I know, inkscape can be used for adding links into a SVG file. Even though it achieves my goal, the problem is that not only the tab, but the entire home assistant is reloaded (waste of time and resources).
Yes.
- cards:
type: 'custom:floorplan-card'
- config:
image: /local/floorplan/examples/simple/simple.svg?v=1.1.14
log_level: error
rules:
- element: floorplan.some_button
action:
service: floorplan.page_navigate
data:
page_id: tab_name
I have found a solution checking the floorplan.js code. The following piece of code is able to paginate between 3 different svg files which are defined in the same tab.
This is the code:
title: Floor Plan Test
type: 'custom:floorplan-card'
config:
log_level: info
pages:
- image: /local/test1.svg?v=1.1.15
log_level: info
page_id: page1
rules:
- element: button_1a
action:
service: floorplan.page_navigate
data:
page_id: page3
- element: button_2a
action:
service: floorplan.page_navigate
data:
page_id: page2
stylesheet: /local/style.css?v=1.1.14
- image: /local/test2.svg?v=1.1.15
log_level: info
page_id: page2
rules:
- element: button_2a
action:
service: floorplan.page_navigate
data:
page_id: page3
stylesheet: /local/style.css?v=1.1.14
- image: /local/test3.svg?v=1.1.15
log_level: info
page_id: page3
stylesheet:/local/style.css?v=1.1.14
master_page:
content_element: floorplan
rules:
- element: button_3a
action:
service: floorplan.page_navigate
data:
page_id: page1
I'll appreciate any comment, thanks!
Related
I am playing as a newbie with Nuxtjs. I bought an html template to transform it as Nuxtjs project. The template, there are several css to display out a good layout.
There are issues on loading a page.vue as first call but if I reload it, the layout/css are displayed correctly.
My tries were:
- Adding css: [ ... ] at nuxt.config.js as global.
- Added css as script injected into the page.vue as follow:
export default {
head () {
return {
link: [
{ rel: 'stylesheet', type: 'text/css', href: './css/animate.css' },
{ rel: 'stylesheet', type: 'text/css', href: './css/et-line.css' },
],
}
}
}
I appreciate your clues & tricks.
Put your css files to assets or static folder. More info about the difference you could find in the doc: https://nuxtjs.org/guide/assets#static
Plug it in nuxt.config.js as so:
css: ["~assets/main.css"] or css: ["~/static/static.css"]
Rebuild the project
I build a style guide in Jekyll and have a collection set up for each of the components. It uses only front-matter to display data about the styles. A file could look like this:
---
title: "Button Big Fixed"
type: interactive elements
description: "A big button with a fixed height."
code:
html: |
<button class="expanderBtn icon">Button</button>
css: |
.test {
font-size: 20px;
text-align: center;
}
colors:
- name: Brand Blue
hex: "#006CFF"
notes: Used as the background
- name: Hover
hex: "#7FB5FF"
notes: Brand Blue with 50% opacity
- name: Clicked
hex: "#4091FF"
notes: Brand Blue with 75% opacity
- name: Text
hex: "#000000"
notes: Text should be black for best legibility
---
Now, for a permalink feature, I'd like to use output: true. However, the documents that get generated are empty because I only use front matter.
Is there any way to set a custom template or something similar, so I can render the front matter on the page generated by output: true?
You can add a default template for each collection in your _config.yml. This looks like this:
defaults:
- scope:
path: ''
values:
layout: 'page'
- scope:
path: ''
type: 'guides'
values:
layout: 'guide'
It means: use the page.html file in the _layouts directory for everything except for the collection 'guides'. For 'guides' you should use guide.html. Create this file in your _layouts folder. In this guide.html file you call parts of the frontmatter by using:
page.title
page.description
page.etc
Good luck!
I just create the ionic project and I'm trying to make the sign in and sign up page and I just implement the HTML and CSS. but the problem is I can't change position between controllers.
The URL of controller is changes but the page is not changed. I was trying to import the correct module but I can't find the method.
Make sure in app.js, your templateURL , url is properly defined.
Most of the time it might be your 'URL' problem.
If you navigated from 'main', your next url should be : /main/success or something like that.
.state('tab.main', {
cache: false, //if you want to disable cache in ionic
url: '/main',
views: {
'tab-cases': {
templateUrl: 'templates/tab-main.html',
controller: 'MainCtrl'
}
}
})
I'm using ui-router (v0.2.11) with html5 mode
Have the following states:
stateHelperProvider.setNestedState({
name: 'stages',
'abstract': true,
url: '/:bakery/:city',
templateUrl: '/app/stages/stages.html',
controller: 'stagesCtrl',
children: stageStates
});
var stageStates = [{
name: 'chooseCake',
url: '/velg-kake',
templateUrl: '/app/stages/choose-cake/choose-cake.html'
};
$urlRouterProvider.otherwise('/oops');
Bakery and City are optional parameters.
For example I'm on home page:
mysite.com/home
If I go to link something like this:
mysite.com/bakery//velg-kake
go back (to home) and go forward it's ok,
but when I use
mysite.com//city/velg-kake
go back (to home) and go forward I get
mysite.com/oops.
I have tried to see the $location path in 'otherwise' function handler and I have gotten
/city/velg-kake
instead of
//city/velg-kake
So seems ui-roter removes first slash.
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId