Huge Progress today on CherryPy

Hello! I didn’t update anything for the past 2 days as I was learning HTML, CSS and jQuery on CodeAcademy.
It helped me a lot on my understanding and some basic rules to at least let me have an idea on how to display stuffs on website. (argh, i should have learnt it earlier! like 10 years ago may be?) Although i went through jQuery whole tutorial last Friday, I have almost forgotten about it :S. Without practising, the knowledge that we learnt is totally useless. I guess that’s what happen to my previous education. :X Anyway, it is never too late to discover this.

There are too much notes to myself which I won’t note them here because a quick google search can lead to the answer (umm, may be not direct sometimes). But i have taken down important notes on my notebook. I prefer writing and doodling than typing.

Yesterday was a headache because it was a sudden fear and stress on how to put everything together. The previous nice layout was prepared by Michael (a nice guy that i met on R-Pi forum), and i can’t read the css or js file at all๐Ÿ˜ฆ. Probably the operating system is different which causes the Newline to jumbled up.

But today is a new day and i tore down the work into little pieces which i can try one step at a time.๐Ÿ™‚ It proves to be very good. Oh, I submitted 2 of my best Final Year Project proposals.๐Ÿ™‚ Prof chose the first one on Raspberry Pi (yay!) but i feel sad for not being able to do the second one about Fibre Optic.:/ Yeah i know “fibre optic” sounds ridiculously “chim” (Singlish dict: difficult to understand) to myself. But it is an idea which i had in mind almost 3 years ago… and people are starting to do it.๐Ÿ˜ฆ Hmm, perhaps i should start blogging about my quirky idea in a column?๐Ÿ˜‰

Okay, a brief summary on what I did today (and some user stories):

    1. Hide and Show block on the web app.
      When user comes to the web page, he can only see a login button. Upon clicking the login button, a keypad will appear, prompting for user to key in password. When he clicks “Done”, the keypad will disappear and the control buttons that were hidden now show up. Refer screenshots.- things to do: authentication
    2. Text input (Form)
      I was so happy to see my first form which has a text input.
      In HTML:

      <form name= "input" action="#" method="get">
      <input type="text" name="firstlabel">

      I added a few more text inputs and they are all in one column. But i want them to be at side by side.

    3. Side-by-side text input
      The only way that i could think of is to use Table. So here i go! Step by step, i added one row, two rows, two columns and finally to 24 boxes (6 rows x 4 columns). See my table in the screenshot.๐Ÿ˜€
    4. I also added “Submit” button in the second column. (just add an empty <td> before it.)

      <tr>
      <td></td>
      <td><input type="submit" value="Submit"></td>
      </tr>

    5. Then i changed the word “firstlabel” and so on with the nice “switch.png” which i edit it from a big jpg image. Happy at this point of time!๐Ÿ˜€
Switch

Switch

  1. I also added index number.
  2. I get to practise my CSS with the shutdown server self-created button. (it has hover effect too :p) and i “Float” it to the right.

Tomorrow, i will carry on with the following:

  1. submit form and display the table
  2. add control button in the table
  3. hide the config table before login
  4. display status

Screenshots ๐Ÿ˜€ See how i take these: How to take Screenshot on Raspberryย Pi

tadaa~

tadaa~

Pressed login - keypad appear

Pressed login – keypad appear

Control buttons

Control buttons

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s