OpenSpeedTest Özelleştirme

Bu kılavuzda OpenSpeedTest arayüzünü özelleştirme işlemlerini gerçekleştireceğiz. Varsayılan olarak baktığımız da aşağıdaki görsel bizi karşılamaktadır. 

İlk olarak docker üzerinde kurulu olan OpenSpeedTest contanier'e yetkili kullanıcı ile giriş yapalım.

sudo docker exec -it --user root openspeedtest /bin/sh

Editör ile index.html dosyasını düzenleyelim.

vim /usr/share/nginx/html/index.html 

NOT: vim yüklü değil ise  apk add vim komutunu kullanarak yükleyebilirsiniz.

Site Adı Değişimi

Şimdi site adını değiştirerek işlemlere başlayalım. Aşağıdaki görsellerdeki satır numaralarına göre düzenlemeleri gerçekleştirebilirsiniz.

Satır numaralarını görmek için :set number komutunu kullanabilirsiniz.

Download ve Upload Değişimi

Şimdi download ve upload kısımlarını değiştirelim. 

Şimdi text kısmını düzenliyorum.

Mbps Değişimi

Mbps kısımlarının değiştirmek için, 2 Mbps yazan kısımıda düzenleyebilirsiniz.

Ping ve Jitter Değişimi

Ping ve jitter kısmını aşağıdaki görselden bulalım.

Görseldeki gibi düzenleyebilirsiniz.

Start Değişimi

start kısmını başlat olarak güncelleyebilirsiniz.

Click here to run a speed test! yazan kısmını aratarak değiştirelim.

Görselde yazan kısmı değiştirmeniz yeterlidir.

Options Değişimi

Şimdi aşağıdaki görseldeki kısımları düzenleyelim.

Options kısmını ayarlar olarak güncelliyorum.

Speedtest by OpenSpeedtest.com! kısmını istediğiniz gibi güncelleyebilirsiniz.

Pure HTML5 Network Performance Estimation Tool. by OpenSpeedTest Değişimi

Pure HTML5 Network Performance Estimation Tool. by OpenSpeedTest, yazısı sayfada bir çok yerde bulunmaktadır. Title yazanları tek tek aratarak değiştirebilirsiniz.

Aşağıdaki görseldeki gibi, bulup yazıları değiştirebilirsiniz.

OpenSpeedTest Logo Değişimi

Logo değişimi en zor kısımlardan bir tanesi. Logonuzu svg koduna çevirip eklemeniz gerekmektedir. İlk olarak, logo için genişlik ve yükseklik değerlerini öğrenelim. Google Chrome tarayıcı üzerinden, OpenSpeedTest yazan logo üzerine sağ tıklayıp incele seçeneğini seçiyorum.

Açılan sayfada width “222.8” ve height "50.22" değerlerini not alalım.

Logo için bir çok program kullanılabilir. Şuan için, svg desteği olan Adobe illustrator programını kullanacağız. Programı açıktan sonra, yeni dosya seçeneğini seçelim.

Not aldığımız, genişlik ve yükseklik ayarlarını giriyoruz.

İstediğiniz bir logo hazırlayın.

Dosya kısmından, Farklı Kaydet seçeneğini seçelim.

Kayıt Türü kısmından SVG seçeneğini seçip, Kaydet butonuna basalım.

Açılan pencerede, SVG Kodu butonuna tıklayalım.

Kodlar, not defterinde açılacaktır. Hepsini seçip kopyalayalım.

Şimdi 135 -149 satır aralığı silinecek yani, <g> harfinden sonrasını diğer </g> harfine kadar silinip, not defterinin içindeki kodları yapıştıralım.

 

Son haline baktığımız zaman, aşağıdaki gibi bir görsel bizi karşılayacaktır.