- Internet of Things with Arduino Blueprints
- Pradeeka Seneviratne
- 155字
- 2021-07-09 21:38:01
Adding a Cascade Style Sheet to the web user interface
Cascade Style Sheet (CSS) defines how HTML elements are to be displayed. Metro UI CSS (https://metroui.org.ua/) is a cascade style sheet that can be used to apply Windows 8-like style to your HTML elements.
The following Arduino sketch applies Windows 8-like style to the radio button group:
- Open your Arduino IDE and paste the code from the sketch named
B04844_01_05.ino
from the code folder of this chapter. - Between the
<head></head>
tags we have first included the JQuery library which consists of a rich set of JavaScript functions:client.println("<script src=\"https://metroui.org.ua/js/jquery-2.1.3.min.js\"></script>");
- Then, we have included
metro.js
andmetro.css
from the https://metroui.org.ua website:client.println("<script src=\"https://metroui.org.ua/js/metro.js\"></script>"); client.println("<link rel=\"stylesheet\" href=\"https://metroui.org.ua/css/metro.css\">");
Upload the sketch on your Arduino board and play with the new look and feel. You can modify the other HTML elements and even use the radio buttons by referring to the MetroUI CSS website documentation at https://metroui.org.ua/.

MetroUI CSS style applied to radio buttons
推薦閱讀
- Node.js 10實戰
- Visual FoxPro程序設計教程(第3版)
- FFmpeg入門詳解:音視頻流媒體播放器原理及應用
- Java從入門到精通(第4版)
- HTML5+CSS3網站設計教程
- 重學Java設計模式
- INSTANT Django 1.5 Application Development Starter
- Ext JS 4 Web Application Development Cookbook
- D3.js 4.x Data Visualization(Third Edition)
- Flutter跨平臺開發入門與實戰
- RSpec Essentials
- Multithreading in C# 5.0 Cookbook
- OpenCV with Python By Example
- Backbone.js Testing
- Django Design Patterns and Best Practices