Jump to content

UniHTMLFrame problem with script (solved)


novikov.alexander

Recommended Posts

Hi everybody!

Try to use htmlframe but have one problem (not my English;)). I use C3 libary in my project, and now i want to add a toggle switch that change chart color. Heres my css:

/*-- Chart --*/

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #5568ae;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #FF7F50;
}

input:focus + .slider {
  box-shadow: 0 0 1px #FF7F50;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.c3 svg {
  font: 10px sans-serif;
  -webkit-tap-highlight-color: transparent; }

.c3 path, .c3 line {
  fill: none;
  stroke: #000; }

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges; }

.c3-chart-arc path {
  stroke: #fff; }

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px; }

/*-- Axis --*/
/*-- Grid --*/
.c3-grid line {
  stroke: #aaa; }

.c3-grid text {
  fill: #aaa; }

.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3; }

/*-- Text on Chart --*/
.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em; }

/*-- Line --*/
.c3-line {
  stroke-width: 1px; }

/*-- Point --*/
.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white; }

.c3-selected-circle {
  fill: white;
  stroke-width: 2px; }

/*-- Bar --*/
.c3-bar {
  stroke-width: 0; }

.c3-bar._expanded_ {
  fill-opacity: 0.75; }

/*-- Focus --*/
.c3-target.c3-focused {
  opacity: 1; }

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px; }

.c3-target.c3-defocused {
  opacity: 0.3 !important; }

/*-- Region --*/
.c3-region {
  fill: steelblue;
  fill-opacity: .1; }

/*-- Brush --*/
.c3-brush .extent {
  fill-opacity: .1; }

/*-- Select - Drag --*/
/*-- Legend --*/
.c3-legend-item {
  font-size: 12px; }

.c3-legend-item-hidden {
  opacity: 0.15; }

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1; }

/*-- Title --*/
.c3-title {
  font: 14px sans-serif; }

/*-- Tooltip --*/
.c3-tooltip-container {
  z-index: 10; }

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777777;
  -moz-box-shadow: 7px 7px 12px -9px #777777;
  box-shadow: 7px 7px 12px -9px #777777;
  opacity: 0.9; }

.c3-tooltip tr {
  border: 1px solid #CCC; }

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF; }

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999; }

.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px; }

.c3-tooltip td.value {
  text-align: right; }

/*-- Area --*/
.c3-area {
  stroke-width: 0;
  opacity: 0.2; }

/*-- Arc --*/
.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em; }

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none; }

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px; }

.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #777; }

.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777; }

.c3-chart-arc .c3-gauge-value {
  fill: #000;
  /*  font-size: 28px !important;*/ }

And here is my html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../css/c3.css" >
  </head>
  <body>
	<div id="chart1"></div>
	<label class="switch">
	  <input type="checkbox" id = "toggles" name = "toggles1" onclick="load()">
	  <span class="slider round"></span>
	</label>   
    <script src="../js/d3.v3.min.js" charset="utf-8"></script >
    <script src="../js/c3.js"></script >
    <script>

      var chart1 = c3.generate({
        bindto: '#chart1',
        data: {
          columns: [
            generateData(100)
          ],
        },
        axis: {
          x: {
            default: [30, 60]
          }
        },
        zoom: {
          enabled: true,
          onzoomstart: function (event) {
            console.log("onzoomstart", event);
          },
          onzoomend: function (domain) {
            console.log("onzoomend", domain);
          },
        },
        subchart: { show: true }
      });
      function load() {
		if (toggles.checked){
			chart1.data.colors({
				luxs: d3.rgb('#FF7F50').darker(0),
			});			
		}
		else {
			chart1.data.colors({
				luxs: d3.rgb('#82a6cd').darker(0),
			});
		};
      }
      function generateData(n) {
        var column = ['luxs'];
        for (var i = 0; i < n; i++) {
          column.push(Math.random() * 500);
        }
        return column;
      }

    </script>
  </body>
</html>

js file is tipical and everybody can upload it. Its works perfect when im open html file. But when in my program i add:

