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, 2022 in TypeSript by Logan
• 2,140 points
453 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, 2022 in TypeSript by Nina
• 3,060 points
3,294 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, 2022 in TypeSript by Nina
• 3,060 points
5,525 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, 2022 in TypeSript by Nina
• 3,060 points
2,143 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, 2022 in TypeSript by Logan
• 2,140 points
1,023 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, 2022 in TypeSript by Nina
• 3,060 points
404 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,510 points
746 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,880 points

edited Jan 21, 2020 by Niroj 798 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,880 points

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