Jump to content


Photo

Simple Maths Example


  • Please log in to reply
10 replies to this topic

#1 Czar

Czar
  • Members
  • 165 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.

NWExercise.jpg

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.

 

cheers

 

http://numberworksnw...cise/index.html


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

#2 ielite

ielite
  • Members
  • 723 posts

Posted 05 June 2017 - 03:59 AM

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



#3 Czar

Czar
  • Members
  • 165 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

ielite
  • Members
  • 723 posts

Posted 05 June 2017 - 09:43 PM

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



#5 Czar

Czar
  • Members
  • 165 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.zindex:=2;
        FeedbackInst.setbounds(-19,25,30,30);
        FeedbackInst.OnLoad:=procedure (sender:TObject)
          Begin
            w3_setstyle(FeedbackInst.Handle,'-webkit-transition','opacity 0.5s ease-in'); //webkit
            w3_setstyle(FeedbackInst.Handle,'transition','opacity 0.5s ease-in'); //mozilla
            FeedbackInst.AlphaBlend:=True;
          end;
        FeedbackInst.loadfromurl('res/ballGreen.png');
        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;
begin
 for var i := GetChildCount - 1 downto 0 do
     if (GetChildObject(i) is tw3image) and (GetChildObject(i).TagValue=CNT_MyApp_Feedbackballs) then
      begin
        var img := tw3image(GetChildObject(i));
        img.fxmoveby(30,0,0.5);

        if img.Left > 190 then img.free;
      end;
end;

  • ielite likes this

#6 ielite

ielite
  • Members
  • 723 posts

Posted 05 June 2017 - 10:26 PM

Interesting...thanks for sharing



#7 Czar

Czar
  • Members
  • 165 posts

Posted 22 August 2017 - 12:36 PM

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.

http://numberworksnw.../zap/index.html

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


zap1.jpg

zap2.jpg
  • BobLawrence and Igor Savkic like this

#8 Igor Savkic

Igor Savkic
  • Members
  • 188 posts

Posted 22 August 2017 - 09:13 PM

Thanks for sharing, at my browser question is overlapping with status bar text.

I cannot upload file here, look it at https://postimg.org/image/b9k3b00ar/

#9 Czar

Czar
  • Members
  • 165 posts

Posted 22 August 2017 - 09:22 PM

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.

#10 Igor Savkic

Igor Savkic
  • Members
  • 188 posts

Posted 23 August 2017 - 12:34 AM

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

#11 Czar

Czar
  • Members
  • 165 posts

Posted 23 August 2017 - 01:54 AM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users