UniSession.AddJS(
        'var json = '+obj.GetJSONString+';'
        +'var arr = [];'
        +'for(elem in json){'
        +'arr.push(json[elem]);'
        +'}'
        +'var chart1 = c3.generate({'
        +'  bindto: '#39'#chart1'#39','
        +'  color: {'
        +'    pattern: ['#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39']'
        +'  },'
        +'  data: {'
        +'    columns: ['
        +'      generateData(arr.length)'
        +'    ],'
        +'  },'
        +'  axis: {'
        +'    x: {'
        +'      default: [30, 60]'
        +'    }'
        +'  },'
        +'  zoom: {'
        +'    enabled: true,'
        +'    onzoomstart: function (event) {'
        +'      console.log("onzoomstart", event);'
        +'    },'
        +'    onzoomend: function (domain) {'
        +'      console.log("onzoomend", domain);'
        +'    },'
        +'   },'
        +'   subchart: { show: true }'
        +'});'
        +''
        +'function load() {'
        +'  var HTMLFrame = Ext.getCmp("_HTMLFrame");'
        +'  var params=[];'
        +'  if (toggles.checked){'
        +'    chart1.data.colors({'
        +'      luxs: d3.rgb('#39'#FF7F50'#39').darker(0),'
        +'    });'
        +'  }'
        +'  else {'
        +'    chart1.data.colors({'
        +'      luxs: d3.rgb('#39'#82a6cd'#39').darker(0),'
        +'    });'
        +'  };'
        +'  ajaxRequest(HTMLFrame, '#39'load'#39', params); '
        +'}'
        +'      function generateData(n) {'
        +'        var HTMLFrame = Ext.getCmp("_HTMLFrame");'
        +'        var params=[];'
        +'        var column = ['#39'luxs'#39'];'
        +'        for (var i = 0; i < n; i++) {'
        +'            column.push (arr[i]);'
        +'        }'
        +'        ajaxRequest(HTMLFrame, '#39'callserver'#39', params); '
        +'        return column;'
        +'      }') ;

function Generatedate works perfect but function load() doesnot work.

Does anybody know what i need to do with that?

 

UNIGUI is the best B)

Link to comment
Share on other sites

Hi,

 

What error did you receive ?

 

Best regards,

Thank you for answering! I dont recieve any error. Function "load" does not work when i switch toggle switch in my app, if i open html file it works perfect. Its my first try to make a web page, and maybe i have some incorrect syntax in my code, but i dont see it, so i need help.

Link to comment
Share on other sites

I couldn't reproduce.

 

Sorry, maybe I didn't quite understand the issue, but

 

For example this code works for me:

<html>

<body>
    <div id="chart1"></div>
    <label class="switch">
      <input type="checkbox" id = "toggles" name = "toggles1" onclick="load()">
      <span class="slider round"></span>
    </label>

    <script>
        function load() {

            //alert("test");
            if (toggles.checked) {
                alert(toggles.checked);
                //chart1.data.colors({
                //    luxs: d3.rgb('#FF7F50').darker(0),
                //});            
            } else {
                alert(toggles.checked);
                //chart1.data.colors({
                //    luxs: d3.rgb('#82a6cd').darker(0),
                //});
            };
        }

        function generateData(n) {
            var column = ['luxs'];
            for (var i = 0; i < n; i++) {
                column.push(Math.random() * 500);
            }
            return column;
        }
    </script>
</body>

</html>
Link to comment
Share on other sites

 

I couldn't reproduce.

 

Sorry, maybe I didn't quite understand the issue, but

 

For example this code works for me:

<html>

<body>
    <div id="chart1"></div>
    <label class="switch">
      <input type="checkbox" id = "toggles" name = "toggles1" onclick="load()">
      <span class="slider round"></span>
    </label>

    <script>
        function load() {

            //alert("test");
            if (toggles.checked) {
                alert(toggles.checked);
                //chart1.data.colors({
                //    luxs: d3.rgb('#FF7F50').darker(0),
                //});            
            } else {
                alert(toggles.checked);
                //chart1.data.colors({
                //    luxs: d3.rgb('#82a6cd').darker(0),
                //});
            };
        }

        function generateData(n) {
            var column = ['luxs'];
            for (var i = 0; i < n; i++) {
                column.push(Math.random() * 500);
            }
            return column;
        }
    </script>
</body>

</html>

This works for me 2! But if do

On UniButton1Click:

HTMLFrame.HTML.LoadFromFile('F:\Projects\unigserv\Win32\Debug\files\zoom.html');

after loading i try

On UniButton2Click:

