Jump to content

Simple Maths Example

Recommended Posts

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.





Link to post
Share on other sites

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;
Link to post
Share on other sites
  • 2 months later...

Here is a small sample of a more or less finished program. We are currently looking at converting much of our Delphi library to SmartMS.




This was converted from Delphi. The Tables screen is simply buttons and labels with CSS.

The robots are TW3sprites.


There were a few challenges that we had to overcome, nothing too major. It took me a while to realise that to get the sprite-sheet animating correctly the values had to be negative :)






Link to post
Share on other sites

> CHeers for that Igor, you must have a window less than 768 pixels high - in

> our case we can stipulate screen resolution so it won't present a

> problem in practice but I may figure out if it is possible to scale the

> entire form to fit all screens.


It's 1080 but windows scaling is 150% (I don't know how many people changes that from default 100).

Link to post
Share on other sites

Ah I see. In the Index.html I had



"meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes"/"


I thought that initial-scale would make it half size but it seems to be ignored. I have more to learn ;)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...