Ars Futura logo

Ars Futura

Creating Custom Map Markers for Android Development

Many Android mobile apps leverage the Google Maps API, which offers plenty of features that can be customized to meet specific needs. From adjusting map styles and colors to tailoring roads and labels, developers have extensive control over the visual elements. While these default customization options are often sufficient, there are scenarios where the out-of-the-box features fall short.

So, when dealing with mobile app map markers, we can use the default location markers provided by Google and tailor their attributes, such as color, opacity, and associated data. Alternatively, we can substitute the default marker image with a personalized one using the BitmapDescriptorFactory class. In this blog, we’ll explore how that could be achieved, and if you’d like to know how to do it yourself, keep on reading!

Let's begin by presenting a scenario where you’d need such customization.

Imagine we're developing a delivery app that involves various markers based on specific data for each location. 

The four distinct markers we'll need are:

 Marks the depot, serving as both the initial and final stop.

 Indicates a location the driver must visit, featuring a sequence number in the center to denote the delivery order. Its color varies based on the delivery status: green for on-time, yellow for potential delay, and red if the delivery is at risk of being late.

 Similar to the unfinished task, but with a checkmark replacing the sequence number.

 Marks a location where the driver can restock its inventory.

In this post, we'll explore how to implement such a customization to enhance the functionality of our delivery app.

We'll start by implementing Google Maps into our project. To achieve this we'll need to log in to Google Developer Console, create a new project, and generate an API key.

We'll add the Google Maps dependency into our module (app-level) 

 file along with Kotlin extensions for the Google Maps SDK.

implementation("com.google.maps.android:maps-ktx:5.0.0")

implementation("com.google.android.gms:play-services-maps:18.2.0") 

 layout will have a Google Maps fragment. Since data binding will be used throughout this project, everything will be wrapped up inside the 

<?xml version="1.0" encoding="utf-8"?>


<layout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools">



   <androidx.fragment.app.FragmentContainerView

       android:id="@+id/mapFragment"

       android:name="com.google.android.gms.maps.SupportMapFragment"

       android:layout_width="match_parent"

       android:layout_height="match_parent"

       tools:context=".MapsActivity" />


</layout>

Assuming all the configurations are accurate, launching the app at this point will display the map.

The next step is to create a map marker object. This will contain all the information we need to create our map markers.

data class MapMarkerObject(
	val sequenceId: Int,
	val completed: Boolean = false,
	val depot: Boolean = false,
	private val delay: Delay = Delay.ON_TIME,
	val category: Category = Category.MAP_MARKER,
	val locationName: String = "",
	val coordinates: LatLng
) {

	val outerRing: Int
    	get() = if (shouldShowIcon()) color else R.color.white

	val innerRing: Int
    	get() = if (shouldShowIcon()) R.color.white else color

	val drawable: Int
    	get() = if (depot) R.drawable.ic_depot else when (category) {
        	Category.RESTOCK -> R.drawable.ic_refresh
        	else -> R.drawable.ic_check
    	}

	fun shouldShowIcon() = completed || depot || category == Category.RESTOCK

	val color: Int
    	get() = if (depot) R.color.depot else when (delay) {
        	Delay.DELAY_AT_RISK -> R.color.at_risk
        	Delay.DELAY_LATE -> R.color.delayed
        	else -> R.color.on_time
    	}
}

enum class Category {
	MAP_MARKER, PARKING, RESTOCK
}