UniSession.AddJS(
'var json = '+obj.GetJSONString+';'
+'var arr = [];'
+'for(elem in json){'
+'arr.push(json[elem]);'
+'}'
+'var chart1 = c3.generate({'
+' bindto: '#39'#chart1'#39','
+' color: {'
+' pattern: ['#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39']'
+' },'
+' data: {'
+' columns: ['
+' generateData(arr.length)'
+' ],'
+' },'
+' axis: {'
+' x: {'
+' default: [30, 60]'
+' }'
+' },'
+' zoom: {'
+' enabled: true,'
+' onzoomstart: function (event) {'
+' console.log("onzoomstart", event);'
+' },'
+' onzoomend: function (domain) {'
+' console.log("onzoomend", domain);'
+' },'
+' },'
+' subchart: { show: true }'
+'});'
+''
+'function load() {'
+' var HTMLFrame = Ext.getCmp("_HTMLFrame");'
+' var params=[];'
+' if (toggles.checked){'
+' chart1.data.colors({'
+' luxs: d3.rgb('#39'#FF7F50'#39').darker(0),'
+' });'
+' params = ["id="+"svet", "val="+1];'
+' ajaxRequest(HTMLFrame, '#39'load'#39', params); '
+' }'
+' else {'
+' chart1.data.colors({'
+' luxs: d3.rgb('#39'#82a6cd'#39').darker(0),'
+' });'
+' params = ["id="+"svet", "val="+2];'
+' ajaxRequest(HTMLFrame, '#39'load'#39', params); '
+' };'
+'}'
+' function generateData(n) {'
+' var HTMLFrame = Ext.getCmp("_HTMLFrame");'
+' var params=[];'
+' var column = ['#39'luxs'#39'];'
+' for (var i = 0; i < n; i++) {'
+' column.push (arr[i]);'
+' }'
+' ajaxRequest(HTMLFrame, '#39'callserver'#39', params); '
+' return column;'
+' }') ;

i change function generatedata and function load. Function generatedata works perfectly but function load doesnot work.

Link to comment
Share on other sites

Better, if you make a simple test case for this

Hi!

The problem was solved!

I dont know why code not working with addjs method, but it works now:

obj := TclJSONObject.Create();
      for i := 0 to 255 do
      begin
        obj.AddString(inttostr(i),uniDBgrid1.DataSource.DataSet.FieldByName('lux').AsString);
        uniDBgrid1.DataSource.DataSet.Next();
      end;
    //UniSession.AddJS(
    HTML.HTML.Text:=(
        '<html>'
        +'  <head>'
        +'    <!--link rel="stylesheet" type="text/css" href="../css/c3.css" -->'
        +'  </head>'
        +'  <body>'
        +'<div id="chart1"></div>'
        +'<button onclick="load()">Load</button>'
        +'<label class="switch">'
        +'  <input type="checkbox" id = "toggles" name = "toggles" onclick="ld()">'
        +'  <span class="slider round"></span>'
        +'</label>   '
        +'    <!--script src="../js/d3.v3.min.js" charset="utf-8"></script -->'
        +'    <!--script src="../js/c3.js"></script -->'
        +'    <script>'
        +''
        +'var json = '+obj.GetJSONString+';'
        +'var arr = [];'
        +'for(elem in json){'
        +'arr.push(json[elem]);'
        +'}'
        +'var chart1 = c3.generate({'
        +'        bindto: '#39'#chart1'#39','
        +'        data: {'
        +'          columns: ['
        +'            generateData(100)'
        +'          ],'
        +'        },'
        +'        axis: {'
        +'          x: {'
        +'            default: [30, 60]'
        +'          }'
        +'        },'
        +'        zoom: {'
        +'          enabled: true,'
        +'          onzoomstart: function (event) {'
        +'            console.log("onzoomstart", event);'
        +'          },'
        +'          onzoomend: function (domain) {'
        +'            console.log("onzoomend", domain);'
        +'          },'
        +'        },'
        +'        subchart: { show: true }'
        +'      });'
        +''
        +'      function ld() {'
        +'        if (toggles.checked){'
        +'          alert(toggles.checked);'
        +'          chart1.data.colors({'
        +'            luxs: d3.rgb('#39'#FF7F50'#39').darker(0),'
        +'          });'
        +'        }'
        +'        else {'
        +'          alert(toggles.checked);'
        +'          chart1.data.colors({'
        +'            luxs: d3.rgb('#39'#82a6cd'#39').darker(0),'
        +'          });'
        +'        };'
        +'      }'
        +''
        +'      function generateData(n) {'
        +'        var column = ['#39'luxs'#39'];'
        +'        for (var i = 0; i < n; i++) {'
        +'          column.push(arr[i]);'
        +'        }'
        +'        return column;'
        +'      }'
        +''
        +'function load() {'
        +'        chart1.load({'
        +'          columns: ['
        +'            generateData(Math.random() * 1000)'
        +'          ],'
        +'        });'
        +'      }'
        +''
        +'    </script>'
        +'  </body>'
        +'</html>') ;

If you can tell why addjs method not working in my variant I will be very grateful!

 

Thank you a lot!

 

<3 UniGUI

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...