Steelseries guges doesn't load

ugo1 · Post by **ugo1** » Fri 16 Nov 2012 6:37 am

Hi,

i'm trying to customize the steelseries guages page. I load it from an javascript call into a div

here the main page

Code: Select all

<!DOCTYPE html>
<html lang="it">
	
  <head>
  	
    <meta charset="utf-8" />
    
    <!-- Html 5 e CSS3 -->
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <title>Ugo Internet server</title>
    <meta name="description" content="Sito internet di Ugo Merlini"/>
    <meta name="author" content="Ugo Merlini"/>

    <meta name="viewport" content="width=device-width; initial-scale=1.0"/>

    <!-- Styles -->
  
    <link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/jquery_ui/css/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../../../file_comuni/css/5.css"/>
    <!-- Jquery javascript -->
  
    <script type="text/javascript" src="../../../file_comuni/javascript/jquery/jquery-1.8.2.js"></script>
    
    <!-- Jquery-ui javascript -->
    
    <script type="text/javascript" src="../../../file_comuni/javascript/jquery_ui/jquery-ui-1.9.1.js"></script>
    
    <script type="text/javascript">
      $(function() {
        $( "#bottone_dati_in_diretta_principale" ).buttonset();
      });
    </script>
    
    <script type="text/javascript" >
      $(document).ready(function() {
        $("#dati_in_diretta_grafici_id").click(function(event){
          $('#stage').load('grafici/copy.php');
        });
      });
    </script>
    
    <script type="text/javascript" >
      $(document).ready(function() {
        $("#dati_in_diretta_strumenti_id").click(function(event){
          $('#stage').load('strumenti/index.html');
        });
      });
    </script>
    
  </head>
  
  <body>
  	
  	<nav id="nav_dati_in_diretta">
  	  <div id="bottone_dati_in_diretta_principale">
        <input type="radio" id="dati_in_diretta_grafici_id" name="radio" /><label for="dati_in_diretta_grafici_id">Grafici</label>
        <input type="radio" id="dati_in_diretta_strumenti_id" name="radio"/><label for="dati_in_diretta_strumenti_id">Strumenti</label>
  	  </div>
    </nav>
    
  	<section id="section_dati_in_diretta">
      <div id="stage"></div>
    </section>
    
  </body>
  
</html>

the "strumenti/index.htm" file contain the steelseries gauges

and here my index.html page with steelsereis code

Code: Select all

<!DOCTYPE html>
<html lang="it">
	
  <head>
  	
    <meta charset="utf-8" />

    <!-- Html 5 e CSS3 -->
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />   

    <title>Ugo Internet server - dati in diretta strumenti</title>
    <meta name="description" content="Sito internet di Ugo Merlini"/>
    <meta name="author" content="Ugo Merlini" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

    <!-- Styles -->
    
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  
    
     <!-- Jquery javascript -->
  
    <script type="text/javascript" src="../../../../file_comuni/javascript/jquery/jquery-1.7.js"></script>
    
    <!-- Stessseries javascript -->
    
    <script type='text/javascript' src="../../../../file_comuni/javascript/steelseries/tween.js"></script>
    <script type='text/javascript' src="../../../../file_comuni/javascript/steelseries/steelseries.js"></script>
  
    <script type='text/javascript' >
      function init() {
      
        // Define some sections
        var sections = Array(steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),
                             steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'), 
                             steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)'));
  
        // Define one area
        var areas = Array(steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)'));
            
        // Create one radial gauge
        var radial1 = new steelseries.Radial(
                    'canvas1', {
                    section: sections,                      
                    area: areas,                            
                    titleString: 'Test',                    
                    unitString: 'Unit',                     
                    pointerType: steelseries.PointerType.TYPE8
                    });                               

        // Create a second radial gauge
        var radial2 = new steelseries.Radial(
                    'canvas2', {
                    gaugeType: steelseries.GaugeType.TYPE2,                     
                    maxValue: 40, 
                    threshold: 30, 
                    section: Array(steelseries.Section(0,40,'rgba(0,255,0,0.3)')),
                    area: Array(steelseries.Section(30,40,'rgba(255,0,0,0.5)')), 
                    titleString: 'Test', 
                    unitString: 'Unit', 
                    frameDesign: steelseries.FrameDesign.ANTHRACITE, 
                    backgroundColor: steelseries.BackgroundColor.ANTHRACITE, 
                    pointerType: steelseries.PointerType.TYPE11, 
                    pointerColor: steelseries.ColorDef.WHITE, 
                    lcdColor: steelseries.LcdColor.WHITE,                     
                    ledColor: steelseries.LedColor.GREEN_LED, 
                    });

        // Create a radial bargraph gauge
        var radial3 = new steelseries.RadialBargraph(
                    'canvas3', {
                    gaugeType: steelseries.GaugeType.TYPE3,
                    titleString: "Title",                                
                    unitString: "Unit",          
                    frameDesign: steelseries.FrameDesign.BLACK_METAL,
                    backgroundColor: steelseries.BackgroundColor.LIGHT_GRAY,
                    valueColor: steelseries.ColorDef.YELLOW,
                    lcdColor: steelseries.LcdColor.YELLOW,
                    ledColor: steelseries.LedColor.YELLOW_LED,
                    });                                   

 
        // Let's set some values...
        // Start the random update			
		  	setInterval(function(){ setRandomValue(radial2) }, 2000);	  
		  	
        }

		function setRandomValue(gauge)
    	{
    		
    		$.get('strumenti/realtime.txt', function(data) {
   gauge.setValueAnimated(data.split('\n')[11]);

   //process text file line by line
  
});
    		
    		
    		
    	}        
	</script>
