Hello everyone, I’m happy to announce that the new Perspective Equipment Schedule will now be available in the current nightly builds.
The Perspective Equipment Schedule is a component whose primary purpose is to convey equipment scheduling information in a concise and easily digestible format. Equipment scheduling includes the familiar Vision counterparts such as - equipment status, production schedules, production status, and scheduled and unexpected downtime. The Equipment Schedule like our many time related components are time zone, locale and DST aware.
The Perspective Equipment Schedule has been constructed in a way to make migration easier from and be familiar to Vision but also allow the powerful styling tools of Perspective. All the familiar elements such as break events and downtime events in Vision will be available in the new Perspective Equipment Schedule.
The Perspective Equipment Schedule will now display in a grid display allowing for a scrollable view. In addition, we have added the new feature of zooming into the Equipment Schedule to take advantage of this new grid display. This will allow users to manually set a zoom level as well as setting a default zoom level when the schedule loads.
The Perspective Equipment Schedule now displays a specific UI to help users distinguish if a set of events are overlapping. A dropdown menu is provided so users can view each event separately within that range.
With the Perspective Equipment Schedule we have kept the familiar UI interactions with the Vision counterpart such as moving and resizing events but have also added a few new additions such as adding events and deleting events. There is also the functionality of grid snapping to allow for more precise movement of events within the grid. This can be achieved by holding down the Alt key (or equivalent) and performing the event action. All these events can be enabled and disabled with their respective toggle props.
Add:
Move:
Resize:
Delete:
As a note, these events do not update the property tree on their own. It is up to the user to implement the desired functionality when the events are fired. The component events that are fired from the appropriate UI interactions are as follows - onAddEvent, onMoveEvent, onResizeEvent, onDeleteEvent. The following code snippets have been provided as a general starting point:
onAddEvent:
from random import random, randint
format = "yyyy-MM-dd HH:mm:ss z"
locale = "en-us"
scheduled = self.props.scheduledEvents
r = random() * 255
g = random() * 255
b = random() * 255
color = "rgb(" + str(r) + "," + str(g) + "," + str(b) + ")"
percentDone = randint(0, 100)
leadTime = randint(300, 6000)
item = {
"endDate": system.date.parse(event.end, format, locale),
"itemId": event.itemId,
"startDate": system.date.parse(event.start, format, locale),
"eventId": "event_" + str(randint(1000, 10000)),
"backgroundColor": color,
"percentDone": percentDone,
"leadTime": leadTime
}
scheduled.append(item)
onMoveEvent/onResizeEvent:
format = "yyyy-MM-dd HH:mm:ss z"
locale = "en-us"
scheduled = self.props.scheduledEvents
for count, toFind in enumerate(scheduled):
if toFind.eventId == event.eventId and event.itemId == toFind.itemId:
toFind.startDate = system.date.parse(event.start, format, locale)
toFind.endDate = system.date.parse(event.end, format, locale)
onDeleteEvent:
scheduled = self.props.scheduledEvents
format = "yyyy-MM-dd HH:mm:ss z"
locale = "en-us"
for count, toFind in enumerate(scheduled):
if toFind.eventId == event.eventId and toFind.itemId == event.itemId:
del scheduled[count]
break
Finally, the Perspective Equipment Schedule allows for fine-tuning of customization through the provided style properties as well as providing numerous entry points for theming.
Dark Theme:
Various Styling:
That wraps up the preview for the Perspective Equipment Schedule. Feel free to give this component a go and post down any feedback down below. Thank you!