Software: modifications and extensions Toon

[marcelr]

Please post your questions/remarks/tips/code regarding toon's software and modifications or extensions you applied here.

grtz,

marcelr

[Ierlandfan]

Can we use your app as a general template to insert for example video streams (Like doorbell?)
I want to find out if Toon is fast enough to show videos.

[RDNZL]

+1 installing a Dahua door station soon, this would be very nice feature, if not video capable an image capture will do.

[cygnusx]

Video will be bad. Around 1 fps max if youre lucky. Qt writes tot the framebuffer directly. Thats why (as i found out) they disabled a lot of animations in toon aswell.

But image display when the doorbell is pressed should not be a problemen.

Oh and sure, you can use it! Just post your results here, or atleast a screenshot :p

[RdP]

Hi,

I would like to show the information from the Plugwise modules on Toon, especially the Plugwise Circle I use to gather my solar data. I can retrieve this dat from Plugwise, but how can I show it on the Toon screen(s)

I see some nice examples here, and I'm wondering if this will work on a standard Toon. I mean without any special (non supported) firmware or other unsupported modification.

If the answer is yes, then I will have a look and see If I can get this working.

Thanks,

[cygnusx]

Plugwise won't work out of the box on toon. Only the devices they sell (forgot the name). But hey, that's where we come in. So make it yourself

toon is easily rooted, and developing apps for it is kinda easy too.

[BrainHunt]

All,
I have been following this forum with quite some interest for some time. I have rooted my Toon successfully and now I am looking at ways to further utilize the gadget. So of course the use of tiles as a interface for (some of) my domoticz functionality seems very initeresting. Also I am considering using it for managing my Sonos system.

However in order to get started, I have a few questions:
- I know how to code but which language is used in the scripts for the tiles? (I can derive functionality from the example from cygnusx but could be handy to know what more is possible )
- @cygnusx: could you also share the code for the blinds/lights tile that you showed? Just to get some more examples

Of course, once I create something, I will report back here. However due to the upcoming summer holidays it will probably in August (just to manage expectations )

Thanks in advance for your help!

[cygnusx]

Well, almost everything is possible. The language is QML. It's a language to define which widgets go where and define some specifics. But, all the rest in the QML file is actually Javascript.

So, things like x&y coordinates, height, width, opacity etc. is QML, and actions like onclick, loading data on specific intervals, that's all plain javascript.

That makes it kinda easy to program for it. It's mostly basic javascript programming.

I use the original modules to make my own. For instancy, my lights/blinds screen is just a modification from the original one. The difference is that Quby does not do web requests via QML/Javascript but it has it's own daemon on the background where it communicates with. I suppose that has better performance than my solution, but that part (the daemon) is written in C, in other words, it's compiled and not (easily) modifyable. But if you are smart you can just get away with using javascript.

For instance. I made my own weather script instead of using the default one. It's based on buienradar, so the data is already publicly available. Normally, Toon gets regular weather updates from its backend daemon. This daemon reads the full weather xml and fetches the interesting part (only the weather for your location instead of all weather stations in NL) and sends it to the Toon frontend. In this way, Toon does not have to process all of the data what could make it slow.

I do almost the same. I have a PHP script running on a raspberry pi in my house. This script fetches the buienradar xml. It get's my relevant weather station and sends that part to toon. on my toon i do the rest.

[RomMon]

