Software: modifications and extensions Toon

Everything about software tools, new software development and toolchains. For developers, mostly.

Moderator: marcelr

Software: modifications and extensions Toon

Postby marcelr » Tue May 31, 2016 9:20 pm

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

grtz,

marcelr
marcelr
Advanced Member
Advanced Member
 
Posts: 934
Joined: May 2012
Location: Ehv

Re: Software: modifications and extensions Toon

Postby Ierlandfan » Mon Jun 06, 2016 6:58 pm

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.
Ierlandfan
Member
Member
 
Posts: 126
Joined: October 2013

Re: Software: modifications and extensions Toon

Postby RDNZL » Mon Jun 06, 2016 7:20 pm

+1 installing a Dahua door station soon, this would be very nice feature, if not video capable an image capture will do.
Regards, Ron.
User avatar
RDNZL
Forum Moderator
Forum Moderator
 
Posts: 994
Joined: September 2006
Location: Dordrecht, The Netherlands

Re: Software: modifications and extensions Toon

Postby cygnusx » Mon Jun 06, 2016 8:03 pm

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
cygnusx
Starting Member
Starting Member
 
Posts: 48
Joined: April 2015

Re: Software: modifications and extensions Toon

Postby RdP » Sun Jun 12, 2016 11:06 am

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,
Rien
User avatar
RdP
Advanced Member
Advanced Member
 
Posts: 979
Joined: May 2006
Location: Netherlands

Re: Software: modifications and extensions Toon

Postby cygnusx » Fri Jun 17, 2016 12:34 pm

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. :)
cygnusx
Starting Member
Starting Member
 
Posts: 48
Joined: April 2015

Re: Software: modifications and extensions Toon

Postby BrainHunt » Thu Jun 30, 2016 10:51 am

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 8) )

Thanks in advance for your help!
BrainHunt
Starting Member
Starting Member
 
Posts: 19
Joined: June 2016

Re: Software: modifications and extensions Toon

Postby cygnusx » Wed Jul 20, 2016 10:01 am

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.
cygnusx
Starting Member
Starting Member
 
Posts: 48
Joined: April 2015

Re: Software: modifications and extensions Toon

Postby RomMon » Tue Oct 04, 2016 8:25 pm

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
Starting Member
Starting Member
 
Posts: 39
Joined: August 2016

Startup and shutdown scripts

Postby RomMon » Fri Oct 07, 2016 9:01 pm

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
Starting Member
Starting Member
 
Posts: 39
Joined: August 2016

Enable publickey authentication for ssh access

Postby RomMon » Fri Oct 07, 2016 9:30 pm

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).
RomMon
Starting Member
Starting Member
 
Posts: 39
Joined: August 2016

Re: Software: modifications and extensions Toon

Postby Ierlandfan » Thu Oct 20, 2016 5:57 pm

@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.
Ierlandfan
Member
Member
 
Posts: 126
Joined: October 2013

Qml modifications first steps, myClock

Postby RomMon » Mon Oct 24, 2016 11:04 pm

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

  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.
Attachments
myClock.zip
the final files so you can peak, compare for typo's. (or just install, and see if you like it).
(4.85 KiB) Downloaded 144 times
Last edited by RomMon on Sat Dec 31, 2016 10:43 pm, edited 2 times in total.
RomMon
Starting Member
Starting Member
 
Posts: 39
Joined: August 2016

Re: Software: modifications and extensions Toon

Postby wbmk » Sun Nov 13, 2016 4:17 pm

@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
wbmk
Starting Member
Starting Member
 
Posts: 24
Joined: November 2016

Re: Software: modifications and extensions Toon

Postby Ierlandfan » Mon Nov 14, 2016 9:32 am

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?
Ierlandfan
Member
Member
 
Posts: 126
Joined: October 2013

Next

Return to Toon software development

Who is online

Users browsing this forum: No registered users and 0 guests