enum class Delay {
	ON_TIME, DELAY_AT_RISK, DELAY_LATE

The project will include the following color palette:

<color name="black">#FF000000</color>

<color name="white">#FFFFFFFF</color>



<color name="on_time">#52BFAB</color>

<color name="at_risk">#FFC775</color>

<color name="delayed">#F35627</color>


<color name="depot">#83A3A3A3</color> 

We're almost ready to start adding our map markers! But before that, we'll need to create an XML layout for these markers.

Now that we're all set up, we can start adding our markers.

Since we have added the KTX library to our project, we're gonna take advantage of several Kotlin features.

, we can simply copy and paste the code snippet provided in the 

lifecycleScope.launch {

   lifecycle.repeatOnLifecycle(Lifecycle.State.CREATED) {

       val mapFragment: SupportMapFragment? =

           supportFragmentManager.findFragmentById(R.id.map) as? SupportMapFragment

       val googleMap: GoogleMap? = mapFragment?.awaitMap()

   }

}

Next, we're gonna create some dummy data for our markers:

private fun getMapMarkers(): List<MapMarkerObject> {

   val marker1 = MapMarkerObject(

       1,

       locationName = "Arena Centar", coordinates = LatLng(45.77, 15.93)

   )

   val marker2 = MapMarkerObject(

       2, completed = true,

       category = Category.RESTOCK,

       locationName = "Avenue Mall", coordinates = LatLng(45.77, 15.97)

   )

   val marker3 = MapMarkerObject(

       0, depot = true,

       locationName = "Ars Futura", coordinates = LatLng(45.79, 15.95)

   )

   val marker4 = MapMarkerObject(

       3,

       delay = Delay.DELAY_AT_RISK,

       locationName = "Supernova Garden Mall", coordinates = LatLng(45.83, 16.04)

   )

   val marker5 = MapMarkerObject(

       4,

       delay = Delay.DELAY_LATE,

       locationName = "City Center one West", coordinates = LatLng(45.79, 15.88)

   )

   val marker6 = MapMarkerObject(

       5, completed = true,

       locationName = "City Center one East", coordinates = LatLng(45.80, 16.05)

   )

   val marker7 = MapMarkerObject(

       6, completed = true,

       delay = Delay.DELAY_LATE,

       locationName = "Westgate Shopping City", coordinates = LatLng(45.87, 15.82)

   )

   return listOf(marker1, marker2, marker3, marker4, marker5, marker6, marker7)

}

Adding a custom map marker can be done using the 

lifecycleScope.launch {

   lifecycle.repeatOnLifecycle(Lifecycle.State.CREATED) {

       val mapFragment: SupportMapFragment? =

       supportFragmentManager.findFragmentById(R.id.mapFragment) as? SupportMapFragment

       googleMap = mapFragment?.awaitMap()



       for (mapMarker in getMapMarkers()) {

           googleMap?.addMarker {

               position(mapMarker.coordinates)

               title(mapMarker.locationName)

           }

       }

   }

}

By launching the app now, we can see markers on our map. There are two problems we need to fix next - we're using the default marker icon and those markers are not centered.

Let's start by adding two new methods. The first one will convert the device-independent pixels to pixels, and the second one will be used to convert our XML layout into a bitmap image.

fun dpToPx(dp: Int): Int {

   return (dp * Resources.getSystem().displayMetrics.density).toInt()

}




private fun getMarkerBitmapFromView(marker: MapMarkerObject): Bitmap {

   val markerBinding: MapMarkerBinding = DataBindingUtil.inflate(

       layoutInflater

       R.layout.map_marker,

       binding.mapFragment,

       false

   )

   markerBinding.mapMarker = marker

   markerBinding.lifecycleOwner = this

 markerBinding.customMarkerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED)

   markerBinding.customMarkerView.layout(0, 0, dpToPx(MAP_MARKER_SIZE), dpToPx(MAP_MARKER_SIZE))

   markerBinding.linearLayout.layout(

       dpToPx(MAP_MARKER_STROKE), dpToPx(MAP_MARKER_STROKE),

       dpToPx(MAP_MARKER_SIZE - MAP_MARKER_STROKE),

       dpToPx(MAP_MARKER_SIZE - MAP_MARKER_STROKE)

   )



   val returnedBitmap = Bitmap.createBitmap(

       dpToPx(MAP_MARKER_SIZE), dpToPx(MAP_MARKER_SIZE),

       Bitmap.Config.ARGB_8888

   )

   val canvas = Canvas(returnedBitmap)

   canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_IN)


   val drawable: Drawable = markerBinding.customMarkerView.background

   drawable.draw(canvas)

   markerBinding.customMarkerView.draw(canvas)

   returnedBitmap.compress(Bitmap.CompressFormat.PNG, 100, ByteArrayOutputStream())

   return returnedBitmap

}

The parameters to the layout are relative to the parent view’s upper left corner. X increases as we move to the right and Y increases as we move down. After we set up our layouts, we need to create a bitmap using the desired height/width. Next, we create a canvas that provides the means to draw on a bitmap, we draw on that canvas, and compress the bitmap into PNG to reduce its size.

We’re all set! Now we can start creating our custom markers. We’ll extract the addMarker method and add an icon using our 

private fun addAssignmentMarker(mapMarkerObject: MapMarkerObject) {
	googleMap?.addMarker {
    	position(mapMarkerObject.coordinates)
        	icon(BitmapDescriptorFactory.fromBitmap(getMarkerBitmapFromView(mapMarkerObject)))
    	title(mapMarkerObject.locationName)
	}
}


The only problem we have right now is that our marker icons are not centered and we’re zoomed out way too far. We’ll fix that by adding bounds and re-centering the camera.

