How can I create a navigational compass using Typescript and HTML

0 votes

I'm looking to display a compass heading using HTML, CSS, and Typescript for my Ionic project. I've got the heading available as a number between 0-360, and a true heading which is obviously 360.

How can I best go about doing this? I'd like it to be animated in real time.

A couple ideas:

  • Have a background image of a compass, overlay a needle image on the compass image and rotate that needle depending on the degree of heading.
  • Build out a circle and needle using CSS entirely, with no images, and use the same logic of rotation.
Jul 13 in TypeSript by Logan
• 2,140 points
23 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer

How can I define a type for a CSS color in TypeScript?

There was a proposal for a type of ...READ MORE

answered Jun 15 in TypeSript by Nina
• 3,020 points
11 views
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
219 views
0 votes
1 answer

How do I extend a TypeScript class definition in a separate definition file?

If you don't have control over the ...READ MORE

answered Jun 10 in TypeSript by Nina
• 3,020 points
170 views
0 votes
0 answers

How can I include pug templates in compiled typescript?

My nodejs based application uses Pug for ...READ MORE

Jul 13 in TypeSript by Logan
• 2,140 points
44 views
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31 in TypeSript by Nina
• 3,020 points
24 views
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,500 points
407 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,740 points

edited Jan 21, 2020 by Niroj 408 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,740 points

edited Jan 21, 2020 by Niroj 301 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP