Jump to content

Create a news ticker


This topic is 1535 days old. Please don't post here. Open a new topic instead.

Recommended Posts

I have a FileMaker solution that powers an internal "TV network". It runs over Intel Compute Sticks which have FileMaker installed on them and are connected to TVs mounted to the wall throughout the facility. A FileMaker script runs through various layouts and steps thru records on each layout. This lets us show a calendar, weather report (in a web viewer), company news, birthdays, customer feedback, employee recognition, and pictures.

I would like to add a news ticker to the solution, like you'd see on CNN scrolling across the bottom.

I have a table with the news stories in it. Since you can't run more than once script at the same time, I have a script set on the server to step through the news stories. For each story it uses "set field" to put the story in the field one letter at a time, then cuts off the left side when it gets too long. I then set the solution to open a floating document window at the bottom to display the layout that has the new field on it.

In theory, it should then appear that the story scrolls across the screen. It doesn't really work. It is jumpy and sometimes just doesn't show at all.

This is the gist of the script for the ticker:

Loop
Set Variable [$message; Value: (news story)]
Set Variable [$letter; Value: 1]

Loop
Set Field [Data::News;Right(Data::News;68) & Middle ($message; $letter; 1)]
Commit Records/Requests
Refresh Window []
Pause/Resume Script [Duration (seconds): .05]
Set variable [$letter; Value: $letter+1]
Exit Loop If [length($message) < $letter]
End Loop

Set Field [Data::News;Right(Data::News;68) & "     |     "]
Commit Records/Requests
Go to Records/Requests [(If ( Get(RecordNumber ) = Get(FoundCount);1;Get(RecordNumber ) + 1)]
End Loop

I've tried it with various pause durations, with/without the refresh, and with/sithout the first Commit. Nothing works the way I want.


Has anyone successfully implemented such a thing?

 

 

Link to comment
Share on other sites

Ok, that helped. I went with this code I found:

 

"data:text/html," & "

<!DOCTYPE html>
<html>
<head>
<title>News Ticker Demo</title>
<style>
  @keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
  }
  .tcontainer{
    width: 100%;
    overflow: hidden;
  }
  .ticker-wrap {
    width: 100%;
    padding-left: 100%;
    background-color: #FFFFFF;
  }
  .ticker-move {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 30s;
  }
  .ticker-move:hover{
    animation-play-state: paused;
  }
  .ticker-item{
    display: inline-block;
    font-size: 3rem;
    padding: 0 2rem;
  }
</style>
</head>
<body>
  <div class=\"tcontainer\">
    <div class=\"ticker-wrap\">
      <div class=\"ticker-move\">
        <div class=\"ticker-item\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        <div class=\"ticker-item\">Aliquam consequat varius consequat.</div>
        <div class=\"ticker-item\">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
        <div class=\"ticker-item\">Pellentesque auctor molestie orci ut blandit.</div>
      </div>
    </div>
  </div>
</body>
</html>


"

Now, what would be the best way of replacing the "latin" placeholder text with news? My problem is that there can be anywhere from 5-200 news stories to put into the ticker and that the number of stories can change during the day. At first I thought I'd just brute force it and loop thru all the news stories and put them into one text field to scroll but I'm hoping there's a more "mathy" way of doing it...

Link to comment
Share on other sites

2 hours ago, Cable said:

what would be the best way of replacing the "latin" placeholder text with news?

There are several options to consider. Much depends on how often you need to do this. If it's only now and then, then looping is not a bad choice, because it puts all the required logic in a script and avoids adding fields and relationships to the schema.

Otherwise you could add a calculation field to the News table that wraps each story in a div element, and get them using either the List() function over a relationship or a summary field defined as List of [the calculation field].

  • Like 1
Link to comment
Share on other sites

18 minutes ago, comment said:

There are several options to consider. Much depends on how often you need to do this. If it's only now and then, then looping is not a bad choice, because it puts all the required logic in a script and avoids adding fields and relationships to the schema.

Otherwise you could add a calculation field to the News table that wraps each story in a div element, and get them using either the List() function over a relationship or a summary field defined as List of [the calculation field].

I'm going to try that. Attempt 1 failed but I think I was just trying to cram too much into one (I was putting all the stories in one div instead of breaking them out). Thx.

Link to comment
Share on other sites

It worked! I also wrote a calc to tweak the speed based on the total length of news items so it will dynamically adjust as stories are added during the day. Appreciate the help.

Link to comment
Share on other sites

  • 4 months later...

This topic is 1535 days old. Please don't post here. Open a new topic instead.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.