├── .gitignore ├── JB.TcHmiProgressBar.sln ├── JB.TcHmiProgressBar ├── .eslintrc.json ├── .gitignore ├── .tfignore ├── Images │ └── logo.png ├── JB.TcHmiProgressBar.hmiextproj ├── Manifest.json ├── TcHmiProgressBar.nuspec ├── TcHmiProgressBarControl │ ├── Description.json │ ├── Icons │ │ ├── 16x16.png │ │ ├── 24x24.png │ │ ├── 32x32.png │ │ └── 64x64.png │ ├── JB_TcHmiProgressBarControl.js │ ├── Schema │ │ └── Types.Schema.json │ ├── Style.css │ ├── TcHmiProgressBarControl.js │ ├── TcHmiProgressBarControl.ts │ ├── Template.html │ └── Themes │ │ ├── Base-Dark │ │ └── Style.css │ │ └── Base │ │ └── Style.css ├── packages.config ├── packages.config.updates ├── packages.xsd ├── tsconfig.json └── tsconfig.tpl.json ├── ProgressBar.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.userosscache 8 | *.sln.docstates 9 | 10 | # User-specific files (MonoDevelop/Xamarin Studio) 11 | *.userprefs 12 | 13 | # Build results 14 | [Dd]ebug/ 15 | [Dd]ebugPublic/ 16 | [Rr]elease/ 17 | [Rr]eleases/ 18 | x64/ 19 | x86/ 20 | bld/ 21 | [Bb]in/ 22 | [Oo]bj/ 23 | [Ll]og/ 24 | 25 | # Visual Studio 2015 cache/options directory 26 | .vs/ 27 | # Uncomment if you have tasks that create the project's static files in wwwroot 28 | #wwwroot/ 29 | 30 | # MSTest test Results 31 | [Tt]est[Rr]esult*/ 32 | [Bb]uild[Ll]og.* 33 | 34 | # NUNIT 35 | *.VisualState.xml 36 | TestResult.xml 37 | 38 | # Build Results of an ATL Project 39 | [Dd]ebugPS/ 40 | [Rr]eleasePS/ 41 | dlldata.c 42 | 43 | # DNX 44 | project.lock.json 45 | project.fragment.lock.json 46 | artifacts/ 47 | 48 | *_i.c 49 | *_p.c 50 | *_i.h 51 | *.ilk 52 | *.meta 53 | *.obj 54 | *.pch 55 | *.pdb 56 | *.pgc 57 | *.pgd 58 | *.rsp 59 | *.sbr 60 | *.tlb 61 | *.tli 62 | *.tlh 63 | *.tmp 64 | *.tmp_proj 65 | *.log 66 | *.vspscc 67 | *.vssscc 68 | .builds 69 | *.pidb 70 | *.svclog 71 | *.scc 72 | 73 | # Chutzpah Test files 74 | _Chutzpah* 75 | 76 | # Visual C++ cache files 77 | ipch/ 78 | *.aps 79 | *.ncb 80 | *.opendb 81 | *.opensdf 82 | *.sdf 83 | *.cachefile 84 | *.VC.db 85 | *.VC.VC.opendb 86 | 87 | # Visual Studio profiler 88 | *.psess 89 | *.vsp 90 | *.vspx 91 | *.sap 92 | 93 | # TFS 2012 Local Workspace 94 | $tf/ 95 | 96 | # Guidance Automation Toolkit 97 | *.gpState 98 | 99 | # ReSharper is a .NET coding add-in 100 | _ReSharper*/ 101 | *.[Rr]e[Ss]harper 102 | *.DotSettings.user 103 | 104 | # JustCode is a .NET coding add-in 105 | .JustCode 106 | 107 | # TeamCity is a build add-in 108 | _TeamCity* 109 | 110 | # DotCover is a Code Coverage Tool 111 | *.dotCover 112 | 113 | # NCrunch 114 | _NCrunch_* 115 | .*crunch*.local.xml 116 | nCrunchTemp_* 117 | 118 | # MightyMoose 119 | *.mm.* 120 | AutoTest.Net/ 121 | 122 | # Web workbench (sass) 123 | .sass-cache/ 124 | 125 | # Installshield output folder 126 | [Ee]xpress/ 127 | 128 | # DocProject is a documentation generator add-in 129 | DocProject/buildhelp/ 130 | DocProject/Help/*.HxT 131 | DocProject/Help/*.HxC 132 | DocProject/Help/*.hhc 133 | DocProject/Help/*.hhk 134 | DocProject/Help/*.hhp 135 | DocProject/Help/Html2 136 | DocProject/Help/html 137 | 138 | # Click-Once directory 139 | publish/ 140 | 141 | # Publish Web Output 142 | *.[Pp]ublish.xml 143 | *.azurePubxml 144 | # TODO: Comment the next line if you want to checkin your web deploy settings 145 | # but database connection strings (with potential passwords) will be unencrypted 146 | #*.pubxml 147 | *.publishproj 148 | 149 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 150 | # checkin your Azure Web App publish settings, but sensitive information contained 151 | # in these scripts will be unencrypted 152 | PublishScripts/ 153 | 154 | # NuGet Packages 155 | *.nupkg 156 | # The packages folder can be ignored because of Package Restore 157 | **/packages/* 158 | # except build/, which is used as an MSBuild target. 159 | !**/packages/build/ 160 | # Uncomment if necessary however generally it will be regenerated when needed 161 | #!**/packages/repositories.config 162 | # NuGet v3's project.json files produces more ignoreable files 163 | *.nuget.props 164 | *.nuget.targets 165 | 166 | # Microsoft Azure Build Output 167 | csx/ 168 | *.build.csdef 169 | 170 | # Microsoft Azure Emulator 171 | ecf/ 172 | rcf/ 173 | 174 | # Windows Store app package directories and files 175 | AppPackages/ 176 | BundleArtifacts/ 177 | Package.StoreAssociation.xml 178 | _pkginfo.txt 179 | 180 | # Visual Studio cache files 181 | # files ending in .cache can be ignored 182 | *.[Cc]ache 183 | # but keep track of directories ending in .cache 184 | !*.[Cc]ache/ 185 | 186 | # Others 187 | ClientBin/ 188 | ~$* 189 | *~ 190 | *.dbmdl 191 | *.dbproj.schemaview 192 | *.jfm 193 | *.pfx 194 | *.publishsettings 195 | node_modules/ 196 | orleans.codegen.cs 197 | 198 | # Since there are multiple workflows, uncomment next line to ignore bower_components 199 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 200 | #bower_components/ 201 | 202 | # RIA/Silverlight projects 203 | Generated_Code/ 204 | 205 | # Backup & report files from converting an old project file 206 | # to a newer Visual Studio version. Backup files are not needed, 207 | # because we have git ;-) 208 | _UpgradeReport_Files/ 209 | Backup*/ 210 | UpgradeLog*.XML 211 | UpgradeLog*.htm 212 | 213 | # SQL Server files 214 | *.mdf 215 | *.ldf 216 | 217 | # Business Intelligence projects 218 | *.rdl.data 219 | *.bim.layout 220 | *.bim_*.settings 221 | 222 | # Microsoft Fakes 223 | FakesAssemblies/ 224 | 225 | # GhostDoc plugin setting file 226 | *.GhostDoc.xml 227 | 228 | # Node.js Tools for Visual Studio 229 | .ntvs_analysis.dat 230 | 231 | # Visual Studio 6 build log 232 | *.plg 233 | 234 | # Visual Studio 6 workspace options file 235 | *.opt 236 | 237 | # Visual Studio LightSwitch build output 238 | **/*.HTMLClient/GeneratedArtifacts 239 | **/*.DesktopClient/GeneratedArtifacts 240 | **/*.DesktopClient/ModelManifest.xml 241 | **/*.Server/GeneratedArtifacts 242 | **/*.Server/ModelManifest.xml 243 | _Pvt_Extensions 244 | 245 | # Paket dependency manager 246 | .paket/paket.exe 247 | paket-files/ 248 | 249 | # FAKE - F# Make 250 | .fake/ 251 | 252 | # JetBrains Rider 253 | .idea/ 254 | *.sln.iml 255 | 256 | # CodeRush 257 | .cr/ 258 | 259 | # Python Tools for Visual Studio (PTVS) 260 | __pycache__/ 261 | *.pyc 262 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 15 4 | VisualStudioVersion = 15.0.28307.1738 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{3B740506-4966-4147-AB1F-357FE08946EA}") = "JB.TcHmiProgressBar", "JB.TcHmiProgressBar\JB.TcHmiProgressBar.hmiextproj", "{55C8B09E-419E-40FB-8ECF-12CA6BD69D4A}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|TwinCAT HMI = Debug|TwinCAT HMI 11 | Release|TwinCAT HMI = Release|TwinCAT HMI 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {55C8B09E-419E-40FB-8ECF-12CA6BD69D4A}.Debug|TwinCAT HMI.ActiveCfg = Debug|TwinCAT HMI 15 | {55C8B09E-419E-40FB-8ECF-12CA6BD69D4A}.Debug|TwinCAT HMI.Build.0 = Debug|TwinCAT HMI 16 | {55C8B09E-419E-40FB-8ECF-12CA6BD69D4A}.Release|TwinCAT HMI.ActiveCfg = Release|TwinCAT HMI 17 | {55C8B09E-419E-40FB-8ECF-12CA6BD69D4A}.Release|TwinCAT HMI.Build.0 = Release|TwinCAT HMI 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | GlobalSection(ExtensibilityGlobals) = postSolution 23 | SolutionGuid = {686A41C9-9A4F-40DB-A987-34C2A36C10AD} 24 | EndGlobalSection 25 | EndGlobal 26 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/eslintrc", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "jquery": true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 6, 10 | "sourceType": "script" 11 | }, 12 | "rules": { 13 | "no-dupe-args": "error", 14 | "no-dupe-else-if": "error", 15 | "no-duplicate-case": "warn", 16 | "no-redeclare": "error", 17 | "no-unexpected-multiline": "error", 18 | "use-isnan": "error" 19 | }, 20 | "overrides": [ 21 | { 22 | "files": [ "*.ts", "*.tsx" ], 23 | "rules": { 24 | 25 | } 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore TwinCAT HMI temporary files, build results, and 2 | ## files generated by popular TwinCAT HMI add-ons. 3 | 4 | .engineering_servers/ 5 | tchmipublish.journal.json 6 | liveview_* 7 | *.cache 8 | *.db-shm 9 | *.db-wal 10 | *.pid 11 | **/.hmiframework/ 12 | **/.hmipkgs/ 13 | **/*.d.ts 14 | **/*.js.map 15 | 16 | ## Ignore Visual Studio temporary files, build results, and 17 | ## files generated by popular Visual Studio add-ons. 18 | ## 19 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 20 | 21 | # User-specific files 22 | *.suo 23 | *.user 24 | *.userosscache 25 | *.sln.docstates 26 | *.vcxproj.filters 27 | 28 | # User-specific files (MonoDevelop/Xamarin Studio) 29 | *.userprefs 30 | 31 | # Build results 32 | [Dd]ebug/ 33 | [Dd]ebugPublic/ 34 | [Rr]elease/ 35 | [Rr]eleases/ 36 | x64/ 37 | x86/ 38 | bld/ 39 | [Bb]in/ 40 | [Oo]bj/ 41 | [Ll]og/ 42 | 43 | # Visual Studio 2015 cache/options directory 44 | .vs/ 45 | # Uncomment if you have tasks that create the project's static files in wwwroot 46 | #wwwroot/ 47 | 48 | # MSTest test Results 49 | [Tt]est[Rr]esult*/ 50 | [Bb]uild[Ll]og.* 51 | 52 | # NUNIT 53 | *.VisualState.xml 54 | TestResult.xml 55 | 56 | # Build Results of an ATL Project 57 | [Dd]ebugPS/ 58 | [Rr]eleasePS/ 59 | dlldata.c 60 | 61 | # .NET Core 62 | project.lock.json 63 | project.fragment.lock.json 64 | artifacts/ 65 | **/Properties/launchSettings.json 66 | 67 | *_i.c 68 | *_p.c 69 | *_i.h 70 | *.ilk 71 | *.meta 72 | *.obj 73 | *.pch 74 | *.pdb 75 | *.pgc 76 | *.pgd 77 | *.rsp 78 | *.sbr 79 | *.tlb 80 | *.tli 81 | *.tlh 82 | *.tmp 83 | *.tmp_proj 84 | *.log 85 | *.vspscc 86 | *.vssscc 87 | .builds 88 | *.pidb 89 | *.svclog 90 | *.scc 91 | 92 | # Chutzpah Test files 93 | _Chutzpah* 94 | 95 | # Visual C++ cache files 96 | ipch/ 97 | *.aps 98 | *.ncb 99 | *.opendb 100 | *.opensdf 101 | *.sdf 102 | *.cachefile 103 | *.VC.db 104 | *.VC.VC.opendb 105 | 106 | # Visual Studio profiler 107 | *.psess 108 | *.vsp 109 | *.vspx 110 | *.sap 111 | 112 | # TFS 2012 Local Workspace 113 | $tf/ 114 | 115 | # Guidance Automation Toolkit 116 | *.gpState 117 | 118 | # ReSharper is a .NET coding add-in 119 | _ReSharper*/ 120 | *.[Rr]e[Ss]harper 121 | *.DotSettings.user 122 | 123 | # JustCode is a .NET coding add-in 124 | .JustCode 125 | 126 | # TeamCity is a build add-in 127 | _TeamCity* 128 | 129 | # DotCover is a Code Coverage Tool 130 | *.dotCover 131 | 132 | # Visual Studio code coverage results 133 | *.coverage 134 | *.coveragexml 135 | 136 | # NCrunch 137 | _NCrunch_* 138 | .*crunch*.local.xml 139 | nCrunchTemp_* 140 | 141 | # MightyMoose 142 | *.mm.* 143 | AutoTest.Net/ 144 | 145 | # Web workbench (sass) 146 | .sass-cache/ 147 | 148 | # Installshield output folder 149 | [Ee]xpress/ 150 | 151 | # DocProject is a documentation generator add-in 152 | DocProject/buildhelp/ 153 | DocProject/Help/*.HxT 154 | DocProject/Help/*.HxC 155 | DocProject/Help/*.hhc 156 | DocProject/Help/*.hhk 157 | DocProject/Help/*.hhp 158 | DocProject/Help/Html2 159 | DocProject/Help/html 160 | 161 | # Click-Once directory 162 | publish/ 163 | 164 | # Publish Web Output 165 | *.[Pp]ublish.xml 166 | *.azurePubxml 167 | # TODO: Comment the next line if you want to checkin your web deploy settings 168 | # but database connection strings (with potential passwords) will be unencrypted 169 | *.pubxml 170 | *.publishproj 171 | 172 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 173 | # checkin your Azure Web App publish settings, but sensitive information contained 174 | # in these scripts will be unencrypted 175 | PublishScripts/ 176 | 177 | # NuGet Packages 178 | *.nupkg 179 | # The packages folder can be ignored because of Package Restore 180 | **/packages/* 181 | # except build/, which is used as an MSBuild target. 182 | !**/packages/build/ 183 | # Uncomment if necessary however generally it will be regenerated when needed 184 | #!**/packages/repositories.config 185 | # NuGet v3's project.json files produces more ignoreable files 186 | *.nuget.props 187 | *.nuget.targets 188 | 189 | # Microsoft Azure Build Output 190 | csx/ 191 | *.build.csdef 192 | 193 | # Microsoft Azure Emulator 194 | ecf/ 195 | rcf/ 196 | 197 | # Windows Store app package directories and files 198 | AppPackages/ 199 | BundleArtifacts/ 200 | Package.StoreAssociation.xml 201 | _pkginfo.txt 202 | 203 | # Visual Studio cache files 204 | # files ending in .cache can be ignored 205 | *.[Cc]ache 206 | # but keep track of directories ending in .cache 207 | !*.[Cc]ache/ 208 | 209 | # Others 210 | ClientBin/ 211 | ~$* 212 | *~ 213 | *.dbmdl 214 | *.dbproj.schemaview 215 | *.jfm 216 | *.pfx 217 | *.publishsettings 218 | node_modules/ 219 | orleans.codegen.cs 220 | 221 | # Since there are multiple workflows, uncomment next line to ignore bower_components 222 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 223 | #bower_components/ 224 | 225 | # RIA/Silverlight projects 226 | Generated_Code/ 227 | 228 | # Backup & report files from converting an old project file 229 | # to a newer Visual Studio version. Backup files are not needed, 230 | # because git is used. 231 | _UpgradeReport_Files/ 232 | Backup*/ 233 | UpgradeLog*.XML 234 | UpgradeLog*.htm 235 | 236 | # SQL Server files 237 | *.mdf 238 | *.ldf 239 | 240 | # Business Intelligence projects 241 | *.rdl.data 242 | *.bim.layout 243 | *.bim_*.settings 244 | 245 | # Microsoft Fakes 246 | FakesAssemblies/ 247 | 248 | # GhostDoc plugin setting file 249 | *.GhostDoc.xml 250 | 251 | # Node.js Tools for Visual Studio 252 | .ntvs_analysis.dat 253 | 254 | # Visual Studio 6 build log 255 | *.plg 256 | 257 | # Visual Studio 6 workspace options file 258 | *.opt 259 | 260 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 261 | *.vbw 262 | 263 | # Visual Studio LightSwitch build output 264 | **/*.HTMLClient/GeneratedArtifacts 265 | **/*.DesktopClient/GeneratedArtifacts 266 | **/*.DesktopClient/ModelManifest.xml 267 | **/*.Server/GeneratedArtifacts 268 | **/*.Server/ModelManifest.xml 269 | _Pvt_Extensions 270 | 271 | # Paket dependency manager 272 | .paket/paket.exe 273 | paket-files/ 274 | 275 | # FAKE - F# Make 276 | .fake/ 277 | 278 | # JetBrains Rider 279 | .idea/ 280 | *.sln.iml 281 | 282 | # CodeRush 283 | .cr/ 284 | 285 | # Python Tools for Visual Studio (PTVS) 286 | __pycache__/ 287 | *.pyc 288 | 289 | # Cake - Uncomment if you are using it 290 | # tools/ -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/.tfignore: -------------------------------------------------------------------------------- 1 | ## Ignore TwinCAT HMI temporary files, build results, and 2 | ## files generated by popular TwinCAT HMI add-ons. 3 | 4 | .engineering_servers/ 5 | tchmipublish.journal.json 6 | liveview_* 7 | *.cache 8 | *.db-shm 9 | *.db-wal 10 | *.pid 11 | **/.hmiframework/ 12 | **/.hmipkgs/ 13 | **/*.d.ts 14 | **/*.js.map 15 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/Images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hijaaack/JB.TcHmiProgressBar/2c98b4e8cdb67513b89df13d0a129d4ec4261ffa/JB.TcHmiProgressBar/Images/logo.png -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/JB.TcHmiProgressBar.hmiextproj: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | $(registry:HKEY_LOCAL_MACHINE\Software\Beckhoff\TwinCAT3\3.1@InstallDir)\..\Functions\TE2000-HMI-Engineering 7 | $(registry:HKEY_LOCAL_MACHINE\Software\Wow6432Node\Beckhoff\TwinCAT3\3.1@InstallDir)\..\Functions\TE2000-HMI-Engineering 8 | Debug 9 | TwinCAT HMI 10 | 15.0 11 | TwinCAT HMI 12 | $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion) 13 | [1.12,] 14 | native,Version=v1.12.0,Profile=tchmi 15 | native1.12-tchmi 16 | true 17 | {3B740506-4966-4147-AB1F-357FE08946EA} 18 | 55c8b09e-419e-40fb-8ecf-12ca6bd69d4a 19 | JB_TcHmiProgressBar 20 | JB.TcHmiProgressBar 21 | 1.12.752.0 22 | 1.12.752.0 23 | 24 | 25 | TwinCAT HMI 26 | true 27 | full 28 | false 29 | bin\Debug\ 30 | DEBUG;TRACE 31 | prompt 32 | 4 33 | 3.9 34 | false 35 | JB_TcHmiProgressBar 36 | 37 | 38 | TwinCAT HMI 39 | true 40 | bin\Release\ 41 | TRACE 42 | prompt 43 | 4 44 | 3.9 45 | false 46 | JB_TcHmiProgressBar 47 | 48 | 49 | {CC169D49-EEDD-4BAF-8151-63DF12EDD7B4} 50 | 51 | 52 | $(TcHmiDirectory)\MSBuild\Beckhoff.TwinCAT.HMI.tasks 53 | $(TcHmiDirectory)\MSBuild\Beckhoff.TwinCAT.HMI.targets 54 | 55 | 56 | 57 | 58 | 59 | 60 | Content 61 | 62 | 63 | Content 64 | 65 | 66 | Content 67 | 68 | 69 | Content 70 | 71 | 72 | Content 73 | 74 | 75 | Content 76 | true 77 | 78 | 79 | Content 80 | true 81 | tsconfig.tpl.json 82 | 83 | 84 | 85 | 86 | false 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | Content 97 | false 98 | 99 | 100 | Content 101 | false 102 | 103 | 104 | Content 105 | true 106 | 107 | 108 | Content 109 | false 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | $(TypeScriptSdkDir)\$(TypeScriptToolsVersion)\tsc.js 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | PreBuildEvent; 141 | CoreBuild; 142 | PostBuildEvent 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/Manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "modules": [ 3 | { 4 | "type": "Package", 5 | "nugetId": "Beckhoff.TwinCAT.HMI.Framework" 6 | }, 7 | { 8 | "type": "Control", 9 | "basePath": "TcHmiProgressBarControl/", 10 | "descriptionFile": "Description.json", 11 | "toolboxCategory": "TcHmiProgressBar:1632" 12 | } 13 | ], 14 | "provideMetadata": { 15 | "toolbox": { 16 | "TcHmiProgressBar": { 17 | "1632": "JB: Controls", 18 | "200": "TcHmiProgressBarControl" 19 | } 20 | } 21 | }, 22 | "$schema": ".hmiframework/Schema/Manifest.Schema.json", 23 | "apiVersion": 1 24 | } -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBar.nuspec: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | JB.TcHmiProgressBar 5 | 1.0.0 6 | TcHmiProgressBar 7 | Jack Borelius 8 | Jack Borelius 9 | https://github.com/hijaaack/JB.TcHmiProgressBar 10 | MIT 11 | images/logo.png 12 | false 13 | Animated ProgressBar with Label. 14 | First release 15 | Copyright 2022 16 | TwinCAT HMI 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Description.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../.hmiframework/Schema/ControlDescription.Schema.json", 3 | "apiVersion": 1, 4 | "name": "TcHmiProgressBarControl", 5 | "namespace": "TcHmi.Controls.TcHmiProgressBar", 6 | "displayName": "TcHmiProgressBarControl", 7 | "version": { 8 | "full": "1.0.0.0", 9 | "major": 1, 10 | "minor": 0, 11 | "revision": 0, 12 | "build": 0 13 | }, 14 | "visible": true, 15 | "themeable": "Standard", 16 | "base": "TcHmi.Controls.System.TcHmiControl", 17 | "description": "Animated ProgressBar with Label.", 18 | "properties": { 19 | "containerControl": false, 20 | "geometry": { 21 | "width": 250, 22 | "height": 60 23 | } 24 | }, 25 | "template": "Template.html", 26 | "icons": [ 27 | { 28 | "name": "Icons/16x16.png", 29 | "width": 16, 30 | "height": 16 31 | }, 32 | { 33 | "name": "Icons/24x24.png", 34 | "width": 24, 35 | "height": 24 36 | }, 37 | { 38 | "name": "Icons/32x32.png", 39 | "width": 32, 40 | "height": 32 41 | }, 42 | { 43 | "name": "Icons/64x64.png", 44 | "width": 64, 45 | "height": 64 46 | } 47 | ], 48 | "dependencyFiles": [ 49 | { 50 | "name": "TcHmiProgressBarControl.js", 51 | "type": "JavaScript", 52 | "description": "Contains all the main logic." 53 | }, 54 | { 55 | "name": "Style.css", 56 | "type": "Stylesheet", 57 | "description": "Theme independent style" 58 | } 59 | ], 60 | "themes": { 61 | "Base": { 62 | "resources": [ 63 | { 64 | "name": "Themes/Base/Style.css", 65 | "type": "Stylesheet", 66 | "description": "Theme dependent style" 67 | } 68 | ] 69 | }, 70 | "Base-Dark": { 71 | "resources": [ 72 | { 73 | "name": "Themes/Base-Dark/Style.css", 74 | "type": "Stylesheet", 75 | "description": "Theme dependent style" 76 | } 77 | ] 78 | } 79 | }, 80 | "attributes": [ 81 | { 82 | "name": "data-tchmi-progressbar-value", 83 | "displayName": "Value", 84 | "propertyName": "Value", 85 | "propertySetterName": "setValue", 86 | "propertyGetterName": "getValue", 87 | "visible": true, 88 | "type": "tchmi:general#/definitions/Number", 89 | "category": "ProgressBar", 90 | "description": "ProgressBar Value.", 91 | "requiredOnCompile": false, 92 | "readOnly": false, 93 | "bindable": true, 94 | "heritable": false, 95 | "defaultValue": 50, 96 | "defaultValueInternal": 50 97 | }, 98 | { 99 | "name": "data-tchmi-progressbar-min", 100 | "displayName": "Min", 101 | "propertyName": "Min", 102 | "propertySetterName": "setMin", 103 | "propertyGetterName": "getMin", 104 | "visible": true, 105 | "type": "tchmi:general#/definitions/Number", 106 | "category": "ProgressBar", 107 | "description": "ProgressBar Min Value.", 108 | "requiredOnCompile": false, 109 | "readOnly": false, 110 | "bindable": true, 111 | "heritable": false, 112 | "defaultValue": 0, 113 | "defaultValueInternal": 0 114 | }, 115 | { 116 | "name": "data-tchmi-progressbar-max", 117 | "displayName": "Max", 118 | "propertyName": "Max", 119 | "propertySetterName": "setMax", 120 | "propertyGetterName": "getMax", 121 | "visible": true, 122 | "type": "tchmi:general#/definitions/Number", 123 | "category": "ProgressBar", 124 | "description": "ProgressBar Max Value.", 125 | "requiredOnCompile": false, 126 | "readOnly": false, 127 | "bindable": true, 128 | "heritable": false, 129 | "defaultValue": 100, 130 | "defaultValueInternal": 100 131 | }, 132 | { 133 | "name": "data-tchmi-progressbar-label", 134 | "displayName": "Label", 135 | "propertyName": "Label", 136 | "propertySetterName": "setLabel", 137 | "propertyGetterName": "getLabel", 138 | "visible": true, 139 | "type": "tchmi:general#/definitions/String", 140 | "category": "ProgressBar", 141 | "description": "Label under the progressbar.", 142 | "requiredOnCompile": false, 143 | "readOnly": false, 144 | "bindable": true, 145 | "heritable": false, 146 | "defaultValue": "Label", 147 | "defaultValueInternal": "Label" 148 | }, 149 | { 150 | "name": "data-tchmi-progressbar-fontsize", 151 | "displayName": "LabelFontSize", 152 | "propertyName": "LabelFontSize", 153 | "propertySetterName": "setLabelFontSize", 154 | "propertyGetterName": "getLabelFontSize", 155 | "visible": true, 156 | "type": "tchmi:general#/definitions/Number", 157 | "category": "ProgressBar", 158 | "description": "Label Font Size", 159 | "requiredOnCompile": false, 160 | "readOnly": false, 161 | "bindable": true, 162 | "heritable": false, 163 | "defaultValue": 14, 164 | "defaultValueInternal": 14 165 | }, 166 | { 167 | "name": "data-tchmi-progressbar-label-color", 168 | "propertyName": "LabelColor", 169 | "propertySetterName": "setLabelColor", 170 | "propertyGetterName": "getLabelColor", 171 | "displayName": "LabelColor", 172 | "visible": true, 173 | "themeable": "Standard", 174 | "displayPriority": 10, 175 | "type": "tchmi:framework#/definitions/SolidColor", 176 | "category": "Colors", 177 | "description": "The color of the label.", 178 | "readOnly": false, 179 | "bindable": true, 180 | "heritable": true, 181 | "defaultValue": "rgba(0, 0, 0, 1)", 182 | "defaultValueInternal": "rgba(0, 0, 0, 1)" 183 | }, 184 | { 185 | "name": "data-tchmi-progressbar-color", 186 | "propertyName": "ProgressBackgroundColor", 187 | "propertySetterName": "setProgressBackgroundColor", 188 | "propertyGetterName": "getProgressBackgroundColor", 189 | "displayName": "ProgressBackgroundColor", 190 | "visible": true, 191 | "themeable": "Standard", 192 | "displayPriority": 10, 193 | "type": "tchmi:framework#/definitions/SolidColor", 194 | "category": "Colors", 195 | "description": "The background color of the progressbar.", 196 | "readOnly": false, 197 | "bindable": true, 198 | "heritable": true, 199 | "defaultValue": "rgba(71, 71, 71, 1)", 200 | "defaultValueInternal": "rgba(71, 71, 71, 1)" 201 | }, 202 | { 203 | "name": "data-tchmi-progressbar-bar-color", 204 | "propertyName": "ProgressBarColor", 205 | "propertySetterName": "setProgressBarColor", 206 | "propertyGetterName": "getProgressBarColor", 207 | "displayName": "ProgressBarColor", 208 | "visible": true, 209 | "themeable": "Standard", 210 | "displayPriority": 10, 211 | "type": "tchmi:framework#/definitions/SolidColor", 212 | "category": "Colors", 213 | "description": "The progressbar color.", 214 | "readOnly": false, 215 | "bindable": true, 216 | "heritable": true, 217 | "defaultValue": "rgba(36, 219, 0, 1)", 218 | "defaultValueInternal": "rgba(36, 219, 0, 1)" 219 | } 220 | ], 221 | "attributeCategories": [ 222 | { 223 | "name": "ProgressBar", 224 | "displayPriority": 10 225 | } 226 | ], 227 | "functions": [], 228 | "events": [], 229 | "dataTypes": [ 230 | { 231 | "schema": "Schema/Types.Schema.json" 232 | } 233 | ] 234 | } -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hijaaack/JB.TcHmiProgressBar/2c98b4e8cdb67513b89df13d0a129d4ec4261ffa/JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/16x16.png -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/24x24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hijaaack/JB.TcHmiProgressBar/2c98b4e8cdb67513b89df13d0a129d4ec4261ffa/JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/24x24.png -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hijaaack/JB.TcHmiProgressBar/2c98b4e8cdb67513b89df13d0a129d4ec4261ffa/JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/32x32.png -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/64x64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hijaaack/JB.TcHmiProgressBar/2c98b4e8cdb67513b89df13d0a129d4ec4261ffa/JB.TcHmiProgressBar/TcHmiProgressBarControl/Icons/64x64.png -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/JB_TcHmiProgressBarControl.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Generated 1/18/2022 3:31:19 PM 3 | * Copyright (C) 2022 4 | */ 5 | var TcHmi; 6 | (function (TcHmi) { 7 | let Controls; 8 | (function (Controls) { 9 | let JB_TcHmiProgressBar; 10 | (function (JB_TcHmiProgressBar) { 11 | class JB_TcHmiProgressBarControl extends TcHmi.Controls.System.TcHmiControl { 12 | /* 13 | Attribute philosophy 14 | -------------------- 15 | - Local variables are not set while definition in class, so they have the value 'undefined'. 16 | - On compile the Framework sets the value from HTML or from theme (possibly 'null') via normal setters. 17 | - The "changed detection" in the setter will result in processing the value only once while compile. 18 | - Attention: If we have a Server Binding on an Attribute the setter will be called once with null to initialize and later with the correct value. 19 | */ 20 | /** 21 | * Constructor of the control 22 | * @param {JQuery} element Element from HTML (internal, do not use) 23 | * @param {JQuery} pcElement precompiled Element (internal, do not use) 24 | * @param {TcHmi.Controls.ControlAttributeList} attrs Attributes defined in HTML in a special format (internal, do not use) 25 | * @returns {void} 26 | */ 27 | constructor(element, pcElement, attrs) { 28 | /** Call base class constructor */ 29 | super(element, pcElement, attrs); 30 | } 31 | /** 32 | * If raised, the control object exists in control cache and constructor of each inheritation level was called. 33 | * Call attribute processor functions here to initialize default values! 34 | */ 35 | __previnit() { 36 | // Fetch template root element 37 | this.__elementTemplateRoot = this.__element.find('.TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl-Template'); 38 | if (this.__elementTemplateRoot.length === 0) { 39 | throw new Error('Invalid Template.html'); 40 | } 41 | this.__elementProgressDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-progress'); 42 | this.__elementProgressBarDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-bar'); 43 | this.__elementLabelDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-label'); 44 | // Call __previnit of base class 45 | super.__previnit(); 46 | } 47 | /** 48 | * Is called during control initialize phase after attribute setter have been called based on it's default or initial html dom values. 49 | * @returns {void} 50 | */ 51 | __init() { 52 | super.__init(); 53 | } 54 | /** 55 | * Is called by tachcontrol() after the control instance gets part of the current DOM. 56 | * Is only allowed to be called from the framework itself! 57 | */ 58 | __attach() { 59 | super.__attach(); 60 | /** 61 | * Initialize everything which is only available while the control is part of the active dom. 62 | */ 63 | } 64 | /** 65 | * Is called by tachcontrol() after the control instance is no longer part of the current DOM. 66 | * Is only allowed to be called from the framework itself! 67 | */ 68 | __detach() { 69 | super.__detach(); 70 | /** 71 | * Disable everything which is not needed while the control is not part of the active dom. 72 | * No need to listen to events for example! 73 | */ 74 | } 75 | /** 76 | * Destroy the current control instance. 77 | * Will be called automatically if system destroys control! 78 | */ 79 | destroy() { 80 | /** 81 | * While __keepAlive is set to true control must not be destroyed. 82 | */ 83 | if (this.__keepAlive) { 84 | return; 85 | } 86 | super.destroy(); 87 | /** 88 | * Free resources like child controls etc. 89 | */ 90 | } 91 | //ProgressBar Properties 92 | getValue() { 93 | return this.__value; 94 | } 95 | setValue(valueNew) { 96 | //convert the new value 97 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 98 | //if converted value is null, get internal default 99 | if (convertedValue === null) { 100 | convertedValue = this.getAttributeDefaultValueInternal("Value"); 101 | } 102 | if (tchmi_equal(this.__value, convertedValue)) 103 | return; 104 | //save the new value 105 | this.__value = convertedValue; 106 | //Inform the system that the function has a changed result 107 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getValue"]); 108 | //Process the new Value 109 | this.__processValue(); 110 | } 111 | getMin() { 112 | return this.__min; 113 | } 114 | setMin(valueNew) { 115 | //convert the new value 116 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 117 | //if converted value is null, get internal default 118 | if (convertedValue === null) { 119 | convertedValue = this.getAttributeDefaultValueInternal("Min"); 120 | } 121 | if (tchmi_equal(this.__min, convertedValue)) 122 | return; 123 | //save the new value 124 | this.__min = convertedValue; 125 | //Inform the system that the function has a changed result 126 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getMin"]); 127 | //Process the new Value 128 | this.__processValue(); 129 | } 130 | getMax() { 131 | return this.__max; 132 | } 133 | setMax(valueNew) { 134 | //convert the new value 135 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 136 | //if converted value is null, get internal default 137 | if (convertedValue === null) { 138 | convertedValue = this.getAttributeDefaultValueInternal("Max"); 139 | } 140 | if (tchmi_equal(this.__max, convertedValue)) 141 | return; 142 | //save the new value 143 | this.__max = convertedValue; 144 | //Inform the system that the function has a changed result 145 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getMax"]); 146 | //Process the new Value 147 | this.__processValue(); 148 | } 149 | getLabel() { 150 | return this.__label; 151 | } 152 | setLabel(valueNew) { 153 | //convert the new value 154 | let convertedValue = TcHmi.ValueConverter.toString(valueNew); 155 | //if converted value is null, get internal default 156 | if (convertedValue === null) { 157 | convertedValue = this.getAttributeDefaultValueInternal("Label"); 158 | } 159 | if (tchmi_equal(this.__label, convertedValue)) 160 | return; 161 | //save the new value 162 | this.__label = convertedValue; 163 | //Inform the system that the function has a changed result 164 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabel"]); 165 | //Process the new Value 166 | this.__processLabel(); 167 | } 168 | getLabelFontSize() { 169 | return this.__labelFontSize; 170 | } 171 | setLabelFontSize(valueNew) { 172 | //convert the new value 173 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 174 | //if converted value is null, get internal default 175 | if (convertedValue === null) { 176 | convertedValue = this.getAttributeDefaultValueInternal("LabelFontSize"); 177 | } 178 | if (tchmi_equal(this.__labelFontSize, convertedValue)) 179 | return; 180 | //save the new value 181 | this.__labelFontSize = convertedValue; 182 | //Inform the system that the function has a changed result 183 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabelFontSize"]); 184 | //Process the new Value 185 | this.__processFontSize(); 186 | } 187 | //Color Properties 188 | getLabelColor() { 189 | return this.__labelColor; 190 | } 191 | setLabelColor(valueNew) { 192 | let e = TcHmi.ValueConverter.toObject(valueNew); 193 | // @ts-ignore 194 | this.__labelColor = e; 195 | //Inform the system that the function has a changed result 196 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabelColor"]); 197 | this.__processLabelColor(); 198 | } 199 | getProgressBackgroundColor() { 200 | return this.__progressBackgroundColor; 201 | } 202 | setProgressBackgroundColor(valueNew) { 203 | let e = TcHmi.ValueConverter.toObject(valueNew); 204 | // @ts-ignore 205 | this.__progressBackgroundColor = e; 206 | //Inform the system that the function has a changed result 207 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getProgressBackgroundColor"]); 208 | this.__processProgressBackgroundColor(); 209 | } 210 | getProgressBarColor() { 211 | return this.__progressBarColor; 212 | } 213 | setProgressBarColor(valueNew) { 214 | let e = TcHmi.ValueConverter.toObject(valueNew); 215 | // @ts-ignore 216 | this.__progressBarColor = e; 217 | //Inform the system that the function has a changed result 218 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getProgressBarColor"]); 219 | this.__processProgressBarColor(); 220 | } 221 | //Methods 222 | __processValue() { 223 | console.log("Value"); 224 | console.log(this.__value); 225 | console.log("min"); 226 | console.log(this.__min); 227 | console.log("max"); 228 | console.log(this.__max); 229 | } 230 | __processLabel() { 231 | console.log("Label"); 232 | console.log(this.__label); 233 | } 234 | __processFontSize() { 235 | console.log("FontSize"); 236 | console.log(this.__labelFontSize); 237 | } 238 | __processLabelColor() { 239 | console.log("LabelColor"); 240 | console.log(this.__label); 241 | } 242 | __processProgressBackgroundColor() { 243 | console.log("__processProgressBackgroundColor"); 244 | console.log(this.__progressBackgroundColor); 245 | } 246 | __processProgressBarColor() { 247 | console.log("__processProgressBarColor"); 248 | console.log(this.__progressBarColor); 249 | } 250 | } 251 | JB_TcHmiProgressBar.JB_TcHmiProgressBarControl = JB_TcHmiProgressBarControl; 252 | })(JB_TcHmiProgressBar = Controls.JB_TcHmiProgressBar || (Controls.JB_TcHmiProgressBar = {})); 253 | })(Controls = TcHmi.Controls || (TcHmi.Controls = {})); 254 | })(TcHmi || (TcHmi = {})); 255 | /** 256 | * Register Control 257 | */ 258 | TcHmi.Controls.registerEx('JB_TcHmiProgressBarControl', 'TcHmi.Controls.JB_TcHmiProgressBar', TcHmi.Controls.JB_TcHmiProgressBar.JB_TcHmiProgressBarControl); 259 | //# sourceMappingURL=JB_TcHmiProgressBarControl.js.map -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Schema/Types.Schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/draft-04/schema", 3 | "definitions": { 4 | "TcHmi.Controls.JB_TcHmiProgressBar.JB_TcHmiProgressBarControl": { 5 | "type": "object", 6 | "frameworkInstanceOf": "TcHmi.Controls.System.TcHmiControl", 7 | "frameworkControlType": "JB_TcHmiProgressBarControl", 8 | "frameworkControlNamespace": "TcHmi.Controls.JB_TcHmiProgressBar" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Style.css: -------------------------------------------------------------------------------- 1 | /* General theme independed control css. */ 2 | 3 | .TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl { 4 | overflow: hidden; 5 | } 6 | 7 | .TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl-Template { 8 | width: 100%; 9 | height: 100%; 10 | padding: 3px; 11 | display: flex; 12 | flex-direction: column; 13 | } 14 | 15 | .jb-tchmiprogressbar-progress { 16 | height: 100%; 17 | background: rgba(71, 71, 71, 1); 18 | padding: 3px; 19 | } 20 | 21 | .jb-tchmiprogressbar-bar { 22 | background: rgba(36, 219, 0, 1); 23 | width: 50%; 24 | height: 100%; 25 | } 26 | 27 | .jb-tchmiprogressbar-animation { 28 | height: 100%; 29 | background: rgba(255, 255, 255, 0.15); 30 | position: relative; 31 | animation-name: backgroundWidthAnimation; 32 | animation-duration: 3s; 33 | animation-iteration-count: infinite; 34 | animation-timing-function: ease; 35 | } 36 | 37 | .jb-tchmiprogressbar-label { 38 | margin: 0 auto; 39 | font-size: 14pt; 40 | } 41 | 42 | .jb-tchmiprogressbar-label::before { 43 | content: attr(data-label); 44 | } 45 | 46 | @keyframes backgroundWidthAnimation { 47 | 0% { 48 | width: 0%; 49 | } 50 | 51 | 100% { 52 | width: 100%; 53 | } 54 | } 55 | 56 | 57 | /* If the main use for this control is interaction 58 | uncomment the following lines to give user feedback: 59 | This overlays the whole control with a white color 60 | and change the mouse cursor */ 61 | 62 | /* 63 | .TcHmi_Controls_$default_namespace$_JB_TcHmiProgressBar.TcHmi_Controls_System_TcHmiControl-operate-disallowed::after { 64 | content: ''; 65 | position: absolute; 66 | top: 0px; 67 | left: 0px; 68 | width: 100%; 69 | height: 100%; 70 | background-color: rgba(255, 255, 255, 0.5); 71 | z-index: 100; 72 | cursor: not-allowed; 73 | } 74 | */ -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/TcHmiProgressBarControl.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Generated 1/18/2022 3:31:19 PM 3 | * Copyright (C) 2022 4 | */ 5 | var TcHmi; 6 | (function (TcHmi) { 7 | let Controls; 8 | (function (Controls) { 9 | let TcHmiProgressBar; 10 | (function (TcHmiProgressBar) { 11 | class TcHmiProgressBarControl extends TcHmi.Controls.System.TcHmiControl { 12 | /* 13 | Attribute philosophy 14 | -------------------- 15 | - Local variables are not set while definition in class, so they have the value 'undefined'. 16 | - On compile the Framework sets the value from HTML or from theme (possibly 'null') via normal setters. 17 | - The "changed detection" in the setter will result in processing the value only once while compile. 18 | - Attention: If we have a Server Binding on an Attribute the setter will be called once with null to initialize and later with the correct value. 19 | */ 20 | /** 21 | * Constructor of the control 22 | * @param {JQuery} element Element from HTML (internal, do not use) 23 | * @param {JQuery} pcElement precompiled Element (internal, do not use) 24 | * @param {TcHmi.Controls.ControlAttributeList} attrs Attributes defined in HTML in a special format (internal, do not use) 25 | * @returns {void} 26 | */ 27 | constructor(element, pcElement, attrs) { 28 | /** Call base class constructor */ 29 | super(element, pcElement, attrs); 30 | } 31 | /** 32 | * If raised, the control object exists in control cache and constructor of each inheritation level was called. 33 | * Call attribute processor functions here to initialize default values! 34 | */ 35 | __previnit() { 36 | // Fetch template root element 37 | this.__elementTemplateRoot = this.__element.find('.TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl-Template'); 38 | if (this.__elementTemplateRoot.length === 0) { 39 | throw new Error('Invalid Template.html'); 40 | } 41 | this.__elementProgressDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-progress'); 42 | this.__elementProgressBarDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-bar'); 43 | this.__elementLabelDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-label'); 44 | this.__elementAnimation = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-animation'); 45 | // Call __previnit of base class 46 | super.__previnit(); 47 | } 48 | /** 49 | * Is called during control initialize phase after attribute setter have been called based on it's default or initial html dom values. 50 | * @returns {void} 51 | */ 52 | __init() { 53 | super.__init(); 54 | } 55 | /** 56 | * Is called by tachcontrol() after the control instance gets part of the current DOM. 57 | * Is only allowed to be called from the framework itself! 58 | */ 59 | __attach() { 60 | super.__attach(); 61 | /** 62 | * Initialize everything which is only available while the control is part of the active dom. 63 | */ 64 | } 65 | /** 66 | * Is called by tachcontrol() after the control instance is no longer part of the current DOM. 67 | * Is only allowed to be called from the framework itself! 68 | */ 69 | __detach() { 70 | super.__detach(); 71 | /** 72 | * Disable everything which is not needed while the control is not part of the active dom. 73 | * No need to listen to events for example! 74 | */ 75 | } 76 | /** 77 | * Destroy the current control instance. 78 | * Will be called automatically if system destroys control! 79 | */ 80 | destroy() { 81 | /** 82 | * While __keepAlive is set to true control must not be destroyed. 83 | */ 84 | if (this.__keepAlive) { 85 | return; 86 | } 87 | super.destroy(); 88 | /** 89 | * Free resources like child controls etc. 90 | */ 91 | } 92 | //ProgressBar Properties 93 | getValue() { 94 | return this.__value; 95 | } 96 | setValue(valueNew) { 97 | //convert the new value 98 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 99 | //if converted value is null, get internal default 100 | if (convertedValue === null) { 101 | convertedValue = this.getAttributeDefaultValueInternal("Value"); 102 | } 103 | if (tchmi_equal(this.__value, convertedValue)) 104 | return; 105 | //save the new value 106 | this.__value = convertedValue; 107 | //Inform the system that the function has a changed result 108 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getValue"]); 109 | //Process the new Value 110 | this.__processValue(); 111 | } 112 | getMin() { 113 | return this.__min; 114 | } 115 | setMin(valueNew) { 116 | //convert the new value 117 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 118 | //if converted value is null, get internal default 119 | if (convertedValue === null) { 120 | convertedValue = this.getAttributeDefaultValueInternal("Min"); 121 | } 122 | if (tchmi_equal(this.__min, convertedValue)) 123 | return; 124 | //save the new value 125 | this.__min = convertedValue; 126 | //Inform the system that the function has a changed result 127 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getMin"]); 128 | //Process the new Value 129 | this.__processValue(); 130 | } 131 | getMax() { 132 | return this.__max; 133 | } 134 | setMax(valueNew) { 135 | //convert the new value 136 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 137 | //if converted value is null, get internal default 138 | if (convertedValue === null) { 139 | convertedValue = this.getAttributeDefaultValueInternal("Max"); 140 | } 141 | if (tchmi_equal(this.__max, convertedValue)) 142 | return; 143 | //save the new value 144 | this.__max = convertedValue; 145 | //Inform the system that the function has a changed result 146 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getMax"]); 147 | //Process the new Value 148 | this.__processValue(); 149 | } 150 | getLabel() { 151 | return this.__label; 152 | } 153 | setLabel(valueNew) { 154 | //convert the new value 155 | let convertedValue = TcHmi.ValueConverter.toString(valueNew); 156 | //if converted value is null, get internal default 157 | if (convertedValue === null) { 158 | convertedValue = this.getAttributeDefaultValueInternal("Label"); 159 | } 160 | if (tchmi_equal(this.__label, convertedValue)) 161 | return; 162 | //save the new value 163 | this.__label = convertedValue; 164 | //Inform the system that the function has a changed result 165 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabel"]); 166 | //Process the new Value 167 | this.__processLabel(); 168 | } 169 | getLabelFontSize() { 170 | return this.__labelFontSize; 171 | } 172 | setLabelFontSize(valueNew) { 173 | //convert the new value 174 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 175 | //if converted value is null, get internal default 176 | if (convertedValue === null) { 177 | convertedValue = this.getAttributeDefaultValueInternal("LabelFontSize"); 178 | } 179 | if (tchmi_equal(this.__labelFontSize, convertedValue)) 180 | return; 181 | //save the new value 182 | this.__labelFontSize = convertedValue; 183 | //Inform the system that the function has a changed result 184 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabelFontSize"]); 185 | //Process the new Value 186 | this.__processFontSize(); 187 | } 188 | //Color Properties 189 | getLabelColor() { 190 | return this.__labelColor; 191 | } 192 | setLabelColor(valueNew) { 193 | let convertedValue = TcHmi.ValueConverter.toObject(valueNew); 194 | //if converted value is null, get internal default 195 | if (convertedValue == null) { 196 | // @ts-ignore 197 | this.__labelColor = this.getAttributeDefaultValueInternal("LabelColor"); 198 | } 199 | else { 200 | // @ts-ignore 201 | this.__labelColor = convertedValue.color; 202 | } 203 | //Inform the system that the function has a changed result 204 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabelColor"]); 205 | this.__processLabelColor(); 206 | } 207 | getProgressBackgroundColor() { 208 | return this.__progressBackgroundColor; 209 | } 210 | setProgressBackgroundColor(valueNew) { 211 | let convertedValue = TcHmi.ValueConverter.toObject(valueNew); 212 | //if converted value is null, get internal default 213 | if (convertedValue == null) { 214 | // @ts-ignore 215 | this.__progressBackgroundColor = this.getAttributeDefaultValueInternal("ProgressBackgroundColor"); 216 | } 217 | else { 218 | // @ts-ignore 219 | this.__progressBackgroundColor = convertedValue.color; 220 | } 221 | //Inform the system that the function has a changed result 222 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getProgressBackgroundColor"]); 223 | this.__processProgressBackgroundColor(); 224 | } 225 | getProgressBarColor() { 226 | return this.__progressBarColor; 227 | } 228 | setProgressBarColor(valueNew) { 229 | let convertedValue = TcHmi.ValueConverter.toObject(valueNew); 230 | //if converted value is null, get internal default 231 | if (convertedValue == null) { 232 | // @ts-ignore 233 | this.__progressBarColor = this.getAttributeDefaultValueInternal("ProgressBarColor"); 234 | } 235 | else { 236 | // @ts-ignore 237 | this.__progressBarColor = convertedValue.color; 238 | } 239 | //Inform the system that the function has a changed result 240 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getProgressBarColor"]); 241 | this.__processProgressBarColor(); 242 | } 243 | //Methods 244 | __processValue() { 245 | //Calculate 246 | let limitValue = Math.min(Math.max(this.__value, this.__min), this.__max); 247 | let percent = ((limitValue - this.__min) * 100 / (this.__max - this.__min)); 248 | //Set % Width of the bar depending on min, max and value 249 | $(this.__elementProgressBarDiv).css("width", percent + "%"); 250 | //Hide Animation if progressbar is 100% 251 | if (limitValue == this.__max) { 252 | $(this.__elementAnimation).css("visibility", "hidden"); 253 | } 254 | else { 255 | $(this.__elementAnimation).css("visibility", "visible"); 256 | } 257 | } 258 | __processLabel() { 259 | //Update value for data-label 260 | $(this.__elementLabelDiv).attr("data-label", this.__label); 261 | } 262 | __processFontSize() { 263 | // @ts-ignore 264 | $(this.__elementLabelDiv).css("font-size", this.__labelFontSize + "pt"); 265 | } 266 | __processLabelColor() { 267 | // @ts-ignore 268 | $(this.__elementLabelDiv).css("color", this.__labelColor); 269 | } 270 | __processProgressBackgroundColor() { 271 | // @ts-ignore 272 | $(this.__elementProgressDiv).css("background", this.__progressBackgroundColor); 273 | } 274 | __processProgressBarColor() { 275 | // @ts-ignore 276 | $(this.__elementProgressBarDiv).css("background", this.__progressBarColor); 277 | } 278 | } 279 | TcHmiProgressBar.TcHmiProgressBarControl = TcHmiProgressBarControl; 280 | })(TcHmiProgressBar = Controls.TcHmiProgressBar || (Controls.TcHmiProgressBar = {})); 281 | })(Controls = TcHmi.Controls || (TcHmi.Controls = {})); 282 | })(TcHmi || (TcHmi = {})); 283 | /** 284 | * Register Control 285 | */ 286 | TcHmi.Controls.registerEx('TcHmiProgressBarControl', 'TcHmi.Controls.TcHmiProgressBar', TcHmi.Controls.TcHmiProgressBar.TcHmiProgressBarControl); 287 | //# sourceMappingURL=TcHmiProgressBarControl.js.map -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/TcHmiProgressBarControl.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Generated 1/18/2022 3:31:19 PM 3 | * Copyright (C) 2022 4 | */ 5 | module TcHmi { 6 | export module Controls { 7 | export module TcHmiProgressBar { 8 | export class TcHmiProgressBarControl extends TcHmi.Controls.System.TcHmiControl { 9 | 10 | /* 11 | Attribute philosophy 12 | -------------------- 13 | - Local variables are not set while definition in class, so they have the value 'undefined'. 14 | - On compile the Framework sets the value from HTML or from theme (possibly 'null') via normal setters. 15 | - The "changed detection" in the setter will result in processing the value only once while compile. 16 | - Attention: If we have a Server Binding on an Attribute the setter will be called once with null to initialize and later with the correct value. 17 | */ 18 | 19 | /** 20 | * Constructor of the control 21 | * @param {JQuery} element Element from HTML (internal, do not use) 22 | * @param {JQuery} pcElement precompiled Element (internal, do not use) 23 | * @param {TcHmi.Controls.ControlAttributeList} attrs Attributes defined in HTML in a special format (internal, do not use) 24 | * @returns {void} 25 | */ 26 | constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList) { 27 | /** Call base class constructor */ 28 | super(element, pcElement, attrs); 29 | } 30 | 31 | protected __elementTemplateRoot!: JQuery; 32 | protected __elementProgressDiv!: JQuery; 33 | protected __elementProgressBarDiv!: JQuery; 34 | protected __elementLabelDiv!: JQuery; 35 | protected __elementAnimation!: JQuery; 36 | protected __min: number | null; 37 | protected __max: number | null; 38 | protected __value: number | null; 39 | protected __label: string | null; 40 | protected __labelFontSize: number | null; 41 | protected __labelColor: TcHmi.SolidColor; 42 | protected __progressBackgroundColor: TcHmi.SolidColor; 43 | protected __progressBarColor: TcHmi.SolidColor; 44 | 45 | /** 46 | * If raised, the control object exists in control cache and constructor of each inheritation level was called. 47 | * Call attribute processor functions here to initialize default values! 48 | */ 49 | public __previnit() { 50 | // Fetch template root element 51 | this.__elementTemplateRoot = this.__element.find('.TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl-Template'); 52 | if (this.__elementTemplateRoot.length === 0) { 53 | throw new Error('Invalid Template.html'); 54 | } 55 | 56 | this.__elementProgressDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-progress'); 57 | this.__elementProgressBarDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-bar'); 58 | this.__elementLabelDiv = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-label'); 59 | this.__elementAnimation = this.__elementTemplateRoot.find('.jb-tchmiprogressbar-animation'); 60 | 61 | // Call __previnit of base class 62 | super.__previnit(); 63 | } 64 | /** 65 | * Is called during control initialize phase after attribute setter have been called based on it's default or initial html dom values. 66 | * @returns {void} 67 | */ 68 | public __init() { 69 | super.__init(); 70 | } 71 | 72 | /** 73 | * Is called by tachcontrol() after the control instance gets part of the current DOM. 74 | * Is only allowed to be called from the framework itself! 75 | */ 76 | public __attach() { 77 | super.__attach(); 78 | 79 | /** 80 | * Initialize everything which is only available while the control is part of the active dom. 81 | */ 82 | } 83 | 84 | /** 85 | * Is called by tachcontrol() after the control instance is no longer part of the current DOM. 86 | * Is only allowed to be called from the framework itself! 87 | */ 88 | public __detach() { 89 | super.__detach(); 90 | 91 | /** 92 | * Disable everything which is not needed while the control is not part of the active dom. 93 | * No need to listen to events for example! 94 | */ 95 | } 96 | 97 | /** 98 | * Destroy the current control instance. 99 | * Will be called automatically if system destroys control! 100 | */ 101 | public destroy() { 102 | /** 103 | * While __keepAlive is set to true control must not be destroyed. 104 | */ 105 | if (this.__keepAlive) { 106 | return; 107 | } 108 | 109 | super.destroy(); 110 | 111 | /** 112 | * Free resources like child controls etc. 113 | */ 114 | } 115 | 116 | //ProgressBar Properties 117 | 118 | getValue(): number | null { 119 | return this.__value; 120 | } 121 | 122 | public setValue(valueNew: number) { 123 | //convert the new value 124 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 125 | 126 | //if converted value is null, get internal default 127 | if (convertedValue === null) { 128 | convertedValue = this.getAttributeDefaultValueInternal("Value"); 129 | } 130 | 131 | if (tchmi_equal(this.__value, convertedValue)) 132 | return; 133 | 134 | //save the new value 135 | this.__value = convertedValue; 136 | 137 | //Inform the system that the function has a changed result 138 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getValue"]); 139 | 140 | //Process the new Value 141 | this.__processValue(); 142 | } 143 | 144 | getMin(): number | null { 145 | return this.__min; 146 | } 147 | 148 | public setMin(valueNew: number) { 149 | //convert the new value 150 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 151 | 152 | //if converted value is null, get internal default 153 | if (convertedValue === null) { 154 | convertedValue = this.getAttributeDefaultValueInternal("Min"); 155 | } 156 | 157 | if (tchmi_equal(this.__min, convertedValue)) 158 | return; 159 | 160 | //save the new value 161 | this.__min = convertedValue; 162 | 163 | //Inform the system that the function has a changed result 164 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getMin"]); 165 | 166 | //Process the new Value 167 | this.__processValue(); 168 | } 169 | 170 | getMax(): number | null { 171 | return this.__max; 172 | } 173 | 174 | public setMax(valueNew: number) { 175 | //convert the new value 176 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 177 | 178 | //if converted value is null, get internal default 179 | if (convertedValue === null) { 180 | convertedValue = this.getAttributeDefaultValueInternal("Max"); 181 | } 182 | 183 | if (tchmi_equal(this.__max, convertedValue)) 184 | return; 185 | 186 | //save the new value 187 | this.__max = convertedValue; 188 | 189 | //Inform the system that the function has a changed result 190 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getMax"]); 191 | 192 | //Process the new Value 193 | this.__processValue(); 194 | } 195 | 196 | getLabel(): string | null { 197 | return this.__label; 198 | } 199 | 200 | public setLabel(valueNew: string) { 201 | //convert the new value 202 | let convertedValue = TcHmi.ValueConverter.toString(valueNew); 203 | 204 | //if converted value is null, get internal default 205 | if (convertedValue === null) { 206 | convertedValue = this.getAttributeDefaultValueInternal("Label"); 207 | } 208 | 209 | if (tchmi_equal(this.__label, convertedValue)) 210 | return; 211 | 212 | //save the new value 213 | this.__label = convertedValue; 214 | 215 | //Inform the system that the function has a changed result 216 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabel"]); 217 | 218 | //Process the new Value 219 | this.__processLabel(); 220 | } 221 | 222 | getLabelFontSize(): number | null { 223 | return this.__labelFontSize; 224 | } 225 | 226 | public setLabelFontSize(valueNew: number) { 227 | //convert the new value 228 | let convertedValue = TcHmi.ValueConverter.toNumber(valueNew); 229 | 230 | //if converted value is null, get internal default 231 | if (convertedValue === null) { 232 | convertedValue = this.getAttributeDefaultValueInternal("LabelFontSize"); 233 | } 234 | 235 | if (tchmi_equal(this.__labelFontSize, convertedValue)) 236 | return; 237 | 238 | //save the new value 239 | this.__labelFontSize = convertedValue; 240 | 241 | //Inform the system that the function has a changed result 242 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabelFontSize"]); 243 | 244 | //Process the new Value 245 | this.__processFontSize(); 246 | } 247 | 248 | //Color Properties 249 | 250 | getLabelColor(): TcHmi.SolidColor { 251 | return this.__labelColor; 252 | } 253 | 254 | public setLabelColor(valueNew: TcHmi.SolidColor) { 255 | let convertedValue = TcHmi.ValueConverter.toObject(valueNew); 256 | 257 | //if converted value is null, get internal default 258 | if (convertedValue == null) { 259 | // @ts-ignore 260 | this.__labelColor = this.getAttributeDefaultValueInternal("LabelColor"); 261 | } else { 262 | // @ts-ignore 263 | this.__labelColor = convertedValue.color; 264 | } 265 | 266 | //Inform the system that the function has a changed result 267 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getLabelColor"]); 268 | this.__processLabelColor(); 269 | } 270 | 271 | getProgressBackgroundColor(): TcHmi.SolidColor { 272 | return this.__progressBackgroundColor; 273 | } 274 | 275 | public setProgressBackgroundColor(valueNew: TcHmi.SolidColor) { 276 | let convertedValue = TcHmi.ValueConverter.toObject(valueNew); 277 | 278 | //if converted value is null, get internal default 279 | if (convertedValue == null) { 280 | // @ts-ignore 281 | this.__progressBackgroundColor = this.getAttributeDefaultValueInternal("ProgressBackgroundColor"); 282 | } else { 283 | // @ts-ignore 284 | this.__progressBackgroundColor = convertedValue.color; 285 | } 286 | 287 | //Inform the system that the function has a changed result 288 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getProgressBackgroundColor"]); 289 | this.__processProgressBackgroundColor(); 290 | } 291 | 292 | getProgressBarColor(): TcHmi.SolidColor { 293 | return this.__progressBarColor; 294 | } 295 | 296 | public setProgressBarColor(valueNew: TcHmi.SolidColor) { 297 | let convertedValue = TcHmi.ValueConverter.toObject(valueNew); 298 | 299 | //if converted value is null, get internal default 300 | if (convertedValue == null) { 301 | // @ts-ignore 302 | this.__progressBarColor = this.getAttributeDefaultValueInternal("ProgressBarColor"); 303 | } else { 304 | // @ts-ignore 305 | this.__progressBarColor = convertedValue.color; 306 | } 307 | 308 | //Inform the system that the function has a changed result 309 | TcHmi.EventProvider.raise(this.__id + ".onFunctionResultChanged", ["getProgressBarColor"]); 310 | this.__processProgressBarColor(); 311 | } 312 | 313 | //Methods 314 | protected __processValue(): void { 315 | //Calculate 316 | let limitValue = Math.min(Math.max(this.__value, this.__min), this.__max); 317 | let percent = ((limitValue - this.__min) * 100 / (this.__max - this.__min)); 318 | //Set % Width of the bar depending on min, max and value 319 | $(this.__elementProgressBarDiv).css("width", percent + "%"); 320 | //Hide Animation if progressbar is 100% 321 | if (limitValue == this.__max) { 322 | $(this.__elementAnimation).css("visibility", "hidden"); 323 | } else { 324 | $(this.__elementAnimation).css("visibility", "visible"); 325 | } 326 | 327 | } 328 | 329 | protected __processLabel(): void { 330 | //Update value for data-label 331 | $(this.__elementLabelDiv).attr("data-label", this.__label); 332 | } 333 | 334 | protected __processFontSize(): void { 335 | // @ts-ignore 336 | $(this.__elementLabelDiv).css("font-size", this.__labelFontSize + "pt"); 337 | } 338 | 339 | protected __processLabelColor(): void { 340 | // @ts-ignore 341 | $(this.__elementLabelDiv).css("color", this.__labelColor); 342 | } 343 | 344 | protected __processProgressBackgroundColor(): void { 345 | // @ts-ignore 346 | $(this.__elementProgressDiv).css("background", this.__progressBackgroundColor); 347 | } 348 | 349 | protected __processProgressBarColor(): void { 350 | // @ts-ignore 351 | $(this.__elementProgressBarDiv).css("background", this.__progressBarColor); 352 | } 353 | } 354 | } 355 | } 356 | } 357 | /** 358 | * Register Control 359 | */ 360 | TcHmi.Controls.registerEx('TcHmiProgressBarControl', 'TcHmi.Controls.TcHmiProgressBar', TcHmi.Controls.TcHmiProgressBar.TcHmiProgressBarControl); 361 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Template.html: -------------------------------------------------------------------------------- 1 | 
2 |
3 |
4 |
5 |
6 |
7 |
8 |
-------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Themes/Base-Dark/Style.css: -------------------------------------------------------------------------------- 1 | /** Styles for theme: Base-Dark */ 2 | .TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl { 3 | 4 | } 5 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/TcHmiProgressBarControl/Themes/Base/Style.css: -------------------------------------------------------------------------------- 1 | /** Styles for theme: Base */ 2 | .TcHmi_Controls_JB_TcHmiProgressBar_JB_TcHmiProgressBarControl { 3 | 4 | } 5 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/packages.config.updates: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/packages.xsd: -------------------------------------------------------------------------------- 1 |  2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/tsconfig", 3 | "compileOnSave": true, 4 | "compilerOptions": { 5 | "module": "none", 6 | "target": "es6", 7 | "skipLibCheck": true, 8 | "lib": [ 9 | "dom", 10 | "scripthost", 11 | "es6", 12 | "es2017.intl" 13 | ], 14 | "types": [], 15 | "declaration": true, 16 | "sourceMap": true, 17 | "noEmitOnError": true, 18 | "suppressImplicitAnyIndexErrors": true, 19 | "noImplicitAny": true, 20 | "noImplicitThis": true, 21 | "strictBindCallApply": true, 22 | "strictNullChecks": false, 23 | "noImplicitReturns": true, 24 | "strictFunctionTypes": false, 25 | "strictPropertyInitialization": false, 26 | "alwaysStrict": false 27 | }, 28 | "include": [ 29 | "../Packages/Beckhoff.TwinCAT.HMI.Framework.12.752.0/runtimes/native1.12-tchmi/TcHmi.d.ts" 30 | ], 31 | "files": [ 32 | "TcHmiProgressBarControl/TcHmiProgressBarControl.ts" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /JB.TcHmiProgressBar/tsconfig.tpl.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/tsconfig", 3 | "compileOnSave": true, 4 | "compilerOptions": { 5 | "module": "none", 6 | "target": "es6", 7 | "skipLibCheck": true, 8 | "lib": [ 9 | "dom", 10 | "scripthost", 11 | "es6", 12 | "es2017.intl" 13 | ], 14 | "types": [], 15 | "declaration": true, 16 | "sourceMap": true, 17 | "noEmitOnError": true, 18 | "suppressImplicitAnyIndexErrors": true, 19 | "noImplicitAny": true, 20 | "noImplicitThis": true, 21 | "strictBindCallApply": true, 22 | "strictNullChecks": false, 23 | "noImplicitReturns": true, 24 | "strictFunctionTypes": false, 25 | "strictPropertyInitialization": false, 26 | "alwaysStrict": false 27 | }, 28 | "include": [ 29 | "$(Beckhoff.TwinCAT.HMI.Framework).InstallPath/TcHmi.d.ts" 30 | ], 31 | "files": [ 32 | "TcHmiProgressBarControl/TcHmiProgressBarControl.ts" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /ProgressBar.md: -------------------------------------------------------------------------------- 1 | # JB.TcHmiProgressBar for TwinCAT HMI 2 | 3 | Simple ProgressBar control with label made for TwinCAT HMI. 4 | 5 | ![enter image description here](https://user-images.githubusercontent.com/75740551/150125994-c4da1439-7d91-473f-aadf-a81134e71934.png) 6 | 7 | Properties for the control 8 | 9 | ![enter image description here](https://user-images.githubusercontent.com/75740551/150125980-5b28ac58-c4e6-4792-91ae-ba73e2f204a1.png) 10 | 11 | # Installation 12 | Easiest way to install this package is inside your TwinCAT HMI Project. 13 | **Right click** References and click "Manage NuGet Packages.." then browse for the file and install it! 14 | 15 | ![enter image description here](https://user-images.githubusercontent.com/75740551/101645035-32cef100-3a36-11eb-88f4-eeaccd3366d6.png) 16 | 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JB.TcHmiProgressBar for TwinCAT HMI 2 | 3 | Simple ProgressBar control with label made for TwinCAT HMI. 4 | 5 | ![enter image description here](https://user-images.githubusercontent.com/75740551/150125994-c4da1439-7d91-473f-aadf-a81134e71934.png) 6 | 7 | Properties for the control 8 | 9 | ![enter image description here](https://user-images.githubusercontent.com/75740551/150125980-5b28ac58-c4e6-4792-91ae-ba73e2f204a1.png) 10 | 11 | # Installation 12 | Easiest way to install this package is inside your TwinCAT HMI Project. 13 | **Right click** References and click "Manage NuGet Packages.." then browse for the file and install it! 14 | 15 | ![enter image description here](https://user-images.githubusercontent.com/75740551/101645035-32cef100-3a36-11eb-88f4-eeaccd3366d6.png) 16 | 17 | --------------------------------------------------------------------------------