post_segement.html

<script>
const MOSITTO_ORANGE = "#ff4115"
const LAT = 35.7203;
const AIR_POLLUTION_STROKES_COLR = [[0.0, "#34ebeb" ], [0.10, "#43eb34"], [0.20, "#ebe534"], [0.40, "#eb6e34"], [0.65, "#eb3434"], [0.75, "#a834eb"]];
const LONG = 51.4088;
</script>


<script>
//general scripts here 

function random_choice_from_iterable(iterable)
	{
	let len = iterable.length;
	let random_index = Math.random() * len;
	random_index = Math.floor(random_index);
	return iterable[random_index];
	}

</script>



<script>
	function update_unix()
		{
		document.getElementById("unix_clock").innerText = Math.floor(Date.now()).toString().slice(0,10);
		document.getElementById("full_date").innerText = Intl.DateTimeFormat("en").format(new Date());
		let current_clock = new Date();
		
		let hour_value = current_clock.getHours();
		let hour_formatted = `${hour_value}`;
		if (hour_value < 10)
			{
			hour_formatted = "0" + hour_formatted;
			}

		document.getElementById("hour_dispaly").innerText = hour_formatted;
		document.getElementById("hour_minute_delimiter").innerText = [":", " "][+(Math.floor(Date.now())%2==0)];
		let minute_value = current_clock.getMinutes();
		let minute_foramtted = `${minute_value}`;

		if (minute_value < 10)
			{
			minute_foramtted = "0" + minute_foramtted;
			}
		document.getElementById("minute_display").innerText = minute_foramtted;
		}                        

	setInterval(update_unix, 1000);
</script>




<script>


function pbv()
	{
	document.getElementById("first_video_displayer").play();
	document.getElementById("second_video_displayer").play();
	}

function rand_int()
	{
	return Math.floor(Math.random() * 254);
	}


function randomize_segments_colors()
	{
	for (segmnent of list_of_screen_segments)
		{
		segmnent.style.backgroundColor = `rgb(${rand_int()}, ${rand_int()}, ${rand_int()})`
		}
	}


</script>




<script>
//scripts for sequential playing from server
class video_playlist_manager
	{
	constructor(id_of_player_element, id_of_playlist)
		{
		let log = console.log;
		this.id_of_player_element= id_of_player_element;
		this.last_video_index = 0;
		this.id_of_playlist = id_of_playlist;
		log(`making a video_playlist_manager for iope:${this.id_of_player_element}, l:${this.last_video_index}, iop:${this.id_of_playlist}`)
		this.plant_video_changer_on_target();
		}

	generate_current_src_url()
		{
		return `get_play_list_nth_video/${this.id_of_playlist}/${this.index}`;
		}

	plant_video_changer_on_target()
		{
		let target_element = document.getElementById(this.id_of_player_element).onended = function()
			{
			let target_element = document.getElementById(this.id_of_player_element);
			target_element.src = this.id_of_playlist();
			this.last_video_index += 1;
			};
		}
	}
//let first_video_playlist_manager = new video_playlist_manager("first_video_displayer", "first_video_displayer");
//let second_video_playlist_manager = new video_playlist_manager("second_video_displayer", "second_video_displayer");
</script>





<script>
//upadting air pollution things



</script>


<script>
//just forming the temp gauge 

