Display complex mathematical equations in iOS 5.0 devices

Question

0.00/5 (No votes)

See more:

I am working on an app for iPhone and iPod Touch that has to show complex mathematical equations like algebraic, integration, summation formulas along with some text.

For that I have used Quartz2D and below is what I have created. Can anyone please verify if this is the correct procedure to draw an equation?

I have to show lots of text with inline equations (and that too dynamic) - I am sure using this procedure will be a task to make that thing dynamic.

- (void)drawRect:(CGRect)rect
{
// Left hand side Starts --
float xaxis = 3.0f;

// Before bracket
NSString *textString = @"L";
[textString drawAtPoint:CGPointMake(xaxis, 50.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

// Opening bracket
xaxis += 12.0f;
textString = @"(";
[textString drawAtPoint:CGPointMake(xaxis, 30.) withFont:[UIFont fontWithName:@"Helvetica" size:50]];

textString = @"N";
xaxis += 12.0f;
[textString drawAtPoint:CGPointMake(xaxis, 50.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

// Numerator part
unichar oneChar[] = {0x2206};
xaxis += 31.0f;
textString = getTextString(oneChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 37.) withFont:[UIFont fontWithName:@"Helvetica" size:22]];

unichar twoChar[] = {0x03C9};
xaxis += 15.0f;
textString = getTextString(twoChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 15.0f;
textString = @"k";
[textString drawAtPoint:CGPointMake(xaxis, 48.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

// Line
CGContextRef myContext = UIGraphicsGetCurrentContext();    
CGContextSetLineWidth(myContext, 2);
CGContextSetStrokeColorWithColor(myContext, [UIColor blackColor].CGColor);    
CGContextMoveToPoint(myContext, 45, 65);
CGContextAddLineToPoint(myContext, 110, 65);
CGContextStrokePath(myContext);

// Denominator part
xaxis -= 40.0f;
unichar threeChar[] = {0x03C9};
textString = getTextString(threeChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 15.0f;
textString = @"res";
[textString drawAtPoint:CGPointMake(xaxis, 74.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

xaxis += 18.0f;
unichar fourChar[] = {0x0028};
textString = getTextString(fourChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 5.0f;
unichar fiveChar[] = {0x03B8};
textString = getTextString(fiveChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

xaxis += 15.0f;
textString = @")";
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

// Closing bracket
xaxis += 8.0f;
textString = @")";
[textString drawAtPoint:CGPointMake(xaxis, 30.) withFont:[UIFont fontWithName:@"Helvetica" size:50]];

// Equal to sign
xaxis += 15.0f;
unichar sixChar[] = {0x003D};
textString = getTextString(sixChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 50.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

// Right hand side Starts --

// Numerator part
xaxis += 15.0f;
textString = @"sin";
[textString drawAtPoint:CGPointMake(xaxis, 42.) withFont:[UIFont fontWithName:@"Helvetica" size:17]];

xaxis += 20.0f;
textString = @"2";
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

// Inner opening bracket
xaxis += 10.0f;
textString = @"(";
[textString drawAtPoint:CGPointMake(xaxis, 37.) withFont:[UIFont fontWithName:@"Helvetica" size:22]];

xaxis += 8.0f;
textString = @"N";
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

xaxis += 18.0f;
unichar sevenChar[] = {0x03C0};
textString = getTextString(sevenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 40.) withFont:[UIFont fontWithName:@"Helvetica" size:17]];

xaxis += 12.0f;
unichar eightChar[] = {0x2206};
textString = getTextString(eightChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 36.) withFont:[UIFont fontWithName:@"Helvetica" size:21]];

xaxis += 15.0f;
unichar nineChar[] = {0x03C9};
textString = getTextString(nineChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 15.0f;
textString = @"k";
[textString drawAtPoint:CGPointMake(xaxis, 47.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

xaxis += 8.0f;
textString = @"/";
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:24]];

xaxis += 8.0f;
unichar tenChar[] = {0x03C9};
textString = getTextString(tenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 15.0f;
textString = @"res";
[textString drawAtPoint:CGPointMake(xaxis, 48.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

xaxis += 18.0f;
textString = @"(";
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 5.0f;
unichar elevenChar[] = {0x03B8};
textString = getTextString(elevenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

xaxis += 12.0f;
textString = @")";
[textString drawAtPoint:CGPointMake(xaxis, 38.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

// Inner closing bracket
xaxis += 6.0f;
textString = @")";
[textString drawAtPoint:CGPointMake(xaxis, 37.) withFont:[UIFont fontWithName:@"Helvetica" size:22]];

// Line    
CGContextSetLineWidth(myContext, 2);
CGContextSetStrokeColorWithColor(myContext, [UIColor blackColor].CGColor);    
CGContextMoveToPoint(myContext, 138, 65);
CGContextAddLineToPoint(myContext, 318, 65);
CGContextStrokePath(myContext);

// Denominator part
xaxis -= 175.0f;    
textString = @"N";
[textString drawAtPoint:CGPointMake(xaxis, 65.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

xaxis += 18.0f;
textString = @"2";
[textString drawAtPoint:CGPointMake(xaxis, 63.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

xaxis += 8.0f;
textString = @"sin";
[textString drawAtPoint:CGPointMake(xaxis, 68.) withFont:[UIFont fontWithName:@"Helvetica" size:17]];

xaxis += 20.0f;
textString = @"2";
[textString drawAtPoint:CGPointMake(xaxis, 63.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

// Inner opening bracket
xaxis += 10.0f;
textString = @"(";
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica" size:22]];

xaxis += 8.0f;
unichar twelveChar[] = {0x03C0};
textString = getTextString(twelveChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 68.) withFont:[UIFont fontWithName:@"Helvetica" size:17]];

xaxis += 12.0f;
unichar thirteenChar[] = {0x2206};
textString = getTextString(thirteenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 65.) withFont:[UIFont fontWithName:@"Helvetica" size:21]];

xaxis += 15.0f;
unichar fourteenChar[] = {0x03C9};
textString = getTextString(fourteenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 67.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 15.0f;
textString = @"k";
[textString drawAtPoint:CGPointMake(xaxis, 75.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

xaxis += 8.0f;
textString = @"/";
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica" size:24]];

xaxis += 8.0f;
unichar fifteenChar[] = {0x03C9};
textString = getTextString(fifteenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 67.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 15.0f;
textString = @"res";
[textString drawAtPoint:CGPointMake(xaxis, 75.) withFont:[UIFont fontWithName:@"Helvetica" size:12]];

xaxis += 18.0f;
textString = @"(";
[textString drawAtPoint:CGPointMake(xaxis, 66.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

xaxis += 5.0f;
unichar sixteenChar[] = {0x03B8};
textString = getTextString(sixteenChar, 1);
[textString drawAtPoint:CGPointMake(xaxis, 66.) withFont:[UIFont fontWithName:@"Helvetica-Oblique" size:20]];

xaxis += 12.0f;
textString = @")";
[textString drawAtPoint:CGPointMake(xaxis, 66.) withFont:[UIFont fontWithName:@"Helvetica" size:20]];

// Inner closing bracket
xaxis += 6.0f;
textString = @")";
[textString drawAtPoint:CGPointMake(xaxis, 64.) withFont:[UIFont fontWithName:@"Helvetica" size:22]];

// Extra text for information
xaxis = 6.0f;
textString = @"Above is the example of an equation drawn using";
[textString drawAtPoint:CGPointMake(xaxis, 120.) withFont:[UIFont fontWithName:@"Helvetica" size:14]];
xaxis = 6.0f;
textString = @"Quartz2D";
[textString drawAtPoint:CGPointMake(xaxis, 140.) withFont:[UIFont fontWithName:@"Helvetica" size:14]];

}

static NSString *getTextString(unichar chars[], int charLength)
{   
NSString *uniString = [NSString stringWithCharacters:chars length: charLength];
return uniString;
}

Posted 13-Jan-12 4:34am

Member 8547046

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2012-01-13T08:56:00

For complex mathematical expressions, I would advise to use the markup language which is one the the W3C standards, called MathML, please see:
http://en.wikipedia.org/wiki/Mathml[^],
http://www.w3.org/Math/[^].

Apparently, as this approach is based on the standard, your this approach in multi-platform, which I think is very important for smartphone systems like iOS.

Moreover, if you browser supports relevant set of HTML5 features, you can directly embed MathML markup in the HTML markup, please see:
http://en.wikipedia.org/wiki/HTML5[^],
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29[^].

You can use this approach with iPhone applications which does not have to be the Web-based. You can use Apple WebKit with iOS, please see:
http://en.wikipedia.org/wiki/WebKit[^],
http://www.webkit.org/[^],
http://en.wikipedia.org/wiki/IOS[^],
http://www.apple.com/ios/[^].

Finally, this is a complete sample of HTML file with MathML markup embedded:

XML

<html>
    <head>
        <title>MathML sample</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
<body>

<h2>MathML sample:</h2>
<p><big><big>
<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo form="prefix">&#x2212;<!-- &minus; --></mo>
        <mi>b</mi>
        <mo>&#x00B1;<!-- &PlusMinus; --></mo>
        <msqrt>
          <msup>
            <mi>b</mi>
            <mn>2</mn>
          </msup>
          <mo>&#x2212;<!-- &minus; --></mo>
          <mn>4</mn>
          <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
          <mi>a</mi>
          <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
          <mi>c</mi>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>&#x2062;<!-- &InvisibleTimes; --></mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>
</big></big></p>

</body>
</html>

—SA