Just discovered this thread, and the awesome kodi remote app of cygnusx.
(so far haven't got further than adding the seconds to the timestring part of the clock app myself.)

Thanks!

[RomMon]

Below four (2 + 2) scripts that allow to initiate commands at startup, and at shutdown.

1. Static init startup script
   The script below will just start another script in the background.
   This to ensure the startup of other init scripts is not delayed due to e.g. a sleep.
   
   • vi /etc/init.d/local_start

   • Code: Select all

     #! /bin/sh
     #
     # /etc/init.d/local_start
     #
     # don't change this script. Change /etc/init.d/rc.local instead.
     #
     [ -x /etc/init.d/rc.local ] && /etc/init.d/rc.local &
     
     exit 0
     

   • chmod +x /etc/init.d/local_start
   • /usr/sbin/update-rc.d -v local_start start 05 3 4 5 .
2. Customizable startup script
   The next script is to customize yourself with the shell commands to start something.
   
   • vi /etc/init.d/rc.local

   • Code: Select all

     #! /bin/sh
     #
     # /etc/init.d/rc.local
     #
     # This script is executed at the start of each multiuser runlevel (3, 4, 5).
     # Make sure that the script will "exit 0" on success or any other
     # value on error.
     #
     # Put any local startup commands in here.
     # e.g.:
     # [ -x /usr/bin/x11vnc ] && /usr/bin/x11vnc &
     #
     # By default this script does nothing.
     echo "rc.local is started"
     
     
     exit 0
     

   • chmod +x /etc/init.d/rc.local
   • You can test your script with with the following command:
   • [ -x /etc/init.d/local_start ] && /etc/init.d/local_start
3. Static init shutdown script
   The script below will just start another script in the background.
   Same as for the startup script, this to ensure the shutdown of other init scripts is not delayed due to the shell code used in the customizable shutdown script.
   
   • vi /etc/init.d/local_shut

   • Code: Select all

     #! /bin/sh
     #
     # /etc/init.d/local_shut
     #
     # don't change this script. Change /etc/init.d/rc.local_shutdown instead.
     #
     [ -x /etc/init.d/rc.local_shutdown ] && /etc/init.d/rc.local_shutdown &
     
     exit 0
     

   • chmod +x /etc/init.d/local_shut
   • /usr/sbin/update-rc.d -v local_shut stop 05 0 1 6 .
4. Customizable shutdown script
   The next script is to customize yourself with the shell commands to execute at shutdown.
   
   • vi /etc/init.d/rc.local_shutdown

   • Code: Select all

     #! /bin/sh
     #
     # /etc/init.d/rc.local_shutdown
     #
     # This script is executed entering runlevel (0, 1, and 6).
     # Make sure that the script will "exit 0" on success or any other
     # value on error.
     #
     # Put any local shutdown commands in here.
     #
     #
     #
     # By default this script does nothing.
     echo "rc.local_shutdown is started"
     
     exit 0
     

   • chmod +x /etc/init.d/rc.local_shutdown
     
     • You can test your script with with the following command:
     • [ -x /etc/init.d/local_shut ] && /etc/init.d/local_shut

[RomMon]

Below the few steps to enable to enable public key authentication for ssh access (dropbear) on the toon.

I assume you have already a public/private key-pair.
If not follow you can follow this HowTo for creating one.

1. On the system with your public/private key file:
   
   1. Obtain the public key e.g. by opening the private key file with puttygen.exe, and copy the public key from the window.
2. On the Toon:
   
   1. mkdir ~/.ssh
   2. vi ~/.ssh/authorized_keys
   3. and past your public key in the file
   4. chmod 600 ~/.ssh
   5. chmod 600 ~/.ssh/authorized_keys

Next step should be to disable password authentication to make your toon more secure (haven't done that myself yet).

[Ierlandfan]

@cygnusx

can you post the code for the lights..i also have kaku devices and use domoticz..would be nice to control them from Toon. I can already switch them from inside Domoticz so no problem.

[RomMon]

Inspired by cygnusx, I’m trying to learn a little how to make changes to QML, and started with the Clock app.

Edit 2020-08-08:
The following modifications are needed to make this app working on Toon version 5.x.x:

Code: Select all

sed -i 's/import QtQuick 1.1/import QtQuick 2.1/g' /HCBv2/qml/apps/myClock/MyClockApp.qml
sed -i 's/import QtQuick 1.1/import QtQuick 2.1/g' /HCBv2/qml/apps/myClock/MyClockTile.qml
sed -i 's/drawables\/myClock.png/qrc:\/apps\/clock\/drawables\/clock.svg/g' /HCBv2/qml/apps/myClock/MyClockApp.qml

1. App Files
   All the apps are located in their own directory in /HCBv2/qml/apps/.
   
   Have a look at the /HCBv2/qml/apps/clock/ directory and its content.

   Code: Select all

   .
   |-- ClockApp.qml
   |-- ClockTile.qml
   |-- drawables
   |   `-- clock.png
   |-- lang
   |   |-- lang_en_GB.qm
   |   |-- lang_fr_BE.qm
   |   |-- lang_fr_FR.qm
   |   |-- lang_it_IT.qm
   |   |-- lang_nl_BE.qm
   |   `-- lang_nl_NL.qm
   `-- qmldir 

   • The content of ClockApp.qml looks a lot like JavaScript. You also see a reference to the icon used, some string declarations, and a timer block. The function updateClockTiles is where a string with the current time (timeStr), and a string with the current date (dateStr) is ‘generated’.
   • The ClockTile.qml holds the info how, and when data is shown (e.g. alignment, font, size).
   • The ./drawables/clock.png is the icon you see if you select an app to be shown as an tile.
   • The files in ./lang/lang_*_*.qm are used to translate text, like e.g. the app name, to the local language. (Clock is translated to Klok in the GUI.) With ‘strings -n 3 / HCBv2/qml/apps/clock/lang/lang_nl_NL.qm’ you obtain a list of English strings. The Dutch strings are Unicode strings (before each letter there is a 0x00 character. This is because each character is actually two bytes long.)
   • The qmldir references ClockApp.qml as ClockApp, and ClockTitle.qml as ClockTitle, both part of the module apps.Clock.
2. ClockApp.qml
   Let’s have a closer look to the function updateClockTiles part of ‘ClockApp.qml’.
   
   • The first line obtains the current date and time in milliseconds since January 1, 1970.
   • The second line is calling i18n.dateTime with some parameter.
     A search for i18n in the file structure (e.g. find /HCBv2/qml/ -iname i18n*) gives also /HCBv2/qml/qb/lang/I18n_nl_NL.qml. Looking at this file it is clear that the function ‘dateTimeEuropean’ is called with the same parameters, and some additional separators. The function ‘dateTimeEuropean’ is present in /HCBv2/qml/qb/lang/I18n.qml which was also one of the files returned from our search.
     
     The interesting part of I18n.qml is the comment that starts with ‘Date options’., and the ‘property’s below that.
     This should give you an idea how to modify the parameters to obtain a different string containing the date and/or time.
   • The third line is a bit similar to line two, with a slight change of parameter options.
   Let’s alter the look of the clock a bit, and implement the following.
   1. Copy the clock app to another app (myClock), and make it selectable from the GUI.
   2. Add seconds to the time display.
   3. In dimState (black and white) also show the ‘day of the week’.
   4. In dimState, show bigger hour:minutes, but show the seconds in a smaller font.
   1. Goal 1: copy the clock app to myClock app
      
      First copy the directory to another directory, and change the filenames.

      Code: Select all

      cd /HCBv2/qml/apps/
      cp -r clock/ myClock/
      chown -R 1351:513 myClock
      cd myClock
      mv ClockApp.qml MyClockApp.qml
      mv ClockTile.qml MyClockTile.qml
      cd /HCBv2/qml/apps/myClock/drawables
      mv clock.png myClock.png
      

      Now let’s change the content of the files to have a myClock app that behaves still the same like the original one.
      (I didn’t change the color (style) references)

      Code: Select all

      cd /HCBv2/qml/apps/myClock
      vi qmldir
      	change:	module apps.clock					to	module apps.myclock
      				ClockApp 1.0 ClockApp.qml			to	MyClockApp 1.0 MyClockApp.qml
      				ClockTile 1.0 ClockTile.qml		to	MyClockTile 1.0 MyClockTile.qml
      

      Code: Select all

      vi MyClockApp.qml
      	change:	id: clockApp											to	id: myClockApp
      				property url tileUrl : "ClockTile.qml";				to	property url tileUrl : "MyClockTile.qml";
      				property url thumbnailIcon: "drawables/clock.png";	to	property url thumbnailIcon: "drawables/myClock.png";
      				{thumbLabel: qsTr("Clock")						to	{thumbLabel: qsTr("myClock")
      

      Code: Select all

      vi MyClockTile.qml
      	change:	id: clockTile			to	id: myClockTile
      

      Next we need to get myclock visible in the GUI as one of the selectable tiles.
      (in below steps :77 will let vi jump to line 77. If you made changes before, or you are using a different version, it might be a different line.)

      Code: Select all

      vi /HCBv2/qml/qb/base/Globals.qml
      :77
      	add:	"myClock",			just after clock
      

      Now we restart the GUI and look if the changes resulted in an additional app to choose from.

      Code: Select all

       killall -9 qt-gui

      This should complete goal 1, and you now have an app named ‘myClock’ looking the same as ‘klok’.
      In the next steps we will use this app to alter the behavior.
      
      But first select this app on you ‘home’ screen, do it shows when the display goes in dim state.
   2. Goal 2: have the app also display seconds
      
      First look how other apps use this date and time function (grep -rin i18n /HCBv2/qml | grep secs).
      This gives a number of results with ‘| i18n.secs_no’. From the file /HCBv2/qml/qb/lang/I18n.qml we found that also i18n.secs_yes is an option. So let’s use that in the myclock app.
      
      Let us first add seconds to the time string (timeStr), and see the result.

      Code: Select all

      cd  /HCBv2/qml/apps/myClock/
      vi MyClockApp.qml
      	change:	timeStr = i18n.dateTime(now, i18n.time_yes);	to	timeStr = i18n.dateTime(now, i18n.time_yes | i18n.secs_yes);
      

      Now we restart the GUI and look if the result is what we want.

      Code: Select all

       killall -9 qt-gui

      The result looked ok until it became 20:00:00. A part of the 2 became invisible.
      Qt allows you to align qml elements using anchor properties.
      Read more about this in the Qt Documentation, more documentation.
      We will use this in our app.
      

      Code: Select all

      cd  /HCBv2/qml/apps/myClock/
      vi MyClockTile.qml
      :20
      	Remove:	anchors.centerIn: parent
      	Add:		anchors {
      					horizontalCenter: parent.horizontalCenter
      					horizontalCenterOffset: dimState ? 0 : 0
      					verticalCenter: parent.verticalCenter
      			}
      	Change:	font.pixelSize: dimState ? 65 : 50	to	font.pixelSize: dimState ? 60 : 50
      

      Now we restart the GUI to see the result.

      Code: Select all

       killall -9 qt-gui

      The last step made the time look centered, and fully visible.
   3. Goal 3: display ‘day of week (dow) during dim state’
      
      From the comments in /HCBv2/qml/qb/lang/I18n.qml we can determine that there are 3 options for Day of week.
      dow_no = don’t show the day of the week
      dow_short = the property’s near the top of the I18n.qml file show that there are two variants, daysShort (e.g. Mon.) and daysExtrShort (e.g. Mo). From the function ‘dateTimeEuropean’ we can see that the dayShort is used.
      dow_full = Also for the full representation of the day of week is shown near the top of the I18n.qml file.
      
      On the display I get the Dutch day name, so a translation is takes place.
      This is performed by /HCBv2/qml/qb/lang/lang_nl_NL.qm.
      ‘strings -n 2 /HCBv2/qml/qb/lang/lang_nl_NL.qm’ gives the English strings. Looking in the file you see that the Dutch strings are Unicode strings (before each letter there is a 0x00 character. This is because each character is actually two bytes long.)
      Example for Sunday:

      Code: Select all

           
       z o n d a g          Sunday    I18n 
      

      We will add another string to MyClockApp.qml that can be displayed with MyClockTile.qml.

      Code: Select all

      cd  /HCBv2/qml/apps/myClock/
      vi MyClockApp.qml
      :15
      	Add:	property string dayStr
      :25
      	Add:	dayStr  = i18n.dateTime(now, i18n.dow_full);
      

      Now we will use this string to display in dim state.

      Code: Select all

      cd  /HCBv2/qml/apps/myClock/
      vi MyClockTile.qml
      :40
      	Add:
              Text {                  
                      id:txtDay                   
                      text: app.dayStr            
                      color: colors.clockTileColor                     
                      anchors {                                
                      horizontalCenter: parent.horizontalCenter
                              baseline: parent.bottom
                              baselineOffset: -16           
                      }                                                               
                      horizontalAlignment: Text.AlignHCenter
                      font.pixelSize: 30             
                      font.family: qfont.regular.name
                      visible: dimState
              }
      

      Now we restart the GUI, and wait for the dim state, to see the result.

      Code: Select all

       killall -9 qt-gui

   4. Goal 4: show bigger hour:minutes, smaller seconds in dim state
      
      We will start with the changes of MyClockApp.qml.

      Code: Select all

      cd  /HCBv2/qml/apps/myClock/
      vi MyClockApp.qml
      :13
      	Add:	property string fullTimeStr
      			property string secondsStr
      :25
      	Add:		var fullTimeLength = 0;
      	Change:	timeStr = i18n.dateTime(now, i18n.time_yes | i18n.secs_yes);	to	fullTimeStr = i18n.dateTime(now, i18n.time_yes | i18n.secs_yes);
      	Add:		secondsStr = fullTimeStr.slice(-2);
      				fullTimeLength = fullTimeStr.length;
      				timeStr = fullTimeStr.substr(0,(fullTimeLength - 2));
      

      Now the changes to MyClockTile.qml

      Code: Select all

      cd  /HCBv2/qml/apps/myClock/
      vi MyClockTile.qml
      :16
      Comment out the whole block of code for txtTimeBig using /* <block of code> */
      	Add:
              Text {
                      id: txtTime
                      text: app.timeStr
                      color: colors.clockTileColor
                      anchors {
                              right: txtSeconds.left
                              verticalCenter: parent.verticalCenter
                      }
                      horizontalAlignment: Text.AlignHCenter
                      font.pixelSize: dimState ? 65 : 50
                      font.family: qfont.regular.name
              }
      
              Text {
                      id: txtSeconds
                      text: app.secondsStr
                      color: colors.clockTileColor
                      anchors {
                              bottom: txtTime.bottom
                              right: parent.right
                              rightMargin: dimState ? 0 : 15
                      }
                      font.pixelSize: dimState ? 45 : 50
                      font.family: qfont.regular.name
              }
      

      Now we restart the GUI, and wait for the dim state (or use the top-right icon to switch to dim state), to see the result.

      Code: Select all

       killall -9 qt-gui

The steps above should give you an idea how to get started to modify, and add your own qml tiles.

[wbmk]

@cygnusx

Thank you for providing the Kodi sample. I am looking into rooting my Toon and using it as a front end for kodi (playlist for music and selection of radio stations) and for controlling my FHEM setup.

I am new to qml... is there a visual editor that could be used, or are you using notepad++ ore something for editing?

And would it be possible to share the code for your own buienradar setup? I too have a pi running (with FHEM) and would like to set this up.

Regards, Wbmk

[Ierlandfan]

I was thinking of using the overlay (For example the "wat is Toon" tile) for displaying realtime messages
So if some message arrives, autostart overlay and display message. That's not very complicated but I need the way to autostart a tile.
Does anybody knows how to autostart a tile?