I reinstalled mycroft today on a on a micro i9 router board in my bid to make an all in one device that does everything ( roter, home automation, kodi, desktop and ai ). that connected to a screen running mycroft -gui. so I was trying to see if I can migrate some of my previous skills to the newer interface .
i was wondering if a couple thing are possible. I see that the front size for the screen is determined by the screen width. i was wonder if the font size can be either fixed and scrolled to end of text as mycroft reads the body of the text or adjust the font size to screen height. as that would work better for display text as it reads books and recipes from the web . as currently when I try it start at largest font then shrinks the font to screen width . also, is it possible to highlight the word as it reads it like a karaoke screen does
so you might understand what I mean better, here my guttenburg skill reading a book it downloaded from there… and displaying it on the GUI… if I could set a fixed font it would be fine. as it would be good for elderly people to read the book aloud but also display the text so they can read along …
example video of what happens-- video
it is a bit annoying the changing font size . if it stayed fixed then it would work fine
It would help to look at your skill ui code, font sizes can be fixed easily inside labels and text items with a simple “font.pixelSize: 72 or any int” in the qml file.
I was not using qml file i was simply passing it to mycroft-gui with this command
self.gui.show_text()
ie
self.gui.show_text(“{}”.format(line))
when I add in qml file i only get 1/2 a display either on the right hand side or the left hand side instead of using the entire screen
is there a way to adjust fontsize with out going through qml as I can seam to find any examples of or can you tell qml to display on full page instead of only in column as that seams to be the default mode
would help to see the qml files and your code, there seems to be a second page your code is creating than just having one page
the original code can be found here at github . but it is one large compressed file to accommodate the 100 public domain books easily
to get it to work on newer mycrofts you have to comment out this line in the init.py
from mycroft.messagebus.client.ws import WebsocketClient
for testing I just added at line ~ 346 before or after line -> self.speak("{}".format(line), wait=True)
self.gui.show_text("{}".format(line))
self.gui.show_page("guten.qml")
if you comment outline # self.gui.show_page(“guten.qml”)
it will display full page
if uncommented 1/2 page
the qml has no formatting in it as I was just try various example of qml formats to see what they accomplish to see what happens as I am unfamiliar with it formatting
my qml is basically blank
import QtQuick 2.4
import QtQuick.Layouts 1.4
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
import Mycroft 1.0 as Mycroft
Mycroft.Delegate {
}
and it will display in half page
if you wish to see what I mean if you install my guttenburg skill and modify from above – just say “read book peter pan” or any book in the library and it will display in the mycroft-gui
so the issue here is your inserting a blank page with self.gui.show_page(“guten.qml”) after self.gui.show_text() you should either use self.gui.show_text which will handle displaying text on a page for you or you can write your own ui for how you want the text to be displayed in “guten.qml” like for example: mycroft-core/mycroft/res/ui/SYSTEM_TextFrame.qml at dev · MycroftAI/mycroft-core · GitHub
well i do not know what up or why I used the wiki skill and qml as a template which displays full centre screen
I send with this to display:
summary = "{}".format(line)
self.gui.clear()
self.gui['summary'] = summary
self.gui.show_text(summary)
self.gui.show_page("guten.qml", override_idle=60)
self.speak(summary, wait=True)
and the QML looks like this
import QtQuick 2.4
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
import org.kde.kirigami 2.4 as Kirigami
import Mycroft 1.0 as Mycroft
Mycroft.Delegate {
Mycroft.PaginatedText {
anchors.fill: parent
text: sessionData.summary
currentIndex: 0
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 72
//font.pointSize: Kirigami.Units.gridUnit
// HACK TO SET BETTER SIZE ON RESPEAKER IMAGE
font.pointSize: Kirigami.Units.smallSpacing * 3
}
}
and yet it only displays only on 1/2 screen with varying font size as if it ignoring the qml formatting
okay was playing around as i wanted to see if I could add pause button and it does
so I have no know clue why the page is not formatted the same as wiki page
you are still implementing it incorrectly with trying to do both at the same time. If you are using self.gui.show_text("") then you do not need to create your own qml file it will use the show text qml page from mycroft-core see method number 1 below.
If you want to display it differently from how mycroft-core has the show text qml page differently then you can implement your own .qml in “your-skill/ui/guten.qml” and then use method 2 from below.
Method 1[Use Show Text From Mycroft Core]:
summary = "{}".format(line)
self.gui.show_text(line)
self.speak(summary, wait=True)
Method 2 [Implement Your Own UI]:
summary = "{}".format(line)
self.gui['summary'] = summary
self.gui.show_page("guten.qml", override_idle=60)
self.speak(summary, wait=True)if you can provide a mock up of how you want the page to look i could probably help you with the custom qml ui you want for the skill, the wikipedia skill uses its own ui implementation and not the pages from mycroft-core see the ui folder in the wikipedia skill
okay I see I missed it that i had one to many lines sending text
thank you for the offer , but i think I got it working now. but one more question.
the wiki qml generates at the top of the page, i want to create page from the middle screen as how it was producing the page with out the qml. what command is use for that
I didn’t understand what you mean by top of the page, the page is the entire screen only content in the page is positioned as required
when i implement how the wiki page is it generates text top downwards
when i do not use the qml it generates the text from the middle outwards ( but the font size keeps changing)
I would prefer to generate the text like this from the middle outwards ( with a fixed font size as it would be visibly more appealing for me )
There was a bug in the autofit label implementation which has been fixed in mycroft-gui and now is waiting on https://github.com/MycroftAI/mycroft-core/pull/2815 so it should be fixed soon
you can position the text in the middle of the screen if your text {} has anchors.fill: parent with adding “verticalAlignment: Text.AlignVCenter” to it
It would help to go through the documentation https://mycroft-ai.gitbook.io/docs/skill-development/displaying-information/mycroft-gui and also help go through different text properties https://doc.qt.io/qt-5/qml-qtquick-text.html
verticalAlignment: Text.AlignVCenter seams to be broken as it only displays a blank screen for me … but thank you for your help much appreciated . I will see what I can do…
Sorry one more question-- I search but I can not seam to see a way to send command from gui to mycroft-core
I want to sent two different commands depending on which button is clicked
pause/stop utterance --> stop reading book
Continue utterance --> continue reading book
import QtQuick 2.4
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
import org.kde.kirigami 2.4 as Kirigami
import Mycroft 1.0 as Mycroft
Mycroft.Delegate {
id: root
ColumnLayout {
RowLayout{
Button {
text: "PAUSE/STOP READING BOOK"
onClicked: {
triggerGuiEvent("skill.foo.event", {"string": "stop reading book"})
}
}
Button{
text: "CONTINUE"
onClicked: {
triggerGuiEvent("skill.foo.event", {"string": "continue reading book"})
}
}
}
}
Mycroft.PaginatedText {
anchors.fill: parent
anchors.topMargin: 100
text: sessionData.summary
currentIndex: 0
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 20
//font.pointSize: Kirigami.Units.gridUnit
// HACK TO SET BETTER SIZE ON RESPEAKER IMAGE
font.pointSize: Kirigami.Units.smallSpacing * 3
}
}