lifecycleScope.launch {
	lifecycle.repeatOnLifecycle(Lifecycle.State.CREATED) {
    	val mapFragment: SupportMapFragment? =
        supportFragmentManager.findFragmentById(R.id.mapFragment) as? SupportMapFragment
    	googleMap = mapFragment?.awaitMap()

    	val builder = LatLngBounds.Builder()

    	for (mapMarker in getMapMarkers()) {
        	builder.include(mapMarker.coordinates)
        	addAssignmentMarker(mapMarker)
    	}
    	val bounds = builder.build()
    	val cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, 80)

    	googleMap?.moveCamera(cameraUpdate)
	}
}


Centering the camera is done in three steps. First, we need to create a 

 builder and add all of the marker coordinates into it. Then, we create a 

object containing those bounds and some padding. Lastly, move the camera using the moveCamera method and the 

If all of the steps are completed, your map should have seven custom map markers. Clicking on a custom marker will recenter the map to that marker and display a default info window containing the location name.

Google Maps offers a versatile toolkit for users to enhance their navigation, exploration, and communication. Throughout this blog, we’ve covered information on how to set up Google Maps and add default and custom Google Maps markers. Whether it’s for business, events, or personal use, understanding how to customize map markers enables us to create more intuitive and efficient mapping experiences.

A simple guide to creating custom markers for the Google Maps API

Creating Custom Markers for Google Maps – for Android Development

Roza Zanini Mozara

Financial Times 10000 Ars Futura 2024

 has listed Ars Futura as one of the fastest-growing companies in Europe, earning us the spot on the 

The FT1000 list is an annual ranking of the fastest-growing European companies, organized and compiled by the Financial Times and Statista. The selected organizations are based on their revenue growth rate over a three-year period, so in this case, from the beginning of 2019 to the end of 2021. The growth must be primarily organic, meaning it’s acquired internally, not achieved through acquisitions or outside investment. 

(revenue2022/revenue2019) - 1 = Growth rate.

In this, 8th, annual ranking of Europe’s fastest-growing businesses, we’ve ranked as 

 in the overall ranking (placing us 49 spots higher than in 2022), an awesome place among some really amazing fast-growth companies! Our absolute growth rate from the beginning of 2019 to the end of 2021 was 

, more than doubling in size. A nice and steady growth rate! 

“It's great to be recognized by the Financial Times, especially for the second time. It's a testament not just to our growth in numbers and revenue, but also to the quality of the work we put out there and the partnerships we build. This award belongs to all of us at Ars Futura. Here's to pushing boundaries, together.” 

We’ve come a long way in these 11 years, but none of it would have happened without our amazing team. Without their talent, ambition, hard work, and dedication, we wouldn’t be where we are today. 

Pop the confetti! 🎊

Ars Futura Listed in Financial Times Among Europe’s 1000 Fastest-Growing Companies

Sanja Karan

Mental Health and Employee Wellbeing at Ars Futura

A little over a year ago, we introduced free and unlimited psychotherapy as one of the benefits for all Ars Futura employees. Being a part of Ars Futura’s HR team, I must admit, it's been one of my favorite initiatives in the last three years since I joined the company. To mark the anniversary, I've decided to put pen to paper and detail the journey – from idea to implementation, as well as the benefit reception among our team.

Let's begin with the starter kit, the prerequisites when introducing psychotherapy as a benefit in any company:

There isn’t an HR person out there who hasn't had a conversation with a colleague where private information or problems were shared. And as an HR person, you can only really listen. There's always a lingering sense of bitterness after such conversations and a desire to help your colleague in some other way, aside from just listening. That feeling is essential for a 'people first' mindset, as I mentioned. Introducing psychotherapy as a benefit requires, above all, genuine care for the well-being of employees in your company.

That's kind of where it all started for us. With discussions about wanting to support our colleagues who are struggling or going through tough times and wanting to talk to someone about it. 

This brings us to another point in the starter kit – "Management that gives a damn".

No benefit that the HR department in any company comes up with and wants to push forward will succeed if we're not on the same page with the management about the kind of environment we want to build for our employees. 

Once we got the green light from our management, we started researching therapists and meeting with them for a vibe check. Ultimately, we selected three who met our criteria. 

We assembled the list of psychotherapists we spoke with based on recommendations. Every member of our Human Resources team knows someone who has been trained in practicing a particular psychotherapeutic approach, so we had sources we trusted.

