skip to Main Content

I’m new here. Just want to know if my idea is possible. What I want to do is:

  1. There is 2 pages, 1st page is for the buttons(next and prev) and the other one is for the presentation.

  2. I have many hidden divs on the presentation page where in when I click the next button the next div will be visible and when I click the prev buttton the prev div will be visible and other divs are hidden.

  3. I think you got the idea.

  4. It’s like a powerpoint Presentation but I don’t want my buttons to be seen by the audience so I moved it to a different page but it is connected to the presentation page which is the one who will be controlled by the buttons.

I lost my code before but I’ll try to remake it again. I’m Willing to learn new languages if needed, what I have knowledge are php, js, html, css 😅

3

Answers


  1. As I understand it, on your phone you need to have a page for managing the presentation site, which is open on your PC.

    To do this, you need to configure the backend using a programming language. This server will handle web socket connections between devices.

    You can first try to start learning node.js, which will help you with this

    Login or Signup to reply.
  2. There are a couple of ways to do this. I have two examples.

    1. Browser storage
      You could use your browsers local storage to make this. But you need to have two displays displaying two different browser windows from the same browser. Now when you update the local storage (e.g. localStorage.setItem("page", 5)), you’ll just need a listener on the other browser tab.
    2. API
      You could make a simple API, which is probably the best option. But again you will need two browser tabs and two displays. One tab on the display for your audience and one on yours. When you click on the button for the next side, your browser sends a signal to your api. this api stores this information. The tab for your audience could call this api a couple of times a second and do something with the return.

    hope I could help out 🙂

    Login or Signup to reply.
  3. I see what you mean,

    There are two methods you can use to achieve this:-

    1. Easy Method
    2. Hard Method(But this will give you what you are looking for)
    3. A Better way(will give you what you are looking for)

    Easy Method:

    The easy method would include rechanging your setup, you don’t need to have your buttons in another page(we will talk about this in the hard method).

    Instead, rechange your idea and design to use your keyboard buttons to switch from one div to the next. You can use event listeners to listen for your keyboard arrow keys to switch back and forth with different divs(Use ai to give you boilerplate code).

    Hard Method:

    This will get you exactly what you are looking for.

    You will need to have good knowledge about these provided below:

    • Websockets(you can use socket.io)
    • Backend( I recommend node.js with express.js)

    You can setup a backend to be the main gateway to implement the buttons to sent a req to the server api and then use websockets to connect to the presentation layer.

    The Better Method

    This could mean the presentation page constantly checking the state of the application. You would need to know about state management tool and have to change the value back and forth.

    And the presentation page would sent request recursively(consistently every 2-5 seconds) to see the state. If the state says "next" then the presentation will move to the next.

    However, this is not professionally recommended for big applications like when you work in big tech companies. But if you are a kid, and what to implement this idea. This could be the most practical way.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search