Loading...

Follow jQWidgets on Feedspot

Continue with Google
Continue with Facebook
or

Valid
jQWidgets by Admin - 3d ago
We are happy to announce the release of jQWidgets ver. 8.0.0. This release brings a new Material Color Picker UI Component, Angular 8 support and bug fixes.

What’s New: – Material Color Picker Javascript component.

What’s Improved: – Angular 8 components integration.

What’s Fixed: – Fixed an issue in jqxScheduler regarding the Edit Appointment dialog.
– Fixed an issue in jqxScheduler regarding the weekly recurring appointments when localization is applied.
– Fixed an issue in jqxDateTimeInput Vue component.
– Fixed an issue in jqxInput regarding the maxlength property with material themes.
– Fixed an issue in jqxInput regarding its ‘close’ event.
– Fixed an issue in jqxNumberInput regarding the Null value support with material themes.
– Fixed an issue in jqxPasswordInput regarding its placeholder with material themes.
– Fixed an issue in jqxDateTimeInput Angular component regarding the placeholder property.

The post jQWidgets ver. 8.0.0 appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
jQWidgets by Admin - 1w ago
Next version of jQWidgets will feature a brand new Color Picker component. We called it Material Color Picker. It will be available for all supported frameworks Angular, Vue, React and Javascript.

The post Material Color Picker appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
jQWidgets by Admin - 1M ago
What’s Improved: – jqxGrid resizing performance and rendering in responsive layouts. What’s Fixed: – Fixed an issue in jqxButton regarding the dynamic changing of themes.
– Fixed an issue in jqxButton for removing an event listener after calling ‘destroy’.
– Fixed an issue in jqxScheduler regarding the dynamic adding of appointments with resources.
– Fixed an issue in jqxGrid when “removesort” is called and the multi column sorting is enabled.
– Fixed an issue in jqxGrid when multi sort is enabled and columns height is changed dynamically.
– Fixed an issue in jqxGrid when multi sort is enabled and “updatebounddata” method is called with parameter “sort”.
– Fixed an issue in jqxGrid when an item in filter row’s checked list filter contains “and”.
– Fixed an issue in jqxGrid when filtering currency values with checked list filter.
– Fixed an issue in jqxGrid when tabbing in case with “selectionmode: ‘none'” select the first row.
– Fixed an issue in jqxGrid regarding the rendering when filtering and grouping are enabled. The grid is grouped by multiple columns and a filter is applied.
– Fixed an issue in jqxGrid regarding the rendering while resizing. Sometimes horizontal scrollbar was shown.
– Fixed an issue in jqxGrid regarding keyboard navigation with pageUp and pageDown and scrolling when grouping is applied.
– Fixed an issue in jqxTreeGrid regarding the “scrollBarSize” property.
– Fixed an issue in jqxTreeGrid and jqxDataTable regarding the keyboard navigation with arrow keys and ensureRowVisible method.
– Fixed an issue in jqxPanel regarding the scrolling on mobile devices.
– Fixed an issue in jqxTree when ensureVisible is called for the last item and horizontal scrolling is available.
– Fixed an issue in jqxTree when ensureVisible is called for an item with sub-items.
– Fixed an issue in jqxChart regarding the formatFunction of the labels settings.
– Fixed an issue in jqxSlider regarding the moving of thumb after click on the slider’s track. The thumb possition had several pixels offset.
– Fixed an issue with jqxDropDownList dropdown positioning on mobile devices.

The post jQWidgets v7.2.0 appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
We are glad to announce our partnership with Zerynth. Zerynth simplifies IoT development providing an easy and efficient way to program the most popular 32-bit microcontrollers in Python and connect them to the top Cloud infrastructures, with high-level standards of security. With R&D in Pisa, Italy, and a global sales team, Zerynth is helping thousands of developers around the world to develop new IoT products and Industry 4.0 applications with reduced costs and improved time-to-market.
Read more: Zerynth partnership with jQWidgets – Python meets responsive web applications.