A mix of objective and subjective criteria guided our final selection. 

 included the desire to have therapists practicing different therapeutic approaches (cognitive behavioral therapy (CBT) and gestalt) and a combination of female and male therapists available. 

 relate to how well we know the people at Ars Futura (and since we're still a pretty small company, we know them quite well), and based on that, we assessed which of the psychotherapists we talked with would be most liked and trusted by them. 

Honestly, we were a little worried about the number of people that would 

 use this benefit. The contract between Ars Futura and the therapists is regulated so that the therapists send an invoice with the number of clients they've seen and sessions they've conducted at the end of the month. Without specifying gender or names, of course. For us, anonymity needed to be guaranteed. Despite this, there was a fear that the benefit might be underused due to the lingering stigma surrounding therapy. Especially as some individuals may worry about the disclosure of their use of therapy services.

Fortunately, those fears didn't come true, and this is where the third point in the starter kit, "Established psychological safety," came to our rescue. 

To deepen our employees' understanding of psychotherapy and motivate those who were still hesitant about therapy, we took a few additional steps. 

We organized a meeting for the entire company, during which each of our three selected therapists introduced themselves and talked a bit more about the psychotherapeutic approach they practice. The aim was to make our team associate names with faces, making it easier for them to reach out and schedule therapy sessions. Additionally, we added a document to our internal handbook where we elaborately explained Cognitive Behavioral Therapy and Gestalt therapy, highlighting how they approach a problem in different ways. Through all these steps, we emphasized the anonymity of therapy and how individual therapy would be a safe space for anyone who chooses it.

When we introduced the psychotherapy benefit a year ago, we had 56 employees (now we're at an even 60). The total number of attendees who went to at least one therapy session with a therapist (although most have attended multiple sessions) is 20. 

About 30% of the company has tried psychotherapy, and we think that's a really good indicator of the benefit's success.

 It’s the first (and probably only) time we can say people are just numbers, as all the personal information is 100% anonymous.

Another thing to note when it comes to numbers is that we’ve implemented this benefit with an 

unlimited number of therapy sessions – Ars Futura covers all expenses

We generally pay attention to how many surveys we send and how often we send them to Ars Futura employees, to inquire about different matters. We don’t want to be overly repetitive, although we genuinely want to know what people have to say about various topics. Because of that, we conducted satisfaction surveys on the psychotherapy benefit only at two points since its introduction (every six months).

The average satisfaction rating with the therapists and the effectiveness of the therapy is 4.42 (out of five), and the comments are really positive.

All in all, we’re really happy with how this whole process turned out. It’s a win-win situation – some of our colleagues have a higher quality of life because of this benefit and we have happier employees. We hope it will also come in handy for some who haven't tried it yet if they ever need it. And finally, I'm glad we checked all the boxes from the starter kit so that free psychotherapy and its application truly came to life at Ars Futura.

Let's talk mental health and employee wellbeing

Employee Wellbeing in Focus: Free Psychotherapy as a Workplace Benefit

Lea Metličić

If you’ve ever managed a website that requires manual content updates, you know the struggle of acquiring developer hours so they can help you add or fix a chuck of text or a block on that same website.

Although this song and dance might seem like an integral part of every web development project, it doesn’t have to be! There is a better and easier way and it usually begins with the implementation of a content management system or CMS. A CMS is software that can help you add, manage, change, fix, or update any piece of content on your website, without code or technical knowledge.

a CMS enables you to create content without necessarily creating any code

All this to say that choosing a good CMS can significantly impact the performance and flexibility of your website.

A quick and easy way to ensure that you can enrich your website with content is to implement a headless content management system.

Unlike traditional CMS solutions, a headless CMS separates the Front-End presentation layer from the Back-End content management, making it easy to add, change, and update any block or text you might need. At its core, a headless CMS separates the content creation and storage process from the way content is presented to users.

This separation of Front-End and Back-End enables a more efficient development process in many ways.

Firstly, because of a headless CMS, developers can work separately on Front-End and Back-End, allowing for parallel work processes to happen at the same time and making your deployment cycles much speedier.

Secondly, it promotes a more agile and iterative approach to web development, enabling teams to respond quickly to feedback or changing business requirements.

Lastly, a headless CMS facilitates a more diverse ecosystem of tools and services. Developers can choose the best-in-class tools for their specific needs, integrating them into the content management workflow. 

A headless CMS is really great at scaling content across different channels and devices, ensuring a consistent user experience. This makes it possible for users to interact with your content on their preferred device while you maintain a strong online presence and engage with them wherever they are.

Content reuse is another bonus of a headless CMS solutions. With content stored as structured data, it becomes easier to repurpose it across different channels. Whether you're posting on a website, mobile app, social media, or any other platform, the same underlying data can be used, ensuring consistency and saving time in content creation and management.

To wrap it all up, the benefits of using a headless content management system on your web page are multifaceted and very much worth it. This is especially true if you struggle with a lack of developer hours, use different design systems on your platforms, and have a need for a high content churn. 

The flexibility, scalability, and security offered by a headless CMS make it a great choice for organizations aiming to stay ahead in the digital landscape.

By decoupling the content management process from the presentation layer, businesses can achieve a more agile development process, deliver content across diverse channels, and future-proof their web presence. 

As the digital landscape continues to evolve, embracing a headless CMS represents a strategic investment in building a robust and adaptable web presence.

Some of the main benefits of implementing a Headless CMS for your website or product.

Is a Headless Content Management System Right For You? t

Is a Headless Content Management System Right For You?

Ars Futura Best Employer 2023

All the best things come in fours – the leaves on a lucky clover, the Beatles members, and now our Best Employer awards. And just like the clover, they really are lucky! 

For the fourth year in a row, we are one of the best employers in Croatia,

 thanks to the answers from our team in the MojPosao questionnaire.

Out of our team of 60, the majority would recommend Ars Futura to their friends. Also, most of them find fulfillment and happiness in their day-to-day jobs. Specifically, 90% of our employees feel this way!

Here are a few more highlights we’d love to point out in this year’s stats.

Our connections and interpersonal relationships are shining through! 

The highest-scored questions are related to teamwork and friendships among coworkers, the support our team gets from their managers, and overall great working conditions.

Our team respects and trusts the people they’re surrounded by, cherishes collegiality, and thinks their teammates are ready to help. Clearly, the 

 are great and the office atmosphere is thriving. They also love teamwork! In Ars Futura, it really does make the dream work.

The second highlight are the relationships between team members and their managers who they perceive as caring, ready to help, supportive, and willing to grow from feedback.

All in all, it’s clear this award means a lot to us.

 It’s one of our most prized possessions, with a special place on our shelves and in our hearts.

This year, it even surprised us with a new look (as can be seen from our now out-dated illustration).

The results are an honest review from our team and a look back on the past year. The care we put into employee satisfaction is a huge effort, it takes a lot of time and thought.

Every year, we have to up our game, at least a little bit, to keep us growing and our team thriving. Also, every year, the competition gets a bit more fierce – and honestly, we love to see it.

So, it really is quite a joy to see that what we’re doing works, makes our team happy and that the love we give them is given back to us.

And to end on a high, here’s to another year of good luck, may it be the best one yet!

We’re popping the champagne, we’re counting our lucky stars, again!

Ars Futura is One of the Best Employers in 2023 – the Fourth Time in a Row

Luka Drezga

More than just a stream: Innovating the Esports Experience

With this blog, I'll try to spark conversation and imagination by discussing how we can innovate the Esports Experience.

Ars Futura is a digital design and development agency that, amongst other industries, does a lot of Esports work. We're super proud to say that we're an official partner of Activision Blizzard Esports, building everything digital from design to development on their flagship products. We've enjoyed working with other big names, like Halo Championship Series, Vindex, Esports Engine, Belong, etc. 

But we’re not discussing Ars Futura,  we’re here to see how we can innovate the Esports Experience and bring it to the next level. Before we jump to that, let’s talk about the love-and-hate relationship between Esports and sports.

When we're looking at Esports, we still see a lot of sports influence, which is fine. Esports is a sport of sorts. It relies on teams and players, the matches and leagues, and the crowd that follows everything. But, there are a lot of crucial differences that we need to take into account. 

Esports is played in both the live and the digital environment, whereas traditional sports are only live. Esports has a global audience, doesn't care about geographical boundaries, and is more accessible. You don't need cable TV, and you have no channel restrictions. The only thing required is a computer or console.

The second key thing we must understand is the difference between Esports and Traditional Sports fans. 

The average age of an NFL fan is 47; for hockey, it's 50; for baseball, it's 57. At the same time, an average Esports fan is around 26. This is a gap of almost 30 years.

Esports fans are digital natives. They were born in the late 90s and have grown up surrounded by technology. They're tech-savvy and early adopters compared to their boomer sports counterparts.

Esports fans are versatile, following multiple games and genres, leagues, and teams. Their loyalty isn't to a team that's grown in their hometown. They follow and cheer for different players all across the globe, and they usually follow more than one team.

This is where the traditional Esports Experience is lacking. While having a good old regular live stream, VOD, standings, schedule, and others is a must-have, the industry is evolving rapidly, prompting a need for innovation.

We must offer these tech-savvy, hungry beasts something more than just watching.

Beyond Passive Viewing: The Future is Fan Interaction

This is why I believe that with this desire for active participation, immersion, and control, the future of Esports should prioritize increased fan interaction through innovative digital products that foster stronger communities. Now, there are a million different things that we, as Esports builders, can entertain. I'll try to focus on a couple of feasible options that can be accomplished in the foreseeable future.

The Rise of Fantasy - Interactive Fantasy Leagues

One of the first things that jump to mind are Fantasy Leagues and Pick 'em experiences. By providing these digital solutions for fans in pre-, live, and post-match states, we involve them in the game even more. By making predictions and building fantasy teams, you, as an Esports fan, are investing yourself more than before. Doing this live, you witness your imaginary team's and your pick's success parallel to the main event, bridging the gap between the actual game and the fantasy world through an adrenaline-fueled experience. 

Continuing the previous topic about empowering viewers and enhancing the interaction with the game, there is much to be said about the viewer experience. 

As an Esports fan, I sit on my couch and look at this directed live stream on Twitch or YouTube, see what the producers show, and hear what the casters say. Why not take it a step further and allow the viewers to choose player perspectives and switch between streams in real-time, self-direct their viewing experience, and take a first-person look at what their favorite player is doing. Let's take it another step further and let fans tap into the comms of their favorite teams. Let them listen in on team chats, gaining insight into the communication and strategies of a particular team. 

These innovations add a new layer of immersion, proximity to the action, and understanding of the game. Redefining how fans interact with esports content, making it more engaging and informative. Viewer empowerment is at the forefront of esports innovation, offering fans unprecedented control and insight.

Going into GOD MODE - Immersive 3D Perspective

Another layer of viewer empowerment worth mentioning is the 3D space of a map — a feature-rich user interface that enhances immersion. Imagine dropping in Inferno and witnessing the action first-hand from the first-person experience. Being able to jump between all the players on the map and seeing their POV. There are significant advances in this tech done by platforms like Virtex Stadium and Skybox.gg.

Now we've covered a bit about the viewing experience, adding pick 'em and fantasy, allowing fans more control over their content, etc. Let's see how we can engage them even more.

We're all well familiar with Battle Passes, achievements, and challenges. We've seen this all throughout gaming, but this powerful tool has yet to peak in Esports. We can incentivize viewers to interact more with esports content, competitions, and communities through gamification. Give them more opportunities to return and spend time on our websites and apps. One of the cool things we did with CDL and World Series of Warzone is that we've created these interactive components that can be set up with every stream or VOD that would reward users for consuming content on our websites. The more videos you've watched, the better the rewards will become. CDL Pick 'em introduced challenges and rewards to their fans; the more picks you made and the better they'd be, you'd gain achievements and win prizes. The prizes would range from discounts on shops with CDL partners to in-game rewards like skins, double XP days, etc. This type of mechanic significantly boosted the user's engagement on the website. They spent more time there and submitted more picks than in the prior seasons.

Medals of Honor - Exclusive Event Engagement

There is this thing called FOMO, and a lot of us are suffering from it. And boy, oh boy, is it a powerful engagement driver. Last year, we developed a feature for the OWL mobile app that is basically a scavenger hunt; you'd have these QR codes spread throughout the Anaheim arena and shown on live streams. Each QR code awarded something different, from fan-designed assets to in-game skins and OWL Tokens. If you collect all rewards, you'll win a golden perk!

The results from just this one event are mind-blowing. The adoption rate for this feature was an astonishing 80%, meaning that 80% of the people who were a part of the OWL 2022 finals updated or installed the app and used this feature. It only took 2 months to design and develop it, and now it's used on events all across the globe.

Creating these one-of-a-kind promotions, unique items, and offers exclusive to specific events contributes to a sense of community and fan loyalty.

Decision Making - Interactive Fan Involvement

Lastly, something we're seeing on the rise just now is empowering fans and viewers to participate in the decision-making on a creator's stream or even with the gameplay. We're seeing more and more people using platforms like Epic Games' Unreal Editor for Fortnite (UEFN) or Roblox, where creators get to shape and build new experiences. I see that opening up APIs for these games and allowing people to participate in the game itself is the next step in this process. Imagine you're playing a Battle Royal game, and fans watching your stream get to decide what will be a part of your next drop. Incredible creator fan immersion. While this might not directly apply to Esports, something similar can be introduced in streams to tailor content per fan's wishes. Imagine watching a stream, but you decide what match gets broadcast or who gets interviewed in the break. It's all about fan empowerment.

In conclusion, the future of innovating the Esports experience is an exciting journey. The Esports industry is distinct from traditional sports in various ways, especially its digital-savvy and diverse fan base. To harness the full potential of this unique audience, we must evolve the Esports experience beyond passive viewing.

By embracing these innovations, we can elevate the Esports experience, making it more engaging, interactive, and tailored to individual fan preferences. This, in turn, promises to further solidify the bond between Esports fans and the games they love. The future of Esports is not just about watching; it's about actively participating, immersing, and empowering fans to be an integral part of the Esports ecosystem. 

Let's innovate and elevate the Esports experience together!

This blog was created from a keynote talk and presentation at ESI 2023, the world’s biggest esports and games festival.

The future of esports engagement.

More Than Just a Stream: Innovating the Esports Experience

Josip Kvaternik

Web and Mobile Automation Inside CI Environments

I’m back with another blog post (please, hold the applause  

 ). This time, I’m writing about the integration process of your mobile and web automation projects with a continuous integration cloud provider, creating a CI environment, and connecting it with Slack. I’ll cover more than just the CI, pipeline automation, cloud provider, or Slack integration, so stay tuned.

This blog is an addition to my first one, where I covered 

the basics of Cucumber BDD with Selenium and Java

. If you still haven’t read it, I strongly advise you to, and not just because I wrote it, but because you’ll understand this one much better. 

I think the quality of my jokes has decreased by 20% since my last blog post, so without further ado, let’s CI what I prepared for this one (get it?).

I’ll start by talking about the meaning and benefits of a Continuous Integration environment. 

Continuous integration (CI) is a practice that involves software developers making small changes and checks to their code. Due to the scale of requirements and the number of steps involved, this process is automated. This is to ensure that teams can build, test, and package their applications in a reliable and repeatable way. This is what Mr. Google would say if you were to search “What is CI?”. Google is a bit formal so I’ll put it in my own words: “It is what it is” (

Let’s say you have your mobile automation test that tests login functionality for your high-end iOS application. If you were to check your login functionality, you’d have to trigger and set everything up manually (probably every day). If you integrate that project inside a CI environment, you wouldn’t have to worry about that, your tests would trigger, run, and report feedback automatically, as easy as that. When you think about it, even the name says it, Continuous Integration.

There are many continuous integration tools DevOps and people in software development  use today. From 

. In this blog, I’ll cover GitHub Actions. I find it very similar to Gitlab CI, but I’ll cover GitHub since the project from my first blog post is already on GitHub. However, if anybody asks, I prefer Gitlab CI for my test automation.

GitHub Actions is a continuous integration and continuous deployment (delivery) (CI/CD) platform that automates your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to environments. In our case, GitHub Actions will be used to build and run our tests on a predefined schedule. 

GitHub actions provide Linux, Windows, or MacOS machines for workflow runs. We’ll use MacOS. 

Let’s talk about security. GitHub actions provide many security features, such as GitHub secrets. GitHub secrets are encrypted variables you can create in your repository environment. What does it mean? I don’t know (joking). It means you can keep any variable you want private, encrypted, and under a password. That variable can be anything, an environment password or something as simple as a String. A real-life scenario would be to keep your environment access ID and password secret. Here we won’t have that, so I’ll create a GitHub Secret for our Slack webhook, but more about that later.

As bad as the name might be, CI Testing Cloud Providers says it all. The Cloud testing service providers provide an essential testing environment as per application under test requirements. As previously mentioned, the essential environment can be a web browser on a desktop or mobile device. Let’s not forget Android and iOS applications on their respective platforms. That device is usually run on a VM (Virtual Machine) that gets killed after each test which makes the continuous integration tests reliable and less fragile.

This goes without saying, Testing Cloud Providers offer a lot more than just desktop and mobile services. Depending on the provider, some other functionalities are:

These are just some of the many Testing Clouds offers. By now, it’s pretty clear why automated testers use them. 

It’s time to mention some of the most reliable cloud providers currently on the market. I’ll start with SauceLabs and BrowserStack. They’re pretty similar and both offer many functionalities. There’s also SonarCloud, Testsigma, CloudQA and many more. 

In this blog, I’ll cover my favorite and most frequently used cloud provider, SauceLabs.

Okay, let’s talk Sauce. We have sour cream, sweet and sour cream, grilling sauce… No, wait, wrong chat…

Jokes aside, SauceLabs, in my opinion, is the best Testing Cloud provider on the market. It provides all the mentioned functionalities, has great documentation, and works on new integrations and services. SauceLabs service comes at a certain price, but if you’re working on a serious automation project, you should consider it. If you don’t prefer Sauces, perhaps try BrowserStack next.

Additionally, I'll integrate my local project to run on the SauceLabs cloud. What does that mean? Well, it means that once I click run on my local machine, the browser won’t start locally. The browser will start on the SauceLabs cloud on a newly born VM, record video playback, output the console log, run the test, and finally, kill the VM. What more could you ask for! 

Before we start, I’ll cover my project structure and technologies. 

So what does this tell us? Let’s break it down.

We have a local test automation project. In my case, the project is the same as in my first blog post. If you haven’t read it yet, now might be the time. Throughout this blog, we’ll cover everything else seen in the image.

I’ll connect my local project to SauceLabs which means my tests won’t run locally anymore. The tests will run on the SauceLabs cloud, as I explained earlier. SauceLabs cloud will provide live video playback, video reproduction, and console log output. Awesome.

Now let’s talk about GitHub. As can be seen in the image, GitHub does quite a lot of heavy lifting. I’ll create a workflow file that will trigger our tests to run on SauceLabs and put it on a schedule. Also, since I’m using Gradle and cucumber in my local project, GitHub itself will give us Gradle and cucumber console output. Finally, through the GitHub workflow file, I’ll create a connection to Slack so I can see notifications (pass/fail) immediately after the automated tests finish running. As you can see, when this is finished, you can relax and let your tests run for you. 

I believe that’s everything. Let’s start coding! 

So, my local project is Selenium with Cucumber and Java. Once we add the SauceLabs integration, our Driver (Hooks) Java class will look like this:

public class Hooks {
   public static RemoteWebDriver driver;
   public static WebDriverWait wait;
   public Config config;

   @Before
   public void setup(Scenario scenario) throws IOException {

       config = new Config();
       String browserName = config.getBrowser();
       String username = System.getenv("your sauce username");
       String accessKey = System.getenv("your sauce access key");
       String sauceUrl = "https://username:accesskey@ondemand.region.saucelabs.com:443/wd/hub";
       MutableCapabilities capabilities;
       MutableCapabilities sauceOpts = new MutableCapabilities();

       switch (browserName) {

           case "chrome":
               capabilities = new ChromeOptions();
               capabilities.setCapability("browserName", browserName);
               capabilities.setCapability("browserVersion", "latest");
               capabilities.setCapability("platformName", "Windows 10");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name", "CHROME TEST" + scenario.getName());
               sauceOpts.setCapability("screenResolution" , "1920x1080");
               capabilities.setCapability("sauce:options", sauceOpts);
               URL url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;


           case "safari":
               capabilities = new SafariOptions();
               capabilities.setCapability("browserName", browserName);
               capabilities.setCapability("browserVersion", "14");
               capabilities.setCapability("platformName", "macOS 11");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name", "SAFARI TEST: " + scenario.getName());
               sauceOpts.setCapability("screenResolution", "1600x1200");
               capabilities.setCapability("sauce:options", sauceOpts);
               url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;

           case "chromeMac":
               capabilities = new ChromeOptions();
               capabilities.setCapability("browserName", "chrome");
               capabilities.setCapability("browserVersion", "latest");
               capabilities.setCapability("platformName", "macOS 12");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name","CHROME MAC TEST: " + scenario.getName());
               sauceOpts.setCapability("screenResolution" , "1600x1200");
               capabilities.setCapability("sauce:options", sauceOpts);
               url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;

           default:
               capabilities = new ChromeOptions();
               capabilities.setCapability("browserName", browserName);
               capabilities.setCapability("browserVersion", "latest");
               capabilities.setCapability("platformName", "Windows 10");
               sauceOpts.setCapability("username", username);
               sauceOpts.setCapability("accessKey", accessKey);
               sauceOpts.setCapability("name", "CHROME TEST: " + scenario.getName());
               sauceOpts.setCapability("screenResolution" , "1920x1080");
               capabilities.setCapability("sauce:options", sauceOpts);
               url = new URL(sauceUrl);
               driver = new RemoteWebDriver(url, capabilities);
               wait = new WebDriverWait(driver, Duration.ofSeconds(70));
               break;
       }
   }

  @After
   public void teardown (){
       driver.quit();
   }


   @AfterStep
   public void afterStep (Scenario scenario) {

       if(scenario.isFailed()){
           driver.executeScript("sauce:job-result=" + false);
       }
       else driver.executeScript("sauce:job-result=" + true);}

}

Okay, this is a lot of code at once so I’ll break everything down. 

Roughly speaking, my Hooks class is mostly about creating a driver for SauceLabs. The driver will no longer be WebDriver, it will be RemoteWebDriver because we’re connecting to remote (SauceLabs cloud) via URL. The URL consists of your SauceLabs username, access key, and region. In my example, those values are hidden for security reasons. 

I’m using Cucumber’s “Before” and “After” hooks. All the code inside the Before hook will execute before running test scenarios. Finally, the code inside the After hook will execute at the end of running test scenarios. We want our Sauce connection established before running our scenarios, so I put them inside the Before hook. 

We say a
lot about...
everything

Popular Articles

We say alot about...everything

Popular Articles

We say a
lot about...
everything