</head>
<body onload="init()">
	<canvas id='canvas1' width='200' height='200'>
		No canvas in your browser...sorry...
	</canvas>
	<canvas id='canvas2' width='200' height='200'></canvas>
    <canvas id='canvas3' width='200' height='200'></canvas>
</body>
</html>

the problem is that I'm not able to show the guages when I load it from the main page, but if I load the page directly they pop up

I don't have an idea where is the problem

Regards

Ugo

mcrossley · Post by **mcrossley** » Fri 16 Nov 2012 9:45 am

Do you have a test page available that I can take a look at?

ugo1 · Post by **ugo1** » Fri 16 Nov 2012 6:01 pm

hi,

I just create the site (which is very slow)

http://ugom.altervista.org/meteo/stazio ... index.html

Regards

Ugo

mcrossley · Post by **mcrossley** » Fri 16 Nov 2012 6:22 pm

It looks like you are trying to load a whole page into a <div>, I think you will have to use an iframe to do that.

You have ended up with 'header' tags within the body.

Code: Select all

<div id="stage">

	
  
  	
    <meta charset="utf-8">

    <!-- Html 5 e CSS3 -->
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   

    <title>Ugo Internet server - dati in diretta strumenti</title>
    <meta name="description" content="Sito internet di Ugo Merlini">
    <meta name="author" content="Ugo Merlini">

    <meta name="viewport" content="width=device-width; initial-scale=1.0">

    <!-- Styles -->
    
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
    
     <!-- Jquery javascript -->
  
    
    
    <!-- Stessseries javascript -->
    
    
    
  
    


	<canvas id="canvas1" width="200" height="200">
		No canvas in your browser...sorry...
	</canvas>
	<canvas id="canvas2" width="200" height="200"></canvas>
    <canvas id="canvas3" width="200" height="200"></canvas>

</div>

ugo1 · Post by **ugo1** » Sat 17 Nov 2012 3:35 pm

Hi,

I have updated the code seem work on IE and on chrome but not on firefox.

Can someone check it

regards

Ugo

mcrossley · Post by **mcrossley** » Sat 17 Nov 2012 3:40 pm

It is now loading the gauges into an iframe, but the it is quite small 300x150 pixels?

ugo1 · Post by **ugo1** » Sat 17 Nov 2012 3:45 pm

Hi,

yes I know but the I will do the css part when it will work

Ugo

mcrossley · Post by **mcrossley** » Sat 17 Nov 2012 4:55 pm

No idea why it fails in Firefox. The error I see is

NS_ERROR_FAILURE: Failure
ctx.font = fontSize + 'px sans-serif'; steelseries.js (line 360)

Cumulus Support

Steelseries guges doesn't load

Steelseries guges doesn't load

Re: Steelseries guges doesn't load

Re: Steelseries guges doesn't load

Re: Steelseries guges doesn't load

Re: Steelseries guges doesn't load

Re: Steelseries guges doesn't load

Re: Steelseries guges doesn't load

Re: Steelseries guges doesn't load