The post Python meets responsive web applications appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
jQWidgets by Admin - 3M ago
What’s Fixed: – Fixed an issue in jqxGrid regarding the ensurerowvisible method when grouping is enabled.
– Fixed an issue in jqxGrid regarding the keyboard navigation and selection when grouping is enabled.
– Fixed an issue in jqxGrid regarding the scrollbarsize property behavior.
– Fixed an issue in jqxGrid regarding the number input editor when the editor is localized.
– Fixed an issue in jqxGrid regarding the columnemenuopening column callback function.
– Fixed an issue in jqxGrid regarding the filter menu with datetimeinput and its popup.
– Fixed an issue in jqxGrid regarding the filter menu with the “show rows where” and “show rows where date” strings.
– Fixed an issue in jqxNumberInput regarding its resize rendering behavior.
– Fixed an issue in jqxScheduler regarding the appointmentOpacity.
– Fixed an issue in jqxScheduler – the labels of the resources disappeared on changing of the date in ‘timeline view
– Fixed an issue in jqxDateTimeInput with “allowNullDate” and initial ‘null’.
– Fixed an issue in jqxTextArea regarding the ‘selectAll’ method.


The post jQWidgets v7.1.0 appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
Build a Voltmeter with Python When we read this post by Zerynth, we were excited how our components are used along with Python and how easy is to create amazing things with the proper Hardware and Software working together. The project is about building a Voltmeter in Python with the Zerynth App and jQWidgets Knob.



Python Code:
# DashBoard Voltage Converter. Voltage devidor by AbuFaisal
# Created at 2019-01-17

from wireless import wifi
from espressif.esp32net import esp32wifi as wifi_driver
import streams
import adc 
# import Zerynth App
from zadm import zadm

streams.serial()
sleep(1000)
print("STARTING...")

###################    WIFI Connection Setup    ##########################
wifi_driver.auto_init() 
try:
    for i in range(0,5):
        try:
            wifi.link("myWiFi",wifi.WIFI_WPA2,"123445678")
            print("Connection established..........................:)")
            break
        except Exception as e:
            print("Can't link",e)
    else:
        print("Impossible to link!")
        while True:
            sleep(1000)
            
except Exception as e:
    print(e)
    
###################    Zerynth App Configuration    ######################
z = zadm.Device("DEVICE UID HERE", "DEVICE TOKEN HERE")
z.start()
    
###################    Volt Reading Setup    #############################
while True:
    value = adc.read(A0)
    volt=value*(3.3/4095.0)
    print("sensor raw value:", value,"     Volte:",volt)
    # send the voltage value to the zerynth App
    z.send_event({"Voltage":volt})
    sleep(300)
        


