Jump to content

UniHTMLFrame problem with script (solved)

novikov.alexander

By novikov.alexander
in General

 Share

Recommended Posts

novikov.alexander Newbie

novikov.alexander

Posted
Posted

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
novikov.alexander Newbie

novikov.alexander

Posted
  • Author
Posted

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
Sherzod Advanced Member

Sherzod

Posted
Posted

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
novikov.alexander Newbie

novikov.alexander

Posted
  • Author
Posted

 

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
novikov.alexander Newbie

novikov.alexander

Posted
  • Author
Posted

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...