var temp_gauge_options = {
  //percentColors : [[0.0, "#4ae6ff" ], [0.10, "#f9c802"], [0.50, "#f9c802"], [1.0, "#ff0000"]],
  angle: 0.01, // The span of the gauge arc
  lineWidth: 0.1, // The line thickness
  radiusScale: 0.8, // Relative radius
  pointer: {
    length: 0.0, // // Relative to gauge radius
    strokeWidth: 0.038, // The thickness
    color: '#fff' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: MOSITTO_ORANGE,   // Colors
  colorStop: MOSITTO_ORANGE,    // just experiment with them
  strokeColor: '#E0E0E0',  // to see which ones work best for you
  highDpiSupport: true,     // High resolution support
   renderTicks: {
    divisions: 5,
    divWidth: 1.1,
    divLength: 0.7,
    divColor: '#333333',
    subDivisions: 1,
    subLength: 0.5,
    subWidth: 0.6,
    subColor: '#666666'
	}
  }
  
var temp_canvas = document.getElementById('temp_canvas'); // your canvas element  
var temp_gauge = new Gauge(temp_canvas).setOptions(temp_gauge_options); // create sexy gauge!  
  
temp_gauge.maxValue = 60; // set max gauge value  
temp_gauge.setMinValue(-15);  // Prefer setter over gauge.minValue = 0  
temp_gauge.animationSpeed = 100; // set animation speed (32 is default value)  

</script>


<script>
//just forming the humidity gauge 

var humidity_gauge_options = {
  //percentColors : [[0.0, "#4ae6ff" ], [0.10, "#f9c802"], [0.50, "#f9c802"], [1.0, "#ff0000"]],
  angle: 0.01, // The span of the gauge arc
  lineWidth: 0.1, // The line thickness
  radiusScale: 0.8, // Relative radius
  pointer: {
    length: 0.0, // // Relative to gauge radius
    strokeWidth: 0.038, // The thickness
    color: '#fff' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: '#00e7ff',   // Colors
  colorStop:  '#00e7ff',    // just experiment with them
  strokeColor: '#000',  // to see which ones work best for you
  highDpiSupport: true,     // High resolution support
   renderTicks: {
    divisions: 5,
    divWidth: 1.1,
    divLength: 0.7,
    divColor: '#333333',
    subDivisions: 1,
    subLength: 0.5,
    subWidth: 0.6,
    subColor: '#666666'
	}
  }
  
var humidity_canvas = document.getElementById('humidity_canvas'); // your canvas element  
var humidity_gauge = new Gauge(humidity_canvas).setOptions(humidity_gauge_options); // create sexy gauge!  
  
humidity_gauge.maxValue = 100; // set max gauge value  
humidity_gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0  
humidity_gauge.animationSpeed = 100; // set animation speed (32 is default value)  

</script>


<script>
//just forming the air speed angle compass

var air_speed_angle_gauge_options = {
  //percentColors : [[0.0, "#4ae6ff" ], [0.10, "#f9c802"], [0.50, "#f9c802"], [1.0, "#ff0000"]],
  angle: 0, // The span of the gauge arc
  lineWidth: 0.1, // The line thickness
  radiusScale: 0.7, // Relative radius
  pointer: {
    length: 0.0, // // Relative to gauge radius
    strokeWidth: 0.038, // The thickness
    color: '#fff' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: '#00e7ff',   // Colors
  colorStop:  '#00e7ff',    // just experiment with them
  strokeColor: '#000',  // to see which ones work best for you
  highDpiSupport: true,     // High resolution support
   renderTicks: {
    divisions: 5,
    divWidth: 1.1,
    divLength: 0.7,
    divColor: '#333333',
    subDivisions: 1,
    subLength: 0.5,
    subWidth: 0.6,
    subColor: '#666666'
	}
  }
  
var air_speed_angle_canvas = document.getElementById('air_speed_angle_canvas'); // your canvas element  
var air_speed_angle_gauge = new Gauge(air_speed_angle_canvas).setOptions(air_speed_angle_gauge_options); // create sexy gauge!  
  
air_speed_angle_gauge.maxValue = 360; // set max gauge value  
air_speed_angle_gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0  
air_speed_angle_gauge.animationSpeed = 100; // set animation speed (32 is default value)  

</script>


<script>
const WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LONG}&appid=1340efe030f838cd04d062ed85d74913`;
const WEATHER_API_UPDATING_DELAY_IN_MS = 1000 * 3600 * 2; //2 HOUR
const MAX_WIND_SPEED = 15;
const HIGHEST_WIND_ICON_ANIAMTION_DURATION = 1;

async function return_needed_data_from_weather_api()
	{
	let response = await fetch(WEATHER_API_URL);
	let json_data = await response.json();

	let output = 
		{
		"wind_speed":json_data["wind"]["speed"],
		"wind_deg":json_data["wind"]["deg"],
		"wind_gust":json_data["wind"]["gust"],
		"temp":json_data["main"]["temp"],
		"temp_min":json_data["main"]["feels_like"],
		"temp_max":json_data["main"]["temp_max"],
		"feels_like":json_data["main"]["temp_min"],
		"humidity":json_data["main"]["humidity"],
		
		"weather_icon":json_data["weather"][0]["icon"],
		"weather_title":json_data["weather"][0]["main"],
		"weather_caption":json_data["weather"][0]["description"],
		
	

		
		};
	return output;
	}


function convert_kelvin_to_celes(value)
	{
	return value - 273;
	}


async function update_weather_elements()
	{
	let data = await return_needed_data_from_weather_api();
	console.log(data);

	let wind_speed = data["wind_speed"];
	let wind_angle = data["wind_deg"];
	let wind_gust = data["wind_gust"];

	document.getElementById("wind_speed_holder").innerText = `${wind_speed} km/h`;
	document.getElementById("wind_angle_holder").innerText = `${wind_angle} deg`;
	air_speed_angle_gauge.set(wind_angle);
	document.getElementById("wind_gust_holder").innerText = wind_gust;
	
	
	//randomise wind icons animations 
	let wind_icons = document.querySelectorAll(".wind_logo");
	for (let wind_icon of wind_icons)
		{
		wind_icon.style.animationDuration = `${HIGHEST_WIND_ICON_ANIAMTION_DURATION/(wind_speed/MAX_WIND_SPEED)}s`;
		wind_icon.style.animationDelay = `${Math.random()*4}s`;
		}	
	

	let temp = data["temp"];
	let temp_pre_format = Math.floor(convert_kelvin_to_celes(temp));
	document.getElementById("temp_holder").innerText = `${temp_pre_format}C`;
	temp_gauge.set(convert_kelvin_to_celes(temp));  

	let humidity = data["humidity"];
	document.getElementById("humidity_holder").innerText = `${humidity} g/m**-3`;
	humidity_gauge.set(humidity);
	
	
	let weather_icon = data["weather_icon"];
	let weather_title = data["weather_title"];
    let weather_caption = data["weather_caption"];
	
	let weather_status_icon = document.getElementById("weather_status_icon");
	let weather_title_holder = document.getElementById("weather_title_holder");
	let weather_caption_holder = document.getElementById("weather_caption_holder");
	
	
	weather_status_icon.src = `/static/weather_icons/${weather_icon}.png`;
	//weather_title_holder.innerText = weather_title;
	weather_caption_holder.innerText = weather_caption;
	}

update_weather_elements()
setInterval(update_weather_elements, WEATHER_API_UPDATING_DELAY_IN_MS);


//weather status related 

	
	
	
	
	weather_status_icon
	weather_title_holder
	weather_caption_holder

</script>


<script>
//air pollution gauge formers 
let AIR_POLLUTION_GAUGES = {};

function form_gauge_for_air_pollutor(canvas_id, component_name)
	{
	var options = {
	  //
	  percentColors : AIR_POLLUTION_STROKES_COLR,
	  angle: 0, // The span of the gauge arc
	  lineWidth: 0.1, // The line thickness
	  radiusScale: 0.7, // Relative radius
	  pointer: {
		length: 0.0, // // Relative to gauge radius
	  },
	  colorStart: '#00e7ff',   // Colors
	  colorStop:  '#00e7ff',    // just experiment with them
	  strokeColor: '#fff',  // to see which ones work best for you
	  highDpiSupport: true,     // High resolution support
	  }
  
	var canvas = document.getElementById(canvas_id); // your canvas element  
	var gauge = new Gauge(canvas).setOptions(options); // create sexy gauge!  
	air_speed_angle_gauge.maxValue = 600; // set max gauge value  
	air_speed_angle_gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0  
	air_speed_angle_gauge.animationSpeed = 100; // set animation speed (32 is default value)  
	AIR_POLLUTION_GAUGES[component_name] = gauge;
	}
	
form_gauge_for_air_pollutor("canvas_of_co","co");
form_gauge_for_air_pollutor("canvas_of_no","no");
form_gauge_for_air_pollutor("canvas_of_no2","no2");
form_gauge_for_air_pollutor("canvas_of_o3", "o3");
form_gauge_for_air_pollutor("canvas_of_so2", "so2");
form_gauge_for_air_pollutor("canvas_of_pm2_5","pm2_5");
form_gauge_for_air_pollutor("canvas_of_pm10", "pm110");

</script>

<script>
//updating air pollution things 
const AIR_POLLUTION_API_URL = `http://api.openweathermap.org/data/2.5/air_pollution?lat=${LAT}&lon=${LONG}&appid=1340efe030f838cd04d062ed85d74913`;
const AIR_POLLUTION_API_UPDATING_DELAY_IN_MS = 1000 * 60 * 60 * 5; //5 HOUR

async function return_needed_data_from_air_pollution_api()
	{
	let r = await fetch(AIR_POLLUTION_API_URL);
	let json_data = await r.json();
	console.log(json_data);
	let output = json_data["list"]["0"]["components"];
	return output;
	}


async function update_air_pollution()
	{
	let data = await return_needed_data_from_air_pollution_api();
	let componentes = ["co", "no", "no2", "o3", "so2", "pm2_5", "pm10", "nh3"];
	for (let component of componentes)
		{
		let value = data[component];
		AIR_POLLUTION_GAUGES[component].set(value);

		}





	}


update_air_pollution()
setInterval(update_air_pollution, AIR_POLLUTION_API_UPDATING_DELAY_IN_MS);




/*
async function get_air_pollution_data_for_canvasjs_chart()
	{
	let raw_data = await return_needed_data_from_air_pollution_api();
	let output = [];
	const HEADERS = ["co", "no", "no2"];
	for (header of HEADERS)
		{
		output.push
			(
			{y:raw_data[header], label:header},
			);
		}
	return output;
	}


var chart = new CanvasJS.Chart("air_pollution_div_1", {
	animationEnabled: true,
	theme: "dark1", // "light1", "light2", "dark1", "dark2"
    legend: {
        display: false
    },
	title:{
		text: "air pollution"
	},
	axisY: {
		title: "Reserves(MMbbl)"
	},
	data: [{        
		type: "column",  
		legendText: "MMbbl = one million barrels",
		dataPoints: [      
			{ y: 300878, label: "Venezuela" },
			{ y: 266455,  label: "Saudi" },
			{ y: 169709,  label: "Canada" },

		]
	}]
});
chart.render();
*/
</script>








<script>
var base_net_speed = 3;
const NETWORK_SPEED_TEST_CHECK_FROM_SERVER_DELAY = 1000*3600;
const NET_WORK_SPEED_TEXT_DISPLAY_UPDATING_DELAY = 250;

var opts = 
	{
  angle: 0.10, // The span of the gauge arc
  lineWidth: 0.1, // The line thickness
  radiusScale: 1, // Relative radius
  pointer: {
    length: 0.6, // // Relative to gauge radius
    strokeWidth: 0.038, // The thickness
    color: '#ff4115' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: '#ff4115',   // Colors
  colorStop: '#ff4115',    // just experiment with them
  strokeColor: '#E0E0E0',  // to see which ones work best for you
  generateGradient: true,
  highDpiSupport: true,     // High resolution support
   renderTicks: {
    divisions: 5,
    divWidth: 1.1,
    divLength: 0.7,
    divColor: '#333333',
    subDivisions: 1,
    subLength: 0.5,
    subWidth: 0.6,
    subColor: '#666666'
  } 
  
	};
var target = document.getElementById('net_speed_gauge'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!

gauge.maxValue = 25; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 29; // set animation speed (32 is default value)
 // set actual value

async function update_base_internet_speed()
	{
	let r  = await fetch("/get_net_speed_ib_bytes_per_second");
	base_net_speed = await +r.text();
	}


function updatae_net_speed_text_display()
	{
	let speed = (base_net_speed)+Math.random()*0.25;
	speed = speed.toFixed(2);
	gauge.set(speed);
	document.getElementById("net_speed_value").innerText = `${speed}MB`
	}


setInterval(updatae_net_speed_text_display, NET_WORK_SPEED_TEXT_DISPLAY_UPDATING_DELAY);	

</script>


<script>
//authority_logo_holder logo handling 
let authority_logo_urls = ["/static/gov_icon.png", "/static/abaas_abad_company_logo.png"];
const DELAY_OF_AUTHORITY_LOGO_SWAPPING = 5000;




function swap_authority_logo_dispaly()
	{
	let current_authority_logo = random_choice_from_iterable(authority_logo_urls);
	document.getElementById("authority_logo_holder").src=current_authority_logo;
	}
	
	
setInterval(swap_authority_logo_dispaly, DELAY_OF_AUTHORITY_LOGO_SWAPPING);

</script>

<script>
//time zone to iran 



</script>

<script>
//auto refreshing
const AUTO_REFRESH_DELAY = 1000 * 3600 * 6 ; //each 6 hours

function refresh_the_page()
	{
	location.reload();
	}

setTimeout(refresh_the_page, AUTO_REFRESH_DELAY);
</script>



<script>
//updating colors of segments according to time of day 
const DELAY_OF_UPDATING_BACKGROUND_COLORS_OF_SCREENSEGMENTS_ACCORDING_TO_TIME_OF_DAY = 1000;
function update_background_color_of_screen_segments_according_to_time_of_day()
	{
	for (segment of list_of_screen_segments)
		{
		let current_hour = new Date().getHours();
		let lumination = 0;
		if (current_hour <= 12)
			{
			lumination = 50 * (current_hour/12);
			}
		if (current_hour > 12)
			{
			lumination = 50 * (1-((current_hour-12)/12));
			}
		segment.style.backgroundColor = `hsl(214.8,100%,${lumination}%)`;
		}
	}
	
	
//setInterval(update_background_color_of_screen_segments_according_to_time_of_day, DELAY_OF_UPDATING_BACKGROUND_COLORS_OF_SCREENSEGMENTS_ACCORDING_TO_TIME_OF_DAY)

</script>