HTML Template

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="utf-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <title>Voltage Divider</title>  
    <!--Include jquery -->  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
   <!--Include zerynth ADM JS LIBRARY -->  
   <script src="https://api.zerynth.com/zadm/latest/z.js"></script>    
   <!-- jqWidget Call -->  
   <link  href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
   <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />   
   <script type="text/javascript" src="https://jqwidgets.com/public/scripts/jquery-1.11.1.min.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxknob.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>  
   <style type="text/css">  
     #container {  
       position: relative;  
     }  
     .inputField {  
       left: 110px; //change the voltage reading location input field   
       top: 123px;  
       position: absolute;  
       background: transparent;  
       border: none;  
     }  
     text.jqx-knob-label {  
       font-size: 13px;  
     }  
     .inputField .jqx-input-content {  
       background: transparent;  
       font-size: 20px;  
       color: grey;  
     }  
   </style>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       $('#container').jqxKnob({  
         width: 300, //Gadget size  
         value: 0, // Change the voltage from here  
         min: 0,  
         max: 3.3,  
         startAngle:120,  
         endAngle: 420,  
         snapToStep: false, //false to show voltage in decimal point  
         allowValueChangeOnClick: false,  
         allowValueChangeOnDrag: false,  
         allowValueChangeOnMouseWheel: false,  
         rotation: 'clockwise',  
         style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } },  
         marks: {  
           colorRemaining: { color: 'grey', border: 'grey' },  
           colorProgress: { color: '#00a4e1', border: '#00a4e1' },  
           type: 'line',  
           offset: '71%',  
           thickness: 3,  
           size: '6%',  
           majorSize: '9%',  
           majorInterval: .5,  
           minorInterval: .1,  
         },  
         labels: {  
           offset: '88%',  
           step: .5,  
           visible: true  
         },  
         progressBar: {  
           style: { fill: '#00a4e1', stroke: 'grey' },  
           size: '9%',  
           offset: '60%',  
           background: { fill: 'grey', stroke: 'grey' }  
         },  
         pointer: { type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }  
       });  
       var input = $('<div >');  
       $('#container').append(input);  
       var inputOptions = {  
         width: 80,  
         height: 500,  
         decimal: 0, // starting value same as widget  
         min: 0, // same as widget  
         max: 3.3, // same as widget  
         textAlign: 'center',  
         decimalDigits: 2,  
         inputMode: 'simple'  
       };  
       $(input).jqxNumberInput(inputOptions);  
       $('#container').on('change', function (event) {  
         if (event.args.changeSource == 'propertyChange' || event.args.changeSource == 'val') { return; }  
         $(input).val(event.args.value);  
       })   
     });  
   </script>  
  </head>  
  <body  >  
   <div> <h1 id="status" ></h1></div>  
   <div id='container' > </div>  
   <script>  
   <!-- CONFIGURE ADM LIBRARY ON READY -->  
   $(document).ready(function() {  
    Z.init({  
     on_connected:   function(){$("#status").html("CONNECTED")},  
     on_error:     function(){$("#status").html("ERROR")},  
     on_disconnected: function(){$("#status").html("DISCONNECTED"); return true},  
     on_online:    function(evt){$("#status").html("ONLINE");},  
     on_offline:    function(evt){$("#status").html("OFFLINE");},  
     on_event:     function(evt){  
                     var val = JSON.stringify(evt.payload.Voltage);  
                     $('#container').val(val);},  
     on_notify:    function(evt){$("#status").html("NOTIFICATION! "+JSON.stringify(evt));}  
    })  
   });  
   </script>  
  </body>  
 </html>  

The post Python, Zerynth and jQWidgets Knob appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
Angular, which is powered by Google is a development platform for building mobile and desktop web applications. It enables building apps by reusing existing code and offers developers the possibility to create their own components.

React, which is powered by Facebook is targeted to simplify the creation of interactive UIs. By designing simple views for each state in your application, React will efficiently update and render just the right components when your data changes.

According to the latest Stack Overflow Developer Survey, Angular is more popular than React in 2018 with almost 10% lead both among professional and casual developers. There are numerous post and opinions which one is better however so far Angular keeps the lead especially in enterprise applications.

Our company provides user interface tools for Angular and React.

The post Angular more popular than React appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements.

A Curated List of Awesome Web Components & Custom Elements: https://htmlelements.github.io/awesome-custom-elements/.
Custom Elements by jQWidgets available here: https://www.jqwidgets.com/customelements/

The post Awesome Web Components & Custom Elements appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
jQWidgets by Admin - 4M ago
jQWidgets v7.0.0 Release, Jan-10-2019 What’s New: – React Components with TSX.
What’s Improved: – jqxGrid Columns and Cells custom styling. A ‘style’ column property has been introduced to make styling of cells and column headers easier. Ex: Javascript Grid Styling
What’s Fixed: – Fixed an issue in jqxScheduler recurrenceException thrown error when recurrenceException is not set, but recurrenceRule is.
– Fixed an issue in jqxScheduler recurrence issue. Ref: #25
– Fixed an issue in jqxScheduler TimelineMonthView rendering of appointments with exactTime rendering mode. Appointments were not rendered correctly. Ref: #16 – Fixed an issue in jqxScheduler Timeline views. Dragging and Resizing of appointments when the Scheduler is with absolute position. Ref: #19
– Fixed an issue in jqxGrid Time Filtering issue. Ref: #27
– Fixed an issue in jqxGrid regarding the validation popup diisplay for last row.
– Fixed an issue in jqxTreeGrid regarding the Aggregates rendering. Ref: #14
– Fixed an issue in jqxNumberInput’s getvalue method when the decimalSeparator is ‘,’.




The post jQWidgets ver.7.0.0 appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
jQWidgets by Admin - 4M ago
<2019>Happy New Year

The post Happy New Year appeared first on Javascript, HTML5, jQuery Widgets.

Read Full Article

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview