Jump to content


Simple Maths Example

  • Please log in to reply
5 replies to this topic

#1 Czar

  • Members
  • 109 posts

Posted 05 June 2017 - 01:59 AM

I have put together my first proper SMS project. It looks pretty trivial but it does have a quite a few features that are vital to what we would like to do with SMS.


We currently develop and maintain a large library of maths and English exercises for kids from 5 to 15 years. Currently 99% is written in Delphi. We would like to expand online and possibly convert a significant amount of our software.


In this case we have a simple exercise that talks to an infobar. The infobar handles feedback to the student and can store and retrieve data from a database.


The infobar along the bottom is in an iframe that is separate from the exercise. The huge benefit is that we can have hundreds of exercises and only one infobar to change. The two parts talk using messaging (in beta RTL).


I have made it so that the exercise scales to the window.


Finally, I grouped the essential elements of the UI, in this case just the editbox and question label, onto a transparent panel. The panel is "zoomed" based on the height of the window compared to a design time norm. This means we can develop for today's monitors but if 4k and 8k monitors become the norm then the panel and its contents will expand in size.


I am happy to discuss or share some code if it helps anyone with a particular issue.





  • Jørn E. Angeltveit, ielite and Nico Wouterse like this

#2 ielite

  • Members
  • 691 posts

Posted 05 June 2017 - 03:59 AM

Did you do this as a canvas /graphics application or a visual components project?

#3 Czar

  • Members
  • 109 posts

Posted 05 June 2017 - 04:18 AM

It uses visual components only. My next step is to try a canvas based application

#4 ielite

  • Members
  • 691 posts

Posted 05 June 2017 - 09:43 PM

i would be interested in how you did the balls at the bottom

#5 Czar

  • Members
  • 109 posts

Posted 05 June 2017 - 10:16 PM

The balls are TW3IMages sandwiched between a background and a foreground image. The foreground image is a PNG with the hole 

        var FeedbackInst:= tw3image.create(self);
        FeedbackInst.OnLoad:=procedure (sender:TObject)
            w3_setstyle(FeedbackInst.Handle,'-webkit-transition','opacity 0.5s ease-in'); //webkit
            w3_setstyle(FeedbackInst.Handle,'transition','opacity 0.5s ease-in'); //mozilla
        FeedbackInst.tagvalue:= CNT_MYAPP_FeedbackBalls;
        FeedbackInst.fxMoveBy(30,0, 0.5);

So I basically create the image out of sight and then move them right. 


The existing balls are set to move before the new ball is create


procedure TForm1.ShiftFeedbackBalls;
 for var i := GetChildCount - 1 downto 0 do
     if (GetChildObject(i) is tw3image) and (GetChildObject(i).TagValue=CNT_MyApp_Feedbackballs) then
        var img := tw3image(GetChildObject(i));

        if img.Left > 190 then img.free;

  • ielite likes this

#6 ielite

  • Members
  • 691 posts

Posted 05 June 2017 - 10:26 PM

Interesting...thanks for sharing

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users